Cours JavaScript Débutant : Le Langage du Web Interactif

Un cours JavaScript complet pour débutants, avec tutoriels sur les fondamentaux, la manipulation du DOM et des exemples pratiques pour créer des sites web interactifs.

Qu'est-ce que JavaScript et pourquoi l'apprendre ?

JavaScript est un langage de programmation de script principalement utilisé pour rendre les pages web interactives. Contrairement à PHP qui s'exécute côté serveur, JavaScript s'exécute directement dans le navigateur de l'utilisateur (côté client).

5 raisons d'apprendre JavaScript en 2025

Langage universel du web : 97,8% des sites web utilisent JavaScript
Polyvalence exceptionnelle : Frontend, backend (Node.js), applications mobiles
Écosystème riche : React, Angular, Vue.js - les frameworks les plus populaires
Débouchés professionnels : #1 des langages les plus demandés sur le marché
Interactivité immédiate : Résultats visibles instantanément dans le navigateur

Comment fonctionne JavaScript ? (Côté client)

JavaScript est interprété par le moteur JavaScript du navigateur :

Quand une page web est chargée :

Le navigateur télécharge le HTML/CSS
Il rencontre les balises <script>
Le moteur JavaScript exécute le code
La page devient interactive (clics, animations, formulaires)

Premiers Pas avec JavaScript : Aucune Installation Nécessaire

Contrairement à PHP, vous n'avez besoin d'aucune installation pour commencer avec JavaScript. Un simple navigateur et un éditeur de texte suffisent !

Trois façons d'intégrer JavaScript à votre page

En ligne : Directement dans les balises HTML
Interne : Dans une balise <script> dans le HTML
Externe : Dans un fichier .js séparé (recommandé)

Votre premier script JavaScript - "Hello World"

Créez un fichier nommé index.html et ajoutez :

          <!DOCTYPE html>

          <html lang="fr">

          <head>

            <meta charset="UTF-8">

            <title>Premier JavaScript</title>

          </head>

          <body>

            <script>

            console.log("Bonjour le monde ! Je programme en JavaScript.");

            alert("Bienvenue dans le monde du JavaScript !");

            </script>

          </body>

          </html>

Test : Ouvrez le fichier dans votre navigateur et regardez la console (F12 → Console).

Syntaxe de Base du JavaScript - Les Fondamentaux

La syntaxe JavaScript est flexible mais suit certaines règles essentielles. Voici les bases :

          // Commentaire sur une ligne

          /*

          Commentaire sur

          plusieurs lignes

          */

          // Afficher dans la console (pour le débogage)

          console.log("J'apprends le JavaScript !");

          // Afficher une boîte de dialogue

          alert("Message important !");

          // Écrire directement dans le HTML

          document.write("<p>Texte ajouté par JavaScript</p>");

Règles importantes de la syntaxe JavaScript :

Point-virgule optionnel : Mais fortement recommandé pour éviter les bugs
Sensible à la casse : myVariable ≠ myvariable
Noms de variables : Commencent par lettre, $ ou _
Console indispensable : Votre meilleur outil de développement

Variables et Types de Données en JavaScript

En JavaScript moderne (ES6+), on utilise principalement let et const pour déclarer des variables. var est l'ancienne méthode.

          // Déclaration avec let (variable modifiable)

          let prenom = "Marie"; // String

          let age = 30; // Number

          let estEtudiant = true; // Boolean

          // Déclaration avec const (constante non modifiable)

          const PI = 3.14159;

          const VILLE = "Paris";

          // Concaténation avec l'opérateur +

          console.log("Je m'appelle " + prenom + " et j'habite à " + VILLE);

          // Template strings (ES6) - Plus moderne !

          console.log(`Je m'appelle ${prenom} et j'ai ${age} ans.`);

Les 7 types de données primitifs en JavaScript

Type	Description	Exemple	Utilisation
String	Chaîne de caractères	`"Bonjour"`	Textes, messages
Number	Nombre (entier ou décimal)	`42`, `3.14`	Calculs, compteurs
Boolean	Vrai ou faux	`true`, `false`	Conditions, états
Undefined	Variable non définie	`let x;` (x = undefined)	Variables non initialisées
Null	Valeur vide intentionnelle	`let y = null;`	Valeurs volontairement vides
BigInt	Grands entiers	`9007199254740991n`	Calculs financiers, crypto
Symbol	Valeur unique immuable	`Symbol("id")`	Clés d'objets uniques

Structures Conditionnelles en JavaScript

Les conditions permettent de prendre des décisions dans votre code. La logique est similaire à PHP mais avec quelques différences syntaxiques.

Structure If... Else... Else if

          let temperature = 25;

          let meteo = "soleil";

          if (temperature > 30) {

            console.log("Il fait très chaud !");

          } else if (temperature > 20 && meteo === "soleil") {

            console.log("Beau temps pour une promenade");

          } else {

            console.log("Temps moyen aujourd'hui");

          }

Opérateur ternaire - Condition en une ligne

          let age = 18;

          let peutConduire = (age >= 18) ? "Peut conduire" : "Trop jeune";

          console.log(peutConduire); // "Peut conduire"

Structure Switch

          let jour = new Date().getDay(); // 0=Dimanche, 6=Samedi

          switch (jour) {

            case 0:

              console.log("Dimanche : Repos bien mérité !");

              break;

            case 5:

              console.log("Vendredi : C'est bientôt le week-end !");

              break;

            default:

              console.log("Bon courage pour la semaine !");

          }

Boucles en JavaScript - Automatiser les Répétitions

Les boucles sont essentielles pour traiter des collections de données sans répéter du code.

Boucle For - Classique et puissante

          // Afficher les nombres de 1 à 5

          for (let i = 1; i <= 5; i++) {

              console.log("Numéro : " + i);

            }

            // Table de multiplication

            const nombre = 7;

            console.log(`Table de ${nombre} :`);

            for (let i = 1; i <= 10; i++) {

                console.log(`${nombre} × ${i} = ${nombre * i}`);

              }

Boucle While - Quand on ne connaît pas le nombre d'itérations

          // Compte à rebours

          let compteur = 3;

          while (compteur > 0) {

            console.log(`${compteur}...`);

            compteur--;

          }

          console.log("Partez ! 🏃‍♂️");

Boucle For...of - Pour les tableaux (ES6)

          // Parcourir un tableau simplement

          const fruits = ["pomme", "banane", "orange"];

          for (const fruit of fruits) {

            console.log(`J'aime les ${fruit}s`);

          }

Fonctions JavaScript - Blocs de Code Réutilisables

Les fonctions permettent d'organiser votre code en blocs logiques réutilisables.

Fonction déclarative (traditionnelle)

          // Déclaration de fonction

          function direBonjour(nom) {

            return `Bonjour ${nom} !`;

          }

          // Appel de la fonction

          const message = direBonjour("Alice");

          console.log(message); // "Bonjour Alice !"

Fonction fléchée (ES6) - Moderne et concise

          // Même fonction en version fléchée

          const direBonjour = (nom) => {

            return `Bonjour ${nom} !`;

          };

          // Version ultra concise (retour implicite)

          const addition = (a, b) => a + b;

          console.log(addition(5, 3)); // 8

Fonctions intégrées JavaScript les plus utiles

parseInt() - Convertit en nombre entier
parseFloat() - Convertit en nombre décimal
toString() - Convertit en chaîne de caractères
Math.random() - Génère un nombre aléatoire
Math.floor() - Arrondit à l'entier inférieur
Date.now() - Timestamp actuel

Manipulation du DOM - Rendre vos Pages Interactives

Le DOM (Document Object Model) est la représentation en mémoire de votre page HTML. JavaScript peut le modifier pour changer dynamiquement le contenu, le style et la structure.

Sélectionner des éléments HTML

          // Sélectionner par ID (retourne un seul élément)

          const titre = document.getElementById("monTitre");

          // Sélectionner par classe (retourne une collection)

          const boutons = document.getElementsByClassName("btn");

          // Méthodes modernes (ES6)

          const premierParagraphe = document.querySelector("p");

          const tousParagraphes = document.querySelectorAll("p");

Modifier le contenu et le style

          // HTML : <h1 id="titre">Titre initial</h1>

          const titre = document.getElementById("titre");

          // Modifier le texte

          titre.textContent = "Nouveau titre modifié par JS !";

          // Modifier le HTML (attention aux injections)

          titre.innerHTML = "<span style='color: red;'>Titre en rouge</span>";

          // Modifier le style

          titre.style.backgroundColor = "blue";

          titre.style.color = "white";

          titre.style.padding = "20px";

Créer et ajouter des éléments

          // Créer un nouvel élément

          const nouveauParagraphe = document.createElement("p");

          nouveauParagraphe.textContent = "Ce paragraphe a été créé par JavaScript !";

          // Ajouter au DOM

          document.body.appendChild(nouveauParagraphe);

          // Version plus moderne (ES6+)

          document.body.insertAdjacentHTML(

            "beforeend",

            "<div class='alerte'>Élément ajouté !</div>"

          );

Gestion des Événements - Rendre votre Site Réactif

Les événements sont au cœur de l'interactivité web. Ils permettent de réagir aux actions de l'utilisateur.

Écouter un événement simple

          // HTML : <button id="monBouton">Cliquez-moi !</button>

          const bouton = document.getElementById("monBouton");

          // Méthode addEventListener (recommandée)

          bouton.addEventListener("click", function() {

            alert("Vous avez cliqué sur le bouton !");

            this.style.backgroundColor = "green";

          });

Événements courants à connaître

          // Gestionnaire d'événements avec paramètre 'event'

          document.addEventListener("keydown", function(event) {

            console.log(`Touche pressée : ${event.key}`);

          });

          // Changement de valeur d'un input

          document.getElementById("email").addEventListener("input", function(e) {

            console.log("Email modifié : " + e.target.value);

          });

          // Au survol de la souris

          bouton.addEventListener("mouseover", () => {

            console.log("Souris sur le bouton !");

          });

Exemple complet : Formulaire interactif

          // HTML : <form id="contactForm">...</form>

          const form = document.getElementById("contactForm");

          form.addEventListener("submit", function(event) {

            // Empêche l'envoi par défaut du formulaire

            event.preventDefault();

            // Récupération des valeurs

            const nom = this.querySelector("#nom").value;

            const email = this.querySelector("#email").value;

            // Validation simple

            if (nom.trim() === "") {

              alert("Le nom est obligatoire");

              return;

            }

            // Traitement réussi

            alert(`Merci ${nom}, votre message a été envoyé !`);

            this.reset(); // Réinitialise le formulaire

          });

🎯 Bonnes pratiques pour les événements

Utilisez addEventListener plutôt que les attributs HTML onclick
Pensez à prévenir le comportement par défaut avec preventDefault()
Déboguez avec console.log pour comprendre le flux d'événements
Retirez les écouteurs quand ils ne sont plus nécessaires avec removeEventListener
Utilisez la délégation d'événements pour les éléments créés dynamiquement

Conclusion : Votre Voyage JavaScript Continue

Félicitations ! Vous avez maintenant une solide base en JavaScript. Voici ce que vous maîtrisez :

✅ Compétences acquises :

Syntaxe et structure de base du JavaScript
Variables, constantes et types de données
Structures de contrôle (conditions, boucles)
Fonctions déclaratives et fléchées
Manipulation du DOM pour des pages dynamiques
Gestion des événements pour l'interactivité

🚀 Prochaines étapes pour maîtriser JavaScript

JavaScript moderne (ES6+) : Classes, modules, promesses
Manipulation de données : Tableaux, objets, JSON
Asynchrone : Callbacks, Promises, Async/Await
APIs navigateur : LocalStorage, Fetch API, Canvas
Frameworks : React, Vue.js ou Angular
Node.js : JavaScript côté serveur

💡 Conseil de WebIntelligence

Pratiquez avec des projets concrets ! Créez un calculateur, un jeu du pendu, une liste de tâches, ou une application météo. La pratique régulière est la clé pour maîtriser JavaScript et devenir un développeur web accompli.

Questions Fréquentes sur JavaScript

JavaScript et Java, c'est la même chose ?

Non, ce sont deux langages complètement différents ! Le nom "JavaScript" a été choisi pour profiter de la popularité de Java dans les années 90, mais la syntaxe et les usages sont très différents.

Combien de temps pour apprendre JavaScript ?

Les bases peuvent être acquises en 1-2 mois de pratique régulière. Pour maîtriser le langage et ses écosystèmes (frameworks, Node.js), comptez 6 à 12 mois.

Faut-il connaître HTML/CSS avant JavaScript ?

Absolument ! JavaScript manipule le HTML/CSS. Sans ces bases, vous ne comprendrez pas ce que vous manipulez. Commencez toujours par HTML, puis CSS, puis JavaScript.

Quel éditeur utiliser pour JavaScript ?

Visual Studio Code (gratuit) est le plus populaire. Il offre l'autocomplétion, le débogage et des extensions puissantes spécifiques à JavaScript.

À propos de l’auteur

Je suis Abraham, développeur web & créateur de WebIntelligence. J’aide les débutants et entrepreneurs à apprendre le développement web, créer leurs sites et améliorer leur visibilité en ligne.

Me contacter