ISAE - GAFSA

Institut Supérieur d'Administration des Entreprises

Matière : Développement Web 2

Enseignant : KHMIL Boubaker

Niveau : 2ème Année Business Computing

Travaux Pratiques N°1

JavaScript : Prise en Main

Environnement, Variables, Types de Données et Structures de Contrôle

Objectifs Pédagogiques

1

Environnement de Travail

1.1 Les trois piliers du Web

Avant de commencer, comprenons comment JavaScript s'intègre dans un projet web :

Technologie Rôle Analogie
HTML Structure et contenu Le squelette d'une maison
CSS Mise en forme et design La peinture et la décoration
JavaScript Interactivité et logique L'électricité et la plomberie

1.2 Installation des Outils

Visual Studio Code
  1. Rendez-vous sur https://code.visualstudio.com/
  2. Téléchargez la version correspondant à votre système
  3. Installez le logiciel (cochez "Ajouter au PATH")
Extensions recommandées

Dans VS Code, ouvrez le panneau Extensions (Ctrl+Shift+X) et installez :

  • Live Server — Serveur local avec rechargement automatique
  • Prettier — Formatage automatique du code

1.3 Structure du Projet

  1. Créez un dossier TP-JavaScript sur votre Bureau
  2. Dans ce dossier, créez un sous-dossier TP1
  3. Dans VS Code : Fichier → Ouvrir le dossier → Sélectionnez TP1
TP-JavaScript/
└── TP1/
    ├── index.html
    └── script.js
À faire maintenant

Créez cette structure de dossiers et ouvrez le dossier TP1 dans VS Code.

2

Premier Contact avec JavaScript

2.1 La Console du Navigateur

La console est l'outil principal pour tester du code et déboguer. Elle affiche les messages, erreurs et permet d'exécuter du JavaScript en temps réel.

Navigateur Raccourci Alternative
Chrome F12 puis onglet Console Clic droit → Inspecter → Console
Firefox F12 puis onglet Console Menu → Outils → Développement Web
À faire maintenant

Ouvrez votre navigateur, appuyez sur F12 et repérez l'onglet Console.

2.2 Les méthodes de la console

JavaScript offre plusieurs méthodes pour afficher des informations dans la console :

// Message standard
console.log("Ceci est un message normal");

// Avertissement (apparaît en jaune)
console.warn("Attention : valeur inattendue");

// Erreur (apparaît en rouge)
console.error("Erreur : variable non définie");

// Afficher le contenu d'un objet
console.table({ nom: "Ahmed", age: 20 });
À faire maintenant

Copiez ce code et collez-le directement dans la console. Observez les différences d'affichage entre log, warn et error.

2.3 Opérations de base

Testez ces opérations arithmétiques dans la console :

console.log(10 + 5);      // Addition → 15
console.log(20 - 8);      // Soustraction → 12
console.log(4 * 7);       // Multiplication → 28
console.log(15 / 3);      // Division → 5
console.log(17 % 5);      // Modulo (reste) → 2
console.log(2 ** 3);      // Puissance → 8
Le modulo

L'opérateur % retourne le reste d'une division. Il est utile pour vérifier si un nombre est pair : n % 2 === 0.

2.4 Création des fichiers du projet

Fichier index.html

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

Fichier script.js

// Vérification du chargement
console.log("Fichier script.js chargé avec succès");
À faire maintenant

Créez ces deux fichiers dans votre dossier TP1. Clic droit sur index.html → "Open with Live Server". Ouvrez la console pour vérifier que le message apparaît.

3

Variables et Types de Données

3.1 Qu'est-ce qu'une variable ?

Une variable est un espace de stockage nommé qui contient une valeur. Elle permet de mémoriser et réutiliser des données dans un programme.

let nomVariable = valeur;
 │       │          │
 │       │          └── Valeur assignée
 │       └── Identifiant (nom)
 └── Mot-clé de déclaration

3.2 let vs const

JavaScript moderne propose deux mots-clés principaux pour déclarer des variables :

Mot-clé Réassignation Usage
let Oui Valeurs qui changent (compteurs, entrées utilisateur)
const Non Valeurs fixes (configurations, constantes mathématiques) 
// Variable modifiable
let score = 0;
score = 10;           // OK

// Constante (non modifiable)
const TVA = 0.19;
TVA = 0.20;            // ERREUR: Assignment to constant variable

// Convention : constantes en MAJUSCULES
const MAX_TENTATIVES = 3;
const URL_API = "https://api.exemple.com";
À propos de var

Le mot-clé var existe mais est considéré obsolète. Utilisez toujours let ou const.

3.3 Règles de nommage

// Noms valides
let prenom = "Ahmed";
let _compteur = 0;
let $prix = 99.99;
let dateNaissance = "2004-05-15";    // camelCase recommandé

// Noms invalides
let 2nom = "erreur";      // Commence par un chiffre
let mon-nom = "erreur";   // Contient un tiret
let let = "erreur";       // Mot réservé
Règles à retenir
  • Commence par une lettre, _ ou $
  • Sensible à la casse (age ≠ Age)
  • Pas de mots réservés (let, const, function...)
  • Utilisez le camelCase : nomComplet, dateInscription
À faire maintenant

Dans votre fichier script.js, déclarez trois variables : votre prénom, votre âge, et votre filière. Affichez-les dans la console.

3.4 Types de données primitifs

JavaScript est un langage à typage dynamique : le type est déterminé automatiquement selon la valeur.

Type Description Exemples
String Chaîne de caractères "Bonjour", 'Hello'
Number Nombre (entier ou décimal) 42, 3.14, -17
Boolean Valeur logique true, false
Undefined Variable déclarée sans valeur undefined
Null Absence intentionnelle de valeur null 
let nom = "Fatma Ben Ali";         // String
let age = 21;                       // Number (entier)
let moyenne = 14.75;                // Number (décimal)
let estInscrit = true;             // Boolean
let adresse;                        // Undefined
let telephone = null;              // Null

// Vérifier le type avec typeof
console.log(typeof nom);           // "string"
console.log(typeof age);           // "number"
console.log(typeof estInscrit);    // "boolean"
Particularité de typeof null

typeof null retourne "object". C'est un bug historique de JavaScript qui persiste pour des raisons de compatibilité.

3.5 Piège courant : la coercition de type

JavaScript convertit automatiquement les types dans certaines opérations, ce qui peut produire des résultats inattendus :

// Concaténation inattendue
console.log("5" + 1);          // "51" (string) - le + concatène
console.log("5" - 1);          // 4 (number) - le - force la conversion

// Solution : conversion explicite
console.log(Number("5") + 1);  // 6
console.log(parseInt("5") + 1); // 6

// Vérification stricte
console.log(5 == "5");         // true (compare seulement la valeur)
console.log(5 === "5");        // false (compare valeur ET type)
Bonne pratique

Utilisez toujours === et !== pour éviter les conversions implicites.

À faire maintenant

Testez dans la console : "10" + 5, "10" - 5, et Number("10") + 5. Comprenez-vous les différences ?

3.6 Template Literals

Les template literals permettent d'insérer des variables directement dans une chaîne :

let prenom = "Mohamed";
let age = 20;

// Méthode classique (concaténation)
let msg1 = "Je m'appelle " + prenom + " et j'ai " + age + " ans.";

// Template literal (recommandé)
let msg2 = `Je m'appelle ${prenom} et j'ai ${age} ans.`;

// Avantage : expressions possibles
console.log(`Dans 5 ans, j'aurai ${age + 5} ans.`);
Clavier

Les backticks ` s'obtiennent avec AltGr + 7 sur un clavier AZERTY français.

3.7 Saisie utilisateur avec prompt()

La fonction prompt() affiche une boîte de dialogue et retourne la saisie de l'utilisateur :

let nom = prompt("Quel est votre nom ?");
console.log(`Bonjour, ${nom} !`);

// Attention : prompt() retourne toujours une String
let ageStr = prompt("Quel est votre âge ?");
console.log(typeof ageStr);     // "string"

// Conversion nécessaire pour les calculs
let age = Number(ageStr);
console.log(`Dans 10 ans, vous aurez ${age + 10} ans.`);
Note importante

prompt() bloque l'exécution de la page. Elle est utile pour apprendre, mais évitez-la dans de vrais projets. Nous verrons les formulaires HTML plus tard.

4

Structures de Contrôle

4.1 Opérateurs de comparaison

Opérateur Signification Exemple Résultat
=== Strictement égal 5 === "5" false
!== Strictement différent 5 !== "5" true
> Supérieur à 10 > 5 true
< Inférieur à 3 < 2 false
>= Supérieur ou égal 10 >= 10 true
<= Inférieur ou égal 7 <= 5 false

4.2 Opérateurs logiques

Opérateur Nom Description
&& ET (AND) Vrai si toutes les conditions sont vraies
|| OU (OR) Vrai si au moins une condition est vraie
! NON (NOT) Inverse la valeur booléenne

4.3 Condition if / else if / else

let note = 14;

if (note >= 16) {
    console.log("Mention Très Bien");
} else if (note >= 14) {
    console.log("Mention Bien");
} else if (note >= 12) {
    console.log("Mention Assez Bien");
} else if (note >= 10) {
    console.log("Admis");
} else {
    console.log("Non admis");
}
// Avec opérateurs logiques
let age = 20;
let aPermis = true;

if (age >= 18 && aPermis) {
    console.log("Vous pouvez conduire");
} else {
    console.log("Vous ne pouvez pas conduire");
}
À faire maintenant

Modifiez la valeur de note pour tester chaque branche de la condition. Vérifiez que le bon message s'affiche.

4.4 Boucle for

Répète un bloc de code un nombre défini de fois.

// Syntaxe
for (initialisation; condition; incrémentation) {
    // Code à répéter
}

// Exemple : nombres de 1 à 5
for (let i = 1; i <= 5; i++) {
    console.log(`Numéro : ${i}`);
}

// Décomposition :
// let i = 1  → Initialisation
// i <= 5    → Condition de continuation
// i++       → Incrémentation (i = i + 1)
// Table de multiplication
let nombre = 7;
console.log(`Table de ${nombre}`);

for (let i = 1; i <= 10; i++) {
    console.log(`${nombre} × ${i} = ${nombre * i}`);
}
À faire maintenant

Écrivez une boucle qui affiche les nombres pairs de 2 à 20.

4.5 Boucle while

Répète tant qu'une condition est vraie.

let compteur = 5;

while (compteur > 0) {
    console.log(`Décompte : ${compteur}`);
    compteur--;
}
console.log("Décollage !");
Danger : boucle infinie

Si la condition ne devient jamais false, la boucle tourne indéfiniment et bloque le navigateur. Assurez-vous toujours de modifier la variable de contrôle.

// DANGER : boucle infinie
let x = 1;
while (x > 0) {
    console.log(x);
    // x n'est jamais modifié → boucle infinie
}

4.6 break et continue

// break : sortir de la boucle
for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        console.log("Arrêt à 5");
        break;
    }
    console.log(i);
}
// Affiche : 1, 2, 3, 4, "Arrêt à 5"

// continue : passer à l'itération suivante
for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        continue;
    }
    console.log(i);
}
// Affiche : 1, 2, 4, 5 (sans 3)
5

Outils de Débogage

5.1 L'instruction debugger

Le mot-clé debugger met en pause l'exécution du code. Les DevTools s'ouvrent automatiquement et vous pouvez inspecter les variables.

let a = 5;
let b = 10;
debugger;  // L'exécution s'arrête ici
let somme = a + b;
console.log(somme);

5.2 Points d'arrêt (Breakpoints)

Dans les DevTools (F12), onglet Sources :

  1. Ouvrez votre fichier JavaScript
  2. Cliquez sur le numéro d'une ligne pour ajouter un point d'arrêt
  3. Rechargez la page — l'exécution s'arrête à cette ligne
  4. Utilisez les boutons pour avancer pas à pas
À faire maintenant

Ajoutez debugger; dans votre code, rechargez la page, et observez comment inspecter les variables dans le panneau "Scope".

6

Exercices

Ces exercices sont à réaliser dans votre fichier script.js. Testez chaque exercice avant de passer au suivant.

Exercice 1 Carte d'identité

Déclarez des variables pour stocker vos informations (nom, prénom, âge, filière) et affichez une présentation formatée dans la console.

// Résultat attendu :
// ================================
//   CARTE ÉTUDIANT ISAE-GAFSA
// ================================
// Nom : Ben Ali
// Prénom : Fatma
// Âge : 21 ans
// Filière : Business Computing
// ================================
Exercice 2 Calculateur de moyenne

Calculez la moyenne de 4 notes et déterminez la mention obtenue. Affichez un rapport complet.

let note1 = 12;
let note2 = 15;
let note3 = 9;
let note4 = 14;

// Calculez la moyenne
// Déterminez la mention
// Indiquez si l'étudiant passe au rattrapage (8 <= moyenne < 10)
Exercice 3 Générateur de motif

Utilisez des boucles pour afficher ce motif :

*
**
***
****
*****

Indice : utilisez une boucle imbriquée ou la méthode repeat().

Exercice 4 Nombre premier

Écrivez un programme qui vérifie si un nombre est premier (divisible uniquement par 1 et lui-même).

let nombre = 17;
let estPremier = true;

// Testez les diviseurs de 2 à nombre-1
// Si un diviseur est trouvé, le nombre n'est pas premier
Exercice 5 FizzBuzz

Affichez les nombres de 1 à 30 avec ces règles :

  • Divisible par 3 → afficher "Fizz"
  • Divisible par 5 → afficher "Buzz"
  • Divisible par 3 ET 5 → afficher "FizzBuzz"
  • Sinon → afficher le nombre

Récapitulatif

Concept Syntaxe
Variable modifiable let nom = valeur;
Constante const NOM = valeur;
Affichage console console.log(), .warn(), .error()
Template literal `Texte ${variable}`
Conversion de type Number(), String(), Boolean()
Condition if (cond) { } else { }
Boucle for for (let i = 0; i < n; i++) { }
Boucle while while (condition) { }
Débogage debugger; ou breakpoints (F12)

Ressources complémentaires