NSI : Séance WEB05 — JavaScript (2)

Thème : Logique Conditionnelle et Dynamisme CSS

1. La Structure Conditionnelle (if / else)

Pour rendre un programme "intelligent", on utilise des conditions pour choisir quel code exécuter.

if (temperature >= 26) {
    // Exécuté si la condition est VRAIE
    zoneCard.classList.add("chaud");
} else {
    // Exécuté si la condition est FAUSSE
    iconeStatus.textContent = "✅";
}

2. Les Opérateurs de Comparaison

Ils permettent de tester les variables entre elles :

Opérateur Signification Exemple
> / < Strictement supérieur / inférieur t < 17
>= / <= Supérieur ou égal / Inférieur ou égal t >= 26
== / != Égal à / Différent de action == 'eteindre'

3. Manipuler les classes CSS (classList)

Plutôt que de modifier le style ligne par ligne, on pilote des classes CSS prédéfinies :

element.classList.add("ma-classe"); // Active le style
element.classList.remove("ma-classe"); // Désactive le style
Astuce : Utilisez parseFloat() pour convertir la valeur d'un curseur (String) en nombre utilisable pour les calculs.

4. Fonctions avec Arguments

On peut envoyer une information à une fonction pour qu'elle s'adapte :

// Dans le HTML
<button onclick="gererLumiere('eteindre')">OFF</button>

// Dans le JavaScript
function gererLumiere(action) {
    if (action === 'eteindre') { ... }
}