Читайте также:
|
Функции и события в JavaScript
Цель: Изучение языка сценариев JavaScript и создания Web-документа, который в последствии может быть трансформирован в Web-страницу или более сложные документы в сети Internet.
Описание:
Документ должен представлять собой файл с расширением HTM или HTML. Студент должен проработать все перечисленные ниже конструкции языка и включить их в свой документ.
1. Использовать шаблон для написания сценариев:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
<TITLE>Web-дизайн</TITLE>
<script language="JavaScript">
СЦЕНАРИЙ
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
2. Функции. Имеет следующий вид:
function имя()
{
Операторы
}
Как и в С не стоит забывать про круглые скобки за именем функции (это приводит к ошибке).
Запустите на выполнение (вставив функцию в сценарии) пример:
function acall()
{
alert ("Проснись!!!");
}
Мы также можем вызывать одну функцию из другой.
Function massage1()
{
alert("First massage");
Massage2();
alert("Third massage");
}
Function massage2()
{
alert("Second massage");
}
Massage1()
Проверьте, что такая конструкция работает. Управление передается стандартным образом.
3. Для дальнейшего использования функций необходимо знакомство с событиями. JavaScript - язык управляемый событиями. Все, что в нем происходит, является результатом некоторого события или вызывает какое-либо событие. Открытие новой страницы, щелчок мыши, движение курсора - все это события. Рассмотрим их подробнее.
Использование события onLoad при открытии страницы. Пример:
<BODY onLoad ="acall()">
Вызов функции при открытии html-страницы.
Обратите внимание, что функция описывается между тегами <script>, а само событие - в теге <body>.
Напишите аналогичный вариант для события onUnload для закрытия страницы. Создайте какую-нибудь свою функцию и проверьте, что все работает.
Использование события onClick для вызова функции по щелчку мыши в произвольном месте страницы. Пример:
<script>
Function acall()
{
alert("Вы щелкнули по странице!");
}
</script>
<BODY onclick="acall()">
Или щелчок по гиперссылке
<script>
Function acall()
{
alert("Вы щелкнули по ссылке!");
}
</script>
<BODY>
<a href=Proba33.htm onclick="acall()">reference</a>
Использование события onMouseover для вызова функции, когда курсор мыши надвигается пользователем, например, на гиперссылку.
Function acall1()
{
alert("Here is the reference");
}
<a href=Proba33.htm onMouseover="acall1()">reference</a>
Использование события onMouseout для вызова функции, когда курсор мыши пользователь убирает, например, с гиперссылки.
<a href=Proba33.htm onMouseout="acall()">reference</a>
4. Простая функция с параметрами ничем не отличается от привычной формы. Пример ее использования:
Function message(quote)
{
Alert(quote);
}
<BODY>
<p>Щелкните мышкой
<input type="button" value="здесь" onClick="message('I\'m here')">
чтобы прочитать сообщение.
<p>Щелкните мышкой
<input type="button" value="здесь" onClick="message('I\'m not here')">
чтобы прочитать второе сообщение.>
</BODY>
Теперь возвращаемое значение функции:
Дата добавления: 2015-12-08; просмотров: 38 | Нарушение авторских прав