web:javascript:fondamentaux:conditions

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:javascript:fondamentaux:conditions [2021/06/20 09:19] – [5. Les conditions] philweb:javascript:fondamentaux:conditions [2021/08/11 10:55] (Version actuelle) – phil
Ligne 1: Ligne 1:
 +[[web:javascript|{{ :iconemaison.jpg?nolink&25|Accueil JavaScript}}]]
  
 +===== JavaScript - Les tests conditionnels =====
 +
 +[Mise à jour le 20/6/2021]
 +
 +
 +  * **Sources** et compléments sur **MDN Web Docs**
 +    * <html><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/if...else" target="_blank">if... else</a></html>
 +    * <html><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" target="_blank">L'opérateur conditionnel</a></html>
 +
 +  * ** Lectures connexes**
 +    * Wikis WebPEM : [[:outils:vscode:web|"Préparer un projet de site Web avec l'IDE VSCode"]]
 +
 +----
 +
 +==== Introduction ====
 +Les tests conditionnels permettent d'orienter l'exécution vers des branchements d'instructions selon le résultat de conditions définies par le développeur.
 +
 +==== 1. Le test simple ====
 +<note>Le bloc d'instructions n'est exécuté que si la condition est vraie.</note>
 +
 +//Exemple// : calcul de frais de port à un seuil.
 +<code javascript *.js>
 +if (montant >= 100) {
 +    var port = 0;
 +}
 +</code>
 +
 +==== 2. Le test si - sinon ====
 +<note>Si la condition du if n'est pas true, les instructions du if sont ignorées, celles du else sont exécutées. Les test si sinon peuvent être imbriqués.</note>
 +
 +//Exemple 1 // : calcul de frais de port à un seuil.
 +<code javascript *.js>
 +var port = 0;
 +if (montant >= 100) {
 +    port = 0;
 +} else {
 +    port = 6.9;
 +}
 +</code>
 +
 +//Exemple 2 // : calcul de frais de port  à deux seuils.
 +<code javascript *.js>
 +var port = 0;
 +if (montant >= 100) {
 +    port = 0;
 +} else if (montant >= 50){
 +    port = 3.9;
 +} else {
 +    port = 6.9;
 +}
 +</code>
 +
 +==== 3. Les tests multiples ====
 +<note>Les tests multiples sont traités sur des conditions d'égalité.</note>
 +
 +//Syntaxe//
 +<code javascript *.js>
 +switch (expression) {
 +    case valeur1 : 
 +      blocInstructions1 // Ce bloc d'instructions est exécuté si expression est égal à valeur1
 +      break;
 +      
 +    ...
 +    
 +    case valeurN : 
 +      blocInstructionsN
 +      break;
 +    default :
 +      blocInstructionsDefault
 +}
 +</code>
 +
 +//Exemple//
 +<code javascript *.js>
 +<!DOCTYPE html>
 +<html>
 +
 +<head>
 +    <meta charset="UTF-8">
 +    <title>Jours semaine</title>
 +</head>
 +
 +<body>
 +    <h1 id="message"></h1>
 +    <script type="text/javascript">
 +        var dt = new Date();
 +        var jour = dt.getDay();
 +        var msg = "";
 +        switch (jour) {
 +            case 1:
 +                msg = "C'est lundi";
 +                break;
 +            case 0:
 +            case 6:
 +                msg = "C'est le week-end";
 +                break;
 +            default:
 +                msg = "En semaine";
 +                break;
 +        }
 +        document.getElementById("message").innerHTML=msg;
 +    </script>
 +</body>
 +
 +</html>
 +</code>
 +==== 4. L'opérateur ternaire ====
 +<note>L'opérateur ternaire doit son nom aux trois parties qui le composent. \\ //Condition// **?** //valeurSiVrai// **:** //valeurSiFaux//</note>
 +
 +//Exemple// : calcul de frais de port à un seuil.
 +<code javascript *.js>
 +var port= montant >= 100? 0 : 6.9;
 +</code>
 +
 +<note tip>Le gros avantage de l'opérateur ternaire est qu'il peut être utilisé au sein d'une autre instruction.</note>
 +
 +//Exemple// : ajout d'un s à la fin d'un mots en fonction de la valeur d'un nombre
 +<code javascript *.js>
 +console.log("Votre devis comporte " + nb + " article" + (nb>1 ? "s" : ""));
 +</code>
 +
 +====5. Les conditions ====
 +<note>Une expression de condition retourne une valeur booléenne.</note>
 +
 +Une variable peut recevoir le résultat d'une expression de test de condition. 
 +
 +// Exemple //
 +
 +<code javascript *.js>
 +var estMajeur = age >= 18;
 +</code>
 +
 +<note tip>Une condition est considérée comme vraie si elle renvoie toute valeur  autre que 0.</note>
 +
 +// Exemple //
 +
 +<code javascript *.js>
 +if (nbArticle) {
 +    msg = "Il y a " + nbArticles + "articles (s)dans le panier.";
 +}
 +else {
 +    msg = "Le panier est vide."
 +}
 +</code>
 +
 +  * **Opérateurs d'égalité et de différence**
 +    * égalité : **==**
 +    * différence : **!=**
 +
 +// Exemples //
 +
 +<code javascript *.js>
 +var nb = 5;
 +nb == 5; // true
 +nb == 6; // false
 +nb == "5"; // true (comportement dû au typage faible, est annulé si on utilise "===")
 +nb == "05.00"; // true (idem)
 +nb = 10 / 2; // true
 +</code>
 +
 +<note warning>Une erreur courante est d'utiliser l'opérateur d'affectation à la place de l'opérateur de comparaison. Cette erreur entraîne un double dysfonctionnement : \\
 +- Le test est toujours vrai, car une affectation réussie renvoir //true//. \\ 
 +- La variable à tester change de valeur.</note>
 +
 +  * **Opérateur d'égalité (différence) et de contenu**
 +     * égalité : **===**
 +     * différence: **!==**
 +
 +<note important>Il existe un niveau supérieur d'égalité qui consiste à comparer, en plus des contenus, les **types** des deux parties du test d'égalité.</note>
 +
 +// Exemples //
 +
 +<code javascript *.js>
 +var nb = 5;
 +nb == 5; // true
 +nb == "5"; // true
 +nb === "5"; // false
 +</code>
 +
 +  * **Autres opérateurs**
 +    * > : strictement supérieur à
 +    * > : strictement inférieur à
 +    * >= supérieur ou égal à
 +    * <= inférieur ou égal à
 +
 +  * **Valeur //null//**
 +<note>La valeur //**null**// représente l'absence de valeur, c'est-à-dire le **vide**. Il ne faut pas confondre //null//, //false// et //undifined//.</note>
 +
 +// Exemples //
 +
 +<code javascript *.js>
 +// Egalités faibles
 +console.log(null == false) // false
 +console.log(null == undefined) // true
 +
 +// Egalités strictes
 +console.log(null === false) // false
 +console.log(null === undefined) // false
 +
 +// Affectations et types
 +var nonNull = null, nonNullBis = null;
 +console.log(typeof nonNull) // object
 +console.log(nonNull === nonNullBis) // true
 +</code>
 +
 +==== 6. Combinaison de conditions ====
 +Les combinaisons de condition sont réalisées avec les opérateurs :
 +  * **ET** matérialisé par **&&** (double ET commercial)
 +  * **OU** matérialisé par **||** (double //pipe//)
 +
 +// Exemples //
 +
 +<code javascript *.js>
 +if ((a == 1) && (b == 2)) { }
 +if ((a != 1) && (b == 2)) { }
 +if ((a == 1) || (b == 2)) { }
 +if ((a != 1) || (b == 2)) { }
 +if ((a == 0) || ((a == 1) && (b == 2))) { }
 +</code>
 +
 +  * **Inversion de sens**
 +Une inversion de sens simplifie parfois la syntaxe et améliore la compréhension d'une condition.
 +
 +<note tip>En algèbre booléenne, la négation d'une expression consiste à inverser les ET et les OU, les égalités et les différences, et les supérieurs et les inférieurs.</note>
 +
 +// Exemples //
 +
 +<code javascript *.js>
 +// La condition ci-dessous :
 +if ((a != 1) || (b != 2)) { }
 +// peut être remplacée par
 +if ((a == 1) && (b == 2)) { }
 +</code>