Главная > Безопасность и защита > Ветвление javascript. Условный оператор в JavaScript

Ветвление javascript. Условный оператор в JavaScript

Вернёмся к нашим зайцам

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

Добавим в фунцию lastBoatRabbits ветвление:

var lastBoatRabbits = function (totalRabbits ) { if (totalRabbits === 0 ) { // return 0 ; } else { var restRabbits = totalRabbits % 6 ; if (restRabbits === 0 ) { // return 6 ; } else { return restRabbits; } } };

Итак, если зайцев на речке нет , последняя лодка никого не привезёт (на самом деле, она вернётся почти сразу же, т.к. дедушка точно будет знать, что зайцев на речке нет).

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

Что ещё можно было бы улучшить в этой программе? Я бы использовал отдельную переменную,
хранящую количество зайцев, помещающихся в лодке, на тот случай, если благодарные
зайцы подарят Мазаю лодку побольше. Мало ли что вдруг.

function (totalRabbits ) { if (totalRabbits === 0 ) { return 0 ; } else { var restRabbits = totalRabbits % boatCapacity; if (restRabbits === 0 ) { return boatCapacity; } else { return restRabbits; } } };

Синтаксис ветвления

Ветвление может иметь часть, которая выполняется, если условие неверно,
а может его не иметь:

// Вариант с двумя ветками: if (rainIsFalling) { stayHome(); // Если rainIsFalling == true, выполняется эта часть } else { walkInAPark(); // Иначе выполняется эта часть } // Вариант с одной веткой: if (musicIsPlaying) { dance(); } // Если musicIsPlaying == false, выполнение программы просто идёт дальше

Условия

В качестве условия в if может выступать выражение сравнения двух чисел или строк,
с использованием операций == , > , < , >= , <= , != и === , любая переменная, которой
было присвоено логическое значение и просто любое значение, которое в результате работы
if будет приведено к логическому значению.

Примеры сравнения:

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

Переменные в качестве условия:

var condition = 10 > 5 ; if (condition) { console .log("10 > 5" ); // Будет выполнено }

Логические операции над условиями

Несколько выражений, возвращающих логическое (или приводимое к логическому) значений
можно объединить с помощью логических операций. Такими операциями называют:
логическое И && , логическое ИЛИ || и логическое отрицание! .

true && true ; // => true false || false ; // => false !false ; // => true

Логическое И возвращает true только в том случае, если с обоих сторон от него true ,
логическое ИЛИ возвращает false только в том случае, если с обоих сторон от него — false .
Отрицание возвращает false для true и, наоборот, true для false .

По правилам Javascript значения 0 , null и undefined приводятся к false .
Однако, получая результат && мы получим первое неприведённое значение, которое
приводится к false , а получая результат || — первое неприведённое значение,
которое приводится к true:

0 && true ; // => 0 6 || 7 || false ; // => 6 !0 ; // => true

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

var boatCapacity = 6 ; var lastBoatRabbits = function (totalRabbits ) { return totalRabbits && (totalRabbits % boatCapacity || boatCapacity); };

Задания

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

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=1*obj.zn1.value; var b=1*obj.zn2.value; var c=1*obj.zn3.value; var m=a; if (b>m) m=b; if (c>m) m=c; obj.res.value=m; }

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

Вообще такой сценарий можно было бы написать, используя метод max объекта Math , рассмотренного в прошлом уроке, и код получился бы короче:

function 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); }

Это я к тому, что программирование все-таки процесс творческий, и одну задачу можно решить разными способами. Задача же программиста найти наиболее оптимальный вариант. Но это так, лирическое отступление. Вернемся к условному оператору if и рассмотрим более интересный пример. Напишем сценарий, во-время работы которого, при наведении курсора мыши на изображение, оно будет увеличиваться, создавая эффект приближения.

Как вы помните в HTML можно задать размер вставляемого изображения. Если заданные размеры больше или меньше оригинала, то браузер автоматически подгонит оригинал под эти размеры. Этим мы и воспользуемся. Пусть у нас есть вот такая картинка:

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

Javascript if

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

Function bigPict(){ var w=document.tigr.width; if (w Таким образом, функция проверяет ширину картинки (width ) и, если она меньше 302 пикселов, то увеличивает эту ширину на 10 пикселов. Функция setTimeout вызывает нашу функцию bigPict каждые полсекунды, благодаря чему размер картинки будет увеличиваться до тех пор, пока условие w не станет ложным.

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

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

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 .
Фрагмент кода:

if (a * b < 6) { result = "Мало"; } else { result = "Много"; }


Вопросы для самоконтроля:

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

Оператор переключения в 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: Запрашивать у пользователя ввести цвет. Выводить перевод на английский язык введенного цвета. Для цвета "синий" и "голубой" выдавать одно и то же значение.


✍ Решение:
  • Создайте веб-страницу с html-скелетом и тегом script .
  • Инициализируйте переменную color
    • var color = prompt("Какой цвет?" ) ;

    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

    // ... default: alert("y нас нет сведений по данному цвету") } // конец switch

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

Задание Js 3_6. Найдите и исправьте ошибки в следующем фрагменте кода:

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

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. Что выведется на экране при выполнении следующего кода?:

1 2 3 4 5 6 7 8 9 10 11 12 13 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" ) ; }

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 ворон

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


Вопросы для самоконтроля:

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

Циклические операторы языка javaScript - For

Синтаксис:

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

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

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

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

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

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

  • Условие цикла - это и есть конечное значение счетчика: например, i10, останавливает цикл:

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

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

Пример 5: Вывести последовательность чисел 0 1 2 3 ... 9 , каждую цифру - с новой строки. 0 1 2 ... 8 9


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

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

    В примере на экран выводятся значения счетчика цикла, так как приращение счетчика i++ , соответственно, на экране будут появляться 0 1 2 3 ... 9 , причем каждая цифра - с новой строки (тег
    ).

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

Задание Js 3_9. 1 до 15 .

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

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

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

Операторы выхода из цикла break и continue в javaScript. Оператор Exit

Оператор break прерывает выполнение всего тела цикла, т.е. осуществляет выход из цикла в javaScript.

В то время как оператор continue прерывает выполнение текущей итерации цикла, но, продолжая при этом выполнение цикла со следующий итерации.

Рассмотрим работу операторов break и continue на примере:

Пример: Разберите алгоритм фрагмента кода. Что будет выведено?

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

1 2 3 4 5 6 for (var i= 0 ; i< 10 ; i++ ) { if (i== 4 ) continue ; document.write (i+ "
" ) ; if (i== 8 ) break ; }

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


✍ Решение:
  • В третьей строке примера стоит условие, из-за которого цифра 4 не будет выводиться на экран: оператор continue перейдет к следующей итерации цикла, не завершив текущую.
  • В строке №5 осуществляется выход из цикла, но при этом цифра 8 будет выведена на экран, так как оператор вывода стоит до условия (в 4-й строке). Встретив break , интерпретатор завершит работу цикла.
  • Т.о. на экране будет: 0 1 2 3 5 6 7 8 - каждая цифра с новой строки.

Задание Js 3_10. Вывести сумму всех целых чисел от 1 до 15 , исключив из общей суммы числа 5 и 7 .

Оператор Exit

В языке javasctipt предусмотрен оператор выхода из программного кода - оператор exit .
Чаще всего оператор используется для исключения ошибки ввода пользователя.


Рассмотрим пример:

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


✍ Решение:
  • Инициализируйте переменную number значением, введенным пользователем в модальное окно:

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

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

    • number=parseInt(number); // возвратит NaN - не число

    В случае, если введено не число, функция возвратит значение 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 :
    • 1 2 3 for (i= 0 , j= 2 ; i< 10 , j< 5 ; i++, j++ ) { }

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

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

  • Для вывода с каждой строки используйте тег
    :
    • 1 2 3 4 for (i= 0 , j= 2 ; i< 10 , j< 5 ; i++, j++ ) { document.write ("
    i=" , i, "j=" , j) ; }

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

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

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

Пример 8:

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

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

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

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

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

  • Проверьте введенное значение: для нумерованного списка (цифра 1) выведите тег
      , для маркированного (цифра 2) - тег
        . Если введено другое значение, выведите замечание и закончите программу:

            ") else { alert("Введите правильный тип"); exit; }

          • Инициализируйте переменную kolvo значением, введенным пользователем в модальное окно:

            • var kolvo=prompt("Введите количество пунктов");

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

            • for (var i=1; i<=kolvo; i++) document.write("");

          • Поскольку списки закрываются соответствующими тегами, в зависимости от вида списка выведите закрывающие теги:
            • if (listType== "1" ) document.write ("" ) else if (listType== "2" ) document.write ("" ) ;

            if (listType=="1") document.write("

        ") else if (listType=="2") document.write("
      ");

    1. Протестируйте сценарий в браузере.

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

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

      Количество выведенных тегов должно тоже запрашиваться.

      Вспомним теги:

      Для 1 - текстовое поле: Для 2 - кнопка: Для 3 - radio:

      Пример вывода:

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

      Вспомним теги:

      <table border = "1" width = "30%" > <tr > <td > -</ td > -</ td > </ tr > </ table >

      --

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

      Результат:

      Дополнительно:

      1. В ячейки таблицы вывести таблицу умножения, используя счетчики цикла (i и j).
      2. Первый ряд и первую колонку вывести с красным фоном (атрибут ячейки таблицы bgcolor):
        <td bgcolor = "red" > -</ td >

        -

      Результат:


      Вопросы для самоконтроля:

      1. Объясните, что значит понятие «динамическое построение страницы»?
      2. Какая конструкция языка чаще всего используется при динамическом построении страницы?

      Циклические операторы языка javaScript - While

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

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

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


      ✍ Решение:
      • Листинг скрипта:
        • 1 2 3 4 5 var a = 1 ; while (a < 1000 ) { a*= 2 ; alert(a) ; }

        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) ; }

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

      Степени двойки будут выводиться до 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() .

      Дополните код:

      1 2 3 4 5 6 7 8 9 var x = ...; var y = ...; counter = 1 ; chislo= x; while (...) { chislo= x* ...; counter= ...; } alert(chislo) ;

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

      A Исправьте ошибку в программе, предназначенную для нахождения факториала числа:

      1 2 3 4 5 6 7 8 9 10 11 12 13 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) ;

      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). Когда имя введено, то выводить "Привет, имя!" . document.

      Как искать ошибки в javascript?

      В некоторых случаях код на странице не работает непонятно по какой причине. Где искать ошибку? В таких случаях можно применить оператор try..catch .

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

      Рассмотрим работу оператора на примере:

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


      ✍ Решение:
      • В качестве сообщения с ошибкой будем использовать метод prompt() , написанный с ошибкой - promt() . Сообщение с ошибкой заключите в блок try:

        • alert("до"); try { promt("введите число"); // оператор с ошибкой }

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

      • Сообщение с извещением об ошибке следует разместить в блок catch:
        • 6 7 8 9 catch (e) { alert("обработка ошибки: " + e.message ) ; }

        catch(e) { alert("обработка ошибки: "+e.message); }

        Если ошибка действительно есть, то оператор catch (с англ. "ловить") сохраняет эту ошибку в объекте e . В дальнейшем ее можно вывести в диалоговое окно - e.message .

      • Завершающее сообщение, которое необходимо выводить независимо от того, есть ли в коде ошибка, поместите в блок finally:

        • finally { alert("завершающие действия"); } alert("после");

        Если ошибка все же есть, то интерпретатор после ее вывода в нашем примере перейдет на выполнение блока catch , а затем finally (с английского "завершение", "наконец"), который выполнится всегда, независимо от того, была ли ошибка или нет. Даже если возникла ошибка в блоке catch .

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


      Задание Js 3_17. Выполните пример, описанный выше, со следующими модификациями:

    2. Удалите блок finally и проследите за выполнением кода.
    3. Поставьте вместо ошибочного оператора безошибочный и посмотрите, каким будет результат.

      4. Резюме:

      На уроке были рассмотрены следующие операторы языка javascript и конструкции:

      Javascript условные операторы:

    4. Оператор if
    5. Условное присваивание (тернарный оператор)
    6. Оператор переключения switch

      7. Операторы цикла:

    7. Цикл for
    8. Цикл while
    9. Цикл do...while
    10. Цикл for...in

      11. Итоговое задание Js 3_18.
      Создать игру для двоих:

      1. Программа просит первого игрока ввести число от 1 до 100 (второй игрок не видит введенное число). Затем второго игрока просит угадать введенное число. В ответ выводится сообщение «мало» либо «много» в зависимости от введенного ответа. Если игрок угадывает, - выводится поздравление. Если не угадывает – игра продолжается (до тех пор, когда число действительно будет угадано).
      2. Просчитывать число попыток и выдавать результат, когда число разгадано.


      Вопросы для самоконтроля:

      1. В каких случаях целесообразно использовать цикл For In ? Назовите пример его использования.
      2. Каково назначение оператор try..catch ?
      3. Объясните назначение каждого блока оператора try..catch .

      Условные операторы

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

      Если представить, что программа - это дорога, а интерпретатор JavaScript - путешественник, идущий по ней, то условные операторы можно представить как перекрестки, где программный код разветвляется на две или более дорог, и на таких перекрестках интерпретатор должен выбирать, по какой дороге двигаться дальше.

      Оператор if/else

      Оператор if - это базовый управляющий оператор, позволяющий интерпретатору JavaScript принимать решения или, точнее, выполнять операторы в зависимости от условий. Оператор if имеет две формы. Первая:

      if (выражение) оператор

      В этой форме сначала вычисляется выражение. Если полученный результат является истинным, то оператор выполняется. Если выражение возвращает ложное значение, то оператор не выполняется. Например:

      If (username == null) // Если переменная username равна null или undefined username = "Alex"; // определить ее

      Обратите внимание, что скобки вокруг условного выражения являются обязательной частью синтаксиса оператора if.

      Вторая форма оператора if вводит конструкцию else, выполняемую в тех случаях, когда выражение возвращает ложное значение. Ее синтаксис:

      if (выражение) оператор1 else оператор2

      Эта форма выполняет оператор1, если выражение возвращает истинное значение, и оператор2, если выражение возвращает ложное значение. Например:

      If (n == 1) console.log("Получено 1 новое сообщение."); else console.log("Получено " + n + " новых сообщений.");

      Оператор else if

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

      If (n == 1) { // Выполнить блок 1 } else if (n == 2) { // Выполнить блок 2 } else if (n == 3) { // Выполнить блок 3 } else { // Если ни один из предыдущих операторов else не был выполнен, выполнить блок 4 }

      В этом фрагменте нет ничего особенного. Это просто последовательность операторов if, где каждый оператор if является частью конструкции else предыдущего оператора.

      Оператор switch

      Оператор if создает ветвление в потоке выполнения программы, а многопозиционное ветвление можно реализовать посредством нескольких операторов else if. Однако это не всегда наилучшее решение, особенно если все ветви зависят от значения одного и того же выражения. В этом случае расточительно повторно вычислять значение одного и того же выражения в нескольких операторах if.

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

      switch(выражение) { инструкции }

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

      Когда выполняется оператор switch, он вычисляет значение выражения, а затем ищет метку case, соответствующую этому значению (соответствие определяется с помощью оператора идентичности ===). Если метка найдена, выполняется блок кода, начиная с первой инструкции, следующей за меткой case. Если метка case с соответствующим значением не найдена, выполнение начинается с первой инструкции, следующей за специальной меткой default: . Если метка default: отсутствует, блок оператора switch пропускается целиком.

      Работу оператора switch сложно объяснить на словах, гораздо понятнее выглядит объяснение на примере. Следующий оператор switch эквивалентен повторяющимся операторам if/else, показанным в предыдущем примере:

      Switch(n) { case 1: // Выполняется, если n === 1 // Выполнить блок 1 break; // Здесь остановиться case 2: // Выполняется, если n === 2 // Выполнить блок 2 break; // Здесь остановиться case 3: // Выполняется, если n === 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(1067)); // Результат "42b"

      Обратите внимание, что в двух предыдущих примерах за ключевыми словами case следовали числа или строковые литералы. Именно так оператор switch чаще всего используется на практике, но стандарт ECMAScript позволяет указывать после case произвольные выражения.

      Оператор switch сначала вычисляет выражение после ключевого слова switch, а затем выражения case в том порядке, в котором они указаны, пока не будет найдено совпадающее значение. Факт совпадения определяется с помощью оператора идентичности ===, а не с помощью оператора равенства ==, поэтому выражения должны совпадать без какого-либо преобразования типов.

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

      Как объяснялось ранее, если ни одно из выражений case не соответствует выражению switch, оператор switch начинает выполнение оператора с меткой default:. Если метка default: отсутствует, тело оператора switch полностью пропускается. Обратите внимание, что в предыдущих примерах метка default: указана в конце тела оператора switch после всех меток case. Это логичное и обычное место для нее, но на самом деле она может располагаться в любом месте внутри оператора switch.

      В JavaScript есть конструкция условий, которая влияет на выполнения ход программы. Если (по английски if) что-то есть, что-то истинно, тогда делать одно, иначе (по английски else) - делать другое.

      Инструкция if

      Давайте сразу рассмотрим схему работы инструкции if , она проста и не требует больших объяснений.

      If (условие) { код для выполнения, если условие истинно }

      Всё просто: если условие истинно, тогда код в блоке {...} выполняется.

      Var digit = 4; if (digit == 4) { document.write("Значение переменной digit равно 4."); }

      Можно сделать немного странный код:

      Var digit = 4; if (true) { document.write("Условие истинно."); }

      Инструкция else

      В паре с инструкцией if может использоваться инструкция else . Она переводится как "иначе" и задаёт альтернативный код.

      Var digit = 4; if (digit

      Обратите внимание на разное написание фигурных скобок в данном примере у инструкций if и else. Так писать совсем не обязаетльно, оба синтаксиса правильны.

      После инструкции else может идти новая инструкция if. Так мы выполним проверку множественных условий.

      Var digit = 4; if (digit

      В JavaScript нет инструкции elseif (одним словом), как в PHP.

      Если вам нужно выполнить только одну инструкцию, то фигурные скобки блока {...} не нужны. В нашем примере их можно не писать:

      Var digit = 4; if (digit

      Ложь в JavaScript

      Инструкция if (условие) вычисляет и преобразует условие (выражение) в скобках к логическому типу boolian (истина или ложь).

      Повторим что есть ложь в JavaScript.

      • Число 0 (ноль).
      • Пустая строка "".
      • Логическое значение false:)
      • Значение null.
      • Значение undefined.
      • Значение NaN (Not a Number - не число).

      Всё остальное является истиной.

      Пара возможных ошибок:

      If ("false") document.write("Это истина.
      "); if (false) document.write("Это истина.

      ");

      Тут нужно отличить строку "false" (взята в кавычки), от значения булевого типа false.

      If (" ") document.write("Это истина.
      "); else document.write("Это ложь.
      ");

      Тут нужно отличить строку " " (внутри пробел), от пустой строки "". Пробел внутри строки делает её не пустой, а содержащий символ. Для интерпритатора не важно буква или пробел - символ есть символ.

      Другие условные конструкции в JavaScript

      • Консрукция switch JavaScript .
      • Оператор вопросительный знак

      Рекомендуем также