Apprendre JavaScript

La syntaxe JavaScript est l’ensemble de règles qui définissent la manière dont les programmes JavaScript sont construits par le programmeur et interprétés par le navigateur ou le moteur d’exécution.

Déclarations et points-virgules

Une instruction JavaScript est une commande transmise au moteur :

javascriptCopy
let x = 10;
let y = 20;
let z = x + y;
console.log(z); // 30

Remarque sur les points-virgules : Les points-virgules séparent les instructions JavaScript. Bien que l’insertion automatique de point-virgule (ASI) permette de les omettre dans de nombreux cas, l’écriture de points-virgules explicites empêche l’analyse délicate des cas extrêmes.

Sensibilité à la casse et conventions de dénomination

JavaScript est strictement sensible à la casse :

• Les variables myVariable et myvariable sont entièrement distinctes.
• La convention standard pour les variables et les fonctions est lowerCamelCase (getUserProfile).
• Les classes et les fonctions constructeur utilisent UpperCamelCase (DeveloperProfile).
• Les constantes utilisent UPPER_SNAKE_CASE (MAX_RETRY_COUNT).

Commentaires

javascriptCopy
// Single line comment

/*
  Multi-line block comment
  useful for long descriptions or documentation
*/

Mode strict ("use strict";)

Le mode strict empêche les erreurs silencieuses, interdit les globales accidentelles et interdit les fonctionnalités de langage problématiques :

javascriptCopy
"use strict";

x = 3.14; // Uncaught ReferenceError: x is not defined (not declared with let/const)

Quiz interactif : Syntaxe

<div class=“interactive-quiz” data-answer=“2”> <div class=“quiz-question”>Quelle convention de dénomination est standard pour les fonctions et les variables en JavaScript ?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-syn” value=“0”> <span>snake_case</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-syn” value=“1”> <span>kebab-case</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-syn” value=“2”> <span>lowerCamelCase</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-syn” value=“3”> <span>SCREAMING_SNAKE_CASE</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Vérifier la réponse</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

En JavaScript, les variables sont des conteneurs permettant de stocker des valeurs. JavaScript moderne (ES6+) fournit trois mots-clés pour déclarer les variables : const, let et l’ancien var.

const contre let contre var

javascriptCopy
// Prefer const by default
const API_URL = "https://www.oldlane17.com";

// Use let when the value will change
let currentCount = 0;
currentCount += 1;

// Avoid var in modern code

Types de données primitifs

JavaScript a 7 types de données primitifs plus object :

1. number : entiers et flottants (par exemple, 42, 3.14).
2. string : Séquence de caractères ("hello", 'world', `template ${val}`).
3. boolean : true ou false.
4. undefined : Une variable déclarée à laquelle aucune valeur n’a été attribuée.
5. null : Représentation explicite de « aucune valeur ».
6. bigint : Entiers de longueur arbitraire (9007199254740991n).
7. symbol : Identifiant unique et immuable (Symbol("id")).

javascriptCopy
let title = "Old Lane 17";
console.log(typeof title);       // "string"
console.log(typeof 42);          // "number"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (historic JS quirk!)

Quiz interactif : Variables<div class=“interactive-quiz” data-answer=“1”>

<div class=“quiz-question”>Quelle erreur est générée lors de la tentative de réaffectation d’une variable déclarée avec ‘const’ ?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-var” value=“0”> <span>ReferenceError</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-var” value=“1”> <span>TypeError (Affectation à une variable constante)</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-var” value=“2”> <span>SyntaxError</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-var” value=“3”> <span>Aucune erreur, il est réaffecté silencieusement</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Vérifier la réponse</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

JavaScript comprend un riche ensemble d’opérateurs pour effectuer des calculs mathématiques, des assertions logiques et des inspections d’objets.

Égalité stricte (===) vs égalité lâche (==)

Préférez toujours l’égalité stricte (===) à l’égalité lâche (==) :

• === (Strict) : vérifie à la fois value et type sans coercition.
• == (Loose) : force les types avant la comparaison, conduisant à des résultats inattendus.

javascriptCopy
console.log(5 === "5"); // false (number !== string)
console.log(5 == "5");  // true  (string coerced to number)

console.log(0 === false); // false
console.log(0 == false);  // true

## Opérateurs de sécurité modernes : ?. et ??

JavaScript moderne (ES2020+) a introduit deux opérateurs pour gérer en toute sécurité null et undefined :

1. Chaînage facultatif (?.)

Accédez en toute sécurité aux propriétés des objets imbriqués sans lancer TypeError: Cannot read properties of undefined :

javascriptCopy
const user = { profile: { name: "Alice" } };

// Without optional chaining: would crash if profile were null/undefined
console.log(user?.profile?.name); // "Alice"
console.log(user?.settings?.theme); // undefined (safe!)

2. Opérateur de coalescence nul (??)

Renvoie l’opérande de droite uniquement si l’opérande de gauche est null ou undefined (contrairement à || qui s’appuie également sur 0, "" ou false) :

javascriptCopy
const userScore = 0;

// Logical OR (||) treats 0 as falsy!
const displayA = userScore || 10;
console.log(displayA); // 10 (Incorrect: 0 was a valid score!)

// Nullish Coalescing (??) preserves 0 and empty string
const displayB = userScore ?? 10;
console.log(displayB); // 0 (Correct!)

Opérateurs d’affectation logique

javascriptCopy
let count = 0;
count ||= 5; // count becomes 5 (since 0 is falsy)

let title = null;
title ??= "Default Title"; // title becomes "Default Title"

Quiz interactif : Opérateurs<div class=“interactive-quiz” data-answer=“2”>

<div class=“quiz-question”>Quel est le résultat de : null ?? ‘Retour’ contre faux || « Retour » ?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-ops” value=“0”> <span>‘Fallback’ et false</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-ops” value=“1”> <span>null et ‘Fallback’</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-ops” value=“2”> <span>‘Repli’ et ‘Retour’</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-ops” value=“3”> <span>null et false</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Vérifier la réponse</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

Les instructions conditionnelles sont utilisées pour effectuer différentes actions en fonction de différentes conditions.

if, else if et else

javascriptCopy
const hour = new Date().getHours();
let greeting;

if (hour < 12) {
  greeting = "Good morning";
} else if (hour < 18) {
  greeting = "Good afternoon";
} else {
  greeting = "Good evening";
}

console.log(greeting);

L’opérateur ternaire (? :)

Un simple one-liner pour attribuer des valeurs conditionnelles :

javascriptCopy
const age = 19;
const canVote = age >= 18 ? "Eligible to vote" : "Too young to vote";
console.log(canVote);

La déclaration switch

Lors de l’évaluation d’une seule variable par rapport à plusieurs cas de correspondance stricte :

javascriptCopy
const role = "editor";

switch (role) {
  case "admin":
    console.log("Full system access");
    break;
  case "editor":
    console.log("Can edit and publish articles");
    break;
  case "viewer":
    console.log("Read-only access");
    break;
  default:
    console.log("Guest access");
}

Avertissement : Incluez toujours break; à la fin de chaque cas ; sinon, l’exécution passera automatiquement au cas suivant !

Quiz interactif : conditions

<div class=“interactive-quiz” data-answer=“1”> <div class=“quiz-question”>Dans une instruction switch, que se passe-t-il si vous oubliez d’écrire une instruction « break » dans une casse correspondante ?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-cond” value=“0”> <span>Une SyntaxError est levée immédiatement</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-cond” value=“1”> <span>L’exécution passe au bloc de cas suivant</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-cond” value=“2”> <span>L’instruction switch est réexécutée depuis le début</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-cond” value=“3”> <span>Le bloc par défaut s’exécute à la place</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Vérifier la réponse</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

Les boucles exécutent un bloc de code plusieurs fois tant qu’une condition spécifiée est vraie.

1. La boucle standard for

javascriptCopy
for (let i = 0; i < 5; i++) {
  console.log(`Iteration: ${i}`);
}

2. for...of (idéal pour les tableaux et les itérables)

for...of boucle sur les valeurs d’un itérable (tableaux, chaînes, ensembles, cartes) :

javascriptCopy
const frameworks = ["Vanilla JS", "Node.js", "Cloudflare Workers"];

for (const fw of frameworks) {
  console.log(`Building with ${fw}`);
}

3. for...in (idéal pour inspecter les propriétés des objets)

for...in parcourt les clés de propriété énumérables d’un objet :

javascriptCopy
const serverConfig = {
  host: "www.oldlane17.com",
  port: 443,
  ssl: true
};

for (const key in serverConfig) {
  console.log(`${key}: ${serverConfig[key]}`);
}

4. Méthodes modernes d’itération de tableau

Dans JavaScript moderne, les méthodes de tableau telles que .forEach(), .map() et .filter() sont couramment utilisées :

javascriptCopy
const numbers = [1, 2, 3, 4, 5];

// Map creates a new array transformed
const doubled = numbers.map(n => n * 2);

// Filter returns elements that pass test
const evens = numbers.filter(n => n % 2 === 0);

Quiz interactif : boucles

<div class=“interactive-quiz” data-answer=“2”> <div class=“quiz-question”>Quelle structure de boucle parcourt directement les VALEURS d’un tableau ?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-loop” value=“0”> <span>pour…dans</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-loop” value=“1”> <span>commutateur…boîtier</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-loop” value=“2”> <span>pour…de</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-loop” value=“3”> <span>pendant que…chacun</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Vérifier la réponse</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

Les fonctions sont les éléments fondamentaux de JavaScript. Une fonction est une procédure réutilisable qui prend des entrées, effectue des calculs et renvoie une valeur.

Déclarations de fonction et expressions

javascriptCopy
// Function Declaration (hoisted)
function add(a, b) {
  return a + b;
}

// Function Expression (not hoisted)
const multiply = function(a, b) {
  return a * b;
};

Fonctions fléchées (=>)

Introduites dans ES6, les fonctions fléchées offrent une syntaxe concise et ne lient pas leur propre this :

javascriptCopy
// Standard arrow function
const subtract = (a, b) => {
  return a - b;
};

// Implicit return for single expressions
const square = x => x * x;

// Returning an object literal directly requires wrapping parentheses ({})
const makeUser = (name, role) => ({ name, role });

Paramètres de repos et valeurs par défaut

javascriptCopy
// Default parameter value
function formatMessage(msg, prefix = "INFO") {
  return `[${prefix}] ${msg}`;
}

// Rest parameters: collects extra arguments into a real Array
function sumAll(...numbers) {
  return numbers.reduce((acc, n) => acc + n, 0);
}

console.log(sumAll(10, 20, 30)); // 60

Fermetures en JavaScript

Une fermeture est la combinaison d’une fonction regroupée avec des références à son environnement lexical environnant :

javascriptCopy
function createCounter(initialValue = 0) {
  let count = initialValue;
  return {
    increment: () => ++count,
    decrement: () => --count,
    getValue: () => count
  };
}

const counter = createCounter(10);
console.log(counter.increment()); // 11
console.log(counter.increment()); // 12
console.log(counter.getValue());  // 12

Quiz interactif : Fonctions

<div class=“interactive-quiz” data-answer=“1”> <div class=“quiz-question”>Comment une fonction fléchée gère-t-elle le mot-clé « this » par rapport aux fonctions classiques ?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-fn” value=“0”> <span>Il lie “ceci” dynamiquement à l’appelant</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-fn” value=“1”> <span>Il hérite lexicalement de « ceci » de la portée d’exécution englobante</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-fn” value=“2”> <span>Il définit toujours ‘this’ sur null</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-fn” value=“3”> <span>Cela crée un nouveau “ceci” global </span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Vérifier la réponse</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

Les objets en JavaScript sont des collections de paires clé-valeur où les clés sont des chaînes (ou des symboles) et les valeurs peuvent être n’importe quel type de données.

Littéraux d’objet et raccourcis

javascriptCopy
const name = "Old Lane 17";
const year = 2026;

// Property shorthand
const site = {
  name,
  year,
  // Method shorthand
  describe() {
    return `${this.name} (${this.year})`;
  }
};

console.log(site.describe());

Syntaxe de déstructuration et de propagation

javascriptCopy
const config = { host: "localhost", port: 8788, ssl: false, debug: true };

// Object Destructuring with default values
const { host, port, protocol = "http" } = config;

// Spread syntax for shallow copying and merging
const productionConfig = {
  ...config,
  host: "www.oldlane17.com",
  ssl: true
};

Cours ES6

Les classes ES6 fournissent une couche de sucre syntaxique propre sur l’héritage basé sur un prototype de JavaScript :

javascriptCopy
class Article {
  constructor(title, author) {
    this.title = title;
    this.author = author;
    this.likes = 0;
  }

  like() {
    this.likes += 1;
    return this.likes;
  }
}

class TutorialArticle extends Article {
  constructor(title, author, language) {
    super(title, author);
    this.language = language;
  }

  getSummary() {
    return `"${this.title}" (${this.language}) by ${this.author}`;
  }
}

const post = new TutorialArticle("Python Decorators", "Old Lane 17", "Python");
console.log(post.getSummary());

Quiz interactif : Objets

<div class=“interactive-quiz” data-answer=“2”> <div class=“quiz-question”>Quelle syntaxe extrait la propriété ‘title’ d’un objet ‘article’ dans une variable locale ?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-obj” value=“0”> <span>const [titre] = article;</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-obj” value=“1”> <span>const titre <- article;</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-obj” value=“2”> <span>const { title } = article;</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-obj” value=“3”> <span>const title = extrait (article);</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Vérifier la réponse</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

Bienvenue dans le Tutoriel JavaScript Old Lane 17. JavaScript est le langage de programmation du Web. Il alimente les interfaces utilisateur dynamiques dans le navigateur, les environnements d’exécution de serveur modernes via Node.js et les applications de bureau/mobiles.

Pourquoi apprendre JavaScript ?

• Ubiquitaire : Tous les navigateurs modernes exécutent JavaScript de manière native, sans plugins.
• Capacité Full Stack : Utilisez JavaScript sur le client (frontend) et le serveur (Node.js / Cloudflare Workers).
• Vaste écosystème : Accédez à des millions de packages open source via npm.

javascriptCopy
// Modern JavaScript (ES6+)
const greet = (name) => {
  return `Hello, ${name}! Welcome to Old Lane 17.`;
};

const users = ["Alice", "Bob", "Charlie"];
users.forEach(user => console.log(greet(user)));

Aperçu du programme du didacticiel

Parcourez les fondations principales à l’aide de la barre latérale de gauche :

Quiz interactif

Testez vos bases JavaScript :<div class=“interactive-quiz” data-answer=“1”> <div class=“quiz-question”>Quel mot-clé devrait être votre choix par défaut pour déclarer des variables qui ne sont pas réaffectées dans le JavaScript moderne ?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-intro” value=“0”> <span>var</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-intro” value=“1”> <span>const</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-intro” value=“2”> <span>let</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-intro” value=“3”> <span>def</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Vérifier la réponse</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>