JavaScript, c’est quoi ?

JavaScript est le langage qui rend une page web interactive. HTML structure le contenu, CSS s’occupe du visuel, JavaScript ajoute de l’action.

Avec JavaScript, vous pouvez ouvrir un menu, vérifier un formulaire, créer un popup, filtrer une liste, sauvegarder des données dans le navigateur ou charger du contenu sans recharger la page.

console.log('Bonjour JavaScript');

À retenir

JavaScript est exécuté par le navigateur. Pour tester vite, ouvrez l’inspecteur, puis l’onglet Console.

Ajouter JavaScript à une page HTML

Le plus propre est de créer un fichier séparé, par exemple script.js, puis de le charger dans votre HTML.

mon-projet/
├── index.html
├── style.css
└── script.js

<script src="script.js" defer></script>

L’attribut defer permet de charger le script sans bloquer la page. C’est souvent le meilleur choix pour un site classique.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Test JavaScript</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h1>Ma page</h1>
</body>
</html>

Utiliser console.log pour comprendre

console.log() permet d’afficher une information dans la console. C’est l’outil le plus simple pour vérifier ce que fait votre code.

console.log('Le script fonctionne');

const name = 'Julien';
const age = 38;

console.log(name);
console.log(age);
console.log('Nom :', name, 'Âge :', age);

Erreur fréquente

// Mauvais : les guillemets ne sont pas fermés
console.log('Bonjour);

// Correct
console.log('Bonjour');

Les variables : stocker une information

Une variable permet de garder une information en mémoire. En JavaScript moderne, on utilise surtout const et let.

const siteName = 'Sycow Solutions';
let visitors = 10;

console.log(siteName);
console.log(visitors);

const ou let ?

Utilisez const quand la valeur ne sera pas remplacée. Utilisez let quand la valeur peut changer.

let count = 0;

count = count + 1;
count = count + 1;

console.log(count); // 2

const price = 49;

// Erreur : on ne peut pas remplacer une constante
price = 59;

Les types de données

Une valeur JavaScript peut être du texte, un nombre, un booléen, un tableau, un objet ou une valeur vide.

const title = 'Formation JavaScript'; // string
const price = 79; // number
const isActive = true; // boolean
const lessons = ['Variables', 'Conditions', 'Boucles']; // array
const user = {
    firstname: 'Julie',
    email: 'julie@example.com'
}; // object

const nothing = null;

console.log(typeof 'Bonjour'); // string
console.log(typeof 42); // number
console.log(typeof true); // boolean
console.log(typeof {}); // object

Manipuler du texte

Les textes sont très utilisés : messages, titres, alertes, contenus de boutons, valeurs de formulaires.

const firstname = 'Julie';
const message = 'Bonjour ' + firstname + ' !';

console.log(message);

const firstname = 'Julie';
const product = 'Formation HTML';
const price = 49;

const message = `Bonjour ${firstname}, la formation ${product} coûte ${price} €.`;

console.log(message);

const email = '  CONTACT@EXAMPLE.COM  ';

console.log(email.trim());
console.log(email.toLowerCase());
console.log(email.includes('@'));

Manipuler les nombres

JavaScript permet de faire des calculs simples ou plus avancés.

const price = 49;
const quantity = 3;

const total = price * quantity;

console.log(total); // 147

const priceWithoutTax = 100;
const taxRate = 20;

const taxAmount = priceWithoutTax * taxRate / 100;
const priceWithTax = priceWithoutTax + taxAmount;

console.log(priceWithTax); // 120

const price = 19.999;

console.log(Math.round(price)); // 20
console.log(price.toFixed(2)); // "20.00"

Les conditions avec if

Une condition permet d’exécuter du code seulement si une situation est vraie.

const age = 18;

if (age >= 18) {
    console.log('Accès autorisé');
} else {
    console.log('Accès refusé');
}

const stock = 5;

if (stock === 0) {
    console.log('Produit indisponible');
} else if (stock < 3) {
    console.log('Stock faible');
} else {
    console.log('Produit disponible');
}

Comparer correctement

Utilisez === pour comparer. Évitez ==, qui peut produire des conversions surprenantes.

const status = 'paid';

if (status === 'paid') {
    console.log('Commande payée');
}

Les opérateurs utiles

Les opérateurs permettent de comparer ou combiner des conditions.

const price = 49;

console.log(price === 49); // égal
console.log(price !== 50); // différent
console.log(price > 20);   // supérieur
console.log(price >= 49);  // supérieur ou égal
console.log(price < 100);  // inférieur

const isLoggedIn = true;
const hasAccess = false;

if (isLoggedIn && hasAccess) {
    console.log('Afficher la formation');
}

if (isLoggedIn || hasAccess) {
    console.log('Utilisateur connu ou autorisé');
}

const isActive = false;

if (!isActive) {
    console.log('Élément inactif');
}

Les tableaux : stocker plusieurs valeurs

Un tableau permet de stocker une liste : produits, chapitres, images, utilisateurs, messages.

const formations = ['HTML', 'CSS', 'JavaScript'];

console.log(formations[0]); // HTML
console.log(formations[1]); // CSS
console.log(formations.length); // 3

const items = ['HTML', 'CSS'];

items.push('JavaScript');
console.log(items);

items.pop();
console.log(items);

const roles = ['admin', 'editor', 'client'];

if (roles.includes('admin')) {
    console.log('Accès administration');
}

Les boucles : répéter une action

Une boucle permet de répéter du code pour chaque élément d’une liste.

for (let i = 1; i <= 5; i++) {
    console.log('Ligne numéro ' + i);
}

const formations = ['HTML', 'CSS', 'JavaScript'];

for (const formation of formations) {
    console.log(formation);
}

const products = ['Formation HTML', 'Formation CSS', 'Formation JS'];

products.forEach(function (product) {
    console.log(product);
});

Les fonctions : réutiliser du code

Une fonction permet de ranger une action dans un bloc réutilisable.

function sayHello() {
    console.log('Bonjour');
}

sayHello();

function greet(firstname) {
    console.log(`Bonjour ${firstname}`);
}

greet('Julie');
greet('Karim');

function calculateTotal(price, quantity) {
    return price * quantity;
}

const total = calculateTotal(49, 3);

console.log(total);

Version moderne

const calculateTotal = (price, quantity) => {
    return price * quantity;
};

console.log(calculateTotal(49, 2));

Les objets : regrouper des informations

Un objet permet de décrire quelque chose avec plusieurs propriétés : un utilisateur, un produit, une formation, une commande.

const user = {
    firstname: 'Julie',
    lastname: 'Martin',
    email: 'julie@example.com',
    isActive: true
};

console.log(user.firstname);
console.log(user.email);

const product = {
    name: 'Formation JavaScript',
    price: 79,
    stock: 50
};

const message = `${product.name} coûte ${product.price} €.`;

console.log(message);

const products = [
    { name: 'HTML', price: 49 },
    { name: 'CSS', price: 59 },
    { name: 'JavaScript', price: 79 }
];

products.forEach((product) => {
    console.log(`${product.name} : ${product.price} €`);
});

Le DOM : sélectionner des éléments HTML

Le DOM est la représentation de la page HTML en JavaScript. Grâce au DOM, on peut lire, modifier, ajouter ou supprimer des éléments.

<h1 id="mainTitle">Bonjour</h1>
<p class="intro">Bienvenue sur la page.</p>
<button id="actionBtn">Cliquer</button>

const title = document.querySelector('#mainTitle');
const intro = document.querySelector('.intro');
const button = document.querySelector('#actionBtn');

console.log(title);
console.log(intro);
console.log(button);

querySelector ou querySelectorAll ?

const cards = document.querySelectorAll('.card');

cards.forEach((card) => {
    console.log(card);
});

Modifier le contenu d’une page

Une fois un élément sélectionné, JavaScript peut modifier son texte, son HTML, ses classes ou ses attributs.

const title = document.querySelector('h1');

title.textContent = 'Titre modifié avec JavaScript';

const box = document.querySelector('.box');

box.classList.add('is-active');
box.classList.remove('is-hidden');
box.classList.toggle('is-open');

const link = document.querySelector('a');

link.setAttribute('href', '/contact/');
link.setAttribute('target', '_blank');

Les événements : réagir à une action

Un événement se déclenche quand l’utilisateur fait quelque chose : clic, saisie, survol, envoi de formulaire, scroll.

<button id="helloBtn" type="button">Dire bonjour</button>

const button = document.querySelector('#helloBtn');

button.addEventListener('click', () => {
    console.log('Bonjour !');
});

const button = document.querySelector('#helloBtn');
const title = document.querySelector('h1');

button.addEventListener('click', () => {
    title.textContent = 'Le bouton a été cliqué';
});

Mini-projet : menu burger

Objectif : ouvrir et fermer un menu mobile avec un bouton.

<button id="menuToggle" type="button" aria-label="Ouvrir le menu">
    ☰
</button>

<nav id="mobileMenu" class="mobile-menu" aria-hidden="true">
    <a href="/">Accueil</a>
    <a href="/services/">Services</a>
    <a href="/contact/">Contact</a>
</nav>

const menuToggle = document.querySelector('#menuToggle');
const mobileMenu = document.querySelector('#mobileMenu');

menuToggle.addEventListener('click', () => {
    const isOpen = mobileMenu.classList.toggle('is-open');

    mobileMenu.setAttribute('aria-hidden', isOpen ? 'false' : 'true');
    menuToggle.setAttribute('aria-label', isOpen ? 'Fermer le menu' : 'Ouvrir le menu');
});

.mobile-menu {
    display: none;
}

.mobile-menu.is-open {
    display: flex;
    flex-direction: column;
}

Lire et vérifier un formulaire

JavaScript peut lire les champs d’un formulaire avant l’envoi. C’est utile pour afficher un message clair à l’utilisateur.

<form id="contactForm">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message</label>
    <textarea id="message" name="message" required></textarea>

    <button type="submit">Envoyer</button>
</form>

<p id="formMessage"></p>

const form = document.querySelector('#contactForm');
const email = document.querySelector('#email');
const message = document.querySelector('#message');
const formMessage = document.querySelector('#formMessage');

form.addEventListener('submit', (event) => {
    event.preventDefault();

    if (email.value.trim() === '' || message.value.trim() === '') {
        formMessage.textContent = 'Merci de remplir tous les champs.';
        return;
    }

    formMessage.textContent = 'Formulaire prêt à être envoyé.';
});

Créer des éléments HTML avec JavaScript

JavaScript peut créer du contenu dynamiquement. C’est très utile pour afficher une liste venant d’un tableau.

<ul id="formationList"></ul>

const formations = ['HTML', 'CSS', 'JavaScript'];
const list = document.querySelector('#formationList');

formations.forEach((formation) => {
    const item = document.createElement('li');
    item.textContent = formation;
    list.appendChild(item);
});

const products = [
    { name: 'Formation HTML', price: 49 },
    { name: 'Formation CSS', price: 59 },
    { name: 'Formation JS', price: 79 }
];

const container = document.querySelector('#products');

products.forEach((product) => {
    const card = document.createElement('article');

    card.innerHTML = `
        <h2>${product.name}</h2>
        <p>Prix : ${product.price} €</p>
    `;

    container.appendChild(card);
});

Mini-projet : filtrer une liste

Objectif : filtrer des formations selon ce que l’utilisateur tape.

<input type="search" id="searchInput" placeholder="Rechercher une formation">
<ul id="resultsList"></ul>

const formations = ['HTML', 'CSS', 'JavaScript', 'PHP', 'SQL'];
const searchInput = document.querySelector('#searchInput');
const resultsList = document.querySelector('#resultsList');

function renderResults(items) {
    resultsList.innerHTML = '';

    items.forEach((item) => {
        const li = document.createElement('li');
        li.textContent = item;
        resultsList.appendChild(li);
    });
}

renderResults(formations);

searchInput.addEventListener('input', () => {
    const search = searchInput.value.toLowerCase();

    const filtered = formations.filter((formation) => {
        return formation.toLowerCase().includes(search);
    });

    renderResults(filtered);
});

Sauvegarder dans le navigateur avec localStorage

localStorage permet de sauvegarder une petite information dans le navigateur. Elle reste disponible même après actualisation de la page.

localStorage.setItem('theme', 'dark');

const theme = localStorage.getItem('theme');

console.log(theme);

const themeButton = document.querySelector('#themeButton');

const savedTheme = localStorage.getItem('theme');

if (savedTheme === 'dark') {
    document.body.classList.add('dark-mode');
}

themeButton.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');

    const isDark = document.body.classList.contains('dark-mode');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

Comprendre JSON

JSON est un format très utilisé pour échanger des données. On le retrouve dans les API, les configurations, les exports et les réponses serveur.

const user = {
    firstname: 'Julie',
    email: 'julie@example.com'
};

const user = {
    firstname: 'Julie',
    email: 'julie@example.com'
};

const json = JSON.stringify(user);

console.log(json);

const json = '{"firstname":"Julie","email":"julie@example.com"}';

const user = JSON.parse(json);

console.log(user.firstname);

Charger des données avec fetch

fetch permet de demander des données à un fichier ou une API. C’est la base des interfaces modernes.

[
    {
        "name": "Formation HTML",
        "price": 49
    },
    {
        "name": "Formation JavaScript",
        "price": 79
    }
]

fetch('data.json')
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error('Erreur :', error);
    });

Version moderne avec async/await

async function loadFormations() {
    try {
        const response = await fetch('data.json');
        const data = await response.json();

        console.log(data);
    } catch (error) {
        console.error('Impossible de charger les formations', error);
    }
}

loadFormations();

Comprendre l’asynchrone simplement

Certaines actions prennent du temps : charger une API, attendre une réponse serveur, lire un fichier. JavaScript peut continuer à fonctionner en attendant.

console.log('Début');

setTimeout(() => {
    console.log('Message après 2 secondes');
}, 2000);

console.log('Fin');

Le message "Fin" s’affiche avant le message différé, car JavaScript ne bloque pas toute la page.

async function sayHelloLater() {
    console.log('Chargement...');

    await new Promise((resolve) => setTimeout(resolve, 1000));

    console.log('Bonjour après attente');
}

sayHelloLater();

Comprendre les erreurs JavaScript

Les erreurs sont normales. Le plus important est de savoir les lire.

// Erreur : username n’existe pas
console.log(username);

// Correction
const username = 'Julie';
console.log(username);

const button = document.querySelector('#buttonNotFound');

// Erreur si button vaut null
button.addEventListener('click', () => {
    console.log('Click');
});

// Correction
if (button) {
    button.addEventListener('click', () => {
        console.log('Click');
    });
}

try {
    JSON.parse('mauvais json');
} catch (error) {
    console.error('Le JSON est invalide', error);
}

Bonnes pratiques JavaScript

Un bon JavaScript est clair, lisible et évite de mélanger toutes les responsabilités.

const saveButton = document.querySelector('#saveButton');
const messageBox = document.querySelector('#messageBox');

function showMessage(message) {
    messageBox.textContent = message;
}

if (saveButton && messageBox) {
    saveButton.addEventListener('click', () => {
        showMessage('Progression sauvegardée.');
    });
}

À éviter

// Mauvais : tout est mélangé, peu lisible
document.querySelector('#btn').onclick = function(){document.querySelector('#msg').innerHTML='ok'};

Conseils simples

Nommez clairement vos variables. Vérifiez qu’un élément existe avant de l’utiliser. Découpez votre code en fonctions. Évitez les gros blocs impossibles à relire.

Mini-projet : compteur interactif

Objectif : créer un compteur avec boutons plus, moins et reset.

<div class="counter">
    <p>Compteur : <span id="counterValue">0</span></p>

    <button id="decreaseBtn" type="button">-</button>
    <button id="resetBtn" type="button">Reset</button>
    <button id="increaseBtn" type="button">+</button>
</div>

let counter = 0;

const counterValue = document.querySelector('#counterValue');
const decreaseBtn = document.querySelector('#decreaseBtn');
const resetBtn = document.querySelector('#resetBtn');
const increaseBtn = document.querySelector('#increaseBtn');

function updateCounter() {
    counterValue.textContent = counter;
}

increaseBtn.addEventListener('click', () => {
    counter++;
    updateCounter();
});

decreaseBtn.addEventListener('click', () => {
    counter--;
    updateCounter();
});

resetBtn.addEventListener('click', () => {
    counter = 0;
    updateCounter();
});

Mini-projet : todo list simple

Objectif : ajouter des tâches dans une liste.

<form id="todoForm">
    <input type="text" id="todoInput" placeholder="Nouvelle tâche" required>
    <button type="submit">Ajouter</button>
</form>

<ul id="todoList"></ul>

const todoForm = document.querySelector('#todoForm');
const todoInput = document.querySelector('#todoInput');
const todoList = document.querySelector('#todoList');

todoForm.addEventListener('submit', (event) => {
    event.preventDefault();

    const task = todoInput.value.trim();

    if (task === '') {
        return;
    }

    const item = document.createElement('li');
    item.textContent = task;

    item.addEventListener('click', () => {
        item.remove();
    });

    todoList.appendChild(item);
    todoInput.value = '';
});

Dans cet exemple, un clic sur une tâche la supprime. C’est simple mais très formateur.

Mini-projet : accordéon FAQ

Objectif : ouvrir une réponse au clic sur une question.

<div class="faq">
    <button class="faq-question" type="button">JavaScript est-il difficile ?</button>
    <div class="faq-answer">
        <p>Non, si vous apprenez étape par étape avec des exemples simples.</p>
    </div>

    <button class="faq-question" type="button">Faut-il connaître HTML ?</button>
    <div class="faq-answer">
        <p>Oui, au moins les bases pour manipuler les éléments de la page.</p>
    </div>
</div>

const questions = document.querySelectorAll('.faq-question');

questions.forEach((question) => {
    question.addEventListener('click', () => {
        const answer = question.nextElementSibling;
        answer.classList.toggle('is-open');
    });
});

.faq-answer {
    display: none;
}

.faq-answer.is-open {
    display: block;
}

Exercices rapides

Essayez d’abord seul, puis comparez avec la correction.

Exercice 1 : afficher un message personnalisé

const firstname = 'Julie';
const message = `Bonjour ${firstname}, bienvenue dans la formation JavaScript.`;

console.log(message);

Exercice 2 : vérifier un âge

const age = 16;

if (age >= 18) {
    console.log('Majeur');
} else {
    console.log('Mineur');
}

Exercice 3 : calculer un panier

const products = [
    { name: 'HTML', price: 49 },
    { name: 'CSS', price: 59 },
    { name: 'JavaScript', price: 79 }
];

let total = 0;

products.forEach((product) => {
    total += product.price;
});

console.log(`Total : ${total} €`);

Exercice 4 : changer un titre au clic

const title = document.querySelector('h1');
const button = document.querySelector('#changeTitleBtn');

button.addEventListener('click', () => {
    title.textContent = 'Titre modifié';
});

Quiz de validation

Répondez mentalement avant de regarder la correction.

Question 1

Quelle différence entre const et let ?

const sert à déclarer une variable dont la valeur ne sera pas remplacée.
let sert à déclarer une variable qui peut changer.

Question 2

Quelle méthode permet d’écouter un clic ?

element.addEventListener('click', () => {
    // action
});

Question 3

Quelle méthode permet de sélectionner un élément HTML ?

document.querySelector('selecteur');

Exemples :
document.querySelector('#id');
document.querySelector('.classe');
document.querySelector('h1');

Récapitulatif JavaScript

Vous avez maintenant les bases essentielles pour rendre une page interactive. Le plus important est de pratiquer : sélectionner un élément, écouter une action, modifier la page, répéter sur des tableaux et découper votre code en fonctions.

// Variable
const name = 'Julie';
let count = 0;

// Condition
if (count === 0) {
    console.log('Compteur vide');
}

// Tableau
const items = ['HTML', 'CSS', 'JS'];

// Boucle
items.forEach((item) => {
    console.log(item);
});

// Fonction
function greet(firstname) {
    return `Bonjour ${firstname}`;
}

// Sélection DOM
const button = document.querySelector('#button');

// Événement
button.addEventListener('click', () => {
    console.log('Click');
});

// Classe CSS
button.classList.toggle('is-active');

// localStorage
localStorage.setItem('theme', 'dark');

// fetch
fetch('data.json')
    .then((response) => response.json())
    .then((data) => console.log(data));

La suite logique

Après cette formation, vous pouvez approfondir avec les modules JavaScript, les composants, les requêtes AJAX avancées, les APIs, puis éventuellement React ou Vue.