Une alternative à alert : console.log

Le code de la page (extraits)

Le HTML :

... <h1>Une alternative à alert : console.log</h1> <div style = "display : block ; width : 90% ; height : 400px ; position : relative ; background-image: url(../images/fond3.jpg) ; background-size:cover; margin : auto ; " > <img id ='requin' src ='../images/requin.gif' style = "position : absolute ; top : 10px; left : 10% ; " > </div> <h2>Le code de la page (extraits)</h2> ...

Dans le cadre du "responsive web design" le width de DIV et le left de l'image sont en %.

Le script :

	//les dimensions de la boîte div : des attributs
	var zone = document.querySelector('div'); 
	var requin = document.querySelector('#requin') ; 
	var X =zone.style.width;
	var Y =zone.style.height;
	// le positionnement du gif animé : propriétés de style
	var x = getComputedStyle(requin).left;
	var y = getComputedStyle(requin).top;
	// instructions d'affichage provisoire
	console.log("largeur zone : " + X) ; 
	console.log("hauteur zone : " + Y) ; 
	console.log("abscisse requin : " + x) ; 
	console.log("ordonnée requin : " + y) ;

Vous avez remarqué que souvent dans mes scripts j'ai introduit des instructions basées sur la méthode alert afin de connaîre, par exemple le type de donnée retournée par la méthode getAttribute.
L'inconvénient d'une instruction basée sur alert est qu'elle provoque une pause dans l'exécution du programme.

Les navigateurs récents proposent une alternative à alert : console.log
Le gros avantage de cette instruction c'est qu'il n'y a plus d'interruption dans l'exécution du script car les résultats sont affichées dans la console de débogage (un volet en bas d'écran).

Test avec Chrome

Si vous utilisez comme navigateur Chrome, restez sur cette page et produisez la commande : outils/plus d'outils/console JavaScript.
Un volet s'affiche alors en bas de la page et vous informe sur les dimensions de la zone et le positionnement du requin.
Ci-dessous capture de l'écran obtenu sous Chrome après la commande (outils/plus d'outils/console JS) :

Pour largeur du DIV la console toujours répond 90% par contre pour l'abscisse du requin la valeur retournée est exprimée en pixels et elle est donc fonction de la largeur en % du DIV. Ainsi si le DIV a une largeur de 810px (largeur maximale :90% de 900) alors abscisse est de 81px.

Tests avec autres navigateurs

Si votre navigateur est Firefox produisez la commande : outils/développement/console du navigateur

Si votre navigateur est IE installez Chrome ou Firefox, c'est gratuit (lol).
Retour menu