Chapitre 0 : Introduction à JavaScript

1. Qu'est-ce que JavaScript ?

JavaScript (souvent abrégé JS) est un langage de programmation qui permet de rendre les pages web interactives et dynamiques.

C'est le seul langage de programmation natif des navigateurs web
Il s'exécute côté client (dans le navigateur de l'utilisateur)
Il peut aussi s'exécuter côté serveur avec Node.js
C'est l'un des langages les plus populaires au monde

2. Le rôle de JavaScript dans le développement web

Dans le trio des technologies web, chaque langage a un rôle spécifique :

HTML : Structure et contenu de la page
CSS : Présentation et mise en forme
JavaScript : Comportement et interactivité

Exemples d'utilisation de JavaScript

🎯 Valider un formulaire avant envoi
🎨 Créer des animations et effets visuels
🔄 Charger du contenu sans recharger la page (AJAX)
🎮 Développer des jeux dans le navigateur
📱 Créer des applications web interactives
🤖 Manipuler le DOM (Document Object Model)

3. JavaScript côté client vs côté serveur

JavaScript côté client (navigateur)

Le code s'exécute dans le navigateur de l'utilisateur :

Manipulation du DOM (modifier le HTML/CSS)
Gestion des événements (clics, saisies, etc.)
Animations et effets visuels
Communication avec des API

JavaScript côté serveur (Node.js)

Le code s'exécute sur un serveur :

Création d'API et de serveurs web
Accès aux bases de données
Gestion de fichiers
Applications en temps réel

4. Premier script JavaScript

Il existe plusieurs façons d'intégrer du JavaScript dans une page HTML :

Méthode 1 : JavaScript inline (dans le HTML)

<button onclick="alert('Bonjour !')">Cliquez-moi</button>

Méthode 2 : Balise <script> dans le HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon premier script JS</title>
</head>
<body>
    <h1>Bienvenue !</h1>

    <script>
        // Mon premier code JavaScript
        console.log("Hello, JavaScript !");
        alert("Bienvenue sur mon site !");
    </script>
</body>
</html>

Méthode 3 : Fichier JavaScript externe (recommandé)

index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon site</title>
</head>
<body>
    <h1>Mon site web</h1>

    <!-- Lien vers le fichier JavaScript -->
    <script src="script.js"></script>
</body>
</html>

script.js :

// Mon code JavaScript
console.log("Le script est chargé !");
alert("Bienvenue !");

💡 Bonne pratique : Placez vos balises <script> juste avant la fermeture de </body> pour que le HTML soit chargé avant l'exécution du JavaScript.

5. La console du navigateur

La console est un outil essentiel pour les développeurs JavaScript. Elle permet d'afficher des messages, de tester du code et de déboguer.

Ouvrir la console

Chrome/Edge : F12 ou Ctrl+Shift+J (Cmd+Option+J sur Mac)
Firefox : F12 ou Ctrl+Shift+K
Safari : Cmd+Option+C

Utiliser console.log()

// Afficher un message dans la console
console.log("Bonjour !");

// Afficher plusieurs valeurs
console.log("Nom:", "Dupont", "Age:", 25);

// Afficher une variable
let prenom = "Marie";
console.log(prenom);

Autres méthodes de la console

console.log("Message normal");
console.warn("Avertissement");
console.error("Erreur");
console.info("Information");
console.table([{nom: "Alice", age: 25}, {nom: "Bob", age: 30}]);

6. Commentaires en JavaScript

Les commentaires permettent d'expliquer le code sans qu'il soit exécuté :

// Ceci est un commentaire sur une ligne

/*
  Ceci est un commentaire
  sur plusieurs lignes
*/

let age = 25; // Commentaire en fin de ligne

7. Exercice pratique

Créez une page HTML avec un script JavaScript qui :

Affiche "Bienvenue !" dans la console
Affiche une alerte avec votre prénom
Affiche la date actuelle dans la console

Solution :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exercice JS</title>
</head>
<body>
    <h1>Mon premier exercice JavaScript</h1>

    <script>
        // 1. Message dans la console
        console.log("Bienvenue !");

        // 2. Alerte avec le prénom
        alert("Marie");

        // 3. Date actuelle
        console.log(new Date());
    </script>
</body>
</html>

Conclusion

Vous venez de découvrir JavaScript, le langage qui donne vie aux pages web ! Dans le prochain chapitre, nous allons apprendre à déclarer des variables pour stocker des données.

Évaluation des acquis

Quiz du chapitre 0

Correction immédiate

Q1 Quel est le rôle principal de JavaScript ?

[A] Structurer le contenu des pages web [B] Styliser les pages web [C] Ajouter de l'interactivité aux pages web

Q2 Où est généralement exécuté le code JavaScript ?

[A] Sur le serveur [B] Dans le navigateur du client [C] Dans une base de données

Ateliers pratiques & Projets

Testez vos compétences avec nos exercices guidés et le tuteur IA.

Ateliers pratiques & Corrigés détaillés

Ateliers pratiques & Corrigés

#1 — Affichage simple

Atelier #1

Comment affiche-t-on 'Hello World' dans la console du navigateur ?

Votre réponse ou code à faire corriger par l'IA :

Correction instantanée et bienveillante

Consulter la solution type du formateur

Solution de référence :

console.log("Hello World");

#2 — Emplacement du script

Atelier #2

Quelle balise HTML utilise-t-on pour inclure du code JavaScript ?

Votre réponse ou code à faire corriger par l'IA :

Correction instantanée et bienveillante

Consulter la solution type du formateur

Solution de référence :

#3 — Fichier externe

Atelier #3

Comment lier un fichier JavaScript externe nommé 'script.js' ?

Votre réponse ou code à faire corriger par l'IA :

Correction instantanée et bienveillante

Consulter la solution type du formateur

Solution de référence :

#4 — Boîte d'alerte

Atelier #4

Quelle fonction permet d'afficher une boîte de dialogue d'alerte ?

Votre réponse ou code à faire corriger par l'IA :

Correction instantanée et bienveillante

Consulter la solution type du formateur

Solution de référence :

alert("Ceci est une alerte");

#5 — Commentaires JS

Atelier #5

Comment écrit-on un commentaire sur une seule ligne en JavaScript ?

Votre réponse ou code à faire corriger par l'IA :

Correction instantanée et bienveillante

Consulter la solution type du formateur

Solution de référence :

// Ceci est un commentaire

Chapitre suivant

Liste des chapitres

Chapitre 0 : Introduction à JavaScript

1. Qu'est-ce que JavaScript ?

2. Le rôle de JavaScript dans le développement web

Exemples d'utilisation de JavaScript

3. JavaScript côté client vs côté serveur

JavaScript côté client (navigateur)

JavaScript côté serveur (Node.js)

4. Premier script JavaScript

Méthode 1 : JavaScript inline (dans le HTML)

Méthode 2 : Balise <script> dans le HTML

Méthode 3 : Fichier JavaScript externe (recommandé)

5. La console du navigateur

Ouvrir la console

Utiliser console.log()

Autres méthodes de la console

6. Commentaires en JavaScript

7. Exercice pratique

Conclusion

Quiz du chapitre 0

Ateliers pratiques & Projets

Ateliers pratiques & Corrigés détaillés

Ateliers pratiques & Corrigés

#1 — Affichage simple

#2 — Emplacement du script

#3 — Fichier externe

#4 — Boîte d'alerte

#5 — Commentaires JS

Tuteur Virtuel

Liste des chapitres

Chapitre 0 : Introduction à JavaScript

1. Qu'est-ce que JavaScript ?

2. Le rôle de JavaScript dans le développement web

Exemples d'utilisation de JavaScript

3. JavaScript côté client vs côté serveur

JavaScript côté client (navigateur)

JavaScript côté serveur (Node.js)

4. Premier script JavaScript

Méthode 1 : JavaScript inline (dans le HTML)

Méthode 2 : Balise <script> dans le HTML

Méthode 3 : Fichier JavaScript externe (recommandé)

5. La console du navigateur

Ouvrir la console

Utiliser console.log()

Autres méthodes de la console

6. Commentaires en JavaScript

7. Exercice pratique

Conclusion

Quiz du chapitre 0

Ateliers pratiques & Projets

Ateliers pratiques & Corrigés détaillés

Ateliers pratiques & Corrigés

#1 — Affichage simple

#2 — Emplacement du script

#3 — Fichier externe

#4 — Boîte d'alerte

#5 — Commentaires JS

Tuteur Virtuel

Historique des conversations