Leçon numéro 5
Branchement des instructions if en JavaScript

Opérateurs de branchement sont destinés à ce que le programme puisse exécuter tel ou tel bloc de code, selon que la condition est vraie ou fausse.

Il existe cinq types d'opérateurs de branchement, dans cette leçon, nous en examinerons deux :
- exploitant de succursale si
- opérateur de succursale si autre

Exécute le code si la condition renvoie true.

Les opérations de comparaison ou logiques sont généralement utilisées comme conditions dans les opérateurs de branchement.

Le schéma de l'opérateur de branche si ressemble à ceci :

Si (condition) (le code s'exécutera si la condition retourne vrai)

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

// crée deux variables var numOne; var numDeux; // assigne les variables aux valeurs numOne = 5; nombreDeux = 3 ; if (numOne> numDeux) (alerte ("La condition est retournée vraie" );)

Dans le script, nous avons créé deux variables numOne et numTwo, 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 true, le code entre les accolades s'exécutera. Dans notre cas, une fenêtre apparaîtra avec le message Condition retourné vrai. Si l'opération de comparaison renvoie false, rien ne se passe.

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. Comme nous nous en souvenons, dans les langues et, vous pouvez également créer des commentaires.

Opérateur de branchement si autre, est destiné à exécuter un bloc de code particulier, en fonction de la valeur que la condition retournera : vrai ou faux

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

If (condition) (le code s'exécutera si la condition renvoie true) else (le code s'exécutera si la condition renvoie false)

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

Var numOne ; var numDeux; nombreUn = 5 ; nombreDeux = 3 ; if (numOne> numDeux) (alerte ("La condition a renvoyé vrai");) else (alerte ("La condition a renvoyé faux");)

Affectez à la variable numDeux, un nombre supérieur à 5, par exemple 7, puis la condition retournera false et une fenêtre apparaîtra avec le message Condition retourné false.

Revenons à nos lièvres

Rappelons la tâche sur les lièvres et Mazai du dernier chapitre.
Sans l'utilisation de conditions et d'actions effectuées (ou non effectuées)
selon les conditions, comptez le nombre de lièvres dans le dernier
le bateau ne sera pas facile.

Ajoutons une branche à la fonction lastBoatRabbits :

var lastBoatRabbits = 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.

Quoi d'autre pourrait être amélioré dans ce programme? j'utiliserais une variable séparée,
mémoriser le nombre de lièvres qui rentrent dans le bateau, au cas où le reconnaissant
les lièvres donneront à Mazay un plus gros bateau. On ne sait jamais quoi soudainement.

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

Syntaxe de branchement

Le branchement peut avoir une partie qui est exécutée si la condition n'est pas vraie,
ou peut ne pas l'avoir :

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

Conditions

La condition dans if peut être une expression pour comparer deux nombres ou chaînes,
en utilisant les opérations ==,>,< , >= , <= , != и === , любая переменная, которой
a reçu une valeur booléenne et n'importe quelle valeur résultant du travail
if sera converti en booléen.

Exemples de comparaison :

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

Variables comme condition :

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

Opérations logiques sur conditions

Plusieurs expressions renvoyant des valeurs booléennes (ou booléennes)
peuvent être combinés à l'aide d'opérations booléennes. Ces opérations sont appelées :
ET logique &&, OU logique || et négation logique ! ...

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

Le booléen AND ne renvoie vrai que s'il est vrai des deux côtés,
OU logique ne renvoie faux que si les deux côtés de celui-ci sont faux.
La négation renvoie faux pour vrai et, inversement, vrai pour faux.

Selon les règles Javascript, les valeurs 0, null et undefined sont converties en false.
Cependant, lors de l'obtention du résultat &&, nous obtenons la première valeur non réduite, qui
est réduit à faux, et obtient le résultat || - la première valeur non réduite,
qui convertit en vrai :

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

Ainsi, la fonction qui renvoie le nombre de lièvres dans le dernier bateau pourrait être réécrite comme ceci :

var boatCapacity = 6; var lastBoatRabbits = fonction (totalLapins)(retourner totalRabbits && (totalRabbits% boatCapacity || boatCapacity););

Tâches

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

Bonne journée à tous. Alexey Gulynin est en contact. Dans le dernier article, nous avons démonté créer des boucles en javascript... Dans cet article, je voudrais parler de instruction conditionnelle en JavaScript... En général, toute programmation se compose de conditions, et dans tous les langages de programmation (JavaScript ne fait pas exception), il existe un concept d'opérateur conditionnel. La signification de l'opérateur conditionnel consiste dans le fait que si la condition est remplie, alors faites ces actions, sinon, faites d'autres actions. Le schéma général d'un opérateur conditionnel est le suivant :

Si (condition) (// Bloc d'instructions); else (// bloc d'instructions)

Écrivons tout de suite un exemple : nous allons demander un numéro à l'utilisateur et, s'il est pair, afficher un message "Ce nombre est pair", si non - "ce nombre est impair":

Si vous tapez ce code, vous verrez que tout fonctionne. Maintenant, je vais vous montrer à quel point Syntaxe JavaScript... Retirer le ";" avant le else et le code cessera immédiatement de fonctionner. Par conséquent, soyez toujours prudent. Dans l'un des articles suivants, je vous dirai comment détecter les erreurs en JavaScript.
Une instruction conditionnelle peut être insérée dans une autre. Ajoutons une vérification que l'utilisateur a entré le nombre "0".

Maintenant, je vais vous montrer comment vérifier plusieurs conditions. Il existe une chose telle qu'un "ET" logique (indiqué par les symboles &&). Il y a aussi une notion "OU" logique(indiqué par les symboles ||). Le "ET" logique a une priorité plus élevée, c'est-à-dire d'abord, cette condition sera vérifiée, puis le "OU" logique sera vérifié.
Regardons cet exemple : créons un nombre aléatoire de 1 à 10. Il faut afficher la phrase "Le nombre désiré =" et le nombre lui-même, si ce nombre n'est pas égal à 6 et supérieur à 5 ou supérieur à 1, mais moins de 4:

Dans ce cas, les nombres que vous voulez sont : 2,3,7,8,9,10. Les autres numéros ne correspondent pas à la condition.
Je souhaite également attirer votre attention sur l'opérateur "! =", qui signifie "pas égal". Enfin, lors de la rédaction des conditions, faites toujours attention au placement des parenthèses. La plupart des erreurs sont dues à leur placement incorrect.

Si la programmation était toujours linéaire, alors, probablement, elle n'existerait pas. En effet, dans presque tous les programmes, il existe diverses ramifications qui dépendent de certains facteurs externes ou internes. Ces branches sont créées en utilisant opérateurs conditionnels, dont je vais vous parler dans cet article.

Forme générale opérateur conditionnel en JavaScript tel:

Si (état) (
// Bloc d'instructions
}
autre (
// Bloc d'instructions
}

Le mot-clé vient en premier si qui indique au navigateur que l'instruction conditionnelle vient ensuite. Une condition est indiquée à l'intérieur des parenthèses, qui, en conséquence, renvoie vrai ou faux... Si l'expression entre parenthèses était vrai (en vérité), alors le premier bloc d'instructions est exécuté si la condition faux (faussement), puis le bloc d'instructions dans autre... Bloquer aussi autre est facultatif, et je vais vous donner un exemple ci-dessous.

Pratiquons maintenant dans la pratique. Résolvons le problème suivant : l'utilisateur entre un nombre, et nous affichons un message - qu'il soit plus ou moins 5 .

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

Regardons cet exemple. Avec la première ligne, nous appelons la fonction rapide qui ouvre une fenêtre vous demandant d'entrer un numéro. Ensuite, l'utilisateur entre un nombre qui est écrit dans une variable X... Et puis vient la condition, que je traduis comme suit : 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 retourne 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, on peut les mettre, et rien ne changera, cependant, ici, ils seront superflus.

Cependant, notre tâche contient une erreur importante. Si l'utilisateur saisit " 5 ", puis le message" Le nombre saisi est supérieur à cinq"Cependant, ce n'est pas tout à fait correct. Alors transformons la condition comme ceci :

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

Comme vous pouvez le voir, le bloc autre dans la première condition a été transformé. Dans le bloc autre est vérifié pour l'égalité de x et 5. Et si c'est le cas, alors un message correspondant est affiché, sinon, il est affiché que le nombre est supérieur à cinq. C'est-à-dire qu'une condition dans une condition est tout à fait normale. Notez également que je n'ai toujours pas mis les accolades comme sinon c'est un opérateur. Et lorsqu'il n'y a qu'un seul opérateur, les parenthèses sont facultatives.

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

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

Cet exemple utilise un exemple classique, lorsque nous prenons une variable et lui affectons une valeur par défaut. Et si c'est nécessaire, alors nous changeons. Dans ce cas, nous modifions la valeur par défaut si le nombre est négatif. Cependant, cet exemple aurait pu être écrit encore plus joliment :

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

En d'autres termes, nous sommes variables positif attribuer immédiatement le résultat de la comparaison X et gratter.

Parlons maintenant de ce qu'on appelle conditions difficiles... Dans les exemples ci-dessus, nous n'avons considéré que des conditions simples, cependant, il existe également d'autres conditions qui se composent de plusieurs conditions. Et il y a deux opérations utilisées ici : && - ET logique et || - OU logique... Écrivons une condition comme celle-ci :

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

Cette condition (condition complexe) donnera vrai, si et seulement si X<= 5 И x >= 0 ... Sinon, il reviendra faux.

Considérons une condition complexe avec OU logique.

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

Vous pouvez le traduire comme ceci : si X<= 5 ИЛИ x == 6 puis reviens vrai, autrement faux.

La dernière chose que je veux dire, c'est qu'il y a des conditions qui consistent à ET et OU logiques multiples, et, parfois, il faut se fatiguer la tête très sérieusement pour comprendre une telle condition.

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

JavaScript - Leçon 7. Branches de programme - Énoncé 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. On demande à l'utilisateur qui il est (homme ou femme) et, en fonction de la réponse, on affiche une liste des produits correspondants (homme ou femme). Lors de l'écriture de tels programmes, il est utilisé conditionnelle if... Sa syntaxe est la suivante :

Si B (S1)
autre (S2)

Où B est une expression d'un 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'opérateur est exécuté S1, s'il est faux, alors l'opérateur est exécuté S2... Chaîne de caractères autre (S2) peut être omis.

Je pense qu'un exemple le rendra plus clair. Disons que nous avons un formulaire où l'utilisateur entre 3 valeurs. Écrivons un script qui déterminera le maximum des nombres entrés.

Tout d'abord, écrivons le code du formulaire dans la page html :

Javascript si

Maintenant, sur la page script.js, écrivez le code de la fonction :

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

Ainsi, notre fonction prend trois valeurs de la forme, pour le maximum ( m) on prend la valeur une... Puis on compare : si la valeur b supérieur au maximum (c'est-à-dire une), alors le maximum devient b, sinon le maximum reste une(puisque l'expression entre parenthèses n'est pas vraie). Ensuite, comparez de la même manière la valeur suivante c avec le maximum. Nous affichons la réponse dans le champ de résultat ( res).

En général, un tel scénario pourrait être écrit en utilisant la méthode max objet Math 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);)

Cela signifie que la programmation est toujours 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 parenthèse lyrique. Revenons à l'instruction if et regardons un exemple plus intéressant. Écrivons un script, pendant le fonctionnement duquel, lorsque vous passez le curseur de la souris sur l'image, il 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 adaptera automatiquement l'original à ces dimensions. C'est ce que nous allons utiliser. Ayons une image comme celle-ci :

L'original fait 302 pixels de large. Nous voulons que l'image sur la page ait une largeur de 102 pixels et, au survol, qu'elle atteigne 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 la fonction javascript standard setTimeout qui appelle une fonction définie par l'utilisateur avec un laps de temps donné :

Fonction 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, augmente alors cette largeur de 10 pixels. Fonction setTimeout appelle notre fonction bigPict toutes les demi-secondes, grâce à quoi la taille de l'image augmentera tant que la condition w ne deviendra pas faux.

Pour rendre visuellement l'approximation plus fluide, essayez de diminuer le pas d'incrément et le temps d'appel de la fonction. Jouez avec ces chiffres et trouvez les meilleurs.

C'est tout pour aujourd'hui, comme devoirs, ajoutez notre script pour que l'image, lorsque le curseur de la souris sort, revienne à ses valeurs d'origine (c'est-à-dire 102 pixels). Si cela ne fonctionne pas, téléchargez