7.5 KiB
7.5 KiB
🎓 Support de cours de JavaScript
📘 Théorie de base
Qu'est-ce que JavaScript ?
JavaScript est un langage de programmation interprété principalement utilisé pour ajouter de l'interactivité aux pages web. Il fonctionne côté client (navigateur), mais peut aussi être utilisé côté serveur (Node.js).
Histoire rapide
JavaScript a été créé en 1995 par Brendan Eich chez Netscape. Il ne faut pas le confondre avec Java, malgré son nom.
Caractéristiques principales
- Langage interprété : Pas besoin de compilation.
- Langage orienté objet : Utilise des objets et des classes.
- Langage dynamique : Les types de variables sont définis à l'exécution.
- Langage multi-paradigme : Supporte la programmation impérative, fonctionnelle et orientée objet.
- Événementiel : Réagit aux actions de l'utilisateur (clics, mouvements de souris, etc.).
- Asynchrone : Grâce aux callbacks, promesses et
async/await, il peut gérer les opérations longues sans bloquer le reste du code.
Utilisations typiques
- Côté client : Manipulation du DOM, gestion des événements, animations.
- Côté serveur : Avec Node.js, JavaScript est aussi utilisé pour créer des serveurs web.
Fonctions importantes et mots-clés en JavaScript
🔑 Mots-clés courants
| Mot-clé | Description |
|---|---|
var |
Déclare une variable (ancienne méthode, portée fonctionnelle) |
let |
Déclare une variable à portée de bloc |
const |
Déclare une constante à portée de bloc |
function |
Déclare une fonction |
return |
Retourne une valeur depuis une fonction |
if, else, switch |
Contrôle de flux conditionnel |
for, while, do...while |
Boucles |
break |
Interrompt une boucle ou un switch |
continue |
Passe à l’itération suivante d’une boucle |
try, catch, finally |
Gestion des erreurs |
throw |
Lance une erreur personnalisée |
class, extends, super |
Programmation orientée objet |
import, export |
Modules JavaScript (ES6) |
async, await |
Programmation asynchrone |
🔧 Fonctions intégrées utiles
| Fonction | Description |
|---|---|
alert() |
Affiche une boîte de dialogue d’alerte |
console.log() |
Affiche un message dans la console |
prompt() |
Demande une saisie utilisateur |
parseInt() |
Convertit une chaîne en entier |
parseFloat() |
Convertit une chaîne en nombre flottant |
isNaN() |
Vérifie si une valeur n’est pas un nombre |
typeof |
Renvoie le type d’une variable |
Array.isArray() |
Vérifie si une valeur est un tableau |
setTimeout() |
Exécute une fonction après un délai |
setInterval() |
Exécute une fonction de manière répétée à intervalle régulier |
Exemple d’utilisation de mots-clés
const nom = prompt("Quel est votre nom ?");
if (nom) {
console.log("Bonjour " + nom);
} else {
console.log("Nom inconnu");
}
1. 🌱 Les bases de JavaScript
1.1 Intégration dans une page HTML
<!DOCTYPE html>
<html>
<head>
<title>Mon script</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Ou directement dans une balise <script> :
<script>
alert('Bonjour !');
</script>
1.2 Variables
let nom = "Alice"; // variable modifiable
const PI = 3.14; // constante
var age = 30; // ancienne syntaxe, à éviter
1.3 Types de données
string:"Bonjour"number:42,3.14boolean:true,falseundefinednullobject,array,function
1.4 Opérateurs
- Arithmétiques :
+,-,*,/,% - Comparaison :
==,===,!=,!==,<,>,<=,>= - Logiques :
&&,||,!
🔍 == vs === en JavaScript
| Expression | == (Égalité lâche) |
=== (Égalité stricte) |
|---|---|---|
'5' == 5 |
✅ true |
❌ false |
0 == false |
✅ true |
❌ false |
null == undefined |
✅ true |
❌ false |
'' == false |
✅ true |
❌ false |
5 == 5 |
✅ true |
✅ true |
'true' == true |
❌ false |
❌ false |
✅
==convertit les types avant comparaison.
✅===compare valeur et type sans conversion.
🎯 Bonne pratique : utiliser === pour éviter les surprises liées à la coercition de type.
2. Contrôle de flux
2.1 Conditions
if (age > 18) {
console.log("Majeur");
} else {
console.log("Mineur");
}
Opérateur ternaire :
let message = (age > 18) ? "Majeur" : "Mineur";
2.2 Boucles
for (let i = 0; i < 5; i++) {
console.log(i);
}
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
3. Fonctions
function saluer(nom) {
return `Bonjour ${nom}`;
}
const direBonjour = (nom) => `Bonjour ${nom}`;
4. Tableaux et objets
4.1 Tableaux
let fruits = ["pomme", "banane"];
fruits.push("kiwi");
console.log(fruits[0]); // pomme
4.2 Objets
let personne = {
nom: "Alice",
age: 30,
parler: function () {
console.log("Bonjour !");
}
};
console.log(personne.nom);
personne.parler();
5. DOM (Document Object Model)
5.1 Sélection des éléments
const titre = document.querySelector("h1");
5.2 Modification du contenu
titre.textContent = "Nouveau Titre";
5.3 Événements
document.querySelector("button").addEventListener("click", () => {
alert("Clic !");
});
💡 Exemple : compteur qui s'incrémente au clic
HTML :
<button id="incrementer">Incrémenter</button>
<p>Compteur : <span id="compteur">0</span></p>
JavaScript :
let compteur = 0;
document.getElementById("incrementer").addEventListener("click", () => {
compteur++;
document.getElementById("compteur").textContent = compteur;
});
6. Asynchrone et AJAX
6.1 setTimeout / setInterval
setTimeout(() => {
console.log("1 seconde");
}, 1000);
6.2 Promesses
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
7. Concepts avancés
7.1 Closures
function createCounter() {
let count = 0;
return () => ++count;
}
const counter = createCounter();
console.log(counter()); // 1
7.2 Classes
class Animal {
constructor(nom) {
this.nom = nom;
}
parler() {
console.log(`${this.nom} fait du bruit`);
}
}
7.3 Modules (ES6)
// fichier.js
export function addition(a, b) {
return a + b;
}
// main.js
import { addition } from "./fichier.js";
7.4 Async / Await
async function getData() {
try {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
} catch (err) {
console.error(err);
}
}
