Les Bases de la Syntaxe JavaScript

Ce document couvre les fondations essentielles de la programmation JavaScript, en abordant des concepts allant de la structure de base du web aux fonctionnalités avancées des objets et des fonctions.

Qu'est-ce que JavaScript ?

JavaScript est un langage de script exécuté côté client, conçu à l'origine pour ajouter des fonctionnalités dynamiques aux pages web HTML. Bien qu'inspiré par Java dans sa syntaxe initiale, il est distinct de Java, ce dernier étant un langage côté serveur.

L'Évolution et les Applications de JavaScript

Initialement destiné à la validation de formulaires, JavaScript a considérablement évolué. Il est aujourd'hui utilisé pour une vaste gamme d'applications :

  • Effets visuels sur les pages web
  • Développement côté serveur (Node.js)
  • Outils en ligne de commande
  • Applications de bureau (Electron)
  • Applications mobiles (Cordova)
  • Internet des Objets (IoT)
  • Développement de jeux

Différence entre HTML, CSS et JavaScript

  • HTML : Définit la structure et le contenu d'une page web.
  • CSS : Est responsable de la présentation et de l'esthétique de la page.
  • JavaScript : Contrôle le contenu et ajoute des effets dynamiques et interactifs.

Composants de JavaScript

  • ECMAScript : Le cœur de JavaScript, définissant la syntaxe et les types de données.
  • BOM (Browser Object Model) : Un ensemble d'APIs pour interagir avec le navigateur (fenêtres, pop-ups, etc.).
  • DOM (Document Object Model) : Une API pour manipuler la structure et le contenu des documents HTML, traitant la page comme un arbre de nœuds.

Premiers Pas avec JavaScript

Le code JavaScript peut être intégré de plusieurs manières :

  • Directement dans les attributs HTML (ex: onclick).
  • Dans des balises <script> dans l'en-tête (<head>) ou le corps (<body>) du document.
  • Dans des fichiers externes .js liés via la balise <script src="main.js"></script>.

Note importante : Une balise <script> avec un attribut src ne doit pas contenir de code JavaScript directement.

Variables

Les variables sont des conteneurs nommés en mémoire pour stocker des données. Elles sont déclarées avec le mot-clé var (ou let/const dans les versions plus récentes).


var monAge; // Déclaration
monAge = 18; // Assignation

var nomUtilisateur = "Alice"; // Déclaration et assignation combinées
var age, prenom;

Règles de nommage : Les noms de variables peuvent contenir des lettres, des chiffres, des underscores (_) et des signes dollar ($). Ils ne doivent pas commencer par un chiffre et ne peuvent pas être des mots-clés réservés. Il est recommandé d'utiliser la convention de nommage camelCase (ex: nomUtilisateur).

Types de Données

JavaScript possède des types de données primitifs et complexes.

  • Primitifs : Number, String, Boolean, Undefined, Null.
  • Complexe : Object (y compris les tableaux et les fonctions).

Le type de données d'une variable peut être vérifié avec l'opérateur typeof.


var quantite = 100;
console.log(typeof quantite); // "number"

var message = "Bonjour";
console.log(typeof message); // "string"

var estValide = true;
console.log(typeof estValide); // "boolean"

var dataIndefinie;
console.log(typeof dataIndefinie); // "undefined"

var dataNulle = null;
console.log(typeof dataNulle); // "object" (comportement historique)

Littéraux

Un littéral est une notation dans le code source qui représente une valeur fixe.

  • Littéraux numériques : 10, 3.14
  • Littéraux de chaîne : 'Texte', "Autre texte"
  • Littéraux booléens : true, false
  • Littéraux d'objet : { clé: valeur }
  • Littéraux de tableau : [élément1, élément2]

Commentaires

Les commentaires sont utilisés pour expliquer le code.

  • Commentaire sur une seule ligne : // Ceci est un commentaire
  • Commentaire multi-lignes : /* Ceci est un commentaire sur plusieurs lignes */

Conversion de Types

JavaScript effectue souvent des conversions de types implicites, mais des conversions explicites sont également possibles.

  • Vers String : Utilisation de .toString(), String(), ou concaténation avec + "".
  • Vers Number : Utilisation de .parseInt(), .parseFloat(), Number(), ou opérateurs arithmétiques (ex: +"5").
  • Vers Boolean : Les valeurs 0, "" (chaîne vide), null, undefined, et NaN sont converties en false. Toutes les autres valeurs sont converties en true.

Opérateurs

Les opérateurs sont utilisés pour effectuer des opérations sur des opérandes.

  • Arithmétiques : +, -, *, /, %.
  • Unitaires : ++ (incrémentation), -- (décrémentation).
  • Logiques : && (ET), || (OU), ! (NON).
  • Comparaison : == (égal à), === (strictement égal à), !=, !==, <, >, <=, >=. La différence principale entre == et === est que === vérifie également l'égalité des types.
  • Assignation : =, +=, -=, *=, /=, %=.

Les opérateurs ont une priorité qui détermine l'ordre d'évaluation.

Expressions et Instructions

  • Une expression est une combinaison d'opérateurs, de littéraux et d'appels de fonction qui produit une valeur.
  • Une instruction (ou déclaration) est une commande qui effectue une action. Les instructions sont généralement terminées par un point-virgule (;).

Contrôle de Flux

Le contrôle de flux détermine l'ordre d'exécution des instructions.

  • Structure Séquentielle : Exécution ligne par ligne, de haut en bas.
  • Structures Conditionnelles (Branchement) : Exécution de code basée sur des conditions (if, else if, else, switch, opérateur ternaire ? :).
  • Structures Répétitives (Boucles) : Exécution répétée de blocs de code (while, do...while, for).

Structures Codnitionnelles

L'instruction if permet d'exécuter du code si une condition est vraie.


if (condition) {
 // Bloc de code à exécuter si la condition est vraie
} else if (autreCondition) {
 // Bloc de code si autreCondition est vraie
} else {
 // Bloc de code si aucune condition précédente n'est vraie
}

// Opérateur Ternaire (raccourci pour if/else simple)
var resultat = (condition) ? valeurSiVrai : valeurSiFaux;

L'instruction switch est utile pour comparer une variable à plusieurs valeurs possibles.


switch (expression) {
 case valeur1:
   // Code pour valeur1
   break;
 case valeur2:
   // Code pour valeur2
   break;
 default:
   // Code par défaut
}

Structures Répétitives

Les boucles permettent de répéter des actions.

  • while : Exécute le bloc de code tant que la condition est vraie.
  • do...while : Similaire à while, mais exécute le bloc de code au moins une fois avant de vérifier la condition.
  • for : Idéal lorsque le nombre d'itérations est connu. Il comprend une initialisation, une condition de continuation, et une expression d'incrémentation/décrémentation.

// Boucle for exemple
for (var i = 0; i < 5; i++) {
 console.log("Itération numéro : " + i);
}

// Utilisation de 'break' pour sortir prématurément de la boucle
// Utilisation de 'continue' pour passer à l'itération suivante

Tableaux (Arrays)

Les tableaux sont des collections ordonnées d'éléments, accessibles par un indice numérique (commençant à 0).


var couleurs = ["rouge", "vert", "bleu"];
console.log(couleurs[0]); // "rouge"
console.log(couleurs.length); // 3

// Ajout d'un élément
couleurs.push("jaune");

// Parcours d'un tableau
for (var i = 0; i < couleurs.length; i++) {
 console.log(couleurs[i]);
}

Fonctions

Les fonctiosn sont des blocs de code réutilisables qui effectuetn une tâche spécifique. Elles peuvent accepter des paramètres et retourner une valeur.


// Déclaration de fonction
function saluer(nom) {
 return "Bonjour, " + nom + " !";
}

// Appel de fonction
var messageBonjour = saluer("Alice");
console.log(messageBonjour); // "Bonjour, Alice !"

// Fonction sans retour (retourne 'undefined' implicitement)
function afficherMessage(message) {
 console.log(message);
}

// La fonction 'arguments' permet d'accéder à tous les arguments passés à une fonction
function somme(...nombres) { // Utilisation de rest parameters (ES6) pour un tableau d'arguments
 let total = 0;
 for (const nombre of nombres) {
   total += nombre;
 }
 return total;
}
console.log(somme(1, 2, 3, 4)); // 10

Portée (Scope)

La portée détermine la visibilité et l'accessibilité des variables et fonctions.

  • Portée Globale : Variables déclarées en dehors de toute fonction.
  • Portée Locale (Fonctionnelle) : Variables déclarées à l'intérieur d'une fonction.
  • Portée de Bloc (introduite avec let et const en ES6) : Variables déclarées à l'intérieur d'une paire d'accolades ({ }).

La chaîne de portée fait référence à la hiérarchie des portées dans laquelle le code est exécuté.

Pré-analyse (Hoisting)

Avant l'exécution du code, l'interpréteur JavaScript effectue une pré-analyse. Les déclarations de variables (avec var) et les déclarations de fonctions sont "remontées" (hoisted) au début de leur portée respective. Seules les déclarations sont remontées, pas les assignations.


console.log(variableRemontee); // undefined (la déclaration est remontée, pas l'assignation)
var variableRemontee = "Je suis là !";

fonctionRemontee(); // Fonctionne car la déclaration de la fonction est remontée
function fonctionRemontee() {
 console.log("Fonction exécutée !");
}

Objets

Les objets sont des collections de paires clé-valeur. Les clés sont appelées propriétés (attributs) et les valeurs peuvent être des données primitives, d'autres objets, ou des fonctions (méthodes).


// Création d'un objet avec la syntaxe littérale
var personne = {
 nom: "Bob",
 age: 30,
 profession: "Ingénieur",
 saluer: function() {
   console.log("Salut, mon nom est " + this.nom); // 'this' fait référence à l'objet personne
 }
};

console.log(personne.nom); // "Bob"
personne.saluer(); // "Salut, mon nom est Bob"

// Utilisation du mot-clé 'new' avec une fonction constructeur
function Voiture(marque, modele) {
 this.marque = marque;
 this.modele = modele;
 this.demarrer = function() {
   console.log("La voiture démarre...");
 };
}
var maVoiture = new Voiture("Toyota", "Corolla");
console.log(maVoiture.marque); // "Toyota"
maVoiture.demarrer(); // "La voiture démarre..."

Parcours d'Objets et Héritage

La boucle for...in permet d'itérer sur les propriétés d'un objet.


for (var cle in personne) {
 console.log(cle + ": " + personne[cle]);
}

La suppression de propriétés se fait avec l'opérateur delete.

Types Primitifs vs. Types Complexes (Référence)

Les types primitifs (Number, String, etc.) sont passés par valeur aux fonctions. Les types complexes (Object, Array) sont passés par référence.

Objets Internes

JavaScript fournit plusieurs objets intégrés pour des tâches courantes.

  • Math : Fournit des propriétés et méthodes mathématiques (ex: Math.random(), Math.floor(), Math.max()).
  • Date : Permet de manipuler les dates et heures.
  • Array : Des méthodes pour manipuler les tableaux (ex: push(), pop(), slice(), splice(), join()).
  • String : Des méthodes pour manipuler les chaînes de caractères (ex: substring(), indexOf(), replace(), split()).

Il est recommandé de consulter la documentation MDN (Mozilla Developer Network) pour explorer les méthodes spécifiques de chaque objet.


// Exemple avec Date
var maintenant = new Date();
console.log(maintenant.getFullYear()); // Année actuelle
console.log(maintenant.getMonth()); // Mois actuel (0-indexé)

// Exemple avec Array
var nombres = [1, 2, 3];
console.log(nombres.join('-')); // "1-2-3"

// Exemple avec String
var phrase = "Apprendre JavaScript";
console.log(phrase.substring(8)); // "JavaScript"

Étiquettes: JavaScript bases syntaxe variables types de données

Publié le 10 septembre à 19h02

Étiquettes Populaires

©2026 L'Atelier Monstre