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 EN JAVASCRIPT

Découverte des conditions en JavaScript

En JavaScript, nous allons souvent vouloir effectuer différentes actions selon la valeur d’un paramètre, afin de dynamiser notre site et d’y ajouter une certaine interaction.

Par exemple, on va vouloir afficher le message « Bonjour » si il est moins de 18h ou « Bonsoir » dans le cas contraire, ou encore afficher le message « Bonjour Pierre » si votre visiteur à indiqué au préalable qu’il s’appelait Pierre.

Une façon simple de faire cela est d’utiliser les conditions.

Les conditions vont s’articuler autour d’un test. Généralement, nous allons comparer la valeur contenue dans une variable à une certaine autre valeur.

Selon le résultat du test, nous allons ensuite pouvoir exécuter un bloc de code plutôt qu’un autre à l’intérieur de notre condition.

Les opérateurs de comparaison

Pour effectuer des comparaiosns à l’intérieur d’une condition, nous allons avoir besoin d’opérateurs de comparaison.

Ces opérateurs sont représentés par les symboles suivants :

Symbole Signification
== Est égal à (en valeur)
!= Est différent de (en valeur)
=== Est égal à (en valeur et en type)
!== Est différent de (en valeur ou en type)
< Est strictement inférieur à
<= Est inférieur ou égal à
> Est strictement supérieur à
>= Est supérieur ou égal à

Commencez par noter que pour tester l’égalité, on n’utilise pas le signe « = » qui, rappelons le, est un opérateur d’affectation et non d’égalité au sens mathématique du terme, mais le double égal (==).

Ensuite, deux symbole peuvent vous poser problème : le triple égal et le point d’exclamation suivi de deux signes égal.

En utilisant seulement le double égal, nous n’allons tester que l’égalité sur la valeur. Ainsi, si l’on tente de comparer le chiffre 4 à la chaîne de caractères « 4 » de cette manière, le JavaScript renverra le booléen « true » (vrai).

En revanche, si l’on utilise le triple égal, on va tester à la fois l’égalité sur les valeurs et sur le type de valeurs. Ainsi, si l’on compare le chiffre 4 à la chaîne de caractère « 4 », le JavaScript renverra « false » (faux).

Le JavaScript et les comparaisons de valeurs

Afin de bien comprendre comment fonctionnent les conditions, il est indispensable au préalable que vous compreniez comment le JavaScript effectue des comparaisons entre les valeurs.

Sans cette connaissance, il est impossible de savoir comment une condition marche véritablement.

Tout d’abord, vous devez bien comprendre que le JavaScript sait comparer différentes valeurs entre elles.

A chaque fois que l’on va comparer deux valeurs, le JavaScript va renvoyer un booléen, c’est-à-dire soit « true », soit « false », selon que la comparaison soit vraie ou pas.

Par exemple, si l’on écrit en JavaScript « 7 < 14 », le JavaScript renverra « true » car 7 est bien inférieur à 14.

Dans nos conditions, nous n’allons donc pas directement tester si une valeur est inférieure, égale ou supérieure à une autre, mais tester si le JavaScript nous renvoie true ou false.

C’est une distinction très importante que malheureusement très peu de développeurs font ou comprennent.

Voyons immédiatement plusieurs exemples afin d’être sûrs de bien comprendre comment tout cela fonctionne :

Le JavaScript sait comparer des valeurs

Le JavaScript renvoie true ou false à l’issue d’une comparaison de valeurs

Essayer ce code !

Dans le code ci-dessus, nous comparons des valeurs entre elles. A la suite de chaque comparaison, le JavaScript renvoie soit true soit false selon que la comparaison soit vraie ou non.

On stocke le résultat renvoyé par le JavaScript dans une variable pour chaque comparaison puis on affiche tout cela grâce à une instruction alert().

Maintenant que vous savez véritablement comment fonctionne le JavaScript avec les opérateurs de comparaisons, nous allons pouvoir aborder sereinement les conditions en soi.

Chapitre précédent

Chapitre suivant