24 - JavaScript

Cours associés : 14 - HTML DOM , 15 - JavaScript .

QCM – vérification des prérequis

Pour chaque question, une seule réponse est correcte.

1. Quelle méthode JavaScript permet de sélectionner un élément HTML par son identifiant ?

• A. document.querySelector("id")
• B. document.getElementById("id")
• C. document.getElement("id")
• D. document.findById("id")

Correction publiée après la séance.

2. Quel attribut HTML permet d’exécuter du JavaScript au clic sur un bouton ?

• A. onhover
• B. onclick
• C. onpress
• D. action

Correction publiée après la séance.

3. Que fait document.createElement("div") ?

• A. Il sélectionne tous les <div> de la page
• B. Il crée un nouvel élément <div> en mémoire (sans l’ajouter à la page)
• C. Il supprime le premier <div> de la page
• D. Il modifie le contenu du premier <div>

Correction publiée après la séance.

4. Quelle propriété permet de modifier le texte affiché dans un élément HTML ?

• A. element.value
• B. element.textContent
• C. element.src
• D. element.href

Correction publiée après la séance.

Exercice 1

Créer un fichier html contenant un bouton. Ajouter la fonction (en JavaScript) qui permet d’afficher une fenêtre contenant le message "Hello World !" lorsque l’on clique sur le bouton.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Exercice 1</title>
  <script>
    function direBonjour() {
      ...
    }
  </script>
</head>
<body>
  <button onclick="...">Cliquer ici</button>
</body>
</html>

Correction publiée après la séance.

Exercice 2

Ajouter un champ de saisie texte au fichier html. Ajouter la fonction (en JavaScript) qui permet d’afficher une fenêtre contenant la valeur de ce champ de saisie lorsque l’on clique sur le bouton.

Correction publiée après la séance.

Exercice 3

Soit le fichier html :

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="utf-8">
  <title>Écriture d'une fonction simple</title>
  <script>

  </script>
</head>
<body>

<h1>Écriture d'une fonction simple</h1>

<p>Cliquez sur le bouton pour lancer la fonction : <button onclick="surfaceRectangle()">Lancer la fonction</button></p>

</body>
</html>

On souhaite utiliser les fonctions alert (qui affiche une chaîne de caractères) et prompt (qui invite à la saisie d’une donnée), dont voici les syntaxes :

• alert(Chaîne à afficher à l'écran)
• variable = prompt(Question à afficher à l'écran)

Compléter le fichier HTML ci-dessus pour que le clic sur le bouton lance une fonction. Cette fonction demande la saisie d’une largeur, d’une longueur et affiche la surface du rectangle correspondant dans une fenêtre.

function surfaceRectangle() {
  const largeur = Number(prompt("Largeur du rectangle ?"));
  const longueur = ...;
  alert(...);
}

Correction publiée après la séance.

Exercice 4

Soit le fichier html :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Mon fichier</title>
</head>
<body>
  <h1>Mon fichier</h1>
  <div id="dejala">
    <span id="asupprimer">Il faut me supprimer</span>
  </div>
</body>
</html>

1. Créer un bouton qui supprime le texte contenu dans la balise span d’identifiant asupprimer quand on clique dessus (on appellera supprimerTexte() la fonction utilisée).

   Indice

   document.getElementById("asupprimer") renvoie l’élément : affecter une chaîne vide à sa propriété textContent efface son texte.

2. Créer un bouton qui ajoute le texte « Ce div a été ajouté en utilisant du JavaScript » dans une balise div nouvellement créée et insérée dans l’élément div d’identifiant dejala quand on clique dessus (on appellera ajouterTexte() la fonction utilisée).

   Indice

   Trois étapes : créer l’élément avec document.createElement("div"), lui donner son texte avec textContent, puis l’insérer dans le div d’identifiant dejala avec appendChild.

   Code à copier puis compléter

   function ajouterTexte() {
     const div = document.createElement("div");
     div.textContent = ...;
     document.getElementById(...).appendChild(div);
   }
   

3. Créer un bouton qui ajoute un carré rouge dans une balise div nouvellement créée et insérée dans l’élément div d’identifiant dejala quand on clique dessus (on appellera carreRouge() la fonction utilisée).

   Indice

   Même démarche qu’à la question 2. Le carré est un div vide, dont la propriété style fixe la taille et la couleur : div.style.width = "50px", puis height et backgroundColor.

Correction publiée après la séance.

Exercice 5

Soit le fichier html :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Mon titre</title>
  </head>
  <body>
    <h1 onclick="afficherContenuDiv(1)">Partie 1</h1>
    <div id="titre1" style="display:none">
      <p>Mon premier paragraphe</p>
      <p>Mon second paragraphe</p>
    </div>
    <h1 onclick="afficherContenuDiv(2)">Partie 2</h1>
    <div id="titre2" style="display:none">
      <p>Mon premier paragraphe</p>
      <p>Mon second paragraphe</p>
    </div>
    <p><button type="button" onclick="cacherLesDivs()">Masquer</button></p>
    <p>
      Titre n° : <input type="text" id="titre">
      <button type="button" onclick="alertTitre()">Afficher</button>
    </p>
  </body>
</html>

1. Écrire la fonction JavaScript afficherContenuDiv permettant d’afficher le contenu du div correspondant au titre sur lequel on clique.

   Indice

   Le div à afficher a pour identifiant "titre" + numero. Il est caché par display: none : donner la valeur "block" à sa propriété style.display le fait apparaître.

2. Écrire la fonction JavaScript cacherLesDivs permettant de masquer le contenu de tous les div du document.

   Indice

   document.querySelectorAll("div") renvoie tous les div du document : les parcourir avec une boucle for ... of.

3. Écrire la fonction alertTitre permettant d’afficher (avec la fonction JavaScript alert) le contenu du titre dont le numéro est saisi dans le champ titre.

   Indice

   Le champ titre contient le numéro sous forme de chaîne : le convertir avec Number. document.querySelectorAll("h1") renvoie la liste des titres, dont le premier a l’indice 0.

4. Écrire la fonction supprimerTitre permettant d’effacer le contenu du titre dont le numéro est saisi dans le champ titre (suppression du nœud fils de type texte).

   Indice

   Le texte d’un titre est son premier nœud fils, h1.childNodes[0], qui n’existe que si le titre n’est pas vide ; la méthode remove() le retire de la page.

5. Écrire la fonction definirTitre permettant d’affecter au titre dont le numéro est saisi dans le champ titre la valeur "Nouveau titre". On testera que le titre a ou non déjà une valeur (nœud texte) avant l’ajout, afin de la supprimer si besoin.

   Indice

   Réutiliser supprimerTitre, puis donner le nouveau texte au titre avec textContent.

Correction publiée après la séance.

Pour aller plus loin : deux activités sur CodePen

Ouvrir chaque pen dans un nouvel onglet, lire les trois onglets HTML, CSS et JS, puis répondre.

Changer la couleur d’un texte avec JavaScript

See the Pen Activité HTML 4 by Razik (@RazikSF) on CodePen.

1. Quel événement déclenche le changement de couleur, et comment la fonction est-elle reliée à l’élément ?

2. Modifier le script pour que la couleur change à chaque clic (alterner entre deux couleurs).

   Indice

   Tester la couleur actuelle de l’élément avec un if, ou la mémoriser dans une variable déclarée en dehors de la fonction, puis choisir l’autre couleur.

Combinaison de CSS et de JavaScript

See the Pen Activité HTML 6 by Razik (@RazikSF) on CodePen.

1. Le script modifie-t-il directement le style de l’élément (element.style) ou une classe CSS (classList) ? Quel est l’avantage de la seconde méthode ?

   Indice

   Avec une classe, où se trouve la mise en forme : dans le script ou dans la feuille CSS ? Qui peut alors la modifier sans toucher au JavaScript ?

2. Ajouter une règle CSS supplémentaire à la classe utilisée et vérifier qu’elle s’applique au clic sans toucher au script.