29 - 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

Réponse : B. document.getElementById("id") renvoie l’élément dont l’attribut id vaut "id". C’est la méthode la plus courante pour accéder à un élément précis du DOM.

A est faux : querySelector utilise un sélecteur CSS (il faudrait écrire querySelector("#id") avec le #).
C est faux : cette méthode n’existe pas.
D est faux : cette méthode n’existe pas non plus.

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

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

Correction

Réponse : B. L’attribut onclick déclenche l’exécution d’une fonction JavaScript lorsque l’utilisateur clique sur l’élément.

A est faux : onhover n’existe pas en HTML (on utilise onmouseover).
C est faux : onpress n’est pas un attribut HTML standard (il existe onkeypress pour le clavier).
D est faux : action est un attribut de la balise <form>, pas un gestionnaire d’événement.

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

Réponse : B. createElement crée un élément en mémoire. Pour qu’il apparaisse sur la page, il faut ensuite l’insérer dans le DOM avec appendChild ou insertBefore.

A est faux : pour sélectionner tous les <div>, on utilise document.getElementsByTagName("div").
C est faux : pour supprimer un élément, on utilise remove() ou removeChild.
D est faux : pour modifier le contenu, on utilise innerHTML ou textContent.

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

Réponse : B. textContent permet de lire ou modifier le texte contenu dans un élément (sans interpréter le HTML).

A est faux : value concerne la valeur des champs de formulaire (<input>, <select>), pas le texte des éléments.
C est faux : src est l’attribut source d’une image ou d’un script.
D est faux : href est l’attribut lien d’une ancre <a>.

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.

Correction

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

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

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Exercice 2</title>
  <script>
    function afficherSaisie() {
      const valeur = document.getElementById("saisie").value;
      alert(valeur);
    }
  </script>
</head>
<body>
  <input type="text" id="saisie">
  <button onclick="afficherSaisie()">Afficher</button>
</body>
</html>

La propriété value d’un champ de saisie contient le texte tapé par l’utilisateur au moment du clic.

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.

Correction

function surfaceRectangle() {
  const largeur = Number(prompt("Largeur du rectangle ?"));
  const longueur = Number(prompt("Longueur du rectangle ?"));
  alert("Surface : " + largeur * longueur);
}

prompt renvoie une chaîne de caractères : Number(...) la convertit en nombre, sinon * fonctionnerait mais + concaténerait les deux chaînes.

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>

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).
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).
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).

Correction

Les trois boutons, à placer dans body :

<button onclick="supprimerTexte()">Supprimer le texte</button>
<button onclick="ajouterTexte()">Ajouter un texte</button>
<button onclick="carreRouge()">Ajouter un carré rouge</button>

Les trois fonctions, dans une balise <script> du head :

function supprimerTexte() {
  document.getElementById("asupprimer").textContent = "";
}

function ajouterTexte() {
  const div = document.createElement("div");
  div.textContent = "Ce div a été ajouté en utilisant du JavaScript";
  document.getElementById("dejala").appendChild(div);
}

function carreRouge() {
  const div = document.createElement("div");
  div.style.width = "50px";
  div.style.height = "50px";
  div.style.backgroundColor = "red";
  document.getElementById("dejala").appendChild(div);
}

Pour retirer complètement le span plutôt que vider son texte, on écrirait document.getElementById("asupprimer").remove().

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>

Écrire la fonction JavaScript afficherContenuDiv permettant d’afficher le contenu du div correspondant au titre sur lequel on clique.
Écrire la fonction JavaScript cacherLesDivs permettant de masquer le contenu de tous les div du document.
É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.
É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).
É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.

Correction

function afficherContenuDiv(numero) {
  document.getElementById("titre" + numero).style.display = "block";
}

function cacherLesDivs() {
  for (const div of document.querySelectorAll("div")) {
    div.style.display = "none";
  }
}

// Renvoie l'élément h1 dont le numéro est saisi dans le champ « titre »
function titreChoisi() {
  const numero = Number(document.getElementById("titre").value);
  return document.querySelectorAll("h1")[numero - 1];
}

function alertTitre() {
  alert(titreChoisi().textContent);
}

function supprimerTitre() {
  const h1 = titreChoisi();
  if (h1.firstChild !== null) {
    h1.removeChild(h1.firstChild);
  }
}

function definirTitre() {
  const h1 = titreChoisi();
  supprimerTitre();
  h1.appendChild(document.createTextNode("Nouveau titre"));
}

Les deux dernières fonctions manipulent explicitement le nœud texte, comme le demande l’énoncé ; en pratique, h1.textContent = "Nouveau titre" fait le même travail en une ligne.

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.

Quel événement déclenche le changement de couleur, et comment la fonction est-elle reliée à l’élément ?
Modifier le script pour que la couleur change à chaque clic (alterner entre deux couleurs).

Combinaison de CSS et de JavaScript

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

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 ?
Ajouter une règle CSS supplémentaire à la classe utilisée et vérifier qu’elle s’applique au clic sans toucher au script.

28 - Formulaire Web 30 - Histoire de l'informatique