2.3. Задания на лабораторную работу № 6

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

– при нажатии кнопок «Стиль 1», «Стиль 2» и «Стиль 3» должны применять к телу документа стили “text1”, “text2” и “text3” соответственно;

– при нажатии кнопки «Сброс» стили из предыдущего пункта должны удаляться;

– при выборе элемента списка к телу документа должен применяться соответствующий цвет фона;

– при наведении курсора на список с ID “list_1” все его элементы должны отображаться подчеркнутым текстом;

– при наведении курсора на список с ID “list_2” все его элементы должны отображаться курсивным текстом;

– при наведении курсора на изображение внизу текста (файл pic1.jpg) должна происходить смена этого изображения на pic2.jpg. Если курсор мыши будет уведен с изображения, то оно должно вернуться в исходное состояние.

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

– в текстовых полях с ID «coord1» и «coord2» отобразить координаты курсора мыши при ее перемещении;

– при загрузке страницы скрыть все описания атрибутов (теги div с классом «attr_desc») ;

– при щелчке по надписи «Показать» (теги div с классом «attr_desc») показывать на экране описание соответствующего атрибута – содержимое надписи при этом должно меняться на «Скрыть». При повторном щелчке следует скрывать описание атрибута, а надпись снова менять на «Показать»;

– в таблице при наведении курсора на строку подсвечивать ее другим цветом.

3. Лабораторная работа № 7.

РАБОТА С ВЕБ-ФОРМАМИ В JAVASCRIPT

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

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

Цели работы:

– освоить базовые приемы обработки событий веб-форм;

– ознакомиться с функциями jQuery для работы с веб-формами.

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

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

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

HTML предлагает разнообразные теги для построения веб-форм. Наиболее важен тег <form>, определяющий начало (открывающий тег <form>) и конец (закрывающий тег </form>) формы. Он также указывает на метод, который форма использует для передачи данных (отправка или получение), и определяет, в какое место в Сети данные формы должны быть отправлены.

Для правильной работы формы следует создать средства управления ею – кнопки, текстовые поля и меню – с помощью тегов <input>, <textarea> или <select> соответственно.

Простейшим путем выбора элемента form является присвоение ему идентификатора (ID):

<input name="user" type="text" id="user">

Затем можно применить метод getElementById() для выбора данного элемента:

var userField=document.getElementById('user');

Или можно использовать функцию выбора jQuery:

var userField = $('#user');

Если поле формы имеет ID user, можно использовать jQuery для доступа к значениям поля (про указанную в примере функцию val будет рассказано далее):

var fieldValue = $('#user').val();

Используя один из селекторов jQuery, можно легко идентифицировать все поля определенного типа и работать с ними. Например, после заполнения формы посетителем нужно проверить, все ли ее поля содержат определенные значения. Можно выбрать все текстовые поля:

$(':text')

Затем следует пройти по результатам с помощью each(), чтобы убедиться, что каждое поле содержит значение.

В таблице приведены селекторы jQuery для работы с полями формы.

Селекторы jQuery для работы с выбранными типами

полей форм

Селектор	Пример	Описание
:input	$(‘:input’)	Выделяет все элементы типа input, textarea, select и button, то есть все элементы форм

Продолжение таблицы

:text	$(‘:text’)	Выбирает все текстовые поля
:password	$(‘:password’)	Выбирает все поля для ввода пароля
:radio	$(‘:radio’)	Выбирает все переключатели
:checkbox	$(‘:checkbox’)	Выбирает все флажки
:submit	$(‘:submit’)	Выбирает все кнопки подтверждения (отправки)
:image	$(‘:image’)	Выбирает все кнопки-рисунки
:reset	$(‘:reset’)	Выбирает все кнопки сброса
:button	$(‘:button’)	Выбирает все поля типа buttons (кнопки)
:file	$(‘:file’)	Выбирает все поля файла (применяется для закачки файла)
:hidden	$(‘:hidden’)	Выбирает все скрытые поля

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

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

$('#signup :text')

Кроме того, jQuery предлагает весьма полезные фильтры, которые отбирают поля формы, соответствующие определенному состоянию.

:checked выбирает все поля, помеченные или включенные, то есть флажки (checkboxes) и переключатели. Например, если нужно найти все поля такого рода, можно использовать следующий код:

$(':checked')

Этот фильтр можно применять для поиска переключателя внутри группы.

:selected выбирает все помеченные элементы option внутри списка или меню, позволяя узнать, какой выбор сделал посетитель (тег <select>). Например, есть тег <select> с ID state, в котором перечислены все 50 штатов США. Для выяснения того, какой же штат выбрал посетитель сайта, можно написать следующее:

var selectedState=$('#state :selected').val();

В отличие от примера с фильтром :checked, между ID и фильтром имеется пробел (' #state : selected'). Это объясняется тем, что этот фильтр выбирает теги <option>, а не тег <select>. Пробел делает свою работу подобно нисходящему селектору CSS: сначала он находит элемент с нужным ID, а затем внутри его ищет все выбранные элементы.

Работа со значениями элементов форм

Функция jQuery val() может как задавать, так и считывать значения поля формы. Если функция вызывается без аргументов, она будет считывать значения; при передаче функции значения она введет его в поле формы. Например, есть поле для ввода электронного адреса клиента с ID email. Его содержимое можно получить, введя следующий код:

var fieldValue = $('#email').val();

Функция val() находит даже значение выбранного варианта в меню (тег <select>).

Задать значение полю можно простой передачей этого значения функции val(). Например, есть форма для заказа товаров и требуется автоматически рассчитать общую стоимость заказа, исходя из количества единиц товара, заявленного клиентом. Можно получить количество заказанных единиц, умножить его на цену товара и затем ввести значение в итоговое поле.

Код для выполнения этой задачи выглядит так:

var unitCost=9.95;

var amount=$('#quantity').val(); // получить значение

var total=amount*unitCost;

total = total.toFixed (2);

$('#total').val(total); // задать значение

Строка 1 кода создает переменную, которая хранит значение цены товара. Строка 2 создает еще одну переменную и извлекает значение, введенное посетителем в поле с ID quantity, соответствующее количеству заказанного товара. Строка 3 определяет общую стоимость, полученную путем умножения цены на количество, а строка 4 форматирует результат, включая в него два десятичных знака. Наконец, строка 5 вводит итоговое значение в поле с ID.

Проверка наличия меток для кнопок и флажков

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

<input type="checkbox" name="news" id="news" checked="checked"/>

Поскольку checked является атрибутом HTML, легко можно использовать jQuery для проверки статуса флажка:

if ($('#news').attr('checked')) {

// флажок отмечен

} else {

// флажок не отмечен

}

Код $('#news').attr('checked') возвращает значение true, если флажок установлен. Если он не установлен, возвращается значение undefined, интерпретируемое JavaScript как false. Таким образом, данная условная инструкция позволяет выполнить один набор задач, если флажок установлен, либо другой набор задач, если флажок не установлен.

Атрибут checked применим и к переключателям. Можно использовать функцию attr() таким же образом, чтобы проверить, установлен ли атрибут checked для переключателя.

Перенос в первое поле формы

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

Предположим, требуется, чтобы курсор был в поле ввода имени пользователя. Допустим, что это поле имеет ID username. Чтобы с помощью JavaScript поместить фокус, то есть курсор, в это поле, можно написать следующее:

$(document).ready(function() {

$('#username').focus() ;

}) ;

В данном примере текстовое поле имеет ID username. Однако возможно создать универсальный скрипт, который всегда будет придавать фокус первому текстовому полю формы без необходимости присвоения ему ID:

$(document).ready(function() {

$(':text')[0].focus();

});

jQuery предлагает удобный способ выбора всех текстовых полей – $(':text'). В данном случае сначала выбираются все текстовые поля (возвращая массив элементов), а затем задействуется только первый элемент массива с индексом [0]. Наконец, этот элемент переводится в активное состояние с помощью метода focus().

Выключение и включение полей

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

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

$(':input').attr('disabled', true);

Обычно поле выключается в ответ на событие – например, щелчок по кнопке-флажку. Например, чтобы пользователь не вводил ФИО жены, в случае, если установил флажок «Холост» в форме, можно написать следующий код:

$(' #single').click(function() {

$('#FIO_wife').attr('disabled', true);

Разумеется, отключая поле, в дальнейшем следует предусмотреть возможность вновь включить его. Для этого можно просто задать для атрибута disabled значение false. Например, для активации всех полей формы следует использовать код:

$(':input').attr('disabled', false);

Скрытие и показ параметров формы

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

$('#single').click(function() {

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

}) ;

$('#married').click(function() {

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

});

К преимуществам скрытия полей (в противоположность их отключению) относится упрощение макета (компоновки) формы. В конце концов, отключенное поле является видимым, что может привлекать (а точнее, отвлекать) внимание.