Voici la traduction de l'article du russe vers le français, en respectant toutes les règles spécifiées :
Qu'est-ce que c'est et pourquoi ?
Imagine que tu es le réalisateur de ton propre film, et que ton ordinateur est un studio de cinéma. HTML est comme le scénario et les décors (texte, images, boutons, tableaux). CSS est le costumier et l'éclairagiste (couleurs, polices, disposition esthétique). Et JavaScript est les acteurs et les effets spéciaux ! C'est JS qui fait bouger tout, réagir aux clics de boutons, calculer, afficher des fenêtres contextuelles, changer les images et même créer des jeux.
Si un site web était une personne, alors :
- HTML — le squelette et la peau (la structure).
- CSS — les vêtements et le maquillage (l'apparence).
- JavaScript — le cerveau et les muscles (la logique et les actions).
Sans JavaScript, un site web ne serait qu'un livre ennuyeux que l'on peut seulement lire, sans pouvoir tourner les pages, cliquer sur des liens, jouer ou remplir des formulaires. JS rend les pages web "vivantes".
Où JavaScript est-il utilisé ?
- Partout sur Internet : VK, YouTube, jeux dans le navigateur (par exemple, Agar.io), calculateurs en ligne, cartes (Yandex.Maps), éditeurs de code (comme celui dans lequel tu lis cet article).
- Même sur les serveurs (avec Node.js) — par exemple, pour traiter les messages dans les chats ou stocker des données.
- Dans les applications mobiles (React Native) et sur les ordinateurs de bureau (Electron — Discord et VS Code sont écrits avec).
JavaScript est le langage le plus populaire au monde ! Pourquoi ? Parce qu'il est intégré directement dans le navigateur. Tu n'as besoin de rien installer (contrairement à Python qu'il faut télécharger). Tu ouvres un bloc-notes, tu écris le code, tu sauvegardes en .html — et c'est prêt ! Tu peux l'exécuter en double-cliquant.
Différence importante avec Python : en Python, le code s'exécute tout seul dans la console, alors qu'en JavaScript, il est toujours lié à la page web. JS ne peut pas créer lui-même des fenêtres graphiques (comme pygame), mais il peut contrôler ce qui est déjà à l'écran — boutons, texte, images.
Exemples de code avec explications
La façon la plus simple de commencer est d'écrire du code directement dans le navigateur. Appuie sur F12 (ou clic droit → "Inspecter") et va dans l'onglet "Console". Tu peux y entrer des commandes. Mais nous allons écrire des pages complètes.
Crée un fichier test.html sur ton ordinateur, ouvre-le avec le bloc-notes et colle le code des exemples. Ensuite, sauvegarde-le et ouvre-le dans le navigateur.
Exemple 1 : Bonjour, le monde ! (le tout premier programme)
// Ceci est un commentaire sur une seule ligne. Il n'est pas exécuté.
/* Et ceci est un commentaire sur plusieurs lignes.
Il sert à expliquer le code. */
// La commande alert() affiche une fenêtre contextuelle avec un message.
alert("Hello, world! JavaScript works!");
// La commande console.log() affiche du texte dans la console du développeur.
// Pour voir le résultat, appuie sur F12 et ouvre l'onglet Console.
console.log("Ceci est un message dans la console. Tu es génial !");
// La commande document.write() écrit du texte directement sur la page.
document.write("<h1>Ceci est un titre créé par JavaScript !</h1>");
Que va-t-il se passer ?
- D'abord, une fenêtre contextuelle avec le texte apparaîtra.
- Ensuite, dans la console (F12), un deuxième message apparaîtra.
- À la fin, un grand titre apparaîtra sur la page.
En Python, le premier programme est simplement print("Hello"). En JS, nous utilisons alert() ou console.log(). La différence est que JS vit dans le navigateur, il a donc accès aux fenêtres et à la page elle-même.
Exemple 2 : Les variables — des boîtes pour les données
// Une variable est comme une boîte avec une étiquette.
// En Python, tu écris : name = "Vasya"
// En JS, nous utilisons le mot-clé let (la façon moderne).
let nom = "Marie"; // Chaîne de caractères (texte)
let age = 12; // Nombre
let aimeLaPizza = true; // Valeur booléenne (oui/non)
let boiteVide = null; // Vide (rien)
// Affichons tout dans la console :
console.log("Nom :", nom);
console.log("Âge :", age);
console.log("Aime la pizza ?", aimeLaPizza);
// On peut concaténer des chaînes (concaténation) :
let salutation = "Bonjour, " + nom + " ! Tu as " + age + " ans.";
console.log(salutation);
// On peut aussi utiliser les templates de chaînes (comme les f-strings en Python, mais avec ${}) :
let meilleureSalutation = `Bonjour, ${nom} ! Tu as ${age} ans.`;
console.log(meilleureSalutation);
// Changeons la valeur de la variable :
age = 13; // Marie a eu son anniversaire !
console.log("Maintenant, l'âge :", age);
Explication : Les variables servent à stocker des informations. let est comme var en Python, mais en JS, il faut obligatoirement écrire let (ou const pour les constantes). Fais attention au point-virgule ; à la fin de chaque ligne — en Python, il n'y en a pas, alors qu'en JS on le met (parfois ça marche sans, mais il vaut mieux toujours le mettre).
Les templates de chaînes (avec les guillemets inversés `` ` ``) sont très pratiques — tu insères les variables directement dans le texte avec ${}.
Exemple 3 : L'instruction conditionnelle if (comme dans la vie : "Si... alors...")
let ageUtilisateur = 15;
// Si l'âge est supérieur ou égal à 18 :
if (ageUtilisateur >= 18) {
console.log("Tu es adulte ! Tu peux regarder des films d'horreur.");
} else if (ageUtilisateur >= 12) {
console.log("Tu es adolescent ! Tu peux jouer à la plupart des jeux.");
} else {
console.log("Tu es un enfant. Tu ferais mieux de lire un livre.");
}
// Autre exemple : vérifier si un nombre est pair
let nombre = 7;
if (nombre % 2 === 0) { // % est le reste de la division
console.log("Le nombre est pair.");
} else {
console.log("Le nombre est impair.");
}
// Fais attention : en JS, on utilise === (trois signes égaux) pour la comparaison,
// et non == (deux signes égaux). Deux signes égaux correspondent à une comparaison
// "non stricte", qui peut donner des résultats étranges (par exemple, 5 == "5" est vrai,
// alors que le nombre et la chaîne sont de types différents). Utilise toujours ===.
O