Dynamisez vos sites web avec JavaScript

Résumé complet du cours — les 6 parties

D'après le cours de Johann Pardanaud (Nesk) & Sébastien de la Marck (Thunderseb)

OpenClassrooms (ex-Site du Zéro)

Sommaire

1. Les bases du JavaScript

2. Modeler vos pages Web (DOM, événements, formulaires, CSS)
3. Les objets : conception et utilisation (POO & objets natifs)
4. L'échange de données avec l'AJAX
5. JavaScript et HTML5 (Audio/Vidéo, Canvas, File, Drag & Drop)
Fiche de révision — IUT Parakou 6. Annexe (débogage, closures, pour aller plus loin)
 Partie 1 — Les bases du JavaScript

1.1 Introduction & premiers pas

JavaScript est un langage interprété (pas besoin de compilation), exécuté côté client (client-side) par le navigateur — à l'opposé du server-side (PHP, etc.).
Standardisé par l'ECMA International sous le nom ECMAScript ; d'autres langages en découlent (ActionScript, [Link]).
Le code s'insère dans une balise <script> , en interne ou via un fichier externe ( <script src="..."></script> ).
Chaque instruction se termine par un point-virgule ; . Commentaires : // (ligne) et /* ... */ (bloc).

alert('Hello World!'); // affiche une boîte de dialogue

1.2 Les variables

Une variable = un espace de stockage nommé. Déclaration avec var , affectation avec = .
Typage dynamique : pas besoin de préciser le type, il est déduit de la valeur.
Nom de variable : caractères alphanumériques + _ et $ , jamais un chiffre en première position, ni un mot-clé réservé.
Opérateurs arithmétiques classiques ( + - * / % ) ; + sert aussi à la concaténation de chaînes.
prompt() permet de récupérer une saisie utilisateur (retourne toujours une chaîne).
Conversion : parseInt() / parseFloat() (chaîne → nombre) et concaténation implicite (nombre → chaîne).

1.3 Les conditions

Une condition retourne un booléen ( true / false ).

Opérateurs de comparaison : == != === !== < > <= >= (préférer === / !== , comparaison stricte sans conversion de type).
Opérateurs logiques : && (ET), || (OU), ! (NON).
if / else if / else — structure la plus utilisée.
switch — préférable pour tester l'égalité entre une variable et plusieurs valeurs possibles.
Ternaire condition ? valSiVrai : valSiFaux — écriture concise, retourne directement une valeur.

1.4 Les boucles

Incrémentation/décrémentation : i++ , i-- (le comportement diffère si le ++ est avant ou après la variable : i++ vs ++i ).

Boucle Rôle

while (cond) {...} répète tant que la condition est vraie (testée avant chaque tour)

do {...} while (cond) variante de while , exécutée au moins une fois (condition testée après)

for (init; cond; maj) {...} boucle ciblée pour un nombre défini d'itérations (cas particulier du while )

1.5 Les fonctions

Une fonction encapsule un bloc de code réutilisable, appelable avec des paramètres, pouvant renvoyer un résultat via return .

function addition(a, b) {
return a + b;
}
var result = addition(2, 3); // 5

Portée des variables : une variable déclarée avec var dans une fonction n'est accessible que dans cette fonction (portée locale). Éviter au maximum les variables
globales.
Arguments : une fonction peut recevoir un nombre défini ou indéfini de paramètres (objet spécial arguments pour y accéder tous, y compris ceux non déclarés
explicitement).
Valeurs de retour : return arrête l'exécution de la fonction et renvoie une valeur (ou rien = undefined ).
Fonctions anonymes : fonctions sans nom, souvent utilisées pour isoler du code (éviter de polluer l'espace global) — base des IIFE (Immediately Invoked Function
Expression) : (function(){ ... })();

1.6 Les objets et les tableaux (bases)

Un objet = un concept/une chose ayant une structure (propriétés + méthodes). JS fournit des objets natifs déjà utilisables (nombre, chaîne, booléen sont en réalité liés à
des objets).
Un tableau ( Array ) : valeurs indexées à partir de 0 . Propriété .length . Ajout/suppression d'éléments, parcours via for classique.
Un objet littéral : { cle: valeur, ... } — chaque valeur accessible via un identifiant plutôt qu'un indice ; parcours avec for...in .

Ce chapitre pose les bases ; la vraie création d'objets personnalisés (constructeurs, prototype ) est développée en Partie 3.
 Partie 2 — Modeler vos pages Web (DOM, événements, formulaires, CSS)

2.1 Le DOM (Document Object Model)

Le DOM permet d'accéder aux éléments HTML d'une page et de les manipuler. window est l'objet global représentant la fenêtre du navigateur ; document , sous-objet de
window , représente la page et sert de point d'entrée. Les éléments sont structurés en arbre, avec <html> comme racine.

Accéder aux éléments

Méthode Rôle

getElementById(id) récupère un élément unique par son ID

getElementsByTagName(tag) récupère tous les éléments d'un type de balise donné

getElementsByName(name) récupère les éléments par attribut name

querySelector(sel) récupère le premier élément correspondant à un sélecteur CSS

querySelectorAll(sel) récupère tous les éléments correspondant à un sélecteur CSS

Lire / modifier attributs et contenu

Propriété / méthode Rôle

getAttribute(nom) / setAttribute(nom, val) lire / écrire n'importe quel attribut HTML

className lire/écrire directement l'attribut class

innerHTML lire/écrire le contenu HTML (balises incluses) d'un élément — pratique mais lent en boucle (concaténer dans une variable puis
assigner une seule fois)

innerText équivalent texte seul, propriété historique d'IE

textContent version standard (tous navigateurs sauf vieux IE) du texte seul — tester les deux : [Link] || [Link]

Navigation et manipulation de l'arbre DOM

Propriété / méthode Rôle

parentNode accède à l'élément parent

nextSibling / previousSibling accède au nœud frère suivant / précédent

createElement(tag) crée un nouvel élément (pas encore inséré dans la page)

appendChild(el) insère el en tant que dernier enfant

insertBefore(nouveau, reference) insère nouveau juste avant reference

removeChild(el) supprime un enfant

cloneNode(bool) duplique un élément ( true = clone aussi les enfants) — nécessaire car copier une variable ne copie que la référence, pas
l'élément

insertAfter() n'existe pas nativement — se code facilement en combinant insertBefore() et nextSibling .

2.2 Les événements

DOM-0 (ancienne méthode, inventée par Netscape) : [Link] = function() {...} — un seul gestionnaire possible par événement.
DOM-2 : [Link](type, fonction, useCapture) — permet plusieurs gestionnaires sur le même événement. Sous Internet Explorer (anciennes versions) :
attachEvent('onclick', fonction) / detachEvent() .
L'objet Event (passé en paramètre du gestionnaire) fournit : le type d'événement, l'élément cible, la position du curseur, la touche pressée, etc.
[Link]() — bloque le comportement par défaut (ex. empêcher un lien de rediriger).
[Link]() — empêche la propagation de l'événement aux éléments parents (un événement se propage/« bubble » naturellement vers le haut de l'arbre, ce
qui peut créer des comportements inattendus).

2.3 Les formulaires

Propriété / méthode Rôle

value lire/écrire la valeur d'un champ (input, textarea, button…)

checked état d'une case à cocher / bouton radio

selectedIndex index de l'option sélectionnée dans une liste déroulante <select>

focus() / blur() donner / retirer le focus à un champ

Attention : l'événement onchange ne se déclenche pas immédiatement pour les champs texte (seulement à la perte du focus) — comportement parfois contre-intuitif.

Rappel important : une vérification côté client (JS) ne remplace jamais une vérification côté serveur — le JS peut toujours être désactivé ou contourné par l'utilisateur.

2.4 Manipuler le CSS

 [Link] = valeur — les propriétés composées perdent le tiret et prennent une majuscule à chaque mot sauf le premier : border-radius → borderRadius .
getComputedStyle(element, null).propriete — récupère la valeur calculée d'une propriété CSS, y compris celles définies dans une feuille de style externe (que style
seul ne peut pas lire). Sous IE ≤ 8 : propriété currentStyle à la place.

Propriété offset... Rôle

offsetWidth / offsetHeight largeur/hauteur complète (contenu + padding + bordure)

offsetTop / offsetLeft position par rapport au parent positionné

offsetParent élément parent de référence pour le positionnement (utile en cas de positionnement absolu imbriqué)

Toutes les valeurs obtenues via getComputedStyle() / currentStyle sont en lecture seule.
Partie 3 — Les objets : conception et utilisation (POO & objets natifs)

Cette partie a fait l'objet d'un résumé détaillé dédié (constructeurs, prototype , namespaces, call / apply , types primitifs, et tous les objets natifs
String / RegExp / Number / Math / Date / Array / Image , polyfills & wrappers). En voici la synthèse express ; le détail complet reste disponible dans le document précédent si besoin.

Constructeur + this + new = base de la création d'objets personnalisés (pas de vraie classe avant ES6).
prototype = mécanisme central du JS « orienté objet par prototype » : partage de méthodes entre instances, y compris sur les objets natifs ( String , Array ...).

Pas de vrai namespace en JS → simulation via objets littéraux, pour éviter les collisions entre scripts.
call() / apply() redéfinissent le contexte this d'une méthode pour la réutiliser sur un autre objet.

Type primitif ( "texte" ) ≠ instance d'objet ( new String() ) — toujours préférer le type primitif.
String : charAt, indexOf, substring/substr/slice, split, trim, toLowerCase/toUpperCase, valueOf …
RegExp : test(), exec() , + méthodes de String match, search, replace, split avec regex.
Number/Math : parseInt, parseFloat, isNaN, isFinite ; [Link]/ceil/round, pow, sqrt, max/min, random .
Date : timestamp en ms, getFullYear/getMonth/... , + setTimeout/setInterval/clearTimeout/clearInterval .
Array : concat, forEach, indexOf, sort, slice, splice, push/pop/unshift/shift (piles & files).
Image : constructeur simple, propriétés width/height/src , événement onload .
Polyfills (compatibilité fonctionnelle) et wrappers (encapsulation/contrôle) pour gérer les incompatibilités navigateurs.
 Partie 4 — L'échange de données avec l'AJAX

4.1 Le concept AJAX

AJAX = Asynchronous JavaScript and XML. Ensemble de techniques permettant de mettre à jour une partie d'une page sans rechargement complet, en dialoguant avec un
serveur via JavaScript.

Format Avantages Inconvénients

XML traitable avec des méthodes DOM ( getElementById() …) verbeux, alourdit la taille du fichier

JSON très concis, données accessibles directement comme objets littéraux moins lisible pour un humain

4.2 XMLHttpRequest (XHR)

Objet central de l'AJAX (deux versions : v1 basique, v2 plus complète avec cross-domain et FormData ).

var xhr = new XMLHttpRequest();

[Link]('GET', '[Link] + encodeURIComponent(valeur));
[Link] = function() {
if ([Link] == 4 && [Link] == 200) {
alert([Link]); // ou [Link]
}
};
[Link](null);

Élément Rôle

open(methode, url, async) prépare la requête (méthode GET ou POST )

send(donnees) envoie la requête (corps requis pour POST )

onreadystatechange callback appelé à chaque changement d'état de la requête

readyState état de la requête ( 4 ou [Link] = terminée)

status code HTTP de la réponse ( 200 = succès)

responseText / responseXML contenu de la réponse en texte brut / en document XML navigable

encodeURIComponent() encode les paramètres d'URL pour une requête GET (échappe les caractères interdits)

Deux modes : asynchrone (n'attend pas la réponse, ne bloque pas le script — recommandé) vs synchrone (bloque jusqu'à la réponse).
Version 2 : gestion du cross-domain (CORS, requêtes vers un autre domaine), objet FormData (pour envoyer facilement les données d'un formulaire, y compris des
fichiers).
Toutes les requêtes sont envoyées en UTF-8 — attention aux problèmes d'encodage côté serveur.

4.3 Autres techniques AJAX

Upload via une iframe

Technique alternative pour l'upload de fichiers (compatible avec tous les navigateurs, y compris anciens). Principe : soumettre un formulaire dans une <iframe> cachée,
détecter la fin du chargement via l'événement load de l'iframe, puis récupérer le contenu retourné. Depuis l'intérieur d'une iframe, [Link] permet d'accéder à la page
parente (utile pour un callback).

Dynamic Script Loading (DSL)

Consiste à insérer dynamiquement une balise <script src="..."> dans la page via le DOM pour charger et exécuter un fichier JS (souvent du JSON) à la demande.

var scriptElement = [Link]('script');

[Link] = 'url/du/[Link]';
[Link](scriptElement);

Avantage clé du DSL : contrairement à XMLHttpRequest , il n'est pas limité par la same origin policy (fonctionne entre domaines différents).
 Partie 5 — JavaScript et HTML5

5.1 Vue d'ensemble

Le HTML5 introduit de nouvelles API JavaScript en plus des nouvelles balises sémantiques. Ce chapitre couvre 4 API majeures : Audio/Vidéo, Canvas, File et Drag & Drop.

5.2 Audio et vidéo

Les éléments <audio> et <video> partagent le même objet JS : HTMLMediaElement (mêmes propriétés/méthodes).

Propriété / méthode Rôle

play() / pause() lecture / pause

currentTime position de lecture actuelle (en secondes, lisible/modifiable)

duration durée totale du média

volume volume (0 à 1)

paused / ended booléens indiquant l'état de lecture

Contrairement au Flash, aucune protection de contenu native avec <audio> / <video> ; support navigateur historiquement incomplet (formats à prévoir en plusieurs versions via
<source> ).

5.3 L'élément Canvas

Zone de dessin pilotée par JavaScript. Origine des axes : coin supérieur gauche.

var canvas = [Link]('#canvas');

var context = [Link]('2d');

Méthode / propriété Rôle

fillStyle / strokeStyle couleur de remplissage / de contour

fillRect(x,y,l,h) rectangle plein

strokeRect(x,y,l,h) rectangle contour (épaisseur : lineWidth )

clearRect(x,y,l,h) efface une zone (utile pour ré-animer)

beginPath() / closePath() démarrer / fermer un tracé de chemin

moveTo(x,y) / lineTo(x,y) déplacer le curseur / tracer une ligne

arc(x,y,rayon,...) arc de cercle

quadraticCurveTo() / bezierCurveTo() courbes de Bézier

drawImage() insérer une image dans le canvas

fillText() / strokeText() afficher du texte

translate() / rotate() déplacer/tourner le repère de dessin (facilite le calcul des coordonnées)

save() / restore() sauvegarder / restaurer l'état graphique courant

Une forme dessinée n'est plus manipulable ensuite : il faut effacer et redessiner pour animer (généralement via setTimeout en boucle).

5.4 L'API File

Permet de lire des fichiers choisis par l'utilisateur (via <input type="file"> ou drag & drop) — lecture seule, pas d'écriture sur le disque du client, pour des raisons de
sécurité.

var file = [Link][0]; // objet File (hérite de Blob)

var reader = new FileReader();
[Link] = function() { alert([Link]); };
[Link](file, 'UTF-8');

Méthode FileReader Rôle

readAsText(file, encodage) lit le fichier comme texte

readAsDataURL(file) lit le fichier encodé en base64 (utile pour prévisualiser une image)

readAsArrayBuffer(file) lit le contenu binaire brut

Objet File hérite de Blob (données binaires) et expose name , size , type . Les fichiers lus peuvent ensuite être envoyés via XMLHttpRequest (avec FormData ) ou affichés dans
un <canvas> .

5.5 Le Drag & Drop

 Rendre un élément déplaçable : attribut draggable="true" .
Événements sur l'élément déplacé : dragstart , dragend .
Événements sur la zone de dépôt : dragenter , dragover (⚠ nécessite preventDefault() pour autoriser le dépôt), dragleave , drop .
L'objet dataTransfer (accessible via [Link] ) transporte les données entre l'élément source et la cible : setData() / getData() , et permet aussi de
personnaliser l'image de déplacement.

Le Drag & Drop HTML5 permet aussi de déposer des éléments venant de l'extérieur du navigateur (ex. l'explorateur de fichiers du système), combinable avec l'API File.
 Partie 6 — Annexe

6.1 Déboguer son code

Deux grandes familles de bugs : syntaxiques (signalés par l'interpréteur, faciles à corriger via la console d'erreurs) et algorithmiques (logique incorrecte, demandent plus
de réflexion).
Bugs fréquents : noms mal orthographiés, confusion entre opérateurs ( = vs == ), mauvaise syntaxe de tableau/objet, boucle infinie, exécuter une fonction ( fn() ) au lieu
de la passer en référence ( fn ).
Chaque navigateur a sa console d'erreurs et ses outils de développement (inspection DOM, réseau, CSS, points d'arrêt).
[Link]() — alternative à alert() pour déboguer sans bloquer l'exécution du script.
Points d'arrêt (breakpoints) dans les DevTools : mettent le script en pause à une ligne donnée pour inspecter l'état des variables.

6.2 Les closures

Une closure (fermeture) est une fonction qui "se souvient" de l'environnement (les variables) dans lequel elle a été créée, même après que la fonction englobante a fini de
s'exécuter.

function makeCounter() {
var count = 0;
return function() { // closure : garde l'accès à "count"
count++;
return count;
};
}
var counter = makeCounter();
counter(); // 1
counter(); // 2

Une variable référencée par une fonction interne n'est jamais détruite tant qu'une référence active existe.
Usage courant : créer des variables privées / statiques, éviter la pollution de l'espace global, capturer une valeur dans une boucle (ex. pour des callbacks dans une
boucle for ).

6.3 Aller plus loin

La pratique régulière (coder, se tromper, corriger) est indispensable pour progresser au-delà des bases couvertes par ce cours.
À éviter : l'obfuscation de code et le code intrusif — mauvaises pratiques qui nuisent à la maintenabilité et à l'utilisateur.
Les frameworks/bibliothèques (jQuery et consorts à l'époque du cours) accélèrent le développement — connaître au moins une bibliothèque courante est un atout.
JavaScript ne se limite pas au navigateur : d'autres environnements l'exploitent, comme [Link] (côté serveur) ou Adobe AIR (applications desktop).

Synthèse générale du cours

1. Partie 1 pose les fondations du langage : variables, conditions, boucles, fonctions, premiers objets/tableaux.

2. Partie 2 connecte JS au navigateur : DOM (lecture/écriture/navigation), événements, formulaires, CSS dynamique.

3. Partie 3 approfondit la POO : constructeurs, prototype , namespaces, this / call / apply , et tous les objets natifs avec leurs méthodes.

4. Partie 4 ouvre la communication avec un serveur sans rechargement : AJAX, XMLHttpRequest , iframe, DSL.
5. Partie 5 exploite les nouvelles API HTML5 : audio/vidéo, dessin ( canvas ), fichiers ( File ), glisser-déposer.

6. Partie 6 donne les outils transverses indispensables : déboguer efficacement, comprendre les closures, et des pistes pour continuer à progresser.

Résumé complet basé sur l'intégralité du cours « Dynamisez vos sites web avec JavaScript ! » (377 pages) — Johann Pardanaud & Sébastien de la Marck, OpenClassrooms.