Javascript if else сокращенная запись. Условный оператор if else. Другие условные конструкции в JavaScript
В повседневной жизни часто необходимо принять какое не-будь решение, в зависимости от какого то условия. Например, если на выходные погода будет теплой, то мы поедим на море, иначе, если будет пасмурно, то посидим дома.
В программировании это тоже встречается очень часто. Для этого существуют два условных операторов, это 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
После блока 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 имеет любое другое значение (даже отрицательное число) то сработает третий блок кода.
Сокращенная запись if else
Сокращенную запись можно использовать в случае, когда в зависимости от некого условия, переменная может получить то или иное значение.
Например, если значение переменной 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 , она проста и не требует больших объяснений.
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 .
- Оператор вопросительный знак
The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
if (condition) statement1 condition An expression that is considered to be either truthy or falsy . statement1 Statement that is executed if condition is truthy . Can be any statement, including further nested if statements. To execute multiple statements, use a block statement ({ ... }) to group those statements. To execute no statements, use an empty statement. statement2 Statement that is executed if condition is falsy and the else clause exists. Can be any statement, including block statements and further nested if statements.Description
Multiple if...else statements can be nested to create an else if clause. Note that there is no elseif (in one word) keyword in JavaScript.
If (condition1) statement1 else if (condition2) statement2 else if (condition3) statement3 ... else statementN
To see how this works, this is how it would look if the nesting were properly indented:
If (condition1) statement1 else if (condition2) statement2 else if (condition3) ...
To execute multiple statements within a clause, use a block statement ({ ... }) to group those statements. In general, it is a good practice to always use block statements, especially in code involving nested if statements:
If (condition) { statements1 } else { statements2 }
Do not confuse the primitive Boolean values true and false with truthiness or falsiness of the Boolean object. Any value that is not false , undefined , null , 0 , -0 , NaN , or the empty string (""), and any object, including a Boolean object whose value is false, is considered truthy when used as the condition. For example:
Var b = new Boolean(false); if (b) // this condition is truthy
Examples
Using if...else
if (cipher_char === from_char) { result = result + to_char; x++; } else { result = result + clear_char; }Using else if
Note that there is no elseif syntax in JavaScript. However, you can write it with a space between else and if:
If (x > 50) { /* do the right thing */ } else if (x > 5) { /* do the right thing */ } else { /* do the right thing */ }
Assignment within the conditional expression
It is advisable to not use simple assignments in a conditional expression, because the assignment can be confused with equality when glancing over the code. For example, do not use the following code:
If (x = y) { /* do the right thing */ }
If you need to use an assignment in a conditional expression, a common practice is to put additional parentheses around the assignment. For example:
If ((x = y)) { /* do the right thing */ }
Specifications
| Specification | Status | Comment |
|---|---|---|
| ECMAScript Latest Draft (ECMA-262) |
Draft | |
| ECMAScript 2015 (6th Edition, ECMA-262) The definition of "if statement" in that specification. |
Standard | |
| ECMAScript 5.1 (ECMA-262) The definition of "if statement" in that specification. |
Standard | |
| ECMAScript 3rd Edition (ECMA-262) The definition of "if statement" in that specification. |
Standard | |
| ECMAScript 1st Edition (ECMA-262) The definition of "if statement" in that specification. |
Standard | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | Server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | Node.js | |
| if...else | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 3 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 | nodejs Full support Yes |
Управляющие инструкции - это инструкции, которые позволяют управлять выполнением программного кода. Обычно выполняемый код в управляющей инструкции называют телом этой инструкции.
Управляющие инструкции могут быть вложенными, а также использоваться внутри других управляющих инструкций.
Условные инструкции
По умолчанию интерпретатор JavaScript выполняет инструкции одну за другой в порядке их следования в исходном коде. В тех случаях, когда выполнение или невыполнение некоторых инструкций должно зависеть от выполнения или невыполнения некоторого условия, используются условные инструкции.
Инструкция if
Инструкция if имеет две формы. Синтаксис первой формы:
Выражение в круглых скобках называется условием выполнения инструкции if или кратко условием . Сначала вычисляется значение выражения. Полученное значение, если необходимо, неявно преобразуется к булеву типу. Если результатом вычисления выражения является значение true , то инструкция выполняется. Если выражение возвращает false , то инструкция не выполняется:
If (true) alert("Выполнено!"); if (false) alert("Не выполнится!");
Синтаксис if позволяет выполнить только одну инструкцию, однако если требуется выполнить более одной инструкции нужно использовать составную инструкцию :
If (true) { var str = "Hello!"; alert(str); }
Синтаксис второй формы:
If (выражение) инструкция; else инструкция;
Ключевое слово else позволяет добавить инструкцию, выполняемую в том случае, если условие имеет ложное значение:
If (false) alert("Не выполнится"); else alert("Выполнится");
Как уже было сказано, управляющие инструкции могут быть вложенными, что позволяет создавать следующие конструкции:
Var num = 2; if (num == 1) { alert("значение num: " + num); } else if (num == 2) { alert("значение num: " + num); } else { alert("Не знаю такого числа!"); }
В этом коде нет ничего особенного. Это просто последовательность инструкций, где каждая инструкция if является частью else предыдущей инструкции if . Такая форма записи на первый взгляд может показаться не совсем понятной, поэтому рассмотрим синтаксически эквивалентную форму, показывающую вложенность инструкций if:
Var num = 2; if (num == 1) { alert("значение num: " + num); } else { if (num == 2) { alert("значение num: " + num); } else { alert("Не знаю такого числа!"); } }
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 = "Много"; }
Вопросы для самоконтроля:
- Каков синтаксис тернарного оператора?
- Сколько аргументов у тернарного оператора?
Оператор переключения в 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
- Проверьте значение переменной с помощью конструкции switсh , выводя на каждое значение - соответствующий перевод:
- Для цветов "синий" и "голубой" выполните группировку:
- Организуйте вывод для тех цветов, которые не предусмотрены программой:
- Протестируйте сценарий в браузере.
| 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 ворон
- В зависимости от введенного числа, меняется окончание у слова "ворона" .
- Для проверки использовать оператор Switch javascript.
- Сохраните данную страницу в папке результатов (она пригодится для дальнейших работ).
Вопросы для самоконтроля:
- В каком случае целесообразно в качестве условного оператора использовать конструкцию switch ?
- Для чего служит блок default в операторе switch ?
- Обязательно ли использование оператора break в конструкции switch ?
- Как осуществляется группировка для нескольких вариантов значений в операторе switch ?
Циклические операторы языка javaScript - For
Синтаксис:
for(начальное значение счетчика; условие; приращение счетчика) { //..блок операторов.. }
Важно: Цикл в javascript for используется, когда заранее известно, сколько раз должны повториться циклические действия (сколько итераций у цикла)
- В качестве начального значения счетчика итераций используется выражение присваивания: например, i=0 - счетчик цикла начинается с нуля:
- В качестве приращения счетчика указывается шаг, с которым должен увеличиваться счетчик: например, указывает на то, что каждая итерация цикла будет сопровождаться его увеличением на 1 :
- Условие цикла - это и есть конечное значение счетчика: например, i10, останавливает цикл:
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 , который должен менять свое значение от 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 .
- В качестве последовательности чисел используйте счетчик цикла for .
- Для переменной-сумматора следует использовать идентификатор переменной 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 значением, введенным пользователем в модальное окно:
- Используя функцию parseInt преобразования строки в целое число, проверьте, является ли введенное значение числом:
- Проверьте значение переменной number с помощью функции isNaN:
- По правилу "лжи" организуйте проверку значения переменной x . Если значение не числовое выведите соответствующее замечание и завершите программу:
- Для продолжения программы (если введенное значение было числом), выведите следующее окно с предложением ввода:
- Протестируйте сценарий в браузере.
var number = prompt("Введите число");
number=parseInt(number); // возвратит NaN - не число
В случае, если введено не число, функция возвратит значение NaN (с англ. not a number - не число).
x = isNaN(number); // возвратит true, если значение не числовое
Функция isNaN возвращает значение true в случае, если переменная не является числом
if (x){ alert("Необходимо число!"); exit; // выход из программы }
alert("Введите второе число");// при вводе не числа оператор не выполнится
Вопросы для самоконтроля:
- Перечислите три параметра цикла for и поясните их назначение.
- Какие операторы предназначены для выхода из цикла и для его прерывания? Приведите примеры их использования.
- Для чего предназначен оператор 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" - если нумерованный список");
- , для маркированного (цифра 2) - тег
- . Если введено другое значение, выведите замечание и закончите программу:
- Инициализируйте переменную kolvo значением, введенным пользователем в модальное окно:
- Для преобразования строкового значения в числовое используйте функцию parseInt:
- Поскольку списки закрываются соответствующими тегами, в зависимости от вида списка выведите закрывающие теги:
- ")
else {
alert("Введите правильный тип");
exit;
}
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 > |
| - | - |
- Для рисования 9 строк необходимо организовать внешний цикл for со счетчиком i .
- Для рисования 9 ячеек в каждой строке необходимо организовать внутренний (вложенный) цикл for со счетчиком j .
- Для отрисовки тегов ячеек и строк следует использовать метод document.write .
Результат:
Дополнительно:
- В ячейки таблицы вывести таблицу умножения, используя счетчики цикла (i и j).
- Первый ряд и первую колонку вывести с красным фоном (атрибут ячейки таблицы bgcolor):
<td bgcolor = "red" > -</ td > -
Результат:
Вопросы для самоконтроля:
- Объясните, что значит понятие «динамическое построение страницы»?
- Какая конструкция языка чаще всего используется при динамическом построении страницы?
Циклические операторы языка 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:
- Сообщение с извещением об ошибке следует разместить в блок catch:
- Завершающее сообщение, которое необходимо выводить независимо от того, есть ли в коде ошибка, поместите в блок finally:
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.
Создать игру для двоих:
- Программа просит первого игрока ввести число от 1 до 100 (второй игрок не видит введенное число). Затем второго игрока просит угадать введенное число. В ответ выводится сообщение «мало» либо «много» в зависимости от введенного ответа. Если игрок угадывает, - выводится поздравление. Если не угадывает – игра продолжается (до тех пор, когда число действительно будет угадано).
- Просчитывать число попыток и выдавать результат, когда число разгадано.
Вопросы для самоконтроля:
- В каких случаях целесообразно использовать цикл For In ? Назовите пример его использования.
- Каково назначение оператор try..catch ?
- Объясните назначение каждого блока оператора try..catch .
