Partie 1 : Introduction à JavaScript et Bases du Langage
1. Introduction à JavaScript
Historique et rôle de JavaScript dans le développement web : JavaScript a été créé
en 1995 par Brendan Eich pour Netscape. Il est principalement utilisé pour rendre les
pages web interactives.
Différence entre JavaScript et autres langages (Java, Python, etc.) :
JavaScript est un langage de script côté client, souvent utilisé pour les interactions
dans les navigateurs,
Java est un langage de programmation côté serveur.
Python est un langage polyvalent utilisé pour diverses applications, y compris le
développement web, mais il n'est pas natif des navigateurs.
Environnement d'exécution : JavaScript s'exécute principalement dans les
navigateurs, mais peut également être exécuté côté serveur avec Node.js.
2. Syntaxe de Base
Variables (let, const, var) :
if (true) {
let name = "Alice"; // Portée limitée au bloc if
const PI = 3.14; // Portée limitée au bloc if
console.log(name); // ✅ Fonctionne
console.log(name); // ❌ Erreur : name n'est pas défini en dehors du bloc
console.log(PI); // ❌ Erreur : PI n'est pas défini en dehors du bloc
Une variable déclarée avec let ou const est limitée au bloc {}des accolades
let name = "Alice"; // Variable avec portée de bloc
const PI = 3.14; // Constante
var age = 30; // Variable avec portée de fonction
If n’est pas une fonction
if (true) {
var x = 10;
}
console.log(x); // ✅ Fonctionne, car var ignore les blocs et devient globale
var n'est pas bloquée par les accolades. Elle est globale et accessible partout.
Types de données :
let str = "Hello"; // String
let num = 42; // Number
let isTrue = true; // Boolean
let empty = null; // Null
let undef; // Undefined
let sym = Symbol('id'); // Symbol
Opérateurs :
let sum = 5 + 3; // Arithmétique
let isEqual = (5 === 5); // Comparaison stricte
let andCondition = (true && false); // Logique
Structures de contrôle :
if (age > 18) {
console.log("Adulte");
} else {
console.log("Mineur");
}
for (let i = 0; i < 5; i++) {
console.log(i);
}
let count = 0;
while (count < 5) {
console.log(count);
count++;
}
3. Fonctions
Déclaration de fonctions :
function greet(name) {
return "Bonjour, " + name;
}
const greetArrow = (name) => "Bonjour, " + name;
Paramètres et valeurs de retour :
function add(a, b) {
return a + b;
}
Portée des variables :
let globalVar = "Je suis global";
function testScope() {
let localVar = "Je suis local";
console.log(globalVar); // Accessible
}
Fonctions anonymes et IIFE :
(function() {
console.log("Je suis une IIFE");
})();
4. Manipulation des Tableaux et Objets
Tableaux :
let fruits = ["Pomme", "Banane", "Cerise"];
fruits.push("Orange"); // Ajouter
fruits.pop(); // Supprimer le dernier
let doubled = fruits.map(fruit => fruit + " " + fruit); // Map
Objets :
let person = {
name: "Alice",
age: 30,
greet: function() {
console.log("Bonjour, " + this.name);
}
};
person.greet();
Parcours des objets :
for (let key in person) {
console.log(key + ": " + person[key]);
}
Partie 2 : JavaScript Interactif - DOM et Événements
1. Introduction au DOM
Qu'est-ce que le DOM ? : Le DOM est une représentation structurée du document
HTML, permettant de manipuler les éléments via JavaScript.
Accéder aux éléments du DOM :
let element = document.getElementById("myId");
let queryElement = document.querySelector(".myClass");
Manipulation du DOM :
let newElement = document.createElement("div");
newElement.textContent = "Nouveau texte";
document.body.appendChild(newElement);
2. Gestion des Événements
Écouteurs d'événements :
element.addEventListener("click", function() {
console.log("Clic détecté");
});
Types d'événements courants :
window.addEventListener("keydown", function(event) {
console.log("Touche pressée: " + event.key);
});
Propagation des événements :
document.addEventListener("click", function() {
console.log("Clic sur le document");
}, true); // Capturing
Délégation d'événements :
document.body.addEventListener("click", function(event) {
if (event.target.tagName === "BUTTON") {
console.log("Bouton cliqué");
}
});
3. Manipulation des Styles et Classes
Modifier les styles CSS :
element.style.color = "red";
Ajouter, supprimer et basculer des classes CSS :
element.classList.add("newClass");
element.classList.remove("oldClass");
element.classList.toggle("toggleClass");
4. Formulaires et Validation
Accéder aux données des formulaires :
let form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
let data = new FormData(form);
console.log(data.get("name"));
});
Validation côté client :
let email = document.querySelector("#email");
if (!email.value.includes("@")) {
console.log("Email invalide");
}
Prévention du comportement par défaut :
form.addEventListener("submit", function(event) {
event.preventDefault();
console.log("Soumission empêchée");
});
Partie 3 : JavaScript Avancé
1. Fonctions Avancées
Closures :
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
Callbacks :
function fetchData(callback) {
setTimeout(() => {
callback("Données récupérées");
}, 1000);
}
fetchData(console.log);
Fonctions récursives :
function factorial(n) {
if (n === 0) return 1;
return n * factorial(n - 1);
}
console.log(factorial(5)); // 120
2. Programmation Asynchrone
Introduction à l'asynchrone :
setTimeout(() => {
console.log("Ceci s'exécute après 2 secondes");
}, 2000);
Promesses :
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Succès"), 1000);
});
promise.then(console.log).catch(console.error);
Async/Await :
async function fetchData() {
try {
let response = await fetch("https://api.example.com/data");
let data = await response.json();
console.log(data);
} catch (error) {
console.error("Erreur: ", error);
}
}
fetchData();
3. Gestion des Erreurs
Blocs try...catch :
try {
let result = riskyOperation();
} catch (error) {
console.error("Erreur capturée: ", error);
}
Gestion des erreurs dans les promesses et async/await :
async function riskyOperation() {
try {
let data = await fetch("https://api.example.com/data");
if (!data.ok) throw new Error("Erreur réseau");
return await data.json();
} catch (error) {
console.error("Erreur: ", error);
}
}
4. Manipulation Avancée des Objets
Prototypes et héritage :
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(this.name + " fait un bruit.");
};
let dog = new Animal("Chien");
dog.speak();
Méthodes statiques et d'instance :
class MathUtils {
static add(a, b) {
return a + b;
}
multiply(a, b) {
return a * b;
}
}
console.log(MathUtils.add(2, 3)); // Méthode statique
Object.create, Object.assign, Object.defineProperty :
let obj = Object.create({}, {
prop: { value: 42, writable: true }
});
Object.assign(obj, { newProp: "Hello" });
Object.defineProperty(obj, "readOnly", { value: "Je suis en lecture
seule", writable: false });
Partie 4 : Bonnes Pratiques et Projet Final
1. Bonnes Pratiques en JavaScript
Code lisible et maintenable :
// Mauvais
function a(b, c) { return b + c; }
// Bon
function add(a, b) {
return a + b;
}
Éviter les pièges courants :
// Hoisting
console.log(x); // undefined
var x = 5;
// Comparaisons implicites
console.log("5" == 5); // true
console.log("5" === 5); // false
Utilisation de strict mode :
"use strict";
function example() {
// Code ici
}
Modularité et organisation du code :
// module.js
export function greet() {
console.log("Bonjour");
}
// main.js
import { greet } from './module.js';
greet();
2. Debugging et Outils de Développement
Outils de développement du navigateur : Utiliser la console, le débogueur, et le
profiler.
Techniques de débogage :
function buggyFunction() {
console.log("Début");
// Code potentiellement problématique
console.log("Fin");
}
