Beaucoup de personnes commencent JavaScript en tapant du code au hasard, puis se découragent quand “rien ne se passe”. La vérité : JavaScript marche très bien… mais il faut juste savoir où l’écrire, comment le charger, et où regarder quand il y a une erreur.
Dans cette partie, on va mettre en place une méthode propre et simple, comme le ferait un développeur au quotidien, sans logiciel compliqué.
1) Écrire JavaScript directement dans le navigateur
Pour tester une idée rapidement, le navigateur suffit. Vous avez deux options :
Option A — La console (recommandée pour tester vite)
Ouvrez n’importe quelle page, puis :
- Clic droit → Inspecter
- Onglet Console
- Écrivez une ligne de code, puis Entrée
console.log("Test rapide depuis la console !");
Astuce : la console est parfaite pour apprendre, mais le code écrit ici n’est pas “sauvegardé”. Si vous rechargez la page, vous perdez votre test.
Option B — Le “Sources” / Snippets (pour garder des essais)
Dans Chrome/Edge, vous pouvez créer des “Snippets” (petits scripts sauvegardés) dans DevTools. C’est pratique quand vous voulez rejouer le même test.
2) Utiliser <script> correctement (la base la plus importante)
La balise <script> dit au navigateur : “Voici du JavaScript à exécuter”.
Il existe deux façons simples de l’utiliser :
Méthode 1 — JavaScript directement dans la page (simple, mais vite limité)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test JavaScript</title>
</head>
<body>
<h1>Bonjour</h1>
<script>
console.log("JS intégré dans la page");
</script>
</body>
</html>
Ça marche, mais dès que votre code grandit, ce n’est pas confortable.
Méthode 2 — Fichier externe (recommandée)
Vous créez 2 fichiers dans le même dossier :
- index.html
- app.js
Dans index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mon apprentissage JS</title>
</head>
<body>
<h1>Page de test</h1>
<script src="app.js"></script>
</body>
</html>
Dans app.js :
console.log("Le fichier app.js est bien chargé ✅");
Important : si vous voyez ce message dans la console, votre environnement est prêt. C’est un petit détail, mais c’est exactement ce qu’on vérifie en premier en “vrai” projet.
3) Utiliser la console du navigateur (sans stress)
La console n’est pas là pour vous juger. Elle est là pour vous aider. Voici 3 usages ultra pratiques :
a) Afficher une info
console.log("Je suis ici !");
b) Afficher une erreur volontairement (pour comprendre)
console.error("Oups, ceci est un message d'erreur.");
c) Vérifier une valeur
let prix = 120;
console.log(prix);
4) Erreurs classiques de débutant (et comment les corriger)
Voici les erreurs que je vois le plus souvent chez les débutants — et honnêtement, elles sont normales. L’important est de les reconnaître rapidement.
Erreur 1 — Le fichier JS n’est pas trouvé (chemin incorrect)
Exemple : <script src="app.js"> alors que votre fichier s’appelle App.js
ou qu’il est dans un dossier js/app.js.
Solution : vérifiez le nom exact + le dossier. Les majuscules peuvent compter selon l’environnement.
Erreur 2 — “Rien ne s’affiche”
Souvent, le code s’exécute… mais vous regardez au mauvais endroit. console.log s’affiche dans la console, pas sur la page.
Erreur 3 — Utiliser le JS avant que le HTML soit chargé
Si votre script est dans le <head>, il peut se lancer avant que les éléments HTML existent.
Résultat : JavaScript “ne trouve pas” les éléments.
Solution simple : placez votre <script src="app.js"></script>
juste avant </body>.
Solution propre : utilisez l’attribut defer :
<script src="app.js" defer></script>
En une phrase : defer dit au navigateur : “charge le fichier JS, mais exécute-le
seulement quand le HTML est prêt”.
Erreur 4 — Oublier les guillemets, parenthèses ou point-virgule (ça arrive)
Exemple classique :
console.log(Bonjour)
Il faut des guillemets :
console.log("Bonjour")
5) Comment JavaScript est exécuté (compréhension simple)
Voici une version claire, sans trop de théorie :
- Le navigateur lit votre fichier HTML de haut en bas.
- Quand il rencontre
<script>, il charge le JavaScript. - Si le script doit s’exécuter tout de suite, il le lance.
- Si le script est en bas de la page (ou avec
defer), le HTML a le temps de se charger correctement.
C’est pour ça que le placement de <script> est important : ce n’est pas un détail,
c’est directement lié à l’ordre d’exécution.
Mini-test rapide
Mettez ceci dans app.js puis rechargez la page :
console.log("1) Le JS a démarré");
setTimeout(() => {
console.log("2) Ce message arrive 1 seconde plus tard");
}, 1000);
console.log("3) Fin du script");
Vous verrez l’ordre dans la console. Cela vous montre que JavaScript exécute le code ligne par ligne,
et que certaines actions (comme setTimeout) se déclenchent plus tard.
On détaillera ça dans une partie dédiée à l’asynchrone.
Dans la Partie 3, on attaque le vrai début du langage : variables et types de données (let, const,
nombres, textes, booléens…), avec des exemples concrets comme des prix, des noms d’utilisateurs et des états de formulaire.