JavaScript : approfondissements

JavaScript : la structure for ... in

La structure FOR ... IN est très utile pour parcourir un tableau de valeurs mais aussi une collection d'objets.

Parcourir un tableau de valeurs

Exemple: il faut parcourir un tableau d'entiers et lister uniquement ceux qui sont divisibles par 3.

Le script

		var nombres = [3,5,6,9,15,17] ; 
		var taille = nombres.length; 
		document.write("nombre d'entiers du tableau : " + taille + "<br>");
		for (var i in nombres) 
		{
			if(nombres[i]%3 != 0) continue;
			document.write(nombres[i] + " est divisible par 3  ! <br>"); 
		}

Un nombre est divisible par 3 si le reste de la division entière par 3 donne zéro.
Donc si ce n'est pas le cas il faut passer à l'itération suivante (instruction : continue).

Tests

Essayez ce script

4 nombres sont affichés sur 6 !

Parcourir une collection d'objets

Exemple : obtenir des infos sur les images d'une page

Le script

		var taille =document.images.length;
		document.write("<b>nombre d'images de la page: " + taille + "<br></b>");
		for (var i in document.images) 
		{
			var source = document.images[i].getAttribute("src");
			var legende = document.images[i].getAttribute("alt");
			document.write("Source et texte alternatif de chaque image : " + source +" "+ legende + "<br>");
		}

L'objet natif de JavaScript document.images référence toutes les images de la page.
On aurait pu écrire : var taille = document.querySelectorAll('img').length

Dans le code HTML chaque image à deux attributs : src, alt

Tests

Testez cette page

4 lignes sont affichées avec indication du chemin relatif et légende de chaque image.

Instructions BREAK et CONTINUE

Une boucle peut contenir les instructions break et continue.
Mais quel est l'intérêt d'utiliser ces instructions dans une boucle ? En fait elles simplifient la programmation JavaScript ! Entre autres, elles sont très utiles pour gérer les erreurs de saisie.

Je rappelle que JavaScript est sensible à la casse ; il faut écrire ces deux instructions en minuscules dans les scripts.

Instruction BREAK dans une boucle

L'instruction break permet une sortie anticipée d'une boucle.
Cette instruction est toujours dans un test.

Exemple : trois tentatives maximales pour saisie le mot de passe. Possibilité de sortir de la boucle dès la première saisie si cette dernière est correcte.

Le script correspondant

var valide =false; 
var vcompteur =0;
alert('pour la saisie du mot de passe vous avez droit à trois essais') ; 
while (vcompteur < 3)
	{ 
		var vmot = prompt('saisir le mot de passe') ; 
		if(vmot=="sesame") {valide =true ; break;}
		vcompteur++;
	}
	if (valide) alert("vous êtes connecté!");
	else alert("connexion impossible");

Une boucle est normalement exécutable 3 fois pour saisir le mot de passe.
Mais dès que le mot de passe saisi est valide ("sesame"), la variable valide passe à VRAI et il y a sortie prématurée de la boucle (commande break).

Testez ce code !

L'instruction break existe aussi dans la structure switch pour sortir du test multiple après exécution de l'un des case.

Seriez vous capable de produire le même programme mais cette fois construit avec une instruction do ... while ?

Instruction CONTINUE dans une boucle

L'instruction continue dans une boucle permet l'arrêt de l'itération en cours et le passage à la suivante.
Comme break l'instruction continue est exécutée si un test est vérifié.

Exemple : le programme doit afficher les N premiers nombres pairs.
Donc si le reste de la division entière du nombre par 2 ne donne pas zéro il ne faut pas afficher ce nombre (nombre impaire et alors passer à l'itération suivante.

Le script correspondant

	var maxi =prompt("saisir un entier inférieur ou égal à 60"); 
	maxi = parseInt(maxi); 	
	if (maxi >60) maxi =60; 
	// la limite ne peut dépasser 60
	for (var compteur = 0 ; compteur <= maxi; compteur++)
	{	
		if(compteur%2 != 0) continue;
		document.write(compteur + " est un nombre pair ! <br>"); 
	}

Notez le test : si le reste de la division entière est différent (!=) de zéro alors passage à l'itération suivante (commande continue)

Testez ce code !

Seriez vous capable d'imaginer le code affichant les N premiers nombres impairs ???

Utilisation de BREAK et CONTINUE dans le même script

Imaginons un programme qui permet de calculer la moyenne simple de N notes.

le nombre de notes (un entier)
la valeur de chaque note

Dans les deux cas il faut un contrôle de saisie puisqu'à chaque fois il y a risque de saisir du texte ou de se tromper dans le séparateur décimal.

Le script correspondant

var vnote ; vsomme = 0 ; vcompteur = 0; 
while (vcompteur < 3)
{ 		
	// 3 essais pour saisir le nombre de notes
	var vnombre =prompt('saisir le nombre de notes');
	if ( !isNaN(vnombre)) 
			{alert('saisie correcte') ; break;} else {alert('erreur saisie'); }
	// notez la double négation qui vaut affirmation 
	vcompteur++;
}
		
for(var vcompteur = 1; vcompteur <= vnombre ; vcompteur++)
{
	vnote = prompt('saisir une note'); 
	if (isNaN(vnote)) {alert('erreur de saisie'); continue; }
	// si la valeur saisie n'est pas numérique on passe à l'itération suivante 
	vsomme += parseFloat(vnote) ; 
} // fin for 
var vmoyenne = vsomme / vnombre; 
document.write('<br><br><br>');
document.write('<br> points : ' + vsomme); 
document.write('<br> nombre de notes : ' + vnombre); 
document.write('<br> moyenne : ' + vmoyenne) ; 
document.write('<br><br><br>');

Notez que le script est ici dans la partie HEAD de la page !
Ainsi le script va s'exécuter avant que ne soit chargé le DOM.
Si le script s'exécutait après le chargement du DOM alors la balise H3 serait effacée à cause des instructions document.write du script.

saisie du nombre de notes : il y a "break" (sortie de la boucle) si la valeur saisie est numérique ! Remarquez que le test repose sur une double négation qui vaut affirmation : !isNaN équivaut à "est numérique ?"
saisie d'une note : il y a "continue" (passage à l'itération suivante) si la valeur saisie n'est pas numérique

L'utilisation d'un formulaire HTML donnerait un programme plus ergonomique surtout avec les nouveaux types de champs : type number en particulier.

Testez ce code !

La console

Intérêt de 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 sais que 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.

Comment 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).

Exemple

Le code HTML correspondant

	...
<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% ; width : 10%; " >
</div>
...

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.

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 !

abs(x) : retourne la valeur absolue d'un nombre réel x
ceil(x) : retourne l'entier immédiatement supérieur au réel x
cos(x) : retourne le cosinus de x
exp(x) : retourne l'exponentielle de x
floor(x) : retourne l'entier inférieur ou égal le plus proche de x
log(x) : retourne le logarithme népérien (ln) de x
max(x1, x2, ...; xn) : retourne le plus grand nombre de la liste
min(x1, x2, ..., xn) : retourne le plus petit nombre de la liste
pow(x,n) : retourne x à la puissance n
random() : retourne un nombre aléatoire compris entre 0 et 1 (pas de paramètre à la méthode)
round(x) : retourne l'arrondi (entier) de x
sin(x) : retourne le sinus de x
sqrt(x) : retourne la racine carrée de x
tan(x) : retourne la tangente de x

JavaScript : la notation JSON

JSON (JavaScript Object Notation) est un format de données textuelles dérivé de la notation des objets du langage JavaScript. Il permet de représenter de l’information structurée comme le permet XML par exemple.

tableaux avec clés
tableaux bidemensionnels

Exemple 1 : les tableaux avec clés (identifiants textuels)

Il peut être plus pratique d'identifier une donnée par un identifiant textuel (on dit aussi une clé) plutôt que par un indice (comme pour un tableau élémentaire). On parle alors de tableaux avec clés ou tableaux associatifs.

Par exemple les infos relatives à l'auto de Valérie sont les suivantes :

clé	marque	modèle	places	p_fiscale	carburant
valeur	Citroën	C4	5 adultes	5 cv	essence

Le codage en Notation JSON serait le suivant : var autodeValerie = { marque : 'citroën', modele : 'C4' , places : '5 adultes' , p_fiscale : '5cv', carburant : 'essence', };

Exemple de tableaux avec clés et utilisant la notation JSON.

Le script de cet exemple

var jean_auto = 
		{
				marque : 'renault',
				modele : 'clio' , 
				places : '5 adultes' ,
				p_fiscale : '5cv', 
				carburant : 'gazole',
		};
		var paul_auto = 
		{
				marque : 'citroen',
				modele : 'C3' , 
				places : '5 adultes' ,
				p_fiscale : '4cv', 
				carburant : 'essence',
		};
alert("auto de Jean consomme du : " + jean_auto.carburant); 
// affiche gazole
alert("auto de Paul consomme du : " + paul_auto.carburant) ; 
// affiche essence
		
jean_auto.p_reelle = "100cv" ; 
// ajout d'un donnée identifié par la clé p_reelle
paul_auto.p_reelle = "90cv" ; 
// ajout d'un donnée identifié par la clé p_reelle
	
document.write("<hr>"); 
document.write("voiture de Jean : " + "<br>");
for (var cle in jean_auto) // parcours du premier tableau
			{ 
				document.write(cle + " : " +jean_auto[cle]) ; 
				document.write("<br>") ; 
			}
document.write("<hr>"); 
document.write("voiture de Paul :" + "<br>") ; 
for (var cle in paul_auto) // parcours du deuxième tableau
			{ 
			document.write(cle + " : " + paul_auto[cle]) ;
			document.write("<br>") ;
			}

On a créé deux tableaux associatifs intitulés "jean_auto" et "paul_auto".

Donc un tableau associatif est une liste de "clé/valeur".

Examinons quelques instructions du script :

alert(jean_auto.modele) : affiche la donnée ayant pour clé modele dans le tableau jean_auto
jean_auto.p_reelle = "100cv" : ajout d'une donnée identifiée par la clé p_reelle dans le premier jean_auto
for (var cle in jean_auto) : parcours du tableau jean_auto
alert(cle + ": " +jean_auto[cle]) : affichage d'une paire "clé/valeur" dans ce tableau

Pour parcourir un tableau associatif il faut utiliser la structure for ... in .

Exemple 2: les tableaux bidimensionnels

L'ULCO est une université multipolaire : quatre sites. Des personnels doivent faire des déplacements entre ces différents pôles. Afin de les indemniser il est important de connaître les distance entre les pôles.

Tableau des distances :

	calais	boulogne	dunkerque	saint omer
calais	0	34	46	44
boulogne	34	0	76	54
dunkerque	46	76	0	47
saint omer	44	54	47	0

Il s'agit d'un tableau bidimensionnel.
La notation JSON est parfaitement adapté pour représenter toutes ces données. Notation en JSON de ce tableau et quelques traitements

Le script de l'exemple

var distances = 
{
	'calais' : {'calais' : 0,'boulogne' : 34, 'dunkerque' : 46 , 'saintOmer' : 44}, 
	'boulogne' : {'calais' : 34,'boulogne' : 30, 'dunkerque' : 76 , 'saintOmer' : 54}, 		
	'dunkerque' : {'calais' : 46,'boulogne' : 76, 'dunkerque' : 0 , 'saintOmer' : 47}, 
	'saintOmer' : {'calais' : 44,'boulogne' : 54, 'dunkerque' : 47 , 'saintOmer' : 0}, 
} ;  // fin tableau bidimensionnel 
		
document.write ('calais-boulogne : ' + distances.calais.boulogne + "<br>") ; 
// affiche 34
document.write ('dunkerque-calais : ' + distances.dunkerque.calais+ "<br>")  ; 
// affiche 46
document.write ('saintOmer-calais : ' + distances.saintOmer.calais+ "<br>") ; 
// affiche 44
document.write ('calais-calais : ' + distances.calais.calais+ "<br>") ; 
// affiche 0
document.write ('boulogne-dunkerque : ' + distances.boulogne.dunkerque+ "<br>") ; 
//affiche 76
document.write ('boulogne-saintOmer : ' + distances.boulogne.saintOmer+ "<br>") ; 
// affiche 54

Commentaire

Remarquez la notation pointée dans les instructions: nomtableau.départ.arrivée.

La notation JSON n'est pas spécifique au langage JavaScript et est utilisée par d'autres langages.

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

JavaScript : approfondissements

JavaScript : la structure for ... in

Parcourir un tableau de valeurs

Le script

Tests

Parcourir une collection d'objets

Le script

Tests

Instructions BREAK et CONTINUE

Instruction BREAK dans une boucle

Le script correspondant

Instruction CONTINUE dans une boucle

Le script correspondant

Utilisation de BREAK et CONTINUE dans le même script

Le script correspondant

La console

Intérêt de la console

Comment afficher la console

Exemple

Le code HTML correspondant

Le script

Utiliser la console en guise de calculatrice

JavaScript : la notation JSON

Exemple 1 : les tableaux avec clés (identifiants textuels)

Le script de cet exemple

Exemple 2: les tableaux bidimensionnels

Le script de l'exemple

Commentaire