< > ↑ Вгору

1. Умовні оператори мови javaScript

У javaScript умовy здійснює оператор  if  

Розглянемо синтаксис умовного оператора:


Синтаксис:

if (умова)
{
    // якщо істина
    operator1;
    operator2;
}
else
{
    // якщо брехня
    operator3;
    operator4;
}

Приклад:

var a = prompt('Введіть найбільшу цифру в 8-ковій системі числення');
if (a != 7)
{
    // якщо істина
    alert('Невірно!');
}
else
{
    // якщо брехня
    alert('Вірно!');
}



В якості умови може використовуватися логічний вираз або змінна.

Блок операторів укладений в  {}  - це складовий оператор, що поєднує кілька операторів в конструкції. Дужки можна опустити, якщо всередині конструкції тільки один оператор.

Частина конструкції після службового слова  else  - необов'язкова.

В умові використовуються наступні операції відносин:

 <    Менше
 >    Більше
 <=    Менше або дорівнює
 >=    В javascript більше або дорівнює
 ==    Дорівнює (порівняння)
 !=    В javascript не дорівнює
  ===     Порівняння з урахуванням типу (ідентичність) 

Важливо:  Ідентичність ( === ) вимагає збігу типу і значення змінної, тоді як для рівності ( == ) досить тільки співпадаючих значень

Як зрозуміти ідентичність змінних?

  1. якщо значення мають різні типи, то вони не ідентичні;
  2. якщо значення є числами, мають однакові значення і не є значеннями  NaN  - вони ідентичні.

Для оператора рівності варто використовувати символ « == »

//num1 == num2

Для оператора ідентичності варто використовувати « === »

//num1 === num2

Розглянемо простий приклад з використанням оператора мови javascript  if :

Приклад 1: виводити в модальне вікно «а більше 1», якщо запитана змінна a дійсно більше одиниці, інакше виводити повідомлення «а не більше 1»

Рішення:

  • Створіть веб-сторінку з html-скелетом і тегом script:
  • У коді для javascript iніціалізуйте змінну a методом prompt() - модального вікна для введення:

    var a = prompt("Введіть число");


  • Перетворіть змінну в числовий тип:

    a = parseInt(a);


  • Введіть умову перевірки, видавши результат за допомогою методу alert():

    if (a > 1)
        alert("а більше 1")
    else
        alert("а не більше 1");


    Пояснення: Якщо a > 1, то буде виконаний перший оператор alert, в іншому випадку виконається другий оператор alert. Можна те ж саме записати з операторними дужками:

    if (a > 1) {
        alert("а більше 1")
    }
    else
    {
        alert("а не більше 1");
    }


  • Протестуйте сценарій в браузері.

Питання для самоконтролю:

  1. Який синтаксис умовного оператора if?
  2. У яких випадках можна опускати фігурні дужки {} в умовному операторі?

Завдання Js 3_1. Знайдіть помилки в наступному фрагменті коду:

var a = prompt("Введіть число 11", "0");
if (a = 11) {
    document.write("Введене значення вірнe.");
}


Завдання Js 3_2. Запитувати у користувача вік (метод  prompt () ).
Залежно від введеного віку видавати повідомлення «Ви занадто молоді» (в разі введеного значення менше 20 років) або «Ви нам підходите» (в разі введеного значення більше або дорівнює 20 рокам).
Підсумкове повідомлення виводити за допомогою методу  document.write() .

Кілька умов або складні умови

Тепер розглянемо використовувані в javascript логічні оператори для побудови складних (наприклад, подвійних) умов:

 символ  сенс приклад
 !    в javascript заперечення НЕ   if (!x)  
 &&   в javascript І   if (x>1 && x<5)  
 ||   в javascript АБО  if (x>1 || y>1)  

Що значить if (a)?

У більшості мов програмування також як і в javascript використовується так зване "правило брехні". Розглянемо приклад:

var a=1;
if (a)
    alert(a);

Як в даному прикладі вчинить інтерпретатор? як буде перевіряти умову, що складається просто з однієї змінної? - За правилом брехні:


ПОМИЛКОВО:

  • Null значення
  • Undefined
  • NaN
  • 0
  • Порожній рядок ("")
  • false


Приклад використання "правила брехні" з рядковою змінною:

var s="";
if (s)
    alert("рядок не порожній");
else
    alert("рядок порожній");



Приклад 2: Запитувати у користувача ім'я (метод javascript  prompt ). Якщо ім'я введено, то виводити "Привіт, ім'я!". Якщо користувач не ввів ім'я або клацнув  cancel  (значення  null ) виводити "Привіт, незнайомцю!"

Рішення:

  • Створіть веб-сторінку з html-скелетом і тегом script:
  • У коді для javascript iніціалізуйте змінну name методом prompt() - модального вікна для введення:

    var name = prompt("Введіть число");


  • Введіть умовний оператор для обробки клацання по кнопці cancell і для порожнього введення:

    if (!name || name=="null")
        document.write("Привіт, незнайомцю!")

    Пояснення: перевірка  !name  за правилом брехні означає, що рядкова змінна порожня (тобто користувач нічого не ввів); перевірка  name=="null"  означає, що користувач клацнув по кнопці Скасування (cancell);  ||  - означає логічне АБО, тобто хоча б одна з умов має бути істинним

  • Для блоку Інакше (else) організуйте вивід відповідного повідомлення із значенням імені:

    else
        document.write("Привіт, ", name,"!");


  • Протестуйте сценарій в браузері.

Завдання Js 3_3. Написати програму, яка по паролю визначає рівень доступу співробітника до секретної інформації в базі даних.
Доступ до бази даних мають співробітники, розбиті на три групи за рівнями доступу. Вони мають такі паролі:

  • 9583, 1747 - видавати повідомлення "доступні модулі баз А, В і С";
  • 3331, 7922 - видавати повідомлення "доступні модулі баз В і С";
  • 9455, 8997 - видавати повідомлення "доступний модуль бази С".

Виводити доступні модулі на запит.


Питання для самоконтролю:

  1. Які логічні оператори існують для складних умов (І, АБО, НЕ)?
  2. Що означає «правило брехні», і в яких випадках воно використовується?

2. Тернарний оператор javaScript

Тернарний оператор мови javascript - це скорочена форма конструкції  if ... else .

Оператор включає в себе три операнда:

(1. умова  ?   2. виконати, якщо умова істинна  :   3. виконати, якщо умова помилкова)


Cинтаксис:

(логіч.вираз) ? вираз 1 : вираз 2



Пояснення: У випадку істинності умови виконується те, що стоїть до знака  : , в разі хибності умови - виконується то, що стоїть після знака  : .

Розглянемо синтаксис тернарного оператора на прикладі:

Приклад:

str1 = (y%2) ? "непарне" : "парне"


Приклад 3: Змінній  b  присвоювати значення  100  в разі істинності умови  a > 1  і присвоювати  200  в разі істинності умови  a <= 1 . Виводити значення змінної  b .

Рішення:

  • Створіть веб-сторінку з html-скелетом і тегом script.
  • Додайте наступний код:

    var a = 10;
    var b = (a>1) ? 100 : 200;
    alert(b);

    Пояснення: Якщо умова a>1 істинна, то змінній b привласнити значення 100, інакше змінній b привласнити значення 200.

  • Протестуйте сценарій в браузері.

Завдання Js 3_4. Доповнити код: оголошено 3 локальні змінні з використанням ключового слова  var . Необхідно в змінну
 max  присвоїти значення наступного тернарного оператора: якщо  a  більше  b , то повертаємо  a , інакше повертаємо  b .
Фрагмент коду:

var a = 1, b = 2, max = 0;
...
document.write(max);


Завдання Js 3_5. Виправте код з оператором IF на тернарний оператор:
Код:

if (a * b < 6) {
    result = 'Мало';
} else {
    result = 'Багато';
}


Питання для самоконтролю:

  1. Який синтаксис тернарного оператора?
  2. Скільки аргументів у тернарного оператора?

3. Оператор перемикання в javaScript - switch

Оператор  switch  javascript служить для перевірки змінної на безліч значень:


Синтаксис:

switch (змінна або вираз) {
case варіант1:
    //..блок операторів ..
    break
case варіант2:
    //..блок операторів ..
    break
    default:
    //..блок операторів ..
}




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

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


Важливо: Оператор  break  обов'язковий після кожного розглянутого значення змінної
(після кожного case); якщо його не використовувати, то будуть виведені всі, розташовані нижче оператори

Порівняємо з оператором IF:

var a = 2;
switch(a)
{
    case 0: // if (a === 0)
    case 1: // if (a === 0)
        alert("Нуль або один"); // тоді виводимо ...
        break;
    case 2: // if (a === 2)
        alert("Два"); // тоді виводимо ...
        break;
    default: // else
        alert("Багато"); // інакше виводимо ...
}

Як згрупувати кілька варіантів?

Для виконання одних і тих же операторів можливо угруповання декількох case.
Як в прикладі вище:

...
case 0:
case 1:
    alert("Нуль або один");
    break;
...

При  a = 0  і  a = 1  виконується один і той же оператор:  alert ("Нуль або один");


Приклад 4: Приклад 4: Запитувати у користувача ввести колір. Виводити переклад на англійську мову введеного кольору. Для кольору "синій" і "блакитний" видавати одне і те ж значення.

Рішення:

  • Створіть веб-сторінку з html-скелетом і тегом script.
  • Ініціалізуйте змінну color значенням, введеним користувачем в модальне вікно:

    var color = prompt("Який колір?");


  • Перевірте значення змінної за допомогою конструкції switсh, виводячи на кожне значення - відповідний переклад:

    switch (color) {
        case "красный":
            alert("red");
            break;
        case "зеленый":
            alert("green");
            break;
            // ...

    Пояснення: Якщо змінна color має значення "червоний", то вивести в модальне вікно переклад - "red" і вийти з конструкції ( break; ). Якщо змінна color має значення "зелений", то вивести в модальне вікно переклад - "green" і вийти з конструкції
    ( break; ).

  • Для кольорів "синій" і "блакитний" виконайте групування:

            // ...
        case "синій":
        case "блакитний":
            alert("blue");
            break;
            // ...

    Пояснення: Якщо змінна color має значення "синій" або змінна color має значення "блакитний", то вивести в модальне вікно переклад - "blue" і вийти з конструкції ( break; ).

  • Організуйте вивід для тих кольорів, які не передбачені програмою:

            // ...
        default:
            alert("y нас немає відомостей з даного кольору")
    }       // конец switch


  • Протестуйте сценарій в браузері.

Завдання Js 3_6. Знайдіть і виправте помилки в наступному фрагменті коду:

var number = prompt("Введите число 1 или 2:");
switch (number) {
case "1"
    {
        document.write("Один");
    };
    break;
case "2"
    {
        document.write("Два");
    };
    break;
default
    {
        document.write("Ви ввели значення, відмінне від 1 і 2");
    };
}


Завдання Js 3_7. Що виведеться на екрані при виконанні наступного коду ?:

var value = "2";
switch (value) {
case "1":
case "2":
case "3":
document.write("Hello");
break;
case "4":
case "5":
document.write("World");
default:
document.write("Error");
}


Завдання Js 3_8. У користувача запитувати число - кількість ворон на гілці. Залежно від введеного числа (не більше 10), виводити повідомлення:

  • На гілці сидить 1 ворона
  • На гілці сидить 4 ворони
  • На гілці сидить 10 ворон


Pекомендації:

  1. Залежно від введеного числа, змінюється закінчення у слова "ворона".
  2. Для перевірки використовувати оператор  Switch  javascript.
  3. Збережіть дану сторінку в папці результатів (вона стане в нагоді для подальших робіт).

Питання для самоконтролю:

  1. В якому випадку доцільно в якості умовного оператора використовувати конструкцію switch?
  2. Для чого служить блок  default  в операторі switch?
  3. Чи обов'язково використання оператора  break  в конструкції switch?
  4. Як здійснюється угруповання для декількох варіантів значень в операторі switch?

4. Циклічні оператори мови javaScript - For


Синтаксис:

for(початкове значення лічильника; умова; приріст лічильника)
    {
        //..блок операторів..
    }




Важливо: Цикл в javascript  for  використовується, коли заздалегідь відомо, скільки разів повинні повторитися циклічні дії (скільки ітерацій у циклу)


  • В якості  початкового значення лічильника ітерацій  використовується вираз присвоювання: наприклад,  i = 0  - лічильник циклу починається з нуля:

    for(var i=0; умова; приріст лічильника)
        {
            //..блок операторів..
        }


  • В якості  збільшення лічильника  вказується крок, з яким повинен збільшуватися лічильник: наприклад,  i ++   вказує на те, що кожна ітерація циклу супроводжуватиметься його збільшенням на 1:

    for(var i=0; умова; i++)
        {
            //..блок операторів..
        }


  •  Умова циклу  - це і є кінцеве значення лічильника: наприклад,  i<10  - лічильник, досягши значення 10, зупиняє цикл:

    for(var i=0; i<10; i++)
        {
            //..блок операторів..
        }

Розглянемо приклад використання циклу for в javascript:

Приклад 5: Вивести послідовність чисел 0 1 2 3 ... 9, кожну цифру - з нового рядка.

0
1
2
...
8
9

Рішення:

  • Для виведення послідовності чисел будемо використовувати лічильник циклу  for  , який повинен міняти своє значення від 0 до 9 згідно послідовності.
  • Значить, для початкового значення лічильника циклу встановіть значення, рівне 0; в якості умови циклу встановіть заключне значення -  i<10  , тобто останнім значенням буде i = 9; крок лічильника повинен дорівнювати 1 ( i++  ), так як різниця між членами послідовності - одиниця:

    for(var i=0; i<10; i++)
    {

    }

  • Для виведення значень послідовності скористайтеся значеннями самого лічильника ( i  ). Оскільки виводити слід кожне значення з нового рядка, використовуйте після кожного виведення тег  <br>  , який здійснює перехід на наступний рядок:

    for(var i=0; i<10; i++)
    {
        document.write(i+"<br>");
    }

    Пояснення У прикладі на екран виводяться значення лічильника циклу, так як приріст лічильника  i++  ), відповідно, на екрані будуть з'являтися 0 1 2 3 ... 9, причому кожна цифра - з нового рядка (тег  <br>  ).

  • Протестуйте сценарій в браузері.

Завдання Js 3_9. Вивести суму всіх цілих чисел від 1 до 15.

Pекомендації:

  1. Як послідовності чисел використовуйте лічильник циклу for.
  2. Для змінної-сумматора слід використовувати ідентифікатор змінної sum.

Фрагмент коду:

for (var i=...;...;...){
sum = sum + ...;
}
...


ОПЕРАТОРИ ВИХОДУ З ЦИКЛУ BREAK І CONTINUE В JAVASCRIPT. ОПЕРАТОР EXIT

Оператор  break  перериває виконання всього тіла циклу, тобто здійснює вихід з циклу в javaScript.


У той час як оператор  continue  перериває виконання поточної ітерації циклу, але, продовжуючи при цьому виконання циклу з наступної ітерації.

Розглянемо роботу операторів  break  і  continue  на прикладі:

Приклад: p;Розберіть алгоритм фрагмента коду. Що буде виведено?

Фрагмент коду:

for(var i=0; i<10; i++)
{
    if (i==4) continue;
    document.write(i+"<br>");
    if (i==8) break;
}

Рішення:

  • У третьому рядку прикладу стоїть умова, через яку цифра 4 нe буде виводитися на екран: оператор continue перейде до наступної ітерації циклу, не завершивши поточну.
  • У рядку №5 здійснюється вихід з циклу, але при цьому цифра 8 буде виведена на екран, так як оператор виведення стоїть до умови (в 4-му рядку). Зустрівши break, інтерпретатор завершить роботу циклу.
  • Т.ч. на екрані буде: 0 1 2 3 5 6 7 8 - кожна цифра з нового рядка.

Завдання Js 3_10. Вивести суму всіх цілих чисел від 1 до 15, виключивши із загальної суми числа 5 і 7.

Оператор Exit

У мові javasctipt передбачений оператор виходу з програмного коду - оператор  exit  .
Найчастіше оператор використовується для виключення помилки вводу користувача.

Розглянемо приклад:

Приклад 6: Запитувати користувача ввести число. Якщо введено не число, то виводити повідомлення "Необхідно число!" і зупиняти роботу програми.

Pекомендації:
Для виконання знадобляться функції перетворення типу.

Рішення:

  • Ініціалізуйте змінну number значенням, введеним користувачем в модальне вікно:

    var number = prompt("Введіть число");


  • Використовуючи функцію  parseInt  перетворення рядка в ціле число, перевірте, чи є введене значення числом:

    number = parseInt(number);// поверне NaN - не числo

    Пояснення: У разі, якщо введено не число, функція поверне значення  NaN  (з англ. Not a number - не число).

  • Перевірте значення змінної number за допомогою функції  isNaN  :

    x = isNaN(number);// поверне true, якщо значення не числове

    Пояснення: Функція  isNaN  повертає значення true у разі, якщо змінна не є числом


  • За правилом "брехні" організуйте перевірку значення змінної x. Якщо значення не числове виведіть відповідне зауваження і завершіть програму:

    if (x){
        alert("Необхідно число!");
        exit;// вихід з програми
    }


  • Для продовження програми (якщо введене значення було числом), виведіть наступне вікно з пропозицією введення:

    alert("Введіть друге число");// при введенні не числа оператор не виконається


  • Протестуйте сценарій в браузері.

Питання для самоконтролю:

  1. Перерахуйте три параметра циклу for і поясніть їх призначення.
  2. Які оператори призначені для виходу з циклу і для його переривання? Наведіть приклади їх використання.
  3. Для чого призначений оператор exit?

Чи можливо кілька лічильників в одному FOR?

Цікава робота з циклом  for  можлива при використанні одночасно двох лічильників в циклі.
Розглянемо приклад:

Приклад 7: За допомогою скрипта роздрукувати наступні пари змінна-значення в три рядки:

i=0 j=2
i=1 j=3
i=2 j=4

Рішення:

  • У циклі  for  організуйте два лічильника: лічильник  i  для виведення послідовності 0 1 2, лічильник  j  для виведення послідовності 2 3 4:

    for(i=0, j=2; i<10, j<5; i++, j++)
    {
    }

    Пояснення Кожен з трьох параметрів циклу  for   тепер має по два значення, які перераховуються через кому (наприклад, перший параметр з двома значеннями:  i = 0, j = 2 ). Самі параметри перераховуються через крапку з комою(;).

  • Для виводу з кожного рядка використовуйте тег <br>:

    for(i=0, j=2; i<10, j<5; i++, j++)
    {
        document.write("<br>i=", i, "j=",j);
    }

Генерація сторінки "на льоту": як це?

Перед виконанням наступного завдання розглянемо приклад динамічної побудови html-сторінки за допомогою javascript.

Приклад 8:

  1. Необхідно динамічно генерувати марковані й нумеровані списки на веб-сторінці в залежності від введених користувачем даних: запитувати у користувача ввести вид списку (нумерований (цифра 1) або маркований (цифра 2)), а потім кількість елементів списку.
  2. Залежно від відповіді виводити на екран теги або маркованого або нумерованого списку з необхідною кількістю пунктів.
  3. Если введен несуществующий тип списка, то выдавать сообщение "Введите правильный тип!" и осуществлять выход из программы (оператор exit).

    4. Згадаймо теги:
    теги нумерованого списку:

    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>


    теги маркованого списку:

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

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

    1.
    2.
    3.
    4.
    5.

Pекомендації:
У прикладі для виведення пунктів списку необхідно використовувати цикл  for  . Також знадобляться функції перетворення типів.

Рішення:

  • Ініціалізуйте змінну listType значенням, введеним користувачем в модальне вікно:

    var listType=prompt("Введіть '1' - якщо маркований список, '2' - якщо нумерований список");


  • Перевірте введене значення: для нумерованого списку (цифра 1) виведіть тег  <ol>  , для маркованого (цифра 2) - тег  <ul>  . Якщо введено інше значення, виведіть зауваження і закінчите програму:

    if (listType=='1')
        document.write("<ol>")
    else if (listType=='2')
        document.write("<ul>")
    else {
        alert("Введіть правильний тип");
        exit;
        }


  • Ініціалізуйте змінну kolvo значенням, введеним користувачем в модальне вікно:

    var kolvo=prompt("Введіть кількість пунктів");


  • Для перетворення строкового значення в числове використовуйте функцію  parseInt  :

    kolvo=parseInt(kolvo);


  • Для введеної кількості пунктів списку організуйте цикл, в якому виводите теги для списку  <li>  :

    for (var i=1; i<=kolvo; i++)
        document.write("<li></li>");


  • Оскільки списки закриваються відповідними тегами, в залежності від виду списку виведіть закриваючі теги:

    if (listType=='1')
        document.write("<ol>")
    else if (listType=='2')
        document.write("<ul>");


  • Протестуйте сценарій в браузері.

Завдання Js 3_11.
Написати скрипт, який виводить теги input (елементи управління) різного типу, в залежності від введеної цифри:

1 - текстове поле,
2 - кнопка,
3 - radio (перемикач).

Кількість виведених тегів має теж запитуватися.

Згадаймо теги:

Для 1 - текстове поле:
<input type="text">

Для 2 - кнопка:
<input type="button">

Для 3 - radio:
<input type="radio">

Завдання Js 3_12. Намалювати шахову дошку 9х9, використовуючи цикли javascript  for  . "Малювати" дошку слід тегами  html  для таблиці:

Згадаймо теги:

<table border="1" width="30%">
    <tr> <!-- строка -->
        <td>-</td><td>-</td> <!-- две ячейки в строке -->
    </tr>
</table>



Pекомендації:

  • Для малювання 9 рядків необхідно організувати зовнішній цикл  for  з лічильником  i  .
  • Для малювання 9 осередків у кожному рядку необхідно організувати внутрішній (вкладений) цикл  for  з лічильником  j  .
  • Для відтворення тегів осередків і рядків слід використовувати метод  document.write  .



Результат:

Додатково:

  1. В комірки таблиці вивести таблицю множення, використовуючи лічильники циклу ( i  і  j ).
  2. Перший ряд і першу колонку вивести з червоним тлом (атрибут комірки таблиці  bgcolor ):

    <td bgcolor='red'>-</td>

Результат:

5. Циклічні оператори мови javaScript - While


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

while (условие) {     //..блок операторів..
};



Приклад: Виводити в діалогове вікно ступенi двійки до 1000 (2, 4, 8 ... 512). Використовувати метод  alert () 

Рішення:

  • Лістинг скрипта:

    var a = 1;
    while (a < 1000){
        a*=2;
        alert(a);
    }

    Пояснення:  a*=2  → використана операція складеного присвоювання: добуток, поєднаний з привласненням, тобто те ж саме, що  a = a*2  

  • Протестуйте результат в браузері.

Як працюють оператори  break  і  continue  в циклі  while  ?

Приклад:

var a = 1;
while (a < 1000){
    a*=2;
    if (a==64)
        continue;
    if (a==256)
        break;
    alert(a);
}

Пояснення: Ступенi двійки будуть виводитися до 128 включно, причому значення 64 буде пропущено. Тобто в діалогових вікнах ми побачимо: 2 4 8 16 32 128

Завдання Js 3_13. Які значення виведе наступний фрагмент коду?

var counter = 5;
while (counter < 10) {
    counter++;
    document.write("Counter " + counter);
    break;
    document.write("Цей рядок не виконається.");
}

Завдання Js 3_14. Написати код зведення х в ступінь y, використовуючи цикл  while  . Запитувати значення змінних і виводити результат за допомогою  alert()  .
Доповніть код:

var x = ...;
var y = ...;
counter = 1;
chislo=x;
while (...) {
chislo=x*...;
counter=...;
}
alert(chislo);

6. Цикл з постумовою do..while

Синтаксис:

do
{
//..блок операторів..
}
while (умова);

Умова перевіряється вже після циклу. Відповідно, оператори в циклі виконаються хоча б один раз в будь-якому випадку, незалежно від умови.

Приклад:Розглянемо приклад використання циклу  do while.   Самостійно з'ясуйте, що буде виводитися в діалогове вікно.

Рішення:

  • Лістинг скрипта:

    var a = 1;
    do
    {
        a*=2;
        if (a==64)
            continue;
        alert(a);
        if (a==256)
            break;
    }while (a < 1000);

  • Протестуйте результат в браузері.

Завдання Js 3_15. Виправте помилку в програмі, призначену для знаходження факторіала числа:

var counter = prompt("Введіть число");
var factorial = 1;
document.write("Факторіал числа:" + counter + "! = ");
do {
    if (counter == 0) {
        factorial = 1;
        break;
    }
    factorial = factorial / counter;
    counter = counter + 1;
}
while (counter > 0);
document.write(factorial);

Завдання Js 3_16. Модифікувати програму про введення імені користувачем:

Запитувати ім'я користувача до тих пір, поки користувач дійсно введе ім'я (тобто поле дійсно буде заповнено і не натиснута клавіша  cancel  ). Коли ім'я введено, то виводити "Привіт, ім'я!".

7. Циклічні оператори мови javaScript - цикл For In

Цикл  for in  призначений для проходу по масивах, колекціям і об'єктам:

Приклад: Роздрукувати всі властивості об'єкта  navigator  .

Пояснення: Об'єкт  navigator  необхідний для отримання різної інформації про браузер. Ця інформація доступна через властивості об'єкта.

Рішення:

  • Створіть код:

    for (var prop in navigator)
    {
    document.write(prop + "<br>");
    }

    Пояснення: Змінна  prop   створена для "перебору" всіх властивостей об'єкта  navigator  .

  • Протестуйте результат в браузері.

Завдання Js 3_17. Роздрукувати всі властивості об'єкта  window  . Виводити кожнy властивість з нового рядка, чергуючи колір виведених властивостей: чорний | синій.
Результат:

Pекомендації:

  • Використовувати додаткову змінну для перевірки парності.

  • Використовувати умовний оператор  If  .

8. Оператор обробки винятків в javaScript - try..catch

Як шукати помилки в javascript?

У деяких випадках код на сторінці не працює незрозуміло з якої причини. Де шукати помилку? У таких випадках можна застосувати оператор  try..catch  .

Оператор  try..catch  пытается выполнить фрагмент кода, и, если в коде есть ошибка, то существует возможность выдать ошибку на экран.
Ошибка хранится в объекте  e.message  .

Розглянемо роботу оператора на прикладі:

Приклад: написати в програмі оператор з помилкою. Перевіряти наявність помилки в передбачуваному помилковому коді: якщо помилка в коді присутня - видавати повідомлення "обробка помилки: назва помилки". Після перевірки помилкового оператора, незалежно від того, чи є в коді помилка, видавати повідомлення "завершальні дії"

Рішення:

  • В якості повідомлення з помилкою будемо використовувати метод  prompt()  , написаний з помилкою - promt(). Повідомлення з помилкою укладіть в блок  try  :

    alert("до");
    try
    {
    promt("введіть число"); // оператор з помилкою
    }

    Пояснення:  Try  з англ. - "намагатися", таким чином, ставимо оператор  try  перед фрагментом коду, який, можливо, містить помилку (в нашому випадку помилка дійсно є).

  • Сообщение с извещением об ошибке следует разместить в блок  catch  :

    catch(e)
    {
    alert("обробка помилки: "+e.message);
    }

    Пояснення: Якщо помилка дійсно є, то оператор  catch  (з англ. "Ловити") зберігає цю помилку в об'єкті  e  . Надалі її можна вивести в діалогове вікно -  e.message  .

  • Завершальне повідомлення, яке необхідно виводити незалежно від того, чи є в коді помилка, помістіть в блок  finally  :

    finally
    {
    alert("завершальні дії");
    }
    alert("після");

    Пояснення: Якщо помилка все ж є, то інтерпретатор після її виведення в нашому прикладі перейде на виконання блоку  catch  , а потім  finally  (з англійської "завершення", "нарешті"), який виконається завжди, незалежно від того, чи була помилка чи ні. Навіть якщо виникла помилка в блоці  catch  .

Важливо: Блок  finally  в конструкції необов'язковий.

Завдання Js 3_18. Виконайте приклад, описаний вище, з наступними модифікаціями:

  • Видаліть блок  finally  і простежте за виконанням коду.
  • Поставте замість помилкового оператора безпомилковий і подивіться, яким буде результат.

Резюме:

На уроці були розглянуті наступні оператори мови javascript і конструкції:

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

  • Oператор if

  • Умовне присвоювання (тернарний оператор)

  • Оператор перемикання switch

Оператори циклу:

  • Цикл for

  • Цикл while

  • Цикл do...while

  • Цикл for...in

Підсумкове завдання Js 3_19.

Створити гру для двох:

  1. Програма просить першого гравця ввести число від 1 до 100 (другий гравець не бачить введене число). Потім другого гравця просить вгадати введене число. У відповідь виводиться повідомлення «мало» або «багато» в залежності від введеної відповіді. Якщо гравець вгадує, - виводиться привітання. Якщо не вгадує - гра триває (до тих пір, коли число дійсно буде вгадано).

  2. Прораховувати число спроб і видавати результат, коли число розгадано.

Питання для самоконтролю:

  1. В яких випадках доцільно використовувати цикл  For In  ? Назвіть приклад його використання.

  2. Яке призначення оператора  try..catch  ?

  3. Поясніть призначення кожного блоку оператора  try..catch  .