JavaScript – Fondamentaux

 

Découvrir les fondamentaux de JavaScript à travers quelques exemples simples...

 

EXEMPLE  1

 

Dans cet exemple :

  • Boites de dialogue : alert, confirm et prompt
  • Déclaration de variables : var
  • Logging : console.log
  • Contrôle de flux : if et else
  • Déclaration et appel de fonction : function
  • Concaténation des chaînes de caractères : opérateur +
  • Commentaires : // et /* */
  • Opérateur de comparaison de chaînes : ===

 

Remarques :

  • alert : afficher une boite de dialogue avec un message
  • confirm : afficher une boite de dialogue avec une question type valider/annuler
  • prompt : afficher une boite de dialogue avec une question et un champ pour répondre
  • console.log : mettre quelque chose dans le console JavaScript du navigateur (typiquement utilisé pour déboguer)
  • Utiliser // pour un commentaire à la fin d'une ligne ou sur une seule ligne
  • Utiliser /* */ pour un commentaire multi-ligne

 

test.js

/* méthode pour dialoguer avec l'internaute
   et proposer un jeu s'il le souhaite */
function jouer()
{
  //dire bonjour et obtenir le prénom de l'internaute
  alert("Bonjour!");
  var prenom = prompt("Quel est votre prénom ?");
  console.log(prenom + " commence.");
  var valid = confirm("Bonjour " + prenom + ". Appuyez valider pour jouer.");
  if (valid)
  {
    //l'internaute veut jouer
    console.log(prenom + " veut jouer.");
    alert("Super !! On va s'amuser !!");
    var reponse = prompt("2 + 2 = ?");
    if (reponse === "4")
    {
      //l'internaute a joué et il a gagné
      console.log(prenom + " gagne.");
      alert("Correct !!");
    }
    else
    {
      //l'internaute a joué et il a perdu
      console.log(prenom + " perd (réponse " + reponse + ").");
      alert("Oops !!");
    }
  }
  else //l'internaute ne veut pas jouer
  {
    console.log(prenom + " ne veut pas jouer.");
    alert("Tant pis pour vous.");
  }
  alert("Au revoir.");
}

 

test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript" language="JavaScript" src="test.js"></script>
    </head>
    <body style="width:960px; margin:0 auto; background-color:#eeeeee;">
        <div style="background-color:white; text-align:center; margin:80px 0px; padding:80px 0px;">
            <h3><a href="javascript:jouer()">Cliquez moi pour jouer</a></h3>
        </div>
    </body>
</html>

 

 

EXEMPLE  2

 

Dans cet exemple :

  • Types de variable : chaîne, entier, décimal, booléen
  • Opérateurs de comparaison de nombres : <, > et ==
  • Appel à un bibliothèque de fonctions : Math.random et Math.floor
  • Boucler : while
  • Opérateur d'incrémentation : +=
  • Contrôle de flux : if, else if et else

 

Remarques :

  • le fichier HTML pour cet exemple est identique à celui de l'exemple numéro 1
  • le type d'un variable est implicite (déduit depuis sa valeur)
  • remarquer la différence entre l’opérateur de comparaison == (pour les nombres) et === (pour les chaînes)
  • une boucle de type while continue tant que la condition entre les parenthèses est vraie
  • l'instruction  i += 1; est équivalent à l'instruction i = i + 1;
  • on exploite else if pour pouvoir enchaîner des conditions de contrôle de flux
  • il existe aussi le type de boucle do { ... } while (condition); - la différence étant que le bloc est exécuté au moins une fois

 

test.js

function jouer()
{
  //chaine
  var question = "Jouer encore ?";
 
  //nombre entier
  var compteur = 0;
 
  //nombre décimal inutile dans ce programme
  var pi = 3.1415;
 
  //booléens
  var faut_boucler = true;
  var gagnant = false;

  console.log("--- debut de jeu ---");
 
  while (faut_boucler)
  {
    compteur += 1;
    console.log("boucle numéro " + compteur);

    //nombre décimal aléatoire
    var decimal_aleatoire = Math.random();
    console.log("decimal_aleatoire = " + decimal_aleatoire);
 
    //nombre entier aléatoire
    var entier_aleatoire = Math.round(decimal_aleatoire * 10);
    console.log("entier_aleatoire = " + entier_aleatoire);

    if (entier_aleatoire < 5)
    {
      faut_boucler = confirm(entier_aleatoire + " : trop petit. " + question);
    }
    else if (entier_aleatoire > 5)
    {
      faut_boucler = confirm(entier_aleatoire + " : trop grand. " + question);
    }
    else //entier_aleatoire == 5
    {
      alert(entier_aleatoire + " : jackpot !");
      faut_boucler = false;
      gagnant = true;
    }
  }
 
  if (gagnant)
  {
    alert("Vous avez réussi en " + compteur + " tour(s)");
  }
 
  console.log("--- fin de jeu ---");
}

 

EXEMPLE  3

 

Dans cet exemple :

  • Déclaration de fonction avec paramètre et valeur de retour : function et return
  • Boucler : for
  • Opérateur modulo (reste d'une division) : %
  • Trouver et modifier le contenu d'un élément dans le HTML : document.getElementById et innerHTML

 

Remarques :

  • il n'y a pas besoin de déclarer une valeur de retour dans la première ligne d'une fonction - il suffit d'avoir une instruction de type return dans le corps de la fonction
  • la boucle for contient 3 sections séparées par un point-virgule : départ; fin; incrément
  • attention - si on écrase le contenu d'un élément avec innerHTML comme dans l'exemple, ce contenu est "perdu" (mais uniquement côté client quand même !)

 

test.js

function estUnNombrePremier(nombre) //fonction avec paramètre
{
  if(nombre < 2)
    return false;
  for (var i = 2; i < nombre; i++) //boucle
  {
    if(nombre % i == 0)
      return false; //valeur de retour
  }
  return true; //valeur de retour
}

function genererNombresPremiers(maximum) //fonction avec paramètre
{
  var chaine = "";
  for(var i = 2; i <= maximum; i++) //boucle
  {
    if(estUnNombrePremier(i))
      chaine = chaine + i + " ";
  }
  return chaine; //valeur de retour
}

function calculer(maximum) /* fonction avec paramètre,
                              invoquée depuis le HTML  */
{
  //générer une chaîne qui contient les nombres premiers
  var chaine = genererNombresPremiers(maximum);
 
  //trouver l'élément dans la page avec le bon identifiant
  var obj = document.getElementById(maximum);
 
  //changer le contenu HTML de l'élément : ajouter un titre et la chaîne
  obj.innerHTML = "<strong>Jusqu'à " + maximum + "</strong><br>" + chaine;
}

 

test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript" language="JavaScript" src="test.js"></script>
    </head>
    <body style="width:960px; margin:0 auto; background-color:#eeeeee;">
        <div style="background-color:white; text-align:center; margin:80px 0px; padding:80px 80px;">
            <p id="10">     <a href="javascript:calculer(10)">     Générer les nombres premiers jusqu'à 10      </a></p>
            <p id="100">    <a href="javascript:calculer(100)">    Générer les nombres premiers jusqu'à 100     </a></p>
            <p id="1000">   <a href="javascript:calculer(1000)">   Générer les nombres premiers jusqu'à 1 000   </a></p>
            <p id="10000">  <a href="javascript:calculer(10000)">  Générer les nombres premiers jusqu'à 10 000  </a></p>
            <p id="100000"> <a href="javascript:calculer(100000)"> Générer les nombres premiers jusqu'à 100 000 </a></p>
        </div>
    </body>
</html>

 

Exercice :

  • On remarque que le fichier HTML contient 5 lignes presque identiques (de 10 à 100 000).
  • Créer donc plutôt un fichier PHP qui génère le même HTML mais sans cette répétition
  • Astuce : utiliser une boucle de type for : <?php for ($i=10; $i<=100000; $i = $i*10) { ... } ?>

 

 

EXEMPLE  4

 

Dans cet exemple :

  • exécution du javascript sans interaction utilisateur : balise body, attribute onload
  • détection des paramètres du navigateur : navigator.cookieEnabled et navigator.userAgent
  • interaction avec plusieurs éléments dans le document HTML : document.getElementById et innerHTML
  • opérateur logique ET : &&
  • opérateur logique NON : !

 

Remarques :

  • opérateur logique OU : ||

 

test.js

function cookies_sont_actifs()
{
  var cookieEnabled = (navigator.cookieEnabled) ? true : false;
  if (typeof navigator.cookieEnabled == "undefined" && !cookieEnabled)
  {
    document.cookie = "testcookie";
    cookieEnabled = ((document.cookie.indexOf("testcookie") != -1) ? true : false);
  }
  return cookieEnabled;
}

function le_navigateur_est_chrome()
{
  var resultat = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
  return resultat;
}

function test_compatibilite()
{
  var cookies = cookies_sont_actifs();
  var chrome = le_navigateur_est_chrome();
 
  var statut_sommaire = document.getElementById("statut-sommaire");
  var statut_javascript = document.getElementById("statut-javascript");
  var statut_cookies = document.getElementById("statut-cookies");
  var statut_chrome = document.getElementById("statut-chrome");

  var compatible = '<span style="color:green;">Compatible</span>';
  var oui = '<span style="color:green;">Oui</span>';
  var non = '<span style="color:red;">Non</span>';
 
  statut_javascript.innerHTML = oui; //dans tous les cas

  if (cookies)
    statut_cookies.innerHTML = oui;
  else
    statut_cookies.innerHTML = non;
 
  if (chrome)
    statut_chrome.innerHTML = oui;
  else
    statut_chrome.innerHTML = non;
 
  if (cookies && chrome)
    statut_sommaire.innerHTML = compatible;
}

 

test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript" language="JavaScript" src="test.js"></script>
    </head>
    <body style="width:960px; margin:0 auto; background-color:#eeeeee;" onload="test_compatibilite()">
        <div style="background-color:white; text-align:center; margin:80px 0px; padding:80px 0px;">
          <h3>Pour bien fonctionner, ce site exige JavaScript, Cookies et Chrome.</h3>
          <p>Compatibilité de votre navigateur : <span id="statut-sommaire"><span style="color:red;">Incompatible</span></span></p>
          <table border="1" cellpadding="10" style="border-collapse:collapse; margin:0 auto;">
            <tr><td>JavaScript activé</td><td id="statut-javascript"><span style="color:red;">NON</span></td></tr>
            <tr><td>Cookies activés</td><td id="statut-cookies">?</td></tr>
            <tr><td>Navigateur est Chrome</td><td id="statut-chrome">?</td></tr>
          </table>
        </div>
    </body>
</html>

 

Note :

Une autre façon de déclencher du JavaScript au moment du chargement de la page (sans interaction utilisateur) est d'exploiter la fonction window.onload dans le JavaScript.

 

Exemple :

<html>
  <head>
    <script>
       window.onload = function() {
         /* faire quelque chose en JavaScript ici */
      }
    </script>
  </head>
  <body>
  </body>
</html>

 

Exercice :

  • Convertir le code d'exemple 4 pour exploiter window.onload dans le JavaScript plutôt qu'exploiter l'attribut onload de la balise body.

 

 

EXEMPLE 5

 

Dans cet exemple :

  • Les tableaux : [ ]
  • l'ajout d'un élément dans un tableau : push
  • la conversion d'un nombre en base 10 vers une chaîne hexadécimal : toString(16)
  • calculer la longueur d'une chaîne : length
  • la manipulation des styles CSS via JavaScript : obj.style.backgroundColor = ...
  • la génération de JavaScript intégré (inline Javascript) à la volée par le JavaScript (depuis le fichier JavaScript externe)

 

Remarques :

  • dans ce script l'attribut onload de la balise body est exploité pour déclencher le code JavaScript qui initialise la page
  • cette initialisation comprend la création d'autre morceaux de JavaScript intégrés qui seront responsables pour l'interactivité de la page

 

test.js

function couleur_aleatoire()
{
  var c = Math.floor(Math.random()*16777215).toString(16);
  while (c.length < 6)
  {
    c = "0" + c;
  }
  return '#' + c;
}

function initialiser()
{
  //création du tableau
  var couleurs = [];
  for(var i = 0; i < 216; i++)
  {
    couleurs.push(couleur_aleatoire());
  }

  //affichage des boutons
  var div_boutons = document.getElementById("boutons");
  div_boutons.innerHTML = ""; //remise à zéro du contenu
  for(var i = 0; i < couleurs.length; i++)
  {
    var c = couleurs[i];
    div_boutons.innerHTML += "<a style=\"background-color:" + c + "\" href=\"javascript:choisir('" + c + "')\">&nbsp;</a> ";
  }
}

function choisir(couleur)
{
  //peindre
  var div_panneau = document.getElementById("panneau");
  div_panneau.style.backgroundColor = couleur;

  //choisir de nouvelles couleurs et réafficher les boutons
  initialiser();
}

 

test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript" language="JavaScript" src="test.js"></script>
        <style>
          a { display:inline-block;
              height:24px;
              width:32px;
              margin:10px 10px 0px 0px;
              text-decoration:none; }
        </style>
    </head>
    <body style="width:960px; margin:30px auto;" onload="initialiser()">
        <p>Choisir une couleur :</p>
        <div id="panneau" style="padding:50px 60px 60px 70px;">
          <div id="boutons"></div>
        </div>
    </body>
</html>

 

 

EN SAVOIR PLUS

 

 

 


 

EXERCICES

 

Pour chaque exercice, créer une page web en HTML, CSS (si besoin) et JavaScript. Pour développer des  bonnes habitudes, mettre le CSS et Javascript dans des fichiers externes.

 

  1. Créer une page web avec un lien cliquable (type texte ou image comme on veut). Quand on clique le lien la page devrait générer un nombre aléatoire et l'afficher dans une boîte de dialogue de type alert.
  2. Adapter la solution à l'exercice précédent pour afficher (toujours dans une boîte de dialogue de type alert) un nombre aléatoire compris entre 1000 et 9999.
  3. Adapter la solution à l'exercice précédent pour afficher le nombre généré dans la page. Chaque clic supplémentaire devrait ajouter le nouveau nombre à l'affichage, sans effacer ceux déjà affichés. Ainsi après un clic on pourrait voir quelque part dans la page le texte "649", puis après 3 clics on pourrait voir "649 750 922" par exemple.
  4. Créer une page web qui demande le nom de l'internaute et qui affiche, dans la page, un message de bienvenue, avec le nom fourni. Par exemple si l'internaute dit que son nom est "Paul", on affiche, dans la page, un message comme "Bonjour et bienvenue Paul".
  5. Créer une page web qui essai de deviner (via boite de dialogue à répétition) le chiffre préféré (de 1 à 9) de l'internaute. Chaque essai doit être logué dans le console (via console.log). Une fois trouvé, on affiche, dans la page, un message comme "Votre chiffre préféré est le ..." avec le chiffre trouvé. Astuce : utiliser une boucle de type while.
  6. Créer une page web qui affiche plusieurs images. Chaque image devrait être un personnage (de BD ou de film par exemple). Quand on clique sur une image, la description du personnage devrait s'afficher. Quand on clique sur une autre la description du premier devrait être remplacé par celle du deuxième.
  7. Adapter la solution à l'exercice précédent pour l'améliorer graphiquement : les images devrait apparaître comme des onglets et l'image (onglet) sélectionnée devrait s'afficher en avant plan comme la description du personnage.
  8. (Facultatif) Créer une page web qui affiche 3 liens : un pour générer 3 couleurs, un pour en générer 5, un pour en générer 10. Quand on clique sur un des liens, les couleurs sont générées et affichées. L'affichage d'une couleur devrait comprendre son code hexadécimal et un échantillon (petite boîte qui affiche la couleur graphiquement). Quand on clique un autre lien, les couleurs déjà affichées devrait s’effacer avant d'afficher les nouveaux. Obligation d'utiliser une boucle (type for) pour faire l'itération !
  9. Créer un configurateur pour choisir la couleur d'une voiture. Voici une capture d'écran : capture. Quand on clique sur une couleur (en dessous de l'image principale) la voiture doit changer de couleur. Voici des images à intégrer dans la solution : red blue green yellow pink black.
  10. Créer une page web qui affiche l'image d'un bouton. Quand on clique sur le bouton il devrait changer graphiquement (par exemple changer de forme ou de couleur pour indiquer qu'il est activé). Quand on clique à nouveau le bouton, il devrait revenir à son état original. (Astuce : préparer 2 fichiers images et faire en sorte via JavaScript que la page affiche l'une ou l'autre selon "l'état" du bouton).
  11. Créer une page web qui affiche une des images d'un panier d'images, et deux flèches. Les flèches devrait servir comme boutons pour avancer/revenir d'une image à l'autre. Quand on clique sur une flèche la nouvelle image remplace l'ancienne.
  12. Adapter la solution à l'exercice précédent pour voir à gauche et à droite de l'image principale, un certain nombre des autres images du panier - en plus petit, ou en griser par exemple. Toutes les images devrait avancer/reculer quand on clique une flèche.
  13. Adapter la solution à l'exercice précédent : faire en sorte qu'en cas de manque de clic sur les flèches les images avancent automatiquement (toutes les 5 secondes par exemple). Astuce : il faudrait utiliser les fonctions window.setInterval() et window.clearInterval() pour gérer le déclenchement automatiquement (faire des recherches sur Internet pour trouver de l'aide sur ces fonctions).
  14. Créer une page web qui affiche les chiffres de 0 à 10 comme des boutons d'une calculatrice. Quand on clique le premier bouton (par exemple 5) on affiche dans la page quelque part "5 +". Quand on clique le deuxième bouton (par exemple 3) on affiche "5 + 3 = 8". Le résultat devrait être calculé via appel à une fonction.
  15. Adapter la solution à l'exercice précédent pour l'améliorer : offrir la possibilité de choisir l'opérateur (addition, soustraction multiplication, division) et de rentrer des nombres à plusieurs chiffres.