JavaScript - Cours Complet.docx

JAVASCRIPT

PARTIE 1 — Introduction & Fondamentaux

1.1 Présentation de JavaScript

• Créé pour « rendre les pages web vivantes ».

• Les programmes écrits dans ce langage sont appelés des scripts. Ils peuvent être insérés directement dans une page HTML et s'exécutent automatiquement au chargement de la page.

• Les scripts sont fournis et exécutés en texte brut : aucune préparation spéciale ni compilation n'est nécessaire.

Que peut faire JavaScript dans le navigateur ?

• Ajouter du nouveau contenu HTML à la page, modifier le contenu existant, modifier les styles.

• Réagir aux actions de l'utilisateur : clics de souris, mouvements du pointeur, appuis sur les touches.

• Envoyer des requêtes réseau vers des serveurs distants, télécharger et envoyer des fichiers (technologies AJAX).

• Lire et écrire des cookies, poser des questions au visiteur, afficher des messages.

• Mémoriser des données côté client (« stockage local »).

Que ne peut pas faire JavaScript dans le navigateur ?

• Il ne peut pas lire ou écrire des fichiers arbitrairement sur le disque dur, ni les copier, ni exécuter des programmes : il n'a pas d'accès direct aux fonctions du système d'exploitation.

• Les navigateurs modernes autorisent un accès limité aux fichiers, uniquement si l'utilisateur effectue une action explicite (glisser-déposer un fichier, ou le sélectionner via une balise <input>).

• L'accès à la webcam ou au microphone nécessite une autorisation explicite de l'utilisateur.

• Différents onglets ou fenêtres ne communiquent généralement pas entre eux, sauf accord explicite : c'est la « politique de même origine » (Same Origin Policy), qui protège l'utilisateur (une page ne peut pas accéder à un autre onglet d'un domaine différent).

• JavaScript peut communiquer librement avec le serveur d'où provient la page, mais sa capacité à recevoir des données d'autres domaines est limitée sauf accord explicite (exprimé via les en-têtes HTTP).

Qu'est-ce qui rend JavaScript unique ?

• Une intégration complète avec HTML et CSS.

• Des choses simples faites simplement.

• Une prise en charge par tous les principaux navigateurs, activée par défaut.

JavaScript est la seule technologie de navigateur qui combine ces trois éléments, ce qui en fait l'outil le plus répandu pour créer des interfaces web. Il permet également de créer des serveurs, des applications mobiles, etc.

Les langages « par-dessus » JavaScript

La syntaxe de JavaScript ne convient pas à tous les besoins. De nouveaux langages sont donc apparus, transpilés (convertis) en JavaScript avant leur exécution dans le navigateur :

• TypeScript : ajoute un typage strict des données pour simplifier le développement de systèmes complexes (développé par Microsoft).

• Dart : langage autonome avec son propre moteur, utilisable hors navigateur (applications mobiles), transpilable en JavaScript (développé par Google).

• Kotlin : langage moderne, concis et sûr, pouvant cibler le navigateur ou Node.js.

La balise <script>

Les programmes JavaScript peuvent être placés à n'importe quel endroit d'un document HTML grâce à la balise <script>. Par convention, elle est généralement insérée juste avant la balise de fermeture </body>.

<script src="app.js"></script>

💡 Pour inclure un fichier externe, on utilise l'attribut src de la balise <script>.

Instructions et points-virgules

• Les instructions sont des structures syntaxiques qui exécutent des actions ; on peut en utiliser autant que nécessaire.

• Elles peuvent être séparées par des points-virgules ; en général, chaque instruction est écrite sur une ligne séparée pour la lisibilité.

• Le point-virgule peut être omis dans la plupart des cas lorsqu'un saut de ligne est présent : c'est l'insertion automatique de point-virgule (ASI).

💡 « Dans la plupart des cas » ne signifie pas « toujours » : il existe des cas où un saut de ligne n'est pas interprété comme un point-virgule implicite.

alert("Hello")
alert("World"); // ce commentaire suit l'instruction

Les commentaires sur une ligne

Ils commencent par deux barres obliques // : le reste de la ligne devient inactif.

// Ce commentaire occupe une ligne à part
alert("Hello");

Les commentaires multilignes

Ils commencent par /* et se terminent par */.

/* Un exemple avec deux messages.
C'est un commentaire multiligne. */
alert("Hello");
alert("World");

Le mode moderne « use strict »

• JavaScript a longtemps évolué sans casser la compatibilité : les nouvelles fonctionnalités s'ajoutaient sans altérer les existantes.

• Cela signifiait que toute erreur de conception devenait permanente dans le langage — jusqu'en 2009, avec l'arrivée d'ECMAScript 5 (ES5).

• Pour préserver la compatibilité avec l'ancien code, la plupart des nouveautés restent inactives par défaut : on les active avec la directive "use strict".

💡 Les classes et les modules du JavaScript moderne activent automatiquement le mode strict : il n'est donc pas nécessaire d'ajouter la directive lorsqu'on les utilise.

Les variables

Une variable est un « espace de stockage nommé » pour des données. On crée une variable avec le mot-clé let :

let message;
message = 'Hello!'; // stocke la chaîne dans la variable
alert(message); // Hello!

Déclaration et affectation

On peut fusionner déclaration et affectation sur une seule ligne, et déclarer plusieurs variables à la fois :

let user = 'John', age = 25, message = 'Hello';

PARTIE 2 — Les bases du langage

2.1 Variables, types et opérateurs

var ou let

Dans les anciens scripts, on rencontre aussi le mot-clé var au lieu de let. var déclare également une variable mais avec un fonctionnement différent (portée de fonction plutôt que de bloc). Les différences sont subtiles et n'ont pas d'importance pour débuter.

let message;
message = 'Hello!';
message = 'World!'; // valeur changée
alert(message);

Analogie avec la vie réelle

On peut voir une variable comme une « boîte » destinée à contenir des données, avec une étiquette portant un nom unique. On peut y placer n'importe quelle valeur et la modifier autant de fois que nécessaire.

💡 Déclarer deux fois la même variable avec let déclenche une erreur : SyntaxError: 'message' has already been declared.

Noms de variables

• Le nom ne doit contenir que des lettres, des chiffres, et les symboles $ et _.

• Le premier caractère ne doit pas être un chiffre.

• Convention camelCase : chaque mot commence par une majuscule sauf le premier, ex. monTresLongNom.

• Le trait d'union n'est pas autorisé dans un nom de variable.

Les constantes

On déclare une constante avec const plutôt que let. Une tentative de réaffectation provoque une erreur :

const MY_BIRTHDAY = '18.04.1982';
MY_BIRTHDAY = '01.01.2001'; // erreur, impossible de réaffecter une constante

Les types de données

En JavaScript, une valeur appartient toujours à un type. Une variable peut changer de type au cours de son exécution :

let n = 123;
n = 12.345; // toujours le type number

Bon à savoir : les opérations mathématiques sont sûres

Diviser par zéro ou traiter une chaîne non numérique comme un nombre ne provoque jamais d'erreur fatale : au pire on obtient NaN.

let result = 12 / "AB";
console.log(result); // NaN

Le type String

• Guillemets doubles : "Hello"

• Guillemets simples : 'Hello'

• Backticks : `Hello` — permettent d'incorporer des variables et expressions avec ${...}

let name = "John";
alert(`Hello, ${name}!`); // Hello, John!
alert(`le résultat est ${1 + 2}`); // le résultat est 3

null et undefined

null est une valeur spéciale qui signifie « rien » ou « valeur inconnue » — ce n'est pas un pointeur nul comme dans d'autres langages. undefined signifie qu'aucune valeur n'a été attribuée.

💡 On utilise généralement null pour assigner explicitement une valeur « vide » ou « inconnue », tandis que undefined reste la valeur initiale par défaut.

L'opérateur typeof

typeof renvoie le type de l'opérande ; utile pour vérifier rapidement un type de valeur :

typeof undefined // "undefined"
typeof 0 // "number"
typeof 10n // "bigint"
typeof true // "boolean"
typeof "foo" // "string"
typeof Symbol("id")// "symbol"
typeof Math // "object"
typeof null // "object" (particularité historique)
typeof alert // "function"

Les interactions avec l'utilisateur : alert, confirm, prompt

Ces trois fonctions ouvrent une fenêtre modale : le visiteur ne peut pas interagir avec le reste de la page tant qu'il ne l'a pas traitée.

Les conversions de type

La plupart du temps, les opérateurs et fonctions convertissent automatiquement les valeurs dans le type approprié. On peut aussi convertir explicitement :

// Conversion en chaîne
let value = true;
value = String(value); // "true"

// Conversion numérique
alert("6" / "2"); // 3
let num = Number("123"); // 123

// Conversion booléenne
Boolean(1); // true
Boolean(0); // false
Boolean("hello"); // true
Boolean(""); // false

2.2 Les structures de données : tableaux et objets

Dans presque tous les projets JavaScript, vous manipulerez des données structurées : des listes de valeurs (tableaux) ou des données à propriétés (objets).

Le type Array (tableau)

Un tableau permet de stocker une liste ordonnée de valeurs dans une seule variable. Chaque élément est associé à un indice numérique commençant à 0.

let scores = [90, 85, 78, 92];

• Ordre : les valeurs sont stockées séquentiellement, avec une position définie pour chaque élément.

• Contenu mixte : un tableau peut contenir différents types de données.

• Syntaxe : crochets [], éléments séparés par des virgules.

• Mutabilité : on peut modifier directement le contenu d'un tableau (même déclaré avec const).

Manipuler les tableaux

let fruits = ["pomme", "banane"];

fruits.push("orange"); // ajoute à la fin
fruits.unshift("fraise"); // ajoute au début

let dernier = fruits.pop(); // retire et retourne le dernier élément
let premier = fruits.shift(); // retire et retourne le premier élément

let position = fruits.indexOf("banane"); // 1ère occurrence
let derniere = fruits.lastIndexOf("banane"); // dernière occurrence

let extrait = fruits.slice(1, 3); // extrait sans modifier l'original
fruits.splice(1, 1, "mangue"); // ajoute/remplace/retire des éléments

Le type Object

Un objet permet de stocker des données sous forme de paires clé-valeur, contrairement aux tableaux qui gèrent des collections ordonnées.

let utilisateur = {
nom: "Alice",
age: 25,
estMembre: true
};

Accès aux propriétés

console.log(utilisateur.nom); // "Alice" — notation pointée
console.log(utilisateur["age"]); // 25 — notation par crochets

Les méthodes d'un objet

let utilisateur = {
nom: "Alice",
saluer: function() {
console.log("Bonjour " + this.nom);
}
};
utilisateur.saluer(); // "Bonjour Alice"

💡 Les valeurs des propriétés peuvent être de n'importe quel type : chaînes, nombres, booléens, fonctions (méthodes), ou même d'autres objets et tableaux.

Objet vs Tableau

La mutabilité des const

Une constante ne peut pas être réassignée, mais si elle contient un objet ou un tableau, son contenu reste modifiable :

const utilisateur = { nom: "Alice", age: 30 };
utilisateur.age = 31; // fonctionne : on modifie une propriété
console.log(utilisateur.age); // 31
// utilisateur = {}; // Erreur : on ne peut pas réassigner la variable

2.3 Les structures de contrôle

Opérateurs arithmétiques

Opérateurs de comparaison

Opérateurs logiques

(5 > 3 && 3 < 4) // true — ET logique
(5 > 3 || 3 > 4) // true — OU logique
!(5 > 3) // false — NON logique

Opérateurs d'affectation

Opérateur ternaire

Simplifie une condition if/else en une seule ligne : condition ? valeurSiVrai : valeurSiFaux

let resultat = (a > b) ? "a est plus grand" : "b est plus grand";

if / else if / else

let note = 85;
if (note > 90) {
console.log("Excellent");
} else if (note > 75) {
console.log("Bien");
} else if (note > 50) {
console.log("Passable");
} else {
console.log("Échec");
}

Conditions multiples (&& et ||)

let age = 20;
let membre = true;
if (age > 18 && membre) {
console.log("Accès autorisé");
} else {
console.log("Accès refusé");
}

La condition switch

let jour = 'mardi';
switch (jour) {
case 'lundi':
console.log("Début de semaine !");
break;
case 'mardi':
console.log("Deuxième jour de la semaine !");
break;
case 'mercredi':
console.log("Milieu de semaine.");
break;
default:
console.log("Jour non spécifié.");
}

Les conditions imbriquées

if (age > 18) {
if (membre) {
console.log("Accès autorisé pour les membres majeurs");
} else {
console.log("Accès restreint pour les non-membres");
}
} else {
console.log("Accès refusé aux mineurs");
}

Les boucles

Les boucles exécutent un bloc de code plusieurs fois, selon un nombre de répétitions ou une condition.

// for : nombre d'itérations connu
for (let i = 0; i < 10; i++) {
console.log(i);
}

// while : condition évaluée avant chaque itération
let compteur = 1;
while (compteur < 5) {
console.log(compteur);
compteur++;
}

// do...while : exécute au moins une fois
let n = 6;
do {
console.log(n);
n++;
} while (n < 5);

// for...of : parcourt les valeurs d'un tableau
const noms = ['Alice', 'Bob', 'Charlie'];
for (let nom of noms) {
console.log(nom);
}

// for...in : parcourt les clés d'un objet
const personne = { nom: 'Alice', age: 30, ville: 'Paris' };
for (let cle in personne) {
console.log(cle, personne[cle]);
}

Erreurs courantes à éviter

• Oublier les accolades {} dans les conditions et boucles.

• Confondre == et ===.

• Écrire des conditions peu lisibles avec de multiples && et ||.

• Oublier la clause default dans un switch.

• Utiliser for...in à la place de for...of pour parcourir un tableau.

• Créer des boucles infinies par accident.

PARTIE 3 — Programmation événementielle & DOM

3.1 Introduction : pourquoi JavaScript ?

• Objectif principal : introduire de l'interactivité avec les pages HTML et effectuer des traitements simples côté client.

• Moyen : insérer de petits programmes (scripts) dans les pages HTML — un langage structuré qui vient enrichir le HTML.

• JavaScript est intégré complètement dans le code HTML et contient des gestionnaires d'événements.

Où placer le code JavaScript ?

Le code JS peut être placé à trois endroits :

• Entre les balises <script> et </script>.

• Associé à un attribut d'événement d'une balise HTML (ex. onClick).

• Associé au pseudo-protocole javascript: dans une URL.

<script>
// code : instructions, déclarations de fonctions, etc.
</script>

💡 Si le script est placé dans <head>, il n'est pas exécuté immédiatement. S'il fait partie du <body>, il s'exécute dès que le navigateur l'interprète. Les fonctions doivent généralement être déclarées dans <head>.

<input type="button" value="Calculer" onClick="calculer()">

<a href="javascript:void(calculer())">Pour calculer</a>

💡 L'opérateur void permet d'ignorer la valeur de retour de la fonction appelée via le pseudo-protocole javascript:.

Exemple complet

<html>
<head>
<script>
function saluer() {
alert("Bonjour tout le monde !");
}
</script>
</head>
<body>
<h4>Exécution sur événement onClick</h4>
<form>
<input type="button" value="Salut" onClick="saluer()">
</form>
<h4>Exécution sur protocole javascript:</h4>
<a href="javascript:saluer()">Pour saluer</a>
</body>
</html>

3.2 Les objets du navigateur

Le navigateur expose plusieurs objets globaux prédéfinis pour interagir avec la page et l'utilisateur.

3.3 La classe Window

window est l'objet global du navigateur ; toutes les variables globales et fonctions comme alert() lui appartiennent implicitement.

window.alert("Message d'avertissement");
window.confirm("Message de confirmation"); // retourne true ou false
window.prompt("Message", "valeur par défaut"); // retourne la chaîne saisie

3.4 La classe Document & les cookies

Écrire dans le document

document.write("Voici la valeur approchée à ", 1E-3, " près de la constante e : ", 2718E-3);
document.write("<p>");
document.write("Mon <i>lycée</i> est situé à <u>Aladarissa</u> dans la ville de Fès");

💡 JavaScript convertit automatiquement les nombres en chaînes de caractères, ce qui permet de les concaténer directement. Des caractères spéciaux peuvent être insérés dans les chaînes : \n (nouvelle ligne), \t (tabulation), \' (apostrophe), etc.

Traitement des images

// Préchargement d'images
let rouge = new Image(100, 100);
rouge.src = 'rouge.gif';

let vert = new Image(100, 100);
vert.src = 'vert.gif';

// Modification d'une image existante de la page
document.images[12].src = rouge.src;

Propriétés utiles d'une image : complete, width, height, name, src.

Gestion des cookies

// Créer un cookie
document.cookie = "username=John";

// Supprimer un cookie (en expirant sa date)
document.cookie = "username=; expires=Fri, 07 Jun 2019 00:00:00 UTC; path=/;";

Un cookie est une donnée stockée sur l'ordinateur du client sous forme de paire clé/valeur, utilisée par exemple pour mémoriser un profil utilisateur d'une visite à l'autre.

3.5 — 3.6 Le DOM (Document Object Model)

• Le DOM est une API (Application Programming Interface) permettant de manipuler du HTML/XML.

• Il définit la structure logique des documents ainsi que la façon d'y accéder et de la manipuler.

• Il permet de créer des documents, parcourir leur structure, et ajouter, effacer ou modifier des éléments et leur contenu.

Le DOM représente un document HTML sous forme d'une arborescence. Par exemple, ce tableau HTML :

<table>
<tbody>
<tr><td>Shady Grove</td><td>Aeolian</td></tr>
<tr><td>Over the River, Charlie</td><td>Dorian</td></tr>
</tbody>
</table>

...est représenté par le navigateur sous forme d'un modèle objet arborescent (structure + méthodes), qui permet la manipulation du document. JavaScript en est l'implémentation principale dans les navigateurs modernes (Chrome, Firefox, Edge, Safari, etc.).

Solutions pour modifier le DOM

// innerHTML
let e = document.getElementById("un_id");
let s = "Voici <b>un texte</b>";
e.innerHTML = s;

// DOM pur
let e2 = document.getElementById("un_id");
let t1 = document.createTextNode('Voici ');
let t2 = document.createTextNode('un texte');
let b = document.createElement('b');
e2.appendChild(t1);
b.appendChild(t2);
e2.appendChild(b);

Sélectionner des éléments (DOM moderne)

• getElementById() — sélectionne un élément par son identifiant.

• getElementsByClassName() — sélectionne les éléments d'une classe donnée.

• getElementsByTagName() — sélectionne les éléments d'un type de balise donné.

• querySelector() — sélectionne le premier élément correspondant à un sélecteur CSS.

• querySelectorAll() — sélectionne tous les éléments correspondant à un sélecteur CSS.

Modifier des éléments

• innerHTML, textContent — modifient le contenu d'un élément.

• setAttribute() — modifie ou ajoute un attribut.

• classList — ajoute, retire ou bascule des classes CSS.

• createElement(), appendChild(), removeChild() — créent et suppriment des éléments dynamiquement.

3.7 Gestion des événements

• Événements : actions résultant d'interactions utilisateur ou d'autres déclencheurs (clic, survol, frappe clavier, etc.).

• Gestionnaires d'événements (event handlers) : fonctions exécutées lorsqu'un événement précis se produit.

• Écouteurs d'événements (event listeners) : addEventListener() permet d'attacher un gestionnaire à un élément.

• Objet événement : contient des informations sur l'événement, passé en argument au gestionnaire.

• Propagation des événements : capture (du parent vers l'enfant) ou bouillonnement/bubbling (de l'enfant vers le parent).

• Délégation d'événements : technique consistant à gérer les événements de plusieurs éléments via un seul gestionnaire placé sur un ancêtre commun.

Mise en place d'événements HTML

<a href="#" onMouseOver="allumer()" onMouseOut="eteindre()">Support</a>

Exemple : effet de survol (rollover) sur une image

<script>
function change(image, src) {
document.images[image].src = src;
}
</script>

<img name="image1" width="100" height="100" src="rouge.gif"
onMouseOver="change('image1', 'vert.gif')"
onMouseOut="change('image1', 'rouge.gif')">

Exemple moderne : addEventListener

const bouton = document.querySelector('#monBouton');
bouton.addEventListener('click', function(event) {
console.log('Bouton cliqué', event);
});

Contrôle de formulaires

Les contrôles côté client permettent de vérifier la cohérence de la saisie avant l'envoi, ce qui évite des transmissions client/serveur inutiles. On peut vérifier la présence d'une valeur, son type, ou la faire correspondre à une expression régulière — généralement via l'événement onSubmit.

<script>
function verif() {
if (document.formu.txt.value != '') {
return window.confirm('Envoyer ?');
}
return false;
}
</script>

<form name="formu" action="URI" method="GET" onSubmit="return verif();">
<input type="text" name="txt">
<input type="submit" value="Envoyer">
</form>

PARTIE 4 — JavaScript moderne (ES6+)

4.1 ES6 (ECMAScript 2015)

ES6 est une mise à jour majeure du langage JavaScript, introduisant une nouvelle syntaxe et de nombreuses fonctionnalités qui simplifient l'écriture du code.

4.2 Arrow functions, littéraux de gabarit, déstructuration

Les fonctions fléchées (arrow functions)

Syntaxe plus concise pour écrire des fonctions. Elles n'ont pas leur propre this, arguments, super ni new.target, et ne peuvent pas servir de constructeurs.

// Fonction classique
function addition(a, b) { return a + b; }

// Fonction fléchée équivalente
const addition2 = (a, b) => a + b;

Les littéraux de gabarit (template literals)

Chaînes délimitées par des backticks, permettant d'intégrer des expressions avec ${...} et de créer des chaînes multi-lignes.

const nom = "Alice";
console.log(`Bonjour ${nom}, le résultat est ${1 + 2}`);

La déstructuration

Permet d'extraire des valeurs d'un tableau ou d'un objet et de les assigner directement à des variables.

const [a, b] = [1, 2];
const { nom, age } = { nom: "Alice", age: 25 };

L'opérateur de décomposition (spread) et rest

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4] — spread

function somme(...nombres) { // rest
return nombres.reduce((a, b) => a + b, 0);
}

Classes et héritage

Le JavaScript moderne prend en charge les classes, une syntaxe qui repose sur l'héritage prototypal existant.

class Animal {
constructor(nom) { this.nom = nom; }
parler() { console.log(`${this.nom} fait du bruit.`); }
}

class Chien extends Animal {
parler() { console.log(`${this.nom} aboie.`); }
}

new Chien("Rex").parler(); // "Rex aboie."

Les modules

Les modules encapsulent le code en unités réutilisables grâce aux instructions import et export.

// module.js
export function saluer(nom) { return `Bonjour ${nom}`; }

// main.js
import { saluer } from './module.js';

4.3 Concepts avancés

Les closures (fermetures)

Une closure est une fonction qui se souvient de la portée dans laquelle elle a été créée, même après que cette portée a été fermée.

function compteur() {
let n = 0;
return function() { return ++n; };
}
const inc = compteur();
inc(); // 1
inc(); // 2

Les prototypes

Mécanisme par lequel les objets JavaScript héritent des fonctionnalités les uns des autres.

Le contexte this

Référence à l'objet qui possède le code en cours d'exécution ; sa valeur dépend de la façon dont la fonction est appelée.

Contexte d'exécution et hoisting

Le hoisting est le mécanisme par lequel les déclarations de variables et de fonctions sont « remontées » en haut de leur portée avant l'exécution du code.

console.log(message); // undefined (pas d'erreur)
var message = "La variable a été hoistée";

La boucle d'événements (event loop)

Mécanisme qui permet à JavaScript, bien que mono-threadé, d'exécuter des opérations non bloquantes en déléguant les tâches longues (réseau, timers) et en traitant leurs résultats dès que la pile d'appels est libre.

Gestion de la mémoire

JavaScript gère automatiquement l'allocation et la libération de mémoire via un ramasse-miettes (garbage collector).

4.4 Programmation fonctionnelle

• Programmation fonctionnelle : paradigme consistant à composer des fonctions pures, en évitant l'état partagé, les données mutables et les effets de bord.

• Fonctions pures : renvoient toujours le même résultat pour les mêmes arguments, sans effet de bord.

• Immutabilité : principe selon lequel les données ne doivent pas être modifiées après leur création.

• Fonctions d'ordre supérieur : acceptent une fonction en argument ou en renvoient une.

• map, filter, reduce : fonctions d'ordre supérieur courantes pour transformer et agréger des données.

• Récursion : technique où une fonction s'appelle elle-même pour résoudre des sous-problèmes.

• Patron Singleton : restreint l'instanciation d'une classe à une seule instance.

• Patron Observer : un sujet maintient une liste d'observateurs et les notifie de tout changement d'état.

• Mémoïsation (memoization) : technique consistant à mettre en cache le résultat d'un appel de fonction coûteux.

PARTIE 5 — JavaScript asynchrone

5.1 Pourquoi l'asynchrone ?

JavaScript étant un langage événementiel mono-threadé, il ne bloque pas l'exécution en attendant une réponse (réseau, minuteur, etc.) mais continue d'écouter d'autres événements pendant que l'opération se déroule en arrière-plan.

5.2 Callbacks, promesses & async/await

Les callbacks

Fonctions passées en argument à une autre fonction et exécutées plus tard, une fois une action terminée.

function premiereFonction() {
setTimeout(function() {
console.log('Première fonction appelée');
}, 1000);
}

💡 Le callback hell est un anti-pattern où plusieurs callbacks imbriqués rendent le code difficile à lire et à déboguer.

async1(function() {
async2(function() {
async3(function() {
async4(function() { /* ... */ });
});
});
});

Les promesses (Promise)

Une promesse est un objet qui représente l'achèvement (ou l'échec) éventuel d'une opération asynchrone. Elle existe dans l'un de ces trois états : en attente (pending), tenue (fulfilled) ou rejetée (rejected).

const promesse = new Promise(function(resolve, reject) {
// opération asynchrone
const succes = true;
if (succes) resolve("Résultat");
else reject("Erreur");
});

promesse
.then(resultat => console.log(resultat))
.catch(erreur => console.error(erreur));

Règles fondamentales d'une promesse :

• Elle expose une méthode .then() conforme au standard.

• Une promesse en attente peut passer à l'état tenue ou rejetée.

• Une fois tenue ou rejetée, elle est réglée (settled) et ne peut plus changer d'état.

• Une fois réglée, sa valeur ne change plus.

async / await

Mots-clés permettant d'écrire du code asynchrone dans un style synchrone, plus lisible que les chaînes de .then().

async function chargerDonnees() {
try {
const reponse = await fetch("https://api.exemple.com/donnees");
const donnees = await reponse.json();
console.log(donnees);
} catch (erreur) {
console.error("Erreur :", erreur);
}
}

5.3 Communiquer avec le serveur

XMLHttpRequest (XHR)

Objet historique utilisé pour interagir avec des serveurs et effectuer des requêtes HTTP depuis le navigateur.

Fetch API

Alternative moderne à XHR pour effectuer des requêtes HTTP, basée sur les promesses.

fetch("https://api.exemple.com/donnees")
.then(reponse => reponse.json())
.then(donnees => console.log(donnees))
.catch(erreur => console.error(erreur));

AJAX

Technique (Asynchronous JavaScript and XML) permettant de mettre à jour une partie d'une page web sans recharger la page entière.

PARTIE 6 — Méthodes essentielles (aide-mémoire)

6.1 Méthodes des tableaux (Array)

6.2 Méthodes des chaînes (String)

6.3 Méthodes des objets (Object)

6.4 Méthodes des nombres (Number)

PARTIE 7 — Référence professionnelle

Cette section propose un sommaire thématique couvrant l'ensemble du langage, utile comme aide-mémoire ou point d'entrée pour approfondir un sujet précis.

PARTIE 8 — Questions & réponses d'entretien

Cette section rassemble les questions les plus fréquentes lors d'entretiens techniques JavaScript, avec des réponses concises.

Q1. Quelles sont les façons de créer un objet en JavaScript ?

Il existe plusieurs façons : le constructeur Object (peu recommandé), les littéraux d'objet {}, Object.create(), les fonctions constructeurs, et les classes ES6.

Q2. Qu'est-ce qu'une chaîne de prototypes ?

Le prototype chaining permet de construire de nouveaux types d'objets à partir d'objets existants, de façon similaire à l'héritage dans un langage à classes. On y accède via Object.getPrototypeOf(objet) ou la propriété __proto__.

Q3. Quelle est la différence entre call, apply et bind ?

call() invoque une fonction avec un this et des arguments donnés un par un ; apply() fait de même mais avec les arguments sous forme de tableau ; bind() renvoie une nouvelle fonction liée à un this donné, sans l'exécuter immédiatement.

Q4. Qu'est-ce que JSON ?

JSON (JavaScript Object Notation) est un format texte basé sur la syntaxe des objets JavaScript, popularisé par Douglas Crockford, utile pour transmettre des données sur un réseau.

Q5. À quoi sert la méthode slice() d'un tableau ?

slice() retourne les éléments sélectionnés dans un nouveau tableau, du début indiqué jusqu'à la fin optionnelle (exclue), sans modifier le tableau original.

Q6. À quoi sert la méthode splice() d'un tableau ?

splice() ajoute et/ou retire des éléments à une position donnée, et retourne les éléments retirés ; elle modifie le tableau original.

Q7. Quelle est la différence entre slice et splice ?

slice() ne modifie pas le tableau d'origine et sert à extraire une portion ; splice() modifie le tableau d'origine et sert à ajouter/retirer des éléments.

Q8. Que sont == et === ?

== est une égalité avec conversion de type autorisée ; === est une égalité stricte qui compare aussi le type. Cas particulier : NaN n'est jamais égal à lui-même.

Q9. Que sont les fonctions fléchées (arrow functions) ?

Une syntaxe plus courte pour écrire une fonction ; elle n'a pas son propre this, arguments, super ni new.target, et ne peut pas servir de constructeur.

Q10. Qu'est-ce qu'une fonction de première classe ?

En JavaScript, les fonctions sont des objets de première classe : elles peuvent être passées en argument, retournées par une autre fonction, ou assignées à une variable.

Q11. Qu'est-ce qu'une fonction de premier ordre ?

Une fonction qui n'accepte pas de fonction en argument et n'en retourne pas.

Q12. Qu'est-ce qu'une fonction d'ordre supérieur ?

Une fonction qui accepte une fonction en argument, ou qui en retourne une, ou les deux.

Q13. Qu'est-ce qu'une fonction unaire ?

Une fonction qui accepte exactement un seul argument.

Q14. Qu'est-ce que le currying ?

Le currying transforme une fonction à plusieurs arguments en une séquence de fonctions à un seul argument chacune.

Q15. Qu'est-ce qu'une fonction pure ?

Une fonction dont le résultat ne dépend que de ses arguments, sans effet de bord : appelée plusieurs fois avec les mêmes arguments, elle renvoie toujours la même valeur.

Q16. À quoi sert le mot-clé let ?

let déclare une variable à portée de bloc, limitée au bloc, à l'instruction ou à l'expression dans laquelle elle est utilisée — contrairement à var, qui a une portée de fonction.

Q17. Qu'est-ce que la zone morte temporelle (Temporal Dead Zone) ?

C'est la période, pour une variable déclarée avec let ou const, entre le début de son bloc et sa déclaration effective : y accéder avant déclenche une ReferenceError.

Q18. Qu'est-ce qu'une IIFE (Immediately Invoked Function Expression) ?

Une fonction qui s'exécute immédiatement dès sa définition, généralement écrite sous la forme (function(){ ... })();

Q19. Quel est l'intérêt des modules ?

Les modules apportent maintenabilité, réutilisabilité et un espace de noms propre, en évitant de tout regrouper dans un même fichier global.

Q20. Qu'est-ce que la mémoïsation ?

Une technique consistant à mettre en cache le résultat d'un appel de fonction coûteux, afin de le retourner directement lors d'appels ultérieurs avec les mêmes paramètres.

Q21. Qu'est-ce que le hoisting ?

Un mécanisme par lequel les déclarations de variables et de fonctions sont remontées en haut de leur portée avant l'exécution — seules les déclarations sont hoistées, pas les initialisations.

Q22. Que sont les closures ?

Une closure combine une fonction et l'environnement lexical dans lequel elle a été créée : une fonction interne garde accès aux variables de la fonction englobante même après la fin de son exécution.

Q23. Qu'est-ce que la portée (scope) ?

La portée définit l'accessibilité des variables, fonctions et objets dans une partie donnée du code au moment de l'exécution.

Q24. Qu'est-ce qu'un service worker ?

Un script exécuté en arrière-plan, séparément de la page web, offrant des fonctionnalités comme le mode hors-ligne, la synchronisation périodique ou les notifications push. Il ne peut pas accéder directement au DOM.

Q25. Qu'est-ce qu'IndexedDB ?

Une API bas niveau pour le stockage côté client de grandes quantités de données structurées, y compris des fichiers, avec des index pour des recherches performantes.

Q26. Qu'est-ce que le web storage ?

Une API de stockage clé/valeur côté navigateur, avec deux mécanismes : localStorage (sans expiration) et sessionStorage (effacé à la fermeture de l'onglet).

Q27. Qu'est-ce qu'un postMessage ?

Une méthode permettant une communication entre fenêtres d'origines différentes, à condition que les pages respectent la politique de même origine ou l'autorisent explicitement.

Q28. Qu'est-ce qu'un cookie et pourquoi l'utiliser ?

Un cookie est une donnée stockée sous forme de paire clé/valeur sur l'ordinateur du client, utilisée notamment pour mémoriser des informations de profil d'une visite à l'autre.

Q29. Comment supprimer un cookie ?

En définissant sa date d'expiration dans le passé, sans avoir besoin de préciser sa valeur.

Q30. Quelles sont les différences entre cookie, localStorage et sessionStorage ?

Le cookie est envoyé au serveur à chaque requête et a une taille limitée ; localStorage et sessionStorage restent côté client uniquement. localStorage persiste sans expiration, sessionStorage est effacé à la fin de la session.

Q31. Qu'est-ce qu'une promesse (Promise) ?

Un objet représentant l'achèvement futur, réussi ou échoué, d'une opération asynchrone. Elle est dans l'un des trois états : en attente, tenue ou rejetée.

Q32. Pourquoi utiliser des promesses ?

Pour gérer les opérations asynchrones de façon plus lisible qu'avec des callbacks imbriqués, en réduisant le « callback hell ».

Q33. Qu'est-ce qu'un callback ?

Une fonction passée en argument à une autre fonction, exécutée à l'intérieur de celle-ci pour compléter une action.

Q34. Pourquoi utiliser des callbacks ?

Parce que JavaScript est un langage événementiel : plutôt que d'attendre une réponse, il continue d'exécuter du code tout en écoutant d'autres événements.

Q35. Qu'est-ce que le callback hell ?

Un anti-pattern où de multiples callbacks imbriqués rendent le code difficile à lire et à déboguer dans un contexte asynchrone.

Q36. Que sont les server-sent events (SSE) ?

Une technologie côté serveur permettant à un navigateur de recevoir automatiquement des mises à jour via une connexion HTTP, sans avoir à interroger le serveur (polling).

Q37. Comment recevoir des server-sent events ?

Grâce à l'objet EventSource, en écoutant son événement onmessage.

Q38. Quelles sont les règles fondamentales d'une promesse ?

Elle expose une méthode .then() conforme au standard ; une promesse en attente peut passer à l'état tenu ou rejeté ; une fois réglée (tenue ou rejetée), elle ne change plus jamais d'état ni de valeur.

Appendice — Compléments de cours

Précision sur les constantes du langage

JavaScript fournit plusieurs constantes directement disponibles :

• Les constantes numériques : entiers ou réels, en notation décimale ou scientifique (ex. 2718E-3).

• Les deux constantes booléennes : true et false.

• Les chaînes de caractères, entourées de guillemets " " ou d'apostrophes ' '.

• La constante spéciale null, qui signifie « rien », « absence de valeur » — c'est par exemple ce que renvoie prompt() si l'utilisateur clique sur Annuler.

Aide-mémoire : les tableaux (compléments)

Glossaire express