JavaScript
Définition simple, rôle dans les sites web et explications pour comprendre le langage qui rend les pages interactives.
Qu'est-ce que JavaScript ?
JavaScript est un langage de programmation qui permet d'ajouter de l'interactivité et des fonctionnalités dynamiques aux sites web.
En termes simples : Si le HTML est la structure (les murs d'une maison) et le CSS la décoration (les couleurs, le style), JavaScript est l'électricité et la plomberie. C'est ce qui rend la maison vivante et interactive. Sans JavaScript, une page web est statique : vous pouvez lire le contenu, mais vous ne pouvez pas interagir avec elle.
Le rôle de JavaScript dans les sites web
JavaScript fonctionne généralement de la manière suivante:
- Il obtient une référence à un ou plusieurs éléments de la page (comme un bouton, un titre, une image).
- Il effectue des opérations sur ces éléments (modifier leur contenu, leur style, leur position).
- Il retourne un résultat qui peut être utilisé pour d'autres actions (afficher une notification, envoyer des données).
Concrètement, JavaScript permet de :
Clics, survols de souris, saisie au clavier, soumission de formulaires.
Afficher/cacher des éléments, mettre à jour du texte sans recharger la page.
Vérifier que les champs sont correctement remplis avant envoi.
Créer des carrousels d'images, des menus déroulants, des transitions.
Charger des données en arrière-plan (AJAX) sans recharger la page.
Dans le navigateur de l'utilisateur (localStorage, sessionStorage).
Sans JavaScript vs Avec JavaScript
Titre de la page
Ceci est un paragraphe de texte.
La page affiche du contenu, mais rien ne se passe quand on clique. Le bouton ne fait rien.
Titre modifiable
Cliquez sur le bouton pour changer le titre.
Le bouton réagit au clic et modifie le contenu de la page dynamiquement.
L'analogie de la voiture
C'est la structure de base de la voiture : le nombre de portes, la forme, les sièges. Sans cela, il n'y a rien.
C'est la couleur, le type de jantes, l'habitacle en cuir. Cela rend la voiture agréable à regarder.
C'est ce qui fait avancer la voiture, allumer les phares, actionner les clignotants. Sans JavaScript, la voiture est belle... mais elle ne bouge pas.
Le Document Object Model (DOM)
Pour interagir avec une page web, JavaScript utilise une représentation de la page appelée le DOM (Document Object Model).
Le DOM, c'est quoi ?
C'est une interface de programmation qui représente la structure de votre page HTML sous forme d'objets que JavaScript peut manipuler. Chaque élément HTML (titres, paragraphes, images) devient un objet avec des propriétés et des méthodes.
const monTitre = document.querySelector('h1');
monTitre.textContent = 'Nouveau titre !';
// Sélectionner un élément et modifier son style
const monParagraphe = document.getElementById('intro');
monParagraphe.style.color = 'blue';
// Créer un nouvel élément
const nouvelElement = document.createElement('p');
nouvelElement.textContent = 'Ceci est un nouveau paragraphe.';
document.body.appendChild(nouvelElement);
Grâce au DOM, JavaScript peut :
- Modifier le contenu des éléments (textContent, innerHTML).
- Modifier le style des éléments (style, classList).
- Ajouter ou supprimer des éléments (createElement, appendChild, removeChild).
- Réagir aux événements (addEventListener).
Les événements : le cœur de l'interactivité
Les événements sont des signaux envoyés par le navigateur pour indiquer qu'une action s'est produite.
- click : clic sur un élément
- dblclick : double-clic
- mouseenter / mouseleave : survol
- mousemove : mouvement de souris
- keydown : touche enfoncée
- keyup : touche relâchée
- keypress : touche pressée
- submit : formulaire soumis
- change : valeur modifiée
- input : saisie en cours
- focus / blur : champ actif/perd le focus
- DOMContentLoaded : page chargée
- load : tous les ressources chargées
- resize : redimensionnement fenêtre
- scroll : défilement
const monBouton = document.getElementById('monBouton');
monBouton.addEventListener('click', function() {
alert('Bouton cliqué !');
});
Exemples concrets d'utilisation
Au clic sur l'icône menu, JavaScript ajoute ou retire une classe CSS qui affiche ou cache le menu de navigation.
navigation.classList.toggle('visible');
});
Pendant que l'utilisateur tape, JavaScript vérifie si le mot de passe fait au moins 8 caractères et change la couleur du champ.
if (this.value.length >= 8) {
this.style.borderColor = 'green';
} else {
this.style.borderColor = 'red';
}
});
Au clic sur les flèches, JavaScript modifie l'attribut src de l'image pour afficher l'image suivante ou précédente.
JavaScript demande le nom de l'utilisateur, l'affiche dans un message de bienvenue, et le stocke pour les prochaines visites.
Limites et bonnes pratiques
JavaScript s'exécute dans le navigateur de l'utilisateur, il ne doit jamais contenir d'informations sensibles (mots de passe, clés API). Toute validation de formulaire côté client doit être doublée côté serveur.
Les fonctionnalités JavaScript doivent rester accessibles aux utilisateurs qui naviguent sans souris (clavier) ou avec des lecteurs d'écran.
Le site doit rester fonctionnel même si JavaScript est désactivé ou ne se charge pas (contenu statique accessible, puis amélioration avec JS).
Un code JavaScript mal écrit peut ralentir la page, bloquer l'interface utilisateur ou consommer trop de ressources.