Révisions JavaScript

Révisions JavaScript#

Cette page rassemble des exercices de révision couvrant tous les objectifs de l'examen : variables, branchements conditionnels, fonctions, manipulation du HTML (DOM) et événements. Faites-les sans regarder la théorie, puis vérifiez avec les solutions.

Variables#

Exercice 42#

Qu'affiche chacun de ces programmes dans la console ?

1.

let a = 5;
let b = a + 3;
console.log(b);

Affichage :

2.

let prix = 10;
prix = prix * 2;
console.log(prix);

Affichage :

3.

let nom = "Max";
console.log("Salut " + nom);

Affichage :

4.

let score = 0;
score = score + 10;
score = score + 2;
console.log(score);

Affichage :

Exercice 43#

Chacun de ces programmes comporte une erreur typique d'un habitué de Python. Corrigez-les puis cliquez sur « Play ».

  1. <!DOCTYPE html>
<html><body><script>
nom = "Iliya";
console.log("Bonjour " + nom);
</script></body></html>

  2. <!DOCTYPE html>
<html><body><script>
let total = 50;
let total = total + 10;
print("Total : " + total);
</script></body></html>

Solution

  1. let nom = "Iliya";
console.log("Bonjour " + nom);

    Toute variable doit être déclarée avec let lors de sa création.

  2. let total = 50;
total = total + 10;
console.log("Total : " + total);

    let ne sert qu'à créer la variable : on ne le répète pas pour la modifier. De plus, la fonction d'affichage s'appelle console.log(), pas print().

Branchements conditionnels#

Exercice 44#

Qu'affiche chacun de ces programmes ?

1.

let t = 10;
if (t < 0) {
    console.log("gèle");
} else if (t < 15) {
    console.log("frais");
} else {
    console.log("chaud");
}

Affichage :

2.

let age = 18;
if (age >= 18) {
    console.log("majeur");
} else {
    console.log("mineur");
}

Affichage :

3.

let age = 15;
let argent = 100;
if (age >= 16 && argent >= 50) {
    console.log("accepté");
} else {
    console.log("refusé");
}

Affichage :

Exercice 45#

Chacun de ces programmes comporte au moins une erreur due à une habitude Python. Corrigez-les.

  1. <!DOCTYPE html>
<html><body><script>
let age = Number(prompt("Quel âge as-tu ?"));
if age >= 18 {
    console.log("Tu es majeur");
}
</script></body></html>

  2. <!DOCTYPE html>
<html><body><script>
let note = Number(prompt("Quelle est ta note ?"));
if (note >= 5) {
    console.log("Très bien");
} elif (note >= 4) {
    console.log("Suffisant");
} else {
    console.log("Insuffisant");
}
</script></body></html>

  3. <!DOCTYPE html>
<html><body><script>
let heure = Number(prompt("Quelle heure est-il ?"));
if (heure >= 9 and heure <= 17) {
    console.log("Le magasin est ouvert");
} else {
    console.log("Le magasin est fermé");
}
</script></body></html>

  4. <!DOCTYPE html>
<html><body><script>
let ville = prompt("D'où viens-tu ?");
if (ville == "Rue" or "Romont") {
    console.log("Tu viens de la Glâne");
}
</script></body></html>

Solution

  1. if (age >= 18) {
    console.log("Tu es majeur");
}

    La condition doit être entourée de parenthèses.

  2. } else if (note >= 4) {

    En JavaScript, on écrit else if (deux mots), pas elif.

  3. if (heure >= 9 && heure <= 17) {

    L'opérateur logique ET s'écrit &&, pas and.

  4. if (ville === "Rue" || ville === "Romont") {

    Deux corrections : l'opérateur OU s'écrit || (pas or), et chaque condition doit être complète (ville === "Romont" et non "Romont" tout seul). On utilise aussi === pour tester l'égalité.

Fonctions#

Exercice 46#

Complétez la fonction aire pour qu'elle renvoie l'aire d'un rectangle. Le programme doit afficher 15.

<!DOCTYPE html>
<html><body><script>
function aire(longueur, largeur) {
    // Complétez ici

}

let resultat = aire(5, 3);
console.log(resultat);
</script></body></html>

Solution

function aire(longueur, largeur) {
    return longueur * largeur;
}

let resultat = aire(5, 3);
console.log(resultat);

On utilise return pour renvoyer une valeur, que l'on récupère ensuite dans la variable resultat.

Exercice 47#

Définissez une fonction saluer qui prend un prénom en paramètre et affiche un message de bienvenue. Avec les appels déjà présents, le programme doit afficher :

Bienvenue Alice !
Bienvenue Bob !

<!DOCTYPE html>
<html><body><script>
// Définissez la fonction ici


saluer("Alice");
saluer("Bob");
</script></body></html>

Solution

function saluer(prénom) {
    console.log("Bienvenue " + prénom + " !");
}

saluer("Alice");
saluer("Bob");

Manipulation du HTML (DOM)#

Exercice 48#

Complétez le script pour que le titre affiche "Révisions" à la place de "Ancien titre", et qu'il devienne rouge.

<!DOCTYPE html>
<html><body>
  <h1 id="titre">Ancien titre</h1>

  <script>
    let titre = document.getElementById("titre");
    // Complétez ici

  </script>
</body></html>

Solution

let titre = document.getElementById("titre");
titre.textContent = "Révisions";
titre.style.color = "red";

Exercice 49#

Le programme ci-dessous contient 3 erreurs. Corrigez-les pour que le paragraphe affiche "Bonjour" en bleu.

<!DOCTYPE html>
<html><body>
  <p id="message">...</p>

  <script>
    let message = document.GetElementById(message);
    message.textContent = Bonjour;
    message.style.Color = "blue";
  </script>
</body></html>

Solution

let message = document.getElementById("message");
message.textContent = "Bonjour";
message.style.color = "blue";

Les trois erreurs :

  1. GetElementById → getElementById (JavaScript est sensible à la casse).

  2. L'id et le texte doivent être des chaînes de caractères : "message" et "Bonjour".

  3. La propriété s'écrit style.color (minuscule), pas style.Color.

Événements#

Exercice 50#

Complétez le programme pour qu'un clic sur le bouton augmente le compteur de 1.

<!DOCTYPE html>
<html><body>
  <p>Clics : <span id="compteur">0</span></p>
  <button id="bouton">Cliquez-moi</button>

  <script>
    let compteur = document.getElementById("compteur");
    let bouton = document.getElementById("bouton");
    let n = 0;

    // Complétez ici : définissez une fonction et liez-la au clic

  </script>
</body></html>

Solution

let compteur = document.getElementById("compteur");
let bouton = document.getElementById("bouton");
let n = 0;

function cliquer() {
    n = n + 1;
    compteur.textContent = n;
}

bouton.addEventListener("click", cliquer);

On passe le nom de la fonction cliquer sans parenthèses à addEventListener.

Exercice 51#

Synthèse. Créez une page avec un titre, un bouton et un paragraphe vide. Au clic sur le bouton, le programme doit demander le prénom de l'utilisateur avec prompt(...), puis afficher "Bonjour <prénom>" dans le paragraphe. Si l'utilisateur n'entre rien, afficher "Vous n'avez pas donné de prénom" à la place.

<!DOCTYPE html>
<html><body>
  <h1>Accueil</h1>
  <button id="bouton">Dire bonjour</button>
  <p id="message"></p>

  <script>
    // Écrivez votre code ici

  </script>
</body></html>

Solution

let bouton = document.getElementById("bouton");
let message = document.getElementById("message");

function direBonjour() {
    let prénom = prompt("Quel est ton prénom ?");
    if (prénom === "" || prénom === null) {
        message.textContent = "Vous n'avez pas donné de prénom";
    } else {
        message.textContent = "Bonjour " + prénom;
    }
}

bouton.addEventListener("click", direBonjour);

Cet exercice combine tous les objectifs : variables, condition avec ||, fonction, récupération d'une balise avec getElementById, modification du textContent et réaction au clic avec addEventListener.