⚡ Interactions Web : JavaScript

1. Introduction

HTML définit la structure, CSS définit l'apparence. Le JavaScript (JS) est le langage de programmation qui permet de rendre la page dynamique et interactive.

Note Historique : Créé en 10 jours par Brendan Eich en 1995, JavaScript est aujourd'hui le langage le plus utilisé au monde pour le web (côté client et serveur).

2. Syntaxe de base

Contrairement au Python, la syntaxe du JavaScript utilise des accolades {} pour les blocs de code et des points-virgules ; (optionnels mais recommandés) à la fin des instructions.

Variables

On utilise let pour une variable modifiable et const pour une constante.

let score = 0;        // Variable modifiable
const viesMax = 3;    // Constante (ne peut pas changer)
let nom = "Alice";    // Chaîne de caractères

Fonctions

function direBonjour(prenom) {
    return "Bonjour " + prenom;
}

// Appel
console.log(direBonjour("Thomas"));

3. Le DOM (Document Object Model)

Pour que le JavaScript puisse modifier la page HTML, le navigateur crée une représentation de la page sous forme d'arbre : le DOM.

🔍 Sélectionner un élément

Pour agir sur un élément HTML, il faut d'abord le "récupérer".

// Par son ID (le plus rapide)
let titre = document.getElementById("mon-titre");

// Par sélecteur CSS (plus polyvalent)
let bouton = document.querySelector(".btn-rouge");

✏️ Modifier le contenu

// Changer le texte
titre.textContent = "Nouveau Titre !";

// Changer le HTML (attention aux failles XSS !)
titre.innerHTML = "Titre en <em>Italique</em>";

🎨 Modifier le style

On accède aux propriétés CSS via l'objet .style. Notez le CamelCase (backgroundColor au lieu de background-color).

titre.style.color = "orange";
titre.style.fontSize = "24px";

4. Les Événements

Un événement est un signal envoyé par le système : un clic, un appui sur une touche, le chargement de la page, etc. On utilise la méthode addEventListener pour "écouter" ces signaux.

let monBouton = document.getElementById("btn-action");

function reaction() {
    alert("Bouton cliqué !");
}

// Syntaxe : élément.addEventListener(type_événement, fonction_a_lancer)
monBouton.addEventListener("click", reaction);

Principaux événements

5. Exercices Pratiques

<p>Likes : <span id="compteur">0</span></p>
<button id="btn-like">J'aime 👍</button>