Infoforall

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

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 :

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>

        <meta charset="UTF-8" />

        <title>Lecture avec js</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>


    <body>


        <header>

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

        </header>


        <section>

            <p>Nom : <span id="nom">*</span></p>

        </section>


        <footer>

            <p>Voilà le footer</p>

        </footer>


        <script type="text/javascript" src="chap_02.js"></script>


    </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 :

ouverture du prompt

On rentre son nom

réponse

Et on obtient

modification de l'affichage

Bon, comment cela fonctionne-t-il ?

  1. var sNom = prompt("Quel est votre nom ?");
  2. On déclare une variable sNom et on y stocke le résultat du prompt.

  3. document.getElementById("nom").innerHTML = sNom;
  4. 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>Nom : <span id="nom">*</span></p>

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

            <p>Age : <span id="age">*</span></p>

            <p>Age dans 10 ans : <span id="agePlus10">*</span></p>

Avec vos connaissances actuelles, vous devriez obtenir :

addition

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 :

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

addition

...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 variableNom du type pour JavascriptCe qu'il peut contenir
Booléen/BooleanBooleanfalse (0) or true (1) (avec une minuscule)
Nombre/NumberNumberUn nombre entier ou réel (attention aux limites maximales) comme 12
Chaîne de caractèreStringUne 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:

<input type="text" value="Taper votre réponse" >

<input type="text" placeholder="Saisie libre" >

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:

<input type="password">

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

Ce test est obtenu avec le code suivant:

<input type="number" name="points" min="0" max="100" step="10" value="30">

On trouve aussi des curseurs :

50

<div>

    <input type="range" min="0" max="200" step="10" value="50" >

    <span id="valeurRange">50</span>

</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>

        <meta charset="UTF-8" />

        <title>Lecture avec js</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>


    <body>


        <header>

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

        </header>


        <section>

            <p>Nom :</br><input type="text" id="nom" placeholder="Votre nom"></p>

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

            <p>Age : </br><input type="number" id="age" min="0" max="100" step="1" value="17"></p>

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

        </section>


        <footer>

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

        </footer>


        <script type="text/javascript" src="chap_02.js" ></script>


    </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 ?

echec

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><input type="button" onclick="mise_a_jour()" value="Click Me!"></p>

        <section>

            <p>Nom :</br><input type="text" id="nom" placeholder="Votre nom"></p>

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

            <p>Age : </br><input type="number" id="age" min="0" max="100" step="1" value="17"></p>


            <p><input type="button" onclick="mise_a_jour()" value="Click Me!"></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.

réussite

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à :

final

...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 :

<p>Nom :</br><input type="text" id="nom" placeholder="Votre nom"></p>

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>

        <meta charset="UTF-8" />

        <title>Lecture avec js</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>


    <body>


        <header>

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

        </header>


        <section>

            <p>Nom :</br><input type="text" id="nom" placeholder="Votre nom"></p>

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

            <p>Age : </br><input type="number" id="age" min="0" max="100" step="1" value="17" onchange="changerAge()"</p>

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

        </section>


        <footer>

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

        </footer>


        <script type="text/javascript" src="chap_02.js" ></script>


    </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>

        <meta charset="UTF-8" />

        <title>Lecture avec js</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>


    <body>


        <header>

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

        </header>


        <section>

            <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>

            <p id="zone_de_message"></p>

        </section>


        <footer>

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

        </footer>


        <script type="text/javascript" src="chap_02.js" ></script>


    </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 :

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>

        <meta charset="UTF-8" />

        <title>Lecture avec js</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>


    <body>


        <header>

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

        </header>


        <section>

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

            <p>Age : </br><input type="number" id="age" min="0" max="125" step="1" value="17" onchange="testerAge()"</p>

            <p id="zone_de_message"></p>

        </section>


        <script type="text/javascript" src="chap_02.js" ></script>


    </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>

        <meta charset="UTF-8" />

        <title>Lecture avec js</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>


    <body>


        <header>

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

        </header>


        <section>

            <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>

            <p id="zone_de_message"></p>

        </section>


        <script type="text/javascript" src="chap_02.js" ></script>


    </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 ?

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.