Extraits et structures de contrôle. Partie 4 du cours JavaScript de Débutant à Avancé en 10 articles de blog

Ceci est la partie 4 de la série d’articles de blog sur JavaScript qui vous fera passer de débutant à avancé. À la fin de cette série, vous connaîtrez tous les éléments de base nécessaires pour commencer à coder en JavaScript. Sans plus tarder, commençons avec le quatrième tutoriel.

Extraits et structures de contrôle – table des matières :

1. Mise à niveau de notre configuration de codage vers des extraits
2. Structures de contrôle

Dans cet article de blog, nous allons continuer là où nous nous étions arrêtés dans le troisième article de blog. À ce stade, vous devriez avoir votre navigateur Google Chrome ouvert et plus précisément avoir votre console JavaScript ouverte. Si pour une raison quelconque vous les avez fermées, ce serait un bon moment pour les rouvrir.

Si vous êtes sur un Mac, le raccourci clavier pour ouvrir la console est de presser “Option + Commande + J”, après avoir ouvert Chrome. Si vous utilisez un appareil Windows, vous pouvez utiliser le raccourci clavier “Contrôle + Maj + J” pour ouvrir la console JavaScript, une fois que vous avez ouvert Chrome. Ou vous pouvez également aller dans le menu en haut et aller à Affichage -> Développeur -> Console JavaScript.

Mise à niveau de notre configuration de codage vers des extraits

Jusqu’à présent dans le cours, nous aurions pu écrire tout ligne par ligne et l’exécuter ligne par ligne. Ce ne serait pas la manière la plus pratique d’exécuter les choses, mais cela fonctionnerait néanmoins. À partir de ce tutoriel, nous allons écrire du code qui nécessite plusieurs lignes de code pour créer un ensemble complet d’instructions. Pour y parvenir, nous allons utiliser quelque chose appelé “extraits” dans Google Chrome. Sans plus tarder, mettons à niveau notre configuration de la console JavaScript vers des extraits Chrome.

Actuellement, vous devriez avoir votre console ouverte, et si vous avez suivi les tutoriels précédents, vous devriez avoir un écran qui ressemble à ceci :

Lorsque vous regardez cet écran, ou votre écran d’ailleurs, vous devriez voir : Éléments, Console, Sources, Réseau, Performance, Mémoire, Application, etc. écrits les uns à côté des autres dans la barre supérieure de la zone sombre. Si vous les voyez dans des couleurs plus claires, c’est tout à fait acceptable aussi. Cela signifie que vous utilisez le mode clair, qui peut être le mode par défaut pour la journée. L’écran que je montre utilise actuellement le schéma de couleurs pour le mode sombre dans les paramètres de la console Chrome. Si vous voyez les Éléments, Console, Sources, Réseau, etc. apparaître, dans l’un ou l’autre schéma de couleurs, vous êtes prêt à partir.

Si vous regardez de plus près la barre supérieure de la console, vous pouvez voir que l’écriture de “Console” semble légèrement d’une couleur différente. Allez-y et cliquez sur “Sources” juste à côté.

Une fois que vous cliquez sur sources, vous devriez regarder un écran qui ressemble d’une certaine manière à ceci.

Une différence que vous pourriez attendre est que vous ne verrez probablement pas le fichier “notes.js”, car je l’ai créé précédemment. À part cela, cela devrait ressembler assez à cela. Pour créer un nouveau fichier, cliquez sur “+ Nouvel extrait”. Une fois que vous cliquez dessus, cela créera un nouveau fichier JavaScript pour vous et vous pouvez le nommer comme vous le souhaitez. Dans ce tutoriel, nous allons l’appeler “index.js” car c’est une pratique courante de nommer le premier ou le fichier principal “index.js”.

Si vous souhaitez suivre ce tutoriel mot à mot, après avoir cliqué sur “+ Nouvel extrait”, vous pouvez entrer le nom “index.js” et appuyer sur la touche entrée de votre clavier. Maintenant, nous pouvons cliquer à l’intérieur du fichier ouvert dans la zone principale qui s’est ouverte, pour commencer à coder en JavaScript.

Commençons par quelque chose que nous savons déjà qui fonctionne. Et c’est :

alert("Bonjour, le monde !");

Vous pouvez soit l’écrire vous-même pour un exercice supplémentaire, soit copier et coller la partie code dans le fichier que nous avons créé. Je recommande fortement de le taper vous-même car c’est ainsi que vous l’apprenez dans de nombreux cas. Une fois que vous l’avez tapé, si vous appuyez sur la touche entrée, vous verrez que le code n’est pas exécuté. Au lieu de cela, votre curseur ira simplement à la ligne suivante, comme dans n’importe quelle autre zone d’édition de texte. Il y a deux principales façons d’exécuter notre code. La première consiste à cliquer sur le bouton de lecture situé dans le coin inférieur droit.

Si vous cliquez sur ce bouton de lecture, cela devrait exécuter notre code et nous afficher les résultats.

Une fois que vous cliquez sur “OK”, exécutons également notre code en utilisant l’autre méthode principale. La deuxième méthode principale pour exécuter votre code, ou exécuter votre extrait, est d’utiliser le raccourci clavier. Comme nous pouvons le voir, il nous montre déjà le raccourci lorsque nous cliquons sur le bouton d’exécution. Ce raccourci clavier est “Commande + Entrée”. Pour ce faire, nous pouvons appuyer sur la touche Commande puis appuyer sur la touche Entrée. Cela exécutera également notre code et nous donnera les mêmes résultats que de cliquer sur le bouton de lecture.

Et avec cela, vous savez maintenant les deux façons d’exécuter notre code JavaScript dans les extraits Chrome.

Si vous souhaitez créer de nouveaux fichiers pour peut-être prendre des notes sur JavaScript, ou pour pratiquer un peu de code JavaScript, vous pouvez toujours créer de nouveaux fichiers en cliquant sur “+ Nouvel extrait” et nommer vos fichiers comme vous le souhaitez. Maintenant que nous avons notre nouvelle configuration de codage prête, voyons un peu plus de JavaScript.

Structures de contrôle

Lorsque nous écrivons du code, nous devons tenir compte de nombreux scénarios et actions que l’utilisateur peut entreprendre. Cette préparation pour différents scénarios peut provenir de différentes sources telles que l’appareil sur lequel notre code s’exécute, la taille de l’écran à afficher, les différents types de navigateurs que l’utilisateur pourrait avoir, etc. Mais comment nous assurons-nous que nous pouvons être préparés à différents scénarios ? Si vous écrivez différents codes les uns après les autres, l’exécution de tous aurait-elle du sens pour l’utilisateur ? Pour répondre à tout cela et plus encore, nous allons utiliser des structures de contrôle.

Les structures de contrôle nous permettent de guider l’exécution du code, afin que notre code puisse s’adapter à différentes conditions. Il existe plusieurs éléments communs utilisés pour les structures de contrôle. Dans ce tutoriel, nous allons commencer par le plus simple et avancer à partir de là. Le premier que nous allons voir utilise des instructions If, else, else if pour contrôler l’exécution du code.

If, else et else if

C’est la structure de contrôle la plus simple pour commencer. Ce qu’elle nous permet de faire, c’est d’exécuter un morceau de code si une certaine condition est vraie, et d’exécuter un autre morceau de code si une autre condition est vraie. Voyons cela avec un exemple. Supposons que, s’il pleut dehors, je prendrai mon parapluie avec moi. Sinon, je ne prendrai pas de parapluie. Nous pouvons traduire la logique et le raisonnement exacts en code comme suit :

(Avant d’écrire ce code, nous allons commenter le code du code précédent que nous avons dans le fichier en plaçant deux barres obliques devant, afin qu’il ne soit pas exécuté, mais que vous ayez toujours une copie. Après avoir ajouté les barres obliques, cela devrait ressembler à ceci 🙂

// alert("Bonjour, le monde !");
let rainy = true;
if (rainy){
   alert("Prenez un parapluie");
} else {
   alert("Pas besoin de parapluie");
}

Exécuter ce code nous donnerait la sortie suivante :

// alert("Bonjour, le monde !");
let rainy = false;
if (rainy){
   alert("Prenez un parapluie");
} else {
   alert("Pas besoin de parapluie");
}

Tandis qu’exécuter cette version du code qui dit qu’il n’y a pas de pluie donnerait la sortie suivante :

Lorsque vous tapez le code pour apporter des modifications au fichier de code, si vous regardez de plus près le nom du fichier, vous verrez qu’il aura un astérisque avant le nom du fichier. Cela signifie que le fichier de code que nous écrivons n’est pas entièrement enregistré. Cela peut ne pas faire une grande différence si vous écrivez seulement quelques lignes de code que vous pouvez toujours écrire, mais plus souvent qu’autrement, vous voudrez enregistrer votre code, afin de pouvoir le réutiliser ou le revoir plus tard. Nous pouvons enregistrer ce fichier de code de la même manière que nous enregistrons d’autres fichiers, donc cela serait “Commande + S” sur Mac et “Contrôle + S” sur Windows.

Dans notre cas, parce que nous exécutons notre code juste après l’avoir écrit, il a automatiquement enregistré notre fichier lorsque nous exécutons le code. Donc, si vous allez écrire du code et le laisser pendant des heures, il est bon de sauvegarder votre code de temps en temps pour vous assurer que vous ne perdez pas de progrès significatif.

C’est génial que nous puissions faire en sorte que notre code s’adapte à une condition binaire en utilisant une instruction If et une instruction else, mais que se passe-t-il si nous avons plusieurs choses à considérer, ce qui sera très probablement le cas dans la vie réelle. Par exemple, que se passe-t-il s’il fait froid et que vous devez prendre un sweat à capuche quand il fait froid. Une façon de le faire serait une instruction “else if” et nous pouvons le faire comme suit :

// alert("Bonjour, le monde !");
let rainy = false;
let cold = true;
if (rainy){
   alert("Prenez un parapluie");
} else if (cold) {
    alert("Prenez un sweat à capuche avec vous, pas un parapluie");
} else {
   alert("Pas besoin de parapluie");
}

La sortie de ce code ressemblerait à ceci :

Donc, si une certaine condition est vraie, le premier code qui se trouve entre les parenthèses sera exécuté. Dans notre cas, puisque la première condition vérifie la pluie, nous alerterons l’utilisateur qu’il doit prendre un parapluie. Si cette condition est fausse, c’est-à-dire qu’il n’y a pas de pluie, nous continuerons à vérifier d’autres conditions en utilisant une instruction “else if”. Une chose qui est significativement différente de l’instruction “else if” est que nous pouvons vérifier autant de conditions que nous le souhaitons avec des instructions else if.

La chose importante à retenir ici est que votre code sera vérifié de haut en bas, pour sa véracité ou sa véracité. Cela signifie qu’avec le code actuel, si le temps est à la fois pluvieux et froid, il ne reconnaîtra pas le temps froid, puisque la première instruction est correcte. Nous pouvons également vérifier cela en modifiant le code pour avoir à la fois des conditions pluvieuses et froides.

// alert("Bonjour, le monde !");
let rainy = true;
let cold = true;
if (rainy){
   alert("Prenez un parapluie");
} else if (cold) {
    alert("Prenez un sweat à capuche avec vous, pas un parapluie");
} else {
   alert("Pas besoin de parapluie");
}

Maintenant, vous vous demandez peut-être, comment puis-je résoudre cela ? Laquelle est plus importante, le temps froid ou la pluie ? Devez-vous choisir une condition et sacrifier l’autre condition ? Devez-vous même faire un tel choix ? Eh bien, pas vraiment. C’est un problème très courant et il a une solution très courante et relativement simple. Nous pouvons utiliser une expression “et” pour couvrir plusieurs scénarios. Pour dire à JavaScript que nous voulons utiliser un “et” pour connecter notre logique de programmation, nous utiliserons deux de ce symbole : “&”. Et parce que notre code est vérifié de haut en bas, nous utiliserons l’option la plus complète pour la première instruction if. Le code mis à jour ressemble alors à ceci.

// alert("Bonjour, le monde !");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Portez un sweat à capuche et prenez un parapluie avec vous.")
} else if (rainy){
   alert("Prenez un parapluie");
} else if (cold) {
    alert("Prenez un sweat à capuche avec vous, pas un parapluie");
} else {
   alert("Pas besoin de parapluie");
}

Exécuter ce code vous donnerait une alerte qui ressemble à ceci :

Bien mieux. Maintenant, nous pouvons combiner plusieurs scénarios différents, y compris différentes combinaisons de ces scénarios. Mais que se passe-t-il si nous voulons considérer un scénario qui n’est pas froid mais pluvieux. Et supposons que nous voulons dire à l’utilisateur de ne pas prendre de sweat à capuche spécifiquement, et de ne prendre qu’un parapluie. Pour ce faire, nous pouvons utiliser le “non” logique, nous pouvons l’utiliser dans notre code avec le point d’exclamation avant la condition que nous voulons spécifier. Ajoutons cette condition à notre code pour qu’il soit plus complet.

// alert("Bonjour, le monde !");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Portez un sweat à capuche et prenez un parapluie avec vous.")
} else if (rainy && !cold){
   alert("Prenez un parapluie, mais pas de sweat à capuche.");
} else if (rainy){
   alert("Prenez un parapluie");
} else if (cold) {
    alert("Prenez un sweat à capuche avec vous, pas un parapluie");
} else {
   alert("Pas besoin de parapluie");
}

Lorsque nous ajoutons une nouvelle condition à un arbre if else, tant qu’il s’agit de la condition la plus complète, nous pouvons la placer quelque part en haut. De cette façon, nous avons beaucoup moins de chances d’erreurs par rapport à l’approche opposée. Un effet secondaire de l’injection de nouveau code dans un code existant est que certains des codes peuvent devenir redondants ou peuvent ne pas fonctionner de la manière la plus efficace. Nous ne nous concentrerons pas beaucoup sur la partie efficacité, mais pour l’instant, nous pouvons voir que nous couvrons à la fois les conditions froides et non froides pour un temps pluvieux, donc nous pouvons éventuellement supprimer la condition qui vérifie simplement la condition “pluvieuse”. Apporter ces ajustements de code est également appelé “Refactorisation de code”, dans le processus de refactorisation, le but est de rendre le code progressivement plus propre et plus efficace.

// alert("Bonjour, le monde !");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Portez un sweat à capuche et prenez un parapluie avec vous.")
} else if (rainy && !cold){
   alert("Prenez un parapluie, mais pas de sweat à capuche.");
} else if (cold) {
    alert("Prenez un sweat à capuche avec vous, pas un parapluie");
} else {
   alert("Pas besoin de parapluie");
}

Lorsque nous voulons vérifier qu’une condition soit vraie, nous pouvons utiliser l’opérateur “ou”, qui est le symbole de tuyau utilisé deux fois sur votre clavier et ressemble à ceci “||”.

Voyons un exemple de cela avec un autre exemple. Pour ajouter plus d’exemples au même fichier sans interférer avec les nouvelles commandes, nous pouvons commenter le code précédent que nous avons utilisé en enveloppant le code précédent à l’intérieur de ces symboles que nous avons vus auparavant :

/* 
*/

Ce qui est une barre oblique et un astérisque et les mêmes symboles dans l’ordre opposé pour fermer la partie commentée. Enveloppons notre code actuel à l’intérieur de ces symboles afin qu’ils n’interfèrent pas avec le nouveau code à venir. Maintenant, votre fichier de code devrait ressembler à ceci :

// alert("Bonjour, le monde !");
/*
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Portez un sweat à capuche et prenez un parapluie avec vous.")
} else if (rainy && !cold){
   alert("Prenez un parapluie, mais pas de sweat à capuche.");
} else if (cold) {
    alert("Prenez un sweat à capuche avec vous, pas un parapluie");
} else {
   alert("Pas besoin de parapluie");
}
*/

À partir de maintenant, nous nous concentrerons sur les nouvelles parties que nous ajoutons au fichier, afin que nous puissions nous concentrer sur l’apprentissage d’une chose à la fois. Vous pouvez éventuellement garder le code précédent en mode commenté, les déplacer vers un nouveau fichier pour vos références, ou si vous ne voulez plus le voir, vous pouvez le supprimer pour un fichier plus propre.

Continuons avec notre exemple pour un cas “ou”. Considérez un scénario où vous visitez votre réfrigérateur pour de la nourriture et des boissons chaque fois que vous avez faim ou soif. Comment le code fonctionnerait-il pour cela ?

let hungry = true;
let thirsty = false;
if (hungry || thirsty) {
    alert("Allez au réfrigérateur et vérifiez ce que vous avez là-dedans.");
}
[/code>
<p>Exécuter ce code, comme vous l'avez probablement deviné, nous donnerait le résultat suivant :</p>
<img src="https://firmbee.com/wp-content/uploads/13-1-800x425.png" alt="extraits" width="800" height="425" class="alignnone size-medium wp-image-19000 img-fluid" />
<p>Jusqu'à présent, les exemples que nous avons utilisés provenaient de scénarios proches de la vie réelle, mais souvent, vous traiterez des nombres dans le code. Vous avez vu des nombres précédemment dans cette série, mais nous n'avons pas beaucoup parlé de la comparaison ou des opérations que nous pourrions faire avec eux. Maintenant que nous avons appris sur les instructions if else, voyons un peu plus sur les nombres.</p>
<p>Lorsque nous traitons avec des instructions if et else if, nous vérifions la véracité d'une instruction. Mais pouvons-nous également faire une instruction if significative si tout ce que nous avons ce sont des nombres ? Par exemple, que se passe-t-il si je veux prendre un parapluie s'il y a plus de 50 % de chances de pluie, pouvons-nous y parvenir avec du code ? Oui, nous le pouvons, et voici comment cela se passerait.</p>
[code lang="js"]
let chanceOfRain = 70;
if (chanceOfRain &gt;= 50) {
    alert(&quot;Prenez un parapluie.&quot;);
}

Lorsque nous traitons avec des nombres, nous avons besoin d’un moyen de les convertir en une sorte de véracité ou de fausseté pour que l’instruction if fonctionne. Il existe plusieurs façons d’y parvenir en fonction de notre cas d’utilisation.

Par exemple, nous pouvons vérifier si deux nombres sont exactement égaux l’un à l’autre avec trois signes égaux comme ceci :

let a = 10;
let b = 10;
if (a === b) {
    alert("Ils sont identiques.");
}

Cela nous donnerait l’alerte qui dit “Ils sont identiques.”.

Nous pouvons également vérifier qu’ils ne sont pas égaux avec le code suivant :

let a = 10;
let b = 5;
if (a !== b) {
    alert("Ils ne sont pas la même chose !");
}

Exécuter le code ci-dessus nous donnera l’alerte qui dit “Ils ne sont pas la même chose !”.

Nous pouvons également vérifier spécifiquement lequel est plus grand, plus grand ou égal, plus petit ou plus petit ou égal. Vous pouvez trouver un résumé des signes pour votre commodité.

// === vérifie l'égalité
// !== vérifie la non-égalité
// > plus grand que
// >= plus grand ou égal à
// < plus petit que
// <= plus petit ou égal à

Voyons également quelques autres pour un exercice supplémentaire et une exposition au code. Voici quelques exemples de codes qui afficheront tous l’alerte qu’ils ont à l’intérieur des instructions if :

Plus grand que :

let a = 10;
let b = 5;
if (a > b) {
    alert("a est plus grand que b");
}

Plus grand ou égal à :

let a = 10;
let b = 5;
if (a >= b) {
    alert("a est plus grand ou égal à b");
}

Un autre exemple de plus grand ou égal à :

let a = 10;
let b = 10;
if (a >= b) {
    alert("a est plus grand ou égal à b");
}
[/code>
<p>Plus petit que :</p>
[code lang="js"]
let a = 5;
let b = 10;
if (a &lt; b) {
    alert(&quot;a est plus petit que b&quot;);
}
[/code>
<p>Plus petit ou égal à :</p>
[code lang="js"]
let a = 5;
let b = 10;
if (a &lt;= b) {
    alert(&quot;a est plus petit ou égal à b&quot;);
}
[/code>
<p>Un autre exemple de plus petit ou égal à :</p>
[code lang="js"]
let a = 10;
let b = 10;
if (a &lt;= b) {
    alert(&quot;a est plus petit ou égal à b&quot;);
}
[/code>
<p>En utilisant une combinaison de ces signes de comparaison ou d'égalité, nous pouvons créer des codes complexes qui peuvent s'adapter à différentes conditions.</p>
<h2>Opérations arithmétiques</h2>

<p>Lorsque nous traitons des nombres, une autre chose que nous voulons effectuer est des opérations arithmétiques. La plupart des opérations arithmétiques devraient être assez familières, mais il existe également des opérateurs arithmétiques spécifiques à la programmation qui pourraient être moins familiers.</p>
<p>Voici un résumé des opérations arithmétiques que nous utilisons en JavaScript avec leur signification pour votre commodité :</p>
[code lang="js"]
// * multiplication
// / division
// + addition
// - soustraction
// % opération modulo, nous donne le reste après la division
// ** exponentiation

Les quatre premiers fonctionneront comme vous vous y attendez :

let a = 12;
let b = 5;
let c = a * b;
// c sera 60
c = a / b;
// c sera maintenant 2.4
c = a + b;
// c sera maintenant 17
c = a - b;
// c sera maintenant 7

L’opération modulo nous donnera le reste après avoir divisé le premier nombre par le deuxième nombre. Si nous continuons avec le code précédent a, b et c :

c = a % b;
// c sera maintenant 2
c = 18 % 5;
// c aura maintenant la valeur de 3
// parce que 18 divisé par 5 nous donnera le reste de 3

L’opérateur d’exposant effectue l’exponentiation en JavaScript. Il est représenté par deux signes d’astérisque et prend le premier élément à la puissance du deuxième élément.

c = 2 ** 3;
// c aura maintenant la valeur de 8
// parce que 2 * 2 * 2 égale 8

C’était un tutoriel relativement long, et vous l’avez fait ! Nous avons mis à niveau notre configuration de codage et appris beaucoup de choses dans ce tutoriel. Dans le prochain tutoriel, nous continuerons avec plus de façons de contrôler le flux de notre code !