В этой статье рассмотрим условные и логические операторы языка JavaScript.
Условные операторы - это операторы языка JavaScript (ECMAScript), которые в зависимости от некоторого условия позволяют выполнить одно или несколько определённых инструкций.
Формы условных операторов в JavaScript:
Синтаксис оператора if:
If (условие) инструкция
Условный оператор if состоит из:
Например:
If (true) count = 4;
В этом примере в качестве условия используется значение true . Это означает, что инструкция count = 4 будет выполняться всегда. Данный пример просто приведен для пояснения принципа работы оператора if , т.к. он лишён всякого смысла.
Например , увеличим значение переменной votes на 1, если она (её тип) является числом:
If (typeof votes === "number") votes++;
Если необходимо выполнить несколько инструкций, то их необходимо поместить в фигурные скобки :
If (typeof votes === "number") { votes++; console.log("Число голосов: " + votes); }
If (typeof votes === "number") { votes++; }
Оператор if...else используется, когда необходимо при истинности условия выполнить одни инструкции, а при ложности - другие.
Синтаксис:
If (условие) { одно или несколько инструкций (будут выполняться, когда условие равно true или приведено к true) } else { одно или несколько инструкций (будут выполняться, когда условие равно false или приведено к false) }
Например , выведем в консоль сообщение о том, является ли число четным или нет:
If (number % 2) { console.log("Число нечётное!"); } else { console.log("Число чётное!"); }
Если выражение в условии оператора if не равно true или false , то JavaScript приведёт его к одному из этих значений. Данное действие он выполняет с помощью так называемого "правила лжи".
Смысл данного правила: любое выражение является true, кроме следующих значений :
Например , выведем в консоль браузера приветственное сообщение, в зависимости от того какое значение хранится в переменной nameUser :
If (nameUser) { console.log("Привет, " + name + "!"); } else { console.log("Привет, гость!"); }
Если переменная nameUser будет содержать пустую строку , то по правилу лжи, она будет приведена к значению false . Следовательно, в консоль будет выведено сообщение «Привет, гость!» .
А если, например, переменная nameUser будет содержать строку «Тимур» , то выражение в условии будет приведено к значению true . В результате, в консоли отобразится сообщение «Привет, Тимур!» .
Синтаксис:
If (условие1) { инструкции 1 } else if (условие2) { инструкции 2 } else if (условие3) { инструкции 3 //... } else if (условиеN) { инструкции N } else { инструкции, которые будут выполнены, если ни одно из условий не равно true или не приведёно к этом значению }
Тернарный оператор – оператор JavaScript, который можно использовать, когда необходимо в зависимости от условия выполнить одно из двух заданных выражений.
Синтаксис:
Условие? выражение1: выражение2
Тернарный оператор состоит из трех операндов, которые разделяются с помощью символов? и: . Условие тернарного оператора задаётся в первом операнде. Его также можно заключить в скобки. Если условие равно true или будет приведено к этому значению будет выполнено выражение1 , иначе - выражение 2 .
Например:
(number > 10) ? console.log("Число больше 10!") : console.log("Число меньше или равно 10");
В JavaScript допустимы множественные тернарные операторы (?:):
Var dayNumber = new Date().getDay(); day = (dayNumber === 0) ? "Воскресенье" : (dayNumber === 1) ? "Понедельник" : (dayNumber === 2) ? "Вторник" : (dayNumber === 3) ? "Среда" : (dayNumber === 4) ? "Четверг" : (dayNumber === 5) ? "Пятница" : (dayNumber === 6) ? "Суббота" : "Неизвестный день недели"; console.log("Сегодня " + day.toLowerCase() + ".");
Вышеприведённый пример, но с использованием множественной записи оператора if...else:
Var dayNumber = new Date().getDay(); if (dayNumber === 0) { day = "Воскресенье"; } else if (dayNumber === 1) { day = "Понедельник"; } else if (dayNumber === 2) { day = "Вторник"; } else if (dayNumber === 3) { day = "Среда"; } else if (dayNumber === 4) { day = "Четверг"; } else if (dayNumber === 5) { day = "Пятница"; } else if (dayNumber === 6) { day = "Суббота"; } else { day = "Неизвестный день недели"; } console.log("Сегодня " + day.toLowerCase() + ".");
Оператор 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 = 1, countCandyGirls = 2, message; switch (countCandyBoys + countCandyGirls) { case 1: message = "Одна конфета"; break; case 2: case 3: message = "Две или три конфеты"; break; case 4: message = "Четыре конфеты"; break; default: message = "Не одна, не две, не три и не четыре конфеты"; } // выведем сообщение в консоль console.log(message);
В вышеприведенном примере вычисленное выражение равно 3. Следовательно, будет выполнены инструкции message = "Две или три конфеты" и break . Инструкция break прервёт дальнейшее выполнение оператора switch и передаст управление инструкции, идущей после него, т.е. console.log(message) . Она выведет в консоль сообщение «Две или три конфеты» .
Например , выведем выведем в консоль текущий день недели:
Var day = ""; switch(new Date().getDay()) { case 0: day = "Воскресенье"; break; case 1: day = "Понедельник"; break; case 2: day = "Вторник"; break; case 3: day = "Среда"; break; case 4: day = "Четверг"; break; case 5: day = "Пятница"; break; case 6: day = "Суббота"; break; default: day = "Неизвестный день недели"; } console.log("Сегодня " + day.toLowerCase() + ".");
Пример, в котором не используется инструкция break :
Var result = "success"; switch (result) { case "success": console.log("Успех!"); case "invalidCaptcha": console.log("Неверная капча!"); default: console.log("Ошибка!"); }
В этом примере выражение оператора switch равно success . Следовательно, будет выполнена инструкция console.log("Успех!") , которая выведет сообщение «Успех!» в консоль. Но так как после неё нет инструкции break , то выполнение скрипта будет продолжено в следующем варианте. Таким образом, инструкции будут выполняться до тех пока пока на пути не встретиться break или не будет достигнут конец оператора switch . В результате выполнения этого примера в консоль будут выведены 3 сообщения: «Успех!» , «Неверная капча!» и «Ошибка!» .
В некоторых случаях может требоваться именно такое поведение, но не в этом. Здесь просто допущена ошибка.
Исправленный вариант примера:
Var result = "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"
В данном примере мы сначала объявляем четыре переменные с помощью ключевого слова var, и сразу присваиваем им числовые значения. Далее с помощью операторов инкремента и декремента мы меняем значения чисел. Информация выводится с помощью функции Echo (смотрите статью " "). Что бы не писать лишний раз имя объекта, я использовал конструкцию with{} .
Логические операторы
Логические операторы используются при проверке условия, что бы не повторяться, я сделаю сокращение: левый операнд – Л.О., а правый операнд – П.О.
Теперь рассмотрим следующий скрипт:
| //***************************************** // логические операции // logik_if_else.js //***************************************** var a= 10 , b= 100 , WshShell, title, msg1, msg2, msg3, msg4, vbInformation = 64 ; // Создаем экземпляр класса WScript.Shell WshShell = WScript.CreateObject ("WScript.Shell" ) ; title = "Работа с условным оператором IF ELSE JS" ; with(WshShell) { if (a>= 5 && a<= 100 ) //истина msg1 = "TRUE" ; else msg1 = "FALSE" ; Popup (msg1, 5 , title, vbInformation) ; if (a>= 5 || b== 100 ) //истина msg2 = "TRUE" ; else msg2 = "FALSE" ; Popup (msg2, 5 , title, vbInformation) ; //условный оператор js if else if (! a) //ложь msg3 = "TRUE" ; else msg3 = "FALSE" ; Popup (msg3, 5 , title, vbInformation) ; if (a&= 100 ) //ложь msg4 = "TRUE" ; else msg4 = "FALSE" ; Popup (msg4, 5 , title, vbInformation) ; } |
Как и в предыдущем скрипте, тут я использовал конструкцию with для сокращения программного кода. Однако, для вывода информация мы воспользовались функцией Popup (смотрите статью " "). В результате, диалоговые окна закроются автоматически через несколько секунд. Обратите внимание, что в данном примере мы не использовали фигурные скобки в условном операторе js if, они актуальны только тогда, когда нужно выполнить не одну строку кода, а несколько.
Напоследок, давайте рассмотрим такой практический пример, как решение квадратного уравнения:
| // Решение квадратного уравнения // uravnenije_if_else.js // *********************************************************** var a, b, c, d, x, x1, x2; //Объявляем переменные a=- 2 ; b= 6 ; c= 20 ; //Идет поиск дискриминанта d= Math .pow (b, 2 ) - 4 * a* c; if (d== 0 ) { x= b/ (2 * a) ; msg= "Уравнение имеет одно решение, x ровно " + x } else { if (d> 0 ) { x1= (- b+ Math .sqrt (d) ) / (2 * a) ; x2= (- b- Math .sqrt (d) ) / (2 * a) ; msg= "Уравнение имеет два решения \n x1 ровно " + x1 + "\n x2 ровно " + x2; // условный оператор if else js } else msg= "Решения нет" ; } WScript.Echo (msg) ; |
В повседневной жизни часто необходимо принять какое не-будь решение, в зависимости от какого то условия. Например, если на выходные погода будет теплой, то мы поедим на море, иначе, если будет пасмурно, то посидим дома.
В программировании это тоже встречается очень часто. Для этого существуют два условных операторов, это if-else и switch-case . В этой статье я Вам расскажу об операторе if-else, а в следующей статье об switch-case.
Синтаксис условного оператора if-else следующий:
Если условие истина (true), то выполняется код из блока if, иначе, если условие ложь, то выполняется код из блока else.
Для лучшего понимания возьмем такой простой пример, у нас есть некая сумма денег и мы хотим купить автомобиль, и здесь сразу возникает такое условие, если у нас есть достаточно денег то мы можем купить данный автомобиль, иначе не можем.
Var money = 35000; // Допустим у нас есть 35 000 евро //Машину которую мы хотим купить стоит 50 000 евро. И возникает такое условие if(money > 50000){ document.write("Мы можем купить автомобиль"); }else{ document.write("Недостаточно денег для покупки машины"); }
Сохраняем документ, открываем его в браузере и видим, что на странице вывелось такое сообщение "Недостаточно денег для покупки машины". Если же у нас было бы больше 50 000 евро, то выполнился бы код из блока if. Если бы у нас было бы ровно 50 000 евро, то мы также не смогли бы купить автомобиль, потому что 50 000 не больше 50 000. Для того чтобы условие в данном случае было истина, то нужно написать знак больше либо равно (>=).
Замечание! Логическая операция равно пишется двумя знаками равенства (==) . Также присутствует и логическая операция меньше или равно (
Если присутствует только один оператор то фигурные скобки ставить необязательно, если в блоке больше чем один оператор, то фигурные скобки нужны обязательно.
Пример приведенный выше, будет прекрасно работать и без фигурных скобок, так как в обоих блоках находятся только по одному оператору.
Внутри if можно написать любые логические операции , будь то они простые или сложные. Можно использовать и операторы AND (&&) и OR (||).
Замечание! Присутствие блока else, не является обязательным .
Например, если a равен b, и c равен d, то выводим соответствующее сообщение, иначе если отсутствует блок else, то просто идем дальше, к следующей строчке.
Var a = 4, b = 4, c = 8, d = 8; if((a == b) && (c == d)) document.write("a равен b И c равен d"); document.write("Следующая строчка кода");
После блока if, может последовать один и больше блоков else if, и в конце уже блок else. Это удобно в случае, когда нужно использовать больше чем одно условие.
Для лучшего понимания возьмем какой-то пример из повседневной жизни. Например, у нас есть определенное кол-во розеток. Если у нас в комнате только одна розетка, то мы можем подключить только одно устройство, если две розетки то мы можем подключить две устройства и если больше, то мы можем подключить к электрической сети, все устройства из дома.
Теперь перейдем к программированию.
Var socket = 2; // Кол-во розеток в доме if(socket == 1) document.write("
Мы можем подключить только одно устройство
"); else if(socket == 2){ document.write("Мы можем подключить только две устройства
"); document.write("Например телевизор и ноутбук
"); }else{ document.write("Мы можем подключить к электрической сети все устройства из дома
"); }В зависимости от значения переменной socket, сработает тот или иной блок кода. Как Вы уже наверняка поняли, что если socket равен 1, то сработает первый блок кода. Если socket равен 2, то сработает второй блок кода и если socket имеет любое другое значение (даже отрицательное число) то сработает третий блок кода.
Сокращенную запись можно использовать в случае, когда в зависимости от некого условия, переменная может получить то или иное значение.
Например, если значение переменной a больше значения переменной b, то в переменную x запишем такое сообщение, "Переменная a больше переменной b" , иначе запишем что "Переменная a меньше переменной b".
Var a = 50, b = 100, x; x = (a > b) ? "
Переменная a больше переменной b
" : "Переменная a меньше переменной b
"; //Выводим полученный результат document.write(x);Вот и все о чем я хотел Вам сказать в этой статье. Условный оператор if-else используется, нежели в каждом скрипте, поэтому очень важно его знать и понимать. В следующей статье я Вам расскажу об еще одном условном операторе switch-case.
В JavaScript есть конструкция условий, которая влияет на выполнения ход программы. Если (по английски if) что-то есть, что-то истинно, тогда делать одно, иначе (по английски else) - делать другое.
Давайте сразу рассмотрим схему работы инструкции if , она проста и не требует больших объяснений.
If (условие) { код для выполнения, если условие истинно }
Всё просто: если условие истинно, тогда код в блоке {...} выполняется.
Var digit = 4; if (digit == 4) { document.write("Значение переменной digit равно 4."); }
Можно сделать немного странный код:
Var digit = 4; if (true) { document.write("Условие истинно."); }
В паре с инструкцией if может использоваться инструкция else . Она переводится как "иначе" и задаёт альтернативный код.
Var digit = 4; if (digit
Обратите внимание на разное написание фигурных скобок в данном примере у инструкций if и else. Так писать совсем не обязаетльно, оба синтаксиса правильны.
После инструкции else может идти новая инструкция if. Так мы выполним проверку множественных условий.
Var digit = 4; if (digit
В JavaScript нет инструкции elseif (одним словом), как в PHP.
Если вам нужно выполнить только одну инструкцию, то фигурные скобки блока {...} не нужны. В нашем примере их можно не писать:
Var digit = 4; if (digit
Инструкция if (условие) вычисляет и преобразует условие (выражение) в скобках к логическому типу boolian (истина или ложь).
Повторим что есть ложь в JavaScript.
Всё остальное является истиной.
Пара возможных ошибок:
If ("false") document.write("Это истина.
");
if (false) document.write("Это истина.
");
Тут нужно отличить строку "false" (взята в кавычки), от значения булевого типа false.
If (" ") document.write("Это истина.
");
else document.write("Это ложь.
");
Тут нужно отличить строку " " (внутри пробел), от пустой строки "". Пробел внутри строки делает её не пустой, а содержащий символ. Для интерпритатора не важно буква или пробел - символ есть символ.
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 = "Много"; }
Вопросы для самоконтроля:
Оператор 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: Запрашивать у пользователя ввести цвет. Выводить перевод на английский язык введенного цвета. Для цвета "синий" и "голубой" выдавать одно и то же значение.
| var color = prompt("Какой цвет?" ) ; |
var color = prompt("Какой цвет?");
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 ворон
Вопросы для самоконтроля:
Синтаксис:
for(начальное значение счетчика; условие; приращение счетчика) { //..блок операторов.. }
Важно: Цикл в javascript for используется, когда заранее известно, сколько раз должны повториться циклические действия (сколько итераций у цикла)
for(var i = 0; условие; приращение счетчика) { //..блок операторов.. }
for(var i = 0; условие; i++) { //..блок операторов.. }
for(var i = 0; i<10; i++) { //..блок операторов.. }
Рассмотрим пример использования цикла for в javascript:
Пример 5: Вывести последовательность чисел 0 1 2 3 ... 9 , каждую цифру - с новой строки. 0 1 2 ... 8 9
for (var i=0; i<10; i++)
{
document.write(i+"
");
}
В примере на экран выводятся значения счетчика цикла, так как приращение счетчика i++ , соответственно, на экране будут появляться 0 1 2 3 ... 9
, причем каждая цифра - с новой строки (тег
).
Задание Js 3_9. 1 до 15 .
Фрагмент кода:
For (var i=...;...;...){ sum = sum + ...; } ...
Оператор 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;
}
Задание Js 3_10. Вывести сумму всех целых чисел от 1 до 15 , исключив из общей суммы числа 5 и 7 .
Оператор Exit
В языке javasctipt предусмотрен оператор выхода из программного кода - оператор exit .
Чаще всего оператор используется для исключения ошибки ввода пользователя.
Пример 6: Запрашивать пользователя ввести число. Если введено не число, то выводить сообщение "Необходимо число!" и останавливать работу программы.
var number = prompt("Введите число");
number=parseInt(number); // возвратит NaN - не число
В случае, если введено не число, функция возвратит значение NaN (с англ. not a number - не число).
x = isNaN(number); // возвратит true, если значение не числовое
Функция isNaN возвращает значение true в случае, если переменная не является числом
if (x){ alert("Необходимо число!"); exit; // выход из программы }
alert("Введите второе число");// при вводе не числа оператор не выполнится
Вопросы для самоконтроля:
Возможно ли несколько счетчиков в одном FOR?
Интересная работа с циклом for возможна при использовании одновременно двух счетчиков в цикле
.
Рассмотрим пример:
Пример 7: При помощи скрипта распечатать следующие пары переменная-значение в три строки: i=0 j=2 i=1 j=3 i=2 j=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:
Вспомним теги:
теги нумерованного списка:
| <ol > <li > <li > <li > </ ol > |
теги маркированного списка:
var listType=prompt("Введите "1" - если маркированный список, "2" - если нумерованный список");
var kolvo=prompt("Введите количество пунктов");
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("
Задание 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 > |
| - | - |
Результат:
Дополнительно:
| <td bgcolor = "red" > -</ td > |
Результат:
Вопросы для самоконтроля:
Синтаксис оператора 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 .
Рассмотрим работу оператора на примере:
Пример: написать в программе оператор с ошибкой. Проверять наличие ошибки в предполагаемом ошибочном коде: если ошибка в коде присутствует - выдавать сообщение "обработка ошибки: название ошибки" . После проверки ошибочного оператора, независимо от того, есть ли в коде ошибка, выдавать сообщение "завершающие действия"
alert("до"); try { promt("введите число"); // оператор с ошибкой }
Try с англ. - "пытаться", таким образом, ставим оператор try перед фрагментом кода, который, возможно, содержит ошибку (в нашем случае ошибка действительно есть).
| 6 7 8 9 | catch (e) { alert("обработка ошибки: " + e.message ) ; } |
catch(e) { alert("обработка ошибки: "+e.message); }
Если ошибка действительно есть, то оператор catch (с англ. "ловить") сохраняет эту ошибку в объекте e . В дальнейшем ее можно вывести в диалоговое окно - e.message .
finally { alert("завершающие действия"); } alert("после");
Если ошибка все же есть, то интерпретатор после ее вывода в нашем примере перейдет на выполнение блока catch , а затем finally (с английского "завершение", "наконец"), который выполнится всегда, независимо от того, была ли ошибка или нет. Даже если возникла ошибка в блоке catch .
Важно: Блок finally в конструкции необязателен.
Задание Js 3_17. Выполните пример, описанный выше, со следующими модификациями:
Резюме:
На уроке были рассмотрены следующие операторы языка javascript и конструкции:
Javascript условные операторы:
Операторы цикла:
Итоговое задание Js 3_18.
Создать игру для двоих:
Вопросы для самоконтроля:
