JavaScript (JS)

I. À quoi sert JavaScript ?

• HTML structure la page

• CSS la rend belle

• JavaScript la rend interactive et dynamique

JavaScript permet par exemple de :

✅ Réagir aux clics, mouvements de souris, touches clavier

✅ Modifier le contenu d’une page sans la recharger

✅ Créer des animations

✅ Valider un formulaire avant envoi

✅ Créer des jeux, des mini-apps web, etc.

👉 C’est un langage de programmation interprété dans le navigateur.

Il peut être exécuté directement dans la page web.

II. Comment ajouter du JavaScript dans une page HTML ?

1. Dans un fichier externe (recommandé)

HTML

<script src="script.js"></script>

📌 Ce script est généralement placé en bas de la page, juste avant </body> pour que le HTML soit déjà chargé avant l'exécution JS.

2. Dans une balise <script> dans le HTML

<script>
  alert("Bonjour !");
</script>

✅ Pratique pour tester, mais à éviter dans les vrais projets.

III. Syntaxe de base de JavaScript

1. Afficher quelque chose

console.log("Ceci s'affiche dans la console");
alert("Message à l'utilisateur !");

• console.log(...) : utile pour debugger

• alert(...) : fait apparaître une boîte de dialogue

2. Déclaration de variables

let nom = "Nathan";
const age = 18;
var ancien = true;

• let : variable modulable

• const : valeur fixe

• var : ancienne syntaxe, déconseillée aujourd’hui

3. Types de données

IV. Opérations classiques

let x = 10;
x = x + 1;       // ou x += 1;
x *= 2;          // Multiplie x par 2

Comparateurs : ==, ===, !=, <, >, <=, >=

Logique : && (et), || (ou), ! (non)

V. Les conditions

if (age >= 18) {
  alert("Majeur !");
} else if (age >= 16) {
  alert("Presque !");
} else {
  alert("Mineur.");
}

VI. Les boucles

Boucle for

for (let i = 0; i < 5; i++) {
  console.log("i =", i);
}

Boucle while

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

VII. Fonctions

Définir une fonction

function direBonjour(nom) {
  console.log("Bonjour " + nom);
}

L’appeler

direBonjour("Nathan");

VIII. 🌐 Interagir avec le HTML (DOM)

Le DOM est une représentation de la page HTML.

JavaScript peut accéder aux éléments HTML pour les lire ou les modifier.

1. Cibler un élément

let titre = document.getElementById("titre");

2. Modifier son contenu

titre.textContent = "Nouveau titre !";

3. Modifier son style

titre.style.color = "blue";
titre.style.fontSize = "30px";

4. Cibler une classe

let paragraphes = document.getElementsByClassName("intro");

Ou en plus moderne :

let el = document.querySelector(".intro");     // classe
let el2 = document.querySelector("#titre");    // id
let el3 = document.querySelector("p");         // balise

IX. 🖱️ Réagir aux actions de l’utilisateur (événements)

Exemple : bouton cliqué

HTML

<button id="monBouton">Clique moi</button>
<p id="resultat"></p>

JavaScript

let bouton = document.getElementById("monBouton");
let resultat = document.getElementById("resultat");

bouton.addEventListener("click", function() {
  resultat.textContent = "Bravo, tu as cliqué !";
});

X. Exemple complet (mini interaction)

HTML

<h1 id="titre">Titre original</h1>
<button onclick="changerTitre()">Changer</button>

JavaScript

function changerTitre() {
  let t = document.getElementById("titre");
  t.textContent = "Titre modifié !";
  t.style.color = "crimson";
}

XI. Résumé rapide

XII. ✅ Conseils pour le bac NSI

• Savoir lire et comprendre un petit script JS qui modifie une page

• Savoir ajouter un événement click

• Comprendre la relation entre HTML, CSS et JS

• Avoir pratiqué avec des exemples simples (modification d’un texte, d’une couleur, réaction à un clic…)