Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
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 перемещении курсора мыши в область onMouseOver
MouseOut элемента (из области элемента) on MouseOut
Select выборе элемента списка в области формы onSelect
Интерпретация события броузером. Каждое событие связано с определённым тегом HTML. Когда пользователь совершит какое-либо действие в области элемента страницы, генерируется событие, которое перехватывает интерпретатор JavaScript и обрабатывает по соответствующему сценарию.
Обработка события. Сценарий обработки события размещают в теле функции, описанной в контейнере <head> function Имя { }</head>.
Обработчик события помещают как атрибут (Имяобработчика=”Имяфункции”) в какой-либо тег HTML.
Таким образом, обработчик события вызывает на выполнение сценарий, записанный в теле функции.
Пример:
<html>
<head><script>
function Start() {
alert (“Загрузка страницы произошла!”)
}
</script></head>
<body onLoad=”Start()”>
</body>
</html>
По окончании загрузки документа обработчик события onLoad выполнит функцию, описанную в заголовке документа – вывод панели alert с текстом «Загрузка страницы произошла!».
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) броузер оставит в своём окне “родной” документ со сменой цвета фона.
Выводы практической работы
Обработчик события 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>
<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(), которая переводит строку в арифметическое выражение и сразу же вычисляет его.
Текстовые поля d1 и d2: Фамилия: Имя:
Текстовое поле d3: Укажите количество (по 2$ за штуку)
функции Z4( )
Уважаемый посетитель нашего сайта … !
Благодарим Вас за приобретение нашего товара в количестве … штук.
Вы должны перевести на наш счёт … $.
4. Предусмотрите 5%ную скидку при вводе количества товара больше 50 штук
4. Доступ к элементам форм. Примеры
Сценарий JavaScript Форма в теле html-документа
Текстовое поле ввода ‘TEXT’ Проверка ввода данных
Document.Форма.Поле.value
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 ("Флажок не включён!"); }
}
Переключатели ‘RADIO’
Document.Форма.Элемент массива.checked
function start4( ) {
if (document.F4.R[0].checked==true) alert("Иордания");
if (document.F4.R[1].checked==true) alert("Кипр");
if (document.F4.R[2].checked==true) alert("Замбия");
if (document.F4.R[3].checked==true) alert("Россия");
}
Раскрывающийся список ‘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="F2">Введите ваше имя<br>
<input type="text" name="k">
<button onClick="start2()">Проверим ввод</button>
<input type="reset">
</form>
Проверка выбора заказа
<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>
Вывод государства по выбору его столицы
<form name="F4">Выбери столицу <BR>
<input type="radio" name="R" onClick="start4()">
Амман <BR>
<input type="radio" name="R" onClick="start4()">
Никосия <BR>
<input type="radio" name="R" onClick="start4()">
Лусака <BR>
<input type="radio" name="R" onClick="start4()">
Москва <BR>
</form>
Проверка выбора иностранного языка
<form name='F5'>Какой язык вы знаете ? <br>
<select name='S'>
<option>Английский
<option>Немецкий
<option>Французский
</select>
<button onClick="start5()">Проверим выбор </button>
</form>
5. Программирование обработки событий
Одной из самых важных задач обработки текстового поля формы является преобразование содержимого текстового поля в массив и обработка этого массива на стороне клиента, в среде броузера.
Практическая работа “Средний балл участника соревнований”
Найдите среднюю оценку участника соревнований. При подсчёте среднего балла максимальная и минимальная оценки не учитываются. Ввод оценок осуществите в первом текстовом поле формы через пробел. Вывод результата выполните во втором текстовом поле той же формы.
Решение
a=document.FT.t1.value;
var b=new Array();
b=a.split(" “);
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» демонстрирует динамическое изменение цвета фона и текста в отдельном фрейме при щелчке пользователя по указателю ссылки, расположенной в статическом фрейме.
Выводы
Мы рассмотрели типичные примеры задач, встающих перед авторами Web-страниц. В примерах использованы различные свойства и методы встроенных объектов языка JavaScript, а также объекты броузера.
4*. Обработка событий, связанных с фокусом
Focus, Blur, Change являются базовыми событиями, связанными с наведением или потерей фокуса элементом. К таким элементам относятся – окно, фрейм или любой элемент формы.
Событие onFocus возникает в том случае, когда какой-либо элемент формы получает фокус ввода (щелчок мыши в области поля формы).
Событие onBlur возникает в том случае, когда какой-либо элемент формы теряет фокус ввода (щелчок мыши вне поля формы).
Событие onChange возникает при изменении содержимого одного из элементов формы (щелчок мыши в области изменяемого поля формы).
<button onClick="Start()">считай </button>
<input type=’text’ name='p1' onFocus="Start()">
<input type=’text’ name='p2' onFocus="Start()">
3. Проанализируйте результаты обработки события onFocus.
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>.
Проектирование Web-сайта «Динамический Web-документ»
Темы проектов
Требования к теоретической части (Объём 14 – 20 печатных страниц)
Титульный лист (тема проекта, авторы проекта). 1
Содержание (разделы и номера страниц). 2
2. Описание работы. 5-7
Описание алгоритма решения (какие переменные, базовые структуры программирования, средства ввода/вывода информации, объекты и события применяли); сценарий программы (распечатка скрипта)
Постановка проблемы, поиск её решения путём анализа, сравнения и выбора результата
Требования к практической части (Объём 8 – 12 html-файлов)
Критерии оценки
PAGE
8