Introduction a JavaScript 🌐

Qu'est-ce que JavaScript ?

JavaScript est le langage de programmation du web. C'est le seul langage nativement compris par tous les navigateurs (Chrome, Firefox, Safari, Edge). Il permet de rendre les pages web interactives et dynamiques.

💡 Sans JavaScript, le web serait une simple collection de pages statiques, comme des fichiers PDF en ligne.

1. Un peu d'histoire 📜

Annee	Evenement
1995	Brendan Eich crée JavaScript en 10 jours chez Netscape
1997	Standardisation sous le nom ECMAScript (ES)
2009	Lancement de Node.js : JavaScript sort du navigateur
2015	ES6/ES2015 : mises a jour majeures (const, let, classes, modules...)
2020+	ES2020, ES2021, ES2022... : nouvelles features chaque annee

2. JavaScript dans le navigateur vs Node.js 🖥️

JavaScript peut s'exécuter dans deux environnements :

Caracteristique	Navigateur	Node.js
Utilisation	Cote client	Cote serveur
Acces au DOM	Oui	Non
Acces au systeme de fichiers	Non	Oui
Module	`<script>` dans le HTML	Fichiers `.js` avec `require` ou `import`
Bote a outils	Console du navigateur	Terminal / ligne de commande

3. Ton premier script 🚀

Dans un fichier HTML


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon premier script</title>
</head>
<body>
    <h1 id="titre">Bonjour le monde !</h1>
    <button onclick="direBonjour()">Clique ici</button>

    <script>
        function direBonjour() {
            alert("Bonjour ! Tu as clique sur le bouton !");
            document.getElementById("titre").textContent = "Le bouton a ete clique !";
        }
    </script>
</body>
</html>

Dans un fichier Node.js

Cree un fichier hello.js :


// Affiche dans le terminal
console.log("Bonjour depuis Node.js !");
console.log("La date d'aujourd'hui :", new Date().toLocaleDateString("fr-FR"));
` Execute avec :

```bash
node hello.js

4. La console — ton meilleur ami pour debugger 🐛

La console est l'outil numero 1 pour comprendre ce que fait ton code :


// Afficher des messages
console.log("Hello world !");
console.log(2 + 3);           // 5
console.log("Age :", 25);     // Age : 25

// Afficher des objets
const personne = { nom: "Alice", age: 25 };
console.log(personne);        // { nom: "Alice", age: 25 }

// Afficher sous forme de tableau (plus lisible pour les objets)
console.table(personne);

// Afficher des erreurs
console.error("C'est une erreur !");
console.warn("C'est un avertissement !");
console.time("timer");
// ... code ...
console.timeEnd("timer");     // Affiche le temps d'execution

💡 Astuce : Dans ton navigateur, fais clic droit > Inspecter > onglet Console. C'est la pour tester du code JavaScript en direct !

5. Les commentaires 💬

Les commentaires sont des notes pour les humains — l'ordinateur les ignore :


// Ceci est un commentaire sur une seule ligne

/*
   Ceci est un
   commentaire sur
   plusieurs lignes
*/

console.log("Le code s'execute, pas les commentaires"); // Commentaire en fin de ligne

6. Les variables — introduire let et const 📦

Pour stocker des donnees, on utilise des variables :


// const = constante, ne peut PAS changer de valeur
const prenom = "Alice";
const age = 25;
// prenom = "Bob";  // ❌ ERREUR : on ne peut pas modifier une const

// let = variable, PEUT changer de valeur
let score = 0;
score = 10;     // ✅ OK
score = 25;     // ✅ OK encore

📌 Regle simple :

Utilise const par defaut (90% du temps)

Utilise let uniquement quand la valeur doit changer (compteur, boucle...)

N'utilise JAMAIS var (c'est l'ancien, il a des problemes de portee)

Mot-cle	Reassignable	Portee	Quand l'utiliser
`const`	Non	Bloc `{}`	Par defaut, toujours
`let`	Oui	Bloc `{}`	Quand la valeur change
`var`	Oui	Fonction	Jamais (code legacy)

7. Les types de donnees de base 🏷️


// Types primitifs
const nom = "Alice";          // string (chaine de caracteres)
const age = 25;               // number (entier ou decimal)
const prix = 19.99;           // number
const estActif = true;        // boolean (true ou false)
const rien = null;            // null (absence de valeur)
let indefini;                 // undefined (pas encore assigne)

// Type special
const symbole = Symbol("id"); // symbol (identifiant unique)
const grand = 9007199254740991n; // bigint (tres grands nombres)

console.log(typeof nom);      // "string"
console.log(typeof age);      // "number"
console.log(typeof estActif); // "boolean"
console.log(typeof rien);     // "object" (bug historique de JS !)
console.log(typeof indefini); // "undefined"

💡 typeof est un operateur utile pour verifier le type d'une variable au moment de l'execution.

8. La coercion de type 🔄

JavaScript est un langage faiblement type — il convertit automatiquement les types dans certaines situations :


// Concatenation vs Addition
console.log("5" + 3);     // "53"  → le 3 est converti en texte
console.log("5" - 3);     // 2     → le "5" est converti en nombre
console.log(5 + true);    // 6     → true est converti en 1
console.log(false + 1);   // 1     → false est converti en 0

// Comparaisons dangereuses
console.log(0 == false);   // true  (conversion implicite)
console.log(0 === false);  // false (pas de conversion, types differents)
console.log("" == false);  // true
console.log("" === false); // false
console.log(null == undefined); // true
console.log(null === undefined); // false

⚠️ Regle d'or : Utilise TOUJOURS === (egalite stricte) au lieu de == (egalite souple). Ca evite beaucoup de bugs !

9. Les operateurs de comparaison 📏

Operateur	Signification	Exemple	Resultat
`===`	Egal a (type + valeur)	`"5" === 5`	`false`
`!==`	Different de (type + valeur)	`"5" !== 5`	`true`
`==`	Egal a (avec coercion)	`"5" == 5`	`true`
`!=`	Different de (avec coercion)	`"5" != 5`	`false`
`>`	Plus grand que	`5 > 3`	`true`
`<`	Plus petit que	`5 < 3`	`false`
`>=`	Plus grand ou egal a	`5 >= 5`	`true`
`<=`	Plus petit ou egal a	`5 <= 3`	`false`

10. Exercices pour toi 🎯

Exercice 1 : Premier script Cree un fichier HTML avec un script qui affiche alert("Bonjour !") quand la page se charge.

Exercice 2 : Explorer les types Dans la console du navigateur, tape ces commandes et observe le resultat :


console.log(typeof "hello");
console.log(typeof 42);
console.log(typeof true);
console.log(typeof null);      // Attention au piege !
console.log(typeof undefined);

Exercice 3 : Coercion Devine le resultat de chaque expression avant de l'executer :


console.log("" + 1);      // ?
console.log(true + true); // ?
console.log("10" - 5);    // ?
console.log("10" + 5);    // ?

💡 Pour aller plus loin : JavaScript est le seul langage que tous les navigateurs comprennent. Maitriser ses bases, c'est la cle pour creer des sites web interactifs, des applications mobiles, et meme des serveurs !

⚡ Simulateur — Introduction à JavaScript

Étape 1/4

📝 Pseudo-code

1let nom = "Alice";

2console.log("Salut " + nom);

3const age = 25;

4console.log(typeof age);

⚙️ Exécution

📦 Mémoire

nom

"Alice"

🔀 Flux d'exécution

let nom

let déclare une variable modifiable. On assigne la chaîne "Alice" à la variable nom. let est la façon moderne de déclarer des variables en JS.