Le compteur du taxi
Prix = prise en charge + distance × prix au km. En JavaScript, les opérateurs + - * / % font les calculs comme sur une calculatrice.
const priseEnCharge = 7.5; const km = 12; const prix = priseEnCharge + km * 1.6; // 26.7
M05 · B. Acquérir les fondamentaux de JavaScript
Opérateurs, lecture et écriture
Calculer avec les opérateurs arithmétiques, comparer avec ===, combiner des conditions avec && et ||, construire des textes avec les gabarits, et lire ou afficher des données.
1Situer
Un taxi de Casablanca veut une petite page qui estime le prix d'une course : prise en charge, prix au kilomètre, majoration de nuit, et un message clair pour le client. Il faut calculer, comparer, et afficher le résultat dans une phrase lisible.
2Comprendre
À gauche le nombre 5, à droite le texte '5'. Ils se ressemblent, mais leurs types sont différents.
1 / 5
Les opérateurs arithmétiques
| Opérateur | Rôle | Exemple |
|---|---|---|
+ - * / | calculs | 7.5 + 12 * 1.6 |
% | reste de la division (modulo) | 17 % 5 vaut 2 |
** | puissance | 2 ** 3 vaut 8 |
++, -- | ajouter, retirer 1 | compteur++ |
+=, -=, *= | modifier une variable | prix *= 1.5 |
Comparaison et logique
| Opérateur | Sens |
|---|---|
===, !== | égal, différent (valeur et type) |
<, <=, >, >= | comparaisons |
&& | ET : les deux conditions |
|| | OU : au moins une |
! | NON |
On utilise toujours === : == convertit les types avant de comparer (5 == '5' est vrai), ce qui crée des erreurs difficiles à trouver.
Construire un texte
const prix = 40.05;
'Prix : ' + prix + ' DH' // concaténation
`Prix : ${prix} DH` // gabarit (template literal), plus lisible
prix.toFixed(2) // "40.05" : 2 décimales
Les nombres à virgule sont stockés en binaire, avec de minuscules erreurs : 7.5 + 12 * 1.6 donne 26.700000000000003. On arrondit à l’affichage avec toFixed(2).
Lire et écrire
| Lire (entrée) | Écrire (sortie) |
|---|---|
prompt('Question ?') : renvoie une chaîne | alert('Message') : boîte de dialogue |
la valeur d’un champ : input.value (partie D) | console.log(...) : pour le développeur |
element.textContent = ... : dans la page |
Dans un vrai site, on évite prompt et alert (bloquants, peu esthétiques) : on lit des champs de formulaire et on écrit dans la page.
Une phrase avec des trous
Un gabarit (entre accents graves) est une phrase avec des trous ${...} que JavaScript remplit avec les valeurs.
const ville = 'Casablanca'; console.log(`Course à ${ville} : ${prix} DH`);
Publicité
3Manipuler
Complétez le calcul du prix de la course. Les résultats s'affichent dans la console et dans la page.
Console
- Calculez nuit avec heure >= 22 || heure < 6 et affichez-la dans la console (true)
- Si c'est la nuit, majorez le prix de 50 % : la console doit afficher 40.05
- Affichez dans la page la phrase « Course de 12 km : ... DH » avec un gabarit
- Arrondissez le prix affiché à 2 décimales avec toFixed(2) (40.05)
4Pratiquer
Exercice 1 · == ou === ?
Que valent : (1) 5 == '5' ; (2) 5 === '5' ; (3) 0 == false ; (4) 0 === false ? Lequel utiliser ?
Voir le corrigé
5 == '5' // true (== convertit avant de comparer) 5 === '5' // false (types différents) 0 == false // true 0 === false // false // On utilise toujours === et !== : pas de conversion cachée.
Exercice 2 · Pair ou impair
Écrivez l'expression qui vaut true si le nombre n est pair.
Voir un indice
L'opérateur % donne le reste de la division.
Voir le corrigé
const estPair = n % 2 === 0;
Exercice 3 · Lire une valeur
Demandez la distance au client avec prompt, convertissez-la en nombre et affichez le prix avec alert.
Voir le corrigé
const km = Number(prompt('Distance en km ?')); const prix = 7.5 + km * 1.6; alert(`Prix estimé : ${prix.toFixed(2)} DH`); // prompt renvoie toujours une chaîne : il faut la convertir.
Publicité