Aller au contenu principal

Module JS.1 – Introduction

Objectif​

Comprendre JavaScript : son rôle côté navigateur et serveur, le processus d'interprétation, et le modèle événementiel qui le caractérise.

Théorie​

JS côté navigateur & serveur​

JavaScript est unique : c'est le seul langage qui s'exécute nativement dans les navigateurs ET sur les serveurs.

JavaScript côté navigateur​

Rôles principaux :

  • Interactivité des pages web : Réagir aux clics, saisies, mouvements
  • Manipulation du DOM : Modifier le contenu HTML dynamiquement
  • Gestion des événements : Gérer les interactions utilisateur
  • Communication avec serveurs : Requêtes AJAX/Fetch
  • Animations : Créer des effets visuels
  • Validation de formulaires : Vérifier les données avant envoi

Exemples concrets :

  • Boutons qui changent de couleur au survol
  • Formulaires qui se valident en temps réel
  • Menus déroulants interactifs
  • Carrousels d'images
  • Applications web complètes (Gmail, Facebook, etc.)

Comment ça fonctionne :

<!DOCTYPE html>
<html>
<head>
    <title>Mon site</title>
</head>
<body>
    <button id="monBouton">Cliquez-moi</button>
    
    <script>
        document.getElementById('monBouton').addEventListener('click', function() {
            alert('Bouton cliqué !');
        });
    </script>
</body>
</html>

JavaScript côté serveur (Node.js)​

Node.js permet d'exécuter JavaScript sur le serveur.

Rôles principaux :

  • Applications backend : APIs REST, serveurs web
  • Scripts d'automatisation : Tâches répétitives
  • Applications temps réel : Chat, notifications
  • Outils de développement : Build tools, bundlers

Exemple simple :

// server.js
const http = require('http');

const server = http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Bonjour depuis Node.js !');
});

server.listen(3000, () => {
    console.log('Serveur démarré sur http://localhost:3000');
});

Avantages de Node.js :

  • Même langage frontend et backend
  • Grande communauté
  • Écosystème npm (millions de packages)
  • Performance élevée
  • Idéal pour applications temps réel

Interprété​

JavaScript est un langage interprété, mais avec des optimisations modernes.

Processus d'exécution :

  1. Code source JavaScript (.js)
  2. Parsing : Analyse de la syntaxe
  3. Compilation JIT : Just-In-Time compilation en bytecode optimisé
  4. Exécution : Le moteur JavaScript exécute le code

Moteurs JavaScript :

  • V8 : Chrome, Node.js (développé par Google)
  • SpiderMonkey : Firefox (Mozilla)
  • JavaScriptCore : Safari (Apple)
  • Chakra : Edge (Microsoft, maintenant basé sur V8)

Avantages de l'interprétation :

  • Pas de compilation préalable nécessaire
  • Modifications visibles immédiatement
  • Développement rapide
  • Flexibilité

Optimisations modernes :

  • JIT Compilation : Compile en code machine optimisé à l'exécution
  • Hot paths : Optimise les parties de code fréquemment exécutées
  • Garbage collection : Gestion automatique de la mémoire

Événementiel​

JavaScript est asynchrone et événementiel par nature.

Boucle d'événements (Event Loop)​

Le cœur de JavaScript est la boucle d'événements qui gère l'exécution asynchrone.

Comment ça fonctionne :

  1. Le code synchrone s'exécute immédiatement
  2. Les opérations asynchrones sont mises en file d'attente
  3. La boucle d'événements traite les événements un par un
  4. Les callbacks sont exécutés quand les opérations sont terminées

Exemple :

console.log('1. Début');

setTimeout(() => {
    console.log('3. Après 1 seconde');
}, 1000);

console.log('2. Fin');

// Sortie :
// 1. Début
// 2. Fin
// 3. Après 1 seconde

Pourquoi asynchrone ?

  • Évite de bloquer l'interface utilisateur
  • Permet de gérer plusieurs opérations simultanément
  • Essentiel pour les opérations réseau (requêtes HTTP)

Callbacks​

Fonctions passées en argument, exécutées après une opération.

function chargerDonnees(callback) {
    setTimeout(() => {
        callback('Données chargées');
    }, 1000);
}

chargerDonnees((donnees) => {
    console.log(donnees);
});

Promises​

Représentent une valeur qui sera disponible dans le futur.

const promesse = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Succès !');
    }, 1000);
});

promesse.then((resultat) => {
    console.log(resultat);
});

Async/await​

Syntaxe moderne pour gérer l'asynchrone de manière synchrone.

async function chargerDonnees() {
    const resultat = await maPromesse;
    console.log(resultat);
}

Écosystème JavaScript​

Frameworks frontend populaires :

  • React : Bibliothèque UI (Facebook)
  • Vue.js : Framework progressif
  • Angular : Framework complet (Google)
  • Svelte : Compilateur moderne

Frameworks backend :

  • Express : Framework web minimaliste
  • Nest.js : Framework TypeScript
  • Fastify : Framework performant

Outils de développement :

  • npm/yarn : Gestionnaires de paquets
  • Webpack/Vite : Bundlers
  • ESLint : Linter
  • Jest : Framework de tests

Exercice​

  1. Exploration navigateur

    • Ouvrez la console du navigateur (F12)
    • Testez console.log('Bonjour')
    • Explorez les outils de développement

  2. Installation Node.js

    • Téléchargez et installez Node.js
    • Vérifiez avec node --version
    • Testez npm --version

  3. Premier script

    • Créez un fichier test.js avec console.log('Hello Node.js')
    • Exécutez avec node test.js

  4. Comprendre l'asynchrone

    • Testez le code avec setTimeout
    • Observez l'ordre d'exécution
    • Comprenez la différence synchrone/asynchrone

  5. Recherche

    • Explorez npmjs.com
    • Identifiez 3 packages populaires
    • Comprenez leur utilité

Quiz​

  1. Où s'exécute JavaScript côté navigateur ?

    • Sur le serveur
    • Dans le navigateur de l'utilisateur
    • Dans un fichier séparé

  2. Qu'est-ce que Node.js ?

    • Un framework frontend
    • Un environnement pour exécuter JavaScript côté serveur
    • Un éditeur de code

  3. Que fait la boucle d'événements ?

    • Compile le code
    • Gère l'exécution asynchrone
    • Affiche les erreurs

  4. Que signifie JIT ?

    • Just-In-Time
    • Just-In-Time (compilation à l'exécution)
    • JavaScript In Time

  5. Quel est le moteur JavaScript de Chrome ?

    • SpiderMonkey
    • V8
    • JavaScriptCore

Mini défi​

Mission : Explorer l'écosystème JavaScript complet

  1. Environnement navigateur

    • Créez une page HTML simple
    • Ajoutez du JavaScript qui interagit avec le DOM
    • Testez différents événements (clic, survol, saisie)

  2. Environnement Node.js

    • Installez Node.js
    • Créez un serveur HTTP simple
    • Testez avec votre navigateur

  3. Comprendre l'asynchrone

    • Créez un script avec plusieurs setTimeout
    • Observez l'ordre d'exécution
    • Expliquez pourquoi l'ordre n'est pas séquentiel

  4. npm

    • Initialisez un projet : npm init
    • Installez un package : npm install lodash
    • Utilisez-le dans votre code

  5. Documentation

    • Explorez MDN Web Docs (developer.mozilla.org)
    • Identifiez 5 fonctions JavaScript utiles
    • Notez leurs cas d'usage

Objectif : Avoir une compréhension complète de l'écosystème JavaScript et de ses deux environnements (navigateur et serveur).

Validation : Vous pouvez passer au module suivant quand vous comprenez JavaScript côté navigateur et serveur, et avez testé les deux environnements.