JavaScript : Fondamentaux et Manipulation DOM

Introduction au JavaScript

Le JavaScript est un langage de script largement utilisé pour rendre les pages web interactives. Il est exécuté côté client, c'est-à-dire par le navigateur web de l'utilisateur.

Ce document, préparé par la Faculté de génie électrique et informatique, Département d'informatique pour l'année 2024/2025, présente les bases du langage JavaScript.

Intégration du JavaScript dans les Pages HTML

Le code JavaScript peut être intégré dans une page HTML de plusieurs manières :

• Directement dans le HTML : En utilisant la balise <script></script>. Le fonctionnement est équivalent à une intégration directe du code JavaScript à cet endroit dans le document.
• Fichier externe : En utilisant l'attribut src de la balise <script> pour lier un fichier JavaScript externe (par exemple, <script src="monScript.js"></script>).

À noter : Quand l'attribut src est utilisé, il ne faut rien écrire entre les balises <script src="..."> et </script>.

Caractéristiques Générales du Langage JavaScript

• Les variables sont faiblement typées.
• Les opérateurs et instructions sont identiques à ceux du C/C++/Java.
• Le JavaScript utilise des objets :
  • Prédéfinis (par exemple, String, Date, Math).
  • Liés à l'environnement : Dans un navigateur, l'objet global est window ; dans Node.js, c'est global. Ces objets ont des propriétés et méthodes spécifiques à leur environnement.
  • Définis par l'utilisateur.
• Le JavaScript utilise des fonctions/procédures :
  • Globales (méthodes associées à tous les objets), comme parseInt() ou isNaN().
  • Méthodes définies dans les prototypes des objets natifs (par exemple, Array.prototype.push(), String.prototype.toUpperCase()).
  • Définies par l'utilisateur.
• Les commentaires sont indiqués par // pour une ligne ou /* ... */ pour les blocs.
• Le séparateur d'instruction est le point-virgule (;).
• L'indentation n'est pas obligatoire, mais fortement recommandée pour la lisibilité.

Variables et Types de Données

Déclaration de Variables

Les variables peuvent être déclarées de plusieurs manières en JavaScript :

• var : Ancien mot-clé pour déclarer des variables. Une bonne pratique depuis ES6 est d'utiliser let ou const.
• let : Introduit avec ES6, il permet de déclarer des variables avec une portée de bloc.
• const : Introduit avec ES6, il est utilisé pour déclarer des constantes (valeurs qui ne changeront pas après leur affectation initiale).

La déclaration est optionnelle mais fortement conseillée. Si une variable n'est pas initialisée, sa valeur sera undefined. Le JavaScript est sensible à la casse.

Typage Dynamique et Faible

• Les variables n'ont aucun type fixe. Leur type est déterminé dynamiquement à l'affectation.
• Cela permet le transtypage (changement de type en cours d'exécution).
• L'opérateur typeof permet de déterminer le type d'une variable.

Exemple de déclaration et d'initialisation :

var chaine = "janvier ";
var anneeNaissance = 2011;
var nonRien; // vaut undefined

Portée des Variables (Scope)

La portée d'une déclaration est la région du programme où l'entité déclarée (variable, objet, fonction) peut être accédée via son identifiant.

En JavaScript, il existe 3 portées principales :

• Globale : Un identifiant défini dans la portée globale est accessible dans tout le script.
  Les variables déclarées avec var en dehors de toute fonction sont ajoutées à l'objet global (window dans les navigateurs).
• Locale (Fonctionnelle) : Un identifiant défini localement est accessible uniquement dans le corps de la fonction où il est déclaré.
  La portée d'une variable déclarée avec var est fonctionnelle.
• Bloc : Un identifiant de variable déclarée avec let ou const dans un bloc ({}) est accessible uniquement dans ce bloc et dans les blocs imbriqués.
  La portée d'une variable déclarée avec let est bloquante.

var vs let : Différence de Portée

La différence entre let et var est liée à leur portée, leur hoisting et leur comportement en cas de redéclaration.

Exemple de portée var :

function creerX() {
    if (true) {
        var x = 0;
    }
    console.log("x à l'intérieur de la fonction avec var dans un bloc : " + x); // affiche 0
}
creerX();
// console.log("Station à l'\"exterieur de la même fonction" + x); // Erreur: x n'est pas défini

Dans cet exemple, x déclaré avec var est accessible en dehors du bloc if mais à l'intérieur de la fonction creerX. Il n'est pas accessible en dehors de la fonction.

Exemple de portée let :

function exampleLet() {
    if (true) {
        let y = 20;
    }
    // console.log('Y de let = ' + y); // Erreur : y n'est pas défini
}
exampleLet();

Ici, y déclaré avec let n'est accessible qu'à l'intérieur du bloc if. Tenter d'y accéder en dehors de ce bloc générera une erreur.

Hoisting des Variables

• var : Les variables déclarées avec var sont hoistées (remontées au début de leur contexte) mais initialisées avec la valeur undefined. On peut les utiliser avant leur déclaration, mais elles contiendront undefined jusqu'à leur initialisation.

  console.log(a); // undefined
  var a = 5;
  

• let : Les variables déclarées avec let sont également hoistées, mais elles ne sont pas initialisées. Tenter d'accéder à une variable let avant sa déclaration entraînera une erreur de référence.

  // console.log(h); // Erreur : h ne peut pas être accédé avant initialisation
  let h = 10;
  

Redéclaration de Variables

• var : Une variable déclarée avec var peut être redéclarée dans le même scope sans erreur.

  var c = 30;
  var c = 40; // Pas d'erreur
  

• let : Une variable déclarée avec let ne peut pas être redéclarée dans le même scope.

  let d = 50;
  d = 60; // Pas d'erreur (réaffectation)
  // let d = 70; // Erreur : d a déjà été déclaré
  

Opérateurs Courants

Voici les opérateurs les plus couramment utilisés en JavaScript :

• Opérateurs arithmétiques : + (addition), - (soustraction), * (multiplication), / (division), % (modulo).
• In/décrémentation : nom_var++, nom_var-- (post-incrémentation/décrémentation), ++nom_var, --nom_var (pré-incrémentation/décrémentation).
• Opérateurs logiques : && (ET), || (OU), ! (NON).
• Comparaisons : == (égalité lâche), != (inégalité lâche), === (égalité stricte), !== (inégalité stricte), <= (inférieur ou égal), < (inférieur), >= (supérieur ou égal), > (supérieur).
• Concaténation de chaîne de caractères : +.
• Affectation : =, +=, -=, *=, etc.

Instructions Conditionnelles

if / else if / else

Permet d'exécuter un bloc de code si une condition est vraie.
Syntaxe :

if (condition) {
    // instructions
} else if (condition) {
    // instructions
} else {
    // instructions
}

Exemple :

let age = 20;
if (age < 18) {
    console.log("Mineur");
} else if (age === 18) {
    console.log("Juste majeur");
} else {
    console.log("Majeur");
}

Opérateur Ternaire (? :)

Une façon concise d'écrire des conditions simples, alternative à if/else pour des cas courts.

Syntaxe :

condition ? expression_si_vrai : expression_si_faux;

Exemple :

let age = 20;
let message = (age < 18) ? "Mineur" : "Majeur";
console.log(message); // Majeur

switch

Utilisée pour comparer une variable ou une expression avec plusieurs cas possibles. Idéal pour des comparaisons multiples de valeur fixe.

Syntaxe :

switch (variable) {
    case "valeur1":
        // instructions
        break;
    case "valeur2":
        // instructions
        break;
    default:
        // instructions (si aucune correspondance)
        break;
}

Exemple :

let fruit = "pomme";
switch (fruit) {
    case "banane":
        console.log("C'est une banane.");
        break;
    case "pomme":
        console.log("C'est une pomme.");
        break;
    case "orange":
        console.log("C'est une orange.");
        break;
    default:
        console.log("Fruit inconnu.");
}
// Retourne "C'est une pomme."

Boucles

for

Utilisée pour exécuter un bloc de code un nombre spécifié de fois.

Syntaxe :

for (initialisation; condition; incrément/décrément) {
    // Code à exécuter
}

Exemple :

for (let i = 0; i < 5; i++) {
    console.log(`i = ${i}`);
}
// i = 0, i = 1, i = 2, i = 3, i = 4

while

Exécute un bloc de code tant qu'une condition spécifiée est vraie.

Syntaxe :

while (condition) {
    // Code à exécuter
}

Exemple :

let i = 0;
while (i < 5) {
    console.log(`i = ${i}`);
    i++;
}
// i = 0, i = 1, i = 2, i = 3, i = 4

do...while

Similaire à while, mais garantit que le bloc de code est exécuté au moins une fois, même si la condition est initialement fausse.

Syntaxe :

do {
    // Code à exécuter
} while (condition);

Exemple :

let i = 0;
do {
    console.log(`i = ${i}`);
    i++;
} while (i < 5);
// i = 0, i = 1, i = 2, i = 3, i = 4

for...of

Itère sur les valeurs d'objets itérables (tableaux, chaînes, objets Set/Map, etc.).

Syntaxe :

for (const valeur of iterable) {
    // Code à exécuter
}

Exemple :

let nombres = [1, 2, 3];
for (let nombre of nombres) {
    console.log(nombre);
}
// 1, 2, 3

Fonctions

Une fonction est un bloc de code réutilisable qui effectue une tâche spécifique.

1. Fonctions Déclarées (Function Declaration)

Les fonctions déclarées sont nommées et disponibles dans tout le scope (grâce au hoisting).

Syntaxe :

function nomDeLaFonction(param1, param2) {
    // Corps de la fonction
    return result;
}

Exemple :

function addition(a, b) {
    return a + b;
}
console.log(addition(3, 4)); // 7

2. Fonctions Expressions (Function Expression)

Une fonction sans nom (anonyme), souvent utilisée dans des expressions ou comme callback.

Syntaxe :

const nomDeLaFonction = function(param1, param2) {
    // Corps de la fonction
    return result;
};

Exemple :

const addition = function(a, b) {
    return a + b;
};
console.log(addition(3, 4)); // 7

3. Fonctions Fléchées (Arrow Function)

Une syntaxe concise introduite avec ES6, souvent utilisée pour des fonctions anonymes.

Syntaxe :

const nomDeLaFonction = (param1, param2) => {
    // Corps de la fonction
    return result;
};

Particularités :

• Sans parenthèses si un seul paramètre : const carre = x => x * x;
• Avec des accolades si le corps contient plusieurs instructions :

  const calcul = (a, b) => {
      console.log(a, b);
      return a + b;
  };
  

• Version concise (retour implicite) : const addition = (a, b) => a + b;

Exemple :

const addition = (a, b) => a + b;
console.log(addition(3, 4)); // 7

Note sur return

Les instructions après un return dans une fonction ne sont pas exécutées, car le mot-clé return termine immédiatement l'exécution de la fonction et renvoie une valeur (ou undefined si aucune valeur n'est spécifiée).

Exemple :

function example() {
    console.log("Avant return");
    return "Valeur retournée";
    console.log("Après return"); // Cette ligne ne sera jamais exécutée
}
let valeur = example(); // affiche "Avant return"
console.log(valeur); // "Valeur retournée"

4. Fonctions en Paramètre (Callback Function)

Une fonction passée en argument à une autre fonction, souvent exécutée après qu'une tâche soit terminée.

Exemple :

function saluer(nom, callback) {
    console.log(`Bonjour ${nom}`);
    callback();
}
saluer("Alice", () => console.log("Callback exécuté !"));
// Affiche : "Bonjour Alice"
// Puis : "Callback exécuté !"

5. Fonction avec Défaut de Paramètres

Les paramètres peuvent avoir des valeurs par défaut si aucune valeur n'est fournie lors de l'appel de la fonction.

Exemple :

function saluer(nom = "Invité") {
    console.log(`Bonjour undefined{expression} pour insérer dynamiquement des valeurs (interpolation de chaîne).
            
Exemple : let nom = 'Ali'; let chaine = `Bonjour, undefined{this.prenom} ${this.nom}`;
    },
    // Méthode pour afficher les informations de la personne
    afficherInfos: function() {
        console.log(`Nom complet : ${this.nomComplet()}`);
        console.log(`Age : ${this.age} ans`);
        console.log(`Email : ${this.email}`);
        console.log(`Adresse : ${this.adresse.rue}, ${this.adresse.ville}, ${this.adresse.pays}`);
        console.log(`Hobbies : ${this.hobbies.join(', ')}`);
    }
};

// Appel des méthodes de l'objet
personne.afficherInfos();

Stockage Local (Web Storage API)

sessionStorage et localStorage sont deux objets en JavaScript permettant de stocker des données dans le navigateur.

Différence Principale : Durée de Stockage

• sessionStorage : Les informations sont gardées en mémoire uniquement le temps d'une session. Elles sont effacées lorsque l'onglet ou le navigateur est fermé (données temporaires).
  • Exemple d'utilisation : État temporaire d'un formulaire.
• localStorage : Les données sont disponibles tant et aussi longtemps que l'usager ne les efface pas (données persistantes).
  • Exemple d'utilisation : Préférences utilisateur (thème sombre, langue), données de panier d'achat.

Remarque : sessionStorage et localStorage ne sont pas partagés entre différentes applications web, même si elles utilisent le même nom de variable. Chaque application (ou site web) a son propre espace de stockage qui est isolé par origine (ou domaine).

Méthodes de Web Storage

• setItem(clé, valeur) : Permet de sauvegarder des informations dans l'objet de stockage choisi. La valeur est toujours stockée comme une chaîne.

  sessionStorage.setItem('username', 'Ali');
  localStorage.setItem('theme', 'dark');
  

• getItem(clé) : Permet de récupérer une information stockée dans le navigateur. Il n'accepte qu'un seul paramètre, le nom de la clé. Retourne null si la clé n'existe pas.

  const localUser = localStorage.getItem('username'); // Récupère la valeur associée à 'username'
  

• removeItem(clé) : Permet de supprimer une clé spécifique de l'objet de stockage.

  localStorage.removeItem('username'); // Supprime la clé 'username'
  

• clear() : Efface toutes les informations sauvegardées dans l'objet de stockage. Ne prend aucun paramètre.

  sessionStorage.clear(); // Efface toutes les données de sessionStorage
  

Boîtes de Dialogue d'Interaction (Prompts)

Les boîtes de dialogue prompt permettent de demander une saisie à l'utilisateur.

Exemple de prompt pour la table de multiplication :

<script>
function affTable(n) {
    document.write('<h1>Table de multiplication du nombre : ' + n + '</h1>');
    document.write('<table border="1">');
    document.write('<tr><th>Opération</th><th>Résultat</th></tr>');
    for (let i = 1; i <= 10; i++) {
        document.write('<tr><td>' + i + ' x ' + n + '</td><td>' + (i * n) + '</td></tr>');
    }
    document.write('</table>');
}

var n = prompt('Veuillez saisir un nombre :', '5');
while (isNaN(n) || n === "" || n === null) { // Vérifie si ce n'est pas un nombre, vide ou Annuler
    n = prompt('Veuillez saisir un nombre valide :', '5');
}
affTable(parseInt(n));
</script>

Cet exemple utilise prompt() pour obtenir un nombre et isNaN() pour valider que la saisie est bien un nombre. La fonction affTable génère et affiche une table HTML.

Application : Affichage de Carrés d'Étoiles

Un script JavaScript peut lire un nombre saisi par l'intermédiaire d'une boîte de dialogue et afficher des carrés d'étoiles basés sur ce nombre.

Pour cet exercice, il faut :

1. Utiliser prompt() pour la saisie.
2. Utiliser des boucles pour générer le dessin d'étoiles.
3. Afficher le résultat dans une table HTML.
4. Utiliser des fonctions pour structurer le code.

Conclusion

Ce cours a couvert les concepts fondamentaux du langage JavaScript, de la déclaration des variables aux interactions avec le DOM et la gestion des événements. La compréhension de ces concepts est essentielle pour développer des applications web dynamiques et interactives.