JavaScript
Résumé Complet du Cours · Fiches 1 à 27
Bases · Variables · Conditions · Boucles · Fonctions · Objets · DOM · Événements · AJAX · Canvas · Regex · APIs
F1 BASES DU JAVASCRIPT
■ Syntaxe essentielle
<script> Balise pour écrire du JS dans le HTML — placer juste avant </body>
src="[Link]" Appel d'un fichier JS externe — <script src="[Link]"></script>
// commentaire Commentaire sur une ligne
/* ... */ Commentaire multi-lignes
; Point-virgule obligatoire à la fin de chaque instruction
// Dans le HTML, juste avant </body>
<script src="[Link]"></script>
// Dans le fichier .js
alert('Bonjour !'); // Boîte de dialogue
[Link]('debug'); // Affiche dans la console
var x = prompt('Valeur?'); // Saisie utilisateur → renvoie string
var ok = confirm('OK?'); // Boîte OK/Annuler → renvoie booléen
F2 LES VARIABLES
■ Déclaration et types
var nom = val; Déclare et initialise une variable (ES5) — aussi let / const en ES6+
Number Nombre : entier ou décimal — ex: var n = 42;
String Chaîne de caractères — ex: var s = 'texte'; (apostrophe ou guillemet)
Boolean Booléen : true ou false
\' Échappe une apostrophe dans une chaîne : 'J\'écris'
+, -, *, /, % Opérateurs arithmétiques : add, sous, mult, div, modulo (reste)
+=, -=, *=, /= Raccourcis : n += 5 équivaut à n = n + 5
+ Concaténation avec les strings : 'Bonjour ' + nom
parseInt(val) Convertit une string en entier — toujours utiliser pour les saisies
parseFloat(val) Convertit en décimal
var nom = prompt('Prénom ?');
var age = parseInt(prompt('Âge ?'));
var msg = 'Bonjour ' + nom + ', tu as ' + age + ' ans.';
alert(msg);
var a = 10, b = 3;
alert(a % b); // 1 (reste de 10/3)
var txt = 4 + '' + 2; // '42' (force concaténation)
F3-4 LES CONDITIONS
■ Opérateurs de comparaison (renvoient true/false)
== Égal à (valeur seulement)
=== Strictement égal (valeur ET type) — à préférer
!= Différent de (valeur seulement)
!== Strictement différent (valeur ET type)
> / >= Supérieur / supérieur ou égal
< / <= Inférieur / inférieur ou égal
&& ET logique — true si TOUTES les conditions sont true
|| OU logique — true si AU MOINS UNE condition est true
!val NON logique — inverse la valeur booléenne
// if / else if / else
if (age >= 18) {
alert('Adulte');
} else if (age >= 12) {
alert('Ado');
} else {
alert('Enfant');
}
// switch (liste de cas fixes)
switch (choix) {
case 1: alert('Un'); break;
case 2: alert('Deux'); break;
default: alert('Autre');
}
// Ternaire : condition ? siTrue : siFalse
var genre = estFille ? 'Fille' : 'Garçon';
F5 LES BOUCLES
n++ / n-- Incrémentation (+1) / Décrémentation (-1)
while(cond){ } Boucle tant que la condition est vraie
do{ } while(cond); Exécute au moins une fois, puis vérifie la condition
for(init;cond;incr) Boucle classique — idéale pour les compteurs
break Sort immédiatement de la boucle
continue Passe à l'itération suivante sans exécuter le reste
// while
var n = 1;
while (n < 10) { n++; } // n vaut 10 à la fin
// for — le plus courant
for (var i = 0; i < 5; i++) {
alert('Tour ' + i); // 0, 1, 2, 3, 4
}
// for avec break (saisie répétée)
for (var prenoms = '', p; true;) {
p = prompt('Prénom (vide pour finir) :');
if (p) { prenoms += p + ' '; }
else { break; }
}
F6 LES FONCTIONS
function nom(args){ } Déclare une fonction nommée — réutilisable
nom(valeur) Appelle la fonction avec un argument
return valeur; Retourne une valeur (arrête la fonction)
var f = function(){ } Fonction anonyme stockée dans une variable
Variable locale Déclarée DANS une fonction — accessible seulement à l'intérieur
Variable globale Déclarée EN DEHORS — accessible partout (à éviter si possible)
// Fonction nommée avec arguments et retour
function additionner(a, b) {
return a + b;
}
var resultat = additionner(3, 5); // 8
// Arguments multiples
function saluer(prenom, age) {
alert('Bonjour ' + prenom + ', ' + age + ' ans');
}
saluer(prompt('Prénom ?'), parseInt(prompt('Âge ?')));
// Fonction anonyme
var direBonjour = function() { alert('Bonjour !'); };
direBonjour();
F7-8 OBJETS ET TABLEAUX
■ Tableaux (Array) — indices numériques
var fruits = ['pomme', 'banane', 'cerise'];
// Indices : 0=pomme, 1=banane, 2=cerise
alert(fruits[1]); // 'banane'
fruits[1] = 'mangue'; // Modifier
[Link]('kiwi'); // Ajouter à la fin
[Link](); // Retire le dernier
[Link]('citron'); // Ajoute au début
[Link](); // Retire le premier
alert([Link]); // Nombre d'éléments
// Parcourir
for (var i = 0; i < [Link]; i++) {
alert(fruits[i]);
}
// split / join
var str = 'a b c';
var tab = [Link](' '); // ['a','b','c']
var str2 = [Link]('-'); // 'a-b-c'
■ Objets littéraux — clés nommées
var personne = {
nom: 'Diano',
age: 19,
ville: 'Cotonou'
};
alert([Link]); // 'Diano'
alert(personne['age']); // 19
[Link] = 'x@[Link]'; // Ajouter une propriété
// Parcourir avec for...in
for (var cle in personne) {
alert(cle + ': ' + personne[cle]);
}
■ Méthodes utiles des tableaux
push(val) Ajoute à la fin — retourne la nouvelle taille
pop() Retire et retourne le dernier élément
unshift(val) Ajoute au début
shift() Retire et retourne le premier élément
concat([tab2]) Fusionne deux tableaux
indexOf(val) Retourne l'indice ou -1 si non trouvé
reverse() Inverse l'ordre du tableau
sort() Tri alphabétique — sort(function(a,b){return a-b;}) pour tri numérique
slice(debut, fin) Extrait une portion (fin non incluse)
splice(idx, nb) Retire nb éléments à partir de idx
forEach(function){}) Parcourt chaque élément avec une fonction
join('sep') Fusionne en string avec un séparateur
F9-11 DOM — ACCÈS ET MANIPULATION DU HTML
Le DOM (Document Object Model) est l'interface qui permet à JavaScript d'accéder et modifier les éléments HTML d'une page.
window est l'objet global. document est un sous-objet de window.
■ Sélectionner des éléments
[Link]('id') Retourne l'élément avec cet id (unique)
[Link]('
p') Retourne un tableau de tous les <p>
[Link]('nam
e') Par attribut name (formulaires)
[Link]('#id
.cls') 1er élément correspondant au sélecteur CSS
[Link]('.cls
') Tous les éléments correspondants (tableau)
■ Lire / modifier le contenu
[Link] Lit ou définit le HTML interne de l'élément
[Link] Lit ou définit le texte (sans HTML) — standard
[Link]('href') Lit la valeur d'un attribut
[Link]('href','url') Modifie ou crée un attribut
[Link] Classe CSS (remplace class qui est un mot réservé)
[Link] = 'red' Modifie le style CSS directement
■ Navigation dans le DOM
[Link] Élément parent
[Link] / lastChild Premier / dernier enfant
[Link] /
previousSibling Élément suivant / précédent
[Link] Tableau de tous les enfants
[Link] 1 = élément HTML, 3 = nœud texte
■ Créer, insérer, supprimer des éléments
// Créer et insérer (3 étapes)
var lien = [Link]('a'); // 1. Créer
[Link] = '[Link] // 2. Attribuer
[Link] = 'Cliquez ici';
[Link]('zone').appendChild(lien); // 3. Insérer (à la fin)
// insertBefore(nouveau, reference) — insérer avant un élément
[Link](nouvelElement, elementReference);
// Supprimer
[Link](lien);
// Cloner (true = avec enfants)
var copie = [Link](true);
// Remplacer
[Link](nouvElem, ancienElem);
F12-13 LES ÉVÉNEMENTS
■ Principaux événements
click Clic (appuyer + relâcher)
dblclick Double-clic
mouseover Curseur entre dans l'élément
mouseout Curseur sort de l'élément
mousedown / mouseup Appuyer / relâcher le bouton souris
keydown / keyup Appuyer / relâcher une touche clavier
keypress Frappe complète d'une touche
focus / blur L'élément reçoit / perd le focus
change La valeur d'un input/select change
submit Envoi du formulaire — spécifique à <form>
reset Réinitialisation du formulaire
■ addEventListener — méthode recommandée
// Syntaxe : [Link]('evenement', fonction, capture)
var btn = [Link]('monBouton');
[Link]('click', function() {
alert('Cliqué !');
}, false);
// Gestion des formulaires
var input = [Link]('prenom');
[Link]('focus', function(e) {
[Link] = ''; // Vider au focus
}, false);
// Bloquer l'envoi d'un formulaire
var form = [Link]('myForm');
[Link]('submit', function(e) {
[Link](); // Bloque l'envoi
// ... vérifications ...
}, false);
// Lire la valeur d'un input
var valeur = [Link]('champ').value;
// Vérifier si une radio est cochée
if ([Link]('radio1').checked) { ... }
// Liste déroulante : option sélectionnée
var sel = [Link]('maListe');
var texte = [Link][[Link]].innerHTML;
F15-16 CONSTRUCTEURS & REGEX
■ Constructeur d'objet (orienté objet par prototype)
// Définir un type d'objet avec function + this
function Personne(nom, age) {
[Link] = nom;
[Link] = age;
[Link] = function() {
return 'Je suis ' + [Link] + ', ' + [Link] + ' ans';
};
}
var p = new Personne('Diano', 19);
alert([Link]); // 'Diano'
alert([Link]()); // 'Je suis Diano, 19 ans'
[Link] = 'Cotonou'; // Ajouter une propriété
■ Expressions régulières (Regex)
/motif/ Déclarer un regex
/motif/i Insensible à la casse
/motif/g Toutes les occurrences (global)
.test(str) Retourne true si le motif est trouvé dans str
.exec(str) Retourne les groupes capturés
[Link](/m/,'r') Remplace la première occurrence
[Link](/m/g,'r') Remplace toutes les occurrences
[a-z] Un caractère entre a et z
[0-9] ou \d Un chiffre
\s / \S Espace blanc / non-blanc
\w Lettre, chiffre ou _
^ / $ Début / fin de chaîne
| (pipe) OU — /chat|chien/
? / + / * 0 ou 1 / 1 ou + / 0 ou + fois
{n,m} Entre n et m répétitions
(groupe) Capture — accessible via RegExp.$1, $2...
// Valider un email
var email = prompt('Email ?');
if (/^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/.test(email)) {
alert('Email valide');
}
// Remplacer toutes les occurrences
var phrase = 'Le chat et le chien';
var result = [Link](/chat|chien/g, '***');
// 'Le *** et le ***'
F17 DONNÉES NUMÉRIQUES — Math & Number
[Link](n) Arrondit vers le bas — floor(3.9) → 3
[Link](n) Arrondit vers le haut — ceil(3.1) → 4
[Link](n) Arrondit au plus proche — round(3.5) → 4
[Link](base, exp) Puissance — pow(2,10) → 1024
[Link](n) Racine carrée — sqrt(9) → 3
[Link](a,b,c) Valeur maximale
[Link](a,b,c) Valeur minimale
[Link]() Nombre aléatoire entre 0 (inclus) et 1 (exclus)
[Link] La constante π ≈ 3.14159...
isNaN(val) Retourne true si val n'est pas un nombre
isFinite(val) Retourne true si val est un nombre fini
parseInt(str, 10) Convertit en entier — toujours préciser la base 10
// Nombre aléatoire entier entre min et max (inclus)
function rand(min, max) {
return [Link]([Link]() * (max - min + 1) + min);
}
alert(rand(1, 100)); // Ex: 42
F18 GESTION DU TEMPS — Date, setTimeout, setInterval
new Date() Date et heure actuelles
new Date(2025, 0, 15) Date précise — mois commence à 0 (jan=0, déc=11)
[Link]() Année (4 chiffres)
[Link]() Mois (0-11) → ajouter +1 pour afficher
[Link]() Jour du mois (1-31)
[Link]() Jour de la semaine (0=dim, 1=lun, ..., 6=sam)
[Link]() / getMinutes() Heure (0-23) / Minutes (0-59)
getTime() Timestamp (ms depuis le 1er jan 1970)
setTimeout(fn, ms) Exécute fn UNE FOIS après ms millisecondes
setInterval(fn, ms) Exécute fn TOUTES LES ms millisecondes
clearTimeout(id) Annule un setTimeout
clearInterval(id) Annule un setInterval
// Afficher la date actuelle
var d = new Date();
var txt = [Link]() + '/' + ([Link]()+1) + '/' + [Link]();
alert(txt); // Ex: 22/06/2025
// setTimeout — exécution différée
var timer = setTimeout(function() {
alert('5 secondes passées !');
}, 5000);
// Annuler avant l'exécution :
clearTimeout(timer);
// setInterval — horloge
var id = setInterval(function() {
[Link]('heure').innerHTML = new Date().toLocaleTimeString();
}, 1000);
★ MANIPULATION DU CSS AVEC JS
[Link] = 'red' Couleur du texte
[Link] =
'#fff' Couleur de fond (camelCase!)
[Link] = 'none' Cacher un élément
[Link] = 'block' Afficher un élément
[Link] = 'maClasse' Remplace toutes les classes
[Link]('active') Ajoute une classe (ES5+)
[Link]('active') Retire une classe
[Link]('active') Bascule une classe
// Afficher/masquer un élément au clic
var btn = [Link]('btn');
var div = [Link]('contenu');
[Link]('click', function() {
[Link] = ([Link] === 'none') ? 'block' : 'none';
});
// Animer l'opacité
var img = [Link]('monImg');
[Link] = '0.5';
F20 AJAX — XMLHttpRequest
AJAX = Asynchronous JavaScript And XML. Permet de charger ou envoyer des données depuis/vers un serveur sans recharger la
page. Formats : texte, HTML, XML (gros volumes), JSON (petits transferts).
// Requête GET basique
var xhr = new XMLHttpRequest();
[Link]('GET', '[Link]?param=valeur', true); // true = asynchrone
[Link] = function() {
if ([Link] === [Link] && [Link] === 200) {
[Link]('result').innerHTML = [Link];
}
};
[Link](null);
// Requête POST
[Link]('POST', '[Link]', true);
[Link]('Content-Type', 'application/x-www-form-urlencoded');
[Link]('nom=Diano&age=19');
■ JSON — Format d'échange léger
// [Link] — string → objet JS
var data = [Link]('{"nom":"Diano","age":19}');
alert([Link]); // 'Diano'
// [Link] — objet JS → string
var obj = { ville: 'Cotonou', pays: 'Bénin' };
var str = [Link](obj);
// '{"ville":"Cotonou","pays":"Bénin"}'
F24-25 CANVAS — DESSIN 2D
<canvas> est un élément HTML5 qui permet de dessiner des formes, images, textes et animations avec JavaScript via un contexte 2D.
<!-- HTML -->
<canvas id="monCanvas" width="400" height="300">
Votre navigateur ne supporte pas Canvas.
</canvas>
<script>
var canvas = [Link]('monCanvas');
var ctx = [Link]('2d');
// Rectangle plein
[Link] = 'rgba(23, 145, 167, 0.8)';
[Link](10, 10, 100, 60); // x, y, largeur, hauteur
// Rectangle contour
[Link] = '#f7df1e';
[Link] = 3;
[Link](120, 10, 100, 60);
// Effacer une zone
[Link](30, 20, 50, 30);
// Chemin (path)
[Link]();
[Link](20, 20); // Point de départ
[Link](200, 20); // Tracer vers...
[Link](110, 100);
[Link](); // Fermer le chemin
[Link] = '#e8892b';
[Link](); // Remplir
// Arc / Cercle : arc(x, y, rayon, angleDebut, angleFin)
[Link]();
[Link](200, 150, 50, 0, [Link] * 2); // Cercle complet
[Link] = 'teal';
[Link]();
// Texte
[Link] = 'bold 20px Arial';
[Link] = 'white';
[Link]('JS', 300, 100); // texte, x, y
// Image
var img = new Image();
[Link] = '[Link]';
[Link] = function() {
[Link](img, 10, 150); // dessiner quand chargée
};
// Dégradé linéaire
var grad = [Link](0, 0, 0, 200);
[Link](0, 'white');
[Link](1, '#1791a7');
[Link] = grad;
[Link](0, 0, 200, 200);
</script>
[Link]() / restore() Sauvegarde / restaure l'état du contexte
[Link](x, y) Déplace l'origine du repère
[Link](angle) Rotation en radians — angle en degrés: ([Link]/180)*degrés
requestAnimationFrame(fn) Animation fluide — appelle fn avant chaque rendu
F26 API FILE — LECTURE DE FICHIERS
// Lire le contenu d'un fichier texte
var fileInput = [Link]('#fichier');
[Link] = function() {
var reader = new FileReader();
[Link] = function() {
alert([Link]); // Contenu du fichier
};
[Link]([Link][0]);
};
// Prévisualiser des images (avant upload)
[Link] = function() {
var reader = new FileReader();
[Link] = function() {
var img = [Link]('img');
[Link] = [Link];
[Link](img);
};
[Link]([Link][0]);
};
F27 DRAG & DROP
[Link] = true Rend l'élément déplaçable
dragstart Événement : début du glisser
dragover Événement : glisse au-dessus d'une zone cible
drop Événement : relâchement dans la zone cible
dragleave Événement : quitte la zone cible
[Link]() Obligatoire dans dragover pour autoriser le drop
[Link] Objet qui transporte des données pendant le drag
[Link] = true;
[Link]('dragstart', function(e) {
[Link]('text/plain', [Link]);
}, false);
[Link]('dragover', function(e) {
[Link](); // Autoriser le drop
}, false);
[Link]('drop', function(e) {
[Link]();
var id = [Link]('text/plain');
[Link]([Link](id));
}, false);
★ MÉMO ULTRA-RAPIDE — À RETENIR ABSOLUMENT
CONCEPT SYNTAXE / À RETENIR
Déclarer variable var nom = valeur;
Types Number, String, Boolean, Array, Object
Concaténation 'Texte ' + variable → juxtapose strings
Saisie utilisateur parseInt(prompt('?')) — toujours parseInt pour les nombres
Condition if(cond){ } else if(cond){ } else{ }
Ternaire var x = cond ? valSiVrai : valSiFaux;
Switch switch(val){ case X: ... break; default: ... }
Boucle for for(var i=0; i<n; i++){ }
Boucle while while(condition){ } — attention aux boucles infinies
Fonction function nom(args){ return valeur; }
Tableau var t=[]; [Link](v); [Link]; t[0]
Objet littéral var o={cle:'val'}; [Link]; o['cle']
Sélectionner HTML [Link]('id') / querySelector('.cls')
Modifier contenu [Link] = '<b>Texte</b>';
Écouter événement [Link]('click', function(e){ }, false);
Bloquer formulaire [Link]('submit', function(e){ [Link](); })
Valeur d'un input [Link]('id').value
Créer élément var el = [Link]('div'); [Link](el);
setTimeout var id = setTimeout(fn, 2000); clearTimeout(id);
setInterval var id = setInterval(fn, 1000); clearInterval(id);
Date actuelle var d = new Date(); [Link](); [Link]()+1; [Link]();
AJAX var xhr = new XMLHttpRequest(); [Link]('GET','url',true); [Link](null);
JSON [Link](string) → objet | [Link](objet) → string
Regex test /motif/[Link](string) → true/false
Canvas var ctx = [Link]('2d'); [Link](x,y,w,h);
Résumé du cours JavaScript — Fiches 1 à 27 · F. Reynaud / SiteduZero · condensé en format light par Claude