DEVELOPPEMENT WEB
INITIATION AU JAVASCRIPT

Introduction

Si le HTML permet d'afficher du texte, des liens ou des images, le JavaScript permet de modifier l'affichage en fonction d'événements survenant dans la page. C'est un langage complémentaire au HTML, comme le CSS ou le SVG. Le code en JavaScript se place entre les balises <script> et </script>.

En somme, le JavaScript permet de programmer des applications Web dans lesquelles les données sont traitées coté client.

Expérimenter

Fenêtre en cliquant sur un bouton

Ajouter au programme précédent un bouton et une fonction :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script>
    function ok() {
      alert("Bravo!");
    }
  </script>
</head>

<body>
  <button type="button" onclick="ok();">Valider</button>
</body>

</html>

Fenêtre affichant un résultat

Compléter à nouveau le programme précédent :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script>
    function ok() {
      k=document.getElementById("x").value;
      l=document.getElementById("y").value;
      m=k*l+3;
      alert("a × b + 3 = "+m);
    }
  </script>
</head>

<body>
  a = <input id="x"><br>
  b = <input id="y"><br>
  <button type="button" onclick="ok();">Valider</button>
</body>

</html>

Addition de chaînes de caractères

Au lieu d'effectuer l'opération m=k*l+3;, effectuez une simple addition : m=k+l;. Que constatez-vous? Les résultats obtenus ne sont pas corrects! C'est que... le JavaScript est un langage dynamique : Il convertit automatiquement les types des variables en cas de besoin.

En fait, k=document.getElementById("nb_a").value; signifie que la variable k prend comme valeur une chaîne de caractères au lieu d'un nombre. La chaîne de caractères se convertit en nombre en écrivant : k=k*1;.

Résultat affiché dans la page

Testez le code ci-dessous, permettant d'effectuer un calcul.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script>
    function ok() {
      k=document.getElementById("x").value;
      l=document.getElementById("y").value;
      m=k*l+3;
      document.getElementById("z").innerHTML="a × b + 3 = "+m;
    }
  </script>
</head>

<body>
  a = <input id="x"><br>
  b = <input id="y"><br>
  <button type="button" onclick="ok();">Valider</button>
  <p id="z">a × b + 3 = ...</p>
</body>

</html>

Jeu de devinettes

Testez le code ci-dessous, permettant de réaliser un jeu dont le but est de deviner un nombre.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script>
    nb_a_deviner = Math.floor(Math.random()*10);
    function ok() {
      choixJoueur = document.getElementById("nb").value;
      issue="Vous avez gagné!";
      if (choixJoueur < nb_a_deviner) issue="Trop petit!";
      if (choixJoueur > nb_a_deviner) issue="Trop grand!";
      alert(issue);
    }
  </script>
</head>

<body>
  <h1>Jeu : Deviner un nombre!</h1>
  Proposez un nombre allant de 0 à 9 :
  <input id="nb">
  <button type="button" onclick="ok();">Valider</button>
</body>

</html>

Programmer

Volume d'un cylindre

Réaliser un programme qui demande, pour un cylindre :

Son diamètre, en cm.
Sa hauteur, en cm.

Qui calcule son volume, en cm³.

Circonférence, surface d'un cercle

Réaliser un programme qui demande, pour un cercle, son diamètre, en cm.

Qui calcule :

Sa circonférence, en cm.
Sa surface, en cm².

Amélioration du jeu de devinettes

Modifier le code du Jeu de devinettes en ajoutant un bouton Recommencer, qui permet de rejouer lorsque la partie est gagnée.

Pour aller plus loin

Récupérer l'image ci-dessous, l'enregistrer sous le nom tete.png.

Tester le code ci-dessous, utilisant cette image.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
  body { text-align: center; }
    .sortir {
       transition: 1s;
       transform: translate(400px,0px);
    }
    .rentrer {
       transition: 1s;
    }
  </style>
  <script>
    function partir() { 
      document.getElementById('tete').setAttribute('class','sortir');
    }
    function venir() { 
      document.getElementById('tete').setAttribute('class','rentrer');
    }
  </script>
</head>

<body>
  <button type="button" onclick="venir();">Venir</button>
  <button type="button" onclick="partir();">Partir</button>
  <br><br>
  <img src="tete.png" id="tete">
</body>

</html>

Modifier le code selon votre imagination, par exemple pour rapetisser la tête, la tourner ou la faire disparaître en cliquant sur des boutons. Exemples de codes en CSS :

/* A tester : */
transform: rotate(30deg) scale(0.6);
opacity: 0;