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 44#

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 45#

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

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

  2. 1<!DOCTYPE html>
2<html><body><script>
3let total = 50;
4let total = total + 10;
5print("Total : " + total);
6</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 46#

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 47#

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

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

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

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

  4. 1<!DOCTYPE html>
2<html><body><script>
3let ville = prompt("D'où viens-tu ?");
4if (ville == "Rue" or "Romont") {
5    console.log("Tu viens de la Glâne");
6}
7</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 48#

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

 1<!DOCTYPE html>
 2<html><body><script>
 3function aire(longueur, largeur) {
 4    // Complétez ici
 5
 6}
 7
 8let resultat = aire(5, 3);
 9console.log(resultat);
10</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 49#

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 !

1<!DOCTYPE html>
2<html><body><script>
3// Définissez la fonction ici
4
5
6saluer("Alice");
7saluer("Bob");
8</script></body></html>

Solution

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

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

Manipulation du HTML (DOM)#

Exercice 50#

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

 1<!DOCTYPE html>
 2<html><body>
 3  <h1 id="titre">Ancien titre</h1>
 4
 5  <script>
 6    let titre = document.getElementById("titre");
 7    // Complétez ici
 8
 9  </script>
10</body></html>

Solution

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

Exercice 51#

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

 1<!DOCTYPE html>
 2<html><body>
 3  <p id="message">...</p>
 4
 5  <script>
 6    let message = document.GetElementById(message);
 7    message.textContent = Bonjour;
 8    message.style.Color = "blue";
 9  </script>
10</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 52#

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

 1<!DOCTYPE html>
 2<html><body>
 3  <p>Clics : <span id="compteur">0</span></p>
 4  <button id="bouton">Cliquez-moi</button>
 5
 6  <script>
 7    let compteur = document.getElementById("compteur");
 8    let bouton = document.getElementById("bouton");
 9    let n = 0;
10
11    // Complétez ici : définissez une fonction et liez-la au clic
12
13  </script>
14</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 53#

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.

 1<!DOCTYPE html>
 2<html><body>
 3  <h1>Accueil</h1>
 4  <button id="bouton">Dire bonjour</button>
 5  <p id="message"></p>
 6
 7  <script>
 8    // Écrivez votre code ici
 9
10  </script>
11</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.