Простейшие сценарии JavaScript
Включение сценария в тег <body>. Всплывающее сообщение, метод alert()
Рассмотрим простейший пример использования элементов языка JavaScript в качестве параметров тега <body>
<html>
<head>
</head>
<body onLoad="alert('Мы Вам рады');" onUnload="alert('До скорой встречи');">
<h1>Приветствуем!</h1>
<p>На сайте нашей компании</p>
</body>
</html>
Как видно из кода, параметрами тега <body> стали события onLoad и onUnload, соответственно обозначающие открытие и закрытие вебстраницы с надписью Привет. При открытии страницы обработчик события onLoad вызовет функцию alert, которая, в свою очередь, выдаст надпись Мы вам рады!
В случае же закрытия страницы обработчик события onUnload вызовет ту же функцию alert, но уже с параметром 'До скорой встречи'.
Все достаточно просто, не правда ли? А можно ли поменять что-либо в тексте самой страницы? Конечно.
Вернемся к спецификации HTML и определим еще один не рассмотренный ранее тег <div></div>. Парный тег <div> предназначен для создания на странице разделов. Такие разделы можно делать вложенными, поэтому соблюдение парности тега «открыл - закрыл» обязательно для исполнения.
Изменение надписи в теле страницы при изменении фокуса
Рассмотрим возможность изменения содержимого надписи на странице в зависимости от того, является ли страница активной.
<html>
<head>
</head>
<body
onClick="nadpis.align='center';"
onDbClick="nadpis.align='right';"
onBlur="nadpis.innerText='Зачем вы покидаете нашу страничку? Оставайтесь с нами';"
onFocus="nadpis.innerText='Мы рады, что вы вернулись к нам !';">
<div id="nadpis">
</div>
<h1>Приветствуем!</h1>
</body>
</html>
Рассмотрим данный листинг подробнее.
- onClick="nadpis.align='center' ; " - обработчик события, по щелчку кнопкой мыши центрирующий содержимое переменной nadpis.
- onDblClick= "nadpis . align= ' right' ; " - обработчик события, по щелчку кнопкой мыши выравнивающий по правому краю содержимое переменной nadpis.
- onBlur="nadpis.innerText='Зачем вы покидаете нашу страничку? Оставайтесь с нами' ; " - обработчик события, выводящий надпись Зачем вы покидаете нашу страничку? Оставайтесь с нами, если щелчок кнопкой мыши произошел за пределами окна страницы.
- onFocus="nadpis.innerText='Мы рады, что вы вернулись к нам !';"> - обработчик события, выводящий надпись Мы рады, что вы вернулись к нам!, если щелчок кнопкой мыши произошел в пределах окна страницы, и передающий параметры выравнивания надписи к вышеописанным обработчикам в зависимости от того, одинарный или двойной был щелчок.
- «div id=nadpis> - создание специального раздела для размещения на странице переменной nadpis. Параметр id тега <div> - обязательный и определяет переменную, которая будет выведена на страницу по вышеописанным правилам.
Изменение цвета надписи при наведении на нее указателя мыши
На примере разберем изменение цвета заголовка Привет! в зависимости от того, наведен ли на него указатель мыши.
Рассмотрим подробнее код сценария.
- <h1 id=cvet - идентификатор, определяющий свойство объекта.
- onMouseOver=" cvefe .style. color= ' blue- событийная процедура, изменяющая цвет надписи Привет! на голубой при наведении указателя мыши.
- onMouseOut = "cvet. style. color= ' red';" > - событийная процедура, выделяющая надпись Привет! красным цветом при отсутствии над ней указателя мыши.
- Приветствуем! </h1> - сама надпись и закрывающий тег.
Как видно, в языке JavaScript много возможностей для изменения объектов при совершении различных событий, вызываемых простым перемещением указателя мыши по поверхности страницы. Это позволяет украсить даже обычные пункты меню, задавать им различные цвета при наведении на них указателя мыши. Но это еще далеко не все возможности языка. Продолжим их рассмотрение на примерах взаимодействия с пользователем, то есть ответим на вопрос: каким образом получить исходные данные у пользователя и выдать ему результат.
| ← Примеры работы с формами. Сложение двух чисел | Основные моменты при создании сценариев на JavaScript → |
|---|