Le Web vivant : JavaScript

Le HTML structure la page, le CSS l'habille. Mais une page qui ne réagit pas aux clics reste une affiche. Le JavaScript est le langage qui rend le Web vivant.

Le rôle du JavaScript

Le JavaScript (JS) est un langage de programmation qui s'exécute dans le navigateur. Il peut :

• réagir à un clic, à une saisie, au défilement ;
• modifier le contenu de la page en direct ;
• valider un formulaire avant l'envoi ;
• animer des éléments, afficher des cartes, calculer ;
• demander des données à un serveur (avec fetch).

Une page web moderne combine les trois langages : HTML pour la structure, CSS pour la présentation, JavaScript pour le comportement.

Où trouver le code

Le code JavaScript arrive de trois façons :

1. dans la page, entre <script> et </script> ;
2. dans un fichier externe, chargé par <script src="script.js"></script> ;
3. dans la console, que tu peux tester depuis les outils de développement (F12).

Comme tout ce qui arrive au navigateur, ce code est visible et modifiable par n'importe quel visiteur. C'est une règle fondamentale du Web.

Les bases du langage

Quelques notions suffisent pour lire la plupart des scripts :

let compteur = 0;              // une variable qui peut changer
const nom = "SNT";             // une constante

if (compteur === 0) {          // une condition
  compteur = compteur + 1;
}

for (let i = 0; i < 3; i++) {  // une boucle
  console.log(i);
}

function saluer(qui) {         // une fonction
  return "Bonjour " + qui;
}

• une variable stocke une valeur : nombre, texte (chaîne), booléen ;
• une condition exécute du code seulement si c'est vrai ;
• une boucle répète des instructions ;
• une fonction regroupe des instructions réutilisables.

Le DOM : la page côté code

Quand le navigateur lit le HTML, il construit le DOM (Document Object Model) : un arbre d'objets qui représente la page. Le JavaScript peut le parcourir et le modifier :

const titre = document.querySelector("h1");
titre.textContent = "Nouveau titre";
titre.classList.add("important");

• querySelector trouve un élément à partir d'un sélecteur CSS ;
• textContent change son texte ;
• classList ajoute ou retire des classes ;
• setAttribute modifie un attribut.

La page affichée peut donc être très différente du HTML reçu : c'est le cas de presque tous les sites modernes.

Les événements : réagir

Un événement est une action : un clic, une touche pressée, un formulaire envoyé. On associe une fonction à un événement avec addEventListener :

const bouton = document.querySelector("button");
bouton.addEventListener("click", () => {
  alert("Tu as cliqué !");
});

Les événements les plus courants : click, submit, input, keydown, load.

Ce qu'on peut construire

Avec ces briques, on construit : des menus déroulants, des diaporamas, des jeux, des cartes interactives, des validateurs de formulaire, des applications entières. Les sites que tu utilises tous les jours reposent sur les mêmes principes.

Sécurité : le code est public

Le JavaScript s'exécute chez le visiteur. Conséquences :

• on n'y cache jamais un secret : mot de passe, clé d'API, réponse d'énigme ;
• on ne fait jamais confiance au client : un utilisateur peut modifier le code, les cookies ou les données envoyées ;
• les vérifications importantes se font côté serveur.

C'est pour cette raison que les réponses de ce site ne sont pas écrites en clair : le navigateur compare des empreintes, mais la réponse elle-même n'est pas dans la page.