1.3. Задания на лабораторную работу № 5

Задание № 1. Воспользовавшись библиотекой jQuery, модифицировать HTML-код, хранящийся в документе z1.html следующим образом:

– задать цвет фона для текста документа;

– задать подчеркивание для заголовков второго уровня;

– добавить ко всем абзацам класс ‘text’;

– удалить у названия таблицы выравнивание по центру и сделать его шрифт жирным;

– каждую четную строчку таблицы окрасить в другой фоновый цвет;

– добавить в нижнюю часть страницы «© Работа выполнена студентом [группа и фамилия]».

Задание № 2. Воспользовавшись библиотекой jQuery, модифицировать HTML-код, хранящийся в документе z2.html следующим образом:

– добавить к тегам абзаца с помощью литерала стиль, задающий: абзацный отступ, шрифт Times New Roman размером 14 пунктов;

– добавить к изображению атрибуты alt и title, содержащие номер и название рисунка;

– добавить к элементам первого списка с помощью литерала стиль, задающий курсивный шрифт размером 12 пунктов;

– добавить к элементам второго списка с помощью литерала стиль, задающий подчеркнутый шрифт размером 12 пунктов;

– выровнять рисунок по центру;

– заменить подпись (элемент с ID “copy”) на «© Работа выполнена студентом [группа и фамилия]».

2. Лабораторная работа № 6.

РАБОТА С СОБЫТИЯМИ В JAVASCRIPT

2.1. Общие методические указания по выполнению

лабораторной работы

Цели работы:

– освоить методы создания обработчиков событий в JavaScript;

– изучить особенности обработки событий с помощью библиотеки jQuery.

Среда выполнения и отладки:

Текстовый редактор Notepad++, веб-браузер (Firebox, Internet Explorer, Opera или др.).

2.2. Теоретические сведения

Рассмотрим события, которые можно обрабатывать в JavaScript, распределив их по различным категориям.

События мыши

click. Это событие запускается, когда пользователь нажимает и отпускает кнопку мыши.

dblclick (double-click). Запускается, когда пользователь дважды нажимает и отпускает кнопку мыши.

mousedown. Это первая часть щелчка – момент, когда пользователь нажимает кнопку мыши, но не отпускает ее.

mouseup. Событие mouseup – это вторая часть щелчка – момент, когда пользователь отпускает кнопку.

mouseover. Запускается, когда пользователь проводит указателем мыши по элементу страницы.

mouseout. Запускается, когда пользователь убирает указатель мыши с элемента.

mousemove. Это событие запускается, когда пользователь передвигает указатель мыши.

События документа/окна

load. Запускается, когда браузер заканчивает загрузку всех файлов веб-страницы: самого файла HTML, связанных изображений, flash-анимации, внешних файлов CSS и JavaScript.

resize. Запускается, когда пользователь изменяет размер окна браузера, щелкая кнопку максимальной ширины окна, либо задает ширину окна браузера, передвигая его границу.

scroll. Запускается, когда пользователь использует полосу прокрутки или клавиатуру (клавиши Вверх/Вниз/Home/End и т. д.) либо прокручивает веб-страницу с помощью колесика мыши.

unload. Запускается, когда пользователь щелкает на ссылке для перехода на другую страницу, закрывает вкладку в окне браузера или само окно.

События форм

submit. Запускается, когда посетитель подтверждает форму с помощью щелчка на кнопке Submit (Подтвердить) или просто нажатием клавиши Enter, когда курсор находится в текстовом окне.

reset. Кнопка Reset (Отменить) используется, чтобы отменить все изменения, сделанные в форме.

change. Многие поля форм запускают это событие при изменении их статуса, например, когда кто-нибудь нажимает переключатель или выбирает пункт из раскрывающегося меню.

focus. Запускается при переходе в текстовое окно или щелчке в нем кнопкой мыши. Иначе говоря, теперь внимание браузера сфокусировано на этом элементе страницы.

blur. Противоположно событию focus. Запускается, когда поле выводится из фокуса (при нажатии клавиши табуляции или при щелчке за пределами поля).

События клавиатуры

keypress. Это событие совпадает с моментом, в который пользователь нажимает клавишу. keypress вызывается снова и снова до тех пор, пока клавиша удерживается нажатой.

keydown. Подобно событию keypress, оно запускается при нажатии клавиши. На самом деле, оно запускается сразу после события keypress. В Firefox и Opera keydown запускается только один раз; в Internet Explorer и Safari – работает так же, как и keypress, – оно продолжается все то время, пока клавиша нажата.

keyup. Запускается, когда пользователь отпускает клавишу.

Использование событий функциями

1. Встроенные события.

В данном случае обработчик событий присваивается HTML страницы напрямую. Например, чтобы заставить появиться окно предупреждения, когда пользователь наводит указатель мыши на какую-либо ссылку, можно написать следующее:

<а href="page.html" onmouseover="alert(‘Это ссылка!’);">Ссылка</а>

Имена обработчика событий создаются простым добавлением слова on к началу наименования события, то есть обработчик события наведения указателя мыши называется onmouseover, а обработчик события щелчка – onclick и т. д.

Можно использовать технику встроенных событий для вызова предварительно созданной функции:

<body onload=“startSlideShow()”>

2. Традиционная модель.

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

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

function message() {

alert(«Добро пожаловать!»);

}

window.onload=message;

В первых трех строках создана простая функция message. Если программа ее вызывает, открывается окно с текстом «Добро пожаловать!». Событие происходит в строке 4, где объекту window присвоен обработчик события onload – в момент загрузки страницы вызывается функция.

3. Приемники событий.

Консорциум W3C ввел инновацию, называемую приемниками событий.

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

Firefox, Safari,Opera и Internet Explorer c 9-й версии используют модель приемников событий W3C. Для привязки к событию функции используется метод addEventListener():

element.addEventListener(имя события, функция-обработчик, false)

Пример:

function ButtonClick() {

…

}

var b = document.getElementById(“mybutton”);

b.addEventListener(“click”, function(){ alert(“Спасибо, что щелкнули на мне!”);}, false);

b.addEventListener(“click”, ButtonClick(), false);

Internet Explorer версии ниже 9 не поддерживает метод addEventListener().

В версии IE5 и выше определен похожий метод:

element.attachEvent(имя события, обработчик)

Пример реализации обоих методов:

var b = document.getElementById(“mybutton”);

var handler = function() {alert(“Спасибо!”);};

if (b.addEventListener)

b.addEventListener(“click”, handler, false);

else if (b.attachEvent)

b.attachEvent(“onclick”, handler);

4. Способ jQuery

Рассмотрим простой пример. Допустим, имеется веб-страница со ссылкой, которой присвоен ID menu. Когда посетитель наводит указатель мыши на эту ссылку, должен появился ранее скрытый список дополнительных ссылок, имеющий ID submenu.

Процесс можно подразделить на четыре шага.

Шаг 1. Выбор меню:

$('#menu')

Шаг 2. Прикрепление события:

$('#menu').mouseover();

Шаг 3. Добавление анонимной функции:

$('#menu').mouseover(function() {

})

Шаг 4. Добавление необходимых действия (в данном случае показывается подменю):

$('#menu').mouseover(function() {

$('#submenu').show();

}) ;

Ожидание загрузки HTML

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

Основная структура функции ready() такова:

$(document).ready(function() {

//здесь находится код JavaScript

});

Событие hover()

Функция hover() работает, как любое другое событие, кроме того, что вместо принятия одной функции в качестве аргумента, она принимает две функции. Первая функция выполняется при прохождении указателя мыши по элементу, а вторая – когда указатель покидает элемент. Структура выглядит так:

$('#селектор').hover(функция1, функция2);

Можно использовать функцию hover() с двумя анонимными функциями (можно вместо анонимных функций использовать обычные). Допустим, что кто-то наводит указатель мыши на ссылку с ID menu и требуется, чтобы появился на данный момент невидимый div с ID submenu. Когда указатель сдвигают со ссылки, подменю снова оказывается скрытым. Для осуществления этого можно использовать функцию hover():

$('menu').hover(

function() {

$('#submenu').show();

},

function() {

$('#submenu').hide();

});

Объект события

Когда браузер запускает событие, то записывает информацию о нем и сохраняет его в так называемом объекте события (Event Object).

В jQuery объект события доступен через функцию, созданную для обработки данного события. Объект передается функции как аргумент, и, чтобы получить к нему доступ, всего лишь следует добавить к функции имя параметра. Например, требуется найти позиции указателей X и Y, когда происходит щелчок в каком-либо месте страницы.

$(document).click(function(evt) {

var xPos = evt.pageX;

var yPos = evt.pageY;

alert('X:' + xPos + ' Y:' + yPos);

});

Здесь важна переменная evt. Когда функция вызывается (то есть кто-нибудь щелкает кнопкой мыши в окне браузера), объект события сохраняется в переменной evt. Можно получить в теле функции доступ к различным свойствам объекта события, используя точечный синтаксис, например, evt.pageX возвращает расположение указателя по горизонтали (или количество пикселей от левого края окна).

Объект события имеет различные свойства и их список в каждом браузере может быть разным.

Отмена обычного поведения событий

Функция preventDefault()позволяет отменить нормальное поведение браузера. Она является частью объекта события, поэтому доступ к ней осуществляется в рамках функции, управляющей событием. Допустим, на странице есть ссылка с ID menu. Она указывает на другую страницу меню (чтобы посетитель, у которого отключен JavaScript, мог попасть на эту страницу меню). Однако добавлен код JavaScript, и если посетитель щелкает на ссылке, меню появляется на той же странице. Но, как правило, браузер все же проследует по ссылке на страницу меню, требуется избежать этого «по умолчанию» следующим образом:

$('menu').click(function(evt){

// JavaScript вставляется сюда

evt .preventDefault(); // перехода по ссылке нет

});

Другой вариант – возврат значения «ложь» как результата выполнения функции события. Например, следующий код функционально аналогичен коду, приведенному выше:

$('menu').click(function(evt){

// JavaScript вставляется сюда

return false; // перехода по ссылке нет

});

Комментарий 1

Обратиться к значению поля формы (например, к значению записанному в текстовом поле или поле со списком) можно с помощью метода jQuery val. Например, так можно считать в переменную FIO, значение введенное в текстовое поле с ID “family”:

var FIO = $(‘#family’).val();

С помощью данного метода также можно записать значение в поле формы, указав нужное значение в качестве параметра данного метода:

$(‘#family’).val(‘Федоров’);

Комментарий 2

Переключение видимости элемента можно реализовать с помощью метода toggle()

$(‘div’).toggle();

Если элемент <div> был виден на экране, то он будет скрыт, иначе – появится в окне браузера согласно своему расположению в HTML-коде.