Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site
La structure FOR ... IN est très utile pour parcourir un tableau de valeurs mais aussi une collection d'objets.
Exemple: il faut parcourir un tableau d'entiers et lister uniquement ceux qui sont divisibles par 3.
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).
4 nombres sont affichés sur 6 !
Exemple : obtenir des infos sur les images d'une page
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
4 lignes sont affichées avec indication du chemin relatif et légende de chaque image.
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.
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.
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).
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 ?
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.
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)
Seriez vous capable d'imaginer le code affichant les N premiers nombres impairs ???
Imaginons un programme qui permet de calculer la moyenne simple de N notes.
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.
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.
L'utilisation d'un formulaire HTML donnerait un programme plus ergonomique surtout avec les nouveaux types de champs : type number en particulier.
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.
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).
Dans le cadre du "responsive web design" le width de DIV et le left de l'image sont en %.
Notez les quatre instructions console.log qui vont me donner des infos très utiles.
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 !
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.
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 :
Exemple de tableaux avec clés et utilisant la notation JSON.
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 .
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
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.