Accueil

Traduction

Tutoriel HTML - sommaire

Tutoriel HTML5 - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

HTML5 - autres API

Dans le chapitre précédent nous avons traité de l'API WebStorage.

Ces API faisant partie de la spécification HTML5 sont implémentées par les navigateurs.
Il n'y a donc aucune installation à prévoir !

L'API Selectors

L'API Selectors et une spécification W3C qui permet d'accéder aux objets du DOM à la même manière que CSS.

Pour référencer en JavaScript les noeuds du DOM (c'est à dire les éléments HTML de la page) il est d'usage d'utiliser les méthodes getElementsByTageName(), getElementsByClassName() et surtout getElementById() de l'objet document.

La fameuse méthode getElementById présente cependant un gros inconvénient. Elle oblige à affecter l'attribut ID à tous les noeuds susceptibles d'être manipulés via un script.

Nouvelles méthodes de référencement des éléments HTML dans un script

Grâce à ces nouvelles méthodes il devient souvent inutile d'affecter l'attribut id aux noeuds devant être manipulés par le script.

.

Exemple d'application

Le code HTML (extrait) d'une page web

Le script correspondant

Rappelons que la propriété textContent récupère seulement le texte (sans le balisage) alors que la propriété innerHTML récupère le texte et le balisage.

Le rang d'un élément HTML n'est pas toujours celui que l'on croit

Avec les méthodes querySelector() & querySelectorAll() on peut être tenté de référencer un élément par son rang.
Mais faites très attention lorsque une page inclut un autre fichier (via la fonction PHP include()) ...

Exemple de code d'une page (extrait) :

Pour référencer la boite DIV vous pouvez avoir le réflexe d'écrire dans le script : docment.querySelector('div') : premier DIV de la page.
Mais ce ne sera le cas si le fichier "debut.htm" comprend lui aussi des éléments DIV ...

API Geolocation

Récupérer la position GPS de l'internaute

Il faut utiliser l'API geolocation !
Votre positionnement (latitude et longitude) doit en principe s'afficher dans la boîte ci-dessous à condition bien sûr que votre navigateur autorise la géolocalisation et que la connexion soit sécurisée.
Pour des raisons de confidentialité CHROME et FIREFOX restreignent l'usage de l'API Géolocalisation aux sites accessibles de manière sécurisée c'est à dire les sites cryptés avec le protocole HTTPS.
Donc pour que ça marche il faut deux choses : site sécurisé et autorisation de la géolocalisation par le navigateur

Ci-dessus votre position GPS doit en principe s'afficher.

Le code correspondant

Le code HTML

Le script

A propos de la géolocalisation

Syntaxe

L'objet navigator de JavaScript possède désormais le sous objet geolocation.
Ce sous objet dispose entre autres de la méthode getCurrentPosition.
Cette méthode nécessite un paramètre obligatoire qui est en fait l'appel d'une fonction lorsque la localisation a réussi.
Ainsi dans l'exemple il y a appel de la fonction flocalisation.
La fonction de localisation a besoin d'un paramètre de type position. Ce paramètre possède entre autres la propriété coords.
La propriété coords comprend deux sous propriétés : latitude et longitude.

Suite

Récupérer sa position GPS, c'est bien mais se localiser sur une carte, c'est encore mieux.
Il faut alors coupler l'API geolocation avec l'application Google Maps ou avec OpenStreetMap.

L'API Canvas

Avec cet outil il est possible de dessiner dans une page web.
Concrètement l'outil Canvas c'est une nouvelle balise (CANVAS) et une bibliothèque de fonctions haut niveau.
Il faut ensuite utiliser un script pour remplir la zone de dessin Canvas.

Dans ce chapitre je n'en dis pas plus sur cette API car compte tenu de son importance, elle fait l'objet d'un tuto complet dans mon site. Tutoriel Canvas

Remarque

La norme HTML5 introduit aussi une nouvelle balise : SVG.
Il est donc possible désormais d'écrire directement du code SVG dans la page.
Dois-je rappeler que SVG est un langage de la famille XML qui permet aussi de réaliser des dessins (statiques ou animés).