Les instructions avec JavaScript

4 min de lecture

Maintenant que nous avons vu la syntaxe de base de JavaScript, il est temps de plonger dans les instructions.

Qu'est-ce qu'une instruction ?

Une instruction est une ligne de code qui effectue une action spécifique.
Il s'agit de la brique de base de tout programme et JavaScript ne fait pas exception à la règle !

Par exemple, voici quelques instructions simples en JavaScript :

console.log("Hello, World!");

Dans cet exemple, nous avons trois instructions :

La première instruction affiche un message dans la console avec console.log().
La deuxième instruction déclare une variable nom et lui assigne la valeur "John Doe".
La troisième instruction est une condition sur une variable age qui affiche un message différent selon la valeur de age.

Les différents types d'instructions

Comme vu plus tôt, il existe plusieurs types d'instructions en JavaScript.

Instructions de déclaration

Les instructions de déclaration sont utilisées pour déclarer des variables, des fonctions ou des classes.

C'est ce qui était fait dans l'exemple précédent avec la déclaration de la variable nom.

Instructions de contrôle de flux

Les instructions de contrôle de flux sont utilisées pour contrôler le flux d'exécution du programme.
Elles permettent de prendre des décisions selon certaines conditions.

Instructions de boucle

Les instructions de boucle sont utilisées pour exécuter un bloc de code plusieurs fois.
Elles sont souvent utilisées pour parcourir des tableaux (un regroupement de données).

Instructions de gestion des erreurs

Pour gérer les erreurs, JavaScript nous met à disposition des instructions comme try, catch et finally.

Ces instructions permettent de gérer les erreurs qui peuvent survenir lors de l'exécution du code.

Autres instructions

Il existe d'autres instructions comme return, break, continue, throw ou encore debugger qui sont utilisées pour des cas spécifiques.

On les utilisera au fur et à mesure de notre apprentissage.

Faisons notre premier programme !

Maintenant que nous avons vu les instructions de base, il est temps de mettre tout cela en pratique.

Quoi ?! Mais je ne sais pas à quoi ça ressemble !

Pas de panique ! On ne va pas faire du JavaScript pur tout de suite 😉.
On va commencer par du pseudo-code.

Qu'est-ce que le pseudo-code ?

Le pseudo-code est une façon de décrire un algorithme ou un programme sans se soucier de la syntaxe d'un langage de programmation particulier.

Il utilise un langage simple et compréhensible par tous, ce qui permet de se concentrer sur la logique du programme plutôt que sur les détails de la syntaxe.

Voici quelques exemples de pseudo-code :

AFFICHER "Bonjour, le monde!"

Tu as évidemment le droit de changer les mots pour les adapter à ton propre style ou à ta propre compréhension. L'idée, c'est juste d'écrire un algorithme qui soit compréhensible par toi-même et par les autres.

Challenge

Maintenant, c'est à ton tour de jouer !

Tu vas devoir écrire un pseudo-code qui :

Demande à l'utilisateur son nom.
Demande à l'utilisateur son âge.
Si l'utilisateur est majeur (18 ans ou plus), affiche un message de bienvenue.
Sinon, affiche un message lui disant qu'il n'est pas majeur.

Comment dois-je m'y prendre ?

Pour ce challenge, tu peux utiliser les instructions suivantes :

DEBUT : Indique le début du programme.
FIN : Indique la fin du programme.
VARIABLE x : Indique la déclaration d'une variable nomée x.
LIRE x : Indique la lecture d'une valeur pour la variable x.
AFFICHER "..." : Indique l'affichage du message entre guillemets.
SI ... ALORS : Indique une condition.
SINON : Indique le cas où la condition n'est pas remplie.
FIN SI : Indique la fin de la condition.
x >= y : Indique une comparaison entre la variable x et la valeur y.

Pour le moment, tu n'as pas besoin de te soucier de la syntaxe JavaScript.

Traduire le pseudo-code en JavaScript

Une fois que tu as écrit ton pseudo-code, il est temps de le traduire en JavaScript.

Puisque je ne peux pas lire dans tes pensées, je vais te donner un exemple de pseudo-code final, pour que l'on voit ensuite comment le traduire en JavaScript !

DEBUT
	VARIABLE nom
	AFFICHER "Entrez votre nom :"
	LIRE nom

	VARIABLE age
	AFFICHER "Entrez votre âge :"
	LIRE age

	SI age >= 18 ALORS
		AFFICHER "Bienvenue " + nom + ", vous êtes majeur."
	SINON
		AFFICHER "Désolé " + nom + ", vous êtes mineur."
	FIN SI
FIN

Dans cet exemple, on retrouve :

Lignes 1 et 15 : Le début et la fin du programme.
Ligne 2 : La déclaration de la variable nom.
Ligne 3 : Affichage du message demandant le nom de l'utilisateur.
Ligne 4 : Lecture et enregistrement de la valeur saisie par l'utilisateur dans la variable nom.
Ligne 6 : La déclaration de la variable age.
Ligne 7 : Affichage du message demandant l'âge de l'utilisateur.
Ligne 8 : Lecture et enregistrement de la valeur saisie par l'utilisateur dans la variable age.
Ligne 10 : La condition qui vérifie si l'utilisateur est majeur.
Ligne 11 : Affichage du message de bienvenue si l'utilisateur est majeur.
Ligne 13 : Affichage du message indiquant que l'utilisateur n'est pas majeur.
Ligne 14 : Fin de la condition.

Et voilà !
Maintenant, il ne te reste plus qu'à traduire ce pseudo-code en JavaScript... 😏

Challenge 2

Ce que je vais faire, c'est te donner l'équivalent de certaines instructions en JavaScript pour t'aider à traduire ton pseudo-code en JavaScript.

DEBUT : Pas d'équivalent en JavaScript (ouf !)
FIN : Pas d'équivalent en JavaScript (ouf !)
VARIABLE x : let x; ou const x;
LIRE x : x = prompt("..."); ("..." est le message affiché à l'utilisateur)
AFFICHER "..." + x : console.log("... " + x);
SI ... ALORS : if (...) {
SINON : } else {
FIN SI : }
x >= y : x >= y (pas de changement, ouf !)

Prêt à en découdre ? 💪

Tester ton programme

Une fois que tu as traduit ton pseudo-code en JavaScript, il est temps de tester ton programme !

Pour pouvoir le tester, tu peux tout simplement copier-coller ton code dans la console de ton navigateur ou dans un éditeur de code en ligne comme CodePen ou JSFiddle.

Correction

Pour l'équivalent de l'exemple de pseudo-code, voici ce que ça donne en JavaScript :

// Demander le nom de l'utilisateur
const nom = prompt("Entrez votre nom :");

// Demander l'âge de l'utilisateur
const age = prompt("Entrez votre âge :");

// Vérifier si l'utilisateur est majeur ou mineur
if (age >= 18) {
	console.log("Bienvenue " + nom + ", vous êtes majeur.");
} else {
	console.log("Désolé " + nom + ", vous êtes mineur.");
}

DEBUT
	VARIABLE nom
	AFFICHER "Entrez votre nom :"
	LIRE nom

	VARIABLE age
	AFFICHER "Entrez votre âge :"
	LIRE age

	SI age >= 18 ALORS
		AFFICHER "Bienvenue " + nom + ", vous êtes majeur."
	SINON
		AFFICHER "Désolé " + nom + ", vous êtes mineur."
	FIN SI
FIN

Et voilà ! 🎉
Mais faisons un petit tour d'horizon sur ce code pour bien comprendre ce qu'il fait.

Ligne 2 : On déclare une variable nom avec le mot-clé const, puis on lui assigne la valeur saisie par l'utilisateur avec prompt().
Ligne 5 : On déclare une variable age avec le mot-clé const, puis on lui assigne la valeur saisie par l'utilisateur avec prompt().
Ligne 8 : On vérifie si l'utilisateur est majeur avec une condition if (age >= 18).
Ligne 9 : Si l'utilisateur est majeur, on affiche un message de bienvenue avec console.log().
Ligne 10 : Sinon...
Ligne 11 : On affiche un message indiquant que l'utilisateur n'est pas majeur avec console.log().
Ligne 12 : Fin de la condition.

Conclusion

Pfiou, ça fait déjà pas mal de choses à digérer ! 😅

On a vu les instructions de base en JavaScript, comment écrire du pseudo-code et comment le traduire en JavaScript.
On a même fait un petit programme ensemble !

Il est temps de faire une pause et de digérer tout ça avant de passer à la suite.
C'est important de ne pas vouloir aller trop vite en enchaînant les articles, surtout quand on débute.

Prends le temps de bien comprendre chaque concept avant de passer au suivant, et n'hésite pas à revenir sur les bases si tu as des doutes !