Chapitre 1 : 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.

📝 QCM – Chapitre 1 : Introduction à JavaScript

1. Quel est le rôle principal de JavaScript ?
Structurer le contenu des pages web
Styliser les pages web
Ajouter de l'interactivité aux pages web

2. Où est généralement exécuté le code JavaScript ?
Sur le serveur
Dans le navigateur du client
Dans une base de données

← Chapitre précédent

Chapitre suivant →

Liste des chapitres

Chapitre 1 : 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

Tuteur Virtuel

Liste des chapitres

Chapitre 1 : 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

Tuteur Virtuel

Historique des conversations