Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Введение в Веб программирование.doc
Скачиваний:
81
Добавлен:
07.11.2018
Размер:
4.42 Mб
Скачать

Глобальные и локальные переменные

Cуществует два вида переменных: глобальные, которые видны во всем документе во время выполнения скрипта и локальные, которые объявляются и видны только внутри функций. Отметим, что глобальные переменные объявляются перед определением функции и видны также внутри функции. Глобальная переменная может быть переопределена как локальная внутри функции.

Если перед именем переменной ключевое слово var не ставится, то переменная также считается глобальной и принадлежат объекту window как свойство. Если значение такой глобальной переменной не определено, а к ней обращаются напрямую, это вызовет ошибку выполнения скрипта. Если же к переменной обращаться как к свойству объекта window, то будет возвращено значение undefined.

<!-- пример pr14 -->

<html>

<body>

<script type="text/javascript">

var x="global2";

function myFunc() {

var x = "local";//переопределение глобал переменной

y = "global1";

var z=5;

}

myFunc();

alert(window.y); //вернет global1

alert(x); //вернет слово global2

alert(z); //ошибка

</script>

</body>

</html>

Модель событий

Event Model, или модель событий – это способность JavaScript реагировать на изменение состояния документа в браузере. При возникновении события, например при нажатии на ссылку или при отправке заполненной формы вызывается обработчик события. Событие представляет собой указатель на метод – обработчик события, который вызывается при возникновении события. Ниже приведены основные события, которые поддерживаются всеми браузерами:

onblur – происходит, когда пользователь убирает фокус с элемента формы;

onchange –элемент формы теряет фокус, а его значение изменилось;

onclick – происходит при нажатии мышкой на любой визуальный элемент;

ondblclick – аналогично предыдущему, но при двойном нажатии;

onfocus – элемент получает фокус, то есть выбирается этот элемент;

onkeydown – происходит, когда пользователь нажимает клавишу на клавиатуре;

onkeypress – пользователь нажимает и отпускает клавишу на клавиатуре;

onkeyup – происходит, когда пользователь отпускает нажатую клавишу;

onload – происходит, когда документ (или фрейм) загружен;

onmousedown – происходит, когда пользователь нажимает клавишу мыши;

onmousemove – пользователь двигает курсором мыши над элементом;

onmouseout – происходит, когда указатель мыши покидает область элемента;

onmouseover – происходит, когда указатель мыши попадает в область элемента;

onmouseup – происходит, когда пользователь отпускает нажатую клавишу мыши;

onreset – происходит, когда значения элементов формы сбрасываются;

onselect – происходит, когда пользователь выделяет текст в элементе формы;

onsubmit – происходит, когда пользователь отсылает форму;

onunload – пользователь покидает текущий документ.

В первых версиях браузеров обработчики событий определялись как дополнительные атрибуты в дескрипторах HTML. Чтобы обработать какое-либо стандартное событие в браузере, необходимо было добавить в подходящий HTML тэг дополнительный атрибут, соответствующий этому событию, указав в качестве значения атрибута имя JavaScript функции. Список атрибутов, которые определены для HTML тэгов приведены выше. После имени атрибута - события записывается знак равенства, после чего в двойных или ординарных апострофах указывается обработчик события - функция или группа команд JavaScript в виде: имя_обработчика="команды_обработчика". Рассмотрим пример.

<a href="pr3.htm" onclick="alert('Links clicked')">

click me</a>

В следующем примере чтобы получить имя браузера, следует нажать кнопку "Browser"

<!-- пример pr15: получение типа и версии браузера -->

<html> <head>

<title>Test of Browser name</title>

</head>

<body>

<h1 align=center>Проверка типа браузера</h1>

<P><hr>

<form name=fr>

<input type=button name=browser value=Browser

onClick= "alert(window.navigator.appName+navigator.appVersion)">

</form>

</body> </html>

Имя и версия браузера здесь возвращаются через свойства navigator.appName и navigator.appVersion

Cобытия могут рассматриваться как методы или свойства объектов JavaScript. Для этого нужно получить элемент и назначить обработчик свойству on+имя. Вот пример установки обработчика события click на элемент с id="button":

<input id="button" type="button" value="Нажми"/>

document.getElementById('button').onclick = function() {

alert('Click')

}

Следует обратить внимание, что onclick это именно свойство, а не атрибут. Обработчик - не текст, а ананимная функция javascript. Этот код работает также как код HTML:

<input type="button" onclick=" alert('Click!') "/>

Можно и не создавать анонимную функцию, а использовать обычную:

function doIt() {

alert('Спасибо')

}

document.getElementById('button').onclick = doIt

Свойству присваивается именно сама функция-обработчик doIt, но без скобок, а не doIt(). При использовании свойства HTML - наоборот, скобки нужны:

<input type="button" id="mybutton" onclick="doIt()"/>

Когда браузер видит событие onclick в HTML-разметке - он создает функцию из содержимого кавычек.