Close
Les Variables :
var, let, ou const.var age = 25;
let name = "Alice";
const pi = 3.14159;var : Déclare une variable avec une portée de fonction (obsolète et à éviter).let : Déclare une variable avec une portée de bloc.const : Déclare une constante dont la valeur ne peut pas être modifiée.
Les Fonctions :
function greet(name) {
return `Bonjour, ${name}!`;
}
console.log(greet("Alice"));
const greetArrow = (name) => `Bonjour, ${name}!`;
console.log(greetArrow("Bob"));
function : Utilisé pour déclarer une fonction nommée.const greetArrow = (name) => { ... } : Syntaxe plus concise pour déclarer des fonctions avec l’opérateur fléché.
Les Conditions :
let age = 18;
if (age >= 18) {
console.log("Vous êtes majeur.");
} else {
console.log("Vous êtes mineur.");
}if : Vérifie si la condition est vraie.else : Exécute le bloc de code si la condition dans if est fausse.
Les boucles sont des structures de contrôle qui permettent de répéter un bloc de code plusieurs fois. JavaScript offre plusieurs types de boucles, les plus couramment utilisées étant for et while.
forwhiledo...whilefor...infor...of
for
La boucle for est souvent utilisée lorsqu’on sait à l’avance combien de fois on veut répéter un bloc de code. Elle est particulièrement utile pour itérer sur des séquences numériques ou des tableaux.
for (initialisation; condition; incrémentation) {
// Code à exécuter à chaque itération
}
for (let i = 0; i < 5; i++) {
console.log(i);
}
let i = 0 initialise la variable i à 0.i < 5 vérifie si i est inférieur à 5.i++ augmente la valeur de i de 1 à chaque itération.
La boucle va afficher les valeurs de 0 à 4 dans la console.
while
La boucle while répète un bloc de code tant qu’une condition spécifiée est vraie. Elle est utile lorsque le nombre d’itérations n’est pas connu à l’avance et dépend de la condition.
while (condition) {
// Code à exécuter tant que la condition est vraie
}
let count = 0;
while (count < 5) {
console.log(count);
count++;
}
count est initialisée à 0.count est inférieur à 5.count++ augmente la valeur de count de 1 à chaque itération.
La boucle va afficher les valeurs de 0 à 4 dans la console.
do...while
La boucle do...while est similaire à la boucle while, mais la condition est évaluée après chaque itération. Cela garantit que le bloc de code est exécuté au moins une fois.
do {
// Code à exécuter
} while (condition);
let count = 0;
do {
console.log(count);
count++;
} while (count < 5);
count est initialisé à 0, et le bloc de code est exécuté une fois avant que la condition count < 5 soit vérifiée.
for...in
La boucle for...in est utilisée pour itérer sur les propriétés énumérables d’un objet ou les indices d’un tableau.
Exemple avec un objet
const person = {name: "Alice", age: 25, city: "Paris"};
for (let key in person) {
console.log(key + ": " + person[key]);
}
person contient trois propriétés : name, age, et city.person et affiche ses clés et valeurs.key prend la valeur d’une des propriétés de l’objet.console.log(key + ": " + person[key]) : Cette ligne affiche la clé actuelle suivie de sa valeur correspondante dans l’objet person.key sera "name" et person[key] sera "Alice". Le message affiché sera donc "name: Alice".
Exemple avec un tableau
const colors = ["red", "green", "blue"];
for (let index in colors) {
console.log(index + ": " + colors[index]);
}
colors contient trois éléments : "red", "green", et "blue".colors.index prend la valeur de l’indice d’un élément du tableau.console.log(index + ": " + colors[index]) : Cette ligne affiche l’indice actuel suivi de la valeur correspondante dans le tableau colors.index sera 0 et colors[index] sera "red". Le message affiché sera donc "0: red".
for...of
La boucle for...of est utilisée pour itérer directement sur les valeurs des objets itérables. Les objets itérables incluent les tableaux, les chaînes de caractères, les ensembles (Set), les cartes (Map), et d’autres structures de données similaires.
for (let variable of iterable) {
// Code à exécuter pour chaque valeur
}
Exemple avec un tableau
const colors = ["red", "green", "blue"];
for (let color of colors) {
console.log(color);
}
colors contient trois éléments : "red", "green", et "blue".colors.color prend la valeur d’un élément du tableau.console.log(color) : Cette ligne affiche la valeur actuelle de l’élément du tableau.color sera "red". Lors de la deuxième itération, ce sera "green", et ainsi de suite.
Exemple avec une chaîne de caractères
const message = "hello";
for (let char of message) {
console.log(char);
}
message contient le texte "hello".message.char prend la valeur d’un caractère de la chaîne.console.log(char) : Cette ligne affiche le caractère actuel de la chaîne.char sera "h". Lors de la deuxième itération, ce sera "e", et ainsi de suite.
Exemple avec un ensemble (Set)
const uniqueNumbers = new Set([1, 2, 3, 4, 5]);
for (let number of uniqueNumbers) {
console.log(number);
}
uniqueNumbers contient des valeurs uniques : 1, 2, 3, 4, et 5.uniqueNumbers.number prend la valeur d’un élément de l’ensemble.console.log(number) : Cette ligne affiche la valeur actuelle de l’élément de l’ensemble.
Exemple avec une carte (Map)
const map = new Map([
['name', 'Alice'],
['age', 25],
['city', 'Paris']
]);
for (let [key, value] of map) {
console.log(key + ": " + value);
}
map contient des paires clé-valeur : ['name', 'Alice'], ['age', 25], et ['city', 'Paris'].map.key et value prennent respectivement les valeurs de la clé et de la valeur de chaque paire.console.log(key + ": " + value) : Cette ligne affiche chaque clé suivie de sa valeur correspondante.
En JavaScript, un objet est une collection de paires clé-valeur. Les clés (ou propriétés) sont des chaînes de caractères, et les valeurs peuvent être de n’importe quel type de données : chaînes, nombres, tableaux, autres objets, fonctions, etc.
// Déclaration d'un objet
const person = {
firstName: "John",
lastName: "Doe",
age: 30,
// Méthode de l'objet
greet: function() {
return `Bonjour, je suis ${this.firstName} ${this.lastName}`;
}
};
// Accéder à une propriété
console.log(person.firstName); // Affiche: John
// Appeler une méthode de l'objet
console.log(person.greet()); // Affiche: Bonjour, je suis John Doe
const person = { ... } : Déclare un objet nommé person avec trois propriétés (firstName, lastName, age) et une méthode (greet).person.firstName : Accède à la propriété firstName de l’objet.person.greet() : Appelle la méthode greet de l’objet. this fait référence à l’objet actuel (person), donc this.firstName accède à la propriété firstName de l’objet.
Les propriétés des objets peuvent également être définies de manière dynamique et accédées de différentes façons.
const car = {};
car["make"] = "Toyota";
car["model"] = "Corolla";
// Accéder aux propriétés dynamiques
console.log(car["make"]); // Affiche: Toyota
console.log(car.model); // Affiche: Corolla
car["make"] : Accède à la propriété make en utilisant une chaîne comme clé.car.model : Accède à la propriété model en utilisant la notation par point.
Le DOM (Document Object Model) est une interface qui représente le document HTML comme une structure d’objets. JavaScript permet de manipuler cette structure pour modifier le contenu et la structure d’une page web en temps réel.
// Sélectionner un élément par son ID
const header = document.getElementById("header");
header.textContent = "Bienvenue!";
// Sélectionner un élément par sa classe
const items = document.getElementsByClassName("item");
for (let i = 0; i < items.length; i++) {
items[i].style.color = "blue";
}
// Sélectionner un élément avec un sélecteur CSS
const firstButton = document.querySelector("button");
firstButton.textContent = "Cliquez-moi!";
document.getElementById("header") : Sélectionne l’élément HTML avec l’ID header et permet de modifier son contenu avec .textContent.document.getElementsByClassName("item") : Sélectionne tous les éléments avec la classe item. getElementsByClassName retourne une collection HTML en direct. On peut parcourir cette collection avec une boucle pour appliquer des styles ou effectuer d’autres manipulations.document.querySelector("button") : Sélectionne le premier élément correspondant au sélecteur CSS "button". querySelector est plus flexible et permet l’utilisation de sélecteurs CSS plus complexes.
Les événements permettent de réagir aux actions de l’utilisateur, comme les clics ou les frappes au clavier.
// Ajouter un écouteur d'événement au clic sur un bouton
const button = document.querySelector("button");
button.addEventListener("click", () => {
alert("Button clicked!");
});
// Ajouter un écouteur d'événement au survol de la souris sur un élément
const box = document.querySelector(".box");
box.addEventListener("mouseover", () => {
box.style.backgroundColor = "yellow";
});
addEventListener("click", () => { ... }) : Ajoute un écouteur d’événement pour le clic. La fonction de rappel (callback) sera exécutée lorsque l’événement se produira.addEventListener("mouseover", () => { ... }) : Ajoute un écouteur d’événement pour le survol de la souris. Ici, la couleur de fond de l’élément sera changée en jaune lorsque la souris le survole.
On peut également créer de nouveaux éléments HTML et les ajouter à la page.
// Créer un nouvel élément <div>
const newDiv = document.createElement("div");
newDiv.textContent = "Ceci est un nouveau div.";
newDiv.className = "new-class";
// Ajouter le nouvel élément au corps du document
document.body.appendChild(newDiv);
// Créer un nouvel élément <p> et le placer dans le <div>
const newParagraph = document.createElement("p");
newParagraph.textContent = "Ceci est un paragraphe dans le nouveau div.";
newDiv.appendChild(newParagraph);
document.createElement("div") : Crée un nouvel élément <div>.newDiv.textContent = "Ceci est un nouveau div." : Définit le texte du nouvel élément <div>.document.body.appendChild(newDiv) : Ajoute le nouvel élément <div> à la fin du <body>.newDiv.appendChild(newParagraph) : Ajoute le nouvel élément <p> à l’intérieur du <div> nouvellement créé.
function afficherMessage() {
console.log('Message affiché après 2 secondes');
}
setTimeout(afficherMessage, 2000); // Exécute afficherMessage après 2 secondesafficherMessage est définie pour afficher un message dans la console.setTimeout est une fonction intégrée qui exécute afficherMessage après 2000 millisecondes (2 secondes).
function chargerDonnees(callback) {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(JSON.parse(xhr.responseText));
}
};
xhr.send();
}
function afficherDonnees(donnees) {
console.log(donnees);
}
chargerDonnees(afficherDonnees);chargerDonnees prend une fonction de callback comme argument.XMLHttpRequest est utilisé pour effectuer une requête HTTP GET vers une URL.onreadystatechange est un événement qui vérifie si la requête est terminée (readyState === 4) et si elle a réussi (status === 200).afficherDonnees est une fonction qui affiche les données dans la console.chargerDonnees(afficherDonnees) exécute la requête et passe afficherDonnees comme callback.
let maPromesse = new Promise(function(resolve, reject) {
let condition = true;
if (condition) {
resolve('La promesse a été résolue!');
} else {
reject('La promesse a été rejetée.');
}
});
maPromesse.then(function(resultat) {
console.log(resultat);
}).catch(function(erreur) {
console.log(erreur);
});
new Promise, qui prend une fonction avec deux arguments : resolve et reject.resolve est appelé lorsque l’opération réussit.reject est appelé lorsque l’opération échoue.then est utilisé pour gérer le succès de la promesse.catch est utilisé pour gérer les erreurs ou le rejet de la promesse.
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Erreur:', error));fetch est une fonction intégrée qui effectue des requêtes HTTP et retourne une promesse.then est utilisé pour traiter la réponse de la requête.response.json() est utilisé pour transformer la réponse en format JSON.then est utilisé pour traiter les données JSON.catch est utilisé pour gérer les erreurs éventuelles.
async function obtenirDonnees() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
let data = await response.json();
console.log(data);
}
catch (error) {
console.error('Erreur:', error);
}
}
obtenirDonnees();async avant une fonction la rend asynchrone et elle retourne une promesse.await est utilisé pour attendre la résolution d’une promesse. Il peut seulement être utilisé dans une fonction asynchrone.try...catch est utilisé pour gérer les erreurs.fetch est utilisé pour effectuer une requête HTTP, et await attend la réponse.response.json() transforme la réponse en JSON, et await attend cette opération.
Pour résumer, voici un exemple complet montrant comment utiliser les trois techniques pour effectuer une requête réseau.
// Callback
function chargerAvecCallback(callback) {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(JSON.parse(xhr.responseText));
}
};
xhr.send();
}
chargerAvecCallback(function (data) {
console.log('Callback:', data);
});
// Promesse
function chargerAvecPromesse() {
return new Promise(function (resolve, reject) {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
resolve(JSON.parse(xhr.responseText));
} else if (xhr.readyState === 4) {
reject('Erreur de chargement');
}
};
xhr.send();
});
}
chargerAvecPromesse().then(function (data) {
console.log('Promesse:', data);
}).catch(function (error) {
console.error('Erreur:', error);
});
// Async/Await
async function chargerAvecAsyncAwait() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
let data = await response.json();
console.log('Async/Await:', data);
} catch (error) {
console.error('Erreur:', error);
}
}
chargerAvecAsyncAwait();chargerAvecCallback utilise XMLHttpRequest pour charger des données et appelle une fonction de callback avec les données une fois chargées.chargerAvecPromesse crée une promesse qui utilise XMLHttpRequest pour charger des données et résout ou rejette la promesse en fonction du succès de la requête.chargerAvecAsyncAwait utilise fetch pour charger des données et await pour attendre la réponse et la conversion en JSON.
Vous avez maintenant les bases pour commencer à utiliser JavaScript pour rendre vos pages web interactives. Pour aller plus loin, explorez des concepts plus avancés, les bibliothèques JavaScript comme jQuery, et consultez des ressources supplémentaires :
