UA 5 : PROGRAMMATION EN JAVASCRIPT (partie 1/2)

## Objectifs et prérequis **Objectifs** : À la fin de ce chapitre, l’élève sera capable de : - déclarer et initialiser des variables en JavaScript en respectant les règles de nommage et de portée ; - utiliser les instructions d’entrée (`prompt`) et de sortie (`alert`, `console.log`, `document.write`) pour interagir avec l’utilisateur ; - appliquer les opérateurs arithmétiques, de comparaison et logiques pour effectuer des calculs et des tests conditionnels ; - traduire un algorithme simple (séquentiel, conditionnel ou itératif) en un programme JavaScript fonctionnel, en utilisant les structures de contrôle et les fonctions. **Prérequis** : notions de base en algorithmique (variables, affectation, entrées/sorties, structures conditionnelles et boucles) acquises en classe de Seconde ; maîtrise de l’écriture d’un algorithme en pseudo‑code ou organigramme. --- ## Introduction JavaScript est le langage de programmation embarqué dans pratiquement tous les navigateurs web. Il permet de rendre les pages interactives en manipulant le contenu HTML, en réagissant aux événements utilisateur et en effectuant des calculs côté client. Dans le cadre du probatoire, nous étudions les fondements du langage : déclaration de variables, échanges avec l’utilisateur via des boîtes de dialogue, opérations de base et traduction d’algorithmes simples. Cette première partie pose les bases indispensables avant d’aborder les objets, les événements et la manipulation du DOM dans la seconde partie du chapitre. --- ## I. Variables et Instructions d’entrée/sortie en JavaScript ### 1. Définition d’une variable > **Variable** : espace mémoire nommé permettant de stocker une valeur pouvant être modifiée durant l’exécution du programme. En JavaScript, une variable se déclare avec les mots‑clés `let`, `const` ou (déconseillé) `var`. - `let` : variable dont la valeur peut être réaffectée, portée de bloc (`{}`). - `const` : variable dont la valeur ne peut pas être changée après son initialisation (référence constante, mais l’objet ou le tableau qu’elle référence peut être modifié). - `var` : portée de fonction, à éviter en raison de son hoisting confus. **Syntaxe** : ```javascript let nomVariable = valeurInitiale; // déclaration et affectation const PI = 3.14159; // constante ``` ### 2. Types de données primitifs JavaScript possède sept types primitifs : | Type | Exemple | Remarque | |---------------|-----------------------------|----------| | `Number` | `42`, `-3.14`, `NaN` | tous les nombres sont des flottants 64 bits | | `String` | `"Bonjour"`, `'Cameroun'` | chaîne de caractères, délimités par simples ou doubles quotes | | `Boolean` | `true`, `false` | valeurs de vérité | | `Undefined` | `let x;` | variable déclarée mais non initialisée | | `Null` | `let y = null;` | absence intentionnelle de valeur | | `Symbol` | `Symbol('id')` | identificateur unique (ES6) | | `BigInt` | `12345678901234567890n` | entier de précision arbitraire (ES2020) | > **Remarque** : le type d’une variable est déterminé dynamiquement ; on peut changer le type en affectant une nouvelle valeur d’un autre type (typage faible). ### 3. Instructions d’entrée et de sortie | Instruction | Syntaxe | Effet | |-------------|---------|-------| | `prompt(message)` | `let reponse = prompt("Quel est votre âge ?");` | Affiche une boîte de dialogue modale avec un champ de saisie ; retourne la chaîne saisie (ou `null` si annulé). | | `alert(message)` | `alert("Bienvenue !");` | Affiche une boîte de dialogue modale contenant uniquement un message et un bouton OK. | | `console.log(expression)` | `console.log("Valeur :", x);` | Écrit dans la console du navigateur (outil de développement). | | `document.write(chaine)` | `document.write("<h1>Titre</h1>");` | Écrit directement dans le flux HTML de la page (à utiliser surtout pour des tests rapides). | > **À retenir** : `prompt` retourne toujours une chaîne ; pour obtenir un nombre, il faut convertir avec `Number()` ou `parseInt()/parseFloat()`. ### 4. Exemples résolus **Exemple 1 – Saisie d’un nombre et affichage du double** ```javascript // 1. Demander un nombre à l'utilisateur let saisie = prompt("Entrez un nombre :"); // 2. Convertir la chaîne en nombre flottant let nombre = parseFloat(saisie); // 3. Calculer le double let double = nombre * 2; // 4. Afficher le résultat dans une boîte d'alerte alert("Le double de " + nombre + " est " + double); ``` *Étapes* : 1. `prompt` → chaîne (ex. `"7.5"`). 2. `parseFloat("7.5")` → `7.5` (type `Number`). 3. Multiplication → `15.0`. 4. `alert` → boîte montrant `"Le double de 7.5 est 15"`. **Exemple 2 – Échange de deux variables sans variable temporaire** ```javascript let a = 10; let b = 20; console.log("Avant échange : a =", a, "b =", b); // Échange via addition/soustraction a = a + b; // a = 30 b = a - b; // b = 30 - 20 = 10 a = a - b; // a = 30 - 10 = 20 console.log("Après échange : a =", a, "b =", b); ``` *Résultat console* : ``` Avant échange : a = 10 b = 20 Après échange : a = 20 b = 10 ``` --- ## II. Opérations de base en JavaScript ### 1. Opérateurs arithmétiques | Opérateur | Signification | Exemple | |-----------|----------------|---------| | `+` | addition | `5 + 3 → 8` | | `-` | soustraction | `5 - 3 → 2` | | `*` | multiplication | `5 * 3 → 15` | | `/` | division | `6 / 2 → 3` | | `%` | modulo (reste) | `7 % 4 → 3` | | `**` | exponentiation | `2 ** 3 → 8` | | `++` | incrément (pré/post) | `let x=5; x++; // x=6` | | `--` | décrément | `let x=5; --x; // x=4` | > **Priorité** : les opérateurs unaires (`++`, `--`, `-` unaire) ont la plus haute priorité, puis l’exponentiation `**`, puis `* / %`, enfin `+ -`. Les opérateurs de même niveau s’évaluent de gauche à droite, sauf `**` qui est associatif à droite. ### 2. Opérateurs de comparaison | Opérateur | Signification | Retourne `true` si… | |-----------|----------------|----------------------| | `==` | égalité avec conversion de type | valeurs égales après coercition | | `===` | égalité stricte (pas de conversion) | mêmes type et valeur | | `!=` | inégalité avec conversion | valeurs différentes après coercition | | `!==` | inégalité stricte | différents type ou valeur | | `<` | strictement inférieur | … | | `>` | strictement supérieur | … | | `<=` | inférieur ou égal | … | | `>=` | supérieur ou égal | … | > **À retenir** : privilégier `===` et `!==` pour éviter les surprises de coercition (ex. `0 == false` vaut `true`). ### 3. Opérateurs logiques | Opérateur | Signification | Table de vérité (abréviée) | |-----------|----------------|----------------------------| | `&&` | ET logique | vrai seulement si les deux opérandes sont vrais | | `\|\|` | OU logique | vrai si au moins un opérande est vrai | | `!` | NON logique | inverse la valeur de vérité | > **Association** : `!` > `&&` > `\|\|`. > **Court‑circuit** : dans `expr1 && expr2`, si `expr1` est faux, `expr2` n’est pas évalué ; de même pour `expr1 || expr2`, si `expr1` est vrai, `expr2` est ignoré. ### 4. Exemples résolus **Exemple 3 – Évaluation d’une expression complexe** ```javascript let a = 4, b = 7, c = 3; let resultat = (a + b) * c - a ** 2 % 5; console.log("Résultat =", resultat); ``` *Calcul pas à pas* : 1. Parenthèses : `a + b = 4 + 7 = 11`. 2. Exposant : `a ** 2 = 4 ** 2 = 16`. 3. Multiplication : `(a + b) * c = 11 * 3 = 33`. 4. Modulo : `16 % 5 = 1`. 5. Soustraction finale : `33 - 1 = 32`. *Affichage* : `Résultat = 32`. **Exemple 4 – Test de majorité avec opérateurs logiques** ```javascript let age = parseInt(prompt("Quel est votre âge ?")); let estMajeur = age >= 18 && age <= 120; // âge entre 18 et 120 ans if (estMajeur) { alert("Vous êtes majeur."); } else { alert("Vous êtes mineur ou l'âge saisi est incohérent."); } ``` *Explication* : l’expression `age >= 18 && age <= 120` vaut `true` seulement si les deux conditions sont satisfaites. Le `if` exécute la branche correspondante. --- ## III. Traduction des algorithmes en JavaScript ### 1. Méthodologie de traduction 1. **Lire l’algorithme** (pseudo‑code ou organigramme) et identifier les variables, leurs types et leurs portées. 2. **Déclarer les variables** avec `let` (ou `const` si la valeur ne change pas). 3. **Traduire chaque instruction** : - affectation → `let x = valeur;` ou `x = nouvelleValeur;` - entrée/sortie → `prompt`, `alert`, `console.log` - opération → utiliser les opérateurs vus précédemment - condition → `if (condition) { … } else { … }` - boucle tant que → `while (condition) { … }` - boucle pour → `for (initialisation; condition; miseÀJour) { … }` 4. **Regrouper les blocs logiques** dans des fonctions si l’algorithme contient des sous‑tâches répétées. 5. **Tester** le script dans la console du navigateur ou via un fichier HTML simple. ### 2. Structures de contrôle #### Instruction conditionnelle ```javascript if (condition) { // bloc exécuté si condition vraie } else if (autreCondition) { // bloc exécuté si première fausse et deuxième vraie } else { // bloc exécuté si toutes les conditions fausses } ``` #### Boucle `while` ```javascript while (condition) { // instructions à répéter tant que condition vraie } ``` #### Boucle `for` ```javascript for (let i = 0; i < n; i++) { // i prend les valeurs 0,1,…,n-1 } ``` > **À retenir** : dans une boucle `for`, l’expression d’initialisation peut déclarer une variable avec `let`; celle‑ci n’est visible que dans le bloc de la boucle. ### 3. Fonctions Une fonction encapsule un groupe d’instructions pouvant être réutilisé. ```javascript function nomFonction(param1, param2, ...) { // corps de la fonction return valeurÀRetourner; // optionnel } ``` Appel : `let résultat = nomFonction(arg1, arg2, ...);` > **Portée** : les variables déclarées avec `let` ou `const` à l’intérieur d’une fonction sont locales à cette fonction. ### 4. Exemples d’algorithmes traduits **Algorithme A – Somme des n premiers entiers** *Pseudo‑code* : ``` Début Lire n somme ← 0 Pour i de 1 à n faire somme ← somme + i FinPour Écrire somme Fin ``` *Traduction JavaScript* : ```javascript let n = parseInt(prompt("Entrez un entier positif n :")); let somme = 0; for (let i = 1; i <= n; i++) { somme = somme + i; // ou somme += i; } alert("La somme des " + n + " premiers entiers est " + somme); ``` *Vérification* : pour `n = 5`, la boucle ajoute 1+2+3+4+5 = 15 → alert affiche 15. **Algorithme B – Recherche du maximum d’un tableau** *Pseudo‑code* : ``` Début Lire taille t Déclarer tableau T[0..t-1] Pour i de 0 à t-1 faire Lire T[i] FinPour max ← T[0] Pour i de 1 à t-1 faire Si T[i] > max alors max ← T[i] FinSi FinPour Écrire max Fin ``` *Traduction JavaScript* : ```javascript let t = parseInt(prompt("Entrez la taille du tableau :")); let T = new Array(t); for (let i = 0; i < t; i++) { T[i] = parseInt(prompt("Entrez l'élément " + (i+1) + " :")); } let max = T[0]; for (let i = 1; i < t; i++) { if (T[i] > max) { max = T[i]; } } alert("Le maximum du tableau est " + max); ``` *Explication* : la première boucle remplit le tableau, la deuxième parcourt le tableau en mettant à jour `max` chaque fois qu’une valeur plus grande est rencontrée. --- ## Synthèse du chapitre - **Variables** : déclarées avec `let`/`const`; types primitifs (`Number`, `String`, `Boolean`, `Undefined`, `Null`, `Symbol`, `BigInt`). - **Entrée/Sortie** : `prompt` (chaîne), `alert`, `console.log`, `document.write`. Conversion nécessaire (`Number()`, `parseInt`, `parseFloat`). - **Opérateurs** : arithmétiques (`+ - * / % ** ++ --`), de comparaison (`== === != !== < > <= >=`), logiques (`&& || !`). Priorité et associativité à respecter. - **Structures de contrôle** : `if…else if…else`, `while`, `for`. - **Fonctions** : bloc réutilisable, mot‑clé `function`, retour avec `return`. - **Traduction d’algorithme** : suivre les étapes de déclaration, traduction ligne par ligne, test et débogage. > **Formule de la somme des n premiers entiers** : $S_n = \frac{n(n+1)}{2}$ (utile pour vérifier les boucles). --- ## Glossaire - **Variable** : espace mémoire nommé pouvant contenir une valeur modifiable. - **Let** : mot‑clé de déclaration de variable de portée bloc, réaffectable. - **Const** : mot‑clé de déclaration de variable constante (référence non réaffectable). - **Prompt** : fonction affichant une boîte de dialogue de saisie, retournant une chaîne. - **Alert** : fonction affichant une boîte de dialogue d’information. - **Console.log** : fonction écrivant un message dans la console du développeur. - **Opérateur unaire** : opérateur ne nécessitant qu’un seul opérande (ex. `++`, `--`, `-`). - **Opérateur binaire** : opérateur nécessitant deux opérandes (ex. `+`, `&&`). - **Court‑circuit** : évaluation partielle d’une expression logique où le second opérande n’est pas évalué si le résultat est déjà déterminé. - **Fonction** : sous‑programme pouvant recevoir des paramètres et retourner une valeur. - **Portée (scope)** : région du code où une variable est accessible. - **Tableau** : structure de données ordonnée permettant de stocker plusieurs valeurs sous un même nom. --- ## Exercices d'application corrigés ### Exercice 1 – Conversion de température **Énoncé** : Écrire un script qui demande à l’utilisateur une température en degrés Celsius, la convertit en Fahrenheit ($F = C \times \frac{9}{5} + 32$) et affiche le résultat dans une boîte d’alerte. **Corrigé** ```javascript let celsius = parseFloat(prompt("Entrez la température en °C :")); let fahrenheit = celsius * 9/5 + 32; alert(celsius + " °C équivaut à " + fahrenheit + " °F"); ``` *Justification* : `parseFloat` transforme la chaîne saisie en nombre décimal ; la formule est appliquée directement ; `alert` restitue le résultat. --- ### Exercice 2 – Pair ou impair **Énoncé** : Lire un entier n et afficher « Pair » si n est divisible par 2, sinon « Impair ». **Corrigé** ```javascript let n = parseInt(prompt("Entrez un entier :")); if (n % 2 === 0) { alert("Pair"); } else { alert("Impair"); } ``` *Justification* : l’opérateur modulo `%` donne le reste de la division par 2 ; le reste nul indique un nombre pair. L’égalité stricte `===` évite toute coercition. --- ### Exercice 3 – Factorielle d’un nombre **Énoncé** : Calculer la factorielle de n (n! = 1×2×…×n) avec une boucle `while` et afficher le résultat. **Corrigé** ```javascript let n = parseInt(prompt("Entrez un entier positif n :")); let facteur = 1; let i = 1; while (i <= n) { facteur = facteur * i; // facteur *= i; i++; } alert("Factorielle de " + n + " = " + facteur); ``` *Justification* : initialisation du produit à 1 ; la boucle multiplie successivement chaque entier de 1 à n ; incrément de `i` à chaque itération. --- ### Exercice 4 – Moyenne de trois notes **Énoncé** : Demander trois notes (entre 0 et 20), calculer leur moyenne et indiquer si l’étudiant est admis (moyenne ≥ 10) ou refusé. **Corrigé** ```javascript let note1 = parseFloat(prompt("Entrez la première note (0‑20) :")); let note2 = parseFloat(prompt("Entrez la deuxième note (0‑20) :")); let note3 = parseFloat(prompt("Entrez la troisième note (0‑20) :")); let moyenne = (note1 + note2 + note3) / 3; if (moyenne >= 10) { alert("Moyenne = " + moyenne.toFixed(2) + " → Admis"); } else { alert("Moyenne = " + moyenne.toFixed(2) + " → Refusé"); } ``` *Justification* : `toFixed(2)` limite l’affichage à deux décimales pour une meilleure lisibilité. La condition utilise l’opérateur de comparaison `>=`. --- ### Exercice 5 – Table de multiplication **Énoncé** : Afficher dans la console la table de multiplication d’un nombre choisi par l’utilisateur (de 1 à 10). **Corrigé** ```javascript let n = parseInt(prompt("Entrez un nombre pour sa table de multiplication :")); console.log("Table de multiplication de " + n + " :"); for (let i = 1; i <= 10; i++) { console.log(n + " × " + i + " = " + (n * i)); } ``` *Justification* : la boucle `for` parcourt les valeurs de 1 à 10 ; chaque ligne est affichée via `console.log`. --- ### Exercice 6 – Recherche d’une valeur dans un tableau **Énoncé** : Lire 5 entiers, les stocker dans un tableau, puis demander une valeur à rechercher. Afficher « Trouvé à l’indice i » (première occurrence) ou « Non trouvé ». **Corrigé** ```javascript let taille = 5; let tab = new Array(taille); for (let i = 0; i < taille; i++) { tab[i] = parseInt(prompt("Entrez l'entier " + (i+1) + " :")); } let valeur = parseInt(prompt("Entrez la valeur à chercher :")); let indice = -1; // valeur par défaut si non trouvée for (let i = 0; i < taille; i++) { if (tab[i] === valeur) { indice = i; break; // sortir dès la première occurrence } } if (indice !== -1) { alert("Valeur trouvée à l'indice " + indice); } else { alert("Valeur non trouvée dans le tableau"); } ``` *Justification* : on parcourt le tableau avec une boucle `for` ; dès qu’une égalité stricte est rencontrée, on enregistre l’indice et on sort de la boucle grâce à `break`. Après la boucle, on teste si `indice` a été modifié. --- ## Erreurs fréquentes | # | Erreur typique | Conséquence | Comment l’éviter | |---|----------------|-------------|------------------| | 1 | Oublier de convertir le résultat de `prompt` en nombre (`let age = prompt(...);` puis `age + 5` donne une concaténation de chaînes). | Résultat inattendu (ex. `"25" + 5 → "255"`). | Toujours appliquer `Number()`, `parseInt()` ou `parseFloat()` après `prompt`. | | 2 | Utiliser `=` au lieu de `==` ou `===` dans une condition (`if (x = 5)`). | Affectation au lieu de comparaison → condition toujours vraie, comportement logique erroné. | Vérifier que les conditions utilisent `==`/`===` (de préférence `===`). | | 3 | Confondre la portée d’une variable déclarée avec `var` à l’intérieur d’une boucle et croire qu’elle est locale. | Variable accessible en dehors du bloc, pouvant provoquer des effets de bord. | Préférer `let` ou `const` pour les variables de boucle. | | 4 | Oublier le `break` dans une recherche linéaire, ce qui entraîne l’écrasement de l’indice par la dernière occurrence trouvée. | Retourne l’indice de la dernière occurrence au lieu de la première. | Ajouter `break` dès que la première correspondance est trouvée. | | 5 | Utiliser `alert` pour afficher des résultats numériques sans convertir en chaîne, ce qui fonctionne mais peut mener à des confusions lorsqu’on veut ajouter du texte. | Sortie parfois difficile à lire (ex. `alert(5 + " est le résultat")` → `"5 est le résultat"`). | Toujours construire explicitement la chaîne à afficher (`let msg = valeur + " texte"; alert(msg);`). | | 6 | Négliger la priorité des opérateurs dans une expression complexe (`let res = 2 + 3 * 4;` attendu 14 mais on pense 20). | Résultat erroné, difficulté à déboguer. | Mettre des parenthèses pour clarifier l’ordre d’évaluation ou revoir la table de priorité. | --- *Fin du cours.*