Встраивание сценариев в гиперссылку
Как известно,
для создания на веб-страницах гиперссылок применяется
контейнер- тег <а>, имеющий
атрибут href для
указания адреса страницы или файла, к ко- торому приведет гиперссылка. Однако
вместо адреса данный атрибут может содержать и JavaScript-сценарий,
если перед сценарием поставить слово JavaScript:
to знаком
двоеточие). Пример такой гиперссылки следующий:
<a href="javascript:alert('Привет,
мир!');">Нажмите
сюда</а>
Когда
пользователь щелкает кнопкой мыши на гиперссылке, интерпретатор сце- нариев JavaScript получает код
alert(
'Привет, мир!');
Здесь
сценарий состоит всего из одной функции alert (), которая выводит на экран диалоговое
окно с текстом, полученным в качестве параметра.
Объем кода может быть
любым.
Встраивание сценариев для обработки
событий.
Поведение
каждого элемента зависит от событий, которые постоянно происходят
в веб-браузере. Допустим,
пользователь выполнил следующие действия: щелкнул кнопкой мыши на тексте, переместил указатель мыши и
загрузил HTML-документ.
Веб-браузер сам решает, как
реагировать на каждое событие, однако вы можете
«перехватить»
отдельные события и задать для них новое поведение. В языке HTML многие теги имеют атрибуты, соответствующие
различным событиям.
Эти атрибуты могут содержать код языка JavaScript, который выполняется в ответ на
событие, например:
<p onclick="alert('Не
нажимать!');">Это простой текст</р>
Контейнерный тег <р>
просто объединяет текст в параграфы, однако на него возлагается еще одна
функция. Если вы определите атрибут onclick, то ваш текст будет реагировать на щелчок кнопкой мыши.
В языке HTML практически каждый тег имеет атрибуты для обработки событий Благодаря возможности обработки событий вы можете создавать
интерактивные страницы, которые будут реагировать на действия пользователей.
Встраивание
сценариев в тег <script>
В HTML есть специальный контейнерный тег <script>.
Если при разборе кода HTML-доку мента веб-браузер
встретит этот тег, то он интерпретирует последую- щий до закрывающего тега </script>
текст как сценарий на каком-либо языке Язык сценария указывается с помощью
атрибута type. Например, для указания языка JavaScript используется
следующий код:
<script type="text/javascript">
Здесь располагается код сценария
</script>
Этот атрибут можно и не указывать, так как значение «text /javascript» является значением по умолчанию.
В коде сценария можно использовать комментарии — текст, который игнорируется интерпретатором JavaScript.
Комментарии / / и < ! - - позволяют
скрыть строку в коде сценария. Ниже приводится код, в котором используются
комментарии.
<script>
// Это первый комментарий
// Второй комментарий, далее идет код
Код сценария
Создание
сценариев
<!-- Еще один комментарий Продолжение
кода // Комментарий
</script>
Комментарии могут быть и многострочными, что облегчает
отладку сценария и позволяет закомментировать проблемный участок кода. Для этой
цели используются наборы символов /* и */, как, например, в следующем коде:
<script>
/* Это тоже
комментарий */
Код сценария
</script>
Сценарии могут содержаться в самой веб-странице,
как описано выше, и в отдельном файле. Тег <script> имеет атрибут src, в качестве значения которого применяется адрес файла со сценарием.
Обычно файлы со сценариями JavaScript имеют
расширение .js, как, например, в файле libl.js. Таким образом, чтобы подключить к HTML-документу файл lib1.js, необходимо добавить в него следующую строку:
script type="text/javascript"
src="libl.js"></src>
использование отдельных файлов для хранения кодов сценариев
под код сценария позволит вам создавать, например, собственные библиотеки
функций и объектов, При необходимости можно просто подключить к веб-странице файл библиотеки, что избавит вас от создания
функций с нуля. Расположение часто используемых функций в одном файле упростит
также отладку и дальнейшее совершенствование сценариев.
Стоит отметить, что обычно объявления всех глобальных
переменных, функций внешних файлов со сценариями помещают внутри контейнерного
тега <head>, то есть в
заголовке страниц. В листинге 2.1 показываются фрагменты веб-страницы,
используемые для встраивания сценариев в HTML-документ.
Листинг 2.1. Пример веб-страницы
со сценариями
<html>
<head>
<titlе>Страница со
сценариями</title>
<!--
Подключаем внешние файлы со сценариями -->
<script type="text/javascript"
src="lib1.js"></src>
<!--
Глобальные переменные, функции и объекты -->
<script type="text/javascript">
//Код на JavaScript
</script>
</head>
<body>
...<!-- Элементы страницы -->
<script type="text/javascript>
<! --
...
// Тоже код на веб-странице </script>
...
<!--Элементы страницы -->
<р onclick="...">Элемент страницы, события
которого обрабатываются</р>
...
<!-- Элементы страницы -->
</body>
</html>
Мы
рассмотрели, как можно внедрить в HTML-документ код сценариев на JavaScript. Как видите, все довольно
просто. В этом вы убедитесь, когда создадите свой первый сценарий, к
составлению которого мы сейчас и перейдем.
Ваш
первый сценарий
Классическим
примером в начале изучения любого языка программирования является программа,
выводящая сообщение «Привет, мир!!!». Вот и мы создадим на JavaScript сценарий,
который будет представлять это сообщение.
Прежде
стоит отметить, что язык JavaScript учитывает
регистр символов. Это означает, что вам следует внимательно следить за тем,
какими буквами вы набираете.
<html>
<head>
<title>Наш первый сценарий</title>
</head>
<body>
<script type="text/javascript">
for (var i = 0; i < 10; i++)
{
document.write("Привет, мир!!!");
}
</script>
</body>
</html>
Сохраните
файл, например с именем script1. html.
Создав веб-страницу со сценарием, можно посмотреть, как она будет
выглядеть в веб -браузере.
Чтобы убедиться, что сценарий работает как надо, проверьте его на всех установленных на вашем компьютере веб-браузерах.
Запустите веб-браузер
и откройте в нем созданную веб-страницу.
Если вы все сделали правильно, на экране вашего веб-браузера появится
сообщений «Привет, мир!!!».
