JavaScript : la console

Vous avez remarqué que souvent dans mes scripts j'introduis des instructions provisoires basées sur la méthode alert.
Grâce à ces instructions je sais par exemple le type de données retourné. Ce qui est très important pour la suite du script. Par exemple si le type retourné est string je vais devoir convertir avant toute tentative d'incrémentation.
L'inconvénient d'une instruction basée sur alert est qu'elle provoque une pause dans l'exécution du programme.
Autre inconvénient : dès que j'ai bien vérifié la validité du script je dois supprimer ces instructions provisoires.

Les navigateurs récents proposent une alternative : 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.
Autre avantage : je n'ai pas besoin de supprimer ces instructions de débogage puisqu'elles s'affichent dans un volet qui en principe n'est pas affiché ; En effet la plupart des internautes ignorent tout de cette console.

Dans le chapitre suivant vous verrez comment déplacer le requin dans le cadre.

Le code de la page (extraits)

Le HTML :

... <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 de débogage (à supprimer ou pas)
	console.log("largeur zone : " + X + "type : " + typeof(X)) ; 
	console.log("hauteur zone : " + Y + "type : " + typeof(Y)) ; 
	console.log("abscisse requin : " + x + "type : " + typeof(x)) ; 
	console.log("ordonnée requin : " + y + "type : " + typeof(y)) ;

Notez les quatre instructions console.log qui vont me donner des infos très utiles.

Afficher la console

Pour afficher la console sous Chrome produisez la commande :
Personnaliser Chrome (trois points verticaux en haut à droite) / plus d'outils / outils de développement / onglet "console"
Il existe aussi un raccouri clavier très pratique pour afficher directement la console : ctrl + Maj + J

Pour afficher la console "web" sous Firefox la commande est :
Ouvrir menu (trois traits horizontaux en haut à droite) / outils de développement / console web

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

Utiliser la console en guise de calculatrice

Imaginons que vous n'ayez pas de calculatrice scientifique sous la main.
Il suffit d'utiliser toutes les fonctions mathématiques de l'objet Math dans le cadre de la console JavaScript.
Ouvrez la console (ctrl+Maj+J) puis produisez des commandes avec la syntaxe JavaScript. En effet JavaScript est le seul langage que comprennent tous les navigateurs.

Exemple 1 : calcul de la racine carré d'un nombre.
Il suffit de taper juste à la suite du chevron : Math.sqrt(9)
La console retourne 3 ; appuyer sur ENTER pour afficher de nouveau le chevron afin que la console soit prête pour une nouvelle commande.

Exemple 2 : puissance N de x.
Il suffit de taper à la suite du chevron : Math.pow(2,10)
La console retourne 1024.

Pour pouvez faire des calculs trigonométriques avec les méthodes sin(), cos(), etc.

Attention le M de Math doit être en majuscule !


Retour menu