Séance n°6 : Initiation JavaScript

Travail demandé :

1. Créer un fichier HTML nommé javascript01.html contenant le code suivant :

   <!DOCTYPE html>
   <html lang="fr">
   <head>
     <meta charset="UTF-8">
     <title>Initiation JavaScript</title>
   </head>
   <body>
     <h1>Mon premier script</h1>
     <script>
       console.log("Hello JavaScript!");
     </script>
   </body>
   </html>

2. Ouvrir la page dans le navigateur Web.
3. Ouvrir l'outil de développement (DevTools) en appuyant sur F12 ou Ctrl+Shift+I, puis basculer sur l'onglet Console.

   

Travail demandé :

1. Créer un fichier JavaScript nommé jscript01.js dans le même répertoire de travail, contenant le code suivant :

   console.log("Hello from console.log inside an external file");

2. Intégrer ce fichier dans javascript01.html à l'aide de la balise :

   <script src="jscript01.js"></script>

3. Recharger la page dans le navigateur (F5 ou Ctrl+R) et vérifier la console.

   

Travail demandé :

1. Ouvrir la console du navigateur (F12).
2. Tester la déclaration de variables avec et sans initialisation :

   Sans initilisation

   let nom;
   let age;
   console.log(nom, age); // undefined undefined

   Avec initilisation

   let nom = "Ahmed";
   let age = 16;
   console.log(nom, age); // Ahmed 16

3. Tester l'effet de la casse sur une variable :

   let x = 6;
   console.log(x); // Affiche 6
   console.log(X); // Erreur : X is not defined

4. Tester la réaffectation d'une variable (let) versus une constante (const) :

   let a = 4; 
   a = a + 2; 
   console.log(a); // Fonctionne : a = 6
   const b = 5; 
   b = b + 2; // Erreur : Assignment to constant variable

Travail demandé :

1. Tester les commandes suivantes dans la console du navigateur et relever le type renvoyé :

   console.log(typeof 5.6);         // 'number'
   console.log(typeof "3STI");        // 'string'
   console.log(typeof true);          // 'boolean'
   console.log(typeof undefined);     // 'undefined'
   console.log(typeof [10, 20, 30]);  // 'object'
   console.log(typeof alert);         // 'function'

2. Expliquer pourquoi JavaScript est qualifié de langage à typage dynamique (Trois propositions sont correctes).
   1. Le type d'une variable n'a pas besoin d'être déclaré à l'avance ; il est déduit automatiquement à l'exécution à partir de la valeur qui lui est affectée.
   2. Une variable déclarée avec let conserve définitivement son type initial ; lui assigner une valeur d'un autre type déclenche une erreur.
   3. En JavaScript, ce sont les valeurs en mémoire qui possèdent un type et non les variables elles-mêmes.
   4. Le programmeur doit obligatoirement déclarer le type de chaque variable à l'aide de mots-clés spécifiques tels que int, float ou string.
   5. Une même variable peut changer de type au cours de l'exécution du programme si on lui affecte une nouvelle valeur d'un type différent.

On souhaite calculer la longueur de l'hypoténuse d'un triangle rectangle de côtés a = 3 et b = 4 grâce à la formule mathématique c = √(a² + b²) :

Le code initial comporte une erreur :

Code JavaScript :

<script>
  // Calcul de l'hypoténuse d'un triangle rectangle
  let a = 3;
  let b = 4;
  // Formule : c = racine(a² + b²)
  let c = Math.sqrt(a + a); // <-- Erreur dans l'expression
  // Affichage du résultat
</script>

Résultat dans la console :

Travail demandé :

1. Créer un fichier HTML nommé javascript02.html.
2. Copier le code précédent puis le tester dans la console du navigateur (F12).
3. Corriger l'erreur de calcul pour obtenir la valeur correcte c = 5 (en remplaçant a + a par a * a + b * b ou a ** 2 + b ** 2).

Lors de la confirmation d'un mot de passe dans un formulaire, si les deux saisies diffèrent, une alerte immédiate doit être notifiée à l'utilisateur :

Travail demandé :

1. Créer un fichier HTML nommé javascript03.html.
2. Compléter le code JavaScript suivant :

   let pwd1 = "3INFO";
   let pwd2 = "3Info";
   if (pwd1 == pwd2) {
     // Afficher mots de passes identiques dans une boite d'alerte
   } else {
     // Afficher mots de passes différents dans une boite d'alerte
   }

On désire générer dynamiquement des paragraphes de calculs mathématiques et leur appliquer une alternance de couleurs via des sélecteurs CSS3.

Travail demandé :

1. Créer un fichier HTML nommé javascript04.html.
2. Copier le code suivant :

   <script>
     let a = 5;
     let b = 6;
     let res = a + b;
     // à compléter
   </script>

3. Compléter le code pour afficher l'alternance rouge / bleu des paragraphes, montrée ci-dessus.

La propriété innerHTML permet d'injecter ou de modifier du balisage HTML à l'intérieur d'un élément cible préalablement sélectionné via son identifiant.

<div id="message"></div>
<script>
  // Récupérer une référence du div
  const msg = document.getElementById("message");
  // Ajouter un contenu stylisé dans ce div
  msg.innerHTML = '<p class="erreur">Bienvenue dans JavaScript!</p>';
</script>

#message { width: 500px; margin: 10px auto; }
.erreur { background-color: red; color: white; font-weight: bold; padding: 15px; }

Travail demandé :

1. Copier les codes HTML et CSS ci-dessus dans un fichier HTML nommé javascript05.html.
2. Tester dans le navigateur pour observer le message stylisé.
3. Ajouter un conteneur supplémentaire dans le document : <div id="greeting"></div>.
4. Ajouter le code JavaScript nécessaire pour obtenir l'affichage suivant :

   

On réalise une mini-calculatrice à l'aide d'un formulaire HTML dont le résultat est affecté dynamiquement dans un champ désactivé :

Code HTML / JavaScript :

<form action="#">
  <div><label for="a">a</label><input type="number" name="a" id="a" value="9"></div>
  <div><label for="b">b</label><input type="number" name="b" id="b" value="16"></div>
  <div><label for="res">a + b =</label><input type="number" name="res" id="res" disabled></div>
</form>
<script>
  const a = document.getElementById("a");
  const b = document.getElementById("b");
  const res = document.getElementById("res");
  res.value = Number(a.value) + Number(b.value);
</script>

Résultat dans le navigateur :

Travail demandé :

1. Créer un fichier HTML nommé javascript06.html.
2. Copier le code ci-dessus et tester dans le navigateur.
3. Ajouter un troisième champ numérique nommé c.

4. Modifier le script pour calculer simultanément les opérations composées :

   • a + b + c
   • a - b - c
   • a × b × c
   • a / b / c

   

Soit le formulaire de commande initial :

Code HTML / JavaScript initial :

<form action="#">
  <div>
    <label for="np">Nom & Prénom</label>
    <input type="text" name="np" id="np" value="Yassine">
  </div>
  <div>
    <label for="dn">Date de naissance</label>
    <input type="date" name="dn" id="dn" value="2022-10-08">
  </div>
  <button type="submit">Confirmer</button>
</form>
<script>
  const np = document.getElementById("np");
  const dn = document.getElementById("dn");
  document.writeln("<p>Bonjour ", np.value, "</p>");
  document.writeln("<p>Vous êtes né le ", dn.value, "</p>");
</script>

Rendu initial dans le navigateur :

Travail demandé :

1. Créer un fichier HTML nommé javascript07.html.
2. Copier le code précédent et tester dans le navigateur.
3. Ajouter un champ de type curseur <input type="range" min="1" max="7" value="3"> permettant à l'utilisateur de choisir la quantité d'articles à commander.

4. Compléter le script JavaScript pour lire et afficher la quantité sélectionnée dans la page :

   const qte = document.getElementById("qte");
   document.writeln("<p>Quantité : ", qte.value, "</p>");

   

On désire calculer et afficher le périmètre et la surface d'un cercle à partir de son rayon r saisi par l'utilisateur :

Code HTML initial :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Calculs sur un cercle</title>
</head>
<body>
  <h1>Calculs géométriques sur un cercle</h1>
  <div id="resCercle"></div>

  <script>
    // À compléter par l'élève :
    // 1. Saisir le rayon r à l'aide de prompt()
    // 2. Convertir la saisie en nombre
    // 3. Calculer le périmètre (2 * PI * r) et la surface (PI * r²)
    // 4. Afficher le résultat dans #resCercle via innerHTML
  </script>
</body>
</html>

Rendu attendu :

Travail demandé :

1. Créer un fichier HTML nommé javascript08a.html contenant le squelette ci-contre.
2. Demander à l'utilisateur de saisir le rayon r à l'aide de l'instruction prompt(...).
3. Convertir la valeur saisie en nombre (Number() ou parseFloat()).
4. Calculer le périmètre (2.π.r) et la surface (π.r²). Arrondir les résultats à deux décimales (toFixed(2)).
5. Afficher les résultats dans le conteneur #resCercle.
6. Tester en cliquant sur le bouton Annuler de la boîte d'invite. Quelle valeur est renvoyée par prompt() dans ce cas ?

Avant d'exécuter une action importante (comme vider un panier d'achats), une confirmation doit être demandée à l'utilisateur à l'aide de confirm() :

Code HTML initial :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Confirmation de panier</title>
</head>
<body>
  <h1>Gestion du panier d'achats</h1>
  <div id="messagePanier"></div>

  <script>
    // À compléter par l'élève :
    // 1. Déclencher la boîte de confirmation confirm()
    // 2. Tester la valeur booléenne reçue (true ou false)
    // 3. Afficher le message approprié dans #messagePanier
  </script>
</body>
</html>

Rendu attendu :

Travail demandé :

1. Créer un fichier HTML nommé javascript08b.html contenant le code de départ ci-contre.
2. Confirmer la suppression du contenu du panier (« Voulez-vous vraiment vider votre panier d'achats ? »). Stocker la réponse dans la variable reponse.
3. À l'aide d'une structure conditionnelle if ... else, vérifier la valeur de reponse :
   • Si l'utilisateur a cliqué sur OK (valeur true) : afficher en vert : « ✓ Le panier a été vidé avec succès. ».
   • Si l'utilisateur a cliqué sur Annuler (valeur false) : afficher en rouge : « ✗ Opération annulée. Votre panier est conservé. ».
4. Vérifier le type de la donnée renvoyée par confirm() à l'aide de l'opérateur typeof dans la console (console.log).

On désire calculer les totaux d'une facture en ligne :

Formulaire HTML à intégrer :

<form id="formFacture">
  <div>
    <label for="prixHT">Prix unitaire HT (DT) :</label>
    <input type="number" id="prixHT" value="120">
  </div>
  <div>
    <label for="qte">Quantité :</label>
    <input type="number" id="qte" value="2">
  </div>
  <div>
    <label for="tva">Taux de TVA :</label>
    <select id="tva">
      <option value="0.07">7 %</option>
      <option value="0.13">13 %</option>
      <option value="0.19" selected>19 %</option>
    </select>
  </div>
  <button type="button" id="btnCalculer">Calculer TTC</button>
</form>
<div id="resFacture"></div>

Rendu attendu :

Travail demandé :

1. Créer un fichier HTML nommé javascript08c.html et y copier le formulaire ci-contre.
2. Le clic sur le bouton permet de :
   • Récupérer les valeurs du formulaire et de les convertir en nombres.
   • Calculer le total HT (prixHT × qte), le montant de la TVA (totalHT × tva) et le montant total TTC (totalHT + montantTVA).
   • Afficher le détail de la facture dans la balise <div id="resFacture"> en modifiant son contenu avec innerHTML.
3. Tester avec différentes valeurs pour vérifier l'exactitude des calculs.

Dans un formulaire d'inscription, certains champs partagent le même attribut name afin de constituer un groupe d'options : les boutons radio (sélection exclusive) et les cases à cocher (sélection multiple) :

Formulaire HTML à intégrer :

<form id="formProfil">
  <p><strong>Civilité (choix exclusif) :</strong><br>
    <label><input type="radio" name="civilite" value="M." checked> M.</label>
    <label><input type="radio" name="civilite" value="Mme"> Mme</label>
  </p>

  <p><strong>Centres d'intérêt (choix multiples) :</strong><br>
    <label><input type="checkbox" name="interets" value="Web / Informatique" checked> Web / Informatique</label><br>
    <label><input type="checkbox" name="interets" value="Robotique" checked> Robotique</label><br>
    <label><input type="checkbox" name="interets" value="Multimédia"> Multimédia</label>
  </p>

  <button type="button" id="btnProfil">Valider le profil</button>
</form>
<div id="resProfil"></div>

Rendu attendu :

Travail demandé :

1. Créer un fichier HTML nommé javascript08d.html et y intégrer le formulaire ci-contre.
2. Expliquer pourquoi la méthode document.getElementById() ne permet pas de cibler l'option sélectionnée parmi les boutons radio partageant le même attribut name.
3. Écrire le code JavaScript qui permet de :
   • Déterminer la civilité de l'utilisateur.
   • Collecter ses centres d'intérêts
   • Afficher la civilité et la liste des centres d'intérêt choisis dans la balise <div id="resProfil"> avec innerHTML.
4. Tester en cochant différentes combinaisons pour valider le bon fonctionnement de votre script.

Soit le programme de saisie de deux entiers et de comparaison de leur parité :

<script>
  let a = parseInt(prompt("Donner a ? "));
  let b = parseInt(prompt("Donner b ? "));

  if (a % 2 == b % 2) {
    document.writeln("<p>", a, " et ", b, " ont la même parité.</p>");
  } else {
    document.writeln("<p>", a, " et ", b, " n'ont pas la même parité.</p>");
  }
</script>

Travail demandé :

1. Copier le script précédent dans un fichier HTML nommé javascript09.html.
2. Tester dans le navigateur avec des valeurs valides (ex: 4 et 8, puis 3 et 6).
3. Tester maintenant avec des valeurs textuelles invalides ou en cliquant sur Annuler. Quelle est la valeur de a lorsqu'une chaîne non numérique est saisie ?
4. Corriger le comportement du script à l'aide de isNaN() pour qu'il affiche « Données manquantes ou invalides » en cas de saisie incorrecte.

On simule le jeu Pierre - Feuille - Ciseaux entre deux joueurs, où chaque coup est représenté par un entier : 0 (Pierre), 1 (Feuille), 2 (Ciseaux) :

let j2 = Math.floor(Math.random() * 3), cj2;
let j1, cj1;
let g, res;

switch (j2) {
  case 0: cj2 = "Pierre"; break;
  case 1: cj2 = "Feuille"; break;
  case 2: cj2 = "Ciseaux"; break;
  default: cj2 = "Aucun";
}

j1 = Math.floor(Math.random() * 3);
// Compléter pour j1...

Travail demandé :

1. Copier la base du code dans un fichier HTML nommé javascript10.html.
2. Compléter le jeu pour convertir également le coup du joueur 1 en texte via switch.
3. Déterminer le gagnant à l'aide de la formule mathématique : g = (j1 - j2 + 3) % 3;
   • g === 0 : Partie nulle,
   • g === 1 : Le Joueur 1 l'emporte,
   • g === 2 : Le Joueur 2 l'emporte.
4. Afficher le verdict complet sous forme d'alerte ou dans la page Web.

Travail demandé :

1. Créer un fichier HTML nommé javascript13.html.
2. Écrire une boucle for qui parcourt tous les entiers de deux chiffres (de 10 à 99).
3. Extraire pour chaque nombre son chiffre des dizaines d et son chiffre des unités u.
4. Afficher uniquement les nombres dont le chiffre des dizaines est un multiple du chiffre des unités ou vice-versa (avec u ≠ 0) :

   

On implémente l'algorithme d'Euclide pour calculer le PGCD de deux entiers a et b :

let a = parseInt(prompt("Donner a ? "));
let b = parseInt(prompt("Donner b ? "));

/* Calcul du PGCD : Algorithme d'Euclide */
let a1 = a, b1 = b;
while (b1 != 0) {
  let r = a1 % b1;
  a1 = b1;
  b1 = r;
}
document.writeln("PGCD(", a, ", ", b, ") = ", a1);

Travail demandé :

1. Tester le calcul du PGCD dans une page HTML.
2. Compléter le script par le calcul du PPCM de a et b selon la méthode des incréments successifs : incrémenter un multiple de a de sa propre valeur tant qu'il n'est pas divisible par b.

   Multiples de a	b	a mod b ≠ 0
   35 70 105	15 15 15	true true false (Arrêt)

   

Soit le programme initial de recherche d'un nombre se terminant par un chiffre aléatoire donné :

let a = Math.floor(Math.random() * 10);
let b, u;

document.writeln("<p>Cherchons un nombre ayant un chiffre d'unités = ", a, "</p>");
do {
  b = Math.floor(Math.random() * 90) + 10;
  u = b % 10;
  if (u == a) {
    document.writeln(b, " Accepté<br>");
  } else {
    document.writeln(b, " Rejeté<br>");
  }
} while (u != a);

Travail demandé :

1. Copier le code dans un fichier HTML nommé javascript14.html et observer le tirage dans le navigateur.
2. Modifier le programme pour la recherche avancée suivante :
   • Choisir aléatoirement deux chiffres distincts a et b (entre 1 et 9).
   • Tirer répétitivement un nombre aléatoire de quatre chiffres c (entre 1000 et 9999).
   • La boucle s'arrête dès que c contient simultanément les deux chiffres a et b.

   

Travail demandé :

1. Créer un fichier HTML nommé javascript15.html.
2. Écrire une fonction nommée max(a, b) qui prend deux paramètres numériques et renvoie la plus grande des deux valeurs :

   function max(a, b) {
     return (a > b) ? a : b;
   }

3. Tester la fonction avec différentes valeurs et afficher le résultat via console.log() et document.writeln().
4. Réécrire la fonction sous forme de fonction fléchée : const max = (a, b) => ...;.

Travail demandé :

1. Ouvrir la console du navigateur (F12).
2. Tester la validation avec isNaN() :

   console.log(isNaN("2024"));      // false (valeur convertible)
   console.log(isNaN("2024-STI"));  // true (valeur non convertible)

3. Convertir un entier en sa représentation binaire et hexadécimale via toString(base) :

   let n = 42;
   console.log(n.toString(2));  // '101010' (binaire)
   console.log(n.toString(16)); // '2a' (hexadécimal)

4. Comparer les résultats et comportements de parseInt("30.75px"), parseFloat("30.75px") et Number("30.75").

Travail demandé :

1. Dans la console du navigateur, exécuter let d = new Date();.
2. Afficher la date courante au format francophone JJ/MM/AAAA en assemblant d.getDate(), d.getMonth() + 1 et d.getFullYear().
3. Créer une instance date pour le jour du baccalauréat :

   let bac = new Date("2027-06-02");

4. Calculer le nombre de jours restants jusqu'au baccalauréat grâce à la différence des horodatages en millisecondes :

   let diffJours = Math.ceil((bac - d) / (1000 * 60 * 60 * 24));
   console.log("Jours restants avant le bac :", diffJours);

Soit une case à cocher protégée par un gestionnaire d'événement :

<form action="#">
  <input type="checkbox" name="defi" id="defi">
  <label for="defi">Cochez-moi si vous pouvez !</label>
</form>
<script>
  const defi = document.getElementById("defi");
  let clics = 0;
  defi.addEventListener("click", (e) => {
    clics++;
    if (clics < 3) {
      alert("Désolé ! Cliquez encore " + (3 - clics) + " fois !");
      e.preventDefault(); // Annule la coche
    }
  });
</script>

Travail demandé :

1. Copier le code dans un fichier HTML nommé javascript17.html.
2. Tester dans le navigateur et vérifier que la case ne peut être cochée qu'au troisième clic.

On désire concevoir un formulaire statistique qui affiche automatiquement la valeur maximale, la valeur minimale et la moyenne dès que l'utilisateur renseigne les deux champs :

Travail demandé :

1. Créer un fichier HTML nommé javascript18.html.
2. Créer deux champs <input type="number"> pour saisir deux nombres a et b.
3. Attacher un écouteur change sur chaque champ pour vérifier si les deux valeurs sont saisies, puis calculer et afficher : Math.max(a, b), Math.min(a, b) et la moyenne (a + b) / 2.

On programme un jeu interactif où l'élève doit deviner un nombre secret choisi aléatoirement entre 1 et 99. Les indications sont fournies dès que l'utilisateur valide sa proposition (perte de focus avec blur) :

Travail demandé :

1. Créer un fichier HTML nommé javascript19.html.
2. Générer un nombre aléatoire secret :

   const secret = Math.floor(Math.random() * 99) + 1;

3. Écouter l'événement blur ou change sur le champ de saisie pour comparer la proposition au nombre secret :
   • Si la saisie est plus petite : afficher « Plus grand ! (Greater than ...) »
   • Si la saisie est plus grande : afficher « Plus petit ! (Lesser than ...) »
   • Si la saisie est exacte : afficher « Bravo ! Vous avez deviné. C'était bien ... ! »
4. À la prise de focus (focus), réinitialiser le champ pour faciliter la saisie suivante.

Soit le formulaire d'inscription d'un élève :

<form id="student" action="#">
  <div>
    <label for="np">Nom & Prénom</label>
    <input type="text" id="np" required>
  </div>
  <div>
    <label for="cl">Classe</label>
    <input type="text" id="cl" required>
  </div>
  <button type="submit">Envoyer</button>
  <button type="reset">Annuler</button>
</form>

Travail demandé :

1. Créer un fichier HTML nommé javascript22.html.
2. Ajouter un écouteur submit sur le formulaire : intercepter l'envoi pour convertir automatiquement le nom et la classe en MAJUSCULES avant soumission.
3. Ajouter un écouteur reset sur le formulaire : vérifier si les champs sont déjà vides ; si oui, empêcher l'action ; si non, convertir le texte en minuscules ou demander confirmation avant effacement.