Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

LES BOUCLES EN JAVASCRIPT

Présentation des boucles

Les boucles vont nous permettre d’exécuter un bloc de code un certain nombre de fois, tant qu’une certaine condition est remplie.

Par exemple, on va pouvoir exécuter une certaine instruction tant qu’une certaine variable n’aura pas atteint telle ou telle valeur.

Les boucles nous permettent finalement de gagner beaucoup de temps en automatisant la répétition d’un bloc de code.

Attention cependant : la condition donnée doit toujours être fausse à un moment donné, sinon la boucle ne s’arrêtera jamais !

Nous allons étudier trois boucles dans cette partie :

  • La boucle while (« tant que ») ;
  • La boucle do… while (« faire… tant que ») ;
  • La boucle for (« pour »).

La boucle while

La boucle while va nous permettre de répéter une série d’instructions tant qu’une condition donnée est vraie.

Les conditions au sein des boucles prendront très souvent la forme d’une inégalité sur une variable.

Par exemple, on va pouvoir faire quelque chose comme cela : « tant que la variable x contient une valeur inférieure à 10, exécuter le bloc de code suivant : … ».

Cependant, rappelez vous que notre condition doit toujours être fausse à un moment donné afin de pouvoir sortir de la boucle. Il va donc également falloir faire varier la valeur à l’intérieur de notre variable.

Pour cela, on va très souvent incrémenter (c’est-à-dire ajouter 1) ou décrémenter (soustraire 1) notre variable à chaque nouveau passage dans notre boucle.

Voici comment on va écrire une boucle while en pratique :

La boucle JavaScript while

Essayer ce code !

Dans le code ci-dessus, on commence par initialiser une variable x en lui faisant stocker la valeur 0.

Ensuite, on crée notre boucle while. Tant que x contient une valeur strictement inférieure à 10, on ne sort pas de la boucle et on retourne au début de celle-ci pour effectuer un nouveau passage.

A chaque nouveau passage dans la boucle, on demande à afficher la valeur de x et on incrémente la valeur de x, c’est-à-dire on ajoute 1 à cette valeur.

Comme vous pouvez le voir, pour incrémenter, il suffit d’ajouter deux signes « + » après notre variable.

Faites bien attention à l’ordre des instructions dans votre boucle.

En effet, dans notre exemple, j’incrémente ma variable après l’affichage de mon message, ce qui fait que le premier message que l’on reçoit est le suivant :

Attention à l’ordre des instructions dans la boucle

Tandis que le dernier sera « x vaut : 9 ».

Si nous avions incrémenté la valeur de x avant d’afficher cette valeur, nous aurions obtenu des valeurs différentes puisque x aurait valu 1 dès le premier message :

On change l’ordre des instructions

La valeur de x n’est plus la même

Essayer ce code !

Un mot sur l’incrémentation et la décrémentation

Comme on vient de la voir, il suffit pour incrémenter la valeur d'une variable d’ajouter deux signes « + » après le nom de la variable en question.

A partir de là, vous devriez avoir deviné que pour décrémenter (c’est-à-dire enlever 1), il suffit tout simplement d’ajouter deux signes « - » après notre variable.

Cependant, il y a deux façons d’incrémenter ou de décrémenter qui ne sont pas strictement équivalentes : on peut ajouter le double « + » ou le double « - » avant ou après le nom de la variable.

La subtilité réside dans la priorité des opérations. Regardez plutôt le code ci-dessous :

Les différentes façons d’incrémenter une valeur

Essayer ce code !

Comme cela est précisé ci-dessus, vous pouvez remarquer qu’en incrémentant ou décrémentant avec le double signe avant le nom de la variable, l’opération d’incrémentation ou de décrémentation sera prioritaire sur l’assignation.

En revanche, si vous mettez le double signe après le nom de la variable, l’assignation sera prioritaire sur l’incrémentation ou la décrémentation. Ainsi, y stockera la valeur contenue dans x avant que celle-ci soit incrémentée, et stockera donc 0.

Retenez bien cette subtilité afin d’éviter de faire des erreurs lors de calculs sur des variables.

La boucle do… while

Pour faire très simple, la différence entre la boucle do… while et la boucle while va être de même type que ce que nous venons de voir avec l’incrémentation : cela va être une question d'ordre des opérations.

En effet, dans une boucle while, si la condition donnée est fausse dès le départ, la boucle ne sera jamais exécutée.

Par exemple, si on écrit cela, rien ne s’affichera puisqu’on ne rentrera jamais dans la boucle :

Comparaison boucles while et do while

Essayer ce code !

En revanche, dans une boucle do… while (« faire… tant que »), on effectuera toujours au moins un passage dans la boucle, même si la condition est fausse au départ car la condition va être testée après le premier passage dans la boucle au contraire de la boucle while où la condition est testée avant tout passage dans la boucle.

Reprenons le même exemple que précédemment avec une boucle do… while :

Exemple de boucle do while

On effectue toujours au moins un passage dans une boucle do while

Essayer ce code !

La boucle do… while s’avère donc extrêmement intéressante si vous avez besoin pour une raison ou pour une autre d’effectuer toujours au moins un passage dans une boucle pour faire fonctionner un script.

La boucle for

La boucle for (« pour ») va nous permettre de répéter une série d’instructions à partir d’une valeur donnée, jusqu’à une certaine valeur seuil.

Cette boucle utilise une syntaxe assez condensée qui fait qu’elle est la plus utilisée en JavaScript car elle est la plus simple à écrire, la plus performante et au final la plus lisible.

Dans une boucle for, nous allons tout d’abord devoir initialiser une variable, puis poser notre condition, et finalement incrémenter ou décrémenter notre variable.

Voici comment on va écrire cela :

Un premier exemple de boucle for

Essayer ce code !

Notez que l’on sépare les différentes phases ou déclarations à l’intérieur de notre boucle for par des points virgules.

Retenez aussi que l’initialisation est exécutée avant tout passage dans la boucle for, tandis que l’incrémentation est exécutée à la fin de chaque passage dans la boucle for.

Finalement, notez également que vous n’êtes obligé ni d’initialiser, ni d’écrire la condition, ni d’incrémenter à l’intérieur de la boucle for.

Cependant, je vous recommande autant que possible d’écrire vos boucles for comme moi pour le moment, car cela me semble plus simple et plus clair.

Chapitre précédent

Chapitre suivant