Язык обработки событий Javascript
Зачем это нужно?
Очень часто вы видите на Web-страницах в Интернете явления, которые выходят за рамки обычного HTML. Язык HTML не позволяет «оживлять» изображение на экране, он задает способ размещения статической (не изменяющейся) информации. С помощью HTML нельзя сделать
- замену рисунков при попадании курсора мыши в область картинки
- движение объекта по экрану
- различные меню, которые выпадают при нажатии на кнопки
Все это можно создать с помощью языка программирования JavaScript (его называют динамическим HTML), который позволяет создавать анимацию на Web-страницах. В качестве примера мы покажем, как с помощью JavaScript выполнить замену рисунков при попадании курсора мыши в область картинки.
Рассмотрим простейшие события — попадание мыши в область объекта и выход из нее. Реакция на них задается в параметрах тэга :
OnMouseOver — что делать, если курсора мыши попал в область рисунка
OnMouseOut — что делать, если курсор мыши вышел из области объекта
Обращение к текущему объекту идет через аргумент this (от английского this — этот). Адрес рисунка задается параметром this.src(это означает обращение к свойству srcобъекта this).
Код будет выглядеть следующим образом:
onMouseOver=this.src=’1.gif’
onMouseOut=this.src=’2.gif’
Сначала загружается рисунок 2.gif. При попадании мыши в область рисунка вместо него появляется 1.gif, а после ухода мыши снова восстанавливается 2.gif. В окне браузера рисунок будет выглядеть так (в браузерах, поддерживающих JavaScript, он должен изменяться при наведении мыши):
Основные идеи
Для того чтобы лучше понять происходящее, надо знать следующее:
- каждый элемент на странице, будь то текст, звук или видео, является объектом и имеет свои параметры и свойства
- параметры элемента можно менять
- все что происходит — это события
- все события можно «обрабатывать», то есть как-то реагировать на них
Самые простейшие события — это вход мыши в область и выход мыши из области объекта. Но существует еще множество событий, при которых запускаются специальные мини-программы — скрипты или сценарии на JavaScript.
Создание системы голосования
Рассмотрим применение JavaScript на примере создания простейшей системы голосования.
Что значит система голосования? Голосование действие человека — избирателя, которым он отдает свой голос предпочтенному им из нескольких варианту.
Другими словами это означает, что человеку, зашедшему на вашу страничку, предлагается сделать выбор, отдать предпочтение какому-то актеру, фильму и т.д.
Задание №1. Для начала вспомним урок по созданию форм. Создайте форму следующего вида:
А теперь необходимо оживить эту форму, а как раз для этого и применяется язык JavaScript. Любое вкрапление скрипта или события, написанного на этом языке в HTML-документ, начинается тегом:
Здесь пишется скрипт событияа этим тегом программа заканчивается и снова идет HTML-документ.
Что же нам написать в программе. Любое действие на языке Java описывается с помощью функций, на которую потом ссылается HTML-код.
Функция задается следующим способом:
Как затем заставить эту функцию выполняться? Допустим, мы хотим, чтобы при выборе какого-либо переключателя прибавлялся один голос.
Перед тем как задавать какую-либо функцию, необходимо, как и в любом языке программирования, описать переменные, с которыми она будет работать. В языке Java нет необходимости специально оговаривать, какого типа эта переменная, достаточно просто написать, чему равна эта переменная. Если это число, то пишется:
а=5;
Если это текст, то
a=«текст»
| Эти текстовые переменные служат для пояснения результатов голосования пользователю. Другими словами, они обеспечивают интерфейс с пользователем |
Наберем следующий скрипт:
Процедура alert обеспечивает вывод на экран диалогового окна
При этом наша форма должна выглядеть следующим образом:
Т.е. добавляется новый атрибут OnClick, который и задает, какая функция будет выполняться при выборе переключателя.
Задание №2. Соберите весь HTML файл со скриптом и проверьте работоспособность страницы.
Задание №3. Добавьте еще одну позицию в список фильмов кандидатов и обеспечьте подсчет голосов для этой позиции.
