JavaScript

JavaScript est un langage de programmation coté client : un programme JavaScript est exécuté par le navigateur. Ce langage permet, entre autres, de modifier le contenu d'un document Web de façon interactive (clic souris, saisie clavier, ...).

Il existe deux moyens d'incorporer un programme JavaScript au sein d'un document Web. Le premier consiste à renseigner le code source du script directement dans le document à l'aide de l'élément script.

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>My first JavaScript program</title>
  </head>
  <body>
    <div id="main"></div>

    <script>
      var message = "<h1>Hello World Wide Web!</h1>";
      document.getElementById("main").innerHTML = message;
    </script>
  </body>
</html>

Le code source du script peut aussi être sauvegardé dans un fichier externe. L'attribut src de l'élément script permet de renseigner le chemin et le nom du fichier JavaScript.

var message = "<h1>Hello World Wide Web!</h1>";
document.getElementById("main").innerHTML = message;
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first JavaScript program</title>
  </head>
  <body>
    <div id="main"></div>

    <script src="js/hello.js"></script>
  </body>
</html>

Arbre DOM (Document Object Model)

L'arbre DOM correspond à la représentation mémoire d'un document Web. Chaque élément HTML est représenté par un noeud et ses éléments fils apparaissent comme des ramifications. JavaScript propose un mécanisme permettant d'accéder à un élément donné du document et d'en modifier le contenu.

L'objet JavaScript document représente la racine de l'arbre DOM. La méthode getElementById() permet d'accéder à un élément HTML identifié. L'objet JavaScript DOMELement retourné dispose de plusieurs propriétés dont innerHTML qui contient, sous la forme d'une chaîne de caractères, le code HTML du contenu de l'élément.

Ainsi, pour modifier dynamiquement le contenu d'un document Web, il suffit de remplacer la valeur de la propriété innerHTML d'un élément par une nouvelle chaîne de caractères. Dans l'exemple ci-dessus, le contenu (initialement vide) de l'élément div d'identifiant main est remplacé par la valeur de la variable message.

Variables

JavaScript est un langage à typage dynamique. Lors de la création d'une variable, inutile de préciser son type. Il suffit juste d'utiliser le mot-clé var.

Boucles

Comme dans beaucoup de langages de programmation, il est possible de créer des structures itératives (boucles). Leur syntaxe est très semblable à celle de langages comme Java, C, C++.

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Hello</title>
  </head>
  <body>
    <div id="main"></div>

    <script>
      /* Table de multiplication de 7 */
      var maths = "";
      for (var i=0;i<=10; i++) {
      	maths += "7 &times; " + i + " = " + (7*i) + "<br>";
      }

      document.getElementById("main").innerHTML = maths;
    </script>
  </body>
</html>

Exercice 35

Écrire un programme JavaScript qui remplit un tableau HTML avec les 20 premières valeurs de la suite de Fibonacci :

F0 = 1, F1 = 1
Fn+2 = Fn+1 + Fn

nF(n)
01
11
22
33
45
58
613
721
834
955
1089
11144
12233
13377
14610
15987
161597
172584
184181
196765

Correction

Tests

La syntaxe des tests est aussi très similaire aux autres langages de programmation.

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Hello</title>
  </head>
  <body>
    <div id="main"></div>

    <script>
      var message = "";
      var now = new Date();

      var hours = now.getHours();
      if (hours<12) {
        message = "Good morning";
      }
      else {
        message = "Good afternoon";
      }

      document.getElementById("main").innerHTML = message;
    </script>
  </body>
</html>

Exercice 36

Concevoir un programme JavaScript qui affiche l'heure au format HH:MM:SS à laquelle la page a été ouverte (l'heure est figée). Pour plus de détails, consulter la documentation de l'objet JavaScript Date.

10:07:01

Correction

Fonctions

Une fonction JavaScript est définie à l'aide du mot-clé function. Toujours en raison du typage dynamique, il est inutile de préciser la nature de l'objet retourné dans le prototype de fonction.

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Hello</title>
  </head>
  <body>
    <div id="main"></div>

    <script>
      function hello() {
        var now = new Date();

        var hours = now.getHours();
        if (hours<12) {
          return "Good morning";
        }
        else {
          return "Good afternoon";
        }
      }

      document.getElementById("main").innerHTML = hello();
    </script>
  </body>
</html>

Exercice 37

Modifier le code du programme de l'exercice 36 en utilisant une fonction afin que l'affichage de l'heure soit mis à jour toutes les secondes. Pour cela, consulter la documentation de la méthode window.setInterval.

Correction

Programmation événementielle

Le principe de la programmation événementielle consiste à pouvoir déclencher un appel de fonction lors de la survenue d'un événément (onClick, onKeyUp, onChange, ...).

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Hello</title>
    <style>
      #main {
        width: 200px;
        border: 2px solid black;
        border-radius: 15px;
        margin: auto auto;
        margin-top: 25px;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="main" onClick="changeBgColor(this);">Click me!</div>

    <script>
      function changeBgColor(element) {
        red   = Math.floor(Math.random()*2048)%256;
        green = Math.floor(Math.random()*2048)%256;
        blue  = Math.floor(Math.random()*2048)%256;

        element.style.backgroundColor = "rgb("+red+","+green+","+blue+")";
      }
    </script>
  </body>
</html>

Exercice 38

Concevoir un programme pour jouer au jeu Rock, Paper, Scissors contre le navigateur :

  1. Le joueur fait son choix (rock, scissors ou paper) en cliquant sur une des 3 cases.
    Début de partie
    Début de la partie
  2. Initialisation d'une variable entière player sachant que rock → 0, scissors → 1 et paper → 2.
  3. Initialisation d'une variable entière computer à l'aide d'un tirage aléatoire
    Indication : documentation des méthodes Math.random() et Math.floor().
  4. Comparaison des valeurs des variables player et computer pour afficher le résultat:
    Victoire de la machine
    La machine gagne
    Match nul
    Match nul
    Victoire de l'humain
    L'humain gagne

Images à télécharger :

Correction

Exercice 38b

Modifier le programme de l'exercice 37 pour jouer au jeu Rock, Scissors, Paper, Lizard, Spock. popularisé par la sérié télévisée Big Bang Theory.

Exercice 39

L'objectif est de réaliser un programme qui affiche un calendrier du mois d'une année donnée.

Calendrier
  1. Écrire une fonction isLeapYear(year) qui retourne true si l'année est bissextile et false sinon.
    Indication : une année est bissextile si elle est multiple de 4 et pas de 100, ou multiple de 400.
  2. Écrire une fonction numberOfDaysInMonth(month, year) qui retourne le nombre de jours dans le mois month de l'année year.
  3. Écrire une fonction calendar(month, year) qui retourne une chaîne de caractères contenant le code HTML d'un tableau.
    • Une entête pour les 7 jours de la semaine
    • Un corps pour les numéros des jours du mois
  4. Écrire une fonction updateCalendar(month, year) qui affiche le calendrier. L'appel de la fonction sera associé à l'événement onChange de chacun des éléments de type select.

Correction