Оператор if...else
Принцип работы и синтаксис мы уже знаем. Напомню ещё раз:
| if (условие) {этот код работает при выполненном условии} else {этот код работает, если условие не выполнено} |
А если при невыполненном условии нам вообще никакого кода не надо?
Тогда так:
| if (условие) {этот код работает при выполненном условии} // И больше ничего |
Оператор switch
С английского switch переводится как «переключать». Это оператор-переключатель. Вот его структура (в квадратных скобках обозначены необязательные части):
| switch (выражение) { case вариант1: код [break] case вариант2: код [break] [default: код] } |
Выражение — это контрольное, тестовое значение, с которым будут сравниваться варианты.
Выражение может быть числовым, строковым или булевым значением. При булевом значении возможны только 2 варианта: true и false (или 1 и 0). При остальных вариантов может быть сколько угодно.
Для каждого варианта пишется определённый код. Весь перебор вариантов заключён в фигурные скобки.
Динамические Web-технологии. Java Script, циклы.
Цикл while
Цикл while имеет вид:
while (условие) {
// код, тело цикла
}
Пока условие верно – выполняется код из тела цикла.
var i = 3;
while (i) { // при i, равном 0, значение в скобках будет false и цикл остановится
alert(i);
i--;
}
Цикл do…while
Проверку условия можно поставить под телом цикла, используя специальный синтаксис do..while:
do {
// тело цикла
} while (условие);
Цикл, описанный, таким образом, сначала выполняет тело, а затем проверяет условие.
var i = 0;
do {
alert(i);
i++;
} while (i < 3);
Цикл for
Чаще всего применяется цикл for. Выглядит он так:
for (начало; условие; шаг) {
//... тело цикла...
}
Пример цикла, который выполняет alert(i) для i от 0 до 2 включительно (до 3):
var i;
for (i = 0; i < 3; i++) {
alert(i);
}
21)Динамические Web-технологии. Java Script обработка событий
Для того, чтобы скрипт реагировал на событие - нужно назначить хотя бы одну функцию-обработчик. Обычно обработчики называют "on+имя события", например: onСlick.
Нужно сразу отметить, что JavaScript - однопоточный язык, поэтому обработчики всегда выполняются последовательно и в общем потоке. Это значит, что при установке обработчиков двух событий, которые возникают на элементе одновременно, например mouseover (мышь появилась над элементом) и mousemove (мышь двигается над элементом), их обработчики будут выполнены последовательно.
Существует несколько способов назначать обработчик на конкретное событие элемента:
1) Через атрибут HTML-тега
Обработчик события можно указать в виде inline-записи, прямо в атрибуте onСобытие.
Например, для обработки события click на кнопке input, можно назначить обработчик onСlick вот так:
<input id="b1" value="Нажми Меня" onclick="alert('Спасибо!');" type="button"/>
Когда использовать? Такой способ установки обработчиков очень удобен - он нагляден и прост, поэтому часто используется в решении простых задач.
У этого способа установки обработчика есть и минусы. Как только обработчик начинает занимать больше одной строки - читабельность резко падает.
Можно назначить и функцию. Например, пусть при клике на кнопку input запускается функция count_rabbits(). Для этого запишем вызов функции в атрибут onClick:
<html>
<head>
<script type="text/javascript">
function count_rabbits() {
for(var i=1; i<=3; i++) {
// оператор + соединяет строки
alert("Из шляпы достали "+i+" кролика!")
}
}
</script>
</head>
<body>
<input type="button" onclick="count_rabbits()" value="Считать кролей!"/>
</body>
</html>
2) Через свойство события
Самый близкий родственник описанного выше способа - установка функции-обработчика через свойство on cобытие соответствующего элемента. Этот способ тоже будет работать в любом браузере с поддержкой JavaScript.
Для этого нужно:
1. получить элемент
2. назначить обработчик свойству on+имя
Вот пример установки обработчика события click на элемент с id="myElement":
document.getElementById('myElement').onclick = function() {
alert('Спасибо')
}
<input id="myElement" type="button" value="Нажми меня"/>
Конечно, можно и не создавать анонимную функцию, а использовать любую уже готовую:
function doSomething() {
alert('Спасибо')
}
document.getElementById('button').onclick = doSomething;
Все вызовы типа getElementById должны запускаться после описания соответствующего HTML-узла, а лучше - после окончания загрузки страницы.
Описанная установка обработчика через свойство - очень популярный и простой способ.
У него есть один недостаток: на элемент можно повесить только один обработчик нужного события.
