JavaScript si deux conditions sont remplies, affiche un message. Expressions conditionnelles

Si la programmation était toujours linéaire, elle n’existerait probablement pas. Après tout, dans presque tous les programmes, il existe diverses ramifications qui dépendent de certains facteurs externes ou internes. Ce sont les branches créées à l'aide de expressions conditionnelles, dont je vais vous parler dans cet article.

Forme générale instruction conditionnelle en JavaScript tel:

Si (condition) (
//Bloc opérateur
}
autre(
//Bloc opérateur
}

Le mot clé vient en premier si, qui indique au navigateur qu'une instruction conditionnelle arrive ensuite. À l’intérieur des parenthèses se trouve une condition qui, par conséquent, renvoie vrai ou FAUX. Si l’expression entre parenthèses était vrai (vrai), alors le premier bloc d'instructions est exécuté si la condition FAUX (FAUX), alors le bloc d'instructions est exécuté dans autre. Bloquer également autre n’est pas obligatoire, et je vais donner un exemple ci-dessous.

Pratiquons-le maintenant dans la pratique. Résolvons ce problème : l'utilisateur saisit un numéro, et nous affichons un message - c'est plus ou moins 5 .


si(x< 5) alert ("Введённое число меньше пяти");

Regardons cet exemple. Sur la première ligne, nous appelons la fonction rapide, qui affiche une fenêtre vous demandant de saisir un numéro. Ensuite, l'utilisateur saisit un nombre qui est écrit dans la variable X. Et puis vient la condition, que je traduis ainsi : Si x est inférieur à 5, alors afficher le message : "Le nombre saisi est inférieur à cinq", sinon afficher le message "Le nombre saisi est supérieur à cinq". Expression X< 5 renvoie soit vrai ( < 5 ) ou FAUX (x >= 5). Notez également que nous n’utilisons pas d’accolades. Pourquoi? Parce que nous n'utilisons qu'un seul opérateur (fonction alerte()). En principe, nous pouvons les installer, et rien ne changera, cependant, ici ils seront superflus.

Cependant, notre tâche contient une erreur significative. Si l'utilisateur saisit " 5 ", puis on affiche le message " Le nombre saisi est supérieur à cinq", cependant, ce n'est pas tout à fait correct. Transformons donc la condition de cette façon :

Si(x< 5) alert ("Введённое число меньше пяти");
autre
if (x == 5) alert ("Vous en avez entré cinq");
else alert("Le nombre saisi est supérieur à cinq");

Comme vous pouvez le constater, le bloc autre dans la première condition a été transformé. Dans le bloc autre est vérifiée pour l’égalité entre x et 5. Et si tel est le cas, alors le message correspondant s'affiche, sinon, il s'affiche que le nombre est supérieur à cinq. Autrement dit, une condition dans une condition est tout à fait normale. Notez également que je n'ai toujours pas mis les accolades car sinon c'est un opérateur. Et lorsqu’il n’y a qu’un seul opérateur, la présence de parenthèses n’est pas nécessaire.

Regardons un autre exemple. Créons une variable qui vrai, si le nombre saisi est positif, et FAUX, si le nombre est négatif.

Var x = prompt("Entrez un nombre");
var positif = vrai ;
si(x< 0) positive = false;
alerte (positive);

Cet exemple utilise l'exemple classique où nous prenons une variable et lui attribuons une valeur par défaut. Et si cela est nécessaire, nous le modifions. Dans ce cas, on change la valeur par défaut si le nombre est négatif. Cependant, cet exemple pourrait être écrit encore plus joliment :

Var x = prompt("Entrez un nombre");
var positif = x< 0;

Autrement dit, nous sommes variables positif attribuer immédiatement le résultat de la comparaison X et zéro.

Parlons maintenant de ce qu'on appelle conditions difficiles. Dans les exemples ci-dessus, nous n'avons considéré que des conditions simples, mais il existe également d'autres conditions composées de plusieurs conditions. Et ici deux opérations sont utilisées : && - ET logique Et || - OU logique. Écrivons cette condition :

Si((x<= 5) && (x >= 0)) (//bloc d'opérateurs)

Cette condition (condition complexe) donnera vrai, si et seulement si X<= 5 И x >= 0 . sinon ça reviendra FAUX.

Considérons une condition complexe avec OU logique.

Si((x<= 5) || (x == 6)) {//блок операторов}

Cela peut se traduire ainsi : si X<= 5 ИЛИ x == 6 , puis reviens vrai, sinon FAUX.

La dernière chose que je veux dire, c'est qu'il existe des conditions qui consistent à plusieurs ET et OU logiques, et parfois il faut vraiment se fatiguer la tête pour comprendre cette condition.

C'est tout ce que je voulais dire instructions conditionnelles en JavaScript. Et puis il faut juste s’entraîner. Hélas, sans pratique, vous n'apprendrez jamais à utiliser cet opérateur, sans connaissance duquel il est tout simplement inutile de passer à autre chose. Alors trouvez un problème simple (comme celui que nous avons résolu ci-dessus) et résolvez-le.

Revenons à nos lièvres

Rappelons-nous la tâche sur les lièvres et Mazai du dernier chapitre.
Sans utiliser de conditions et d'actions réalisées (ou non réalisées)
selon les conditions, comptez le nombre de lièvres dans le dernier
ce ne sera pas facile pour le bateau.

Ajoutons un branchement à la fonction lastBoatRabbits :

var dernierBoatRabbits = fonction (totalLapins)( if (totalRabbits === 0 ) ( // return 0 ; ) else ( var restRabbits = totalRabbits % 6 ; if (restRabbits === 0 ) ( // return 6 ; ) else ( return restRabbits; ) ) );

Donc, s'il n'y a pas de lièvres sur la rivière, le dernier bateau n'amènera personne (en fait, il reviendra presque immédiatement, car grand-père saura avec certitude qu'il n'y a pas de lièvres sur la rivière).

Et si le nombre de lièvres sur la rivière est un multiple de 6, alors le dernier bateau sera entièrement chargé de lièvres.

Qu'est-ce qui pourrait être amélioré dans ce programme ? J'utiliserais une variable distincte,
mémoriser le nombre de lièvres qui rentrent dans le bateau, au cas où le reconnaissant
les lièvres donneront à Mazai un plus grand bateau. On ne sait jamais quoi d'un coup.

fonction (totalLapins)( if (totalRabbits === 0 ) ( return 0 ; ) else ( var restRabbits = totalRabbits % boatCapacity; if (restRabbits === 0 ) ( return boatCapacity; ) else ( return restRabbits; ) ) );

Syntaxe de branchement

Une branche peut avoir une partie qui est exécutée si la condition est fausse,
ou peut-être ne pas l'avoir :

// Option à deux branches : if (rainIsFalling) ( stayHome(); // Si rainIsFalling == true, cette partie est exécutée) autre ( walkInAPark(); // Sinon cette partie est exécutée } // Option avec une branche : if (musicIsPlaying) ( dance(); ) // Si musicIsPlaying == false, l'exécution du programme continue simplement

Conditions

La condition if peut être une expression comparant deux nombres ou chaînes,
en utilisant les opérations == , > ,< , >= , <= , != и === , любая переменная, которой
s'est vu attribuer une valeur logique et simplement n'importe quelle valeur qui, à la suite de l'opération
if sera converti en une valeur booléenne.

Exemples de comparaison :

10 > 5 // => vrai 11< 6 // =>faux 5 >= 5 // => vrai 3 != 3 // => faux "abc" == "abc" // => vrai "abc" === "abc" // => vrai

Variables comme condition :

condition var = 10 > 5 ; if (condition) ( console .log("10 > 5" ); // Sera exécuté }

Opérations logiques sur conditions

Plusieurs expressions qui renvoient une valeur booléenne (ou forcée à une valeur booléenne)
peuvent être combinés à l’aide d’opérations logiques. De telles opérations sont appelées :
ET logique && , OU logique || et négation logique ! .

vrai vrai ; // => vrai faux || FAUX ; // => faux !false ; // => vrai

Le ET logique renvoie vrai uniquement si les deux côtés sont vrais.
Le OU logique renvoie false uniquement si les deux côtés sont faux.
La négation renvoie false pour true et, inversement, true pour false .

Selon les règles Javascript, les valeurs 0, null et undefined sont converties en false.
Cependant, en obtenant le résultat &&, nous obtenons la première valeur non réduite, qui
est converti en false et le résultat résultant est || - première valeur non réduite,
qui est évalué à vrai :

0 && vrai ; // => 0 6 || 7 || FAUX ; // => 6 !0 ; // => vrai

Ainsi, la fonction renvoyant le nombre de lièvres dans le dernier bateau pourrait être réécrite ainsi :

var boatCapacity = 6 ; var dernierBoatRabbits = fonction (totalLapins)( return totalLapins && (totalLapins % boatCapacity || boatCapacity); );

Tâches

  1. Écrivez une fonction fizzbuzz qui prend un paramètre numérique et :
    • Pour les nombres multiples de trois, renvoie "Fizz"
    • Pour les nombres multiples de cinq, renvoie "Buzz"
    • Pour les nombres multiples de quinze (trois et cinq), renvoie "FizzBuzz"
    • Sinon, renvoie le numéro d'origine
  2. Écrivez une fonction iGoToNorth qui prend un paramètre numérique et détermine si le nombre qui nous est transmis est approprié. Le nombre convient s'il est supérieur à 10, inférieur à 30 et multiple de 7.

Leçon n°5
Brancher les instructions if en JavaScript

Opérateurs de succursales sont conçus pour que le programme puisse exécuter l'un ou l'autre bloc de code, selon que la condition est vraie ou fausse.

Il existe cinq types d'opérateurs de succursales. Dans cette leçon, nous en examinerons deux :
— exploitant de succursale si
— opérateur de succursale, sinon

Exécute le code si la condition renvoie true .

Les conditions chez les opérateurs de succursales sont généralement des opérations de comparaison ou des opérations logiques.

Le diagramme de l'instruction de branche if ressemble à ceci :

If (condition) (le code s'exécutera si la condition renvoie vrai)

Donnons un exemple avec l'opérateur de succursale si :

// crée deux variables var numOne; var numDeux ; // attribue des valeurs aux variables numOne = 5 ; numDeux = 3 ; if (numOne > numTwo) ( alert("La condition est retournée vraie"); )

Dans le script, nous avons créé deux variables numOne et numTwo et leur avons attribué les valeurs numériques 5 et 3.

Ensuite, nous avons créé un opérateur de branchement if qui compare les valeurs de deux variables. Si l’opération de comparaison renvoie vrai, alors le code situé entre les accolades sera exécuté. Dans notre cas, une fenêtre apparaîtra avec le message Condition renvoyée vraie. Si l’opération de comparaison renvoie false , rien ne se passera.

Les caractères double barre oblique // sont des commentaires. Après la double barre oblique, vous pouvez écrire n'importe quel texte, l'interpréteur JavaScript le percevra comme un commentaire et ne le traitera pas. On s'en souvient, dans les langues et, vous pouvez également créer des commentaires.

Instruction de branche si sinon, est conçu pour exécuter un bloc de code particulier, en fonction de la valeur que la condition renverra : vrai ou faux

Le diagramme de l'opérateur de branche if else ressemble à ceci :

If (condition) (le code s'exécutera si la condition renvoie vrai) sinon (le code s'exécutera si la condition renvoie faux)

Donnons un exemple avec l'opérateur de branche if else :

VarnumOne ; var numDeux ; numUn = 5 ; numDeux = 3 ; if (numOne > numTwo) ( alert("La condition est retournée vraie"); ) else ( alert("La condition est retournée false"); )

Attribuez à la variable numTwo, un nombre supérieur à 5, par exemple 7, puis la condition retournera faux et une fenêtre apparaîtra avec le message Condition renvoyée faux.

JavaScript - Leçon 7. Branchement dans le programme - instruction if

Très souvent, une situation se présente lorsque nous devons effectuer une action en fonction d'une condition. Par exemple, nous avons une boutique de vêtements en ligne. Nous demandons à l'utilisateur qui il est (homme ou femme) et, en fonction de la réponse, affichons une liste de produits pertinents (homme ou femme). Lors de l'écriture de tels programmes, il est utilisé conditionnel si instruction. Sa syntaxe est la suivante :

Si B(S1)
sinon (S2)

Où B- une expression de type logique, et S1 Et S2- les opérateurs.

Cela fonctionne comme ceci : la valeur de l'expression est calculée B, si c'est vrai, alors l'instruction est exécutée S1, si c'est faux, alors l'instruction est exécutée S2. Chaîne sinon (S2) peut être omis.

Je pense que ce sera plus clair avec un exemple. Disons que nous avons un formulaire dans lequel l'utilisateur saisit 3 valeurs. Écrivons un script qui déterminera le maximum des nombres saisis.

Commençons par écrire le code du formulaire dans la page HTML :

Javascript si

Écrivons maintenant le code de la fonction sur la page script.js :

fonction maxZnach(obj)( var a=1*obj.zn1.value; var b=1*obj.zn2.value; var c=1*obj.zn3.value; var m=a; si (b>m) m=b; si (c>m) m=c; obj.res.value=m )

Ainsi, notre fonction prend trois valeurs du formulaire, pour le maximum ( m) nous acceptons la valeur un. Puis on compare : si la valeur b supérieur au maximum (c'est-à-dire un), alors le maximum devient b, sinon le maximum reste un(car l'expression entre parenthèses n'est pas vraie). Ensuite, comparez de la même manière la valeur suivante c avec un maximum. La réponse est affichée dans le champ de résultat ( rés).

En général, un tel script pourrait être écrit en utilisant la méthode maximum objet Mathématiques discuté dans la dernière leçon, et le code serait plus court :

fonction maxZnach(obj)( var a=1*obj.zn1.value; var b=1*obj.zn2.value; var c=1*obj.zn3.value; obj.res.value=Math.max(Math .max(a,b),c);

Ce que je veux dire, c’est que la programmation reste un processus créatif et qu’un problème peut être résolu de différentes manières. La tâche du programmeur est de trouver l’option la plus optimale. Mais c'est ainsi, une digression lyrique. Revenons à l'instruction if et regardons un exemple plus intéressant. Écrivons un script au cours duquel, lorsque vous passez le curseur de la souris sur l'image, celui-ci augmentera, créant un effet de zoom.

Comme vous vous en souvenez, en HTML, vous pouvez définir la taille de l'image insérée. Si les dimensions spécifiées sont plus grandes ou plus petites que l'original, le navigateur ajustera automatiquement l'original à ces dimensions. C'est ce que nous utiliserons. Ayons cette image :

La largeur d'origine est de 302 pixels. Nous voulons que l'image sur la page ait une largeur de 102 pixels, et lorsque vous passez le curseur, elle passe à 302 pixels. Tout est clair avec la page html :

Javascript si

Et dans notre fonction, en plus de l'opérateur conditionnel, nous utiliserons également une fonction javascript standard setTimeout, qui appelle une fonction définie par l'utilisateur à un intervalle de temps donné :

Function bigPict())( var w=document.tigr.width; if (w Ainsi, la fonction vérifie la largeur de l'image ( largeur) et, si elle est inférieure à 302 pixels, alors augmente cette largeur de 10 pixels. Fonction setTimeout appelle notre fonction grandePhoto toutes les demi-secondes, grâce à quoi la taille de l'image augmentera jusqu'à ce que la condition w ne deviendra pas faux.

Pour rendre visuellement l'approximation plus fluide, essayez de réduire l'étape d'augmentation de la largeur et le temps nécessaire pour appeler la fonction. Jouez avec ces chiffres et trouvez ceux qui fonctionnent le mieux.

C'est tout pour aujourd'hui, comme devoir, complétez notre script pour que l'image à la sortie du curseur de la souris prenne les valeurs d'origine (soit 102 pixels). Si cela ne fonctionne pas, téléchargez



 

Il pourrait être utile de lire :