Javascript 02 : METTRE EN MEMOIRE LES ENTREES DE L'UTILISATEUR

1 - prompt()

2 - Variables

3 - Aff.multi.

4 - input

5 - onchange

6 - test if

7 - contenteditable

8 - FAQ

Le premier volet (Javascript 1) visait à vous montrer comment on doit ordonner les instructions pour que le navigateur puisse afficher quelque chose à l’écran. Le second volet (Javascript 2) explique comment interagir avec lui via le clavier et surtout comment le préparer à gérer vos données. On commencera par un petit programme typique : la page vous demande votre nom et votre age et les affiche ensuite sur la page.

Nous allons utiliser de nouvelles méthodes :

Ainsi, la méthode prompt est un peu l’inverse de la méthode alert : on affiche une boîte de dialogue pour demander à l'utilisateur ce qu'il veut répondre.

De la même manière, nous verrons qu'on peut placer des zones de réponses dans une page html avec la balise input et récupérer le contenu à l'aide d'un script js en utilisant value sur la balise voulue.

1 - Lecture d'une entrée utilisateur avec prompt

Commençons par créer une page html qui nous permettra juste d'afficher le nom de l'utilisateur.

Elle possède :

une balise h1 ayant l'identifiant "mon_titre".
une balise p contenant un span ayant l'identifiant "nom".

J'utilise un identifiant plutôt qu'une classe car je veux être certain de cibler uniquement ce span précis. Or, on pourrait avoir plusieurs balises ayant la classe "nom" par exemple.

<!DOCTYPE html>

<html>

<head>

<title>Lecture avec js</title>

</head>

<body>

<h1 id="mon_titre">-- PAGE DE LECTURE UTILISATEUR AVEC PROMPT--</h1>

</header>

</section>

<p>Voilà le footer</p>

</footer>

</body>

</html>

Nous allons placer un script javascript dans le même dossier que votre page. Nommons le chap_02.

var sNom = prompt("Quel est votre nom ?");

document.getElementById("nom").innerHTML = sNom;

Nous obtenons :

js_act2

index.html

chap_02.js

01° Sauvegarder l'ensemble et lancer le programme.

Nous obtenons ainsi :

On rentre son nom

Et on obtient

Bon, comment cela fonctionne-t-il ?

var sNom = prompt("Quel est votre nom ?");

On déclare une variable sNom et on y stocke le résultat du prompt.

document.getElementById("nom").innerHTML = sNom;

On recherche dans le document html la balise identifiée par l'id "nom" et à l'aide de .innerHTML, on y place le contenu de la chaîne de caractères contenue dans la variable sNom.

02° Rajouter quelques lignes de code dans le fichier html et le fichier js pour qu'on puisse afficher le nom, le prénom et l'age de l'utilisateur.

Remarque : Comme Python, js est sensible à la casse (il distingue les majuscules et les minuscules). Attention donc, la variable Prenom et la variable prenom sont deux variables différentes. Habituellement, on utilise dans le nom des variables que les lettres de a à z, de A à Z, des chiffres et l'underscore. On pourra ainsi noté mon_nom. N'utilisez pas d'accents.

Par convention, les noms des variables simples, des variables objets et des fonctions commencent par une minuscule. On utilisera souvent par exemple mon_nom ou monNom.

monnom sera à éviter par contre : le nom doit être facilement lisible.

On peut utiliser les lettres accentuées mais l'usage est d'éviter de les utiliser pour garantir la bonne interprétation du nom de la variable quelque soit l'encodage utilisé pour les caractères.

Souvenez-vous également que Javascript comme Python fait du typage dynamique des variables. Ainsi, j'ai noté sNom pour qu'on se souvienne que sNom devrait être un string mais rien ne dit qu'il restera un string jusqu'à la fin. En effet, il est possible, qu'un peu plus loin dans le programme, on place un nombre dans la variable. sNom deviendrait alors un integer... C'est une grosse différence avec C++ ou Java où le typage est statique : si on déclare sNom en string et qu'on tente ensuite d'y stocker un integer, on déclenche une erreur.

Bref, j'ai placé s devant mes variables car la méthode prompt renvoie toujours un string.

03° Demander le nom, le prénom et l'age de l'utilisateur. Ensuite, tenter d'afficher l'age qu'aura l'utilisateur 10 ans plus tard.

Voici le bout de HTML à utiliser dans la balise section :

Attention, il ne s'agit que d'un bout du HTML :

<p>Prénom : <span id="prenom">*</span></p>

Avec vos connaissances actuelles, vous devriez obtenir :

Pas facile. 47+10 affiche 4710. C'est un poil agé... Si vous avez suivi le chapitre précédent ou celui sur Python vous devriez savoir pourquoi.

Javascript s'adapte : il transforme +10 en +"10" puisque sAge est un string issu de la méthode prompt.

...CORRECTION JS...

var sNom = prompt("Quel est votre nom ?");

var sPrenom = prompt("Quel est votre prénom ?");

var sAge = prompt("Quel est votre nom ?");

document.getElementById("agePlus10").innerHTML = sAge+10;

2 - Le bon type de variable pour le bon type d’action

Nous avions déjà rencontré ce problème lors de l'activité précédente. Nous avons réussi à contourner le problème en utilisant des parenthèses. Ici, ça ne fonctionnerait pas...

Il va falloir utiliser des fonctions permettant le changement de type :

Pour transformer une variable x (intialement un string) en integer (nombre entier), on utilise x = parseInt(x).
Pour transformer une variable x (intialement un string) en float (nombre réel), on utilise x = parseFloat(x).
Pour transformer une variable x (initialement un integer) en string, on utilise la méthode toString : x = x.toString().
Pour transformer une variable x (initialement un integer) en string, on peut aussi faire x = x + ''.

04° Avec ces nouvelles connaissances, modifiez le code pour obtenir la bonne valeur de l'age 10 ans plus tard.

...CORRECTION JS...

var sNom = prompt("Quel est votre nom ?");

var sPrenom = prompt("Quel est votre prénom ?");

var sAge = prompt("Quel age avez-vous ?");

var age = parseInt(sAge);

document.getElementById("agePlus10").innerHTML = age+10;

Puisqu’on veut faire du calcul, on a donc dû transformer l'entrée de l'age en nombre pour parvenir à l'additionner à 10 qui est bien un nombre. On doit donc stocker un nombre dans les variables de type number.

On notera que nous aurions pu également faire cela pour gagner une ligne :

...CORRECTION 2...

var sNom = prompt("Quel est votre nom ?");

var sPrenom = prompt("Quel est votre prénom ?");

var age = parseInt(prompt("Quel age avez-vous ?"));

document.getElementById("agePlus10").innerHTML = age+10;

Les types de variables disponibles et les contenus attendus de ces variables sont donnés ci-dessous :

Type de variable	Nom du type pour Javascript	Ce qu'il peut contenir
Booléen/Boolean	Boolean	false (0) or true (1) (avec une minuscule)
Nombre/Number	Number	Un nombre entier ou réel (attention aux limites maximales) comme 12
Chaîne de caractère	String	Une chaîne de caractères, c'est-à-dire un mot ou une phrase. On la définit entre deux guillemets ou apostrophes."chaîne de caractère"'autre chaîne de caractère'

Premier constat : javascript ne possède qu'un seul type de variable numérique. les integers (entiers), les floats (réels)... sont tous de type number.

Les fonctions parseInt() et parseFloat() sont là uniquement pour savoir comment transformer la chaine de caractères en nombre. Voilà un exemple de code et le résultat qu'il affichera :

Premier exemple

var test = "10.5";

window.alert(test);

window.alert(parseInt(test));

window.alert(parseFloat(test));

On obtiendrait :

Pour window.alert(test);, le navigateur affiche 10.5

Pour window.alert(parseInt(test));, le navigateur affiche 10

Pour window.alert(parseFloat(test));, le navigateur affiche 10.5

Second exemple

var test = "10.5R6";

window.alert(test);

window.alert(parseInt(test));

window.alert(parseFloat(test));

On obtiendrait :

Pour window.alert(test);, le navigateur affiche 10.5R6

Pour window.alert(parseInt(test));, le navigateur affiche 10

Pour window.alert(parseFloat(test));, le navigateur affiche 10.5

3 - Affectation multiple

Imaginons qu’on désire créer 6 variables a,b,c,d,e et f contenant 3,78. Il faudrait créer 6 lignes de code. On peut faire plus simple avec la ligne suivante :

var a = b = c = d = e = f = 3.78;

Remarque : Il existe des « règles » liées à la nomination des variables que la plupart des programmateurs respectes car elle permet de faire facilement la différence entre variable et fonction :

Le nom d’une variable doit être explicite dans le cadre du programme. Pas de nom éloigné de son contenu.
Le nom d’une variable doit être composé de minuscule : exemple avec argent ou age ou nom.
Si elle se compose de plusieurs mots, on sépare les différents mots par un underscore ( _ ) : argent_poche_droite.
Si elle se compose de plusieurs mots et que le langage différencie majuscule et minuscule, on place la première lettre de chaque mot en majuscule (sauf le premier qui reste intégralement en minuscule) : argentPocheDroite.

Javascript, Java, Python et C++ sont sensibles à la casse : ils distinguent majuscules et minuscules.

Remarque 2 : Modifier le contenu d’une variable (avec l'utilisation du = ) se nomme une affectation. Si l’ancien contenu d’une variable n’a plus d’importance après traitement de l’information, on peut éventuellement l’utiliser pour garder en mémoire le calcul qu’on a fait à partir d’elle : maVariable = maVariable + 5;.

Sur ce site, lors d'une affectation, on représente le nom de la variable en GRAS.

Au final, on retiendra que Javascript ne demande pas explicitement quel est le type d’une variable. Il s’arrange pour utiliser celle qui lui semble la plus adaptée.

Déclarez : var a = 5 et a sera un number (alors que c'est un integer sous Python).

Déclarez : var a = 5.1 ou a = 5.0 et a sera un number aussi ! (mais un float sous Python).

Déclarez : var a = ‘bonjour’ ou a = "bonjour" et a sera un string.

Les fonctions natives parseInt(x) et parseFloat(x) permettent de convertir un string x en integer ou float.

4- Balise input, attribut onClick et méthode getElementById

Nous allons voir maintenant comment récupérer des données fournies par l'utilisateur sans avoir à faire apparaître une boîte de dialogue. Comme vous vous en doutez, il va s'agir d'utiliser une nouvelle balise HTML, la balise input. Pourquoi ne pas l'avoir utilisée plus tôt ? Simplement parce que sans javascript, cela n'a pas beaucoup de sens. Sans javascript, pas moyen de pouvoir traiter les réponses.

Qu'est-ce que la balise input ?

C'est une balise qui peut s'intégrer dans un formulaire (la balise <form> et qu'on peut ensuite envoyer vers un serveur distant. Elle définit donc un ensemble d'interfaces permettant à l'utilisateur de fournir des réponses.

La balise input est un peu l'équivalent du widget des interfaces Tk de Python. On retrouvera donc les zones de texte, les boutons, les menus à choix multiples...

Nous ne traiterons pas ici de l'intégration d'un input à un formulaire. Mais la plupart du temps, vous trouverez donc les balises <input> à l'intérieur d'un conteneur se trouvant être une balise <form>.

Il existe plusieurs types de balise input.

Commençons par celle qui nous intéresse ici : la balise input de type texte.

Ce sont des balises initialement de dispositon inline (sans passage à la ligne donc). En voilà des exemples à la suite les uns des autres.

Ce test est obtenu avec le code suivant:

On voit que l'attribut placeholder permet d'afficher un texte le temps que l'utilisateur commence à taper sa réponse. value impose elle une valeur par défaut qu'il faut supprimer pour pouvoir mettre autre chose.

Dans un style assez proche, on trouve le type password.

Ce test est obtenu avec le code suivant:

Si l'utilisateur doit rentrer un nombre, on peut utiliser un type number.

Ce test est obtenu avec le code suivant:

On trouve aussi des curseurs :

<div>

</div>

Comme vous le voyez, sans gestion javascript, la valeur du curseur ne change pas automatiquement.

On a des menus à choix :

1er ES
1er L
1er S
1er STI2D

Bref, on trouve beaucoup de formes de réponses possibles. La seule qui nous intéresse aujourd'hui sera le input text. Nous verrons les autres plus tard. On peut de toutes manières tout résoudre en utilisant uniquement les inputs text. Les autres sont pratiques mais pas indispensables.

Si vous voulez rapidement plus d'informations sur les différents types d'inputs, vous connaissez l'adresse : w3schools.

Nous les traiterons sinon pendant le chapitre sur les interfaces.

Nous allons donc voir comment faire la même chose que précédemment mais sans passer par les boîtes de dialogue.

05° Utiliser le code html ci-dessous et lancer le code sur le navigateur après avoir vidé votre fichier js de son contenu.

<!DOCTYPE html>

<html>

<head>

<title>Lecture avec js</title>

</head>

<body>

<h1 id="mon_titre">-- PAGE 2 : LECTURE D'ENTREE AVEC INPUT --</h1>

</header>

<p>Prénom : </br><input type="text" id="prenom" placeholder="Votre prénom"></p>

<p>Dans dix ans, vous aurez <strong id="ageplus10">?</strong> ans.</p>

</section>

<p>-- Footer --</p>

</footer>

</body>

</html>

Vous devriez pouvoir noter des choses sur la page. Par contre, les données ne sont pas transmises ou utilisées pour l'instant.

Pour récupérer le contenu d'un input en local avec javascript, nous allons tenter d'utiliser les identifiants donnés aux différents inputs. Nous verrons plus tard qu'il existe d'autres méthodes mais comme vous connaissez déjà getElementById, ce n'est pas la peine de se compliquer la vie.

06° Parmi les deux choix proposés, quelle est la meilleur solution pour aller lire le contenu de la balise input contenant le nom ? Que vont contenir les deux variables ?

var solutionUne = document.getElementById("nom");

var solutionDeux = document.getElementById("nom").value;

...CORRECTION JS...

Le première solution va stocker dans la variable solutionUne la référence du input. On ne va pas lire son contenu. Pour récuperer le contenu, il faudra le faire en deux lignes :

var solutionUne = document.getElementById("nom");

var lecture = solutionUne.value;

Avec la deuxième solution, on ne stocke pas la référence du input : on va simplement le chercher. Ensuite, on l'utilise pour aller récupérer l'attribut value obtenue avec cette adresse.

On pourra donc écrire simplement en une ligne :

var lecture = document.getElementById("nom").value;

Remarque sur le code couleur :

A partir de maintenant, nous allons utiliser un code couleur spécifique pour les variables contenant l'adresse d'une balise HTML :

var refInput = document.getElementById("nom");

var lecture = refInput.value;

Retenez donc maintenant que toutes les variables js ayant cette couleur orangée sont des variables contenant la référence d'une balise HTML.

Nous allons également utiliser un code couleur pour certaines variables faisant référence au document HTML lui-même. Par exemple document.

Bref, voici le code choisi pour aller lire le contenu du input :

var sNom = document.getElementById("nom").value;

alert("Votre nom est "+sNom);

07° Utiliser le code donné. Ca marche ou pas cette histoire ?

La page s'affiche bien mais la fenêtre de dialogue s'ouvre immédiatement, avant même qu'on ai rempli une réponse !

Comment faire pour ne pas déclencher le script immédiatement ? Une possibilité est d'attendre que l'utilisateur rentre ses valeurs puis clique sur un bouton. Nous allons utiliser une balise servant à cela : la balise input button.

08° Dans le html, insérer la balise suivante entre la balise input de l'age et celle de l'age+10 :

<p>Prénom : </br><input type="text" id="prenom" placeholder="Votre prénom"></p>

<p>Dans dix ans, vous aurez <strong id="ageplus10">?</strong> ans.</p>

</section>

Cette balise va rajouter un bouton à l'écran sur lequel est noté "Click Me !". Lorsqu'on clique dessus, le code indique d'aller activer une fonction nommée mise_a_jour(). Notez bien que c'est la présence des parenthèses qui donne l'indication de la nature de l'objet mise_a_jour(). Qu'est-ce qu'une fonction ? Simplement une série d'instructions qui ne seront executées que lorsqu'on aura appelé la fonction.

09° Dans votre fichier js, remplacer le script par celui proposé : on y définit la fonction qui sera utilisée en cliquant sur le bouton.

function mise_a_jour() {

var sNom = document.getElementById("nom").value;

alert("Votre nom est "+sNom);

}

Vous noterez qu'on retrouve une notation assez similaire de celle du CSS : les instructions de la fonction mise_a_jour sont entre deux accolades et on utilise la tabulation pour que le code soit plus clair. Pensez à activer l'affichage des tabulations dans Notepad++ (Affichage - Symboles spéciaux).

Par contre, habituellement, on place l'accolade de début d'instructions de la fonction sur la même ligne que le nom de la fonction.

Et voilà : ça fonctionne enfin.

Un peu de vocabulaire :

Qu’est-ce qu’une fonction ?

C’est simple : il s’agit de lignes de codes qui ne s’activent que lorsqu’on les appelle. Et on peut les appeler autant de fois qu’on veut, il suffit de taper le code une seule fois. Exemple :

function mise_a_jour() {

alert("Vous venez de lancer la fonction !");

}

On crée une fonction en Javascript à l’aide du mot clé function function mise_a_jour().

On doit nécessairement faire suivre le nom de la fonction de () (nous verrons pourquoi plus tard ) : function mise_a_jour() . C'est le fait qu'on trouve () ou (blabla) après une chaîne de caractères qui nous indique qu'on a une fonction ou une méthode (une fonction de classe).

Attention, les instructions qui doivent s’exécuter lors de l'appel doivent être situées entre les deux accolades { et }.

Pour plus de visibilité, elles doivent être tabulées (touche TAB) pour qu'un observateur humain puisse comprenne qu’elles font partie de la fonction. Il est donc vital de bien tabuler votre code. Dans Notepad++, on peut faire s'afficher les tabulations à l'aide du menu AFFICHAGE - SYMBOLES SPECIAUX - AFFICHER ESPACES ET TABULATIONS. Attention, il s'agit juste d'une convention d'écriture : le navigateur se moque totalement que cela soit tabulé ou non (comme dans le code HTML ou CSS par exemple).

Dernier point vital : on finit la définition de la fonction par }: cela indique au navigateur que les instructions suivantes ne font pas partie de la fonction.

10° Il vous reste à finir le programme et à afficher l'age qu'aura la personne dans 10 ans à partir des indications qu'il va rentrer dans l'input age.

On peut obtenir ce résultat là :

...CORRECTION JS...

function mise_a_jour() {

var nAge = parseInt(document.getElementById("age").value);

document.getElementById("ageplus10").innerHTML = nAge+10;

}

11° Un petit exercice final : après avoir calculé l'age dix ans plus tard, on veut remplacer le nom par "***"... A vous d'agir après avoir lu le rappel ci-dessous :

Lire et modifier le contenu du HTML

Pour lire ou modifier le contenu interne d'une balise HTML, il faut utiliser innerHTML :

Si on a ceci en HTML :

<h1 id="mon_titre">-- PAGE DE LECTURE UTILISATEUR AVEC PROMPT--</h1>

Le innerHTML vaut -- PAGE DE LECTURE UTILISATEUR AVEC PROMPT--

Pour lire et mémoriser ce contenu interne depuis un script javascript, il faut taper ceci :

var lecture = document.getElementById("mon_titre").innerHTML;

Pour modifier le innerHTML de la balise <h1>, il faut taper ceci par exemple :

document.getElementById("mon_titre").innerHTML = "Nouveau contenu";

Passons maintenant aux inputs :

Lire et modifier la valeur d'une balise INPUT

Pour lire ou modifier la valeur d'un input, c'est un peu pareil mais on remplace innerHTML par value :

Si on a ceci en HTML :

Pour lire et mémoriser la valeur depuis un script javascript, il faut taper ceci :

var lecture = document.getElementById("nom").value;

Pour modifier la valeur d'une balise input, il faut taper ceci par exemple :

document.getElementById("nom").value = "Titi";

...CORRECTION JS...

function mise_a_jour() {

var nAge = parseInt(document.getElementById("age").value);

document.getElementById("ageplus10").innerHTML = nAge+10;

var refNom = document.getElementById("nom");

refNom.value = "***";

}

On notera pour finir que dans la correction proposée, nous aurions tout aussi bien pu remplacer les deux dernières lignes par une seule, sans mémoriser la référence de la balise.

5- onchange

Et si on veut qu'un script s'applique lorsque l'entrée change, sans pour autant utiliser un bouton ?

Pour le bouton, nous avons utilisé l'attribut onclick sous la forme onclick="mise_a_jour()".

Mais on peut faire mieux : on peut activer une fonction à chaque fois que la valeur rentrée change : il suffit d'utiliser l'attribut onchange sous la forme onchange="mise_a_jour()".

Remarque : on a onchange et onclick. Ne mettez pas de majuscule dans l'attribut.

12° Supprimer l'input BUTTON et rajouter simplement l'attribut à la balise onchange à la balise de l'age :

<!DOCTYPE html>

<html>

<head>

<title>Lecture avec js</title>

</head>

<body>

<h1 id="mon_titre">-- PAGE 3 : LECTURE AUTOMATIQUE AVEC ONCHANGE --</h1>

</header>

<p>Prénom : </br><input type="text" id="prenom" placeholder="Votre prénom"></p>

<p>Dans dix ans, vous aurez <strong id="ageplus10">?</strong> ans.</p>

</section>

<p>-- Footer --</p>

</footer>

</body>

</html>

Voilà maintenant la fonction changerAge à placer dans le script js :

function changerAge() {

var nAge = parseInt(document.getElementById("age").value);

document.getElementById("ageplus10").innerHTML = nAge+10;

}

13° Tester. Vous devriez voir que l'affichage de l'age +10 change tout seul lorsqu'on appuie sur entrée.

Nom :

Prénom :

Age :

Dans dix ans, vous aurez ? ans.

6- Test logique IF

La prochaine étape dans la conception d’un programme : les choix logiques. Nous n'allons faire qu'une introduction à ce principe ici. L'une des activités en traite en profondeur.

Nous venons d'apprendre à poser des questions à l'utilisateur et à stocker sa réponse.

Nous allons maintenant voir comment faire agir l'ordinateur de façon différente en fonction des réponses données.

Pour comprendre les tests logiques, il faut savoir que les ordinateurs n'ont que deux choix possibles lorsqu'on leur donne une proposition à tester (du style "est-on en 2025 ?"). Il s'agit d'un booléen, d'après George Boole, fondateur de l'algèbre de Boole dans le milieu du 19ème siècle.

Un booléen ne peut valoir que true (pour VRAI) ou false (pour FAUX).

Si nous étions en 2025, le résultat de "Sommes-nous en 2025 ?" donnerait true. Sinon, le résultat donnerait false.

14° Tester le programme suivant avec différentes réponses :

HTML :

<!DOCTYPE html>

<html>

<head>

<title>Lecture avec js</title>

</head>

<body>

<h1 id="mon_titre">-- PAGE 4 : Introduction au test SI --</h1>

</header>

<p>En quelle année est créée la toute première version de javascript ?</p>

<p>Votre réponse :</br><input type="text" id="annee" placeholder="Votre réponse" onchange="testerReponse()"></p>

</section>

<p>-- Footer --</p>

</footer>

</body>

</html>

JS :

function testerReponse() {

var bonneReponse = 1995;

var message = "";

var reponse = parseInt(document.getElementById("annee").value);

if (reponse > bonneReponse) {

message = "C'est faux. Javascrit est apparu avant "+reponse;

} else if (reponse < bonneReponse) {

message = "C'est faux. Javascrit est apparu après "+reponse;

} else {

message = "C'est vrai. Javascrit est apparu en "+reponse;

}

document.getElementById("zone_de_message").innerHTML = message;

}

CLIQUEZ SUR UN BOUTON-REPONSE :

bonneReponse :

reponse :

message :

L'indentation vers la droite n'est pas obligatoire pour le navigateur mais elle permet à l'humain qui lit le code de comprendre les actions qui seront réalisées si la condition est vraie : comme avec la boucle FOR, c’est la tabulation ou 4 espaces de suite qui permet de savoir qu’une instruction est rattachée au bloc. Il est donc vital de bien tabuler votre code. Dans Notepad++, on peut faire s'afficher les tabulations à l'aide du menu AFFICHAGE - SYMBOLES SPECIAUX - AFFICHER ESPACES ET TABULATIONS. Choississez l'une des méthodes, puis gardez la même tout le long du code.

Ici, il effectue le premier bloc si la condition reponse > bonneReponse renvoie true. Dans ce cas, il ne va même pas voir la suite du code comportant :

else if qui veut dire : "Sinon, teste cette nouvelle condition et execute le bloc si la condition est vraie.
else qui veut dire : "Sinon, comme tout ce qui est au dessus a répondu false, execute les instructions sous le else.

Si on regarde le code en le divisant en bloc, on obtient ceci :

if (reponse > bonneReponse) {

message = "C'est faux. Javascrit est apparu avant "+reponse;

} else if (reponse < bonneReponse) {

message = "C'est faux. Javascrit est apparu après "+reponse;

} else {

message = "C'est vrai. Javascrit est apparu en "+reponse;

}

Le truc a bien comprendre est qu'on ne peut aller que dans un bloc et un seul.

15° Créer un programme qui demande l'age de l'utilisateur et qui affiche qu'il est adulte et peut voter s'il a 18 ans ou plus (codé à l'aide de >=. Sinon (il n'y aura donc pas de else if, juste un else), il dit que l'utilisateur est mineur et qu'il ne peut pas encore voter.

...CORRECTION HTML...

<!DOCTYPE html>

<html>

<head>

<title>Lecture avec js</title>

</head>

<body>

<h1>-- PAGE 4 : Introduction au test SI --</h1>

</header>

<p>Quel est votre age ?</p>

</section>

</body>

</html>

...CORRECTION JS...

function testerAge() {

var message = "";

var age = parseInt(document.getElementById("age").value);

if (age >= 18) {

message = "Vous êtes adulte. Vous avez le droit de vote";

} else {

message = "Vous n'êtes pas encore adulte. Vous n'avez pas encore le droit de vote.";

}

document.getElementById("zone_de_message").innerHTML = message;

}

Voyons maintenant rapidement le test d'égalité.

Pour tester une égalité en Javascript, on n'utilise pas a = b qui donne un ordre d'affectation : l'ordinateur comprend qu'il faut stocker b dans la variable a.

Pour tester l'égalité, on utilise un double signe égal a == b. Cette instruction teste réellement si les deux variables sont égales.

Le code ci-dessous permet d'affecter à la variable nombre_a_trouver un nombre aléatoire compris entre 1 et 3.

16° Compléter le code pour qu'il affiche bien le message lorsqu'on trouve le bon nombre.

Code HTML :

<!DOCTYPE html>

<html>

<head>

<title>Lecture avec js</title>

</head>

<body>

<h1>-- PAGE 4 : Introduction au test SI --</h1>

</header>

<p>Quel est le nombre aléatoire choisi entre 1 et 3 ?</p>

<p>Votre réponse :</br><input type="text" id="reponse" placeholder="Votre réponse" onchange="testerReponse()"></p>

</section>

</body>

</html>

Le JS : le nombre aléatoire à trouver entre 1 et 3 est stocké dans bonneReponse. On notera que cette variable est créée hors de la fonction de façon à ce qu'elle ne change pas à chaque fois qu'on fait appel à la fonction. On la définit une fois, lors du lancement de la page.

bonneReponse = 1 + Math.floor(Math.random()*Math.floor(3));

function testerReponse() {

var message = "";

var repUtilisateur = parseInt(document.getElementById("reponse").value);

/* A COMPLETER */

document.getElementById("zone_de_message").innerHTML = message;

}

...CORRECTION JS...

bonneReponse = 1 + Math.floor(Math.random()*Math.floor(3));

function testerReponse() {

var message = "";

var repUtilisateur = parseInt(document.getElementById("reponse").value);

if (repUtilisateur == bonneReponse) {

message = "Bravo. La bonne réponse était bien "+bonneReponse;

} else {

message = "Perdu.Mais vous pouvez encore essayer !";

}

document.getElementById("zone_de_message").innerHTML = message;

}

Comme pour la boucle FOR, vous irez beaucoup plus loin dans l'activité sur les tests logiques.

7- contenteditable

Nous avons vu qu'on pouvait lire et modifier le contenu d'une balise texte (avec innerHTML) et qu'on pouvait faire la même chose avec l'attribut value des balises input.

HTML5 a rajouté une grande nouveauté : on peut rendre n'importe quelle balise éditable : on peut par exemple taper un texte dans un paragraphe mais permettre à l'utilisateur de le modifier (en local, le texte ne changera pas pour les autres utilisateurs connectés au serveur).

Exemple :

Voici un texte que j'ai tapé, mais vous pouvez le modifier.

17° Cliquer sur le paragraphe précédent et vérifier que vous pouvez effectivement modifier son contenu.

Comment faire cela ? C'est très simple :

<p contenteditable="true">Voici un texte que j'ai tapé, mais vous pouvez le modifier.</p>

Par défaut, les balises texte sont toutes définies sur false. Il vous suffit de modifier cet attribut et d'attribuer un id à votre balise et vous obtenez ainsi une nouvelle façon de récupérer les données fournies par l'utilisateur. Il suffit d'utiliser innerHTML sur la référence.

HTML :

<p id="codeIdentifiant" contenteditable="true">Voici un texte que j'ai tapé, mais vous pouvez le modifier.</p>

JS :

var lecture = document.getElementById("codeIdentifiant").innerHTML;

Pourquoi ne pas l'utiliser systématiquement plutôt que de passer par les balises de type input ?

A moins de changer le CSS, on ne voit pas nécessairement que la zone est éditable : l'utilisateur peut passer à côté.
On ne peut pas envoyer aussi facilement les données vers un serveur distant qu'avec des inputs dans un formulaire.
Les inputs possèdent plein de petits gadgets intégrés (couleur rouge pour une valeur trop grande ou fausse par exemple) qui n'existent pas avec cette méthode.

Voilà. C'est tout pour aujourd'hui :

Sur les deux premières activités, nous avons donc vu :

Qu'on peut afficher un message par pop-up avec alert.
Qu'on peut demander une réponse par po-up avec prompt.
Qu'on peut lire et modifier le contenu interne d'une balise avec sa référence et l'utilisateur de innerHTML
Qu'on peut fournir à l'utilisateur des zones pratiques de réponses de type input, qu'on peut lire ou modifier avec value.
HTML5 permet de rendre n'importe quelle zone de texte éditable avec l'attribut contenteditable
On peut stocker des données dans des variables.
On peut stocker des instructions dans des fonctions.

C'est déjà pas mal en quelques heures de travail. Il va maintenant falloir assimiler tout ceci en réalisant un projet personnel.

8 - FAQ

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

On utilise l'instruction break. Exemple : on lance une boucle avec un compteur évoluant de 0 à 20 mais on sort définitivement de la boucle lorsque le compteur vaut 5 :

function bouclage() {

alert("DEBUT DU BOUCLAGE : ouvrez la console pour voir les valeurs calculées.");

for (var compteur=0;compteur<11;compteur++) {

alert(compteur);

if (compteur == 5) {

break;

}

alert("FIN DU BOUCLAGE");

}

CLIQUEZ SUR UN BOUTON-REPONSE :

compteur :

Sur la console, on voit bien qu'on ne revient pas dans la boucle pour le cas 6 et plus :

Remarque : même s'il reste des instructions sous le break, on ne les exécute pas : on quitte immédiatement la boucle.

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

On utilise l'instruction continue. On lance une boucle avec un compteur évoluant de 0 à 6 mais sans agir pour 5 en forçant un retour au début de la boucle :

function bouclage() {

alert("DEBUT DU BOUCLAGE : ouvrez la console pour voir les valeurs calculées.");

for (var compteur=0;compteur<7;compteur++) {

if (compteur == 5) {

continue;

}

alert(compteur);

}

alert("FIN DU BOUCLAGE");

}

CLIQUEZ SUR UN BOUTON-REPONSE :

compteur :

Comme vous le voyez, je n'ai même pas besoin de mettre un else après le if. L'exécution du programme va répartir au début de la boucle dès qu'elle rencontrera continue.

Sur la console, on voit bien qu'on a sauté l'exécution du print pour le 5 :

Remarque : même s'il reste des instructions sous le continue, on ne les exécute pas : on remonte immédiatement la boucle pour faire l'itération suivante.