Memento des Formulaires HTML

Télécharger le Memento des <form> en HTML : 3-HTML Formulaire memento 

Interaction avec <form>

  Ne pas utiliser les mots réservés Javascript (submit, …) comme id ou name de balise HTML, sinon le JS ne s’exécutera pas (il y aura confusion entre la fonction submit() et l’élément HTML submit).

Afficher une variable

alert()   affiche dans une fenêtre ‘pop-up’.

console.log()   affiche dans la console du navigateur (Chrome, Firefox, Safari). Et pour afficher la console de Chrome, il faut aller dans le menu : plus d'outils > outils de développement (raccourci  Ctrl+Maj+I).

document.getElementById('rep').innerHTML   affiche à l’intérieur d’une balise portant l’id rep.

Récupérer une valeur de formulaire

On a mis un name et un identifiant id à chaque élément du formulaire.

champ de texte

1
2
3
4
<form name="formulaireNAME">
  Champ de texte : <input type="text" id="champID" name="champNAME" />
  <input type="button" value="Envoyer" onClick="analyse()" />
</form>

Puis pour récupérer le texte entré par le client (3 possibilités) :

  • avec son nom name :
    • var champTexte = document.formulaireNAME.champNAME.value;  avec le NAME des balises menant au champ de texte,
    • var champTexte = document.getElementsByName('champNAME')[0].value; sachant que  getElementsByName()  renvoie obligatoirement un tableau car la page web peut contenir plusieurs éléments ayant le même name, puis [0] désigne le 1er élément de ce tableau.
  • avec son identifiant idvar champTexte = document.getElementById('champID').value;

1ère version : Le formulaire n’est validé que si on clique sur le bouton de type button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="fr">
  <head>
    <script>
      function analyse() {
        var champTexte = "";
        if (document.getElementById('champID').value) {
          champTexte = document.getElementById('champID').value;
        } else {
          champTexte = "vide";
        }
        //Affiche le résultat à l'intérieur du <div id="resultat"></div>
        document.getElementById("resultat").innerHTML =
          "<br />--------- RESULTAT ----------<br />"
          +"Le champ de texte est : "+champTexte
      }
    </script>
  </head>
  <body>
    <form name="formulaireNAME">
      Champ de texte : <input type="text" id="champID" name="champNAME" />
      <br /><br /> = = >
      <input type="button" value="Envoyer" onClick="analyse()" />
    </form>
    <div id="resultat"></div>
  </body>
</html>

2ème version : Le client peut valider le formulaire par 2 façons au choix :

  • soit en appuyant sur ENTREE dans le champ de texte
  • soit en cliquant sur le bouton de type submit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="fr">
  <head></head>
  <body>
    <form name="formulaireNAME">
      Champ de texte : <input type="text" id="champID" name="champNAME" />
      <br /><br /> = = >
      <input type="submit" id="btnID" name="btnNAME" value="Envoyer" />
    </form>
    <div id="resultat"></div>
    <script>
      //on lance l'analyse lorsqu'un événement de type "submit" est déclenché
      formulaireNAME.addEventListener("submit", function (e) {
        var champTexte = "";
        if (document.getElementById('champID').value) {
          champTexte = document.getElementById('champID').value;
        } else {
          champTexte = "vide";
        }
        //Affiche le résultat à l'intérieur (innerHTML) du div "resultat"
        document.getElementById("resultat").innerHTML =
          "<br />--------- RESULTAT ----------<br />"
          +"Le champ de texte est : "+champTexte
    
        //facultatif : l'analyse étant faite, on annule l'envoi à la page web
        e.preventDefault(); //Annulation de l'envoi des données du formulaire
      });
    </script>
  </body>
</html>

En principe, la validation d’un formulaire envoie les données à la page web indiquée par l’attribut action de la balise <form>. Mais juste avant cela, un événement de type submit est déclenché et c’est lors de cet événement e qu’on va lancer l’analyse des réponses. Puis, comme on a analysé les données du formulaire juste avant leur envoi alors on peut même annuler l’envoi des données avec preventDefault() sur l’événement e.

case à cocher

1
2
3
4
5
6
<form name="formulaireNAME">
  Case à cocher :
  <input type="checkbox" id="caseID" name="caseNAME" value="végan" checked />
  <br /><br /> ==>
  <input type="button" value="Envoyer" onClick="analyse()" />
</form>

Puis pour savoir si la case a été cochée, on regarde si l’attribut checked vaut true ou false (3 possibilités) :
var caseAcocher = document.formulaireNAME.caseNAME.checked;
var caseAcocher = document.getElementsByName("caseNAME")[0].checked;
var caseAcocher = document.getElementById("caseID").checked;

Si besoin, on peut préciser la valeur de cette case dans le HTML value="végan" et Javascript peut récupérer cette valeur :
var valeurBoite = document.getElementById("caseID").value;

1ère version : Le formulaire n’est validé que si on clique sur le bouton de type button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="fr">
  <head>
    <script>
      function analyse() {
        var caseAcocher, boite = document.getElementById("caseID");
        if (boite.checked) {
          caseAcocherValeur = "La case "+boite.value+" est cochée";
        } else {
          caseAcocherValeur = "La case "+boite.value+" n'est pas cochée";
        }
        document.getElementById("resultat").innerHTML =
          "<br />---- RESULTAT -----<br />Verdict : "+caseAcocherValeur
      }
    </script>
  </head>
  <body>
    <form name="formulaireNAME">
      Case à cocher :
      <input type="checkbox" id="caseID" name="caseNAME" value="végan" checked />
      <br /><br /> ==>
      <input type="button" value="Envoyer" onClick="analyse()" />
    </form>
    <div id="resultat"></div>
  </body>
</html>

2ème version : Le client peut valider le formulaire par 2 façons au choix :

  • soit en appuyant sur ENTREE sur la case à cocher
  • soit en cliquant sur le bouton de type submit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="fr">
  <head></head>
  <body>
    <form name="formulaireNAME">
      Case à cocher :
      <input type="checkbox" id="caseID" name="caseNAME" value="végan" checked />
      <br /><br /> ==>
      <input type="submit" value="Envoyer" />
    </form>
    <div id="resultat"></div>
    <script>
      function analyse() {
        var caseAcocher, boite = document.getElementById("caseID");
        if (boite.checked) {
          caseAcocherValeur = "La case "+boite.value+" est cochée";
        } else {
          caseAcocherValeur = "La case "+boite.value+" n'est pas cochée";
        }
        document.getElementById("resultat").innerHTML =
          "<br />---- RESULTAT -----<br />Verdict : "+caseAcocherValeur
      }
      formulaireNAME.addEventListener("submit", function(e) {
        analyse();
        e.preventDefault();
      });
    </script>
  </body>
</html>

bouton radio

de boutons radio :  S’il y a beaucoup d’items proposés, le plus simple est de crééer un tableau des items ; puis faire une boucle pour trouver celui qui a été choisi (checked) :

1
2
3
4
5
6
7
var items = document.getElementsByName('btnRadioNAME'); //crée un tableau des btn radio
var valeur;
for (var i = 0; i < items.length; i++) { //boucle sur tous les btn radio
  if (items[i].checked) {                // si ce bouton 'i' a été cliqué
    valeur = items[i].value;             //alors la valeur est celle de ce btn radio
  }
}

sélection unique

Menu déroulant à choix unique, size désigne la taille verticale (le nombre d’items visibles verticalement).

multi-sélection

menu déroulant à choix multiple

Dynamiquement (auto-Submit)

Dès que le client tape un mot ou bouge un curseur, on veut que la page HTML soit recalculée.
Pour cela, on utilise le gestionnaire d’événement onchange sur le curseur, le champs de texte … :

  • soit dans le code HTML : <input type="text" onchange="myFunction()"> (à faire sur chacune des balises <input>, <select>, <textarea> du formulaire). Ainsi c’est le code HTML qui appelle le script :
    page.html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <html>
      <head>
        <script>
          function updatePhrase() {
            //MAJ de la réponse que si la variable a été définie ds le formulaire
            if (typeof nom != "undefined") {
                reponse = " * Nom = "+nomClient;
            }
            if (typeof prenom != "undefined") {
                reponse = reponse + "<br /> * Prénom = "+prenomClient;
            }
            document.getElementById('phraseReponse').innerHTML = reponse;
          }
        </script>
      </head>
      <body>
        <form name="form1">
          <label >Nom : </label>
          <input type="text" value="" onchange='nomClient = this.value; updatePhrase()' /><br />
          <label >Prénom : </label>
          <input type="text" value="" onchange='prenomClient = this.value; updatePhrase()' />
        </form>
        <div id="phraseReponse"></div>
      </body>
    </html>
  • soit dans le JavaScript : getElementById("idNom").onchange = function(){...};  (à faire aussi sur chaque élément du formulaire). Dans ce cas, le script est lancé au chargement de la page, mais comme celui-ci utilise des balises HTML de la page, il faut attendre que le HTML soit complètement chargé avant d’exécuter le JS. Donc :
    • inline à l’intérieur d’une fonction sur window.onload :
      page.html
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      <html>
        <head>
          <script>
            window.onload = function () {
              document.getElementById('inputNom').onchange = function() {
               nom = this.value;
               document.getElementById('phraseNom').innerHTML = "* Nom = "+nom;
              };
              document.getElementById('inputPrenom').onchange = function() {
               prenom = this.value;
               document.getElementById('phrasePrenom').innerHTML = "* Prénom = "+prenom;
              };
            }
          </script>
        </head>
        <body>
          <form name="form1">
            <label >Nom : </label>
            <input type="text" id="inputNom" value="" /><br />
            <label >Prénom : </label>
            <input type="text" id="inputPrenom" value="" />
          </form>
          <div><span id="phraseNom"></span> <br /> <span id="phrasePrenom"></span></div>
        </body>
      </html>
    • inline mais en bas de page  :
      page.html
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <html>
        <head> </head>
        <body>
          <form name="form1">
            <label >Nom : </label>
            <input type="text" id="inputNom" value="" /><br />
            <label >Prénom : </label>
            <input type="text" id="inputPrenom" value="" />
          </form>
          <div><span id="phraseNom"></span> <br /> <span id="phrasePrenom"></span></div>
          <script language="javascript">
            document.getElementById('inputNom').onchange = function() {
             nom = this.value;
             document.getElementById('phraseNom').innerHTML = "* Nom = "+nom;
            };
            document.getElementById('inputPrenom').onchange = function() {
             prenom = this.value;
             document.getElementById('phrasePrenom').innerHTML = "* Prénom = "+prenom;
            };
          </script>
        </body>
      </html>
    • en fichier externe placé dans <head> à condition d’ajouter l’attribut  defer sur la balise <script>  pour différer l’exécution du script après le chargement du HTML :
      <script defer src="formulaire.js"></script>.

      Pour les scripts inline, async et defer  sont simplement ignorés.

  • soit avec jQuery : $("#formId").change(function(){...}); et ajouter  la librairie de jQuery.
    page.html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <html>
      <head>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      </head>
      <body>
        <form name="form1">
          <label >confiserie : </label>
          <select name="sweets" multiple="multiple">
            <option>Chocolat</option>
            <option selected="selected">Bonbon</option>
            <option>Cookie</option>
            <option selected="selected">Caramel</option>
          </select>
        </form>
        <div id="phrase"></div>
        <script>
          $( "select" )
            .change(function () {
              var reponse = "Réponse : ";
              $( "select option:selected" ).each(function() {
                reponse += $( this ).text() + " ";
              });
              $( "#phrase" ).text( reponse );
            })
            .change();//lance manuelmt la fonction dès le chargmt de la page
        </script>
      </body>
    </html>

    NB : Avec jQuery, on peut aussi exécuter onchange sur <form> (de manière globale sur le formulaire).

désactiver un bouton

document.getElementById("myBtn").disabled = true;

Changer le CSS par le Javascript

  • var divElt = document.querySelector("div");  sélectionne la balise div (pour peu qu’elle soit unique)
  • divElt.style.backgroundColor = "white";   pour une couleur de fond blanche
  • divElt.style.padding = "10px";   met des marges intérieures de 10px
  • divElt.style.marginBottom = "10px";   pour la marge extérieure du bas

 La modification de la propriété CSS background-color se fait avec le mot clé Javascript  backgroundColor.

Exemple ci-dessous : Modification de la couleur de la page selon la valeur d’un curseur :

page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
  <head>
    <title>Mon projet canvas</title>
    <script defer src="scriptCSS.js"></script>
  </head>
  <body>
    <form name="form1">
      <label >Valeur de Rouge : </label>
      <input id="curseurR" type="range" min="1" max="255" value="50">
    </form>
  </body>
</html>
scriptCSS.js
1
2
3
4
document.getElementById('curseurR').onchange = function() {
  R = this.value;
  document.body.style.backgroundColor="rgb("+R+",40,100)";
};

Insérer une balise html (DOM)

  • var titreElt = document.createElement(« a »);    création d’une variable (un lien <a>)
  • titreElt.id = « titre »; // id du lien
  • titreElt.textContent = « So Foot »;    texte du lien
  • titreElt.style.color = « #428bca »;    le lien sera en bleu

Fonctions

Une fonction est un bloc d’instructions avec une liste de paramètres ou pas.
Elle peut renvoyer une valeur ou pas.

ex : fonction avec 3 paramètres renvoyant une valeur (la somme des 3 nombres) :

1
2
3
4
5
6
7
8
9
10
function ajoute(x1, x2, x3) {
   var s = x1+x2+x3;
   return s;
}
var somme = ajoute(10,23,56); //appelle la fonction 'somme()'
alert(somme); // affiche 89
var texte = ajoute("Hello ","World ","ISN !");
alert(texte); //affiche Hello World ISN !

ex : fonction qui renvoie un tableau associatif :

1
2
3
4
5
6
function getCoords() {
   return { x: 12, y: 21 };
}
var coords = getCoords();
alert(coords.x); // 12
alert(coords.y); // 21

Ex : une fonction anonyme attribuée à une variable :

1
2
3
4
5
var fn = function(x1, x2) {
   somme = x1 + x2;
   return somme;
};
alert(fn(12,13)); //affiche le résultat 25

Ex : une fonction déclarée et exécutée dans la foulée :

1
2
3
(function(){
    alert('Hello');
})()  //.. et on exécute la fonction immédiatement

NB : Il est tout à fait possible d’exécuter la fonction avec moins de paramètres que définis, dans ce cas, les arguments manquants recevront la valeur undefined.

NB : A l’intérieur de la fonction, on peut aussi accéder aux paramètres par l’objet arguments : arguments[0], arguments[1], … cependant ce n’est pas un tableau (il a une propriété length mais pas de slice(), sort(), etc.)
NB : Les paramètres sont passés par valeur, mais les objets qui sont passés par référence (donc peuvent ressortir modifiés).

Variables

Le JavaScript est un langage de programmation dans une page web, qui a la particularité d’être non typé. Cela signifie qu’on peut stocker n’importe quoi dans une variable (c’est à dire, sans préciser s’il s’agit d’un entier, d’une image, d’un tableau …).

Portée des variables

  • variable globale : nom = 'Snoopy'; nbre = 20; : elle peut être utilisée par tout le programme
  • variable locale : var bjr = 'Hello !'; var x = 20;
  • variable interne à un bloc : let x = 1;

Avec var  : c’est une variable locale : on ne peut y accéder que depuis la fonction où elle a été déclarée.
Avec let : la variable n’est accessible qu’au sein du bloc (et des blocs qu’il contient).. contrairement à var dont la portée est celle de la fonction englobante.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // c'est la même variable !
    console.log(x);  // 2
  }
  console.log(x);  // 2
}
function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // c'est une variable différente
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

Au niveau le plus haut, la portée est évidemment globale :

  • let se contente alors de créer une variable globale
  • var crée une variable globale et ajoute une propriété à l’objet global
1
2
3
4
5
var x = 'global';
let y = 'global2';
console.log(this.x); // "global"
console.log(this.y); // undefine !!!!!!!!!!
console.log(y); // "global2"

arrondir les flottants

Comme les décimaux et fractions sont convertis en binaire, alors les affichages peuvent réserver des surprises :
alert(0.94 - 0.01); // affiche 0.9299999999999999
La solution : afficher le résultat avec 2 décimales.   alert((0.94-0.01).toFixed(2)); //affiche 0.93

chaine de caractères

Une chaîne de caractères est déclarée entre quotes (simples ou doubles) :
var bjr = "Hello, world!";
var salut = 'Bonjour, amis terriens';

  • char.At() : permet de récupérer un caractère : bjr.charAt(0) donne ‘H’.
  • ch1+ch2 : concatène 2 chaines : "Hello, " + "world!" donne "Hello, world!"
  • +chaine : convertit une chaine en nombre :
    var z = '4';
    alert( z + '2'); // affiche 42
    alert( +z + '2'); // affiche 6
  • == : compare le contenu de 2 chaînes de caractères en tenant compte de la casse (majuscule/minuscule) :
    var compare = ("hello, " + "world!" == bjr); donne false car bjr a un H majuscule.

NB : les chaînes sont immuables : tenter de changer un caractère bjr[0] = "H"; provoque une erreur !!!

booléen

Les booléens sont TRUE et FALSE.
NB : Le nombre 0 est considéré comme FALSE (idem pour une chaîne de caractères de longueur 0 ou un élément null ou undefined ou NaN).
Inversement, un nombre non-nul ou une chaine non vide sera considérée comme TRUE.
Boolean() : renvoie TRUE ou FALSE.

1
2
console.log( Boolean( 0.0 ) ); //donne FALSE ;
console.log( Boolean( "0" ) ); // renvoie TRUE.

Les 3 opérateurs logiques des booléens sont :

  • le ET : &&
  • le OU (inclusif) : ||
  • la négation NON : !

Opérateurs binaires

Ils peuvent être parfois utilisé lorsqu’on travaille sur les composantes de couleurs :

  • le ET : &
  • le OU inclusif (OR) : |
  • le OU exclusif (XOR) : ^
  • le Shift left (décalage à gauche avec remplissage à droite avec 0) : <<
  • le Shift right avec propagation du signe (le bit de gauche, celui du signe, est décalé vers la droite) : >>
  • le Shift right (décalage à droite avec remplissage à gauche avec 0) : >>>

NB : Pour les nombres positifs, >> et >>> donnent le même résultat.

NB : On peut l’utiliser pour arrondir un nombre :
( 3|0 ) === 3;       ( 3.3|0 ) === 3;         ( 3.8|0 ) === 3;
( -3.8|0 ) === -3;   ( -3.3|0 ) === -3;       ( [-3.8]|0 ) === -3;
( "3"|0 ) === 3;     ( "3.8"|0 ) === 3;       ( "-3.8"|0 ) === -3;
( NaN|0 ) === 0;     ( Infinity|0 ) === 0;    ( -Infinity|0 ) === 0;
( null|0 ) === 0;    ( (void 0)|0 ) === 0;    ( [-3.8, 22]|0 ) === 0;

tableau

tableau (dimension 1)

Tableau indexé [ ]

Déclarer un tableau indexé, il y a 2 façons :

  • directement avec des crochets : tab = [18,19,,22]; ainsi tab.length vaut 4.
  • avec Array() : tab = new Array(18,19,,22); (length=4) ou tab =new Array(4); (un tableau vide de longueur 4).

Le 1er indice d’un tableau est toujours 0.

clé et valeur :

  • les clés du tableau sont : 0, 1, 2, 3 (la clé est l’indice).
  • les valeurs sont : 18, 19, undefined, 22.

Pour appeler un élément : tab[1] ou tab["1"] donne 19 (mais tab["01"] ne fonctionne pas).

length :

  • tab.length donne la taille du tableau (1er indice = 0 et dernier indice = tab.tength-1).
  • Cette propriété length permet aussi de :
    • supprimer les derniers éléments en réduisant length : tab.length = tab.length - 1;
    • ajouter des éléments (vides) en augmentant length : tab.length = tab.length + 1;

Parcourir un tableau indexé : for (var i = 0 ; i < tab.length ; i++) { alert(tab[i]); }

Rechercher un élément : tab.indexOf("19") donne l’indice de l’élément « 19 » (le premier rencontré), ou -1 si cet élément n’a pas été trouvé.

Ajouter/supprimer un item :

  • push() : ajoute un ou plusieurs items à la fin d’un tableau : tab.push('Tom'); ou tab.push('Pif','Paf');
  • unshift() : fonctionne comme push(), excepté que les items sont ajoutés au début du tableau
  • shift() : retire le premier élément du tableau.
  • pop() : retire le dernier élément du tableau.
  • splice(indice, nombre) :  supprime le nombre d’éléments désirés (à partir de l’indice) puis il ré-indexe le tableau et change son length.

String => Array : Découper une chaîne de caractères en tableaux :
Les chaînes de caractères possèdent une méthode split() qui permet de les découper en un tableau, en fonction d’un séparateur.

1
2
3
var txt = 'Pauline Guillaume Clarisse';
var tab = txt.split(' '); //le séparateur est l'ESPACE
alert(tab);

Array => String : Transformer un tableau en chaîne de caractères :
A l’inverse : var txt2 = tab.join('-');

Tableau associatif { }

Pour déclarer un tableau associatif, il y a 2 façons :

  • directement avec des accolades : tab = {"couleur":"brun", "taille":"grand"};
  • avec Object() : var tab = new Object(); tab["couleur"] = "brun"; tab["taille"] = "grand";

Pour appeler un élément : tab["couleur"] donne « brun ».
De plus, les clés sont aussi des attributs : tab.couleur donne aussi « brun ».
clé et valeur :

  • les clés du tableau sont : « couleur » et « taille »
  • les valeurs sont : « brun » et « grand »

NB : En fait, les Array sont des Object dont les clés sont numériques. Or dans un tableau associatif, les clés ne sont plus numériques, donc ce n’est plus un Array mais un Object.

length ne fonctionne pas pour un tableau associatif (length ne fonctionne qu’avec des tableaux à clé numérique) => on peut le créer soi-même comme ceci : tab.length = 2 ; ou tab["length"] = 2;

ajouter un item : tab.age = 5; ou tab["age"] = 5; il n’y a pas de méthode push() !

parcourir le tableau associatif : for (var id in tab) { alert(tab[id]);}

tableau (dimension 2)

Un tableau de dimension 2 est en fait un « tableau de tableau » !

  • 1 indexé + 1 associatif : chats = [{"couleur":"gris", "taille":"grand"}, {"couleur":"noir", "taille":"petit"}];
    l’élément chats[0]["taille"] rend la valeur « grand ».
  • 2 associatifs : chiens = {"azor":{"couleur":"brun", "taille":"grand"},"milou":{"couleur":"blanc", "taille":"petit"}};
    l’élément chiens["milou"]["taille"] rend la valeur « petit ».

boucle & test

Test : if ( ... ) { ... }

Un test a pour résultat TRUE ou FALSE. Les 2 syntaxes sont :

  • if ( ... ) { ... ;}
  • if ( ... ) { ... ; } else { ... ;}

NB : Les parenthèses () après le if, sont obligatoires.

Pour le test, on utilise :

  • ==  pour une égalité.
  • < ou > pour une inégalité stricte.
  • <= ou >= pour une inégalité large.

NB : L’erreur classique est la confusion entre = et == (c’est à dire : l’affectation et le test).

Opérateur conditionnel : x = (..) ? .. : ..

var x = (condition) ? expression1 : expression2;
Si la condition est vérifiée (TRUE) alors x prend la valeur expression1 .. sinon x prend la valeur expression2.
Donc cela signifie :
if(condition) { x = expression1;} else { x = expression2;}

Série de tests : switch(x) {case x1 : ..; default : ..;}

L’instruction switch permet de tester les nombreuses valeurs, switch remplace une série de tests (si .. alors ..).
switch fonctionne aussi avec les chaines de caractères.

1
2
3
4
5
6
7
8
9
10
11
switch (nom) {
case "Milou" :
  alert("Il s'agit du chien !");
  break ;
case "Tigrou" :
  alert("C'est le chat qui a fait la bêtise !");
  break;
default:
  alert("Il ne s'agit pas d'un animal de la famille !");
  break;
}

NB : les accolades { } sont obligatoires.

Boucle itérative : for ( .. ; .. ; .. ) { .. }

Lorsqu’on doit répéter plusieurs fois la même instruction (ou un bloc d’instructions), on utilise une boucle for avec un compteur.
Syntaxe : for (initialisation ; condition ; instruction) { bloc d'instructions }

1
2
3
4
5
document.write("Début de boucle <br />");
for(var i = 0; i < 10; i++){
   document.write("Compteur actuel : " + i + "<br />");
}
document.write("Boucle finie !");

Boucle sur les propriétés : for ( .. in .. ) {..}

L’itération s’effectue sur toutes les propriétés énumérables d’un objet (i.e. les propriétés qui peuvent être associées à un compteur). Pour chaque propriété obtenue, on exécute le bloc d’instructions. Cependant, l’ensemble des propriétés balayées et leur ordre dans la boucle diffèrent selon les navigateurs.
Synthaxe : for (var Propriete in Objet) { //instructions utilisant Objet[Propriete]; }

1
2
3
4
5
6
var person = {fname:"John", lname:"Doe", age:25};
var text = "";
for (var x in person) {
  text = text + person[x] + " ";
}
document.getElementById("demo").innerHTML = text; // affiche :  John Doe 25

A éviter pour les tableaux indexés : surtout si l’ordre des éléments est important !
Pour un tableau indexé tab, il faut utiliser for (var i=0 ; i < tab.length ; i++) ou Array.forEach() ou encore for…of ainsi l’ordre est respecté.

1
2
3
4
5
6
7
let tab = [1, 2, 3];
for (let valeur of tab) {
   console.log(valeur);
}
 
var tab = ["un", "deux", "trois" ];
tab.forEach(function(y) { document.write(y); } );

Boucle conditionnelle : while ( .. ) { .. }

Lorsqu’on doit effectuer plusieurs fois la même instruction (ou un bloc d’instructions) tant qu’une certaine condition est vraie, on utilise une boucle while avec le test à l’intérieur.
NB : Une boucle for peut aussi s’écrire avec while.
Synthaxe : while (condition) { instructions; }

Boucle « répète » : do { .. } while (..)

Elle ressemble à une boucle while sauf que le test se fait à la fin, par conséquent une boucle do..while est toujours exécutée au moins une fois.
Synthaxe : do { instructions; } while (condition);

Sur un objet : with (..) { .. }

Au lieu d’écrire : objet.getElementById('a'), objet.getElementById('b') .. on peut éviter de réécrire objet devant chaque fonction en utilisant : with (objet) { ... }

1
2
3
4
5
with (objet) {
   var a = getElementById('a');
   var b = getElementById('b');
   var c = getElementById('c');
};

Dessiner

Le <canvas> n’a qu’une seule forme primitive : le rectangle.
Toute autre forme doit être créée avec des trajets (des points reliés par des lignes).
Un canvas est initialement transparent (donc on y voit le background de la page HTML).

le context du canvas

Pour commencer, on insère un canvas dans la page HTML, et on lui donne un identifiant (pour faciliter la liaison avec le Javascript).

page.html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <title>Mon projet canvas</title>
        <script src="canvas.js"></script>
    </head>
    <body>
        <canvas id="mon_canvas" width="500" height="500">
            Message pour les navigateurs ne supportant pas encore canvas.
        </canvas>
    </body>
</html>

Si la taille du canvas n’est pas précisée alors par défaut c’est 100×200 px. Cependant il est possible de régler la taille plus tard via le Javascript.

Ensuite le fichier Javascript :

canvas.js
1
2
3
4
5
6
7
8
9
10
11
12
13
window.onload = function() {
  var canvas = document.getElementById('mon_canvas');
  if (!canvas) {
    alert("Impossible de récupérer le canvas");
    return;
  }
  var context = canvas.getContext('2d');
  if (!context) {
    alert("Impossible de récupérer le context du canvas");
    return;
  }
  //Et ici : le code des dessins.
}

Explications :

  • window.onload = function(){ ... } : permet d’attendre que la page HTML soit entièrement chargée avant d’exécuter le script. Effectivement, il faut attendre que le canvas du HTML soit bien là avant d’exécuter la fonction JS qui dessine dessus, sinon le script va planter.
  • canvas = document.getElementById('mon_canvas'); : on récupère le canvas
  • context = canvas.getContext('2d'); : puis le context du canvas … car c’est sur ce context qu’on dessine !

couleur

La couleur peut être donnée en : hexadécimal, rgb(), rgba() ou par son nom (en anglais : black, red ..).
On distingue :

  • strokeStyle : couleur du tracé (ligne). context.strokeStyle = "rgba(0, 0, 255, 0.5)"; //bleu à moitié transparent
  • fillStyle : couleur de remplissage (de forme). context.fillStyle = "#ff0000"; //rouge

rectangle

context.fillRect(x, y, largeur, hauteur); : dessine un rectangle plein.
context.strokeRect(x, y, largeur, hauteur); : dessine le contour du rectangle.
context.clearRect(x, y, largeur, hauteur); : efface la zone rectangulaire sur le canvas, donc on retrouve donc le background de la page HTML.

ligne

  1. Créer un trajet avec beginPath().
  2. Dessiner le trajet avec moveTo() (déplacer le stylo) et lineTo()(tracer un trait).
  3. optionnel : fermer la forme géométrique par une ligne droite reliant le dernier point au point de départ : closePath().
  4. Tracer ou remplir la forme du trajet avec stroke() ou fill().

NB : context.lineWidth = 5; : pour mettre une épaisseur de ligne de 5 px.

canvas.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload = function() {
  var canvas = document.getElementById('mon_canvas');
  if (!canvas) {
    alert("Impossible de récupérer le canvas");
    return;
  }
  var context = canvas.getContext('2d');
  if (!context) {
    alert("Impossible de récupérer le context du canvas");
    return;
  }
  context.beginPath();//Pour démarrer un nouveau trajet
  context.moveTo(0, 300);//On se déplace au point de départ du trajet
  context.lineTo(150, 0);
  context.lineTo(300, 150);
  context.stroke();//On trace ces lignes.
}

arc de cercle

arc(xCentre, yCentre, rayon, angleDeDépart, angleDeFin) : trace un arc, avec des angles sont en radians et le sens trigo est inversé (du fait du repère inversé).

Le plus simple est d’utiliser le schéma ci-dessous, il suffit de multiplier le coefficient du schéma par Math.PI

canvas.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.onload = function() {
  var canvas = document.getElementById('mon_canvas');
  if (!canvas) {
    alert("Impossible de récupérer le canvas");
    return;
  }
  var context = canvas.getContext('2d');
  if (!context) {
    alert("Impossible de récupérer le context du canvas");
    return;
  }
  context.beginPath(); //On démarre un nouveau tracé.
  context.arc(100, 100, 50, 0, Math.PI*2); //le trajet est un cercle
  context.fill(); // fill() colorie le disque (la forme pleine)
}


Pour inverser le sens du tracé : rajouter un 6e paramètre booléen true pour inverser le sens du tracé (false donne le sens par défaut). Exemple ci-dessous :

canvas.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
window.onload = function() {
  var canvas = document.getElementById('mon_canvas');
  if (!canvas) {
    alert("Impossible de récupérer le canvas");
    return;
  }
  var context = canvas.getContext('2d');
  if (!context) {
    alert("Impossible de récupérer le context du canvas");
    return;
  }
  context.strokeStyle = "blue";
  context.beginPath();
  context.arc(100, 100, 100, 0, 0.25*Math.PI*2);//arc de cercle
  context.stroke(); //colorié en bleu
  context.strokeStyle = "red";
  context.beginPath();
  context.arc(100, 100, 70, 0, 0.25*Math.PI*2,true);//arc de cercle en sens inversé
  context.stroke(); //colorié en rouge
  context.strokeStyle = "lightgray";
  context.beginPath();
  context.moveTo(100, 200);
  context.lineTo(100, 100);
  context.lineTo(200, 100);
  context.stroke(); //deux lignes grises 
}

image

Placer le fichier de l’image juste à côté du fichier HTML (c’est le fichier HTML la référence, et non pas le fichier script) :

canvas.js
1
2
3
4
5
6
var mon_image = new Image();
mon_image.src = "cartoon.png";
//puis on attend que l'image soit chargée avant de l'afficher
mon_image.onload = function() {
  context.drawImage(mon_image, 0, 0);
};

En complément :

  • context.drawImage(img,x,y); : affiche l’image en (x,y)
  • context.drawImage(img,x,y,width,height); : pour redimensionner l’image à afficher.
  • context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); : on clip une zone de l’image source (sx,sy,swidth,sheight) puis on l’affiche redimensionnée (x,y,width,height).

NB : Le chemin du fichier est relatif à la page HTML en cours (et non au script qui l’exécute) !

  • mon_image.src="images/cartoon.jpg"; : l’image est dans un répertoire images
  • mon_image.src="../cartoon.jpg"; : l’image est dans le répertoire parent (par rapport à la page HTML)
  • mon_image.src="../images/cartoon.jpg"; : d’abord on remonte dans le répertoire parent puis on avance dans le dossier /images

dessiner un texte

canvas.js
1
2
context.font = "18px Helvetica";
context.fillText("Hello World", 0, 30); //ou strokeText() pour des lettres creuses

dégradé linéaire

canvas.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.onload = function() {
  var canvas = document.getElementById('mon_canvas');
  if (!canvas) {
    alert("Impossible de récupérer le canvas");
    return;
  }
  var context = canvas.getContext('2d');
  if (!context) {
    alert("Impossible de récupérer le context du canvas");
    return;
  }
  var degrade = context.createLinearGradient(0,0,300,100); //x1, y1, x2, y2 : vecteur du dégradé.
  degrade.addColorStop(0,"#FFFFFF"); //couleur de début : 0% = blanc
  degrade.addColorStop(0.3,"#5555FF"); //couleur de fin : 30% = bleu ciel.
  degrade.addColorStop(1,"#FFFFFF"); //couleur de début : 100% = blanc
   
  context.fillStyle = degrade; //On passe notre dégradé au fillStyle()
  context.fillRect(0,0,300,300); //On trace un rectangle plein
}

dégradé radial

canvas.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.onload = function() {
  var canvas = document.getElementById('mon_canvas');
  if (!canvas) {
    alert("Impossible de récupérer le canvas");
    return;
  }
  var context = canvas.getContext('2d');
  if (!context) {
    alert("Impossible de récupérer le context du canvas");
    return;
  }
  var degrade = context.createRadialGradient(75,100,5,160,60,150);
  //du 1er cercle (centre=75,100 et rayon=5) jusqu'au 2e cercle (centre=160,60 r=150)
  degrade.addColorStop(0,"#FFFFFF"); //couleur de début : 0% = blanc
  degrade.addColorStop(0.3,"#5555FF"); //couleur de fin : 30% = bleu ciel.
  degrade.addColorStop(1,"#FFFFFF"); //couleur de début : 100% = blanc
   
  context.fillStyle = degrade; //On passe notre dégradé au fillStyle()
  context.fillRect(0,0,300,300); //On trace un rectangle plein
}