Cours JavaScript et TypeScript · Module 1: Bases de JavaScript
Instructions et blocs de code
Dans cette leçon8
Dans un parc rempli de dinosaures, chaque étape doit être soigneusement planifiée et exécutée dans le bon ordre. Il en va de même en JavaScript - le code s'exécute comme une séquence d'instructions qui doivent être correctement structurées pour que le programme fonctionne correctement et en toute sécurité.
Les instructions en JavaScript
Une instruction en JavaScript est une commande qui réalise une tâche précise. C'est comme un ordre unique donné à un employé de Jurassic Park - par exemple, « nourris le T-Rex » ou « vérifie la clôture ».
En JavaScript, chaque instruction se termine généralement par un point-virgule (bien que, comme nous le verrons dans la prochaine leçon, cela soit parfois facultatif) :
1let dinosaurCount = 5; // Déclaration de variable
2console.log("Attention !"); // Appel de fonction
3dinosaurCount++; // Incrémentation de valeurLes instructions s'exécutent dans l'ordre où elles ont été écrites - de haut en bas. C'est comme une procédure de sécurité à Jurassic Park, où les étapes doivent être exécutées dans un ordre strictement défini :
1// Procédure de fermeture de l'enclos du T-Rex
2verifyDinosaurLocation(); // 1. Vérifier la localisation du dinosaure
3activateGates(); // 2. Activer les grilles
4closeFencedArea(); // 3. Fermer la zone clôturée
5verifyEnclosureSecurity(); // 4. Vérifier la sécurité de l'enclosLes blocs de code en JavaScript
Un bloc de code est un groupe d'instructions encadré par des accolades { }. Il fonctionne comme une zone clôturée à Jurassic Park - il délimite une zone précise qui a ses propres règles et restrictions.
1// Bloc de code contrôlant la procédure de contrôle de santé des dinosaures
2{
3 let healthStatus = checkDinosaurVitals();
4 updateMedicalRecords(healthStatus);
5
6 if (healthStatus === "Critical") {
7 alertVeterinaryTeam();
8 }
9}Nous utilisons les blocs de code principalement dans quatre situations :
1. Les fonctions
Les fonctions sont des « procédures » clés de notre parc qui peuvent être exécutées plusieurs fois :
1function feedCarnivore(dinosaurType, foodAmount) {
2 // Ce bloc de code définit la procédure de nourrissage des carnivores
3 console.log(`Préparation du repas pour ${dinosaurType}`);
4 prepareMeat(foodAmount);
5 openFeedingHatch();
6 closeFeedingHatch();
7 console.log("Nourrissage terminé");
8}2. Les instructions conditionnelles
Tout comme les décisions du personnel du parc dépendent de diverses situations, en JavaScript nous utilisons des blocs de code avec des instructions conditionnelles :
1if (rainLevel > 50) {
2 // Ce bloc s'exécute uniquement lors de fortes pluies
3 evacuateOpenAreas();
4 secureOutdoorEquipment();
5 activateEmergencyShelters();
6}3. Les boucles
Lorsque le parc a besoin d'exécuter la même procédure pour de nombreux enclos ou dinosaures, on utilise des boucles :
1for (let i = 0; i < parkSectors.length; i++) {
2 // Ce bloc s'exécute pour chaque secteur du parc
3 checkSecuritySystems(parkSectors[i]);
4 updateSecurityLogs(parkSectors[i]);
5}4. Les blocs lexicaux
Parfois, nous utilisons des blocs de code uniquement pour limiter la portée des variables - semblables aux zones d'accès restreint du parc :
1{
2 // Les variables déclarées ici ne sont accessibles qu'à l'intérieur de ce bloc
3 let securityCode = "TRex2023";
4 activateSecurityProtocol(securityCode);
5}
6// La variable securityCode n'est plus accessible iciLa portée des variables
Les blocs de code ont une importance cruciale pour la portée des variables déclarées avec let et const. Ces variables ne sont visibles qu'à l'intérieur du bloc dans lequel elles ont été déclarées.
C'est comme les employés qui n'ont accès qu'à certaines zones précises de Jurassic Park :
1{
2 // Laboratoire de génétique - personnel autorisé uniquement
3 let dinoGenomeSequence = "ACGTACGT...";
4
5 // La variable n'est accessible qu'ici
6 modifyDinoGenome(dinoGenomeSequence);
7}
8
9// Erreur ! Cette variable n'est pas accessible en dehors du laboratoire
10// console.log(dinoGenomeSequence);Pour une meilleure illustration, comparons les portées de variables aux zones de sécurité du parc :
1// Zone publique (portée globale)
2let parkName = "Jurassic Park";
3
4function checkParkStatus() {
5 // Zone des employés (portée de fonction)
6 let isOpen = true;
7 let visitorCount = 368;
8
9 if (visitorCount > 350) {
10 // Zone de contrôle des foules (portée de bloc)
11 let alertLevel = "Yellow";
12 console.log(`Niveau d'alerte : ${alertLevel}`);
13 }
14
15 // alertLevel n'est pas accessible ici - erreur !
16 // console.log(alertLevel);
17}
18
19// Ni isOpen ni visitorCount ne sont accessibles ici - erreur !
20// console.log(isOpen);Imbrication des blocs
Les blocs de code peuvent aussi être imbriqués (des blocs à l'intérieur de blocs), de la même manière qu'à Jurassic Park nous avons des zones à l'intérieur d'autres zones :
1// Zone des employés
2{
3 let employeeAccessLevel = 2;
4
5 // Zone de génétique - niveau d'accès supérieur
6 if (employeeAccessLevel >= 3) {
7 let geneticLabAccess = true;
8
9 // Haute sécurité - contrôle strict
10 if (geneticLabAccess) {
11 let embryoStorageCode = "LS-445-23A";
12 console.log(`Code d'accès : ${embryoStorageCode}`);
13 }
14 }
15}Hoisting et déclarations
En JavaScript, il existe un mécanisme appelé « hoisting » (hissage) - les déclarations de variables et de fonctions sont « hissées » au sommet de leur portée. Cependant, les valeurs assignées aux variables ne sont pas hissées.
C'est comme préparer toutes les procédures de sécurité avant d'ouvrir le parc :
1// Cette fonction est disponible ici grâce au hoisting
2securityCheck();
3
4// Déclaration de fonction
5function securityCheck() {
6 console.log("Systèmes de sécurité vérifiés");
7}
8
9// Les variables déclarées avec var sont « hissées »
10console.log(parkStatus); // undefined, mais pas une erreur
11var parkStatus = "Open";
12
13// let et const ne sont PAS entièrement hissées
14// console.log(dinosaurCount); // Erreur : Cannot access 'dinosaurCount' before initialization
15let dinosaurCount = 20;Expressions vs instructions
En JavaScript, il est important de distinguer les instructions des expressions :
- Une expression est du code qui renvoie une valeur, comme l'examen d'un échantillon d'ADN qui renvoie un résultat
- Une instruction est une commande qui réalise une action, comme une procédure de nourrissage de dinosaure
1// Expressions - renvoient une valeur
25 + 3 // Expression qui renvoie 8
3dinosaurWeight * 0.5 // Expression qui renvoie la moitié du poids
4isDangerousSpecies("T-Rex") // Expression qui renvoie true
5
6// Instructions - réalisent des actions
7let visitorsToday = 500; // Instruction de déclaration
8if (visitorsToday > 400) { // Instruction conditionnelle
9 activateCrowdControl();
10}Application pratique
Comprendre les instructions et les blocs de code, c'est comme apprendre la carte de Jurassic Park - cela te permet de naviguer en toute sécurité à travers le code. Voici un exemple de code complexe utilisant des instructions, des blocs et différentes portées :
1// Système de surveillance du parc
2
3// Variables globales
4const parkName = "Jurassic Park";
5let parkStatus = "Open";
6let globalAlertLevel = "Normal";
7
8// Fonction principale de surveillance
9function monitorParkSystems() {
10 let systemsOnline = true;
11
12 // Vérifier les clôtures
13 checkElectricalFences();
14
15 // Bloc de surveillance des dinosaures
16 {
17 let activeDinosaurs = getDinosaurStatus();
18
19 // Boucle vérifiant chaque dinosaure
20 for (let i = 0; i < activeDinosaurs.length; i++) {
21 let dinosaur = activeDinosaurs[i];
22
23 // Bloc conditionnel pour les espèces dangereuses
24 if (dinosaur.dangerLevel > 3) {
25 // Bloc interne de procédure d'urgence
26 {
27 let emergencyProtocol = `Protocol-${dinosaur.species}`;
28 console.log(`Activation : ${emergencyProtocol}`);
29
30 // Cette variable n'est accessible qu'ici
31 let emergencyTeam = selectTeamForSpecies(dinosaur.species);
32 alertSecurityTeam(emergencyTeam);
33 }
34
35 // La variable emergencyTeam n'est pas accessible ici
36 updateSecurityLogs(dinosaur);
37 }
38 }
39 }
40
41 // Les variables du bloc de surveillance des dinosaures ne sont pas accessibles ici
42 return generateStatusReport();
43}
44
45// Fonction auxiliaire
46function checkElectricalFences() {
47 let sections = 12;
48 let failedSections = 0;
49
50 for (let i = 1; i <= sections; i++) {
51 let sectionStatus = getFenceStatus(i);
52
53 if (sectionStatus !== "Active") {
54 failedSections++;
55
56 // Bloc d'urgence
57 {
58 let repairTeam = "Echo";
59 dispatchRepairTeam(repairTeam, i);
60 }
61 }
62 }
63
64 if (failedSections > 0) {
65 globalAlertLevel = "Elevated";
66 }
67}Dans l'exemple ci-dessus, tu peux voir comment les blocs de code peuvent être utilisés pour organiser le code, contrôler la portée des variables et créer une structure logique de programme. Chaque bloc fonctionne comme une zone distincte du parc, avec ses propres règles et restrictions.
Résumé
Les instructions et les blocs de code en JavaScript sont comme les procédures et les zones de sécurité de Jurassic Park - ils maintiennent l'ordre, l'organisation et la sécurité. Un code bien organisé qui utilise correctement les instructions et les blocs est plus facile à comprendre, à maintenir et à développer.
Concepts clés à retenir :
- Les instructions sont des commandes individuelles se terminant par un point-virgule
- Les blocs de code sont des groupes d'instructions encadrés par des accolades
{ } - La portée des variables est limitée par le bloc dans lequel elles ont été déclarées (pour
letetconst) - Le hoisting est le mécanisme de « hissage » des déclarations de variables et de fonctions
- Les expressions renvoient une valeur, tandis que les instructions réalisent des actions
Dans la prochaine leçon, nous examinerons de plus près les points-virgules en JavaScript et leur caractère facultatif, ce qui revient à apprendre les nuances des protocoles de sécurité du parc - parfois ils sont absolument nécessaires, et d'autres fois ils peuvent être omis.
Code de cette leçon : index.js
1// Enclos du parc - Travailler avec les tableaux
2// Exercice : Créer des tableaux et utiliser les méthodes de tableau
3
4// Un tableau est une collection ordonnée d'éléments
5const dinosaurs = ["T-Rex", "Velociraptor", "Triceratops", "Brachiosaurus"];
6console.log("Dinosaures dans le parc:", dinosaurs);
7console.log("Premier:", dinosaurs[0]);
8console.log("Dernier:", dinosaurs[dinosaurs.length - 1]);
9
10// Méthodes de tableau
11dinosaurs.push("Stegosaurus");
12console.log("Après l'ajout:", dinosaurs);
13
14const removed = dinosaurs.pop();
15console.log("Supprimé:", removed);
16
17// Recherche
18console.log("Y a-t-il un T-Rex ?", dinosaurs.includes("T-Rex"));
19console.log("Index de Triceratops:", dinosaurs.indexOf("Triceratops"));
20
21// Ta mission :
22// 1. Crée un tableau d'espèces dans un enclos
23// 2. Ajoute et supprime des éléments avec push/pop/shift/unshift
24// 3. Trouve un élément dans le tableau
25
26// Ton code ici :
27Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Qu'est-ce qu'un bloc de code en JavaScript ?
Tâches pratiques dans le jeu
- Tri vertical
Classe les éléments de la structure d'un bloc de code dans une fonction JavaScript :
- Clique dans l'ordre
Classe le programme : commentaire, constante, définition de la fonction et son appel :
- Tri vertical
Classe les étapes du processus de programmation :