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
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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 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.
Grâce à ces nouvelles méthodes il devient souvent inutile d'affecter l'attribut id aux noeuds devant être manipulés par le script.
.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.
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 ...
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.
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.
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.
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
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).