Votre laboratoire JavaScript

En 15 minutes, votre ordinateur affichera son premier message écrit en JavaScript.

Objectifs de la séance

savoir où s'exécute du code JavaScript (navigateur, Node.js, téléphone) ;
créer un dossier de travail (votre « labo ») dans VS Code ;
exécuter un fichier avec la commande node ;
afficher des valeurs avec console.log ;
lire un message d'erreur sans paniquer.

Notions théoriques

JavaScript, c'est quoi et où ça tourne ?

En PHP, votre code s'exécute sur le serveur, puis le navigateur reçoit du HTML. JavaScript est différent : il peut s'exécuter à plusieurs endroits.

Où ?	Exemple
Dans le navigateur	une page web qui réagit à vos clics
Avec Node.js, sur votre ordinateur	un script, un serveur, un outil en ligne de commande
Sur un téléphone	une application créée avec Expo

Dans ce cours, vous exécutez le code avec Node.js : c'est le plus simple pour apprendre, car il suffit de taper une commande dans le terminal, comme php fichier.php en PHP.

Préparer votre laboratoire

Vous avez besoin de Node.js (voir Installer Node.js) et de VS Code. Vérifiez dans un terminal :

node -v

Le terminal affiche un numéro de version (par exemple v22.14.0). Il doit être 22.13 ou plus récent.

Créez ensuite votre dossier de travail :

mkdir labo-js
cd labo-js
npm init -y
npm pkg set type=module
code .

npm init -y crée un fichier package.json qui décrit votre projet ;
npm pkg set type=module indique que vos fichiers utilisent la syntaxe moderne de JavaScript (les modules, vus à la partie 4) ;
code . ouvre le dossier dans VS Code.

Pas de commande code ?

Ouvrez simplement VS Code, puis le menu Fichier > Ouvrir un dossier et choisissez labo-js.

Votre premier programme

Dans labo-js, créez le fichier bonjour.js :

console.log("Bonjour le monde !");

Dans le terminal de VS Code (menu Terminal > Nouveau terminal), lancez :

node bonjour.js

Résultat :

Bonjour le monde !

Bravo, vous venez d'exécuter votre premier programme JavaScript.

`console.log` : votre meilleur ami

console.log(...) affiche des valeurs dans le terminal. C'est l'équivalent du echo de PHP, mais plus pratique : vous pouvez lui donner plusieurs valeurs séparées par des virgules.

console.log("Score :", 7);
console.log("Quiz Cyber", "niveau", 2);

Score : 7
Quiz Cyber niveau 2

Retenez dès maintenant : quand vous ne savez pas ce que contient une variable, affichez-la avec console.log. C'est la méthode de débogage la plus utilisée par tous les développeurs.

Les commentaires

Un commentaire est une ligne ignorée par l'ordinateur, écrite pour les humains.

// Ceci est un commentaire sur une ligne
console.log("Je suis exécuté"); // un commentaire peut aussi suivre le code

/* Ceci est un commentaire
   sur plusieurs lignes */

Les conventions de ce cours

on termine chaque instruction par un point-virgule ; ;
on utilise des guillemets doubles "..." pour le texte ;
on indente avec 2 espaces ;
les noms sont en français, sans accent, en camelCase (première lettre en minuscule, puis une majuscule à chaque mot).

Lire un message d'erreur

Une erreur n'est pas un échec : c'est un indice. Écrivez volontairement ce programme avec une faute (console.lg) :

console.lg("Bonjour");

Node affiche quelque chose comme :

file:///Users/alice/labo-js/bonjour.js:1
console.lg("Bonjour");
        ^

TypeError: console.lg is not a function
    at file:///Users/alice/labo-js/bonjour.js:1:9

Pour lire un message d'erreur, cherchez trois informations :

le fichier et la ligne : bonjour.js:1 (ligne 1) ;
le type d'erreur : TypeError ;
le message : console.lg is not a function (« console.lg n'est pas une fonction »).

Ici, la faute de frappe saute aux yeux. Dans 90 % des cas, il suffit de lire ce message calmement pour trouver la solution.

Erreur fréquente

Si le terminal répond Cannot find module, vous n'êtes pas dans le bon dossier. Tapez pwd (ou cd sous Windows) pour savoir où vous êtes, puis déplacez-vous dans labo-js avec cd.

Test de mémorisation/compréhension

Quelle commande exécute le fichier bonjour.js avec Node.js ?

php bonjour.js

run bonjour.js --with-node-engine

node bonjour.js

npm bonjour.js

js start bonjour

Quelle instruction affiche le texte Salut dans le terminal ?

console.log("Salut");

echo Salut;

print.screen("Salut");

display "Salut"

System.out.println("Salut");

Que fait la ligne suivante : // calcul du score ?

Elle lance le calcul du score

Elle déclare une variable nommée score

Elle provoque une erreur de syntaxe

Elle affiche « calcul du score » dans le terminal

C'est un commentaire ignoré par l'ordinateur

Node affiche « bonjour.js:3 ... TypeError ». Que signifie « bonjour.js:3 » ?

Le fichier bonjour.js a été exécuté 3 fois depuis son dernier enregistrement

L'erreur se trouve dans le fichier bonjour.js, à la ligne 3

L'erreur se trouve à la colonne 3 du fichier

Il manque 3 lignes dans le fichier bonjour.js

Node.js est en version 3

Quel est l'intérêt principal de console.log pendant le développement ?

Rendre le programme plus rapide

Sauvegarder les variables dans un fichier

Envoyer automatiquement un message à l'utilisateur de l'application sur son téléphone

Voir la valeur d'une variable pour comprendre ce que fait le programme

Corriger automatiquement les erreurs du code

TP pour réfléchir et résoudre des problèmes

Votre mission : écrire la carte de visite d'un agent de cybersécurité, en affichant plusieurs lignes dans le terminal. Travaillez dans le fichier labo-js/carte.js.

Étape 1 — Afficher le titre

Créez le fichier carte.js. Commencez par un commentaire qui décrit son rôle, puis affichez le titre === Agent Cyber ===.

Lancez node carte.js : le titre s'affiche.

Bonne pratique - Tester dès la première ligne

Exécutez votre programme après chaque ligne que vous ajoutez. Si une erreur apparaît, vous savez qu'elle vient de la dernière ligne écrite.

Étape 2 — Afficher un nom et un niveau

Affichez maintenant une ligne contenant le mot Nom : suivi du nom Alice, en utilisant deux valeurs dans le même console.log.

Bonne pratique - Texte entre guillemets, nombre sans guillemets

"Alice" est du texte (il faut des guillemets), 3 est un nombre (aucun guillemet). Nous reviendrons sur cette différence dans la prochaine séance.

Étape 3 — Provoquer puis corriger une erreur

Ajoutez volontairement la ligne console.lg("Fin de la carte");, lancez le programme, lisez le message d'erreur, puis corrigez la ligne.

Bonne pratique - Lire l'erreur en entier

Avant de modifier quoi que ce soit, lisez le fichier, la ligne et le message de l'erreur. Cela évite de modifier le code au hasard.

📌 Une solution

Ce qu'il faut retenir

Notion	Résumé
Node.js	Programme qui exécute du JavaScript sur votre ordinateur, avec `node fichier.js`.
`console.log`	Affiche une ou plusieurs valeurs dans le terminal. Outil de débogage numéro 1.
Commentaire	`//` pour une ligne : ignoré par l'ordinateur, utile pour les humains.
Message d'erreur	Contient le fichier, la ligne et la raison : à lire avant de modifier le code.
Conventions	Point-virgule, guillemets doubles, noms en français sans accent en `camelCase`.

Aperçu de la prochaine séance

Vous savez afficher du texte et des nombres. Dans la prochaine séance, vous apprendrez à les retenir dans des variables avec const et let, à distinguer les différents types de valeurs, et à construire des phrases dynamiques avec les fameux guillemets obliques.

Objectifs de la séance​

Notions théoriques​

JavaScript, c'est quoi et où ça tourne ?​

Préparer votre laboratoire​

Votre premier programme​

console.log : votre meilleur ami​

Les commentaires​

Les conventions de ce cours​

Lire un message d'erreur​

Test de mémorisation/compréhension​