DEVELOPPEMENT WEB
INITIATION AU JAVASCRIPT

Objectif

Après l'étude du HTML associé au CSS vient celle du HTML complété par JavaScript. Le JavaScript est un langage de programmation, ici interprété par le navigateur. Il traite localement les données entrées par l'utilisateur.

Comprendre

Le code en JavaScript se place communément entre les balises <script> et </script>.

Fenêtre en cliquant sur un bouton

Recopier (NotePad++, Sublime Text...) et tester le programme ci-dessous :

<!DOCTYPE html>
<html>

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

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

</html>

Résultat affiché dans une fenêtre

Compléter le programme précédent :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script>
    ok=function() {
      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 nombres

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>
    ok=function() {
      k=document.getElementById("x").value;
      l=document.getElementById("y").value;
      m=k*l+3;
      document.getElementById("z").innerHTML=m;
    };
  </script>
</head>

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

</html>

La fonction ok() s'articule en 3 parties :

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);
    ok=function() {
      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>

Pratiquer

Volume d'un cylindre

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

Qui calcule son volume, en cm3.

Rappel

Si d, h et V sont respectivement le diamètre, la hauteur et le volume, alors :   V = π . d 24 . h

Circonférence, surface d'un cercle

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

Qui calcule :

Rappel

Si d, c et S sont respectivement le diamètre, la circonférence et la surface, alors :

Amélioration du jeu de devinette

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

Approfondir

Récupérer une image, par exemple celle 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>
    partir=function() { 
      document.getElementById('tete').setAttribute('class','sortir');
    };
    venir=function() { 
      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;

Exemple de résultat obtenu :