1. À quoi sert JavaScript ?
- Détecter le comportement d’un utilisateur (clic, saisie…).
- Améliorer l’expérience utilisateur (UX).
- AJAX : récupérer des données sans recharger toute la page.
2. L’environnement
| Outil | Rôle |
|---|---|
| Chrome | Navigateur recommandé · Console via clic droit → Inspecter |
| Node.js | Exécuter du JS hors navigateur |
| VS Code | Éditeur de code |
Premier test dans la console Chrome :
console.log("Hello");Astuce dossier : nommer 01-Programme sans espaces.
3. Intégrer du JS
<!-- Dans le HTML -->
<script>
console.log("Hello");
</script>
<!-- Fichier externe -->
<script src="exemple.js"></script>4. Les variables
Une variable = une étiquette sur une boîte qui stocke une valeur.
| Mot-clé | Usage |
|---|---|
let | Valeur modifiable |
const | Valeur fixe (constante) |
var | Ancienne façon (globale) — on y reviendra |
let prenom = "Max"; // string → guillemets
let age = 30; // number → pas de guillemets
let majorite = true; // boolean → true / false
prenom = "Kevin"; // ✅ modification OK avec let
// const prenom = "Max"; prenom = "Kevin"; → ❌ erreur- On ne redéclare pas deux fois la même variable avec
let. - On peut réassigner une variable déjà déclarée avec
let.
5. Concaténation
Assembler du texte avec + :
let prenom = "Max";
console.log("Bonjour " + prenom + " !");
// → Bonjour Max !Les espaces à l’intérieur des guillemets comptent.
6. Pratiquer dans la Console Chrome
| Outil | Rôle |
|---|---|
| VS Code | Écrire et enregistrer le code |
| Console Chrome (F12) | Tester, voir le résultat, lire les erreurs |
Terminal + node fichier.js | Alternative pour lancer un fichier entier dans VS Code |
Dans la console, on peut taper le nom d’une variable (prenom) pour afficher sa valeur.
On ne commence pas par le débogueur VS Code (breakpoints, Espion) en Journée 1.
7. Opérateurs mathématiques
| Opérateur | Sens | Exemple |
|---|---|---|
+ - * / | Calculs de base | 8 + 4 → 12 |
% | Modulo (reste) | 8 % 3 → 2 |
** | Puissance | 5 ** 2 → 25 |
++ | +1 | result++ |
-- | −1 | result-- |
let nb1 = 8, nb2 = 4, result;
result = nb1 + nb2; // 128. Lier HTML et JavaScript
<body>
<script src="exemple.js"></script>
</body>Ouvrir le fichier .html dans Chrome pour tester les dialogues (pas le .js seul).
9. Boîtes de dialogue
| Fonction | Rôle | Retour |
|---|---|---|
alert("msg") | Affiche un message | — |
confirm("msg") | Demande OK / Annuler | true ou false |
prompt("msg") | Champ de saisie | toujours une string |
if (confirm("Vous confirmez ?")) {
alert("OK");
} else {
alert("Annulation");
}
const age = prompt("Entrez votre âge");
alert("Vous avez " + age + " ans");prompt renvoie une chaîne. On convertit avec Number() juste après (conversion + conditions).
10. Les fonctions — bases
Métaphore : une fonction = une recette nommée, écrite une fois, réutilisable.
- Nom en camelCase :
direBonjour,calculerTotal - Appel = écrire le nom +
()
function direBonjour(prenom) {
alert("Bonjour " + prenom + " !");
}
direBonjour("Max"); // lancementFonctions natives : alert, console.log, prompt, confirm…
Paramètres = variables locales entre les ().
function addition(nombreUn, nombreDeux) {
console.log(nombreUn + nombreDeux);
}
addition(); // NaN — arguments manquants
addition(5, 9); // 1411. Locale vs globale
| Portée | Où déclarée | Visible |
|---|---|---|
| Locale | Dans la fonction | Uniquement dans la fonction |
| Globale | Hors de toute fonction | Partout dans le fichier |
function afficherVille() {
let ville = "Metz"; // locale
console.log(ville);
}
afficherVille();
console.log(ville); // ❌ erreur12. return — à quoi ça sert concrètement ?
Métaphore : une calculatrice. console.log / alert montrent le résultat puis le jettent. return te rend la valeur pour la réutiliser.
function calculerTVA(prixHT) {
return prixHT * 0.2; // « tiens, voici 80 »
}
let tva = calculerTVA(400);
let total = 400 + tva; // 480 — possible grâce au return
console.log("Total TTC : " + total);return = sortir une valeur de la fonction. Ce n’est pas un affichage.
console.log | return | |
|---|---|---|
| Rôle | Affiche (débogage) | Renvoie une valeur |
| Réutilisable ? | Non | Oui (stockable) |
| Suite du code | Continue | Arrête la fonction |
13. Paramètres par défaut
function addition(nombreA, nombreB = 10) {
return nombreA + nombreB;
}
addition(4); // 14
addition(4, 7); // 11Exemple colis :
function preparerColis(nombreDeColis, minutesPreparation = 10, minutesEmballage = 15) {
return nombreDeColis * (minutesPreparation + minutesEmballage);
}
let standards = preparerColis(4); // 100
let fragile = preparerColis(1, 20); // 35
console.log(standards + fragile); // 13514. Actions DOM — clic et champs
| Outil | Rôle |
|---|---|
document.getElementById("id") | Trouver un élément |
.onclick = maFonction | Réagir au clic (sans ()) |
addEventListener("click", …) | Écouter un clic (recommandé) |
.value | Lire / écrire un champ |
.textContent | Changer le texte affiché |
.click() | Déclencher un clic en JS |
document.getElementById("btn").addEventListener("click", function () {
let prenom = document.getElementById("prenom").value;
document.getElementById("msg").textContent = "Bonjour " + prenom;
});Piège : .onclick = direBonjour() avec () → s’exécute tout de suite, pas au clic.
15. Conversion + conditions (âge)
let age = Number(prompt("Quel est votre âge ?"));
if (age >= 18) {
alert("Bienvenue");
// window.location.href = "accueil.html";
} else {
alert("Accès réservé aux majeurs");
}prompt → string · Number() → number · if / else → décider (alerte ou redirection).
Le mini-formulaire HTML/CSS/JS arrive en Journée 2, juste après l’approfondissement conversion.