01Premiers mots en JavaScript
JavaScript donne un comportement à une page web. Le navigateur lit le HTML, applique le CSS, puis exécute JavaScript.
Pour commencer, aucun framework ni outil d’installation n’est nécessaire. Un fichier index.html, un navigateur et DevTools suffisent.
Objectif
Afficher un message dans la page et dans la Console, puis observer l’effet d’une modification après un refresh.
Vocabulaire
Une instruction demande une action. Une expression produit une valeur. Une variable associe un nom à une valeur.
Un index.html sans dépendance
Copiez ce document dans un fichier nommé index.html, puis ouvrez-le dans un navigateur.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first JavaScript page</title>
</head>
<body>
<h1 id="message">Waiting…</h1>
<script>
const learnerName = "Sam";
const message = `Hello, ${learnerName}!`;
console.log(message);
document.querySelector("#message").textContent = message;
</script>
</body>
</html>- Ouvrez DevTools puis l’onglet Console.
- Repérez le message affiché par console.log.
- Changez la valeur de learnerName et sauvegardez le fichier.
- Rafraîchissez la page : le navigateur relit le fichier et exécute à nouveau le script.
02Valeurs et types
Un programme transforme des valeurs. Commencez par reconnaître leur type et donner des noms précis aux données utiles.
| Type | Exemple | Usage |
|---|---|---|
string | "Ada" | Texte |
number | 42 | Calcul |
boolean | true | Décision |
null | null | Absence explicite |
Est-ce que string, number, boolean et null sont les seuls types ?
Non. Ce sont les premiers types primitifs présentés ici. JavaScript possède aussi undefined, bigint et symbol, ainsi que des valeurs composées comme les objets, les tableaux et les fonctions.
const unitPrice = 18;
const quantity = 3;
const total = unitPrice * quantity;
const summary = `Total: ${total} EUR`;
console.log(summary);Prédisez les valeurs de total et summary avant d’exécuter le code. Vérifiez ensuite dans la Console.
03Variables et expressions
Une variable garde une valeur sous un nom. Une expression combine des valeurs et des opérateurs pour produire un nouveau résultat.
const firstName = "Ada";
const completedExercises = 3;
const totalExercises = 5;
const remainingExercises = totalExercises - completedExercises;
const message = `${firstName}: ${remainingExercises} remaining`;
console.log(message);const
Déclare un nom qui ne sera pas réassigné.
Expression
Produit une valeur, par exemple totalExercises - completedExercises.
Changez les nombres, prédisez remainingExercises, puis vérifiez le résultat dans la Console.
04Petites fonctions
Une fonction reçoit des données, effectue une transformation courte et retourne un résultat.
function calculateTotal(unitPrice, quantity) {
return unitPrice * quantity;
}
const firstTotal = calculateTotal(18, 3);
const secondTotal = calculateTotal(12, 5);
console.log(firstTotal);
console.log(secondTotal);Les paramètres unitPrice et quantity prennent les valeurs fournies lors de chaque appel.
Écrivez une fonction calculateAverage qui reçoit trois nombres et retourne leur moyenne.
05Sorties dans la Console
La Console montre les valeurs que le programme produit et les erreurs que le navigateur rencontre.
const learner = "Sam";
const score = 14;
const passed = score >= 10;
console.log("learner", learner);
console.log("score", score);
console.log("passed", passed);console.log()- Affiche une valeur pendant l’exécution.
console.table()- Présente une collection sous forme de tableau.
console.error()- Signale explicitement une situation incorrecte.
Ajoutez un label
Un label court devant chaque valeur rend la sortie plus facile à relire.
06Lire et corriger les erreurs
Une erreur est une information : elle indique un type de problème, un message et souvent une ligne de fichier.
const userName = "Ada";
console.log(username);
// ReferenceError: username is not definedJavaScript distingue les majuscules et les minuscules. Ici, userName et username sont deux noms différents.
Corrigez le nom, sauvegardez, rafraîchissez, puis confirmez que l’erreur a disparu.
07Console, sauvegarde et refresh
Le navigateur n’exécute pas automatiquement le contenu que vous venez de modifier sur disque. Sauvegardez, rafraîchissez, puis lisez les preuves.
- Sauvegardez index.html dans l’éditeur.
- Rafraîchissez la page dans le navigateur.
- Lisez la première erreur rouge dans la Console, si elle existe.
- Cliquez le lien de fichier et de ligne pour retrouver l’instruction concernée.
- Corrigez une seule hypothèse, puis répétez la boucle.
console.log("current value", currentValue);
console.table(tasks);
console.error("Expected a number", receivedValue);Trois questions utiles
Quelle instruction a échoué ? Quelle valeur réelle ai-je reçue ? Quel résultat précis attendais-je ?
08Lab et vérification finale
Le Lab exécute votre code dans un iframe sandboxed distinct de cette page. Utilisez-le pour vérifier de petites hypothèses.
- Créez une variable learnerName et affichez un message avec une template string.
- Créez un array de trois nombres et calculez leur total.
- Écrivez une fonction qui retourne la moyenne.
- Utilisez une condition pour afficher "Pass" lorsque la moyenne est au moins 10.
- Expliquez à voix haute la différence entre sauvegarder un fichier et rafraîchir une page.
Critère de fin
Vous pouvez lire un court programme, prédire son résultat, l’exécuter, interpréter la Console et corriger une erreur simple.