GRATUIT Chapitre d'aperçu — M05 · Introduction à JavaScript
Accéder aux 77 autres →
M05-C01 · JavaScript & Programmation Web · 1h 30

Introduction à JavaScript

🎯 Objectifs du chapitre

  • ✓ Comprendre le rôle de JavaScript dans le web
  • ✓ Écrire et exécuter du JavaScript dans le navigateur
  • ✓ Utiliser la console et les DevTools
  • ✓ Comprendre la différence entre synchrone et asynchrone

Introduction à JavaScript

Qu'est-ce que JavaScript ?

JavaScript (JS) est le langage de programmation du web. Créé en 1995 par Brendan Eich en seulement 10 jours, il est aujourd'hui l'un des langages les plus utilisés au monde.

Initialement conçu pour ajouter de l'interactivité aux pages web, JavaScript s'est étendu à :

  • Front-end : manipulation du DOM, animations, formulaires
  • Back-end : Node.js (serveurs, API REST)
  • Mobile : React Native, Ionic
  • Desktop : Electron (VS Code, Slack, Discord utilisent Electron)

Relation HTML/CSS/JS

Technologie Rôle Analogie
HTML Structure Squelette
CSS Présentation Vêtements
JavaScript Comportement Muscles / Actions

Intégrer JavaScript dans une page HTML

Script externe (recommandé)

<!-- En bas du body, avant </body> -->
<script src="app.js"></script>

<!-- Dans <head> avec defer (moderne et recommandé) -->
<head>
    <script src="app.js" defer></script>
</head>
  • defer : le script est téléchargé en parallèle et exécuté après le parsing HTML
  • async : téléchargé en parallèle et exécuté dès que disponible (ordre non garanti)

Script interne

<script>
    console.log('Bonjour depuis un script interne');
</script>

Script en ligne (à éviter)

<button onclick="alert('Clic!')">Cliquez</button>

La console JavaScript

La console est votre outil de débogage principal. Accessible via F12 → Console.

console.log('Message simple');
console.log('Valeur :', 42, { nom: 'Alice' });
console.warn('Avertissement');
console.error('Erreur !');
console.table([{ nom: 'Alice', age: 30 }, { nom: 'Bob', age: 25 }]);
console.group('Groupe');
console.log('élément 1');
console.groupEnd();
console.time('monChrono');
// ... code à mesurer ...
console.timeEnd('monChrono');

Variables : let, const, var

const — valeur constante (recommandé par défaut)

const nom = 'Alice';
const age = 30;
const PI = 3.14159;

// nom = 'Bob'; // ❌ Erreur : impossible de réassigner une const
// Mais les objets/tableaux const peuvent être mutés :
const user = { nom: 'Alice' };
user.nom = 'Bob'; // ✅ Fonctionne (mutation de l'objet, pas de réassignation)

let — variable réassignable

let compteur = 0;
compteur = 1;     // ✅
compteur += 5;    // ✅ compteur vaut 6

let message;      // undefined par défaut
message = 'Bonjour';

var — ancienne syntaxe (à éviter)

var ancien = 'texte'; // Ne pas utiliser — portée function, pas de bloc

Règle d'or : Utilisez const par défaut. Passez à let seulement si vous devez réassigner.

Types de données

JavaScript est dynamiquement typé : le type est déterminé à l'exécution.

Types primitifs

// String (chaîne de caractères)
const prenom = 'Alice';
const message = "Bonjour tout le monde";
const template = `Bonjour, ${prenom} !`; // Template literal

// Number (nombre — entier ET décimal)
const entier = 42;
const decimal = 3.14;
const negatif = -100;
const infini = Infinity;
const pasUnNombre = NaN; // Not a Number

// Boolean (booléen)
const estConnecte = true;
const estAdmin = false;

// Undefined (variable déclarée mais non assignée)
let variable;
console.log(variable); // undefined

// Null (absence intentionnelle de valeur)
const utilisateur = null; // Pas encore chargé

// Symbol (identifiant unique — avancé)
const id = Symbol('id');

// BigInt (grands entiers)
const grandNombre = 9007199254740991n;

Type Object

// Object (objet)
const personne = {
    nom: 'Alice',
    age: 30,
    actif: true,
    adresse: {
        ville: 'Paris',
        codePostal: '75001'
    }
};

// Array (tableau — est aussi un objet)
const fruits = ['pomme', 'banane', 'cerise'];
const mixte = [1, 'texte', true, null, { id: 1 }];

// Function (est aussi un objet)
const saluer = function() { return 'Bonjour'; };

typeof : connaître le type

typeof 42          // "number"
typeof 'Alice'     // "string"
typeof true        // "boolean"
typeof undefined   // "undefined"
typeof null        // "object" ← Attention ! Bug historique de JS
typeof []          // "object"
typeof {}          // "object"
typeof function(){} // "function"

Opérateurs

Arithmétiques

const a = 10, b = 3;
console.log(a + b);  // 13
console.log(a - b);  // 7
console.log(a * b);  // 30
console.log(a / b);  // 3.333...
console.log(a % b);  // 1 (modulo = reste de la division)
console.log(a ** b); // 1000 (puissance)

let x = 5;
x++;    // 6 (post-incrément)
++x;    // 7 (pré-incrément)
x--;    // 6
x += 10; // x = x + 10
x *= 2;  // x = x * 2

Comparaison

// Égalité STRICTE (recommandée) — compare valeur ET type
console.log(5 === 5);    // true
console.log(5 === '5');  // false (types différents)
console.log(5 !== '5');  // true

// Égalité laxiste (à éviter) — convertit les types
console.log(5 == '5');   // true  ← Piège !
console.log(0 == false); // true  ← Piège !
console.log('' == false); // true ← Piège !

// Comparaisons
console.log(5 > 3);   // true
console.log(5 >= 5);  // true
console.log(5 < 10);  // true

Règle : Toujours utiliser === et !==.

Logiques

// AND (et) — vrai si les deux sont vrais
console.log(true && true);   // true
console.log(true && false);  // false

// OR (ou) — vrai si au moins un est vrai
console.log(false || true);  // true
console.log(false || false); // false

// NOT (non)
console.log(!true);   // false
console.log(!false);  // true

// Nullish coalescing ?? — valeur par défaut si null ou undefined
const nom = null;
console.log(nom ?? 'Anonyme'); // "Anonyme"

// Optional chaining ?. — accès sécurisé aux propriétés
const user = null;
console.log(user?.nom); // undefined (pas d'erreur)
console.log(user?.adresse?.ville); // undefined

Chaînes de caractères (String)

const prenom = 'Alice';
const nom = 'Dupont';

// Concaténation
const nomComplet = prenom + ' ' + nom;

// Template literals (recommandé)
const message = `Bonjour, ${prenom} ${nom} !`;
const calcul = `2 + 2 = ${2 + 2}`;

// Méthodes utiles
console.log('hello'.length);          // 5
console.log('hello'.toUpperCase());   // "HELLO"
console.log('HELLO'.toLowerCase());  // "hello"
console.log('  hello  '.trim());      // "hello"
console.log('hello world'.includes('world')); // true
console.log('hello'.startsWith('he')); // true
console.log('hello'.endsWith('lo'));   // true
console.log('hello'.replace('l', 'r')); // "herlo"
console.log('hello'.replaceAll('l', 'r')); // "herro"
console.log('a,b,c'.split(','));       // ["a", "b", "c"]
console.log('hello'.slice(1, 3));      // "el"
console.log('hello'.charAt(0));        // "h"
console.log('hello'.indexOf('l'));     // 2
console.log('5'.padStart(3, '0'));     // "005"
console.log('abc'.repeat(3));         // "abcabcabc"

Conversions de types

// Vers String
String(42)        // "42"
String(true)      // "true"
String(null)      // "null"
(42).toString()   // "42"
(42).toString(2)  // "101010" (binaire)

// Vers Number
Number('42')      // 42
Number('3.14')    // 3.14
Number('hello')   // NaN
Number(true)      // 1
Number(false)     // 0
Number(null)      // 0
parseInt('42px')  // 42
parseFloat('3.14rem') // 3.14

// Vers Boolean
Boolean(0)        // false
Boolean('')       // false
Boolean(null)     // false
Boolean(undefined) // false
Boolean(NaN)      // false
Boolean(1)        // true
Boolean('hello')  // true
Boolean([])       // true (tableau vide = truthy !)
Boolean({})       // true (objet vide = truthy !)

Valeurs falsy : false, 0, '', null, undefined, NaN Tout le reste est truthy, y compris [], {}, '0'.

Exercice pratique

// 1. Déclarez vos informations personnelles
const prenom = 'Votre prénom';
const age = 25; // Votre âge
const estEtudiant = true;

// 2. Créez un message de présentation
const presentation = `Je m'appelle ${prenom}, j'ai ${age} ans.
${estEtudiant ? 'Je suis étudiant(e).' : 'Je travaille.'}`;

console.log(presentation);

// 3. Testez les opérateurs
console.log(typeof prenom, typeof age, typeof estEtudiant);
console.log(age >= 18 ? 'Majeur' : 'Mineur');
console.log(`Dans 10 ans j'aurai ${age + 10} ans.`);

Résumé

Concept À retenir
const Par défaut pour toutes les variables
let Seulement si réassignation nécessaire
Types primitifs string, number, boolean, undefined, null
=== Toujours préférer à ==
Template literals \${variable}`` pour les chaînes dynamiques
?. Optional chaining pour accès sécurisé
?? Nullish coalescing pour valeurs par défaut

Quiz du chapitre — 10 questions

Ce chapitre comporte un quiz interactif pour valider votre compréhension. Accessible après inscription.

Quelle déclaration de variable est recommandée par défaut en JavaScript moderne ?

Quelle est la différence entre === et == en JavaScript ?

🔒 Inscrivez-vous pour accéder au quiz complet et valider ce chapitre

Vous venez de terminer le chapitre d'aperçu 🎉

Il reste 77 chapitres, 9 modules et 30+ projets dans la formation complète.

Vos projets seront évalués automatiquement par IA · Accès à vie · 299€ une fois

Démarrer la formation complète → Voir les 9 modules

🔄 Satisfait ou remboursé 14 jours · 🔒 Paiement sécurisé Stripe