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 пиксела). Если не получится, то скачайте
В повседневной жизни часто необходимо принять какое не-будь решение, в зависимости от какого то условия. Например, если на выходные погода будет теплой, то мы поедим на море, иначе, если будет пасмурно, то посидим дома.
В программировании это тоже встречается очень часто. Для этого существуют два условных операторов, это 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 .
- Оператор вопросительный знак
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: Запрашивать у пользователя ввести цвет. Выводить перевод на английский язык введенного цвета. Для цвета "синий" и "голубой" выдавать одно и то же значение.
✍ Решение:
- Создайте веб-страницу с 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 ворон
Вопросы для самоконтроля:
Синтаксис:
for(начальное значение счетчика; условие; приращение счетчика) { //..блок операторов.. }
Важно: Цикл в javascript for используется, когда заранее известно, сколько раз должны повториться циклические действия (сколько итераций у цикла)
- В качестве начального значения счетчика итераций используется выражение присваивания: например, i=0 - счетчик цикла начинается с нуля:
- В качестве приращения счетчика указывается шаг, с которым должен увеличиваться счетчик: например, указывает на то, что каждая итерация цикла будет сопровождаться его увеличением на 1 :
- Условие цикла - это и есть конечное значение счетчика: например, i10, останавливает цикл:
for(var i = 0; условие; приращение счетчика) { //..блок операторов.. }
for(var i = 0; условие; i++) { //..блок операторов.. }
for(var i = 0; i