Suite des concepts de base en JavaScript

Switch...case

Le switch...case est une structure de contrôle qui permet de simplifier la gestion de multiples conditions basées sur la valeur d'une variable. Il est souvent utilisé comme une alternative aux longues chaînes de if...else if...else.

Voici un exemple d'utilisation du switch...case en JavaScript :

let jour = 3;
let nomDuJour;  
switch (jour) {
  case 1:
    nomDuJour = "Lundi";
    break;
  case 2:
    nomDuJour = "Mardi";
    break;
  case 3:
    nomDuJour = "Mercredi";
    break;
  case 4:
    nomDuJour = "Jeudi";
    break;
  case 5:
    nomDuJour = "Vendredi";
    break;
  case 6:
    nomDuJour = "Samedi";
    break;
  case 7:
    nomDuJour = "Dimanche";
    break;
  default:
    nomDuJour = "Jour invalide";
}
console.log(nomDuJour); // Affiche "Mercredi"

Voici comment cela fonctionne :

• La variable jour est évaluée dans le switch.
• Chaque case correspond à une valeur possible de jour.
• Si jour correspond à une valeur de case, le code associé est exécuté jusqu'au break. Si on omet le break, l'exécution continue dans les cases suivantes (ce qu'on appelle le "fall-through").
• Le default est exécuté si aucune des valeurs de case ne correspond.

Il aurait été possible d'utiliser des if...else if...else, mais le switch fonctionne tout aussi bien dans ce cas.

Voici le même exemple avec des if...else if...else :

let jour = 3;
let nomDuJour;  
if (jour === 1) {
  nomDuJour = "Lundi";
} else if (jour === 2) {
  nomDuJour = "Mardi";
} else if (jour === 3) {
    nomDuJour = "Mercredi";
} else if (jour === 4) {
    nomDuJour = "Jeudi";
} else if (jour === 5) {
    nomDuJour = "Vendredi";
} else if (jour === 6) {
    nomDuJour = "Samedi";
} else if (jour === 7) {
    nomDuJour = "Dimanche";
} else {
    nomDuJour = "Jour invalide";
}
console.log(nomDuJour); // Affiche "Mercredi"

Boucles

For

La boucle for est utilisée pour répéter un bloc de code un nombre spécifique de fois. Elle est particulièrement utile lorsque le nombre d'itérations est connu à l'avance.

Comment cela se présente :

for(/* initialisation de la variable */; /* condition de fin */; /* changement de la variable pour atteindre la condition de fin */) {
    // bloc d'instructions à répéter
}

Voici un exemple de boucle for en JavaScript :

for (let i = 0; i < 5; i + 1) {
    console.log("Itération numéro : " + i);
}

On peut également utiliser la notation ++ pour incrémenter la variable i :

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

While

La boucle while est utilisée pour répéter un bloc de code tant qu'une condition spécifiée est vraie. Elle est utile lorsque le nombre d'itérations n'est pas connu à l'avance et dépend d'une condition dynamique. Comment cela se présente :

while (/* condition qui doit être vraie pour exécuter le bloc d'instruction de la boucle */) {
    // bloc d'instructions à répéter
}

Voici un exemple de boucle while en JavaScript :

let compteur = 0;
while (compteur < 5) {
    console.log("Itération numéro : " + compteur);
    compteur++;
}

Do...while

La boucle do...while est similaire à la boucle while, mais elle garantit que le bloc de code sera exécuté au moins une fois avant de vérifier la condition. La condition est évaluée après l'exécution du bloc de code. Comment cela se présente :

do {
    // bloc d'instructions à répéter
} while (/* condition qui doit être vraie pour continuer à exécuter le bloc d'instruction */);

Voici un exemple de boucle do...while en JavaScript :

let compteur = 0;
do {
    console.log("Itération numéro : " + compteur);
    compteur++;
} while (compteur < 5);

Tout dépendant de la situation, choisissez la boucle qui convient le mieux à vos besoins ! 😉

Fonctions

Une fonction sert à regrouper un ensemble d'instructions que l'on peut réutiliser plusieurs fois dans notre code. Cela permet de rendre le code plus organisé, plus lisible et plus facile à maintenir. Aussi, les fonctions permettent de réduire la duplication de code en encapsulant des comportements réutilisables. Voici comment déclarer une fonction en JavaScript :

function nomDeLaFonction(parametre1, parametre2) {
    // bloc d'instructions
    return resultat; // optionnel
}

A noté que :

• nomDeLaFonction est le nom que vous donnez à votre fonction. Elle doit être écrite en camelCase (débutant par une minuscule et chaque mot suivant commence par une majuscule).
• parametre1, parametre2, etc. sont des variables qui servent à passer des valeurs à la fonction. Elles sont optionnelles.
• Le mot-clé return est utilisé pour renvoyer une valeur depuis la fonction. Il est également optionnel. S’il ne s'est pas présent, la fonction renverra undefined par défaut.

Truc 💡

Cela peut être pertinent de ne pas mettre de return si la fonction effectue une action sans avoir besoin de renvoyer une valeur (par exemple, afficher un message dans la console).

Voici un exemple de fonction en JavaScript :

function additionner(a, b) {
    return a + b;   
}
let resultat = additionner(5, 3);
console.log(resultat); // Affiche 8

Ici, il se passe :

• La fonction additionner est définie avec deux paramètres a et b.
• Lorsqu'on appelle la fonction avec additionner(5, 3), les valeurs 5 et 3 sont passées aux paramètres a et b.
• La fonction calcule la somme de a et b, puis renvoie le résultat avec le mot-clé return.
• Le résultat est stocké dans la variable resultat et affiché dans la console.

Voici un autre exemple de fonction sans paramètres et sans return :

function afficherMessage() {
    console.log("Bonjour, ceci est un message !");
}
afficherMessage(); // Affiche "Bonjour, ceci est un message !"

Dans cet exemple, la fonction afficherMessage n'a pas de paramètres et ne renvoie pas de valeur. Elle affiche simplement un message dans la console lorsqu'elle est appelée.

DANGER

Le type des variables que la fonction reçoit n'est pas garanti. Il peut être une bonne pratique de tester les paramètres en début de fonction. Par exemple :

function additionner(a, b) {
    if (typeof a !== 'number' || typeof b !== 'number') {
        throw new Error('Les paramètres doivent être des nombres.');
    }
    return a + b;   
}

Variables vs constantes

Variables

En JavaScript, les variables et les constantes sont utilisées pour stocker des valeurs, mais elles ont des comportements différents.

Pour ce qui est des variables, on utilise le mot-clé let. Il se peut que vous voyiez var si vous avez fait quelques recherches sur internet, mais let c’est la façon moderne et recommandée de déclarer des variables en JavaScript.

La raison est fort simple : les variables déclarées avec let ont une portée de bloc, ce qui signifie qu'elles ne sont accessibles que dans le bloc où elles sont définies (par exemple, à l'intérieur d'une fonction ou d'une boucle). Cela aide à éviter les conflits de noms et les erreurs inattendues. À l'inverse, var a une portée de fonction (ou fichier), ce qui peut entraîner des comportements imprévisibles.

Voici un exemple montrant la différence entre let et var à l'aide d'une boucle : Avec let :

for (let i = 0; i < 3; i++) {
    console.log(i); // Affiche 0, 1, 2
}
console.log(i); // Erreur : i n'est pas défini

Voici le même exemple avec var :

for (var j = 0; j < 3; j++) {
    console.log(j); // Affiche 0, 1, 2
}
console.log(j); // Affiche 3

En gros, utilisez toujours let pour déclarer des variables.

Constantes

Les constantes sont déclarées avec le mot-clé const. Une fois qu'une constante est assignée à une valeur, cette valeur ne peut pas être modifiée. Cela signifie que vous ne pouvez pas réassigner une nouvelle valeur à une constante après sa déclaration.

Voici un exemple de déclaration et d'utilisation d'une constante en JavaScript :

const ANNEE = "2026";
console.log(ANNEE); // Affiche 2026
ANNEE = "2025"; // Erreur : Assignment to constant variable.

Dans cet exemple ANNEE est une constante qui stocke la valeur de l'année. Toute tentative de réassigner une nouvelle valeur à ANNEE entraînera une erreur.

Truc 💡

Il peut s'avérer intéressant d'utiliser des const en tout temps et de changer pour let seulement lorsque nécessaire. Cela permet de signaler clairement quelles valeurs sont censées rester constantes tout au long du code, ce qui peut aider à prévenir les erreurs accidentelles de réassignation.

Tableaux

Premièrement, voici quelques lectures intéressantes en lien avec ce qui va suivre :

• https://www.w3schools.com/js/js_arrays.asp
• https://www.w3schools.com/js/js_array_methods.asp
• https://www.w3schools.com/js/js_array_sort.asp
• https://www.w3schools.com/js/js_array_iteration.asp
• https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array

Un tableau (ou array en anglais) est une structure de données qui permet de stocker une collection d'éléments. Chaque élément dans un tableau est accessible via un index, qui est un nombre entier représentant la position de l'élément dans le tableau.

En JavaScript, les tableaux sont dynamiques, ce qui signifie que leur taille peut changer au cours de l'exécution du programme.

Voici comment déclarer un tableau en JavaScript :

let monTableau = [];

On peut également initialiser un tableau avec des valeurs dès sa déclaration :

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

Chaque élément du tableau peut être accédé en utilisant son index, qui commence à 0. Par exemple, pour accéder au premier élément du tableau fruits, on utilise fruits[0] :

let fruits = ["pomme", "banane", "orange"];
console.log(fruits[0]); // Affiche "pomme"

Il sera également possible d'ajouter un élément à partir de l'index :

let fruits = ["pomme", "banane", "orange"];
fruits[3] = "raisin";
console.log(fruits); // Affiche ["pomme", "banane", "orange", "raisin"]

Information ❗

Notez que si on met un index plus grand, il y aura une valeur vide pour compenser :

let fruits = ["pomme", "banane", "orange"];
fruits[5] = "kiwi";
console.log(fruits); // Affiche ["pomme", "banane", "orange", undefined, undefined, "kiwi"]

Truc 💡

De façons générales, lorsque l'on nomme un tableau, on va mettre le nom de la variable au pluriel. Par exemple, si on a un tableau de fruits, on va l'appeler fruits et non fruit. Vous pouvez également le précéder d'un préfixe comme tab ou array pour indiquer qu'il s'agit d'un tableau, par exemple tabFruits.

Fonctions et propriétés d'un tableau

Voici quelques fonctions et propriétés couramment utilisées avec les tableaux en JavaScript :

• length : Propriété qui renvoie le nombre d'éléments dans le tableau.

let fruits = ["pomme", "banane", "orange"];
console.log(fruits.length); // Affiche 3

• push(element) : Méthode qui ajoute un élément à la fin du tableau.

let fruits = ["pomme", "banane"];
fruits.push("orange");
console.log(fruits); // Affiche ["pomme", "banane", "orange"]

• pop() : Méthode qui supprime le dernier élément du tableau et le renvoie.

let fruits = ["pomme", "banane", "orange"];
let dernierFruit = fruits.pop();
console.log(dernierFruit); // Affiche "orange"
console.log(fruits); // Affiche ["pomme", "banane"]

• shift() : Méthode qui supprime le premier élément du tableau et le renvoie.

let fruits = ["pomme", "banane", "orange"];
let premierFruit = fruits.shift();
console.log(premierFruit); // Affiche "pomme"
console.log(fruits); // Affiche ["banane", "orange"]

• unshift(element) : Méthode qui ajoute un élément au début du tableau.

let fruits = ["banane", "orange"];
fruits.unshift("pomme");
console.log(fruits); // Affiche ["pomme", "banane", "orange"]

• indexOf(element) : Méthode qui renvoie l'index de la première occurrence d'un élément dans le tableau, ou -1 si l'élément n'est pas trouvé.

let fruits = ["pomme", "banane", "orange"];
let index = fruits.indexOf("banane");
console.log(index); // Affiche 1

• join : Méthode qui combine tous les éléments d'un tableau en une seule chaîne de caractères, en utilisant un séparateur spécifié.

let fruits = ["pomme", "banane", "orange"];
let chaine = fruits.join(", ");
console.log(chaine); // Affiche "pomme, banane, orange"

• sort() : Méthode qui trie les éléments du tableau en place et renvoie le tableau trié.

let nombres = [3, 1, 4, 1, 5];
nombres.sort();
console.log(nombres); // Affiche [1, 1, 3, 4, 5]

Attention ⚠

sort() trie en transformant les valeurs en string. Cela cause un problème en autre avec les nombres.

let nombres = [10, 2, 30, 4, 5];
nombres.sort();
console.log(nombres); // Affiche [10, 2, 30, 4, 5]

Voir la section du Tri avancé pour régler ce problème

• reverse() : Méthode qui inverse l'ordre des éléments dans le tableau.

let fruits = ["pomme", "banane", "orange"];
fruits.reverse();
console.log(fruits); // Affiche ["orange", "banane", "pomme"]

• slice(debut, fin) : Méthode qui renvoie une copie superficielle d'une portion du tableau, allant de l'index start à l'index end (non inclus).

let fruits = ["pomme", "banane", "orange", "kiwi"];
let sousTableau = fruits.slice(1, 3);
console.log(sousTableau); // Affiche ["banane", "orange"]

• splice(index, nombreASupprimer, element1, element2, ...) : Méthode qui modifie le tableau en ajoutant ou supprimant des éléments à partir d'un index spécifié. La fonction splice retourne également un tableau contenant les éléments supprimés.

let fruits = ["pomme", "banane", "orange"];
fruits.splice(1, 1, "kiwi", "mangue"); // Remplace "banane" par "kiwi" et "mangue"
console.log(fruits); // Affiche ["pomme", "kiwi", "mangue", "orange"]

Tableaux multidimensionnels

Un tableau multidimensionnel est un tableau qui contient d'autres tableaux en tant qu'éléments. Cela permet de créer des structures de données plus complexes, comme des matrices ou des tableaux de tableaux. Voici comment déclarer un tableau multidimensionnel en JavaScript :

let matrice = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

Chaque élément du tableau principal est lui-même un tableau. Pour accéder aux éléments individuels, vous devez utiliser deux indices : le premier pour le tableau principal et le second pour l'élément dans le sous-tableau. Voici un exemple d'accès aux éléments d'un tableau multidimensionnel :

let matrice = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];
console.log(matrice[0][0]); // Affiche 1
console.log(matrice[1][2]); // Affiche 6
console.log(matrice[2][1]); // Affiche 8

Ce qu’il faut retenir, c'est qu'un tableau multidimensionnel est simplement un tableau contenant d'autres tableaux, et vous pouvez accéder aux éléments en utilisant plusieurs indices.

L'avantage de JavaScript est qu'appeler un index d'un tableau qui n'existe pas (undefined), ça ne lance pas d'exception. On peut en profiter pour initialiser la valeur!

Par exemple, si l'on veut mettre à 0 les valeurs de notre tableau multidimensionnel, on peut faire comme suit :

let matrice = [];
for (let i = 0; i < 3; i++) {
    matrice[i] = []; // Initialisation de chaque ligne
    for (let j = 0; j < 3; j++) {
        matrice[i][j] = 0; // Initialisation de chaque élément à 0
    }
}
console.log(matrice);
// Affiche [[0, 0, 0],
//          [0, 0, 0],
//          [0, 0, 0]]

Cela ne créera pas d'erreur, car matrice[i] est undefined au début, mais on peut lui assigner un tableau vide [] avant d'accéder à matrice[i][j].

Attention ⚠

Notez que si on n'initialise pas la matrice pour chaque ligne (matrice[i] = [];).

Appeler matrice[i][j] va échouer, car un élément undefined (matrice[i]) qui appelle un autre élément undefined ([j]) lance une exception.

Tri avancé

Pour trier correctement des nombres, vous pouvez fournir une fonction de comparaison à la méthode sort(). Cette fonction prend deux arguments (a et b) et doit renvoyer :

• Un nombre négatif si a doit être trié avant b.
• Zéro si a et b sont égaux en termes de tri.
• Un nombre positif si a doit être trié après b. Voici comment trier un tableau de nombres en ordre croissant :

let nombres = [10, 2, 30, 4, 5];
nombres.sort(function(a, b) {
    return a - b; // Tri en ordre croissant
});
console.log(nombres); // Affiche [2, 4, 5, 10, 30]

Et voici comment trier un tableau de nombres en ordre décroissant :

let nombres = [10, 2, 30, 4, 5];
nombres.sort(function(a, b) {
    return b - a; // Tri en ordre décroissant
});
console.log(nombres); // Affiche [30, 10, 5, 4, 2]

ForEach

Afin de faire un forEach sur un tableau, nous allons utiliser ce que j'appelle un for...of. Voici comment cela se présente :

for (let element of monTableau) {
    // bloc d'instructions utilisant element
}

De cette manière, nous allons pouvoir boucler à travers chaque élément de notre tableau sans avoir besoin de gérer un index.

Exercice - Tableaux et boucles

Afin de vous familiariser avec les tableaux et leur méthode, tester les méthodes ci-haut en changeant les valeurs.

Ensuite, réalisez l'exercice suivant :

1. Créez un tableau appelé nombres qui contient les nombres de 1 à 10.
2. Utilisez une boucle for pour afficher chaque nombre du tableau dans la console.
3. Utilisez une boucle for...of pour calculer la somme de tous les nombres dans le tableau et affichez le résultat dans la console.
4. Ajoutez un nombre supplémentaire (11) à la fin du tableau en utilisant la méthode push().
5. Trier ce tableau en ordre décroissant en utilisant la méthode sort() avec une fonction de comparaison appropriée.

Solution ✅

// Étape 1
let nombres = [1,2,3,4,5,6,7,8,9,10];
// Étape 2
for (let i = 0; i < nombres.length; i++) {
    console.log(nombres[i]);
}
// Étape 3
let somme = 0;
for (let nombre of nombres) {
    somme += nombre;
}
console.log("La somme est : " + somme); // Affiche 55
// Étape 4
nombres.push(11);
// Étape 5
nombres.sort(function(a, b) {
    return b - a; // Tri en ordre décroissant
});
console.log(nombres); // Affiche [11,10,9,8,7,6,5,4,3,2,1]

String

Voici à titre de référence un site intéressant expliquant les différentes méthodes disponibles pour les strings en JavaScript.

Les strings en JavaScript possèdent plusieurs méthodes intéressantes. En voici quelques-unes :

• length : Propriété qui renvoie le nombre de caractères dans la chaîne.

let texte = "Bonjour";
console.log(texte.length); // Affiche 7

• toUpperCase() : Méthode qui renvoie une nouvelle chaîne avec tous les caractères en majuscules.

let texte = "Bonjour";
let texteMajuscules = texte.toUpperCase();
console.log(texteMajuscules); // Affiche "BONJOUR"

• toLowerCase() : Méthode qui renvoie une nouvelle chaîne avec tous les caractères en minuscules.

let texte = "Bonjour";
let texteMinuscules = texte.toLowerCase();
console.log(texteMinuscules); // Affiche "bonjour"

• indexOf(substring) : Méthode qui renvoie l'index de la première occurrence d'une sous-chaîne dans la chaîne, ou -1 si la sous-chaîne n'est pas trouvée.

let texte = "Bonjour le monde";
let index = texte.indexOf("le");
console.log(index); // Affiche 8

• lastIndexOf(substring) : Méthode qui renvoie l'index de la dernière occurrence d'une sous-chaîne dans la chaîne, ou -1 si la sous-chaîne n'est pas trouvée.

let texte = "Bonjour le monde, le monde est beau";
let index = texte.lastIndexOf("le");
console.log(index); // Affiche 20

• substring(start, end) : Méthode qui renvoie une sous-chaîne extraite de la chaîne, allant de l'index start à l'index end (non inclus).

let texte = "Bonjour le monde";
let sousChaine = texte.substring(8, 10);
console.log(sousChaine); // Affiche "le"

• replace(oldSubstring, newSubstring) : Méthode qui remplace la première occurrence d'une sous-chaîne par une nouvelle sous-chaîne.

let texte = "Bonjour le monde";
let nouveauTexte = texte.replace("monde", "univers");
console.log(nouveauTexte); // Affiche "Bonjour le univers"

Tranche de vie

Souvent lors de ma carrière, j'ai du utiliser la méthode replaceAll pour remplacer le . par une , dans des nombres décimaux. Par exemple, pour afficher un nombre avec une virgule au lieu d'un point décimal. Cela risque de vous arriver souvent aussi 😉.

• trim() : Méthode qui supprime les espaces blancs au début et à la fin de la chaîne.

let texte = "   Bonjour le monde   ";
let texteTrimmed = texte.trim();
console.log(texteTrimmed); // Affiche "Bonjour le monde"

• split(separator) : Méthode qui divise la chaîne en un tableau de sous-chaînes, en utilisant le séparateur spécifié.

let texte = "Bonjour,le,monde";
let tableauMots = texte.split(",");
console.log(tableauMots); // Affiche ["Bonjour", "le", "monde"]

Exercice - Strings

Afin de pratiquer les différentes méthodes de string vues jusqu'à maintenant, essayez de créer un programme JavaScript qui fait ce qui suit :

1. Demandez à l'utilisateur de saisir une phrase.
2. Affichez le nombre de caractères dans la phrase.
3. Convertir la phrase en majuscules et l'afficher.
4. Dans la phrase suivante "je suis un admirateur de JavaScript et je veux en apprendre sur le JavaScript à tous les jours. Vive le JavaScript", effectuez les actions suivantes :
   • Trouvez et affichez l'index de la première occurrence du mot "JavaScript" dans la phrase.
   • À l'aide de méthode, affichez-moi "JavaScript" à partir de l'index trouvé précédemment.
   • Extraire et afficher les 5 premiers caractères de la phrase.
   • Remplacez toutes les occurrences du mot "JavaScript" par "C" dans la phrase et affichez le résultat.

Solution ✅

const readline = require('readline-sync');
// Étape 1
let phrase = readline.question("Veuillez saisir une phrase :");
// Étape 2
console.log("Nombre de caractères : " + phrase.length);
// Étape 3
let phraseMajuscules = phrase.toUpperCase();
console.log("Phrase en majuscules : " + phraseMajuscules);
// Étape 4
let phrase2 = "je suis un fan de JavaScript et je veux en apprendre le JavaScript à tous les jours. Vive le JavaScript";
// Trouver l'index de la première occurrence
let index = phrase2.indexOf("JavaScript");
console.log("Index de la première occurrence de 'JavaScript' : " + index);
// Afficher "JavaScript" a partir de l'index trouvé
let motJavaScript = phrase2.substring(index, index + "JavaScript".length);
console.log("Mot trouvé : " + motJavaScript);   
// Extraire les 5 premiers caractères
let premiersCaracteres = phrase2.substring(0, 5);
console.log("Les 5 premiers caractères : " + premiersCaracteres);
// Remplacer toutes les occurrences de "JavaScript" par "C"
let nouvellePhrase = phrase2.replaceAll("JavaScript", "C");
console.log("Phrase après remplacement : " + nouvellePhrase);

Math

Comme java, JavaScript possède une bibliothèque mathématique intégrée appelée Math. Elle fournit des constantes et des fonctions pour effectuer des opérations mathématiques courantes.

Référez-vous à cette documentation pour plus de détails.

Objets

Un objet est une collection de propriétés, où chaque propriété est une paire clé-valeur. Les objets sont utilisés pour représenter des entités complexes et organiser les données de manière structurée. Voici comment déclarer un objet en JavaScript :

let enseignant = {
    nom: "Jean",
    prenom: "Marc-Antoine"
};

Truc 💡

L'utilisation des {} indique que nous créons un objet. Chaque propriété de l'objet est définie par une clé (par exemple, nom, prenom) suivie de deux-points et de la valeur associée (par exemple, "Jean", "Marc-Antoine"). Les propriétés sont séparées par des virgules.

Attributs

Si on reprend l'exemple de l'objet enseignant, les variables nom et prenom sont des attributs de l'objet enseignant. On peut y accéder de deux façons différentes :

let enseignant = {
    nom: "Jean",
    prenom: "Marc-Antoine"
};
// Accès aux attributs
console.log(enseignant.nom); // Affiche "Jean"
console.log(enseignant['prenom']); // Affiche "Marc-Antoine"

Il est également possible de naviguer à travers les attributs d'un objet avec ce que j'appelle un for...in :

let enseignant = {
    nom: "Jean",
    prenom: "Marc-Antoine"
};
for (let attribut in enseignant) {
    console.log(attribut + ": " + enseignant[attribut]);
}
// Affiche:
// nom: Jean
// prenom: Marc-Antoine

Truc 💡

Notez que pour créer un objet en JavaScript, on n'a pas besoin de définir de classe.

Méthodes

Les méthodes sont des fonctions qui sont définies à l'intérieur d'un objet et qui peuvent être appelées en utilisant la syntaxe de l'objet. Voici comment ajouter une méthode à un objet en JavaScript :

let enseignant = {
    nom: "Jean",
    prenom: "Marc-Antoine",
    saluer: function() {
        console.log("Bonjour, je m'appelle " + this.prenom + " " + this.nom);
    }
};

// Pour l'utiliser
enseignant.saluer(); // Affiche "Bonjour, je m'appelle Marc-Antoine Jean"

Autres types d'objets

Un objet JavaScript pourra contenir une multitude de types différents, y compris des tableaux et d'autres objets. Voici un exemple d'objet contenant un tableau et un autre objet :

let classe = {
    nom: "420-2W1-DM",
    enseignant: {
        nom: "Jean",
        prenom: "Marc-Antoine"
    },
    etudiants: ["Marc", "Antoine", "Jean"],
    estEnVie: true,
};

C'est juste magique ! 🧙

Notion importante ❗

JSON (JavaScript Object Notation) est un format de données léger utilisé pour échanger des données entre un serveur et une application web. Il est basé sur une syntaxe similaire à celle des objets JavaScript, mais avec quelques différences importantes :

• Les clés doivent être des chaînes de caractères entourées de guillemets doubles.
• Les valeurs peuvent être des chaînes de caractères, des nombres, des objets, des tableaux, des booléens (true/false) ou null. Voici un exemple de données au format JSON :

{
    "nom": "Jean",
    "prenom": "Marc-Antoine",
    "estEnseignant": true,
    "matières": ["Informatique"],
    "adresse": {
        "rue": "123 Rue Principale",
        "ville": "Drummondville",
        "codePostal": "J2C 4P6"
    }
}

Nous allons en reparler plus tard durant la session, mais c'est important de garder cela en tête!

Exercice

Afin de pratiquer les différents concepts vus jusqu'à maintenant, essayez de créer un programme JavaScript qui fait ce qui suit :

1. Crée un tableau pour stocker les noms des étudiants dans une classe.

2. Ajoute au moins cinq noms d'étudiants au tableau.

3. Affiche le nombre total d'étudiants dans la classe.

4. Trie les noms des étudiants par ordre décroissant. (Petit défi : Assurez-vous que le tri est insensible à la casse)

5. Affiche la liste triée des noms des étudiants.

6. Ensuite, nous allons créer un objet pour représenter un enseignant avec les propriétés suivantes :

   • nom
   • prenom
   • matieresEnseignees (un tableau de matières)
   • une méthode saluer() qui affiche un message de salutation incluant le nom et le prénom de l'enseignant.
   • étudiants (le tableau des étudiants créé précédemment)
   • une méthode estMultidisciplinaire() qui retourne true si l'enseignant enseigne plus d'une matière, sinon false.

7. Puis, faites afficher dans la console le résultat suivant :

   L'enseignant [prenom] [nom] enseigne les matières suivantes : [liste des matières].
   Il a [nombre d'étudiants] étudiants dans sa classe.
   Est-il multidisciplinaire ? [true/false]

8. Par la suite, effectuer les opérations suivantes :

   • Demander à l'utilisateur de saisir une matière supplémentaire que l'enseignant va enseigner et l'ajouter au tableau des matières.
   • Demandé à l'utilisateur de saisir le nom d'un nouvel étudiant et l'ajouter au tableau des étudiants. Assurez-vous ensuite de trier en ordre décroissant le tableau des étudiants après l'ajout.
     • Ensuite, afficher le tableau des étudiants et celui dans l'objet enseignant pour vérifier que les deux sont à jour. Est-ce le cas?
   • Afficher de nouveau si l'enseignant est multidisciplinaire ou non.
   • S'il est multidisciplinaire, afficher les matières enseignées à l'aide d'une boucle.

Nous reviendrons sur le solutionnaire plus tard dans le cours d'auj!