Introduction à JavaScript

JavaScript est le langage de programmation du web. Il permet de rendre les pages interactives et de créer des applications complètes côté client et serveur.

Votre premier programme

Commençons par le classique “Hello World”. Modifiez le code ci-dessous et cliquez sur Exécuter (ou appuyez sur Ctrl+Enter) :

JAVASCRIPT Hello World

// Mon premier programme JavaScript
const message = "Bonjour le monde !";
console.log(message);

// Essaie de modifier le message !
console.log("Bienvenue sur LearnFusion Academy");

Sortie

Les variables

JavaScript propose trois façons de déclarer des variables : var, let et const.

JAVASCRIPT Variables et constantes

// const : valeur qui ne change pas
const PI = 3.14159;
console.log("PI =", PI);

// let : valeur qui peut changer
let compteur = 0;
compteur = compteur + 1;
console.log("Compteur =", compteur);

// Attention : on ne peut pas réassigner une const
// PI = 3.14; // Erreur !

// Types de données
const nom = "Alice";        // String
const age = 25;             // Number
const estEtudiant = true;   // Boolean
const liste = [1, 2, 3];    // Array

console.log(typeof nom, typeof age, typeof estEtudiant);

Sortie

Les fonctions

Les fonctions permettent de réutiliser du code. Il existe plusieurs syntaxes :

JAVASCRIPT Fonctions

// Fonction classique
function saluer(prenom) {
return "Bonjour, " + prenom + " !";
}

console.log(saluer("Marie"));

// Arrow function (ES6+)
const multiplier = (a, b) => a * b;
console.log("3 x 4 =", multiplier(3, 4));

// Fonction avec valeur par défaut
const direBonjour = (nom = "visiteur") => {
console.log(`Salut, ${nom} !`);
};

direBonjour();
direBonjour("Lucas");

Sortie

Les tableaux (Arrays)

Les tableaux sont essentiels en JavaScript. Voici les méthodes les plus utiles :

JAVASCRIPT Manipulation de tableaux

const nombres = [1, 2, 3, 4, 5];

// map : transformer chaque élément
const doubles = nombres.map(n => n * 2);
console.log("Doubles:", doubles);

// filter : garder certains éléments
const pairs = nombres.filter(n => n % 2 === 0);
console.log("Pairs:", pairs);

// reduce : réduire à une seule valeur
const somme = nombres.reduce((acc, n) => acc + n, 0);
console.log("Somme:", somme);

// find : trouver un élément
const premierPair = nombres.find(n => n % 2 === 0);
console.log("Premier pair:", premierPair);

// Chaînage de méthodes
const resultat = nombres
.filter(n => n > 2)
.map(n => n * 10);
console.log("Filtrés et multipliés:", resultat);

Sortie

Les objets

Les objets permettent de regrouper des données liées :

JAVASCRIPT Objets JavaScript

// Création d'un objet
const utilisateur = {
nom: "Dupont",
prenom: "Jean",
age: 30,
email: "jean@example.com",

// Méthode dans l'objet
sePresenter() {
  return `Je suis ${this.prenom} ${this.nom}`;
}
};

console.log(utilisateur.prenom);
console.log(utilisateur.sePresenter());

// Destructuring
const { nom, prenom, age } = utilisateur;
console.log(`${prenom} a ${age} ans`);

// Spread operator
const utilisateurModifie = {
...utilisateur,
age: 31,
ville: "Paris"
};
console.log(utilisateurModifie);

Sortie

Les promesses et async/await

JavaScript gère l’asynchrone avec les Promises :

JAVASCRIPT Asynchrone

// Simuler une requête API
const fetchData = () => {
return new Promise((resolve) => {
  setTimeout(() => {
    resolve({ id: 1, name: "Produit A", price: 29.99 });
  }, 1000);
});
};

// Avec async/await
async function afficherProduit() {
console.log("Chargement...");
const produit = await fetchData();
console.log("Produit reçu:", produit);
console.log(`${produit.name} coûte ${produit.price}€`);
}

afficherProduit();

Sortie

Exercice pratique

Essayez de créer une fonction qui :

Prend un tableau de nombres
Filtre les nombres positifs
Les multiplie par 2
Retourne la somme

JAVASCRIPT À vous de jouer !

// Complétez cette fonction
function exercice(nombres) {
// Votre code ici
// Indice: utilisez filter, map et reduce

return 0; // Remplacez par votre solution
}

// Tests
console.log(exercice([1, -2, 3, -4, 5])); // Attendu: 18
console.log(exercice([-1, -2, -3]));      // Attendu: 0
console.log(exercice([10, 20, 30]));      // Attendu: 120

Sortie

Prochaines étapes

Maintenant que vous maîtrisez les bases, explorez :