Лабораторная работа №3
Создание динамических WEB-страниц c помощью языка JavaScript
Цель работы: научиться создавать динамически изменяющиеся HTML-документы с использованием языка сценариев JavaScript (генерация HTML-документа при загрузке WEB-страницы, обработка событий, настройка WEB-страниц, включение динамических компонентов на WEB-страницу, проверка форм).
1 Подключение скриптов
Использовать JavaScript на WEB-страницах можно двумя способами. Во-первых, можно динамически создать HTML-документ в процессе загрузки страницы. Во-вторых, с помощью JavaScript можно отслеживать различные события и выполнять необходимые действия. Задачи, выполняемые JavaScript, условно разделяются на следующие основные категорий: изменение содержимого WEB-страниц, обеспечение динамического поведения документов, проверка форм.
Сценарии могут быть подключены к основному HTML-документу несколькими способами:
- включением скрипта в качестве параметра в один из обработчиков. Этот метод обычно применяется для коротких сценариев;
- наиболее распространенный метод – размещение сценария в специальном элементе <SCRIPT>:
- сценарии могут загружаться из внешних файлов, обычно применяется для сценариев большого размера или многократно используемых на разных страницах.
Если во втором и третьем случаях браузер сразу находит исполняемый код, то есть команды, предназначенные для немедленного выполнения, то интерпретатор выполняет их последовательно, стока за строкой, по мере чтения текста.
В примере 1.1 приведена простейшая организация обработки события.
|
Пример 1.1. Встроенный скрипт |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Alert</TITLE> </HEAD> <BODY> <H1 onmouseover="alert('Поможем детям. Будем помнить, что дети – цветы жизни. Я приглашаю вас сейчас же сделать свои взносы и помочь детям.')"> Союз меча и орала </H1> </BODY> </HTML>
|
Сначала, по мере чтения, выполняется код HTML. Без каких-либо особенностей открывается окно браузера с заголовком, но элемент <H1> становится активным, как ссылка. При попадании на него указателя мыши возникает событие. В данном примере процедура обработки события вызывается встроенными средствами HTML, она указана как значение атрибута onmouseover. Управление передается обработчику события, то есть вызывается процедура alert('строка'). Обработчик, как и положено, выполнен средствами JavaScript. Эта простая встроенная функция вызывает на экран диалоговое окно предупреждения. В функцию должна быть передана строка (берется в одинарные кавычки), которая и появится в окне (рис.1.1).
Элемент HTML <SCRIPT> предназначен для размещения сценариев. Может вставляться в любое место документа, и таких разделов может быть несколько. В элементе может располагаться код, который выполняется сразу после прочтения, а может содержаться и описание функций, которые выполняются в нужный момент — момент вызова (например, после подведения указателя мыши). Коды из разных разделов могут взаимодействовать между собой.
При размещении кода следует помнить о построчном порядке выполнения операторов. Обычно код размещают или в разделе <head> или в разделе <body>. Первый случай рекомендуется, когда необходимо, чтобы код скрипта был обработан раньше, чем загрузится страница.
Если в документе размещено несколько элементов <script>, то при выполнении текущего фрагмента следует помнить, что могут быть использованы только переменные и функции, определенные в предыдущих скриптах, определенные же в последующих могут быть еще недоступны, и попытка их использования приведет к ошибке.
Если скрипт используется после загрузки страницы и достаточно длинный, то его выгоднее разместить в конце документа, чтобы загрузка не мешала отображению кода HTML.
Описание функции можно располагать в любом месте, главное, чтобы к моменту вызова функции оно уже было загружено в память.
Чтобы код был скрыт от браузеров, не поддерживающих скрипты, его размещают в комментариях HTML. Браузеры без интерпретатора JavaScript в этом случае код не прочтут, а интерпретатору, эти комментарии не помешают.
Если надо скрыть текст и от интерпретатора, размещая не код, а замечания к программе, то такие комментарии надо оформлять по правилам, которые применяются в языках C++ и Java. Таких правил два. Первое — только для однострочных комментариев, которые начинаются с двух подряд идущих слешей
//для браузеров, не поддерживающих JavaScript
Второе правило заключается в помещении текста в контейнер /* ... */. Причем размещение текста и ограничителей значения не имеет, они могут располагаться на одной или нескольких строках. Вкладывать один комментарий такого рода в другой нельзя.
/* Размещая сценарий внутри комментария HTML, можно скрыть его от браузеров, не поддерживающих JavaScript */
Рассмотрим пример организации обработчика события как функции (пример 1.2).
|
Пример 1.2. Подключение скрипта в элементе <script> |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Alert</TITLE> <SCRIPT type="text/javascript"> <!--//Размещая сценарий внутри комментария HTML, можно скрыть его от браузеров, не поддерживающих JavaScript function f1() { alert("Поможем детям. Будем помнить, что дети – цветы жизни. Я приглашаю вас сейчас же сделать свои взносы и помочь детям."); } --> </SCRIPT> </HEAD> <BODY> <H1 align="center" onmouseover="f1()"> Союз меча и орала </H1> </BODY> </HTML>
|
Здесь функция используется как обработчик события. Ее описание отдельно выносится в основной скрипт и размещается в контейнере <SCRIPT>…</SCRIPT>. Сама по себе эта часть во время прочтения интерпретатором не выполняется, а только находится в памяти. Вызов функции происходит в атрибуте события HTML при назначении обработчика.
Скрипты могут полностью располагаться во внешних файлах. Перепишем предыдущий пример, разместив скрипт во внешнем файле (пример 1.3а).
|
Пример 1.3а. Подключение скрипта во внешнем файле |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Alert</TITLE> </HEAD> <BODY> <SCRIPT type="text/javascript" src="my_script.js"> <!--//Если файл my_script.js будет обнаружен, то это содержимое будет проигнорировано. Если браузер не распознает параметр src, то он будет пытаться обработать этот контент, в котором можно расположить альтернативный сценарий. --> </SCRIPT> <H1 align="center" onmouseover="f1()"> Союз меча и орала </H1> </BODY> </HTML>
|
В строке 7, написанной по стандартам HTML, указано, что источник кода JavaScript располагается в отдельном файле my_script.js (атрибут src = "my_script.js"). Причем файл для данного примера, как видно из адреса, должен находиться в той же папке, но в общем случае может располагаться даже на другом сервере. Содержимое самого элемента HTML <script>, как следует из комментария, игнорируется, если внешний файл загружен. Если по какой-то причине загрузка не произошла, то только тогда выполняется код, заданный внутри элемента.
Файл скрипта (пример 1.3б) содержит только «чистый» код без какого-либо вспомогательного оформления.
|
Пример 1.3б. Внешний файл со скриптом |
|
//файл со скриптом my_script.js function f1() { alert("Поможем детям. Будем помнить, что дети – цветы жизни. Я приглашаю вас сейчас же сделать свои взносы и помочь детям."); }
|