Контакти

Javascript оператор дозволяє задати необхідні розгалуження програми. JavaScript: if і else - інструкції для умов. Логічні операції над умовами

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

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

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

Умовний оператор JavaScript

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

Умовний оператор JavaScript

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

Умовний оператор JavaScript

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

У повсякденному житті часто необхідно прийняти якесь НЕ-будь рішення, в залежності від якого то умови. Наприклад, якщо на вихідні погода буде теплою, то ми поїмо на море, інакше, якщо буде похмуро, то посидимо вдома.

У програмуванні це теж зустрічається дуже часто. Для цього існують два умовних операторів, це if-else і switch-case. У цій статті я Вам розповім про оператора if-else, а в наступній статті про switch-case.

Синтаксис умовного оператора if-else наступний:


Якщо умова істина (true), то виконується код з блоку if, інакше, якщо умова брехня, то виконується код з блоку else.

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

Var money \u003d 35000; // Припустимо у нас є 35 000 євро // Машину яку ми хочемо купити коштує 50 000 євро. І виникає така умова if (money\u003e 50000) (document.write ( "Ми можемо купити автомобіль");) else (document.write ( "Недостатньо грошей для покупки машини");)

Зберігаємо документ, відкриваємо його в браузері і бачимо, що на сторінці вивелося таке повідомлення "Недостатньо грошей для покупки машини". Якщо ж у нас було б більше 50 000 євро, то виконався б код з блоку if. Якби у нас було б рівно 50 000 євро, то ми також не змогли б купити автомобіль, тому що 50 000 не більш 50 000. Для того щоб умова в даному випадку було істина, то потрібно написати знак більше або дорівнює (\u003e \u003d) .

Зауваження! Логічна операція одно пишеться двома знаками рівності (\u003d\u003d). Також присутній і логічна операція менше або дорівнює (

використання фігурних дужок

Якщо присутній тільки один оператор то фігурні дужки ставити необов'язково, якщо в блоці більше ніж один оператор, то фігурні дужки потрібні обов'язково.

Приклад наведений вище, буде прекрасно працювати і без фігурних дужок, так як в обох блоках знаходяться тільки по одному оператору.

Усередині if можна написати будь-які логічні операції, Будь то вони прості або складні. Можна використовувати і оператори AND (&&) та OR (||).

Зауваження! Присутність блоку else, не є обов'язковим.

Наприклад, якщо a дорівнює b, і c дорівнює d, то виводимо відповідне повідомлення, інакше якщо відсутня блок else, то просто йдемо далі, до наступної сходинці.

Var a \u003d 4, b \u003d 4, c \u003d 8, d \u003d 8; if ((a \u003d\u003d b) && (c \u003d\u003d d)) document.write ( "a дорівнює b І c дорівнює d"); document.write ( "Наступна сходинка коду");

Оператор if - else if - else

Після блоку if, може послідувати один і більше блоків else if, і в кінці вже блок else. Це зручно в разі, коли потрібно використовувати більше ніж одну умову.


Для кращого розуміння візьмемо якийсь приклад з повсякденного життя. Наприклад, у нас є певний у розеток. Якщо у нас в кімнаті тільки одна розетка, то ми можемо підключити тільки один пристрій, якщо дві розетки то ми можемо підключити дві пристрої і якщо більше, то ми можемо підключити до електричної мережі, всі пристрої з дому.

Тепер перейдемо до програмування.

Var socket \u003d 2; // Кількість розеток в будинку if (socket \u003d\u003d 1) document.write ( "

Ми можемо підключити тільки один пристрій

"); Else if (socket \u003d\u003d 2) (document.write ("

Ми можемо підключити тільки дві пристрої

"); Document.write ("

Наприклад телевізор і ноутбук

");) Else (document.write ("

Ми можемо підключити до електричної мережі всі пристрої з дому

"); }

Залежно від значення змінної socket, спрацює той чи інший блок коду. Як Ви вже напевно зрозуміли, що якщо socket дорівнює 1, то спрацює перший блок коду. Якщо socket дорівнює 2, то спрацює другий блок коду і якщо socket має будь-яке інше значення (навіть негативне число) то спрацює третій блок коду.

Скорочена запис if else

Скорочену запис можна використовувати в разі, коли в залежності від певного умови, змінна може отримати ту чи іншу значення.


Наприклад, якщо значення змінної a більше значення змінної b, то в змінну x запишемо таке повідомлення, "Змінна a більше змінної b", інакше запишемо що "Мінлива a менше змінної b".

Var a \u003d 50, b \u003d 100, x; x \u003d (a\u003e b)? "

Мінлива a більше змінної b

" : "

Мінлива a менше змінної b

"; // Виводимо отриманий результат document.write (x);

Ось і все про що я хотів Вам сказати в цій статті. Умовний оператор if-else використовується, ніж в кожному скрипті, тому дуже важливо його знати і розуміти. У наступній статті я Вам розповім про ще один умовному операторі switch-case.

умовні оператори

Умовні оператори дозволяють припустити або виконати інші оператори в залежності від значення зазначеного вирази. Ці оператори є точками прийняття рішень в програмі, і іноді їх також називають операторами «розгалуження».

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

Оператор if / else

Оператор if - це базовий керуючий оператор, що дозволяє інтерпретатору JavaScript приймати рішення або, точніше, виконувати оператори в залежності від умов. Оператор if має дві форми. перша:

if (вираз) оператор

У цій формі спочатку обчислюється вираз. Якщо отриманий результат є істинним, то оператор виконується. Якщо вираз повертає помилкове значення, то оператор не виконується. наприклад:

If (username \u003d\u003d null) // Якщо змінна username дорівнює null або undefined username \u003d "Alex"; // визначити її

Зверніть увагу, що дужки навколо умовного виразу є обов'язковою частиною синтаксису оператора if.

Друга форма оператора if вводить конструкцію else, яка виконується в тих випадках, коли вираз повертає помилкове значення. Її синтаксис:

if (вираз) оператор1 else оператор2

Ця форма виконує оператор1, якщо вираз повертає істинне значення, і оператор2, якщо вираз повертає помилкове значення. наприклад:

If (n \u003d\u003d 1) console.log ( "Отримано 1 нове повідомлення."); else console.log ( "Отримано" + n + "нових повідомлень.");

Оператор else if

Оператор if / else обчислює значення виразу і виконує той чи інший фрагмент програмного коду, в залежності від результату. Але що якщо потрібно виконати один з багатьох фрагментів? Можливий спосіб зробити це полягає в застосуванні оператора else if. Формально він не є самостійним оператором JavaScript; це лише поширений стиль програмування, що полягає в застосуванні повторюваного оператора if / else:

If (n \u003d\u003d 1) (// Виконати блок 1) else if (n \u003d\u003d 2) (// Виконати блок 2) else if (n \u003d\u003d 3) (// Виконати блок 3) else (// Якщо ні один з попередніх операторів else не був виконаний, виконати блок 4)

У цьому фрагменті немає нічого особливого. Це просто послідовність операторів if, де кожен оператор if є частиною конструкції else попереднього оператора.

оператор switch

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

Оператор switch призначений саме для таких ситуацій. За ключовим словом switch слід вираз в дужках і блок коду в фігурних дужках:

switch (вираз) (інструкції)

Однак повний синтаксис оператора switch складніший, ніж показано тут. Різні місця в блоці позначені ключовим словом case, За яким слід вираз і символ двокрапки.

Коли виконується оператор switch, він обчислює значення виразу, а потім шукає мітку case, що відповідає цьому значенню (відповідність визначається за допомогою оператора ідентичності \u003d\u003d\u003d). Якщо мітка знайдена, виконується блок коду, починаючи з першої інструкції, наступної за міткою case. Якщо мітка case з відповідним значенням не знайдено, виконання починається з першої інструкції, наступної за спеціальною міткою default:. Якщо мітка default: відсутній, блок оператора switch пропускається цілком.

Роботу оператора switch складно пояснити на словах, набагато зрозуміліше виглядає пояснення на прикладі. Наступний оператор switch еквівалентний повторюваним операторам if / else, показаним в попередньому прикладі:

Switch (n) (case 1: // Виконується, якщо n \u003d\u003d\u003d 1 // Виконати блок 1 break; // Тут зупинитися case 2: // Виконується, якщо n \u003d\u003d\u003d 2 // Виконати блок 2 break; / / Тут зупинитися case 3: // Виконується, якщо n \u003d\u003d\u003d 3 // Виконати блок 3 break; // Тут зупинитися default: // якщо все інше не підходить ... // Виконати блок 4 break; // Тут зупинитися )

Зверніть увагу на ключове слово break в кінці кожного блоку case. Оператор break призводить до передачі управління в кінець оператора switch і продовження виконання операторів, які слідують далі. Конструкції case в операторі switch задають тільки початкову точку виконуваного програмного коду, але не задають жодних кінцевих точок.

У разі відсутності операторів break оператор switch почне виконання блоку коду з міткою case, відповідної значенням вирази, і продовжить виконання операторів до тих пір, поки не дійде до кінця блоку. У рідкісних випадках це корисно для написання програмного коду, який переходить від однієї мітки case до наступної, але в 99% випадків слід акуратно завершувати кожен блок case оператором break. (При використанні switch всередині функції замість break можна використовувати оператор return. Обидва цих оператора служать для завершення роботи оператора switch і запобігання переходу до наступної мітці case.)

Нижче наводиться більш практичний приклад використання оператора switch, він перетворює значення в рядок способом, що залежать від типу значення:

Function convert (x) (switch (typeof x) (// Перетворити число в шістнадцяткове ціле case "number": return x.toString (16); // Повернути рядок, укладену в лапки case "string": return "" "+ x + "" "; // Будь-який інший тип перетворюється звичайним способом default: return x.toString ();)) console.log (convert (тисяча шістьдесят сім)); // Результат "42b"

Зверніть увагу, що в двох попередніх прикладах за ключовими словами case слідували числа або рядкові літерали. Саме так оператор switch найчастіше використовується на практиці, але стандарт ECMAScript дозволяє вказувати після case довільні вирази.

Оператор switch спочатку обчислює вираз після ключового слова switch, а потім вираження case в тому порядку, в якому вони вказані, поки не буде знайдено збігається значення. Факт збігу визначається за допомогою оператора ідентичності \u003d\u003d\u003d, а не за допомогою оператора рівності \u003d\u003d, тому висловлювання повинні збігатися без будь-якого перетворення типів.

Оскільки при кожному виконанні оператора switch обчислюються не всі вирази case, слід уникати використання виразів case, що мають побічні ефекти, такі як виклики функцій і присвоювання. Найбезпечніше обмежуватися в виразах case константними виразами.

Як пояснювалося раніше, якщо жодне з виразів case не відповідає вираженню switch, оператор switch починає виконання оператора з міткою default :. Якщо мітка default: відсутній, тіло оператора switch повністю пропускається. Зверніть увагу, що в попередніх прикладах мітка default: вказана в кінці тіла оператора switch після всіх міток case. Це логічне і просте місце для неї, але насправді вона може розташовуватися в будь-якому місці всередині оператора switch.

У цій статті розглянемо умовні і логічні оператори мови JavaScript.

Умовні оператори JavaScript

умовні оператори - це оператори мови JavaScript (ECMAScript), які в залежності від деякої умови дозволяють виконати одну або кілька певних інструкцій.

Форми умовних операторів в JavaScript:

  • умовний оператор if (з однією гілкою);
  • умовний оператор if ... else (з двома гілками);
  • умовний оператор else if ... (з декількома гілками);
  • тернарний оператор (?:);
  • оператор вибору switch.

Умовний оператор if

Синтаксис оператора if:

If (умова) інструкція

Умовний оператор if складається з:

  • ключового слова if;
  • умови (вираження в круглих дужках), які мають рівнятися true або false (або бути приведено до одного з цих значень);
  • інструкції, яку потрібно виконати, Якщо умова є true або приведено до нього.

наприклад:

If (true) count \u003d 4;

У цьому прикладі в якості умови використовується значення true. Це означає, що інструкція count \u003d 4 буде виконуватися завжди. Даний приклад просто наведено для пояснення принципу роботи оператора if, тому що він позбавлений будь-якого сенсу.

Наприклад, збільшимо значення змінної votes на 1, якщо вона (її тип) є числом:

If (typeof votes \u003d\u003d\u003d "number") votes ++;

Якщо необхідно виконати декілька інструкцій, то їх необхідно помістити в фігурні дужки:

If (typeof votes \u003d\u003d\u003d "number") (votes ++; console.log ( "Число голосів:" + votes);)

If (typeof votes \u003d\u003d\u003d "number") (votes ++;)

Оператор if ... else

Оператор if ... else використовується, коли необхідно при істинності умови виконати одні інструкції, а при хибності - інші.

синтаксис:

If (умова) (одне або кілька інструкцій (будуть виконуватися, коли умова одно true або приведено до true)) else (одне або кілька інструкцій (будуть виконуватися, коли умова одно false або приведено до false))

Наприклад, виведемо в консоль повідомлення про те, чи є число парних чи ні:

If (number% 2) (console.log ( "Число непарне!");) Else (console.log ( "Число парне!");)

Правило приведення умови до true або false

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

Зміст даного правила: будь-який вираз є true, крім наступних значень:

  • false (брехня);
  • "" Або "" (порожній рядок);
  • NaN (спеціальний числовий тип даних «не числом»);
  • 0 (число «нуль»);
  • null ( «пусте» значення);
  • undefined ( «невизначений» значення).

Наприклад, виведемо в консоль браузера вітальне повідомлення, в залежності від того яке значення зберігається в змінної nameUser:

If (nameUser) (console.log ( "Привіт," + name + "!");) Else (console.log ( "Привіт, гість!");)

Якщо змінна nameUser буде містити порожній рядок, то за правилом брехні, вона буде приведена до значення false. Отже, в консоль буде виведено повідомлення «Привіт, гість!» .

А якщо, наприклад, змінна nameUser буде містити рядок «Тимур», то вираз в умови буде приведено до значення true. В результаті, в консолі відобразиться повідомлення «Привіт, Тимур!» .

Оператор else if ... (кілька умов)

синтаксис:

If (условіе1) (інструкції 1) else if (условіе2) (інструкції 2) else if (условіе3) (інструкції 3 // ...) else if (условіеN) (інструкції N) else (інструкції, які будуть виконані, якщо ні одна з умов не дорівнює true або не приведеним до цьому значенню)

Умовний (тернарний) оператор (? :)

тернарний оператор - оператор JavaScript, який можна використовувати, коли необхідно в залежності від умови виконати одну з двох заданих виразів.

синтаксис:

Умова? вираження1: вираженіе2

Тернарний оператор складається з трьох операндів, які поділяються за допомогою символів? і:. Умова тернарного оператора задається в першому операнде. Його також можна взяти в дужки. Якщо умова одно true або буде приведено до цього значення буде виконано вираження1, інакше - вираз 2.

наприклад:

(Number\u003e 10)? console.log ( "Число більше 10!"): console.log ( "Число менше або дорівнює 10");

В JavaScript допустимі множинні тернарние оператори (? :):

Var dayNumber \u003d new Date (). GetDay (); day \u003d (dayNumber \u003d\u003d\u003d 0)? "Воскресіння": (dayNumber \u003d\u003d\u003d 1)? "Понедельник": (dayNumber \u003d\u003d\u003d 2)? "Вiвторок": (dayNumber \u003d\u003d\u003d 3)? "Среда": (dayNumber \u003d\u003d\u003d 4)? "Четвер": (dayNumber \u003d\u003d\u003d 5)? "П'ятниця": (dayNumber \u003d\u003d\u003d 6)? "Суббота": "Невідомий день тижня"; console.log ( "Сегодня" + day.toLowerCase () + ".");

Вищенаведений приклад, але з використанням множинної записи оператора if ... else:

Var dayNumber \u003d new Date (). GetDay (); if (dayNumber \u003d\u003d\u003d 0) (day \u003d "Воскресенье";) else if (dayNumber \u003d\u003d\u003d 1) (day \u003d "Понедельник";) else if (dayNumber \u003d\u003d\u003d 2) (day \u003d "Вiвторок";) else if (dayNumber \u003d\u003d\u003d 3) (day \u003d "Среда";) else if (dayNumber \u003d\u003d\u003d 4) (day \u003d "Четвер";) else if (dayNumber \u003d\u003d\u003d 5) (day \u003d "П'ятниця"; ) else if (dayNumber \u003d\u003d\u003d 6) (day \u003d "Суббота";) else (day \u003d "Невідомий день тижня";) console.log ( "Сегодня" + day.toLowerCase () + ".");

оператор switch

Оператор switch призначений для виконання одного варіанта інструкцій з декількох в залежності від значення виразу. Вибір того чи іншого варіанта визначається за допомогою суворого рівності результату виразу значенням випадку (case).

Синтаксис оператора switch:

Switch (вираз) (case значення1: // ... інструкції, які будуть виконані, якщо результат обчислення виразу дорівнює «значення1» break; // необов'язкова інструкція (якщо її не використовувати, то буде виконана наступна команда оператора switch) case значення2: // ... інструкції, які будуть виконані, якщо результат обчислення виразу дорівнює «значення2» break; // необов'язкова інструкція (якщо її не використовувати, то буде виконана наступна команда оператора switch) // ... case значеніеN: //. .. інструкції, які будуть виконані, якщо результат обчислення виразу дорівнює «значеніеN» break; // необов'язкова інструкція (якщо її не використовувати, то буде виконана наступна команда оператора switch) default: // інструкції, які будуть виконані, якщо результат виразу не дорівнює не одному зі значень)

Ключове слово default є необов'язковим. Воно використовується, коли необхідно поставити інструкції, які потрібно виконати, якщо результат виразу буде не дорівнює жодному значенню варіанту (case).

Інструкція break є необов'язковою. Вона призначена для переривання виконання оператора switch і передачі управління інструкції, що йде після нього.

Наприклад, виведемо повідомлення в консоль браузера про кількість цукерок:

Var countCandyBoys \u003d 1, countCandyGirls \u003d 2, message; switch (countCandyBoys + countCandyGirls) (case 1: message \u003d "Одна цукерка"; break; case 2: case 3: message \u003d "Дві або три цукерки"; break; case 4: message \u003d "Чотири цукерки"; break; default: message \u003d "Не одна, не дві, не три і не чотири цукерки";) // виведемо повідомлення в консоль console.log (message);

У наведеному вище прикладі обчислене вираз дорівнює 3. Отже, буде виконано інструкції message \u003d "Дві або три цукерки" і break. Інструкція break перерве подальше виконання оператора switch і передасть управління інструкції, що йде після нього, тобто console.log (message). Вона виведе в консоль повідомлення «Дві або три цукерки».

Наприклад, виведемо виведемо в консоль поточний день тижня:

Var day \u003d ""; switch (new Date (). getDay ()) (case 0: day \u003d "Воскресенье"; break; case 1: day \u003d "Понедельник"; break; case 2: day \u003d "Вiвторок"; break; case 3: day \u003d "Среда"; break; case 4: day \u003d "четвер"; break; case 5: day \u003d "п'ятниця"; break; case 6: day \u003d "Суббота"; break; default: day \u003d "Невідомий день тижня";) console.log ( "Сегодня" + day.toLowerCase () + ".");

Приклад, в якому не використовується інструкція break:

Var result \u003d "success"; switch (result) (case "success": console.log ( "Успіх!"); case "invalidCaptcha": console.log ( "Невірна капча!"); default: console.log ( "Помилка!");)

У цьому прикладі вираз оператора switch одно success. Отже, буде виконана інструкція console.log ( "Успіх!"), Яка виведе повідомлення «Успіх!» в консоль. Але так як після неї немає інструкції break, то виконання скрипта буде продовжено в наступному варіанті. Таким чином, інструкції будуть виконуватися до тих поки поки на шляху не зустрітися break або не буде досягнутий кінець оператора switch. В результаті виконання цього прикладу в консоль будуть виведені 3 повідомлення: «Успіх!» , «Невірна капча!» і «Помилка!» .

У деяких випадках може вимагатися саме така поведінка, але не в цьому. Тут просто допущена помилка.

Виправлений варіант прикладу:

Var result \u003d "success"; switch (result) (case "success": console.log ( "Успіх!"); break; case "invalidCaptcha": console.log ( "Невірна капча!"); break; default: console.log ( "Помилка!" );)

Логічні оператори

В JavaScript розрізняють такі логічні оператори:

  • && - логічне "І";
  • || - логічне "АБО";
  • ! -логічні "НЕ".

Якщо в логічному вираженні operand1 && operand2 використовуються булеві значення, то результатом цього виразу буде значення true, якщо кожен з них дорівнює true; інакше значенням цього виразу буде значення false.

False && false // false true && false // false false && true // false true && true // true

Якщо в логічному вираженні operand1 && operand2 використовуються не булеві значення, то результатом цього виразу буде operand1, якщо його можна привести до false; інакше результатом цього виразу буде operand2.

5 && 0 // 0 1 && 5 // 5 "рядок" && undefined // undefined "рядок1" && "строка2" // "строка2"

Якщо в логічному вираженні operand1 || operand2 використовуються булеві значення, то результатом цього виразу буде значення true, якщо хоча б один з них дорівнює true; інакше значенням цього виразу буде значення false.

False || false // false true || false // true false || true // true true || true // true

Якщо в логічному вираженні operand1 || operand2 використовуються не булеві значення, то результатом цього виразу буде operand1, якщо його можна привести до true; інакше результатом цього виразу буде operand2.

5 || 0 // 5 1 || 5 // 1 "рядок" || undefined // "рядок" "рядок1" || "Строка2" // "рядок1"

Результатом логічного виразу! Operand1 буде значення true, якщо operand1 одно false або його можна привести до цього значення; інакше результатом цього виразу буде значення false.

False // true! True // false! "Рядок" // false! 5 // false "

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 пікселя). Якщо не вийде, то скачайте



Сподобалася стаття? поділіться їй