Introduction au JavaScript

Histoire et contexte

JavaScript a été créé afin de rendre les pages web interactives. Il est faiblement typé et interprété. Il ne nécessite pas de compilation.

Rappel❗

Les navigateurs web comprennent les langages suivants :

• HTML : Structure du site web
• CSS : Mise en forme du site web
• JavaScript : Comportement du site web

Seulement le HTML est obligatoire pour qu'une page web fonctionne. Le CSS et le JavaScript sont optionnels, mais ajoutent des fonctionnalités importantes et intéressantes.

Bien que nous allons faire du HTML et CSS, le but de ce cours est de se concentrer sur le JavaScript et d'approfondir nos connaissances dans ce langage.

Fonctionnement du web

Voici un résumé de comment fonctionne le web :

1. Écrire l'adresse d'un site web dans la barre de votre navigateur web
2. Cela envoie un message au serveur web pour obtenir une page
3. Le serveur web retourne la page HTML
4. Le navigateur analyse la page HTML
5. Le navigateur demande les dépendances au serveur web (CSS, JavaScript, images)
6. Le navigateur interprète la page web et l'affiche
7. À partir de ce moment, des interactions sont possibles sur la page web sur le navigateur du client avec l'aide JavaScript Ce qu'il faut comprendre, c'est qu'une fois que le serveur nous a envoyé la page web, tout se passe du côté client. Le JavaScript va modifier la page du client et non la page de tous les clients.^[1]

Un petit vidéo qui explique certaines notions du Web : https://www.youtube.com/watch?v=dYgNvn98Nag

Montée en puissance de JavaScript

JavaScript a connu une montée en puissance significative au fil des années, devenant l'un des langages de programmation les plus populaires et polyvalents dans le développement web. Initialement conçu pour ajouter de l'interactivité aux pages web, JavaScript a évolué pour devenir un langage complet capable de gérer des applications web complexes, des serveurs, et même des applications mobiles.

C'est en 2009, avec la sortie de Node.js, que JavaScript a fait un bond en avant majeur. Node.js a permis aux développeurs d'utiliser JavaScript côté serveur, ouvrant la voie à des applications web complètes écrites entièrement en JavaScript. Cela a conduit à une adoption massive de JavaScript dans le développement backend, en plus de son utilisation traditionnelle côté client. Par la suite, l'émergence de frameworks et bibliothèques JavaScript tels que React, Angular, et Vue.js a révolutionné la manière dont les applications web sont construites. Ces outils ont simplifié le développement d'interfaces utilisateur complexes et réactives, rendant JavaScript encore plus attrayant pour les développeurs. Il est même possible de faire des applications de bureau comme Discord avec les technologies du web (electron.js).

Attention ⚠

JavaScript n'est pas à confondre avec Java, qui est un langage de programmation complètement différent. Malgré la similarité de leurs noms, JavaScript et Java ont des syntaxes, des usages et des environnements d'exécution distincts.

Syntaxe et Base du langage

Truc 💡

Rappel - Installation des outils nécessaires

Au besoin, veuillez vous référer à la section Installation des outils nécessaires pour installer Node.js et un éditeur de code.

Utilisation des points-virgules

En JavaScript, le point-virgule (;) est utilisé pour marquer la fin d'une instruction. Même s'il est facultatif, j'exige son utilisation dans ce cours pour éviter toute ambiguïté et améliorer la lisibilité du code.

Les commentaires

Commentaire en JavaScript :

// Ceci est un commentaire sur une seule ligne

/* Ceci est un commentaire
sur plusieurs lignes */

Les variables

Truc 💡

Une variable est un conteneur qui contient une information pouvant évoluer à travers le temps. Généralement, une variable traverse ces 3 étapes ^[1:1] :

• Déclaration : On déclare la variable en lui donnant un nom.
• Initialisation : On assigne une valeur à la variable.
• Utilisation : On utilise la variable dans notre code.

let maVariable = 10; // Variable modifiable
var ancienneVariable = 30; // Ancienne façon de déclarer une variable (à ÉVITER). 
// Nous allon voir plus tard la différence entre les 2.

Mais où est le type?? 😱

JavaScript est un langage faiblement typé, ce qui signifie que vous n'avez pas besoin de spécifier le type de données lors de la déclaration d'une variable. Le type est déterminé automatiquement en fonction de la valeur assignée à la variable. Par exemple :

let nombre = 42; // Type number
let texte = "Bonjour"; // Type string
let estVrai = true; // Type boolean

Déclaration

let x; // Déclaration d'une variable sans initialisation

Initialisation

x = 5; // Initialisation de la variable

// Ou

let y = 10; // Déclaration et initialisation en une seule ligne

Nomenclature des variables

• Utiliser le camelCase pour nommer les variables (exemple : maVariableImportante). Le camelCase commence par une lettre minuscule et chaque mot suivant commence par une majuscule.
• Les noms de variables doivent commencer par une lettre, un underscore (_) (cas précis) ou un dollar ($) (cas précis).
• Éviter d'utiliser des mots réservés du langage (comme if, for, while, etc.) comme noms de variables.
• Utiliser des noms descriptifs qui reflètent le contenu ou l'objectif de la variable.

Seulement les classes seront en PascalCase (exemple : MaClasseImportante).

Votre première application JavaScript

Dans un nouveau dossier nommé Web2, créez un dossier nommé hello-world. Ensuite, assurez-vous de suivre les étapes suivantes :

1. Ouvrez votre dossier hello-world dans votre éditeur de code.'
2. Créer un fichier index.js avec le code suivant :

let message = "Hello, World!";
console.log(message);

3. Ouvrez votre terminal dans le dossier hello-world et exécutez la commande suivante pour lancer votre application JavaScript :

node index.js

4. Vous devriez voir le message "Hello, World!" s'afficher dans le terminal.

Félicitations! Vous venez de créer et d'exécuter votre première application JavaScript. 🎉

Concaténation et gestion des chaines de caractères

La concaténation en JavaScript est le processus de combinaison de deux ou plusieurs chaînes de caractères en une seule chaîne. Il existe plusieurs façons de concaténer des chaînes en JavaScript :

Utilisation de l'opérateur +

// Exemple dans notre programme
let message = "Hello, World!";
console.log(message + " - Hiver 2026");

Écrivez la commande suivante afin de tester votre application.

node index.js

Information ❗

En JavaScript, on peut utiliser les "" (guillemets doubles), les '' (guillemets simples). Les 2 fonctionnent de la même manière. Cependant, il est important de rester cohérent dans l'utilisation d'un seul type de guillemets dans un même projet pour des raisons de lisibilité.

Truc 💡

On peut utiliser les caractères d'échappement () pour inclure des guillemets dans une chaîne de caractères. Par exemple :

let citation = "Il a dit : \"Bonjour tout le monde!\"";
console.log(citation);

// Le resultat sera : Il a dit : "Bonjour tout le monde!"

Utilisation des accents graves

Lorsque l'on doit concaténer plusieurs variables ou expressions, cela peut vite devenir compliqué avec l'opérateur +. Exemple :

let nom = "Marc";
let age = 100;
console.log("Bonjour, je m'appelle " + nom + " et j'ai " + age + " ans.");

Une façon plus simple de faire cela est d'utiliser les accents graves :

let nom = "Marc";
let age = 100;
console.log(`Bonjour, je m'appelle ${nom} et j'ai ${age} ans.`);

Ici, nous pouvons utiliser les ${} pour insérer des variables ou des expressions directement dans la chaîne de caractères^[2]. Il est également possible d'utiliser des caractères comme des sauts de ligne (\n) directement dans les accents graves.

Par exemple :

let message = `Bonjour,\nBienvenue dans le cours de Web 2!`;
console.log(message);

// Le resultat sera :
// Bonjour,
// Bienvenue dans le cours de Web 2!

Calculs de base

JavaScript peut effectuer des calculs de base en utilisant les opérateurs arithmétiques suivants :

• Addition : +
• Soustraction : -
• Multiplication : *
• Division : /

Dans votre programme index.js, ajoutez le code suivant pour effectuer des calculs de base :

let nombre1 = 10;
let nombre2 = 5;
let somme = nombre1 + nombre2; // Addition
let difference = nombre1 - nombre2; // Soustraction
let produit = nombre1 * nombre2; // Multiplication
let quotient = nombre1 / nombre2; // Division
console.log(`Somme: ${somme}, Différence: ${difference}, Produit: ${produit}, Quotient: ${quotient}`);

Écrivez la commande suivante afin de tester votre application.

node index.js

DANGER

Lorsque vous effectuez des opérations avec des nombres et des chaînes de caractères, JavaScript peut implicitement convertir les types, ce qui peut entraîner des résultats inattendus. Par exemple :

let nombre = 10;
let texte = "5";
let resultat = nombre + texte; // Résultat sera "105" (concaténation)
console.log(resultat);

Ceci est dû au fait que JS (couramment utilisé afin de parler de JavaScript) est faiblement typé. La variable peut changer de type selon le contenu sans générer d'erreur. L'utilisation de ()() peut aider surtout pour spécifier la priorité des opérations.

Exemple :

let pointage = 10;
pointage = pointage + 10 + " points" // "20 points"
console.log(pointage);

let pointage = 10;
pointage = "Voici le pointage : " + pointage + 10 // "Voici le pointage : 1010"
console.log(pointage);

let pointage = 10;
pointage = "Voici le pointage : " + (pointage + 10) // "Voici le pointage : 20"
console.log(pointage);

^[1:2]

Types

Faiblement typé

JavaScript est un langage faiblement typé, ce qui signifie que les types de données sont déterminés automatiquement en fonction des valeurs assignées aux variables. Vous n'avez pas besoin de déclarer explicitement le type d'une variable lors de sa création. Par exemple :

let nombre = 42; // Type number
let texte = "Bonjour"; // Type string
let estVrai = true; // Type boolean

Types de données de base

Voici les principaux types de données en JavaScript :

• Number : Représente les nombres (entiers et flottants).
• String : Représente les chaînes de caractères.
• Boolean : Représente une valeur vraie (true) ou fausse (false).
• Array : Représente une collection ordonnée de valeurs.
• Undefined : Représente une variable qui a été déclarée, mais n'a pas encore été initialisée.
• Null : Représente l'absence intentionnelle de valeur.

Attention ⚠

null et undefined sont différents

• undefined signifie que la variable n'a pas été initialisée
• null signifie qu'on a initialisé la variable à rien

• Object : Permet de regrouper des attributs et des fonctions dans une variable

let monObjet = { 
    nom: "Marc", 
    age: 100,
    saluer: function() {
        console.log("Bonjour, je m'appelle " + this.nom);
    }
}; // Type object

• Function : Représente une fonction.

---

quels types aura la variable suivante : let x ?

Undefined Car elle n'a pas été initialisée.

---

Obtenir le type d'une variable

Vous pouvez utiliser l'opérateur typeof pour obtenir le type d'une variable en JavaScript :

let nombre = 42;
console.log(typeof nombre); // Affiche "number"
let texte = "Bonjour";
console.log(typeof texte); // Affiche "string"
let estVrai = true;
console.log(typeof estVrai); // Affiche "boolean"

Conversion de types

JavaScript permet de convertir les types de données de manière explicite en utilisant des fonctions intégrées. En voici quelques exemples :

let nombre = 42;
let texte = String(nombre); // Convertit le nombre en chaîne de caractères
let texte2 = "123";
let nombre2 = Number(texte2); // Convertit la chaîne de caractères en nombre

Exercice 1

Créez un fichier exercice1.js qui fait cela :

1. Créez les variables suivantes :

• race : Golden retriever
• sexe : Femelle
• prix : 4000
• ageEnSemaine : 6
• ageEnSemaineDisponible : 8

2. Ajoutez la variable "nbSemaineAvantDisponible" et calculez le nombre de semaines avant la disponibilité du chiot
3. Affichez les informations en utilisant les variables :

Golden retriever à vendre 4000$
Sexe : Femelle
Âge : 6 semaine(s)
Disponible dans 2 semaine(s)

4. Changer les variables dans le code et afficher de nouveau les informations avec les nouvelles valeurs.

Labrador à vendre 3000$
Sexe : Male
Âge : 4 semaine(s)
Disponible dans 3 semaine(s)

Solution (vous devriez avoir un résultat similaire)

let race = "Golden retriever";
let sexe = "Femelle";
let prix = 4000.00;
let ageEnSemaine = 6;
let ageEnSemaineDisponible = 8;

console.log('-----Message initial-----');
console.log(`${race} à vendre ${prix}$,
Sexe : ${sexe}
Âge : ${ageEnSemaine} semaine(s)
Disponible dans ${ageEnSemaineDisponible - ageEnSemaine} semaine(s)`);

race = "Labrador";
sexe = "Male";
prix = 3000.00;
ageEnSemaine = 4;
ageEnSemaineDisponible = 7;

console.log('-----Message final-----');
console.log(`${race} à vendre ${prix}$,
Sexe : ${sexe}
Âge : ${ageEnSemaine} semaine(s)
Disponible dans ${ageEnSemaineDisponible - ageEnSemaine} semaine(s)`);

Conditions et opérateurs de comparaison

Conditions

L'utilisation d'instructions conditionnelles en JavaScript est similaire à ce que vous connaissaissez déjà. Voici un rappel rapide :

if (condition) {
    // Code à exécuter si la condition est vraie
} else if (autreCondition) {
    // Code à exécuter si l'autre condition est vraie
} else {
    // Code à exécuter si aucune des conditions n'est vraie
}

Ou condition et autreCondition sont des expressions qui évaluent à true ou false.

Truc 💡

Remarquer bien qu'en JavaScript, on garde l'accolade ouvrante sur la même ligne que le if/else if/else.

Opérateurs de comparaison

Voici les principaux opérateurs de comparaison en JavaScript :

• Égal à : ==
• Strictement égal à : === . Cela teste également le type. Exemple :

let x = 5; // number
let y = "5"; // string
console.log(x == y); // true (valeurs égales)
console.log(x === y); // false (types différents)

• Différent de : !=
• Strictement différent de : !==
• Supérieur à : >
• Inférieur à : <
• Supérieur ou égal à : >=
• Inférieur ou égal à : <=

Attention ⚠

Remarquez les bizarreries de JavaScript comme x == '5' donne true.

En gros, JavaScript étant faiblement typé, il va essayer de convertir le string en nombre si possible.

Opérateurs logiques

Voici les principaux opérateurs logiques en JavaScript :

• ET logique : && (et)
• OU logique : || (ou)
• NON logique : ! (non) Exemple :

let a = true;
let b = false;
console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false

Opérateur conditionnel (ternaire)

L'opérateur conditionnel (ou ternaire) est une façon concise d'écrire une instruction conditionnelle. La syntaxe est la suivante :

condition ? expressionSiVrai : expressionSiFaux;

Ce n'est pas obligatoire de l'utiliser, mais cela peut être utile pour des conditions simples. Libre à vous de l'utiliser ou non selon votre compréhension et les besoins de votre projet/entreprise.

Personnellement, il m'est arrivé dans une des entreprises que j'ai travaillées d'être obligé de ne pas l'utiliser, car cela réduisait la lisibilité du code.

Exercice 2

Exercice 2.1

Créez un fichier exercice2.js qui testera l'âge d'une personne.

• Si la personne est majeure (18 ans et plus), afficher "Vous êtes majeur."
• Sinon, afficher "Vous êtes mineur."

Pour tester votre application, vous pouvez changer le contenu des variables entre chaque exécution.

Exercice 2.2

Ajouter à la fin du fichier exercice2.js le code exécutant la requête suivante :

• Faire une variable booléenne jaiCompris.
• Si la variable est vraie, afficher "Je comprends les conditions en JavaScript."
• Sinon, afficher "Continue à te pratiquer et tu réussiras ! 😃"

Pour tester votre application, vous pouvez changer le contenu des variables entre chaque exécution.

Solution (vous devriez avoir un résultat similaire)

//Exercice 2.1
let agePersonne = 19; // Changer la valeur ici pour tester la condition

if(agePersonne >= 18){
    console.log('Vous êtes majeur')
} else {
    console.log('Vous êtes mineur')
}

//Exercice 2.2
let jaICompris = true; // Changer la valeur ici pour tester la condition

if(jaICompris){
    console.log('Je comprends les conditions en JavaScript.')
} else {
    console.log('Continue à te pratiquer et tu réussiras ! 😃')
}

Saisi au clavier

Installation du module readline-sync

Afin de lire des entrées utilisateur depuis le clavier dans un environnement Node.js, nous allons utiliser le module readline-sync. Pour l'installer, ouvrez votre terminal dans le dossier de votre projet et exécutez la commande suivante :

npm install readline-sync

ou

npm i readline-sync

Attention ⚠

Si cela ne fonctionne pas, il faut s'assurer que npm soit ajouté aux variables d'environnement PATH de votre système.

Utilisation de readline-sync

Voici un exemple simple de comment utiliser readline pour lire une entrée utilisateur depuis le clavier :

// Permet d'aller chercher le module
let readline = require('readline-sync');

let prenom = readline.question('Quel est votre prenom ? ');
let nom = readline.question('Quel est votre nom ? ');

console.log(`Votre nom complet est ${prenom} ${nom}`);

Voici un exemple pour lire un nombre :

let readline = require('readline-sync');
let age = readline.questionInt('Quel est votre age ? ');
console.log(`Vous avez ${age} ans.`);

Exercice 3

Refaites l'exercice 2, mais cette fois, demandez à l'utilisateur de saisir au clavier les informations nécessaires.

Truc 💡

Attention à la façon donc vous obtenez le booléen!

Je suggère de demander une réponse facile à valider. Par exemple, par oui ou par non.

Solution (vous devriez avoir un résultat similaire)

let readline = require('readline-sync');

//Exercice 3.1
let agePersonne = readline.questionInt('Quel est votre age ? ');

if(agePersonne >= 18){
    console.log('Vous êtes majeur')
} else {
    console.log('Vous êtes mineur')
}

//Exercice 3.2
let reponseComprehension = readline.question('Est-ce que vous avez bien compris la dernière question ?');
let jaICompris = reponseComprehension === 'o' || reponseComprehension === 'oui' ||
                 reponseComprehension === 'O' || reponseComprehension === 'Oui';
/*
Une manière plus simple serait de faire une comparaison tout en minuscule 
au lieu de valider toutes les possibilités. Nous allons voir cela au prochain cours.
*/

if(jaICompris){
    console.log('Bravo! Continue comme ça !')
} else {
    console.log('Continue à te pratiquer et tu réussiras ! 😃')
}

---

1. Source: Contenu tiré du site de mon collègue Pierre-Luc Boulanger. ↩︎ ↩︎ ↩︎

2. Source: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics ↩︎