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 CONDITIONS IF, IF…ELSE ET IF…ELSE IF…ELSE

La condition if

« If » en anglais signifie « si ». Avec cette première structure conditionnelle, on va pouvoir tester si une valeur répond à un certain critère, et exécuter un bloc de code le cas échéant.

Par exemple, on peut choisir d’afficher le message « Bonjour » si une variable heure stocke une valeur inférieure à 18.

Dans ce cas, le code sera la suivant (observez bien la syntaxe) :

Notre première condition if JavaScript

Le JavaScript exécute le code entre crochets

Essayer ce code !

Analysons le code ci-dessus, étape par étape.

Tout d’abord, on commence par comparer le contenu de notre variable heure à la valeur 18. Si notre variable contient un nombre inférieur à 18, le JavaScript renverra le booléen true.

Ensuite, justement, on teste si le JavaScript renvoie true ou pas au sein de notre condition if.

Littéralement, la ligne if(heure < 18 == true) se traduit par « si le JavaScript renvoie true par rapport à l’inégalité heure < 18, alors exécuter le code contenu entre crochets ».

Dans le cas où le JavaScript renvoie false, rien ne se passe.

Si JavaScript renvoie false, le code dans notre condition ne s’exécutera pas

Le code dans notre condition if n’est pas exécuté

Essayer ce code !

Dans la pratique, on comparera souvent la valeur renvoyée par le JavaScript à l'issue de la comparaison à la valeur true. Cependant, on peut également évidemment comparer cette valeur à false et exécuter notre bloc de code le cas échéant.

On teste si JavaScript renvoie false dans notre condition

On teste la négation au sein de notre condition if

Essayer ce code !

La condition if…else

La condition if…else (« si… sinon » en Français) va nous permettre d’exécuter un bloc de code si le JavaScript renvoie bien la valeur attendue, et un autre bloc de code s’il ne renvoie pas la valeur attendue.

En reprenant notre exemple précédent, on va donc pouvoir dorénavant afficher « Bonjour » si notre variable contient bien une valeur inférieure à 18 et « Bonsoir » dans le cas contraire.

La condition if else en JavaScript

if else en JavaScript permet de gérer plusieurs cas

Essayer ce code !

Notez dès à présent qu’on n’effectue jamais aucun test au sein du else, car le else va tout simplement prendre en charge tous les cas non supportés par le if.

Essayez de vous souvenir de cela, car nombre de développeurs font l’erreur.

Ici, si notre variable heure contient une valeur inférieure ou égale à 18, on va exécuter le code dans le if et donc afficher « bonjour ».

Dans tous les autres cas, nous allons exécuter le code contenu dans le else et donc afficher « bonsoir ».

La condition if…else if…else

La condition if…else if…else signifie « si… sinon si… sinon » en Français.

Cette condition va être très puissante et très pratique puisqu’elle va nous permettre de gérer autant de cas que l’on souhaite et d’exécuter un code différent pour chaque nouveau cas créé.

En effet, on va pouvoir insérer autant de else if que l’on veut au sein de notre condition pour pouvoir gérer un nombre infini de cas.

En reprenant une nouvelle fois notre exemple précédent, on va donc pouvoir maintenant afficher différents messages selon l’heure.

La condition if else if else en JavaScript

if else if else permet de gérer autant de cas que voulus en JavaScript

Essayer ce code !

Comme vous pouvez le voir, cette nouvelle condition est très pratique.

Limitations et solutions

Cependant, ce code est encore loin d’être parfait. En effet, certains d’entre vous se demandent peut être comment le JavaScript fait pour savoir si « c’est le matin » ou « c’est l’après midi » lorsque notre variable stocke une valeur inférieure à 12 ?

La réponse est simple : il ne le sait pas. Le code JavaScript va simplement être lu de façon linéaire et dès qu’un test va être évalué à true, nous allons sortir de la condition.

Dans l’exemple précédent, par exemple, notre variable heure stocke le chiffre 9. A priori, le JavaScript va donc renvoyer true pour « heure < 12 » et pour « heure <= 18 ».

Comme le code est lu linéairement, le premier cas rencontré revoyant true va être « heure < 12 ». Le JavaScript va donc renvoyer « c’est le matin ».

Cependant, si nous avions construit notre condition différemment, le JavaScript aurait renvoyé le « mauvais » message.

Regardez plutôt l’exemple ci-dessous pour vous en convaincre. Nous avons simplement inversé l’ordre de notre condition.

Limites des conditions

Le JavaScript ne peut pas savoir quel est le bon message à renvoyer

Essayer ce code !

Nous allons pouvoir régler ce premier défaut grâce aux opérateurs logiques, objet du prochain chapitre.

Second gros problème de cette condition : nous ne prenons pas en charge les valeurs aberrantes. Dans le cas de l’heure, cela peut sembler superflu, mais imaginez que vous demandiez à vos visiteurs de rentrer l’heure qu’ils souhaitent.

Vous pouvez alors être certain que certains d’entre eux vont rentrer des valeurs inférieures à 0 ou supérieures à 24, ou même écrire en lettres plutôt qu’en chiffres.

Malheureusement, il est encore trop tôt pour apprendre comment filtrer les données envoyées par les utilisateurs.

Dans notre cas, nous pourrions déjà utiliser deux structures conditionnelles if pour filtrer le type de données reçues.

Voilà comment nous pourrions nous y prendre pour ne filtrer que les nombres. Ce n’est peut être pas la solution la plus élégante, mais c’est la meilleure dans l’état actuel de nos connaissances et ça possède l’avantage d’être fonctionnel :

On imbrique deux if l’un dans l’autre

Grace à typeof, on peut tester le type de valeur envoyée

Essayer ce code !

Ici, on utilise typeof() pour tester le type de la valeur contenue dans notre variable heure dans un premier if. Ensuite, on compare la valeur renvoyée par notre fonction à la valeur "number" et si le JavaScript renvoie true suite à cette comparaison, on exécute le code contenu dans ce premier if.

Si typeof() renvoie bien la valeur number, on rentre donc dans notre premier if et de nouveaux tests sont effectués au sein de ce if. Sinon, on arrive dans le dernier else et on affiche « mauvaise valeur ».

Chapitre précédent

Chapitre suivant