Accueil

Tutoriel HTML - sommaire

Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

HTML5 - autes API

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

L'API Canvas

Avec cette API 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.

Attention une instruction basée sur la balise CANVAS se contente de créer une zones de dessin vide
Il faut ensuite utiliser un script pour remplir la zone de dessin Canvas.

Exemple

Le code HTML correspondant

<canvas width = '800' height ='100' style = 'width : 100% ; height : auto ; background : lime; '></canvas>

Les coordonnées du repère sont données par les attributs width & height.
La zone de dessin Canvas s'affiche conformément aux propriétés CSS width et height.

Le script correspondant

	var canevas = document.querySelector('canvas'); 
	var contexte = canevas.getContext('2d');
	var X = canevas.width ; 	var Y = canevas.height ; 
	for (i =1; i<=8 ; i++)
		{
			contexte.fillStyle ='yellow'; 
			contexte.fillRect(60,10,10,40); // cheminee
			contexte.fillRect(20,50,60,30); // mur
			contexte.fillStyle = 'red' ; 
			contexte.arc(50, 50, 30, Math.PI, Math.PI*2); //toiture
			contexte.fill() ; // colorier toiture
			contexte.fillStyle = 'black'; // changement couleur de remplissage
			contexte.fillRect(30,60,10,10);
			contexte.fillRect(50,60,10,20);
			contexte.fillRect(65,60,10,10);
			contexte.translate(100,0) ; // déplacement du point d'origine
		} // fin for

Un tuto dédié à l'API Canvas

Dans ce chapitre je n'en dis pas plus sur cette API car 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).

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 JavaScript.

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

Grâce à ces nouvelles méthodes il est souvent inutile d'affecter l'attribut id aux noeuds devant être manipulés en JavaScript

.

Exemple d'application

Le code HTML (extrait) d'une page web

... <h5>Premier titre</h5> <p class = 'remarque'>Premier paragraphe <br>Aaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaa</p> <p>Deuxième paragraphe de la page <br>bbbb bbbbb bbbbbbbbbbbbbbbb</p> <h5>Deuxième titre</h5> <p class = 'remarque' >Troisième paragraphe <br>cccccc ccccc cccccc cccccc</p> <p id = 'dernier'>Quatrième paragraphe <br>ddddd dddd dddddd dddd ddddddddd ddddd</p> <button>Afficher des infos sur la page</button> ...

Le script correspondant

	document.querySelector('button').onclick = function()
		{
		alert('Texte première bvalise H5 :' + document.querySelector('h5').textContent); 
		alert('Texte deuxième balise H5  :' + document.querySelectorAll('h5')[1].textContent); 
		alert('Texte première balise P :' + document.querySelector('p').textContent) ; 
		alert("Texte première balise avec classe 'remarque' :" + 
			document.querySelector('.remarque').textContent) ; 
		alert("Texte deuxième balise avec classe 'remarque' :" + 
			document.querySelectorAll('.remarque')[1].textContent) ; 
		alert('Texte troisième paragraphe :'+ 
			document.querySelectorAll('p')[2].textContent) ; 
		alert("Texte balise identifiée 'dernier':" + 
			document.querySelector('#dernier').textContent) ; 
		}

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.

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

... <div id ="gps" style = "width : 50% ; height : 100px ; border : 1px solid black ; text-align : center ; font-size : 14pt; margin : auto;"> </div>

Le script

	if(navigator.geolocation) // si navigateur supporte cette API
	{
			navigator.geolocation.getCurrentPosition(flocalisation) ;
		// appel de la fonction flocalisation dès que la localisation est réussie
	} 
	else alert('votre navigateur ne supporte pas la géolocalisation'); 	
	function flocalisation(position)
	{
		var infoposition = 'ma position : ' + '
'; infoposition += 'latitude : ' + position.coords.latitude + '
' ; infoposition += 'longitude : ' + position.coords.longitude + '
'; document.querySelector('#gps').innerHTML = infoposition ; } // fin fonction ...

A propos de la géolocalisation

Commentaire du script

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.
Dans la variable infoposition une phrase explicite qui devient le contenu de la boîte DIV est construite.

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.