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");
}