Apprendre JavaScript : le guide pratique pas à pas pour débutants

En bref. JavaScript est le langage qui rend les pages web interactives. Ce tutoriel vous apprend à l'écrire et l'exécuter immédiatement, sans installation complexe. Vous créerez vos premiers programmes en moins d'une heure.

1. Comprendre ce qu'est JavaScript et où l'exécuter

JavaScript est le langage de programmation des navigateurs web. Contrairement à d'autres langages, vous n'avez rien à installer : votre navigateur sait déjà l'exécuter.

La façon la plus simple de commencer ? Ouvrir la console du navigateur. Voici comment :

Appuyez sur F12 (ou Cmd+Option+I sur Mac)
Cliquez sur l'onglet « Console »
Vous voyez un curseur clignotant : tapez directement du code

Essayez maintenant : tapez console.log("Bonjour") puis appuyez sur Entrée. Vous verrez apparaître le mot « Bonjour ». Felicitations : vous venez d'exécuter votre premier code JavaScript. Le piège courant ? Oublier les guillemets autour du texte.

2. Maîtriser les variables : stocker et utiliser des données

Une variable est une boîte qui contient une information. Pour la créer, utilisez le mot let suivi d'un nom, puis = et la valeur.

Tapez dans la console :

let prenom = "Marie" (crée une variable contenant du texte)
let age = 28 (crée une variable contenant un nombre)
console.log(prenom) (affiche « Marie »)
console.log(prenom + " a " + age + " ans") (combine les données)

Le résultat affiché sera « Marie a 28 ans ». Piège à éviter : les noms de variables ne doivent jamais contenir d'espaces ni de caractères spéciaux. Préférez des noms explicites : « nomUtilisateur » plutôt que « x ».

3. Utiliser les conditions pour prendre des décisions

Les conditions permettent à votre code de réagir différemment selon une situation. La structure de base est if (condition) { action }.

Exemple concret à taper :

let temperature = 15
if (temperature < 20) { console.log("Il fait froid") }

Vous verrez « Il fait froid ». Maintenant, changez temperature à 25 et réexécutez : rien ne s'affiche, car la condition est fausse.

Pour ajouter une alternative, utilisez else :

if (temperature < 20) { console.log("Froid") } else { console.log("Chaud") }

Piège courant : utiliser un seul = (assignation) au lieu de == ou === (comparaison).

4. Créer des listes avec les tableaux et les boucles

Un tableau est une liste d'éléments. Créez-en un avec les crochets [] :

let fruits = ["pomme", "banane", "orange"]

Accédez aux éléments par leur position (qui commence à zéro) :

console.log(fruits[0]) affiche « pomme »
console.log(fruits[1]) affiche « banane »
fruits.push("raisin") ajoute un élément à la fin

Pour traiter chaque élément, utilisez une boucle for :

for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]) }

Cela affiche tous les fruits un par un. Piège fréquent : oublier que les positions commencent à zéro, pas à un. « fruits[3] » n'existe pas dans notre exemple, car il n'y a que trois éléments (indices 0, 1, 2).

5. Écrire votre premier programme dans un fichier HTML

Jusqu'ici, vous avez tapé dans la console. Pour créer un vrai programme, mettez le code dans une page web.

Ouvrez votre éditeur de texte et écrivez :

<!DOCTYPE html>
<html>
<body>
<script>
let nom = "Alex"
console.log("Bienvenue, " + nom)
</script>
</body>
</html>

Enregistrez le fichier sous « mon_programme.html ». Double-cliquez dessus pour l'ouvrir dans votre navigateur. Appuyez sur F12, allez dans la console : vous verrez « Bienvenue, Alex ». Piège à retenir : le code JavaScript entre les balises <script> s'exécute quand la page se charge.

Testez-vous

1. Comment ouvre-t-on la console du navigateur ?

F12 est le raccourci standard dans tous les navigateurs modernes pour accéder aux outils de développement, dont la console.

2. Quel mot-clé crée une variable ?

Bien que var existe, let est la syntaxe moderne recommandée depuis ES2015. Elle a un comportement plus prévisible pour les apprentis.

3. À quel index accédez-vous au premier élément d'un tableau ?

En JavaScript comme dans tous les langages modernes, le comptage des tableaux commence à zéro. Le premier élément est à l'index 0, le deuxième à l'index 1, etc.

Aller plus loin avec un précepteur personnel

L'ESEAD réunit plus de 120 formations en ligne et un précepteur disponible 24 h/24, pour 49 € par mois tout inclus. Essai gratuit sans carte bancaire.

Essayer gratuitement Voir les formations

Questions fréquentes

Dois-je installer JavaScript sur mon ordinateur ?

Non. JavaScript est déjà intégré à votre navigateur. Il vous suffit d'ouvrir la console (F12) pour commencer. Aucune installation requise.

Quel éditeur de texte recommandez-vous pour débuter ?

Visual Studio Code (gratuit et simple) est excellent. Sinon, Notepad++ ou même le Bloc-notes fonctionnent parfaitement au début. L'important est d'enregistrer votre fichier avec l'extension .html ou .js.

Combien de temps faut-il pour apprendre JavaScript correctement ?

Les bases (variables, conditions, boucles) peuvent être comprises en une semaine avec une pratique quotidienne. Devenir à l'aise prend quelques mois. La progression dépend de votre temps et de votre pratique régulière.

Autres tutoriels : Numérique et informatique

Tutoriel rédigé avec l'aide de l'intelligence artificielle par l'équipe pédagogique de l'ESEAD, à visée pédagogique générale. Il ne remplace ni un professionnel qualifié ni un avis médical ou juridique. Une erreur ? Signalez-la.