Javascript 03 : TEST LOGIQUE SI ET BOUCLE FOR NUMERIQUE

Nous allons aujourd'hui apprendre à réaliser une interface sans avoir à coder un à un toutes les balises div.

Comment ? Assez simplement : les langages de programmation ont la possibilité de faire des tests logiques SI qui permettent d'exécuter un code sous condition et des boucles POUR qui permettent d'effectuer plusieurs fois les mêmes instructions.

Attention, contrairement à Python, on ne place pas de majuscule au début de la valeur.

Deuxième chose importante : la comparaison s'écrit avec deux signes =, pas un seul ! Il va falloir faire attention.

1 - L’instruction conditionnelle SI – SINON

Commençons par voir comment choisir une action en fonction d’une entrée.

Application : Faisons un petit programme qui nous permet de lire un nombre rentré au clavier puis de dire s’il est positif, négatif ou nul.

Pour la page HTML

Pour le script js

Nous obtenons alors la structure suivante:

Remarque : Le copier-coller Explorateur vers Interpréteur est parfois un peu problématique : il peut créer un espace entre chaque ligne ! Plutôt que de les enlever une à une, vous pouvez aller dans le menu EDITION - Lignes - Enlever les lignes vides. Ca ira plus vite. Pour les tabulations, il faut demander gentiment à Notepad de le faire : EDITION – TRAITEMENT DES ESPACEMENTS – Transformer les espaces en tabulations.

01° Tester le code. A quoi sert le parseFloat ? Dans quel cas gardera-t-on "bizarre" dans sResultat ?

Comme vous l'avez vu, on ne rentre que dans un des cas disponibles :

Soit :

Soit :

Soit :

Sinon, on garde la valeur de base. Nous aurions donc pu écrire un else à la fin :

Voyons maintenant comment symboliser et expliquer tout ceci.

Représentation graphique : la même action logique sous forme graphique :

On voit que la condition est un losange qui possède deux sorties uniquement.

Les instructions sont des rectangles.

02° Compléter le code suivant : il doit demander si oui ou non vous êtes un humain. Il doit répondre "Bonjour humain !" si la réponse est "oui", et "Bonjour robot !" sinon.

Pour la page HTML

Pour le script js

Convention personnelle : j'ai choisi de prendre des id html comportant des underscores et des variables js utilisant des majuscules. Utiliser une convention fixe de ce type permet d'éviter de se tromper lorsqu'on veut utiliser une variable.

03° Tester avec une réponse avec une mauvaise réponse, comme chien ou chat par exemple. Conclusion ?

Voilà : le programme fait ce que vous lui avez demandé, pas ce que vous vouliez.

04° Modifier le programme pour qu'il affiche :

• "Bonjour humain !" si la réponse est "oui".
• "Bonjour robot !" si la réponse est "non".
• "Ereur de saisie" pour toute autre réponse.

05° Rajouter une demande supplémentaire lorsqu'on rentre dans le cas "humain" : on doit demander via un prompt "Etes vous un homme ? (oui/non)". Dans ce cas (et uniquement dans ce cas) :

• "Bonjour monsieur !" si cette seconde réponse est "oui".
• "Bonjour madame !" si cette seconde réponse est "non".
• "Ereur de saisie" pour toute autre réponse.

Dans le if testant si l'utilisateur est humain, il faudra donc déjà rajouter une ligne du style :

Si on analyse le code en terme de blocs imbriqués l'un dans l'autre, on obtient ceci :

Il reste à tester des conditions doubles. Une condition renvoie un booléen qui est true ou false. On peut tester plusieurs conditions à la fois à l’aide des codages suivants :

Voici comment :

Exemple : Réalisons un script à partir du code HTML suivant. Il doit afficher

• TRES BIEN si deux notes sont supérieures ou égales à 16,
• BIEN si les deux sont strictement supérieures à 10 et que l'une vaut 16 ou plus,
• MOYEN si les deux sont au moins supérieures ou égales à 10 et
• INQUIETANT si l'une des notes est inférieure ou égale 8,
• PAS BIEN sinon
.

On vous impose d'utiliser des ET et/ou des OU.

Le code HTML

Pour vous simplifier la vie, on applique la fonction changerAvis() lorsqu'une note change.

Voici le début du code js :

06° Tester le code. Rajouter le test permettant d'afficher INQUIETANT.

Si votre code ne fonctionne pas, pensez à regarder la console et le debogueur :

D'ailleurs, si vous utilisez le debogueur, vous aurez toujours la possibilité de voir le code du ou des scripts utilisés sur la page. Plutôt pratique pour voir comment on provoque tel ou tel effet.

07° Compléter le code de la fonction ci-dessous qui doit :

• Signaler via un simple alert si l'intensité R est supérieure à G et à B.
• Sinon, il doit préciser si R est supérieure à G ou à B.
• Si le rouge est l’élément principal, on doit rajouter 50 au rouge sans jamais pouvoir dépasser 255.

Une correction possible :

On voit que cette solution n'est pas optimisée : on va toujours tenter le test de la valeur supérieure à 255 même quand on ne change pas la valeur de rouge. Est-ce une faute ? Ca dépend :

• Si les conditions ne sont pas modifiées à l'avenir, il serait mieux de changer le programme car on fait souvent le test pour rien.
• Si les conditions sont modifiables à l'avenir, autant garder le test à cet endroit. Ainsi, si on veut à un moment augmenter de 20 la valeur rouge si elle est supérieure à l'une des deux, nous n'aurons pas à copier le test du 255 à deux endroits différents.

Si on analyse le test ET / AND :

Si on analyse le test OU / OR :

2 - la boucle itérative POUR (FOR) par itérateur chiffré

On peut utiliser un FOR pour faire une boucle revenant à réaliser les mêmes instructions X fois.

Comment fonctionne une boucle for ? Le cas le plus simple est facile à comprendre : on prend une variable i qui commence à la valeur zéro. On l'augmente de 1 à chaque tour tant qu'elle ne dépasse pas strictement une valeur de seuil i_MAX telle que i < i_MAX.

Si vous n'êtes pas familier avec le concept, utilisez le script ci-dessous :

Je vais commencer par vous présenter l’utilisation basique de la boucle for (initialisation de la variable; condition pour continuer; incrémentation). Comme ça, ça semble compliqué mais en fait, non.

08° Utiliser les entrées de la boucle présentée ci-dessus pour répondre aux questions suivantes : Quelles sont les différentes valeurs prises par i si on utilise 0 initialement et i<5 pour le test de continuité ? Va-t-on réellement jusqu’à 5 ou s’arrête-t-on juste avant ?

Et oui. On ne compte que jusqu'à 4, on s'arrête avant 5.

Pourquoi ?

Nous verrons plus loin la raison exacte mais si on regarde ce qui est affiché ...

... on voit qu'on compte jusqu'à 4 mais qu'on a bien 5 nombres : 0 - 1 - 2 - 3 - 4.

Et ca se code comment avec javascript ?

Regardons comme utiliser ceci dans un cas plutôt simple : on veut faire bouger le point en suivant le trajet. Vous pouvez utiliser les curseurs pour définir deux boucles FOR : une pour le déplacement à droite et une autre pour le déplacement vers le bas :

Pour la suite de cette partie, nous allons utiliser la console web pour visualiser les résultats. Pensez à l'afficher.

Voilà le code HTML de base:

Le code javascript de la fonction bouclage() est

09° Tester ce code en recréant les fichiers HTML et js. Ensuite, modifier le code pour afficher les chiffres de 0 à 20 inclus avec cette boucle FOR.

10° Regarder le code ci-dessous et prévoir ce qu’il va afficher à l’écran. Vérifier en lançant le code.

11° Réaliser un programme ne comprenant qu’une seule boucle FOR qui affiche (pour chaque valeur de x variant de 0 à 6) le carré de x et la puissance trois de x.

Remarque : En Javascript, la puissance 2 (le carré) se calcule avec x*x ou Math.pow(x,2) : Ainsi 6² se calcule aussi avec Math.pow(6,2). Il faut donc utiliser la méthode pow de la classe native Math. Pourquoi pow ? Pour power, puissance en anglais pour ceux qui ne suivent pas.

Si on veut que le compteur ne commence pas à 0, il suffit de la préciser lors de l'initialisation for (var i = 2 ; i < 6 ; i++) va donc prendre les valeurs 2, 3, 4 et 5.

12° Réaliser un programme qui affiche un à un les nombres compris entre 32 et 127.

Dans l'activité HTML sur les images, nous avons vu que les images ne sont que des successions de nombres stockés dans le fichier image.

C'est la même chose pour les caractères : String.fromCharCode(valeur) permet de connaître le caractère associé au nombre entier valeur. Comme vous le voyez, cette méthode appartient à l'objet global String.

13° Réaliser un programme qui affiche (dans la console) un à un les caractères associés aux nombres compris entre 32 et 127 sous la forme :

        Le caractère X correspond au code XXX

Tous les caractères sont-ils "imprimables" ?

On remarquera que le code 32 correspond à la touche espace et que le caractère 127 affiche quelque chose d'assez étrange. En réalité, ce code correspond à delete.

14° Essayer les caractères de 0 à 31. S'agit-il de caractères imprimables ? Que se passe-t-il pour le 10 ?

Si vous faites une recherche sur code ASCII, vous devriez découvrir assez facilement ce que code les codes de 0 à 10. Tous sont des caractères non imprimables. Le 9 correspond à la tabulation et le 10 correspond au saut de ligne (linefeed).

On peut également changer l'incrémentation. i-- diminue i de 1 plutôt que l'augmenter, i+=2 va augmenter i de 2 plutôt que d'augmenter de un en un. On aurait pu noter également i=i+2.

Si le pas est négatif, on compte en sens inverse : for (var i=9;i>1;i--) donne : 9 8 7 6 5 4 3 2, mais pas 1 puisque la condition n'est alors plus vérifiée.

15° Créer un programme qui affiche automatiquement une lettre sur 2 de A (code 65) à Z (code 90) puis qui affiche les lettres de Z à A. Utiliser les boucles FOR associées au code ASCII.

On ne l'utilisera pas ici mais sachez que String.fromCharCode(100, 101, 102) fonctionne également et renvoie la chaîne "def". Merveilleux non ? 100 pour d, 101 pour e et 102 pour f.

Il existe également une possibilité pour lire une chaîne de caractères string caractère par caractère en utilisant un FOR numérique : une chaîne de caractères n’est rien d’autre qu’une sorte de tableau ordonné de caractères.

A titre d'exemple, voilà un programme qui permet de définir une chaîne de caractères monTexte, de stocker dans nLongueur le nombre de caractères de la chaîne et qui demande quel numéro de caractère nCase afficher. On affiche alors le caractère numéro nCase.

Voici la page html

Comme vous le voyez, j'ai pris des noms différents de ceux proposés dans l'énoncé pour le HTML :

• nLongueur correspond à la balise d'id reponse8 et
• nCase correspond à la balise d'id position9.

On va faire le lien avec les vrais noms dans le javascript. Pourquoi ne pas avoir pris dans le html des id plus compréhensible ? C'est une bonne question. Comme vous allez le voir, le script n'est pas très compréhensible avec des noms comme ça. Je ne vais pas le faire souvent. Mais je voulais vous montrer l'importance de prendre des noms de variables ou d'id explicites. Ici, elles ne sont pas claires et ça va rendre le script un peu plus compliqué à comprendre. Et ce n'est jamais positif.

J'ai ajouté une balise span d'id reponse10 pour plus tard. Elle ne sert à rien pour l'instant.

Voilà le code javascript et la corresondance entre id et nom de variable :

Comme vous le voyez, ce n'est pas facile à comprendre. D'autant plus que les noms d'id ne sont pas EXPLICITES.

Un peu d'aide : les correspondances entre les codes js et les identifiants html sont :

Vous voyez, c'est parfois un peu pénible de devoir jongler entre trois niveaux de programmation (html, css et javascript). Angular js est un langage qui permet en gros d'écrire du code directement à partir de la page elle-même. Cela évite les corresondances parfois malheureuses où les élements ne possèdent pas le même nom. Il deviendra peut-être l'incontournable langage des années à venir.

16° Rajouter un test IF au code ci-dessus : on ne doit pas accepter de traiter un numéro de case inférieur à 0 ou supérieur à son plus grand numéro. Attention : la propriété length donne la longueur de la chaîne. Si elle renvoie 45, c’est qu’on peut lire les caractères du numéro 0 au numéro 44. Le caractère 45 n’existe pas !

17° Créer maintenant un code qui affiche le texte caractère par caractère jusqu’à la case demandée. Vous devrez pour l’exercice utiliser un FOR associé à un itérateur chiffré pour lire le contenu de la case 0, la placer dans un variable string, concatener la case 1, puis la case 2 … Il faudra envoyer la réponse dans l"id reponse10 du html.

3 - Exemple de création d'interface

Voyons ce qu'on peut en faire dans une interface Web. Je voudrais générer une application de 500 px sur 500 px.

Dans cette application, je veux créer un certain nombre de carrés bleus de 100 px de côté, separés entre eux par 20 px.

Les carrés seront des balises div , de classe carre, ayant initialement une couleur de background bleu.

Ces balises div , de classe carre, vont être générées par une fonction nommée creation qu'on activera avec un bouton.

Les carrés seront alors créés à l'intérieur d'une balise div d'identifiant conteneur.

Voici la page HTML de base :

Le CSS qu'il faudra nommer "interface1.css".

Pour l'instant, vous ne connaissez pas de structure de données permettant de stocker les références des balises div de classe carre sans les associer à une variable. Nous allons donc simplement les créer sans nous soucier de pouvoir les modifier ensuite. Pour cela, je vais vous fournir deux fonctions, destruction et rajouter_carre, que vous n'aurez pas à comprendre mais simplement à utiliser .

Voici le javascript qu'il faudra nommer "js_chap_03.js":

Que fait ce script ?

• On donne les valeurs initiales des variables largeur du carré, marge entre les carrés et nombreCarres de carrés.
• On détruit les éventuels anciens carrés à l'aide de la fonction destruction.
• On utilise une boucle FOR dont la variable i prend succéssivement les valeurs 0, 1, 2 puisque nombreCarres = 3 et que la condition de la boucle est i<nombreCarres.
• On calcule la position x du carré numéro i.
• On fixe à 0 la position y du carré numéro i
• On crée un carré bleu à l'aide de la fonction rajouter_carre.

Il faudra rajouter les codes des deux fonctions à la fin de votre fichier js. Ces fonctions ne seront pas expliquées ici. Vous verrez leur fonctionnement dans d'autres activités. Contentez vous de les copier aujourd'hui.

C'était long ! Pffff ! Comme vous le voyez, décrire un projet, ce n'est pas toujours très facile. Il faut savoir en dire assez, mais pas trop. Tout est histoire d'équilibre, et comme cela dépend de la perception des uns et des autres, il faut surtout trouver votre propre équilibre. Bien, passons à l'activité.

18° Analyser le programme, créer et sauvegarder les trois fichiers (html, css et js), lancer le html. Puis modifier le js pour que les carrés soient bien des carrés ayant la bonne largeur (100 pixels). Pensez à utiliser la variable largeur justement.

Le code est incomplet : si on demande 6 carrés, il trace n'importe quoi. Vous pouvez tenter.

Pour palier à cela, nous allons utiliser l'opérateur % qui fournit le modulo d'une division :

• 520%500 va renvoyer 20 car 520 = 500*1+20.
• 1300%500 va renvoyer 300 car 1300 = 500*2+300.

De cette façon, la coordonnée en x ne pourra jamais dépasser 500.

Et comment savoir qu'on veut placer le carré en ligne 0, 1, 2 ? Pour savoir cela, nous allons utiliser Math.floor(x/500) qui renvoit la valeur entière de la division de x par 500:

• Math.floor(400/500) renvoie 0 : ligne 0.
• Math.floor(520/500) renvoie 1 : ligne 1.

Voici le nouveau code avec la gestion des changements de lignes :

19° Tester le code avec 12 carrés. C'est presque ça, mais pas vraiment ! Trouver la valeur remplacant le 500 pour obtenir un affichage correct dans notre cas.

C'est bien mais c'est bleu...

Rajoutons des carrés rouge et jaune. Voici les codes à utiliser pour obtenir un carré rouge par exemple :

Rajoutons un test SI : nous voudrions que les carrés soient alternativement bleu, vert, rouge.

Pour cela, il suffit de prendre la variable i de la boucle FOR et d'en faire le modulo 3 :

• 0%3 donne 0
• 1%3 donne 1
• 2%3 donne 2
• 3%3 donne 1
• 4%3 donne 2
• ...

20° A l'aide de la description précédente des valeurs obtenues par un modulo 3, réaliser une interface qui rajoute des carrés alternativement bleu, rouge et jaune.

Pour voir le résultat attendu, cliquer sur le bouton Q20 dans l'interface présentée sous la question 19.

Et si vous bloquez, voici une correction possible :

Voilà. Il nous reste à voir le TANT QUE et le FOR nominatif.

4 - FAQ

Question : comment sortir d'une boucle for avant la fin ?

Question : Je voudrais compter de 0 à 6 mais sans passer par 5, c'est possible ?