Interactions Web : JavaScript

Le HTML a décrit la page, le CSS l'a habillée. Rien ne se passe encore quand on clique. Le JavaScript est le troisième langage : il s'exécute dans le navigateur et change la page pendant qu'on la regarde. Brendan Eich l'a créé en 1995. Il est aujourd'hui le langage du comportement, côté client.

Le navigateur ne garde pas le HTML comme un simple texte. Il le transforme en arbre, le DOM (Document Object Model). Chaque balise devient un nœud. Un script sélectionne un nœud, le modifie, et s'abonne aux gestes de la personne : clic, frappe, envoi d'un formulaire.

Une syntaxe courte

Les blocs s'écrivent entre accolades. let déclare une variable qu'on pourra réaffecter. const déclare un nom qu'on ne réaffecte pas. Une fonction se déclare avec function, et return renvoie une valeur, comme en Python. console.log écrit dans la console du navigateur, pas sur la page.

let score = 0;
const viesMax = 3;

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

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

+ entre chaînes concatène. score pourra passer à 1. viesMax reste 3 : si le code tente de le réaffecter, le navigateur refuse.

Trouver un nœud, puis le changer

document est la page. getElementById cherche l'élément dont l'id est celui qu'on donne. querySelector cherche avec un sélecteur CSS : .btn-rouge est une classe, #mon-titre serait un id.

let titre = document.getElementById("mon-titre");
let bouton = document.querySelector(".btn-rouge");

Une fois le nœud en main, textContent remplace le texte. style change une propriété CSS. En JavaScript, les noms de propriétés passent en camelCase : font-size devient fontSize, background-color devient backgroundColor.

titre.textContent = "Nouveau titre";
titre.style.color = "orange";
titre.style.fontSize = "24px"; // camelCase : backgroundColor, etc.

innerHTML interprète du HTML. C'est utile pour insérer une balise, et dangereux avec du texte tapé par quelqu'un : une balise <script> glissée dans le texte s'exécuterait. C'est une faille XSS. Quand on affiche du texte, on prend textContent.

Si getElementById ne trouve rien, il renvoie null. Appeler .textContent sur null plante. Cela arrive quand le script est dans le <head> et s'exécute avant que le <body> existe. On place le script en fin de <body>, ou l'on attend l'événement DOMContentLoaded. Autre confusion : le texte d'un champ de saisie se lit avec .value, pas avec .textContent.

Réagir à un geste

addEventListener abonne une fonction à un type d'événement. La fonction ne s'exécute pas tout de suite. Elle s'exécute quand l'événement arrive.

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

monBouton.addEventListener("click", function() {
    alert("Bouton cliqué !");
});

Le geste tient en trois temps : sélectionner, écouter, réagir. On vérifie que l'élément existe avant de lui poser un écouteur. input sert à suivre une saisie lettre par lettre. submit sert au moment où le formulaire part.

En résumé, JavaScript s'occupe du comportement, le DOM est l'arbre de la page. getElementById et querySelector ciblent. textContent et .style mettent à jour. addEventListener réagit. .value lit un champ. On n'utilise un nœud qu'une fois certain qu'il est là.

Pour s'entraîner / Suite

S'entraîner avec les exercices ci-dessous. Ensuite, le cours Web et HTTP situe ces pages dans le modèle client-serveur.

Exercices pratiques

Choisir un exercice…Le CompteurChamp Miroir

Choisir un exercice

Cliquer sur un exercice de la liste pour afficher son sujet.