Module 8 : Introduction à JavaScript - Les bases du langage

Introduction

JavaScript est un langage de programmation web côté client. Il permet d'ajouter de l'interactivité aux pages HTML : réagir aux actions de l'utilisateur, modifier le contenu affiché, valider des formulaires, stocker des données, prendre des décisions, etc.

Langages en lien avec le navigateur web :

HTML

Structure et contenu de la page : titres, paragraphes, images, liens, etc.

CSS

Présentation et mise en forme de la page : couleurs, polices, marges, etc.

JavaScript

Interactivité et comportement dynamique de la page : réactions aux clics, animations, validation de formulaires, manipulation du contenu, gestion des événements, etc.

Objectifs du cours

Comprendre le rôle de JavaScript dans le développement web
Savoir inclure un fichier JavaScript dans une page HTML
Utiliser la console et le débogueur du navigateur
Maîtriser les commentaires et le mode strict
Connaître les types de données natifs de JavaScript
Déclarer et utiliser des variables et des constantes
Appliquer les opérateurs de comparaison
Utiliser les structures de contrôle et de répétition

Théorie

1 : Inclusion d'un fichier JavaScript dans une page HTML

Définition

Pour exécuter du JavaScript dans une page web, on doit lier un fichier .js externe à notre document HTML à l'aide de la balise <script>. Cette balise est généralement placée juste avant la fermeture de </body> pour s'assurer que tout le contenu HTML est chargé avant l'exécution du script.

Structure de fichiers recommandée

mon-projet/
├── index.html
├── css/
│   └── styles.css
└── js/
    └── script.js      ← Fichier JavaScript externe

Intégration dans le HTML

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon premier script</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>

    <h1>Ma page web</h1>
    <p>Contenu de la page...</p>

    <!-- Inclusion du fichier JavaScript (avant la fermeture de body) -->
    <script src="js/script.js"></script>
</body>
</html>

Points importants

Toujours placer la balise <script> avant la fermeture de </body> pour que le HTML soit chargé en premier
Utiliser un fichier .js externe plutôt que du JavaScript directement dans le HTML (séparation des responsabilités)
Le chemin dans l'attribut src est relatif à l'emplacement du fichier HTML

2 : La console du navigateur et le débogueur

Définition

La console du navigateur est un outil essentiel pour le développement JavaScript. Elle permet d'afficher des messages, de détecter des erreurs et de déboguer le code pas à pas.

Ouvrir la console

Ouvrez la page web que vous souhaitez déboguer dans votre navigateur
Appuyez sur la touche F12 ou cliquez avec le bouton droit sur la page et sélectionnez « Inspecter »
Sélectionnez l'onglet « Console » si ce n'est pas déjà fait

C'est à cet endroit que s'afficheront tous les messages JavaScript envoyés par la commande console.log(…).

`console.log()` : afficher dans la console

La méthode console.log() permet d'afficher des valeurs dans la console du navigateur. C'est l'outil de base pour vérifier ce que fait votre code.

javascript

console.log("Bonjour tout le monde !");
console.log(42);
console.log("La valeur de x est :", x);

alt text

Détection d'erreurs JavaScript

Les erreurs JavaScript s'affichent aussi dans la console. Par exemple, le code suivant contient une erreur : test n'est pas entre guillemets, donc le navigateur pense que c'est une variable, mais aucune variable test n'existe.

javascript

console.log("Bonjour tout le monde !");
console.log(test); // ❌ Erreur : test n'est pas défini

Le navigateur affichera une erreur du type ReferenceError: test is not defined dans la console, même si dans la page web on ne verra rien de particulier.

Comment suivre l'erreur ?

Dans la console, si on clique sur le lien vers l'erreur (par exemple script.js:3), on est automatiquement dirigé vers le débogueur à la ligne d'erreur en question dans notre fichier (en lecture seule).

Utilisation du débogueur du navigateur

Le débogueur permet d'exécuter le code pas à pas et d'inspecter les valeurs des variables à chaque étape.

Cliquez sur l'onglet « Sources » (ou « Déboguer ») dans les outils de développement
Sélectionnez le fichier JavaScript que vous souhaitez déboguer dans la liste des fichiers sources
Placez un point d'arrêt en cliquant sur le numéro de ligne à côté du code JavaScript
Rechargez la page ou déclenchez l'action qui exécute le code
Utilisez les boutons de commande du débogueur pour exécuter le code pas à pas, surveiller les variables, inspecter la pile d'appels, etc.

Points importants

console.log() est votre meilleur ami pour déboguer rapidement
Les erreurs JavaScript n'apparaissent pas dans la page web, mais uniquement dans la console
Le débogueur avec les points d'arrêt permet d'exécuter le code ligne par ligne et d'observer les valeurs des variables
Prenez l'habitude d'ouvrir la console dès que vous travaillez en JavaScript

3 : Alert et Prompt (boite de dialogue)

Définition

La fonction alert() affiche une boîte de dialogue modale avec un message et un bouton "OK". Elle bloque l'exécution du script jusqu'à ce que l'utilisateur clique sur "OK".

Exemples pratiques

javascript

alert("Bonjour, ceci est une alerte !");
alert("La valeur de x est : " + x);
alert(`La valeur de x est : ${x}`);

Points importants

Contrairement à console.log(), alert() interrompt l'utilisateur et nécessite une interaction.
Utilisez alert() pour des notifications simples ou du débogage temporaire, mais préférez console.log() pour un développement efficace.

`prompt()` : saisir du texte

La fonction prompt() affiche une boîte de dialogue modale avec un message et un champ de saisie. Elle retourne la valeur saisie par l'utilisateur (ou null si annulé).

javascript

let nom = prompt("Quel est votre nom ?");
alert("Bonjour " + nom + " !");

La valeur retournée est toujours une chaîne de caractères, même si l'utilisateur saisit un nombre.
Pour convertir en nombre : let age = parseInt(prompt("Quel âge avez-vous ?"));
Si l'utilisateur clique sur "Annuler", prompt() retourne null.

4 : Les commentaires

Définition

Les commentaires permettent d'ajouter des notes explicatives dans le code sans affecter son exécution. Ils sont ignorés par le navigateur et servent à documenter le code pour vous-même ou pour d'autres développeurs.

Commentaires sur une seule ligne

Les commentaires sur une seule ligne commencent par deux barres obliques //. Tout ce qui suit les deux barres obliques jusqu'à la fin de la ligne sera ignoré par le navigateur.

javascript

// Ceci est un commentaire sur une seule ligne
let x = 5; // Cette ligne déclare une variable et l'initialise à 5

Commentaires sur plusieurs lignes

Les commentaires sur plusieurs lignes commencent par /* et se terminent par */. Ils peuvent s'étendre sur plusieurs lignes et sont souvent utilisés pour commenter des sections entières de code.

javascript

/*
  Ceci est un commentaire sur plusieurs lignes
  qui décrit une section de code
*/
let x = 5;
let y = 10;
console.log(x + y);

Points importants

Utilisez les commentaires pour expliquer le pourquoi, pas le quoi (le code devrait être assez clair pour expliquer ce qu'il fait)
Ne commentez pas chaque ligne ; commentez les parties complexes ou non évidentes
Les commentaires multi-lignes /* */ sont aussi utiles pour désactiver temporairement un bloc de code

5 : Le mode strict

Définition

Le mode strict ("use strict") est un mode de fonctionnement du moteur JavaScript qui rend le code plus robuste et plus sûr en activant un ensemble de règles supplémentaires. Il empêche certaines erreurs courantes et interdit des syntaxes problématiques.

Activation du mode strict

Le mode strict s'active en ajoutant la chaîne "use strict"; au tout début du fichier JavaScript.

javascript

// Au tout début du fichier JavaScript
"use strict";

let message = "Bonjour !";
console.log(message);

Exemples de protections offertes par le mode strict

javascript

"use strict";

// ❌ Erreur : utiliser une variable sans la déclarer
monNom = "Jean"; // ReferenceError: monNom is not defined

// ✅ Bonne pratique : déclarer la variable avec let ou const
let monNom = "Jean";

Points importants

Toujours activer le mode strict dans vos fichiers JavaScript
Le mode strict aide à détecter des erreurs silencieuses qui passeraient autrement inaperçues
Il doit être placé à la première ligne du fichier (ou au début d'une fonction)

6 : Types et objets natifs

Définition

En JavaScript, le typage est dynamique : le type de données d'une variable peut changer pendant l'exécution du programme. Contrairement aux langages typés statiquement comme C#, les variables peuvent contenir des données de n'importe quel type à tout moment.

Ressource vidéo

Pour une démonstration des types en JavaScript : https://www.youtube.com/watch?v=UmSpfdxu3ro

Typage dynamique

javascript

let x = "Hello";
console.log(typeof x); // Affiche "string"

x = 42;
console.log(typeof x); // Affiche "number"

x = true;
console.log(typeof x); // Affiche "boolean"

Dans cet exemple, la variable x change de type dynamiquement en fonction de la valeur qui lui est assignée. C'est pour cela que, dans la très grande majorité des situations, on ne se souciera pas du type lors de la création de la variable, car elle va automatiquement prendre le type de la valeur assignée.

Type Number

Les nombres sont utilisés pour stocker des valeurs numériques. Les nombres peuvent être des entiers (par exemple, 3, 10, -100) ou des nombres à virgule flottante (par exemple, 3.14, -0.5, 2.0).

javascript

let x = 5;
let y = 3.14;
console.log(x + y); // Affiche 8.14 dans la console

Type String

Les chaînes de caractères sont utilisées pour stocker des séquences de caractères. Elles sont entourées de guillemets simples ('...') ou de guillemets doubles ("...").

javascript

let message = "Bonjour, monde !";
console.log(message); // Affiche "Bonjour, monde !" dans la console

Type Boolean

Les booléens sont utilisés pour stocker des valeurs qui peuvent être soit vrai (true) ou faux (false).

javascript

let a = true;
let b = false;
console.log(a && b); // Affiche false dans la console

Type Null

null est un type de données qui représente une valeur nulle ou inexistante.

javascript

let y = null;
console.log(y); // Affiche null dans la console

Tableau récapitulatif des types

Type	Description	Exemple
Number	Nombres entiers ou décimaux	`42`, `3.14`
String	Chaînes de caractères	`"Bonjour"`, `'Hello'`
Boolean	Valeur vrai ou faux	`true`, `false`
Null	Valeur nulle / inexistante	`null`
Array	Collection ordonnée d'éléments	`["a", "b", "c"]`
Object	Collection de propriétés clé-valeur	`{ nom: "Jean" }`

Points importants

JavaScript est un langage à typage dynamique : pas besoin de déclarer le type d'une variable
Utilisez typeof pour vérifier le type d'une variable

7 : Variables et constantes

Définition

En JavaScript, on utilise des variables et des constantes pour stocker des valeurs et les réutiliser dans le code. On déclare une variable avec let (ou var) et une constante avec const.

Déclaration de variables (`let` et `var`)

javascript

var x = 5;
let y = 10;
const z = 15;

x = 7;  // ✅ OK : x est maintenant égal à 7
y = 12; // ✅ OK : y peut être modifié
z = 20; // ❌ Erreur : les constantes ne peuvent pas être modifiées

Différences entre `var` et `let`

Caractéristique	`var`	`let`	Explication
Portée	Globale / fonction	Bloc (`{ }`)	`let` est limité au bloc dans lequel il est déclaré, tandis que `var` est limité à la fonction ou globalement
Redéclaration	Autorisée	Interdite (plus robuste)	`var` permet de redéclarer la même variable, ce qui peut entraîner des erreurs difficiles à détecter. `let` empêche cela et génère une erreur si vous essayez de redéclarer une variable existante.
Recommandation	À éviter	✅ À privilégier	`let` est recommandé pour une meilleure lisibilité et pour éviter les erreurs liées à la portée et à la redéclaration.

En général, on préfère utiliser let, car il nous prévient si on essaie de créer (écraser) une variable qui existe déjà :

javascript

let name = "Alex";
let name = "Bob"; // ❌ Uncaught SyntaxError: Identifier 'name' has already been declared

Constantes (`const`)

Les constantes sont utilisées pour stocker des valeurs qui ne doivent pas être modifiées après leur initialisation.

javascript

const pi = 3.14;
pi = 3; // ❌ Erreur : les constantes ne peuvent pas être modifiées

Bonnes pratiques

javascript

// ✅ Bonne pratique : utiliser const par défaut, let si la valeur change
const taxe = 0.15;
let total = 100;
total = total + (total * taxe); // total doit changer, donc let est approprié

// ❌ À éviter : utiliser var
var ancienneMethode = "pas recommandé";

Points importants

Utilisez const par défaut, et let uniquement si la valeur doit changer
Évitez var : préférez let pour sa portée de bloc et sa protection contre la redéclaration
Une constante (const) doit être initialisée lors de sa déclaration

8 : Concaténation et interpolation de chaînes

Définition

La concaténation et l'interpolation permettent d'assembler des chaînes de caractères avec des variables ou d'autres valeurs.

Concaténation de chaînes

Vous pouvez concaténer des chaînes avec l'opérateur + :

javascript

let prenom = "Alice";
let age = 25;
console.log("Bonjour " + prenom + ", vous avez " + age + " ans.");

Interpolation de chaînes (template literals)

Avec les backticks `, vous pouvez utiliser l'interpolation ${variable} pour insérer des valeurs directement :

javascript

let prenom = "Alice";
let age = 25;
console.log(`Bonjour ${prenom}, vous avez ${age} ans.`);

L'interpolation est plus lisible et évite les erreurs de concaténation.

Points importants

Utilisez l'interpolation avec les backticks pour une meilleure lisibilité
La concaténation avec + fonctionne mais peut devenir confuse avec de nombreuses variables
Les template literals supportent les expressions complexes : ${age + 1}

9 : Tableau (array)

Définition

Un tableau (array) en JavaScript est une structure de données qui permet de stocker plusieurs valeurs dans une seule variable. Les éléments du tableau sont accessibles via un index numérique commençant à 0.

Contexte d'utilisation

Les tableaux sont utilisés lorsque vous devez gérer une collection d'éléments, comme une liste de noms, de nombres, ou d'objets. Ils sont particulièrement utiles pour stocker des données qui doivent être traitées de manière séquentielle ou pour représenter des structures de données complexes.

Exemples pratiques

javascript

// Déclaration d'un tableau
let fruits = ['pomme', 'banane', 'orange'];

// Accès aux éléments
console.log(fruits[0]); // 'pomme'
console.log(fruits[2]); // 'orange'

// Modification d'un élément
fruits[1] = 'kiwi';

// Ajout d'un élément : le tableau n'est pas statique, on peut lui ajouter des éléments à tout moment. Il est dynamique.
fruits.push('raisin');

// Retrait du dernier élément
fruits.pop();

// Retrait du premier élément
fruits.shift(); 

// Longueur du tableau
console.log(fruits.length);

10 : Conversions et NaN

`parseInt()` et `parseFloat()`

Lorsque vous avez besoin de faire des calculs avec des valeurs provenant de champs de formulaire (qui sont toujours des chaînes de caractères), vous devez les convertir en nombres.

parseInt() : convertit une chaîne en nombre entier.

javascript

let str = "123";
let num = parseInt(str);

console.log(num);        // Output : 123
console.log(typeof num); // Output : number

parseFloat() : convertit une chaîne en nombre décimal (virgule flottante).

javascript

let str = "3.14";
let num = parseFloat(str);

console.log(num);        // Output : 3.14
console.log(typeof num); // Output : number

`NaN` (Not a Number)

Si la chaîne contient des caractères qui ne sont pas des chiffres, parseInt() ou parseFloat() retourneront NaN (Not a Number).

javascript

let str = "abc";
let num = parseFloat(str);

console.log(num); // Output : NaN

isNaN() : vérifier si une valeur est un nombre

javascript

let variable = "abc";
// isNaN va essayer de convertir la variable en nombre, et si ça échoue, elle retourne true. Si elle réussit à convertir, elle retourne false.
if (isNaN(variable)) {
    console.log("La conversion a échoué, ce n'est pas un nombre.");
} else {
    console.log("Le nombre est :", num);
}

Points importants

Toujours convertir les valeurs avant de faire des calculs, surtout celles provenant de champs de formulaire
Utilisez parseInt() pour les entiers et parseFloat() pour les décimaux
Vérifiez vos résultats : un NaN signifie que la conversion a échoué

11 : Opérateurs de comparaison

Définition

Les opérateurs de comparaison permettent de comparer deux valeurs et retournent un booléen (true ou false). En JavaScript, il existe des opérateurs de comparaison non stricts et stricts.

Tableau des opérateurs

Opérateur	Nom	Description	Exemple	Résultat
`==`	Égalité (non stricte)	Compare les valeurs après conversion de type si nécessaire	`"5" == 5`	`true`
`===`	Égalité stricte	Compare les valeurs et le type sans conversion	`"5" === 5`	`false`
`!=`	Inégalité (non stricte)	Vérifie si les valeurs sont différentes après conversion de type	`"5" != 5`	`false`
`!==`	Inégalité stricte	Vérifie si les valeurs ou les types sont différents	`"5" !== 5`	`true`
`>`	Supérieur à	Vérifie si la première valeur est plus grande	`10 > 5`	`true`
`<`	Inférieur à	Vérifie si la première valeur est plus petite	`5 < 10`	`true`
`>=`	Supérieur ou égal à	Vérifie si la première valeur est plus grande ou égale	`10 >= 10`	`true`
`<=`	Inférieur ou égal à	Vérifie si la première valeur est plus petite ou égale	`5 <= 10`	`true`

Important : En JavaScript, privilégiez toujours l'égalité stricte (===) et l'inégalité stricte (!==). Puisque JavaScript est un langage à typage dynamique, l'égalité non stricte (==) peut donner des résultats surprenants en convertissant automatiquement les types.

Points importants

=== compare la valeur et le type (recommandé)
== compare uniquement la valeur après conversion (à éviter)
"5" === 5 retourne false car string !== number
"5" == 5 retourne true car JavaScript convertit le type automatiquement

12 : Structures de contrôle et de répétition

Définition

Les structures de contrôle permettent de contrôler le flux d'exécution du code : exécuter du code sous certaines conditions, ou répéter un bloc de code plusieurs fois.

`if / else`

La structure if/else permet d'exécuter un bloc de code si une condition est vraie, et un autre bloc si la condition est fausse.

javascript

let age = 18;

if (age >= 18) {
    console.log("Vous êtes majeur !");
} else {
    console.log("Vous êtes mineur !");
}

Boucle `for` classique

La boucle for avec un itérateur est utilisée pour répéter un bloc de code un nombre déterminé de fois.

javascript

for (let i = 0; i < 10; i++) {
    console.log(i);
}

// Exemple de parcours d'un tableau
let fruits = ["pomme", "banane", "orange"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

Boucle `for...of`

La boucle for...of simplifie le parcours d'un tableau. Elle parcourt directement les valeurs du tableau.

javascript

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

for (let fruit of fruits) {
    console.log(fruit);
}

Ressource vidéo

https://www.youtube.com/watch?v=90ddzGi9ucs

Boucle `for...in`

La boucle for...in est utilisée pour parcourir les propriétés (clés) d'un objet. On accède aux valeurs avec la syntaxe objet[propriete].

javascript

let personne = {
    nom: "Dupont",
    prenom: "Jean",
    age: 30
};

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

Ressource vidéo

https://www.youtube.com/watch?v=3lDVCDHCyHY

Boucle `while`

La boucle while exécute un bloc de code tant qu'une condition est vraie.

javascript

let i = 0;

while (i < 10) {
    console.log(i);
    i++;
}

`switch`

La structure switch permet d'exécuter différents blocs de code en fonction de la valeur d'une expression. N'oubliez pas le break à la fin de chaque case.

javascript

let fruit = "banane";

switch (fruit) {
    case "pomme":
        console.log("Vous avez choisi une pomme !");
        break;
    case "banane":
        console.log("Vous avez choisi une banane !");
        break;
    default:
        console.log("Ce fruit n'est pas disponible !");
}

Quand utiliser quelle structure ?

Structure	Utilisation
`if / else`	Quand on a une ou deux conditions à vérifier
`for`	Quand on connaît le nombre d'itérations à l'avance
`for...of`	Pour parcourir les valeurs d'un tableau
`for...in`	Pour parcourir les propriétés (clés) d'un objet
`while`	Quand on ne connaît pas le nombre d'itérations à l'avance
`switch`	Quand on compare une valeur à plusieurs cas possibles

Points importants

N'oubliez pas le break dans les case d'un switch, sinon le code continuera à s'exécuter dans les cas suivants
Préférez for...of à la boucle for classique pour parcourir un tableau (plus lisible)
Utilisez for...in uniquement pour les objets, pas pour les tableaux

Démonstration

Démo 1 : Premier script JavaScript

Objectif

Créer une page HTML avec un fichier JavaScript externe qui utilise la console, les variables, les types et une structure de contrôle simple.

Structure du projet VS Code :

demo-js-bases/
├── index.html
├── css/
│   └── styles.css
└── js/
    └── script.js

index.html

Voir le code

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Démo - Bases de JavaScript</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <h1>Bases de JavaScript</h1>
    <p>Ouvrez la console du navigateur (F12) pour voir les résultats.</p>

    <script src="js/script.js"></script>
</body>
</html>

script.js

Voir le code

javascript

"use strict";

// ===========================
// 1. Variables et constantes
// ===========================
const nom = "Jean";
const prenom = "Dupont";
let age = 25;

console.log("Nom complet :", prenom, nom);
console.log("Âge :", age);

// ===========================
// 2. Types de données
// ===========================
console.log("Type de nom :", typeof nom);       // string
console.log("Type de age :", typeof age);        // number
console.log("Type de true :", typeof true);      // boolean

// ===========================
// 3. Opérateurs de comparaison
// ===========================
console.log("5 == '5' :", 5 == "5");    // true (comparaison non stricte)
console.log("5 === '5' :", 5 === "5");  // false (comparaison stricte)

// ===========================
// 4. Structure de contrôle if/else
// ===========================
if (age >= 18) {
    console.log(prenom + " est majeur.");
} else {
    console.log(prenom + " est mineur.");
}

// ===========================
// 5. Boucle for classique
// ===========================
let fruits = ["pomme", "banane", "orange", "kiwi"];

console.log("--- Boucle for classique ---");
for (let i = 0; i < fruits.length; i++) {
    console.log("Fruit " + i + " : " + fruits[i]);
}

// ===========================
// 6. Boucle for...of
// ===========================
console.log("--- Boucle for...of ---");
for (let fruit of fruits) {
    console.log("Fruit :", fruit);
}

// ===========================
// 7. Switch
// ===========================
let saison = "été";

switch (saison) {
    case "printemps":
        console.log("Les fleurs poussent !");
        break;
    case "été":
        console.log("Il fait chaud !");
        break;
    case "automne":
        console.log("Les feuilles tombent !");
        break;
    case "hiver":
        console.log("Il fait froid !");
        break;
    default:
        console.log("Saison inconnue.");
}

// ===========================
// 8. parseInt et parseFloat
// ===========================
let valeurTexte = "42.5";
let entier = parseInt(valeurTexte);
let decimal = parseFloat(valeurTexte);

console.log("parseInt('42.5') :", entier);      // 42
console.log("parseFloat('42.5') :", decimal);    // 42.5
console.log("parseInt('abc') :", parseInt("abc")); // NaN

Résultat attendu

En ouvrant la console du navigateur (F12), l'étudiant devrait voir tous les messages console.log() s'afficher, illustrant chacun des concepts vus dans la théorie.

Les variables et leurs types s'affichent correctement
La comparaison stricte vs non stricte montre des résultats différents
La structure if/else affiche le bon message selon l'âge
Les boucles parcourent le tableau de fruits
Le switch affiche le message correspondant à la saison

Exercices pratiques

Exercice 1 : Variables, types et console

Énoncé

Créer un fichier JavaScript qui déclare des variables de différents types et affiche leurs valeurs et types dans la console.

Fichiers à créer

index.html
js/script.js

Consignes

Créer une page HTML de base avec un lien vers le fichier js/script.js
Activer le mode strict dans le fichier JavaScript
Déclarer les variables suivantes avec les valeurs appropriées :
- nomCours (string) : le nom de votre cours actuel
- nombreEtudiants (number) : un nombre d'étudiants
- estEnLigne (boolean) : si le cours est en ligne ou non
- noteFinale (null) : la note finale (pas encore disponible)
Afficher dans la console chaque variable et son type avec typeof
Tester les opérateurs de comparaison stricte et non stricte entre "10" et 10

Exercice 2 : Structures de contrôle

Énoncé

Écrire un programme JavaScript qui utilise les structures de contrôle pour analyser une liste de notes d'étudiants.

Fichiers à créer

index.html
js/script.js

Consignes

Déclarer un tableau notes contenant au moins 6 notes numériques (entre 0 et 100)
Utiliser une boucle for pour parcourir le tableau et afficher chaque note dans la console
Pour chaque note, afficher si l'étudiant a réussi (>= 60) ou échoué (< 60) en utilisant un if/else
Utiliser une boucle for...of pour calculer la moyenne de toutes les notes
Afficher la moyenne dans la console
Utiliser un switch pour afficher une appréciation selon la moyenne :
- 90 et plus : « Excellent »
- 80-89 : « Très bien »
- 70-79 : « Bien »
- 60-69 : « Passable »
- Moins de 60 : « Échec »

Indice : Pour le switch sur des plages de valeurs, vous pouvez utiliser Math.floor(moyenne / 10) pour obtenir la dizaine.

Exercice 3 : Calculatrice simple

Énoncé

Créer un script JavaScript qui simule une calculatrice simple dans la console. Le programme doit déclarer deux nombres et une opération, puis afficher le résultat.

Fichiers à créer

index.html
js/script.js

Consignes

Déclarer deux constantes nombre1 et nombre2 avec des valeurs numériques
Déclarer une variable operation contenant l'une des valeurs suivantes : "addition", "soustraction", "multiplication", "division"
Utiliser un switch pour effectuer le calcul approprié et stocker le résultat dans une variable resultat
Gérer le cas de la division par zéro (afficher un message d'erreur dans la console)
Afficher le résultat dans la console sous la forme : "10 + 5 = 15"
Tester avec différentes opérations et valeurs, incluant des chaînes de caractères converties avec parseInt() ou parseFloat()

Exercice 3.1 : Correction d'erreurs de syntaxe et logique

Énoncé

Le code JavaScript ci-dessous contient plusieurs erreurs de syntaxe et de logique. Votre mission est de les identifier et de les corriger pour que le code fonctionne correctement. Ouvrez la console du navigateur (F12) pour voir les erreurs et tester vos corrections.

Code à corriger

Code avec erreurs

javascript

// Vérifier si l'âge est égal à 18
let age = 25;
if (age = 18) { 
    console.log("Vous avez 18 ans !");
}

// Incrémenter x
const x = 10; 
x++;
console.log(x);

// Vérifier si le nombre est égal à 5
let nombre = "5";
if (nombre === 5) {  // Pourquoi cela fait ça ? Et est-ce normal ?
   console.log("Le nombre est égal à 5");
}
else
{
    console.log("Le nombre n'est pas égal à 5");
}

// Afficher un message
let message = "Hello"
Console.log(message) 

// Boucle avec un itérateur manuel
while (i < 10) {
    let i = 0;
    console.log(i); 
    i++;
}

// Qu'est-ce que cette variable contient ? Voir la console du navigateur
let valeur; 
if (valeur) { // Qu'est-ce qui se passe réellement ici ? Pourquoi ? Voir la console du navigateur
    console.log("Valeur définie");
} else {
    console.log("Valeur non définie");
}

// Afficher tous les éléments du tableau
let tableau = [1, 2, 3, 4, 5];
for(let i = 1; i <= tableau.length; i++) { 
    console.log(tableau[i]); 
}

// On s'attend à afficher "Bonjour, Alice !
let nom = "Alice";
console.log('Bonjour, ${nom} !'); 

let entrée = prompt("Entrez le nombre 2 :");
console.log("Type de l'entrée :", typeof entrée); // Affiche le type de la variable entrée

// Ici, on veut faire 2 + 2
// On s'attend à ce que le résultat soit 4, mais ce n'est pas le cas. Pourquoi ? 
// Comment corriger ce problème ? 
entrée = entrée + 2;
if (entrée > 10) {
    console.log("Le nombre est supérieur à 10");
} else {
    console.log("Le nombre est inférieur ou égal à 10");
}

Consignes

Copiez ce code dans un fichier js/script.js lié à une page HTML
Ouvrez la console du navigateur (F12) pour identifier les erreurs
Corrigez chaque erreur une par une
Testez après chaque correction pour vérifier que le code fonctionne
Répondez aux questions posées dans les commentaires

Questions à répondre

Pourquoi if (nombre === 5) affiche "Le nombre n'est pas égal à 5" ?
Qu'est-ce que contient la variable valeur non initialisée ?
Pourquoi console.log('Bonjour, ${nom} !') n'affiche pas le nom ?
Pourquoi entrée + 2 ne donne pas 4 quand on entre 2 ?

Indices

Pensez aux opérateurs d'assignation (=) vs de comparaison (==, ===)
Les constantes ne peuvent pas être modifiées
Les tableaux commencent à l'index 0
prompt() retourne toujours une chaîne de caractères
Pour l'interpolation de chaînes, utilisez les backticks `

Exercice 4 : Analyse des niveaux de ki de personnages

Énoncé

Créer un programme JavaScript qui analyse les niveaux de ki de 4 personnages de Dragon Ball, calcule des statistiques et affiche des informations détaillées. Le ki est une énergie fictive dans l'univers de Dragon Ball, et les personnages ont des niveaux de ki (nombre) qui varient énormément.

Fichiers à créer

index.html
js/script.js

Consignes

Créer deux tableaux :
- personnages contenant les noms des 4 personnages (ex: "Goku", "Vegeta", "Gohan", "Piccolo")
- ki contenant leurs niveaux de ki respectifs (valeurs numériques élevées)
Utiliser une boucle for pour afficher chaque personnage avec son niveau de ki dans la console
Calculer et afficher :
- Le nombre total de personnages
- La somme de tous les niveaux de ki
- La moyenne des niveaux de ki
Compter et afficher le nombre de personnages qui ont :
- Un ki élevé (>= 100000)
- Un ki moyen (50000-99999)
- Un ki faible (< 50000)
Trouver et afficher le ki le plus haut et le plus bas, ainsi que les personnages correspondants. Voici un algorithme qui permet de trouver ces valeurs :
- Initialiser kiMax et kiMin à la première valeur du tableau ki, et persoMax et persoMin aux premiers personnages.
- Parcourir le tableau ki avec une boucle for
- Pour chaque ki[i], comparer avec kiMax et kiMin
- Si ki[i] est > kiMax, kiMax devient ki[i] et persoMax devient personnages[i]
- Si ki[i] est < kiMin, kiMin devient ki[i] et persoMin devient personnages[i]
Utiliser des conditions pour afficher une appréciation générale selon la moyenne des ki :
- Plus grand ou égal à 100000 : "Équipe surpuissante"
- 75000-99999 : "Équipe très puissante"
- 50000-74999 : "Équipe puissante"
- 25000-49999 : "Équipe moyenne"
- < 25000 : "Noobs"

Indice : Utilisez des variables pour accumuler les sommes et compter les éléments.

Exercice 5 : Saisie interactive des personnages et ki

Énoncé

Créer un programme JavaScript qui utilise prompt() pour saisir interactivement les noms des personnages et leurs niveaux de ki, avec validation des entrées.

Fichiers à créer

index.html
js/script.js

Consignes

Demander à l'utilisateur le nombre de personnages à saisir (au moins 1) via prompt(). Valider que c'est un nombre entier positif.
Initialiser deux tableaux vides : personnages et ki.
Pour chaque personnage :
- Demander le nom via prompt(). Utiliser une boucle while pour valider que le nom n'est pas vide (après trim). Si invalide, afficher un alert() avec un message d'erreur et redemander.
- Demander le niveau de ki via prompt(). Utiliser une boucle while pour valider que c'est un nombre (utiliser isNaN() après parseFloat()) et supérieur à 0. Si invalide, afficher un alert() avec un message d'erreur et redemander.
Une fois tous les personnages saisis, afficher les deux tableaux dans la console pour confirmation.
Utiliser alert() pour donner des rétroactions à l'utilisateur en cas d'erreur de saisie.
Ajouter une étape de recherche : utiliser une boucle while pour demander à l'utilisateur le nom d'un personnage à rechercher. Si le personnage est trouvé, afficher son nom et son ki en utilisant la concaténation et l'interpolation de chaînes. L'utilisateur peut rechercher à nouveau un autre personnage, et ce, tant qu'il n'entre pas "0" pour quitter.

Indice : C'est la même logique qu'une recherche dans 2 tableaux en parallèles comme dans le cours de programmation 1.

Correction

Correction Exercice 1

Voir le code complet

Solution HTML

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercice 1 - Variables et types</title>
</head>
<body>
    <h1>Exercice 1</h1>
    <p>Ouvrez la console (F12) pour voir les résultats.</p>
    <script src="js/script.js"></script>
</body>
</html>

Solution JavaScript

javascript

"use strict";

// Déclaration des variables
const nomCours = "Développement Web 2";
const nombreEtudiants = 30;
const estEnLigne = false;
let noteFinale = null;

// Affichage des variables et de leur type
console.log("nomCours :", nomCours, "- Type :", typeof nomCours);
console.log("nombreEtudiants :", nombreEtudiants, "- Type :", typeof nombreEtudiants);
console.log("estEnLigne :", estEnLigne, "- Type :", typeof estEnLigne);
console.log("noteFinale :", noteFinale, "- Type :", typeof noteFinale);

// Comparaison stricte vs non stricte
console.log("--- Comparaisons ---");
console.log("'10' == 10 :", "10" == 10);   // true
console.log("'10' === 10 :", "10" === 10); // false
console.log("'10' != 10 :", "10" != 10);   // false
console.log("'10' !== 10 :", "10" !== 10); // true

Explications

Cet exercice permet de pratiquer la déclaration de variables avec différents types et l'utilisation de typeof pour vérifier les types. La comparaison stricte (===) vs non stricte (==) montre que JavaScript convertit automatiquement les types avec ==, ce qui peut mener à des résultats inattendus.

Correction Exercice 2

Voir le code complet

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercice 2 - Structures de contrôle</title>
</head>
<body>
    <h1>Exercice 2</h1>
    <p>Ouvrez la console (F12) pour voir les résultats.</p>
    <script src="js/script.js"></script>
</body>
</html>

javascript

"use strict";

// Tableau de notes
let notes = [85, 72, 45, 91, 60, 78, 55, 88];

// Parcours avec for et vérification réussite/échec
console.log("--- Résultats individuels ---");
for (let i = 0; i < notes.length; i++) {
    if (notes[i] >= 60) {
        console.log("Note " + notes[i] + " : Réussi ✅");
    } else {
        console.log("Note " + notes[i] + " : Échoué ❌");
    }
}

// Calcul de la moyenne avec for...of
let somme = 0;
for (let note of notes) {
    somme = somme + note;
}
let moyenne = somme / notes.length;
console.log("--- Moyenne ---");
console.log("Moyenne de la classe :", moyenne);

// Appréciation avec switch
let dizaine = Math.floor(moyenne / 10);
switch (dizaine) {
    case 10:
    case 9:
        console.log("Appréciation : Excellent");
        break;
    case 8:
        console.log("Appréciation : Très bien");
        break;
    case 7:
        console.log("Appréciation : Bien");
        break;
    case 6:
        console.log("Appréciation : Passable");
        break;
    default:
        console.log("Appréciation : Échec");
}

Points de discussion

L'utilisation de Math.floor() pour obtenir la dizaine permet d'utiliser un switch avec des plages de valeurs
for...of est plus lisible que for classique pour parcourir un tableau
Le case 10 et case 9 sont regroupés sans break pour gérer les notes de 90 à 100

Correction Exercice 3

Voir le code complet

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercice 3 - Calculatrice</title>
</head>
<body>
    <h1>Exercice 3</h1>
    <p>Ouvrez la console (F12) pour voir les résultats.</p>
    <script src="js/script.js"></script>
</body>
</html>

javascript

"use strict";

// Déclaration des valeurs
const nombre1 = 10;
const nombre2 = 5;
let operation = "addition";
let resultat;

// Calcul selon l'opération
switch (operation) {
    case "addition":
        resultat = nombre1 + nombre2;
        console.log(nombre1 + " + " + nombre2 + " = " + resultat);
        break;
    case "soustraction":
        resultat = nombre1 - nombre2;
        console.log(nombre1 + " - " + nombre2 + " = " + resultat);
        break;
    case "multiplication":
        resultat = nombre1 * nombre2;
        console.log(nombre1 + " × " + nombre2 + " = " + resultat);
        break;
    case "division":
        if (nombre2 === 0) {
            console.log("Erreur : division par zéro impossible !");
        } else {
            resultat = nombre1 / nombre2;
            console.log(nombre1 + " ÷ " + nombre2 + " = " + resultat);
        }
        break;
    default:
        console.log("Opération non reconnue : " + operation);
}

// Test avec des chaînes converties
console.log("--- Test avec conversion ---");
let valeur1 = "15.5";
let valeur2 = "3";

let num1 = parseFloat(valeur1);
let num2 = parseInt(valeur2);

console.log(num1 + " + " + num2 + " = " + (num1 + num2));
console.log("Type de num1 :", typeof num1);
console.log("Type de num2 :", typeof num2);

Correction Exercice 3.1

Code corrigé

javascript

"use strict";

// Vérifier si l'âge est égal à 18
let age = 25;
if (age === 18) {  // Correction : === au lieu de = pour la comparaison
    console.log("Vous avez 18 ans !");
}

// Incrémenter x
let x = 10;  // Correction : let au lieu de const car on modifie la valeur
x++;
console.log(x);

// Vérifier si le nombre est égal à 5
let nombre = "5";
if (parseInt(nombre) === 5) {  // Correction : convertir la chaîne en nombre
    console.log("Le nombre est égal à 5");
} else {
    console.log("Le nombre n'est pas égal à 5");
}

// Afficher un message
let message = "Hello";  // Correction : ajouter le point-virgule
console.log(message);   // Correction : console en minuscules

// Boucle avec un itérateur manuel
let i = 0;  // Correction : déclarer i avant la boucle
while (i < 10) {
    console.log(i);
    i++;
}

// Qu'est-ce que cette variable contient ? Voir la console du navigateur
let valeur;  // undefined
if (valeur) { // Les valeurs falsy (undefined, null, 0, "", false) sont évaluées à false
    console.log("Valeur définie");
} else {
    console.log("Valeur non définie");  // Ceci s'affiche car valeur est undefined
}

// Afficher tous les éléments du tableau
let tableau = [1, 2, 3, 4, 5];
for (let i = 0; i < tableau.length; i++) {  // Correction : commencer à 0, utiliser < au lieu de <=
    console.log(tableau[i]);
}

// On s'attend à afficher "Bonjour, Alice !
let nom = "Alice";
console.log(`Bonjour, ${nom} !`);  // Correction : utiliser les backticks pour l'interpolation

let entrée = prompt("Entrez le nombre 2 :");
console.log("Type de l'entrée :", typeof entrée); // string

// Ici, on veut faire 2 + 2
// On s'attend à ce que le résultat soit 4, mais ce n'est pas le cas. Pourquoi ?
// Parce que prompt() retourne une chaîne, donc "2" + 2 = "22" (concaténation)
let nombreEntree = parseInt(entrée);  // Correction : convertir en nombre
nombreEntree = nombreEntree + 2;
if (nombreEntree > 10) {
    console.log("Le nombre est supérieur à 10");
} else {
    console.log("Le nombre est inférieur ou égal à 10");
}

Explications des corrections

Comparaison : = est pour l'assignation, === pour la comparaison stricte
Constante : const ne peut pas être modifiée, utiliser let
Conversion de type : parseInt() pour convertir chaîne en nombre
Syntaxe : Ajouter les points-virgules manquants, corriger la casse
Portée des variables : Déclarer i avant la boucle while
Valeurs falsy : undefined est falsy, donc le else s'exécute
Index des tableaux : Commencer à 0, utiliser < length
Interpolation : Utiliser ` et ${} pour insérer des variables
Prompt : Retourne une chaîne, convertir avec parseInt() pour les calculs

Correction Exercice 4

Voir le code complet

Solution JavaScript

javascript

"use strict";

// Exercice 4 : Analyse des niveaux de ki de personnages

// 1. Créer deux tableaux : personnages et ki
let personnages = ["Goku", "Vegeta", "Gohan", "Piccolo"];
let ki = [150000, 120000, 80000, 60000];

// 2. Afficher chaque personnage avec son niveau de ki
console.log("=== Liste des personnages et leur ki ===");
for (let i = 0; i < personnages.length; i++) {
    console.log(`${personnages[i]} : ${ki[i]} ki`);
}

// 3. Calculer les statistiques de base
let nombreTotal = personnages.length;
let somme = 0;

for (let i = 0; i < ki.length; i++) {
    somme += ki[i];
}

let moyenne = somme / nombreTotal;

console.log("\n=== Statistiques de base ===");
console.log("Nombre total de personnages :", nombreTotal);
console.log("Somme des ki :", somme);
console.log("Moyenne des ki :", moyenne.toFixed(2));

// 4. Compter les niveaux de ki
let nombreEleve = 0;
let nombreMoyen = 0;
let nombreFaible = 0;

for (let i = 0; i < ki.length; i++) {
    if (ki[i] >= 100000) {
        nombreEleve++;
    } else if (ki[i] >= 50000) {
        nombreMoyen++;
    } else {
        nombreFaible++;
    }
}

console.log("\n=== Analyse des niveaux de ki ===");
console.log("Nombre de personnages avec ki élevé (>= 100000) :", nombreEleve);
console.log("Nombre de personnages avec ki moyen (50000-99999) :", nombreMoyen);
console.log("Nombre de personnages avec ki faible (< 50000) :", nombreFaible);

// 5. Trouver les ki extrêmes
let kiMax = ki[0];
let kiMin = ki[0];
let persoMax = personnages[0];
let persoMin = personnages[0];

for (let i = 1; i < ki.length; i++) {
    if (ki[i] > kiMax) {
        kiMax = ki[i];
        persoMax = personnages[i];
    }
    if (ki[i] < kiMin) {
        kiMin = ki[i];
        persoMin = personnages[i];
    }
}

console.log("\n=== Ki extrêmes ===");
console.log("Ki le plus haut :", kiMax, "par", persoMax);
console.log("Ki le plus bas :", kiMin, "par", persoMin);

// 6. Appréciation générale selon la moyenne
console.log("\n=== Appréciation générale ===");
if (moyenne >= 100000) {
    console.log("Équipe surpuissante");
} else if (moyenne >= 75000) {
    console.log("Équipe très puissante");
} else if (moyenne >= 50000) {
    console.log("Équipe puissante");
} else if (moyenne >= 25000) {
    console.log("Équipe moyenne");
} else {
    console.log("Équipe faible");
}

Correction Exercice 5

Voir le code complet

Solution JavaScript

javascript

"use strict";

// Exercice 5 : Saisie interactive des personnages et ki

// 1. Demander le nombre de personnages
let nombrePersonnages;
do {
    let input = prompt("Combien de personnages voulez-vous saisir ? (au moins 1)");
    nombrePersonnages = parseInt(input);
    if (isNaN(nombrePersonnages) || nombrePersonnages <= 0) {
        alert("Veuillez saisir un nombre entier positif.");
    }
} while (isNaN(nombrePersonnages) || nombrePersonnages <= 0);

// 2. Initialiser les tableaux
let personnages = [];
let ki = [];

// 3. Saisir chaque personnage
for (let i = 0; i < nombrePersonnages; i++) {
    // Saisir le nom
    let nom = "";
    while (nom.trim() === "") {
        nom = prompt(`Nom du personnage ${i + 1} :`);
        if (nom.trim() === "") {
            alert("Le nom du personnage ne peut pas être vide.");
        }
    }
    personnages.push(nom);

    // Saisir le ki
    let niveauKi;
    let input;
    do {
        input = prompt(`Niveau de ki pour ${nom} :`);
        niveauKi = parseFloat(input);
        if (isNaN(niveauKi) || niveauKi <= 0) {
            alert("Veuillez saisir un nombre positif pour le niveau de ki.");
        }
    } while (isNaN(niveauKi) || niveauKi <= 0);
    ki.push(niveauKi);
}

// 4. Afficher les tableaux dans la console
console.log("=== Personnages saisis ===");
console.log("Noms :", personnages);
console.log("Ki :", ki);

// 5. Recherche de personnages
let recherche;
do {
    recherche = prompt("Entrez le nom du personnage à rechercher (ou 0 pour quitter) :").trim();
    if (recherche !== "0") {
        let trouve = false;
        // Itérateur manuel pour parcourir les tableaux en parallèle
        let i = 0;
        /* Tant que nous n'avons pas trouvé le personnage et que nous n'avons pas parcouru tout le tableau, nous continuons la recherche */
        while (i < personnages.length && !trouve) {
            /* Si le personnage à l'index i correspond à la recherche (en ignorant la casse), nous affichons son ki et nous marquons comme trouvé */    
            if (personnages[i].toLowerCase() === recherche.toLowerCase()) {
                // Utilisation de concaténation et interpolation
                console.log("Le ki de " + personnages[i] + " est de " + ki[i] + ".");
                console.log(`Le ki de ${personnages[i]} est de ${ki[i]}.`);
                trouve = true;
            }
            // Itérateur manuel pour continuer la recherche
            i++;
        }
        if (!trouve) {
            alert("Personnage non trouvé.");
        }
    }
} while (recherche !== "0");

// Confirmation à l'utilisateur
alert("Programme terminé !");

Résumé

Points clés à retenir

JavaScript s'inclut dans une page HTML via la balise <script src="..."></script> placée avant </body>
La console du navigateur (F12) est indispensable pour afficher des messages (console.log()) et détecter les erreurs
Le débogueur permet d'exécuter le code pas à pas avec des points d'arrêt
Toujours activer le mode strict ("use strict") au début de vos fichiers JavaScript
JavaScript est à typage dynamique : les variables changent de type selon la valeur assignée
Utilisez const par défaut, let si la valeur doit changer, et évitez var
Privilégiez l'égalité stricte (===) à l'égalité non stricte (==)
parseInt() et parseFloat() convertissent des chaînes en nombres
Les structures de contrôle (if/else, for, for...of, for...in, while, switch) permettent de contrôler le flux d'exécution du code

Module 8 : Introduction à JavaScript - Les bases du langage ​

Introduction ​

Langages en lien avec le navigateur web : ​

Objectifs du cours ​

Théorie ​

1 : Inclusion d'un fichier JavaScript dans une page HTML ​

Définition ​

Structure de fichiers recommandée ​

Intégration dans le HTML ​

Points importants ​

2 : La console du navigateur et le débogueur ​

Définition ​

Ouvrir la console ​

console.log() : afficher dans la console ​

Détection d'erreurs JavaScript ​

Comment suivre l'erreur ? ​

Utilisation du débogueur du navigateur ​

Points importants ​

3 : Alert et Prompt (boite de dialogue) ​

Définition ​

Exemples pratiques ​

Points importants ​

prompt() : saisir du texte ​

4 : Les commentaires ​

Définition ​

Commentaires sur une seule ligne ​

Commentaires sur plusieurs lignes ​

Points importants ​

5 : Le mode strict ​

Définition ​

Activation du mode strict ​

Exemples de protections offertes par le mode strict ​

Points importants ​

6 : Types et objets natifs ​

Définition ​

Typage dynamique ​

Type Number ​

Type String ​

Type Boolean ​

Type Null ​

Tableau récapitulatif des types ​

Points importants ​

7 : Variables et constantes ​

Définition ​

Déclaration de variables (let et var) ​

Différences entre var et let ​

Constantes (const) ​

Bonnes pratiques ​

Points importants ​

8 : Concaténation et interpolation de chaînes ​

Définition ​

Concaténation de chaînes ​

Interpolation de chaînes (template literals) ​

Points importants ​

9 : Tableau (array) ​

Définition ​

Contexte d'utilisation ​

Exemples pratiques ​

10 : Conversions et NaN ​

parseInt() et parseFloat() ​

NaN (Not a Number) ​

isNaN() : vérifier si une valeur est un nombre ​

Points importants ​

11 : Opérateurs de comparaison ​

Définition ​

Tableau des opérateurs ​

Points importants ​

12 : Structures de contrôle et de répétition ​

Définition ​

if / else ​

Boucle for classique ​

Boucle for...of ​

Boucle for...in ​

Boucle while ​

switch ​

Quand utiliser quelle structure ? ​

Points importants ​

Démonstration ​

Démo 1 : Premier script JavaScript ​

Objectif ​

Module 8 : Introduction à JavaScript - Les bases du langage

Introduction

Langages en lien avec le navigateur web :

Objectifs du cours

Théorie

1 : Inclusion d'un fichier JavaScript dans une page HTML

Définition

Structure de fichiers recommandée

Intégration dans le HTML

Points importants

2 : La console du navigateur et le débogueur

Définition

Ouvrir la console

`console.log()` : afficher dans la console

Détection d'erreurs JavaScript

Comment suivre l'erreur ?

Utilisation du débogueur du navigateur

Points importants

3 : Alert et Prompt (boite de dialogue)

Définition

Exemples pratiques

Points importants

`prompt()` : saisir du texte

4 : Les commentaires

Définition

Commentaires sur une seule ligne

Commentaires sur plusieurs lignes

Points importants

5 : Le mode strict

Définition

Activation du mode strict

Exemples de protections offertes par le mode strict

Points importants

6 : Types et objets natifs

Définition

Typage dynamique

Type Number

Type String

Type Boolean

Type Null

Tableau récapitulatif des types

Points importants

7 : Variables et constantes

Définition

Déclaration de variables (`let` et `var`)

Différences entre `var` et `let`

Constantes (`const`)

Bonnes pratiques

Points importants

8 : Concaténation et interpolation de chaînes

Définition

Concaténation de chaînes

Interpolation de chaînes (template literals)

Points importants

9 : Tableau (array)

Définition

Contexte d'utilisation

Exemples pratiques

10 : Conversions et NaN

`parseInt()` et `parseFloat()`

`NaN` (Not a Number)

isNaN() : vérifier si une valeur est un nombre

Points importants

11 : Opérateurs de comparaison

Définition

Tableau des opérateurs

Points importants

12 : Structures de contrôle et de répétition

Définition

`if / else`

Boucle `for` classique

Boucle `for...of`

Boucle `for...in`

Boucle `while`

`switch`

Quand utiliser quelle structure ?

Points importants

Démonstration

Démo 1 : Premier script JavaScript

Objectif