Cours Complet de JavaScrip

Un guide du débutant pour maîtriser JavaScript

Sommaire

1. Introduction à JavaScript
2. Variables et Types de Données
3. Opérateurs
4. Structures de Contrôle
5. Fonctions
6. Objets et Tableaux
7. Portée et Closures
8. DOM Document Object Model
9. Événements
10. ES6+ et Syntaxe Moderne
11. Asynchrone : Callbacks, Promises, Async/Await
12. Modules JavaScript
13. Bonnes Pratiques
14. Ressources et Exercices

1. Introduction à JavaScript

JavaScript est un langage de programmation interprété côté client utilisé pour rendre les pages web interactives. Il s’exécute dans le navigateur.

<script>
  console.log("Bonjour JavaScript !");
</script>

2. Variables et Types de Données

let nom = "Alice"; // chaîne de caractères
const age = 25; // nombre
var actif = true; // booléen

Types principaux

• String
• Number
• Boolean
• Null
• Undefined
• Object
• Array

3. Opérateurs

Arithmétiques

let total = 10 + 5; // 15

Logiques

true && false // false

Comparaison

5 === '5' // false
5 == '5'  // true

4. Structures de Contrôle

Conditions

if (age > 18) {
  console.log("Majeur");
} else {
  console.log("Mineur");
}

Boucles

for (let i = 0; i < 5; i++) {
  console.log(i);
}

5. Fonctions

function saluer(nom) {
  return "Bonjour " + nom;
}

Fonctions fléchées :

const saluer = (nom) => "Bonjour " + nom;

6. Objets et Tableaux

Objet

let personne = {
  nom: "Alice",
  age: 25
};

Tableau

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

7. Portée et Closures

function exterieur() {
  let message = "Hello";
  return function interieur() {
    console.log(message);
  };
}

8. DOM (Document Object Model)

document.getElementById("titre").textContent = "Nouveau titre";

9. Événements

document.querySelector("button").addEventListener("click", () => {
  alert("Bouton cliqué !");
});

10. ES6+ et Syntaxe Moderne

• let, const
• Fonctions fléchées
• Template strings `Bonjour ${nom}`
• Destructuration
• Spread/rest operators

11. Asynchrone: Callbacks, Promises, Async/Await

// Promesse
fetch("https://api.exemple.com")
  .then(res => res.json())
  .then(data => console.log(data));

// Async/await
async function charger() {
  let res = await fetch("https://api.exemple.com");
  let data = await res.json();
  console.log(data);
}

12. Modules JavaScript

// fichier util.js
export function addition(a, b) {
  return a + b;
}

// fichier main.js
import { addition } from "./util.js";

13. Bonnes Pratiques

• Utiliser const et let (éviter var)
• Garder un code clair et commenté
• Respecter les conventions de nommage
• Modulariser son code
• Utiliser un linter (ex. ESLint)

14. Ressources et Exercices

Ressources

• Mozilla MDN JavaScript
• JavaScript.info
• FreeCodeCamp

Exercices

1. Écrire une fonction qui inverse une chaîne.
2. Créer un compteur cliquable en HTML + JS.
3. Manipuler un tableau pour extraire les valeurs paires.