L'Atelier du Web

Ton premier script

Guides prérequis

Pour débuter avec JavaScript, tu vas découvrir la console, un outil qui permet d’afficher des messages et de voir ce qui se passe dans ton code. C’est très pratique pour comprendre comment ton programme fonctionne !

Voici un exemple de code JavaScript très simple :

Onglet verrouillé
Console
  1. Clique sur le bouton ci-dessus pour exécuter le code JavaScript. Un message est apparu dans la console !
  2. Tu peux aussi retrouver ces messages dans la véritable console du navigateur. Ouvre l’inspecteur avec un clic droit puis « Inspecter » et rends-toi dans l’onglet « Console ».

L’instruction console.log() permet d’afficher un message dans la console. On peut lui passer un texte (entre guillemets), un nombre et d’autres types valeurs. C’est très pratique quand on cherche les bugs dans un programme : on peut afficher des valeurs dans la console pour mieux comprendre ce qui se passe.

As-tu remarqué que la ligne se termine par un point-virgule ? Ils permettent de terminer une instruction. Ils sont obligatoires dans certains langages de programmation, mais ils sont optionnels dans JavaScript : un simple retour à la ligne suffit.

Devrais-je écrire les points-virgule ?

Dans des cas avancés et spécifiques, le ; permet de lever des ambiguïtés, mais en général, c’est une simple question de préférence.

Sur Internet, tu trouveras de nombreux exemples de code avec des points-virgules, mais c’est avant tout une question culturelle : les ; étaient obligatoires dans les langages qui ont inspiré JavaScript, et l’habitude est restée. Plusieurs projets modernes ont une préférence pour les simples retours à la ligne. À toi de choisir !

Les variables

Les variables permettent de stocker des valeurs pour les réutiliser plus tard. On peut y stocker plusieurs types de valeur : des textes (entre guillements), des nombres (entiers ou décimaux) et d’autres types que tu découvriras bientôt !

JS
const prénom = "Alice"
const age = 25

const (constant) déclare une variable dont la valeur est figée dès qu’on l’a donnée. Il existe également let pour déclarer une variable dont la valeur peut changer, mais comme cela rend le contenu de la variable plus imprévisible, cela peut rendre les bugs plus difficiles à débusquer… mieux vaut donc utiliser let avec parcimonie.

On peut aussi stocker le résultat d’un calcul dans une variable :

JS
const age = 25
const prochainAnniversaire = age + 1
const ageDoublé = age * 2

Ici, la valeur stockée dans prochainAnniversaire est 26, et dans ageDoublé, 50.

Si on utilise l’opérateur + entre deux textes, on les colle ensemble. On appelle ça la concaténation.

Console
  1. Modifie le code ci-dessus pour remplacer Alice par ton prénom. Vérifie que le résultat s’affiche bien dans la console.
  2. Actuellement, le nom est un texte vide. Ajoute ton propre nom.
  3. Modifie l’intérieur de console.log() pour que le message affiche ton prénom et ton nom.
  4. Le prénom et le nom sont collés… Ajoute un espace entre les deux !

Bien joué ! Essayons avec des nombres maintenant :

Console

Dans cet exemple, le texte « Et dans X heures ? » résulte d’une addition entre des textes et un nombre, qui sont deux types de valeur différents. Pour résoudre l’addition, JavaScript a converti le nombre en texte.

Modifie le nombre dans la variable temps pour changer le résultat final.

Récapitulons :

  • Les variables peuvent être constantes (const) ou autoriser le stockage de nouvelles valeurs (let).
  • Les valeurs ont un type. Les textes sont entre guillemets, tandis que les nombres peuvent être manipulés dans des calculs.
  • On peut « additionner » des textes et des nombres, ce qui les convertit en un texte final.
Bonjour ! Je suis un assistant IA qui peut te donner des conseils pour réussir les exercices et améliorer ton code. Utilise le bouton « J'ai besoin d'aide » pour m'appeler !