Guide Complet : Fondations et Syntaxe de JavaScript
1. Architecture et Mécanisme d'Exécution
JavaScript est un langage de programmation de haut niveau, interprété et multi-paradigme. Son
exécution repose sur des étapes précises au sein de l'environnement hôte (le navigateur web
ou [Link]).
Le Moteur JavaScript
Le navigateur ne comprend pas directement le code source textuel. Il intègre un moteur
(comme V8 dans Google Chrome et [Link], ou SpiderMonkey dans Firefox) pour traiter le
script.
[Code Source JS] ──> [Analyseur (Parser)] ──> [Arbre de Syntaxe
Abstraite (AST)]
│
[Code Machine (0 et 1)] <── [Compilateur JIT] <────────┘
1. Le Parsing : L'analyseur lit le code et le transforme en une structure de données appelée
AST (Arbre de Syntaxe Abstraite).
2. La Compilation JIT (Just-In-Time) : Le moteur compile le code en langage machine
juste avant son exécution pour maximiser les performances.
3. Le Fil Unique (Single Thread) : JavaScript exécute une seule instruction à la fois, dans
l'ordre chronologique, du haut vers le bas.
2. Les Règles de Syntaxe Strictes
La syntaxe définit la grammaire du langage. Le non-respect de ces règles lève une erreur
immédiate (SyntaxError) et interrompt l'exécution.
La sensibilité à la casse
Les identifiants sont sensibles aux majuscules et minuscules. maValeur, mavaleur et
MAVALEUR représentent trois entités distinctes.
La terminaison des instructions
Chaque instruction se termine par un point-virgule ;. Bien que le moteur JS possède un
mécanisme d'insertion automatique des points-virgules (ASI), leur écriture explicite sécurise le
code contre les effets de bord lors de la minification du code.
Les Commentaires
Les commentaires servent à documenter le code et sont ignorés par le moteur.
// Commentaire sur une seule ligne
/*
Commentaire
sur plusieurs lignes
*/
3. Stockage et Types de Données
Les données sont manipulées à travers des variables, qui agissent comme des références vers
des emplacements mémoire.
Déclaration des Variables
Il existe trois mots-clés, mais le JavaScript moderne (ES6+) en privilégie deux :
● const : Déclare une constante. Sa valeur ne peut pas être réassignée après sa création.
Elle doit obligatoirement être initialisée.
● let : Déclare une variable dont la valeur peut être modifiée ultérieurement.
● var : Ancienne syntaxe (déconseillée). Possède une portée globale ou de fonction,
ignorant la portée des blocs {}.
const pi = 3.14159;
let score = 0;
score = 10; // Réassignation autorisée
Les Types Primitifs
JavaScript est un langage à typage dynamique : le type est déterminé automatiquement par la
valeur assignée.
let chaine = "Texte entre guillemets"; // String (Chaîne de
caractères)
let entier = 42; // Number (Nombre entier)
let decimal = 19.99; // Number (Nombre à
virgule, point obligatoire)
let estActif = true; // Boolean (Booléen : true
ou false)
let indéfini; // Undefined (Variable
déclarée sans valeur)
let vide = null; // Null (Absence
intentionnelle de valeur)
4. Les Opérateurs
Les opérateurs permettent de manipuler les variables pour produire de nouvelles valeurs.
Opérateurs Arithmétiques
let somme = 10 + 5; // 15
let difference = 10 - 5; // 5
let produit = 10 * 5; // 50
let quotient = 10 / 5; // 2
let reste = 10 % 3; // 1 (Modulo : reste de la division
entière)
let puissance = 2 ** 3; // 8 (2 au cube)
Opérateurs de Comparaison Strict
Ces opérateurs comparent à la fois la valeur et le type de donnée.
5 === 5; // true (Égalité stricte)
5 === "5"; // false (Valeurs identiques mais types différents :
Number vs String)
5 !== 6; // true (Inégalité stricte)
10 > 5; // true (Supérieur)
10 >= 10; // true (Supérieur ou égal)
Opérateurs Logiques
// ET logique (&&) : toutes les conditions doivent être vraies
(5 > 2) && (10 < 20); // true
// OU logique (||) : au moins une condition doit être vraie
(5 > 2) || (10 > 20); // true
// NON logique (!) : inverse l'état booléen
!true; // false
5. Les Structures de Contrôle
Les structures de contrôle dirigent le flux d'exécution du code en fonction de conditions
logiques.
Les Conditions (if, else if, else)
let age = 20;
if (age >= 18) {
// Exécuté si la condition est vraie
[Link]("Accès autorisé : Majeur.");
} else if (age >= 16) {
// Exécuté si la première condition est fausse mais celle-ci
est vraie
[Link]("Accès restreint accompagné.");
} else {
// Exécuté si toutes les conditions précédentes sont fausses
[Link]("Accès refusé : Mineur.");
}
Les Boucles (for, while)
Les boucles répètent un bloc de code tant qu'une condition reste vraie.
La boucle for (Itération dénombrable)
// Initialisation (i=0) ; Condition (i<5) ; Incrémentation (i++)
for (let i = 0; i < 5; i++) {
[Link]("Itération numéro : " + i);
}
La boucle while (Conditionnelle)
let compteur = 0;
while (compteur < 3) {
[Link]("Compte : " + compteur);
compteur++; // Crucial pour éviter une boucle infinie
}
6. Les Fonctions
Une fonction est un sous-programme contenant un bloc de code conçu pour exécuter une tâche
précise. Elle isole les variables et rend le code réutilisable.
Déclaration et Appel standard
// Déclaration avec paramètres (valeurs d'entrée attendues)
let resultatTva = calculerTva(100);
function calculerTva(prixHorsTaxe) {
const taux = 0.20;
return prixHorsTaxe * taux; // Renvoie le résultat et arrête la
fonction
}
// Appel de la fonction avec un argument (valeur concrète)
[Link](resultatTva); // Affiche 20
Les Fonctions Fléchées (Syntaxe moderne)
Introduites en ES6, elles offrent une syntaxe plus concise.
const multiplier = (a, b) => a * b;
[Link](multiplier(5, 4)); // Affiche 20
7. Manipulation des Structures Complexes
Les objets et les tableaux permettent de regrouper des données complexes au sein d'une seule
variable.
Les Tableaux (Listes ordonnées)
Un tableau stocke une série d'éléments indexés à partir de la position 0.
let fruits = ["Ananas", "Mangue", "Banane"];
[Link](fruits[0]); // Accède au premier élément : "Ananas"
[Link]("Orange"); // Ajoute un élément à la fin du tableau
[Link]([Link]); // Propriété retournant le nombre
d'éléments (4)
Les Objets (Paires Clé-Valeur)
Un objet représente une entité possédant des propriétés (caractéristiques) et des méthodes
(fonctions).
const utilisateur = {
nom: "Koffi",
prenom: "Jean",
age: 28,
saluer: function() {
return "Bonjour, je m'appelle " + [Link];
}
};
// Accès aux propriétés via la notation par point
[Link]([Link]); // "Koffi"
[Link]([Link]()); // "Bonjour, je m'appelle Koffi"
8. L'Intégration au Document Object Model (DOM)
En dehors du moteur pur, JavaScript interagit avec la page web via l'API du DOM fournie par le
navigateur. Le code accède aux balises HTML pour modifier la page dynamiquement.
// Sélection d'un élément HTML par son identifiant unique
const monTitre = [Link]("titre-principal");
// Modification du contenu textuel de la balise
[Link] = "Nouveau titre généré en JavaScript";
// Modification du style CSS en ligne
[Link] = "#ff0000";
Écouteurs d'Événements (Interactivité)
Pour réagir aux actions de l'utilisateur (clic, saisie au clavier, défilement), JavaScript attache des
observateurs sur les éléments du DOM.
const monBouton = [Link](".btn-validation");
// Déclenche la fonction anonyme au clic sur le bouton
[Link]("click", () => {
[Link]("Le bouton a été cliqué.");
});