⚡ JavaScript
Écris et exécute ton propre code JavaScript, puis pioche des idées dans les 14 bases ci-dessous — chaque exemple s'exécute vraiment dans ton navigateur.
🧪 Compilateur JavaScript
Écris ton propre code JavaScript, utilise console.log() pour afficher un résultat, puis clique sur « Exécuter ».
🛡️ Ton code s'exécute dans une zone isolée et protégée de ton navigateur — il ne peut ni accéder au site, ni envoyer de données ailleurs. Si la page semble bloquée après un « Exécuter », vérifie qu'il n'y a pas de boucle infinie dans ton code, puis recharge la page.
📚 Aide-mémoire
Besoin d'une idée ? Pioche dans ces exemples et colle-les dans ton compilateur ci-dessus.
1. Variables
On range une information dans une boîte nommée avec let ou const.
let prenom = "Léa";
let age = 10;2. Types de données
Une variable peut contenir du texte, un nombre ou un vrai/faux (booléen).
let texte = "Bonjour";
let nombre = 8;
let vrai = true;3. Opérateurs mathématiques
+, -, * et / servent à calculer avec des nombres.
let a = 6;
let b = 3;
let somme = a + b;
let produit = a * b;4. Concaténation de texte
Le signe + permet aussi de coller des morceaux de texte ensemble.
let prenom = "Sami";
let message = "Bonjour " + prenom + " !";5. Condition if / else
Le programme choisit une action différente selon qu'une condition est vraie ou fausse.
let score = 8;
let resultat;
if (score >= 5) {
resultat = "Réussi !";
} else {
resultat = "À revoir";
}6. Boucle for
Répète une action plusieurs fois, ici pour compter de 1 à 5.
let texte = "";
for (let i = 1; i <= 5; i++) {
texte += i + " ";
}7. Tableau (array)
Une liste de plusieurs valeurs rangées dans une seule variable.
let fruits = ["pomme", "banane", "kiwi"];8. Parcourir un tableau
forEach exécute une action pour chaque élément du tableau.
let animaux = ["chat", "chien", "oiseau"];
let phrase = "";
animaux.forEach(function (a) {
phrase += a + ", ";
});9. Fonction
Une fonction est une recette réutilisable qui peut renvoyer un résultat.
function addition(a, b) {
return a + b;
}
let resultat = addition(4, 7);10. Comparaisons
===, > et < comparent deux valeurs et donnent vrai (true) ou faux (false).
let x = 7;
let y = 10;
let estPlusGrand = x > y;11. Nombre aléatoire
Math.random() tire un nombre au hasard — parfait pour simuler un dé !
let de = Math.floor(Math.random() * 6) + 1;12. Changer un texte
textContent remplace le texte affiché par un élément de la page.
document.getElementById("demo").textContent = "Texte changé !";Texte original
13. Changer un style
.style permet de modifier l'apparence d'un élément depuis le code.
document.getElementById("demo").style.color = "#e85d4c";Un peu de couleur
14. Réagir à un clic
addEventListener fait réagir la page quand on clique sur un bouton — clique sur le bouton pour tester !
document.getElementById("bouton").addEventListener("click", function () {
document.getElementById("message").textContent = "Tu as cliqué !";
});