JavaScript pour débuter

Découvrez JavaScript, le langage qui rend les pages web vivantes : syntaxe, DOM, événements et premier projet.

Histoire de JavaScript

Découvrez l'origine et l'évolution du langage qui a révolutionné le web.

1 La Naissance (1995)

Le Contexte :

  • 1995 : Le web est statique (HTML + CSS)
  • Netscape Navigator domine le marché
  • Besoin d'interactivité côté client
  • Java est populaire mais complexe

Brendan Eich - Le Créateur :

Brendan Eich, programmeur chez Netscape, crée JavaScript en seulement 10 jours en mai 1995.

Objectif : créer un langage simple pour rendre les pages web interactives, accessible aux non-programmeurs.

Chronologie de création :

1 Mai 1995 : Développement en 10 jours

2 Sept 1995 : Première version publique

3 Déc 1995 : Intégré dans Netscape 2.0

4 1996 : Implémenté dans IE 3.0

Pourquoi "JavaScript" ?

Initialement appelé "Mocha", puis "LiveScript", il devient "JavaScript" par marketing : Java était populaire, mais JS n'a aucun lien technique avec Java !

2 Évolution et Dates Clés

Les Grandes Étapes :

1997 - ECMAScript 1

Première standardisation officielle du langage

1999 - ECMAScript 3

Expressions régulières, gestion d'erreurs (try/catch)

2005 - AJAX Revolution

JavaScript devient essentiel pour les applications web

2009 - Node.js

JavaScript côté serveur, révolution du développement

Ère Moderne :

2015 - ES6/ES2015

let/const, classes, modules, arrow functions

2016-2024 - Évolution Annuelle

Nouvelles fonctionnalités chaque année (ES2016, ES2017...)

Aujourd'hui - Omniprésence

Web, mobile, desktop, serveur, IoT, IA

JavaScript Aujourd'hui :
  • Langage le plus utilisé au monde
  • Écosystème npm : +2 millions de packages
  • Frameworks : React, Vue, Angular
  • Polyvalent : frontend, backend, mobile

Les Bases de JavaScript

Comprenez les concepts fondamentaux pour commencer à programmer en JavaScript.

Qu'est-ce que JavaScript ?

💻 Langage de Script

Langage de programmation interprété, principalement utilisé pour rendre les pages web interactives.

🌐 Polyvalent

  • Frontend (navigateurs)
  • Backend (Node.js)
  • Applications mobiles
  • Applications desktop
  • Jeux vidéo

⚡ Caractéristiques

  • Typé dynamiquement
  • Orienté objet
  • Fonctionnel
  • Événementiel
  • Interprété

Comment JavaScript fonctionne-t-il ?

Dans le navigateur :

javascript 

                                    1
                                    HTML charge la page

                                    2
                                    CSS applique les styles

                                    3
                                    JS rend la page interactive

                                    4
                                    L'utilisateur interagit

                                    5
                                    JS répond aux événements

Intégration dans HTML :

javascript 

// Dans le <head>
<script src="script.js"></script>
// Dans le HTML directement
<script>
    alert('Hello World!');
</script>
// Avant la fermeture de </body>
<script src="app.js"></script>

Bonne pratique :

Placez vos scripts en fin de <body> pour que le HTML soit chargé avant l'exécution du JavaScript.

Syntaxe JavaScript Essentielle

Maîtrisez les éléments fondamentaux de la syntaxe JavaScript.

1 Variables et Types de Données

Déclaration des variables :

javascript 

// var (ancienne syntaxe)
var nom = "Jean";
// let (moderne - variable modifiable)
let age = 25;
age = 26; // OK
// const (moderne - constante)
const PI = 3.14159;
// PI = 3.14; // ERREUR !

Types de données :

javascript 

// String (chaîne)
let message = "Hello World";
// Number (nombre)
let prix = 19.99;
// Boolean (booléen)
let actif = true;
// Array (tableau)
let fruits = ["pomme", "banane"];
// Object (objet)
let personne = {nom: "Jean", age: 25};

2 Fonctions

Déclaration de fonction :

javascript 

// Fonction classique
function direBonjour(nom) {
    return "Bonjour " + nom;
}
// Expression de fonction
const calculer = function(a, b) {
    return a + b;
};
// Arrow function (ES6)
const multiplier = (x, y) => x * y;

Utilisation :

javascript 

// Appeler une fonction
let salut = direBonjour("Marie");
console.log(salut); // "Bonjour Marie"
// Calculs
let somme = calculer(5, 3);
let produit = multiplier(4, 7);
// Affichage dans la console
console.log("Somme:", somme);
console.log("Produit:", produit);

console.log() :

Utilisez console.log() pour déboguer et afficher des valeurs dans la console du navigateur (F12).

3 Conditions et Boucles

Structures conditionnelles :

javascript 

// if/else
let age = 18;
if (age >= 18) {
    console.log("Majeur");
} else if (age >= 16) {
    console.log("Peut conduire");
} else {
    console.log("Mineur");
}
// Opérateur ternaire
let statut = age >= 18 ? "adulte" : "enfant";

Boucles :

javascript 

// Boucle for
for (let i = 0; i < 5; i++) {
    console.log("Compteur:", i);
}
// Boucle while
let compteur = 0;
while (compteur < 3) {
    console.log(compteur);
    compteur++;
}
// Boucle pour tableaux
let fruits = ["pomme", "banane"];
fruits.forEach(fruit => {
    console.log(fruit);
});

Le DOM (Document Object Model)

Apprenez à manipuler les éléments HTML avec JavaScript.

1 Comprendre le DOM

Définition :

Le DOM est une représentation structurée du document HTML que JavaScript peut lire et modifier. C'est l'interface entre votre code et la page web.

Structure arborescente :

javascript 

document
└── html
    ├── head
    │   └── title
    └── body
        ├── h1
        ├── p
        └── button

Sélection d'éléments :

javascript 

// Par ID
let titre = document.getElementById('mon-titre');
// Par classe
let boutons = document.getElementsByClassName('btn');
// Par sélecteur CSS (moderne)
let premier = document.querySelector('.btn');
let tous = document.querySelectorAll('.btn');

Recommandation :

Utilisez querySelector() et querySelectorAll() : plus flexibles et modernes.

2 Manipulation des Éléments

Modifier le contenu :

javascript 

// Changer le texte
let h1 = document.querySelector('h1');
h1.textContent = 'Nouveau titre';
// Changer le HTML
h1.innerHTML = '<em>Titre en italique</em>';
// Modifier un attribut
let img = document.querySelector('img');
img.src = 'nouvelle-image.jpg';
img.setAttribute('alt', 'Description');

Modifier les styles :

javascript 

// Style direct
let div = document.querySelector('#ma-div');
div.style.backgroundColor = 'red';
div.style.fontSize = '20px';
// Ajouter une classe CSS
div.classList.add('active');
// Supprimer une classe
div.classList.remove('inactive');
// Alterner une classe
div.classList.toggle('hidden');

Événements JavaScript

Rendez vos pages interactives en réagissant aux actions des utilisateurs.

1 Types d'Événements

🖱️ Souris

  • click - Clic
  • dblclick - Double-clic
  • mouseover - Survol
  • mouseout - Sortie
  • mousedown - Appui
  • mouseup - Relâchement

⌨️ Clavier

  • keydown - Appui touche
  • keyup - Relâchement
  • keypress - Frappe

📝 Formulaire

  • submit - Envoi
  • change - Changement
  • input - Saisie
  • focus - Focus
  • blur - Perte focus

2 Gérer les Événements

addEventListener (recommandé) :

javascript 

// Sélectionner l'élément
let bouton = document.querySelector('#mon-bouton');
// Ajouter un écouteur
bouton.addEventListener('click', function() {
    alert('Bouton cliqué !');
});
// Avec arrow function
bouton.addEventListener('click', () => {
    console.log('Clic détecté');
});

Exemple interactif :

javascript 

// Changer la couleur au clic
let div = document.querySelector('.colorbox');
div.addEventListener('click', () => {
    let couleurs = ['red', 'blue', 'green'];
    let aleatoire = Math.floor(Math.random() * 3);
    div.style.backgroundColor = couleurs[aleatoire];
});
// Événement sur input
let input = document.querySelector('input');
input.addEventListener('input', (e) => {
    console.log(e.target.value);
});

Premier Projet : Calculatrice Interactive

Créez votre première application JavaScript complète avec HTML, CSS et interactions.

calculatrice.html - Application Complète

html 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Première Calculatrice JavaScript</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #323330 0%, #1a1a1a 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .calculator {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            max-width: 400px;
            width: 100%;
        }

        .calculator h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #f7df1e;
            font-size: 2em;
        }

        .display {
            background: #2d2d2d;
            border: 2px solid #444;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            text-align: right;
            font-size: 24px;
            font-family: monospace;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            color: #f7df1e;
        }

        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }

        button {
            padding: 20px;
            border: none;
            border-radius: 10px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
            background: #444;
            color: white;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .operator { background: #ff9500 !important; }
        .operator:hover { background: #ffad33 !important; }
        .equals {
            background: #f7df1e !important;
            color: #323330 !important;
        }
        .equals:hover { background: #f9e84d !important; }
        .clear { background: #f44336 !important; }
        .clear:hover { background: #f66 !important; }

        .info {
            margin-top: 30px;
            padding: 20px;
            background: rgba(247, 223, 30, 0.1);
            border-radius: 10px;
            border: 1px solid rgba(247, 223, 30, 0.3);
        }
        .info h3 { color: #f7df1e; margin-bottom: 10px; }
        .info ul { list-style: none; padding: 0; }
        .info li {
            padding: 5px 0;
            font-size: 14px;
            color: #ccc;
        }
        .info li::before {
            content: "✓ ";
            color: #4caf50;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div class="calculator">
    <h1>Ma Calculatrice JS</h1>

    <div class="display" id="display">0</div>

    <div class="buttons">
        <button class="clear" onclick="clearDisplay()">C</button>
        <button onclick="deleteLast()">⌫</button>
        <button class="operator" onclick="appendToDisplay('/')">/</button>
        <button class="operator" onclick="appendToDisplay('*')">×</button>

        <button onclick="appendToDisplay('7')">7</button>
        <button onclick="appendToDisplay('8')">8</button>
        <button onclick="appendToDisplay('9')">9</button>
        <button class="operator" onclick="appendToDisplay('-')">-</button>

        <button onclick="appendToDisplay('4')">4</button>
        <button onclick="appendToDisplay('5')">5</button>
        <button onclick="appendToDisplay('6')">6</button>
        <button class="operator" onclick="appendToDisplay('+')">+</button>

        <button onclick="appendToDisplay('1')">1</button>
        <button onclick="appendToDisplay('2')">2</button>
        <button onclick="appendToDisplay('3')">3</button>
        <button class="equals" onclick="calculate()" style="grid-row: span 2;">=</button>

        <button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
        <button onclick="appendToDisplay('.')">.</button>
    </div>

    <div class="info">
        <h3>Ce que j'ai appris :</h3>
        <ul>
            <li>Manipulation du DOM avec getElementById</li>
            <li>Gestion d'événements avec onclick</li>
            <li>Fonctions JavaScript personnalisées</li>
            <li>Conditions if/else pour la logique</li>
            <li>Gestion des erreurs avec try/catch</li>
            <li>Intégration HTML/CSS/JavaScript</li>
        </ul>
    </div>
</div>

<script>
// Variables globales
let display = document.getElementById('display');
let currentInput = '0';
let shouldResetDisplay = false;

// Fonction pour afficher dans la calculatrice
function updateDisplay() {
    display.textContent = currentInput;
}

// Ajouter un caractère à l'affichage
function appendToDisplay(value) {
    if (shouldResetDisplay) {
        currentInput = '';
        shouldResetDisplay = false;
    }

    if (currentInput === '0' && value !== '.') {
        currentInput = value;
    } else {
        currentInput += value;
    }

    updateDisplay();
}

// Effacer l'affichage
function clearDisplay() {
    currentInput = '0';
    updateDisplay();
}

// Supprimer le dernier caractère
function deleteLast() {
    if (currentInput.length > 1) {
        currentInput = currentInput.slice(0, -1);
    } else {
        currentInput = '0';
    }
    updateDisplay();
}

// Calculer le résultat
function calculate() {
    try {
        // Remplacer × par * pour l'évaluation
        let expression = currentInput.replace(/×/g, '*');

        // Évaluer l'expression
        let result = eval(expression);

        // Vérifier si le résultat est valide
        if (isNaN(result) || !isFinite(result)) {
            throw new Error('Calcul impossible');
        }

        // Arrondir le résultat si nécessaire
        if (result.toString().length > 10) {
            result = parseFloat(result.toPrecision(10));
        }

        currentInput = result.toString();
        shouldResetDisplay = true;

    } catch (error) {
        currentInput = 'Erreur';
        shouldResetDisplay = true;
    }

    updateDisplay();
}

// Gestion du clavier (bonus)
document.addEventListener('keydown', function(event) {
    const key = event.key;

    if ('0123456789.'.includes(key)) {
        appendToDisplay(key);
    } else if ('+-*/'.includes(key)) {
        appendToDisplay(key === '*' ? '×' : key);
    } else if (key === 'Enter' || key === '=') {
        event.preventDefault();
        calculate();
    } else if (key === 'Escape' || key === 'c' || key === 'C') {
        clearDisplay();
    } else if (key === 'Backspace') {
        deleteLast();
    }
});

// Message de bienvenue dans la console
console.log('Calculatrice JavaScript chargée !');
console.log('Vous pouvez utiliser le clavier pour calculer');
console.log('Ouvrez les DevTools pour voir le code');
</script>

</body>
</html>

Instructions d'utilisation

  • 1. Créer le fichier : Créez un fichier calculatrice.html
  • 2. Copier le code : Copiez tout le code HTML/CSS/JavaScript
  • 3. Ouvrir dans le navigateur : Double-cliquez sur le fichier
  • 4. Tester : Utilisez la souris ou le clavier
  • 5. Explorer : Appuyez sur F12 pour voir la console

Concepts JavaScript maîtrisés

Variables et fonctions

let, const, function, arrow functions

DOM Manipulation

getElementById, textContent, addEventListener

Événements

onclick, keydown, event handling

Conditions et logique

if/else, try/catch, validation

Gestion d'erreurs

try/catch, validation des entrées

Exercices d'Amélioration

Niveau Débutant :

  • 🟡 Changer les couleurs du thème
  • 🟡 Ajouter un bouton % (pourcentage)
  • 🟡 Modifier les messages d'erreur
  • 🟡 Ajouter des animations CSS

Niveau Intermédiaire :

  • 🟠 Ajouter un historique des calculs
  • 🟠 Implémenter des fonctions scientifiques
  • 🟠 Sauvegarder dans le localStorage
  • 🟠 Créer un mode sombre/clair

Niveau Avancé :

  • 🔴 Convertisseur d'unités intégré
  • 🔴 Graphiques de fonctions
  • 🔴 Export des résultats en PDF
  • 🔴 Interface mobile responsive

Félicitations ! Vous maîtrisez les bases de JavaScript

Vous avez appris les concepts fondamentaux : variables, fonctions, DOM, événements. Il est temps d'aller plus loin !

🎯 Prochaines étapes recommandées :

1. Pratiquer avec plus de projets • 2. Apprendre les frameworks modernes • 3. Découvrir le JavaScript côté serveur • 4. Maîtriser les APIs web

Vous maîtrisez les bases de JavaScript

Variables, types, DOM et événements : vous avez de quoi rendre une page vivante. La suite traite d’ES6+, de l’asynchrone et des API.