урок №5
Оператори розгалуження if в мові JavaScript

Оператори розгалуження призначені для того, щоб програма могла запускати той чи інший блок коду, в залежності від вірності true або НЕ вірності false умови.

Операторів розгалуження існує п'ять видів, в цьому уроці ми розглянемо два з них:
- оператор розгалуження if
- оператор розгалуження if else

Запускає код, якщо умова повертає true.

Як умова, в операторах розгалуження, зазвичай виступають операції порівняння або логічні операції.

Схема оператора розгалуження if, виглядає наступним чином:

If (умова) (код запуститься, якщо умова поверне true)

Наведемо приклад з оператором розгалуження if:

// створимо дві змінні var numOne; var numTwo; // дамо змінним значення numOne \u003d 5; numTwo \u003d 3; if (numOne\u003e numTwo) (alert ( "Умова повернуло true");)

В скрипті ми створили дві змінні numOne і numTwo, привласнили їм числові значення 5 і 3.

Далі створили оператор розгалуження if, який порівнює між собою значення двох змінних. Якщо операція порівняння поверне true, то запуститься код розташований між фігурними дужками. У нашому випадку, з'явиться віконце з повідомленням Умова повернуло true. Якщо операція порівняння поверне false, то нічого не станеться.

Символи подвійного слеша //, є коментарем. Після подвійного слеша можна написати будь-який текст, інтерпретатор мови JavaScript, буде сприймати його як коментар і обробляти не буде. Як ми пам'ятаємо, в мовах і, теж можна створювати коментарі.

Оператор розгалуження if else, Призначений для запуску того чи іншого блоку коду, в залежності від значення яке поверне умова: true або false

Схема оператора розгалуження if else, виглядає наступним чином:

If (умова) (код запуститься, якщо умова поверне true) else (код запуститься, якщо умова поверне false)

Наведемо приклад з оператором розгалуження if else:

Var numOne; var numTwo; numOne \u003d 5; numTwo \u003d 3; if (numOne\u003e numTwo) (alert ( "Умова повернуло true");) else (alert ( "Умова повернуло false");)

Дайте змінної numTwo, число більше ніж 5, наприклад 7, тоді умова поверне false і з'явиться віконце з повідомленням Умова повернуло false.

Повернемося до наших зайцям

Згадаймо завдання про зайців і Мазая з минулого розділу.
Без використання умов і дій, які виконуються (або не виконуються)
в залежності від умов, підрахувати кількість зайців в останній
човні буде непросто.

Додамо в фунцию lastBoatRabbits розгалуження:

var lastBoatRabbits \u003d function (totalRabbits)(If (totalRabbits \u003d\u003d\u003d 0) (// return 0;) else (var restRabbits \u003d totalRabbits% 6; if (restRabbits \u003d\u003d\u003d 0) (// return 6;) else (return restRabbits;)));

Отже, якщо зайців на річці немає, останній човен нікого не привезе (насправді, вона повернеться майже відразу ж, тому що дідусь точно знатиме, що зайців на річці немає).

А якщо кількість зайців на річці кратно 6, то останній буде човен, повністю завантажена зайцями.

Що ще можна було б поліпшити в цій програмі? Я б використовував окрему змінну,
що зберігає кількість зайців, що містяться в човні, на той випадок, якщо вдячні
зайці подарують Мазаю човен побільше. Хіба мало що раптом.

function (totalRabbits)(If (totalRabbits \u003d\u003d\u003d 0) (return 0;) else (var restRabbits \u003d totalRabbits% boatCapacity; if (restRabbits \u003d\u003d\u003d 0) (return boatCapacity;) else (return restRabbits;)));

синтаксис розгалуження

Розгалуження може мати частину, яка виконується, якщо умова невірно,
а може його не мати:

// Варіант з двома гілками: if (rainIsFalling) (stayHome (); // Якщо rainIsFalling \u003d\u003d true, виконується ця частина ) Else (walkInAPark (); // Інакше виконується ця частина } // Варіант з однієї гілкою: if (musicIsPlaying) (dance ();) // Якщо musicIsPlaying \u003d\u003d false, виконання програми просто йде далі

умови

Як умова в if може виступати вираз порівняння двох чисел або рядків,
з використанням операцій \u003d\u003d,\u003e,< , >= , <= , != и === , любая переменная, которой
було присвоєно логічне значення і просто будь-яке значення, яке в результаті роботи
if буде приведено до логічного значення.

Приклади порівняння:

10\u003e 5 // \u003d\u003e true 11< 6 // => false 5\u003e \u003d 5 // \u003d\u003e true 3! \u003d 3 // \u003d\u003e false "abc" \u003d\u003d "abc" // \u003d\u003e true "abc" \u003d\u003d\u003d "abc" // \u003d\u003e true

Змінні в якості умови:

var condition \u003d 10\u003e 5; if (condition) (console .log ( "10\u003e 5"); // Буде виконано }

Логічні операції над умовами

Кілька виразів, що повертають логічне (або приводиться до логічного) значень
можна об'єднати за допомогою логічних операцій. Такими операціями називають:
логічне І &&, логічне АБО || і логічне заперечення! .

true && true; // \u003d\u003e true false || false; // \u003d\u003e false! False; // \u003d\u003e true

Логічне І повертає true тільки в тому випадку, якщо з обох сторін від нього true,
логічне АБО повертає false тільки в тому випадку, якщо з обох боків від нього - false.
Заперечення повертає false для true і, навпаки, true для false.

За правилами Javascript значення 0, null і undefined приводяться до false.
Однак, отримуючи результат && ми отримали перший непріведённое значення, яке
приводиться до false, а отримуючи результат || - перший непріведённое значення,
яке наводиться до true:

0 && true; // \u003d\u003e 0 6 || 7 || false; // \u003d\u003e 6! 0; // \u003d\u003e true

Таким чином, функцію, що повертає кількість зайців в останній човні можна було б переписати так:

var boatCapacity \u003d 6; var lastBoatRabbits \u003d function (totalRabbits)(Return totalRabbits && (totalRabbits% boatCapacity || boatCapacity););

завдання

1. Напишіть функцію fizzbuzz, яка приймає параметр number і:
   • Для чисел, кратних трьом, повертає "Fizz"
   • Для чисел, кратних п'яти, повертає "Buzz"
   • Для чисел, кратних п'ятнадцяти (одночасно трьом і п'яти), повертає "FizzBuzz"
   • В інших випадках повертає вихідне число
2. Напишіть фунцию iGoToNorth, яка приймає параметр number і визначає, чи підходить нам передане число. Число підходить якщо воно більше 10, менше 30 і кратно 7.

Всім доброго часу доби. На зв'язку Олексій Гулинін. У минулій статті ми розібрали створення циклів в javascript . У даній статті я б хотів розповісти про умовному операторі в JavaScript. Взагалі все програмування складається з умов, і у всіх мовах програмування (JavaScript не став винятком) існує поняття умовного оператора. Сенс умовного оператора полягає в тому, що, якщо умова виконується, то робити ось ці дії, якщо не виконується - то робити інші дії. Загальна схема умовного оператора виглядає наступним чином:

If (умова) (// Блок операторів); else (// Блок операторів)

Давайте відразу напишемо який-небудь приклад: будемо запитувати число у користувача і, якщо воно парне, виводити повідомлення "Це число парне", якщо ні - "Це число непарне":

Якщо ви наберете даний код, то побачите, що все працює. Зараз я вам покажу, як важливий синтаксис в JavaScript. Приберіть знак ";" перед else і код відразу перестане працювати. Тому завжди будьте уважні. В одній з наступних статей, я розповім, як відловлювати помилки в JavaScript.
Один умовний оператор може вставлятися в інший. Давайте додамо перевірку на те, що користувач вніс число "0".

Зараз я вам покажу, як перевіряти кілька умов. Є таке поняття, як логічне "І" (позначається за допомогою символів &&). Також є поняття логічного "АБО" (Позначається за допомогою символів ||). Пріоритет у логічного "І" вище, тобто спочатку виконається перевірка цієї умови, а потім перевірка логічного "АБО".
Давайте розберемо такий приклад: нехай у нас створюється випадкове число від 1 до 10. Необхідно вивести фразу "Потрібне число \u003d" і саме число, якщо це число не дорівнює 6 і більше 5 або більше 1, але менше 4:

В даному випадку потрібними числами є: 2,3,7,8,9,10. Інші цифри не відповідають умові.
Також хочу звернути вашу увагу на оператор "! \u003d", Який означає "не дорівнює". Наостанок, при складанні умов завжди звертайте увагу на розстановку дужок. Більшість помилок пов'язано з їх неправильної розстановкою.

Якби програмування було б завжди лінійним, то, напевно, його б і не було. Адже практично в будь-якій програмі присутні різні розгалуження, які залежать від певних зовнішніх або внутрішніх факторів. Ось такі розгалуження створюються за допомогою умовних операторів, Про які в цій статті я Вам і розповім.

Загальний вигляд умовного оператора в JavaScript такий:

If (умова) (
// Блок операторів
}
else (
// Блок операторів
}

Спочатку йде ключове слово if, Яке повідомляє браузеру, що далі йде умовний оператор. Усередині дужок вказується умова, яке, відповідно, повертає true або false. Якщо вираз в дужках було true (істинно), То виконується перший блок операторів, якщо умова false (помилково), То виконується блок операторів в else. також блок else не є обов'язковим, і далі я наведу такий приклад.

Давайте тепер потренуємося вже на практиці. Вирішимо таке завдання: користувач вводить число, а ми виводимо сообщаніе - більше воно чи менше 5 .

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

Розберемо цей приклад. Першим рядком ми викликаємо функцію prompt, Яка виводить вікно з проханням ввести число. Далі користувач вводить число, яке записується в змінну x. А далі йде умова, яке я перекладаю так: Якщо x менше 5, то вивести повідомлення: "Введене число менше п'яти", інакше вивести повідомлення "Введене число більше п'яти". вираз x< 5 повертає або true ( < 5 ) або false (x\u003e \u003d 5). Також зверніть увагу, що ми не використовуємо фігурні дужки. Чому? Тому, що ми використовуємо всього один оператор (функцію alert ()). В принципі, ми можемо їх поставити, і нічого не зміниться, однак, тут вони будуть зайвими.

Однак, наша задача містить суттєву помилку. Якщо користувач введе " 5 ", То у нас може з'явитися повідомлення" Введене число більше п'яти", Однак, це не зовсім правильно. Тому давайте перетворимо умову таким чином:

If (x< 5) alert ("Введённое число меньше пяти");
else
if (x \u003d\u003d 5) alert ( "Ви ввели п'ять");
else alert ( "Введене число більше п'яти");

Як бачите, блок else в першій умові змінився. У блоці else перевіряється на рівність x і 5-ти. І якщо це так, то виводиться відповідне повідомлення, в іншому випадку, виводиться, що число більше п'яти. Тобто умова всередині умови - це абсолютно нормально. Також зверніть увагу, що я як і раніше не поставив фігурні дужки, так як if-else це один оператор. А коли тільки один оператор наявність дужок необов'язково.

Давайте розберемо ще один приклад. Створимо змінну, яка буде true, Якщо введене число позитивне, і false, Якщо число негативне.

Var x \u003d prompt ( "Введіть число");
var positive \u003d true;
if (x< 0) positive = false;
alert (positive);

В даному прикладі використовується класичний приклад, коли ми беремо якусь змінну і присвоюємо їй значення за замовчуванням. І якщо це потрібно, то міняємо. В даному випадку, ми змінюємо значення за замовчуванням, якщо число негативне. Однак, даний приклад можна було б написати ще красивіше:

Var x \u003d prompt ( "Введіть число");
var positive \u003d x< 0;

Іншими словами, ми змінної positive відразу присвоюємо результат порівняння x і нуля.

Тепер поговоримо про так званих складних умовах. У прикладах вище ми розглядали лише прості умови, однак, існують також і інші умови, які складаються з декількох умов. І тут використовуються дві операції: && - логічне І і || - логічне АБО. Давайте напишемо таку умову:

If ((x<= 5) && (x >\u003d 0)) (// блок операторів)

Дана умова (складну умову) дасть true, Тоді і тільки тоді, коли x<= 5 И x >= 0 . В іншому випадку, повернеться false.

Розглянемо складну умову з логічним АБО.

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

Перевести це можна так: якщо x<= 5 ИЛИ x == 6 , То повернути true, інакше false.

Останнє, що хочеться сказати, що бувають умови, які складаються з декількох логічних І і АБО, І, часом, доводиться дуже серйозно напружити голову, щоб розібратися в такому умови.

Ось і все, що хотілося сказати по умовним операторам в JavaScript. А далі потрібна лише практика. На жаль, але без практики, Ви ніколи не навчитеся використовувати цей оператор, без знання якого рухатися далі просто безглуздо. Так що придумайте якусь нескладну задачу (на подобі тієї, що ми вирішили вище) і вирішите її.

JavaScript - Урок 7. Розгалуження в програмі - оператор if

Дуже часто виникає ситуація, коли нам потрібно виконати будь-яку дію в залежності від певної умови. Наприклад, у нас інтернет-магазин одягу. Ми запитуємо у користувача хто він (чоловік або жінка) і в залежності від відповіді відображаємо список відповідних товарів (чоловічих або жіночих). При написанні подібних програм використовується умовний оператор if. Синтаксис у нього наступний:

If B (S1)
else (S2)

де B - вираз логічного типу, а S1 і S2 - оператори.

Працює це так: обчислюється значення виразу B, Якщо воно істинне, то виконується оператор S1, Якщо воно помилкове, то виконується оператор S2. рядок else (S2) можна опустити.

Думаю на прикладі буде зрозуміліше. Нехай у нас є форма, в яку користувач вводить 3 значення. Напишемо сценарій, який визначить максимальну з введених чисел.

Для початку напишемо в html-сторінці код форми:

Javascript if

Тепер на сторінці script.js напишемо код функції:

function maxZnach (obj) (var a \u003d 1 * obj.zn1.value; var b \u003d 1 * obj.zn2.value; var c \u003d 1 * obj.zn3.value; var m \u003d a; if (b\u003e m) m \u003d b; if (c\u003e m) m \u003d c; obj.res.value \u003d m;)

Отже, наша функція приймає три значення з форми, за максимальне ( m) Ми приймаємо значення a. Потім ми порівнюємо: якщо значення b більше максимального (тобто a), То максимальним стає b, В іншому випадку максимальним залишається a (Тому що вираз в дужках не є істинним). Далі аналогічно порівнюємо таке значення c з максимальним. Відповідь виводимо в поле результату ( res).

Взагалі такий сценарій можна було б написати, використовуючи метод max об'єкта Math, Розглянутого в попередньому уроці, і код вийшов би коротше:

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

Це я до того, що програмування все-таки процес творчий, і одну задачу можна вирішити різними способами. Завдання ж програміста знайти найбільш оптимальний варіант. Але це так, ліричний відступ. Повернемося до умовного оператору if і розглянемо більш цікавий приклад. Напишемо сценарій, вчасно роботи якого, при наведенні курсору миші на зображення, воно буде збільшуватися, створюючи ефект наближення.

Як ви пам'ятаєте в HTML можна задати розмір вставляється зображення. Якщо задані розміри більше або менше оригіналу, то браузер автоматично піджене оригінал під ці розміри. Цим ми і скористаємося. Нехай у нас є ось така картинка:

Ширина оригіналу 302 пікселя. Ми ж хочемо, щоб на сторінці картинка мала ширину 102 пікселя, а при наведенні курсору, збільшувалася до 302 пікселів. З html-сторінкою все зрозуміло:

Javascript if

А в нашій функції, крім умовного оператора, ми скористаємося ще стандартною функцією javascript setTimeout, Яка викликає призначену для користувача функцію з заданим проміжком часу:

Function bigPict () (var w \u003d document.tigr.width; if (w Таким чином, функція перевіряє ширину картинки ( width) І, якщо вона менше 302 пікселів, то збільшує цю ширину на 10 пікселів. функція setTimeout викликає нашу функцію bigPict кожні півсекунди, завдяки чому розмір картинки буде збільшуватися до тих пір, поки умова w не стане хибним.

Щоб візуально зробити наближення більш плавним спробуйте зменшити крок збільшення ширини і час звернення до функції. Пограйте з цими числами і знайдіть найбільш оптимальні.

На сьогодні все, в якості домашнього завдання допишіть наш сценарій так, щоб картинка при виході курсора миші приймала вихідні значення (тобто 102 пікселя). Якщо не вийде, то скачайте