Опубликован: 19.07.2010 | Доступ: свободный | Студентов: 1663 / 146 | Оценка: 4.07 / 3.43 | Длительность: 20:59:00
Самостоятельная работа 2:

Введение в JavaScript. Программное взаимодействие с HTML документами на основе DOM API. Использование регулярных выражений. Отладка и профилирование JavaScript сценариев в IE8

< Лекция 5 || Самостоятельная работа 2: 123 || Лекция 6 >
Область видимости переменных

:Работа с переменными в теле функции подчиняется следующим правилам.

  • Если переменная объявлена с помощью ключевого слова var, доступ к ней осуществляется по правилам, подобным тем, которые используются в языке С.
  • Переменная, объявленная внутри функции, считается локальной. Область видимости такой переменной ограничивается телом функции, в которой она объявлена.
  • Переменная, объявленная вне функции, считается глобальной. К ней можно обращаться из любой точки сценария.
  • Если локальная и глобальная переменные имеют одинаковые имена, то в теле функции локальная переменная "маскирует" глобальную.
  • Если переменная создается автоматически, т.е. если она не объявлена с помощью ключевого слова var, но присутствует в левой части оператора прямого присваивания, то она считается глобальной и становится доступной из любой точки сценария.

Диалоговые элементы

В JavaScript поддерживается работа со следующими диалоговыми элементами интерфейса:

  1. Alert. Применяется для уведомления пользователя, работающего с веб-браузером.

    Синтаксис:

    alert("сообщение");
  2. Confirm. Применяется для выбора пользователем одного из двух вариантов ответа "Да/Нет". Соответственно Confirm возвращает значение true/false.

    Синтаксис:

    confirm("вопрос");
  3. Prompt. Применяется для ввода пользователем значения. При нажатии "OK" возвращается введенное значение, в случае "Cancel" возвращается значение null.

    Синтаксис:

    prompt("вопрос/запрос","значение по умолчанию");

Ниже приводится код веб-страницы, в которой пользователь имеет возможность выбрать цвет текста с помощью диалогового элемента

Пример 2

<html>
<body>
// здесь будет отображаться текст
<div id="c" style="color:blue">Вы выбрали цвет текста: черный</div>

<script language="JavaScript">
// пользователь выбирает цвет текста
  var tcolor = prompt("Выберите цвет текста: red, blue, green, yellow, black","black");
// задается текст
  document.getElementById("c").innerHTML = "Вы выбрали цвет текста: " + tcolor;
// задается цвет текста
  document.getElementById("c").style.color = tcolor;

</script>
</body>
</html>

Обработка событий в JavaScript

Популярность JavaScript во многом обусловлена именно тем, что написанный на нем сценарий может реагировать на действия пользователя и другие внешние события. Каждое из событий связано с тем или иным объектом: формой, гипертекстовой ссылкой или даже с окном, содержащим текущий документ.

В качестве примеров внешних событий, на которые могут реагировать объекты JavaScript, можно привести следующие.

  • окончание загрузки документа в окно (или окончание загрузки документов во все фреймы окна). Это событие связано с объектом window ;
  • щелчок мышью на объекте. Это событие может быть связано с интерактивным элементом формы или с гипертекстовой ссылкой;
  • получение объектом фокуса ввода. Это событие может быть связано с объектами типа Text, Password и с другими интерактивными элементами;
  • передача на сервер данных, введенных пользователем с помощью интерактивных элементов. Связывается с формой.

Обработка события производится с помощью специально предназначенного для этого фрагмента кода, называемого обработчиком события. Для каждого события JavaScript предоставляет свой обработчик. Однако при построении сценария можно создавать собственный обработчик события и использовать его вместо обработчика, заданного по умолчанию.

Имя обработчика определяет, какое событие он должен обрабатывать. Так, для того чтобы сценарий нужным образом отреагировал на щелчок мышью, используется обработчик с именем onClick, для обработки события, заключающегося в получении фокуса ввода, - обработчик onFocus.

Для того чтобы указать интерпретатору JavaScript на то, что обработкой события должен заниматься обработчик, необходимо включить в HTML -дескриптор следующее выражение:

имя_обработчика="команды_обработчика"

Это выражение включается в тэг, описывающий объект, с которым связано событие.

Например, если необходимо обработать событие, заключающееся в получении фокуса полем ввода, дескриптор, описывающий этот интерактивный элемент, должен иметь примерно следующий вид:

<input type="text" name="Inform" onFocus="handleFocus();">

Имя обработчика является одним из атрибутов HTML -дескриптора, а команды, предназначенные для обработки события, выступают в роли значения этого атрибута. В данном случае обработка события производится в теле функции handleFocus(). В принципе, обработчиком может быть не только функция, но и любая последовательность команд JavaScript в виде составного оператора.

Следующий пример демонстрирует обработку события, связанного с наведением курсора мыши на гиперссылку:

<a href = "http://www.myhp.edu" onmouseover="alert('An onMouseOver event'); return false">
<img src="my.gif" width="50" height="50">
</a>

Ниже приводится полный текст HTML документа c JavaScript сценарием, в котором обрабатывается событие нажатия кнопки мыши, и определяется, какая именно из них была нажата:

Пример 3.

<html>
<head>
<script language = "javascript">
function whichButton(event)
{
if (event.button == 2)
  {
  alert("Вы щелкнули правой кнопкой мыши!");
  }
else
  {
  alert("Вы щелкнули левой кнопкой мыши!");
  }
}
</script>
</head>

<body onmousedown="whichButton(event)">
<p>Щелкните любой кнопкой мыши в любом месте документа</p>
</body>

</html>

Таким образом, для того чтобы обработать какое-либо стандартное событие в браузере, необходимо добавить в подходящий HTML тэг атрибут, соответствующий этому событию, указав в качестве значения атрибута имя JavaScript функции. Список атрибутов, которые определены для HTML тэгов приводится ниже:

IE: Internet Explorer, F: Firefox, O: Opera, W3C: стандарт

Атрибут Описание IE F O W3C
onabort Прерванная загрузка изображения 4 1 9 Да
onblur утрата фокуса элементом 3 1 9 Да
onchange Изменение содержимого в поле ввода 3 1 9 Да
onclick Щелчок мыши на объекте 3 1 9 Да
ondblclick Двойной щелчок мыши на объекте 4 1 9 Да
onerror Ошибка при загрузке изображения или документа 4 1 Да
onfocus Получение фокуса элементом 3 1 9 Да
onkeydown Нажатие клавиши 3 1 Нет Да
onkeypress Клавиша нажата 3 1 9 Да
onkeyup Отжатие клавиши 3 1 9 Да
onload Завершение загрузки страницы или изображения 3 1 9 Да
onmousedown Нажатие кнопки мыши 4 1 9 Да
onmousemove Перемещение курсора мыши 3 1 9 Да
onmouseout Смещение курсора мыши с объекта 4 1 9 Да
onmouseover Наведение курсора мыши на объект 3 1 9 Да
onmouseup Отжатие кнопки мыши 4 1 9 Да
onreset Кнопка "Reset" нажата 4 1 9 Да
onresize Изменение размера окна 4 1 9 Да
onselect Выделение текста 3 1 9 Да
onsubmit Кнопка "Submit" нажата 3 1 9 Да
onunload Уход с веб-страницы 3 1 9 Да
< Лекция 5 || Самостоятельная работа 2: 123 || Лекция 6 >