Учебник по JavaScript_part4
advertisement
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
События в JavaScript
1. Обработчики событий и методы их вызова
Определение. Под событиями понимают действия, выполняемые пользователем в рамках данной
страницы: щелчок мыши по гиперссылке или элементу формы; ввод текста в текстовые поля формы;
перемещение курсора мыши по странице и др. Технология обработки событий лежит в основе
создания динамических html-страниц.
Основные
типы событий и их обработчики. Обработка события осуществляется
обработчиком, имя обработчика события образуется добавлением приставки on к имени события.
Имя события
Событие наступает при
Обработчик события
Load
завершении загрузки страницы
onLoad
Click
нажатии кнопки мыши в области
элемента формы или гиперссылки
onClick
Focus
получении фокуса элементом (окно, фрейм)
onFocus
Blur
потере фокуса элементом
onBlur
Change
изменении значения текстового поля
onChange
MouseOver перемещении курсора мыши в область
MouseOut
элемента (из области элемента)
Select
выборе элемента списка в области формы
onMouseOver
on MouseOut
onSelect
Интерпретация события броузером. Каждое событие связано с определённым тегом HTML.
Когда пользователь совершит какое-либо действие в области элемента страницы, генерируется
событие, которое перехватывает интерпретатор JavaScript и обрабатывает по соответствующему
сценарию.
Обработка события. Сценарий обработки события размещают в теле функции, описанной в
контейнере <head> function Имя { }</head>.
Обработчик события помещают как атрибут (Имяобработчика=”Имяфункции”) в какой-либо тег HTML.
Таким образом, обработчик события вызывает на выполнение сценарий, записанный в теле функции.
Пример:
<html>
<head><script>
function Start() {
alert (“Загрузка страницы произошла!”)
}
</script></head>
<body onLoad=”Start()”>
</body>
</html>
По окончании загрузки документа обработчик события onLoad выполнит функцию, описанную в
заголовке документа – вывод панели alert с текстом «Загрузка страницы произошла!».
Контрольные вопросы
1.
2.
3.
4.
5.
6.
Что такое событие в языке JavaScript?
Назовите основные события, когда наступает названное событие, каков обработчик?
Как интерпретирует (переводит) обработку события броузер?
Где размещается сценарий обработки события?
Каков способ вызова обработчика события?
Приведите пример обработки события при загрузке страницы onLoad.
42
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
2. OnClick как атрибут гиперссылки
Событие Click возникает при щелчке по ссылке, обработку выполняет обработчик onClick.
Задача «Подтверждение гиперссылки». Выполните запрос методом confirm о подтверждении
перехода к просмотру документа “primer.htm” для события – активизация пользователем
гиперссылки.
<html>
<head><script>
function z1() {
d=confirm(“Прошу подтверждения перехода!”)
if (d==true) {return true}
else {document.bgColor=”cyan”;
return false}
}
</script></head>
<body>
<h1>Подтверждение гиперссылки</h1>
<a href=”primer.htm” onClick=”return z1()”>переход </a>
</body>
</html>
При задании обработчика события onClick в исходном якоре ссылки указано имя функцииобработчика z1(), а также ключевое слово return, возвращающее её результат – нажатие одной из
кнопок в панели confirm . При нажатии “ok” (true) броузер начнёт загрузку файла primer.htm, при
нажатии “cancel” (false) броузер оставит в своём окне “родной” документ со сменой цвета фона.
Практическая работа «Подтверждение гиперссылки»
1.
2.
3.
4.
Cоздайте файл события.htm и выполните просмотр скрипта в броузере.
Проанализируйте результаты обработки события onClick.
Исследование 1. Дополните тело документа тем же исходным якорем с обработчиком события
onMouseOver и проанализируйте результаты обработки события MouseOver.
Исследование 2. Дополните тело документа кнопкой <button>Нажми меня</button>, включив в
неё обработчик события onClick, для обработки функции function z2() { } по вашему желанию
(например, вывод какого-либо текста и смена фона страницы). Дополните тело документа и тело
функции вставкой графического объекта.
Выводы практической работы
Обработчик события onClick, получив результат функции z1() – “true”, передаёт управление
исходному якорю, и происходит переход по ссылке. Обработчик onMouseOver не связан с исходным
якорем, поэтому тот не реагирует на возвращённый результат “true”, и переход по ссылке не
выполняется.
3. OnClick как атрибут формы
Событие Click возникает при нажатии пользователем элемента-кнопки, расположенного в форме.
Задача «Вычислитель». Создайте форму, состоящую из двух однострочных полей ввода и кнопки.
Введите арифметическое выражение в первое текстовое поле, и при нажатии кнопки получите
результат выражения во втором текстовом поле.
3+2
5
Считай
<html>
<head><script>
function z3() {
var s=document.F.p1.value;
document.F.p2.value = eval(s);
}
</script></head>
43
Сброс
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
<body>
<center>
<h1>Вычислитель</h1>
<form name='F'>
<input type=’text’ name='p1' >
<input type=’text’ name='p2' >
<button onClick="z3()">считай </button>
<input type=’reset’>
</form>
</center>
</body>
</html>
Описание тела документа
Два однострочных текстовых поля и кнопка создаются в теле документа, в контейнере
<form>…</form>.
Для текстовых полей указаны имена соответственно ‘p1’ и ’p2’, для формы указано имя – ‘F’ В
кнопку <button> включён обработчик события onClick, который реализован функцией z3(),
расположенной в скрипте контейнера <head>…</head>.
Описание скрипта
В теле функции z3() используются два объекта:
1. Объект document.F.p1.value представляет содержимое первого текстового поля
(арифметическое выражение, набранное пользователем).
2. Объект document.F.p2.value
представляет содержимое второго текстового поля (результат
вычисления арифметического выражения, полученный с помощью функции eval(s))
Имена текстовых полей ‘p1’ и ’p2’ и формы ‘F’ также являются объектами, поэтому при записи
содержимого текстовых полей value, необходимо указать всю последовательность вложений
объектов друг в друга через точку:
Document.Имя формы.Имя текстового поля.Содержимое текстового поля
Для перемещения результата вычисления из поля ‘p1’ в поле ‘p2’ используется дополнительная
переменная s. Для вычисления арифметического выражения, записанного в переменной s,
используется встроенная функция JavaScript eval(), которая переводит строку в арифметическое
выражение и сразу же вычисляет его.
Практическая работа «Вычислитель»
Дополните файл События.htm html-кодом для задачи «Вычислитель» и проанализируйте
обработку события onClick в форме.
Практическая работа «Бланк заказа»
1. Дополните тело документа События.htm формой с именем FD, включив в неё следующие
элементы по образцу:
Текстовые поля d1 и d2: Фамилия:
Текстовое поле d3:
Имя:
Укажите количество (по 2$ за штуку)
2. Включите в форму кнопку <button>Проверка данных</button> с обработчиком onClick для вызова
функции Z4( )
3. Дополните скрипт документа События.htm функцией с именем Z4( ), включив в неё обработку
текстового поля d3 и вывод информации методом document.write из полей d1 и d2 по следующему
образцу:
Уважаемый посетитель нашего сайта … !
Благодарим Вас за приобретение нашего товара в количестве … штук.
Вы должны перевести на наш счёт … $.
4. Предусмотрите 5%ную скидку при вводе количества товара больше 50 штук
44
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
4. Доступ к элементам форм. Примеры
Сценарий JavaScript
Форма в теле html-документа
Текстовое поле ввода ‘TEXT’
Document.Форма.Поле.value
Проверка ввода данных
<form name="F2">Введите ваше имя<br>
<input type="text" name="k">
<button onClick="start2()">Проверим ввод</button>
<input type="reset">
</form>
function start2( ){
z=document.F2.k.value;
if (z=="")
{alert("Попробуйте ввести своё имя.")}
else
{alert("Ваше имя-"+z+"?");
a="Уважаемый "+z+"приветствуем Вас";
document.write(a);
}
}
Флажки ‘CHECKBOX’
Document.Форма.Поле.checked
Проверка выбора заказа
function start3( ){
var s="";
if (document.F3.p1.checked ==true)
s=s+document.F3.p1.value;
if (document.F3.p2.checked ==true)
s=s+document.F3.p2.value;
if (document.F3.p3.checked ==true)
s=s+document.F3.p3.value;
if (s.length>0)
{document.write("Ваш заказ: "+s);}
else {alert ("Флажок не включён!"); }
}
<form name="F3">Проверка включения флажка: <br>
<input type="checkbox" name="p1" value="Шоколад">
Шоколад <br>
<input type="checkbox" name="p2" value="Мороженое">
Мороженое <br>
<input type="checkbox" name="p3" value="Шампанское">
Шампанское <br>
<button onClick="start3()">Проверка заказа</button>
<input type="reset">
</form>
Переключатели ‘RADIO’
Document.Форма.Элемент массива.checked
Вывод государства по выбору его столицы
<form name="F4">Выбери столицу <BR>
function start4( ) {
if (document.F4.R[0].checked==true) alert("Иордания"); <input type="radio" name="R" onClick="start4()">
Амман <BR>
if (document.F4.R[1].checked==true) alert("Кипр");
if (document.F4.R[2].checked==true) alert("Замбия"); <input type="radio" name="R" onClick="start4()">
Никосия <BR>
if (document.F4.R[3].checked==true) alert("Россия");
<input type="radio" name="R" onClick="start4()">
}
Лусака <BR>
<input type="radio" name="R" onClick="start4()">
Москва <BR>
</form>
Раскрывающийся список ‘SELECT’
Document.Форма.Поле.selectedIndex
Document.Форма.Поле.options(№).text
function start5( ){
a=document.F5.S.selectedIndex;
b=document.F5.S.options[a].text;
document.write("Вы выбрали "+b)
}
№ элемента
элемент
Проверка выбора иностранного языка
<form name='F5'>Какой язык вы знаете ? <br>
<select name='S'>
<option>Английский
<option>Немецкий
<option>Французский
</select>
<button onClick="start5()">Проверим выбор </button>
</form>
45
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
5. Программирование обработки событий
Одной из самых важных задач обработки текстового поля формы является преобразование
содержимого текстового поля в массив и обработка этого массива на стороне клиента, в
среде броузера.
Практическая работа “Средний балл участника соревнований”
Найдите среднюю оценку участника соревнований.
При подсчёте среднего балла
максимальная и минимальная оценки не учитываются. Ввод оценок осуществите в первом
текстовом поле формы через пробел. Вывод результата выполните во втором текстовом
поле той же формы.
Решение
1. Создайте форму с именем FT, содержащую два текстовых поля с именами t1 и t2,
кнопку для вызова функции z5( ) и кнопку для очистки формы
2. Создайте функцию z5( ), в которой реализуйте решение задачи:
Преобразуйте строку a из текстового поля t1 в массив строк b, используя свойство split ,
где разделителем элементов массива служит пробел
a=document.FT.t1.value;
var b=new Array();
b=a.split(" “);
Преобразуйте созданный массив строк b в числовой массив, используя функцию
parseFloat
3.
4.
Осуществите в массиве b поиск суммы, а также минимального и максимального
элемента
Вычислите среднее арифметическое элементов массива b, не учитывая максимального
и минимального элементов
Выведите результат во втором текстовом поле t2 формы FT
Протестируйте работу программы с разными исходными данными
Отформатируйте Web-страницу (цвет, шрифт)
7. Программирование динамических «эффектов»
JavaScript – универсальное средство создания интерактивных страниц, с помощью которого
можно создавать визуальные динамические эффекты на Web-странице. Примеры задач с
динамическими эффектами содержатся в каталоге «Эффекты».
«Смена изображения» основана на обработке событий onMouseOver и onMouseOut. При
потере фокуса изображение1 меняется на изображение2, при получении фокуса
изображение2 меняется на изображение1.
«Мультик» создан с помощью конструирования массива объектов Image, в которые
загружаются изображения и последовательно отображаются сначала в прямом порядке, а
затем в обратном.
«Выбор фона из списка» использует свойство document.bgColor, а также элемент
формы select, в котором определены цветá фона страницы для выбора пользователем.
«Выбор фона ссылкой» использует исходные внутренние якоря для выбора цвета фона
страницы пользователем.
«Новое окно» броузера открывается с помощью метода window.open(), а закрывается
методом window.close()
«Пароль» выполняет запрос функцией prompt() для защиты конфиденциальной
информации и закрывает доступ к файлу, если ввод данных был не определён.
«Часы» показывают текущую дату и время с помощью методов getHours(), getMinutes(),
getSeconds() и вызывает функцию на выполнение с интервалом 1 секунда методом
setTimeout()
«Подтверждение ссылки» выводит диалоговое окно confirm()
с вопросом,
действительно ли пользователь намерен перейти по ссылке.
«Ссылка во фрейм js» демонстрирует динамическое изменение цвета фона и текста в
отдельном фрейме при щелчке пользователя по указателю ссылки, расположенной в
статическом фрейме.
48
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
Выводы
Мы рассмотрели типичные примеры задач, встающих перед авторами Web-страниц. В
примерах использованы различные свойства и методы встроенных объектов языка
JavaScript, а также объекты броузера.
4*. Обработка событий, связанных с фокусом
Focus, Blur, Change являются базовыми событиями, связанными с наведением или
потерей фокуса элементом. К таким элементам относятся – окно, фрейм или любой
элемент формы.
Событие onFocus возникает в том случае, когда какой-либо элемент формы получает
фокус ввода (щелчок мыши в области поля формы).
Событие onBlur возникает в том случае, когда какой-либо элемент формы теряет фокус
ввода (щелчок мыши вне поля формы).
Событие onChange возникает при изменении содержимого одного из элементов формы
(щелчок мыши в области изменяемого поля формы).
Практическая работа «Обработчики onClick и onFocus в формах»
Откройте файл вычислитель.htm и выполните просмотр скрипта в броузере,
проанализируйте результаты обработки события onClick.
2. Выполните следующие изменения в файле:
Удалите кнопку из документа.
1.
<button onClick="Start()">считай </button>
Выполните вывод отображения результата арифметического выражения при наведении
фокуса (onFocus – щелчок мыши в области элемента) на первое текстовое поле.
Замените вывод отображения результата арифметического выражения при наведении
фокуса (onFocus – щелчок мыши в области элемента) на второе текстовое поле.
3.
Проанализируйте результаты обработки события onFocus.
<input type=’text’ name='p1' onFocus="Start()">
<input type=’text’ name='p2' onFocus="Start()">
Практическая работа «Обработчики onBlur и onChange в формах»
1. Замените вывод отображения результата арифметического выражения в файле
вычислитель.htm, применяя обработчик события onBlur для первого текстового поля
формы, а затем для второго.
<input type=’text’ name='p1' onBlur="Start()">
2. Замените вывод отображения результата арифметического выражения в файле
Sobyt2.htm, применяя обработчик события onChange для первого текстового поля формы,
а затем для второго.
<input type=’text’ name='p1' onChange="Start()">
3. Проанализируйте результаты обработки данных событий. Сравните результаты
обработки данных событий.
Выводы
События – это действия пользователя в рамках страницы. В отличие от операторов языка
JavaScript, обработчики событий задаются не внутри контейнера <script>, а как атрибуты
определённого тега языка HTML, описывающего тот или иной элемент. Обработчик какоголибо события получает управление при возникновении данного события и вызывает
функцию, указанную в нём. Сама же функция-обработчик располагается в скрипте
контейнера <head>…</head>.
48
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
Проектирование Web-сайта «Динамический Web-документ»
Темы проектов
Рекламная страничка предприятия (авто, туризм, косметика, по желанию).
Обучающая страничка по языку HTML (JavaScript или по школьному предмету).
Обзорно-познавательная страничка (литература, искусство, наука, техника, спорт, природа и т.п.)
Требования к теоретической части (Объём 14 – 20 печатных страниц)
Титульный лист (тема проекта, авторы проекта).
1
Содержание (разделы и номера страниц).
2
1. Введение.
3-4
Область проектирования (сеть Internet, история создания и основные стандарты Web, понятие
статического и динамического Web-документа)
Возможности HTML и JavaScript. Правила создания Web-страниц
2. Описание работы.
5-7
Чем меня привлекает тема сайта. Цель и задачи моей работы
Информационная модель данных сайта (заголовки разделов и тем, обзор данных)
Как построена теоретическая часть проекта (краткое описание каждого раздела)
3. Модель Web-документа (схема и её описание):
8-9
структура Web-документа
количество файлов, их форматы; сколько уровней содержит Web-документ
4. Модель стартового файла (схема и её описание)
10-11
система фреймов, наполнение фреймов (какие объекты содержит заставка)
технология ссылок во фрейм
5. Схема якорей (разноцветная «паутина» применяемых типов ссылок)
12-13
6. Технология создания Web-документа.
14-15
какие приложения и как использовались для создания html-файлов и их просмотра
какие технологии вы знаете для создания Web-страниц, их сравнение
дополнительные средства (диски, приложения, задачи)
7. Средства HTML (что применяете, для какой информации, в каких файлах, элементы языка) 16-17
8. Сценарии на JavaScript
Задача обработки элементов форм
Задача обработки динамического эффекта
18-19
Описание алгоритма решения (какие переменные, базовые структуры программирования, средства
ввода/вывода информации, объекты и события применяли); сценарий программы (распечатка скрипта)
9.
Исследовательская часть – выработка новых знаний
20-21
Постановка проблемы, поиск её решения путём анализа, сравнения и выбора результата
10.
11.
Заключение
22-23
Что такое моделирование? Проектирование?
Что такое профессионализм? Профессия Web-мастер?
Чему вы научились в работе над проектом? Ваша самооценка (см. требования практ. части)
Где можно применить ваш программный продукт?
Какова примерная стоимость вашего проекта?
Выводы. Популярность компьютерных сетей, создание Web-сайтов.
Литература (автор, название, издательство, год издания).
24
Требования к практической части (Объём 8 – 12 html-файлов)
1.
2.
Средства HTML:
оформление данных, применение свойств таблицы стилей для заголовков и абзацев
создание списков
создание таблиц
установка цвета фона или «фона из файла»
вставка и выравнивание графических изображений, применение графических указателей ссылок
создание всех типов ссылок
создание системы фреймов; ссылок во фрейм
использование элементов форм: текстовые поля, флажки, переключатели, раскрывающийся
список, кнопки: очистка формы и вызов обработчика функции
Сценарии на JavaScript:
задача обработки массива элементов форм и её решение (бланк заказа, анкета, тест и т.д.)
программирование динамических «эффектов»
Критерии оценки
Работоспособность Web-документа, корректность ссылок; объём<1Мб
Информационная модель данных: логика, полнота, единый стиль
Использование средств HTML (по требованиям)
Выполнение требований по решению задач на JavaScript
Защита проекта. Демонстрация на ПК практической части
Полнота и научность выполнения теоретической части
Своевременность выполнения домашних заданий
48
комиссия учеников
комиссия учеников
комиссия учеников
учитель
учитель
учитель
учитель
