- •1.Модель osi
- •2.Стек tcp/ip
- •3.Адресация в сетях tcp/ip
- •4. Ip адресация, понятие маски
- •5.Заголовок ip пакетов
- •6.Классификация Web-технологий
- •7.Статистические Web-технологии. Основы технологии html
- •8.Статистические Web-технологии. Таблицы html
- •9.Статистические Web-технологии. Фреймы html
- •10. Статистические Web-технологии. Формы html
- •1) Создание простой формы
- •2) Флажок (checkbox)
- •5) Выпадающий список (select)
- •6) Текстовое поле (text)
- •7) Поле для ввода пароля (password)
- •8) Многострочное поле ввода текста (textarea)
- •9) Скрытое текстовое поле
- •10) Кнопка отправки формы (submit)
- •11) Кнопка для загрузки файлов (browse)
- •12) Рамка (fieldset)
- •11. Статистические Web-технологии. Основы технологии css
- •12. Статистические Web-технологии. Css свойства текста
- •13. Статистические Web-технологии. Css свойства шрифта
- •14. Статистические Web-технологии. Css свойства таблиц
- •Vertical-align
- •15. Динамические Web-технологии. Основы технологии Java Script
- •16. Динамические Web-технологии. Java Script, глобальные и локальные переменные. Типы данных
- •17. Динамические Web-технологии. Java Script, операции над числовыми и строковыми типами данных
- •18. Динамические Web-технологии. Java Script, массивы.
- •19. Динамические Web-технологии. Java Script, операторы условного перехода
- •20.Динамические Web-технологии. Java Script, циклы.
- •21.Динамические Web-технологии. Java Script, обработка событий
- •22.Протокол http
19. Динамические Web-технологии. Java Script, операторы условного перехода
Оператор if...else
Принцип работы и синтаксис мы уже знаем. Напомню ещё раз:
|
if (условие) {этот код работает при выполненном условии} else {этот код работает, если условие не выполнено} |
А если при невыполненном условии нам вообще никакого кода не надо?
Тогда так:
|
if (условие) {этот код работает при выполненном условии} // И больше ничего |
Оператор switch
С английского switch переводится как «переключать». Это оператор-переключатель. Вот его структура (в квадратных скобках обозначены необязательные части):
|
switch (выражение) { case вариант1: код [break] case вариант2: код [break] [default: код] } |
Выражение — это контрольное, тестовое значение, с которым будут сравниваться варианты.
Выражение может быть числовым, строковым или булевым значением. При булевом значении возможны только 2 варианта: true и false (или 1 и 0). При остальных вариантов может быть сколько угодно.
Для каждого варианта пишется определённый код. Весь перебор вариантов заключён в фигурные скобки.
20.Динамические 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-узла, а лучше - после окончания загрузки страницы.
Описанная установка обработчика через свойство - очень популярный и простой способ.
У него есть один недостаток: на элемент можно повесить только один обработчик нужного события.