Встраивание сценариев в рамках элемента SCRIPT

Встраивание сценариев в рамках элемента SCRIPT

Кроме возможности обработки событий, для внедрения сценариев в веб-страницы в языке разметки HTML есть специальный элемент SCRIPT. Браузер, встретив тег <script> в процессе разбора кода, интерпретирует текст, последующий до закрывающего тега </script>, как сценарий на каком-либо языке. Для указания языка сценария используется атрибут type.

Например, для указания языка JavaScript:

<script type="text/javascript">

Здесь располагается код сценария

</script>

При использовании сценариев JavaScript можно этот атрибут не указывать, так как значение «text/javascript» является значением по умолчанию.

Кроме того, иногда для указания типа языка используют атрибут language. Так, для указания языка JavaScript 1.0 значение атрибута language должно быть «JavaScript», для JavaScript 1.1 – "JavaScript1. 1", для JavaScript 1.2 – "JavaScript1.2" и т. д. Однако данный атрибут не входит в стандарт, определяющий язык HTML, хотя и распознается большинством браузеров. По этой причине его не рекомендуется употреблять. Стоит заметить, что если значение атрибута language незнакомо браузеру, то содержимое элемента SCRIPT игнорируется.

Если пользователь работает в старой версии браузера, которая не поддерживает JavaScript, то элемент SCRIPT может оказаться неизвестным программе и код сценария будет выведен на экран как обычный текст. Таким образом, необходимо обеспечить маскировку кода сценариев от старых браузеров. Для этого код сценария внутри элемента SCRIPT окружают комментариями языка HTML (<!– и –>):

<script type="text/javascript">

<!– Маскируем код

Здесь располагается код сценария

// Снимаем маскировку –>

</script>

Таким образом, браузер ранней версии, встретив элемент SCRIPT, проигнорирует его, а содержащийся внутри этого элемента код пропустит, посчитав комментарием.

Здесь стоит обратить внимание, что перед закрывающим комментарием языка HTML (->) стоит еще и комментарий языка JavaScript (//), поскольку иначе при выполнении JavaScript-кода некоторые браузеры могут попытаться выполнить обработку этой строки, а набор символов – > в JavaScript имеет совсем другое значение. Вообще, язык JavaScript богат на различные комбинации символов, обозначающие комментарии. Комментарии игнорируются интерпретатором JavaScript.

Комментарии // и <!– позволяют скрыть строку в коде сценария:

<script>

// Это первый комментарий

// Второй комментарий, далее идет код

Код сценария

<!– Еще один комментарий

Продолжение кода

// Комментарий

</script>

Комментарии могут быть и многостроковыми, что облегчает отладку сценария и позволяет закомментировать проблемный участок кода. Для этой цели используются наборы символов /* и */.

<script>

/* Это

тоже

комментарий */

Код сценария

</script>

Что же делать с браузерами, которые не поддерживают сценарии или такая возможность в них просто отключена? В таких случаях необходимо либо предупредить пользователя, что для просмотра требуется поддержка сценариев, либо заменить код каким-либо вариантом без сценариев. Для этого в языке HTML есть элемент NOSCRIPT, чье содержимое будет использовано при отсутствии поддержки сценариев. Например:

<noscript>

<p>Ваш браузер не поддерживает сценариев JavaScript или их поддержка отключена</p>

</noscript>

Таким образом, можно, например, предупредить пользователя о том, что для просмотра страницы ему необходим браузер с поддержкой JavaScript. Или же можно предоставить пользователю ссылку на версию сайта, адаптированную для старых версий браузеров.

Сценарии могут содержаться в самой веб-странице, как описано выше, а также в отдельном файле. Элемент SCRIPT имеет атрибут src, который должен иметь значение адреса файла со сценарием. Обычно файлы со сценариями JavaScript имеют расширения JS, например файл lib1.js. Таким образом, чтобы подключить к HTML-документу файл lib1.js, необходимо добавить в него следующую строку:

<script type="text/javascript" src="lib1.js"></src>

Использование отдельных файлов под код сценариев позволит вам создавать, например, собственные библиотеки функций и объектов, при необходимости просто подключив к веб-странице файл библиотеки, не создавая каждую функцию заново. Расположение часто используемых функций в одном файле упростит и отладку, и дальнейшее совершенствование сценариев.

Стоит отметить, что обычно объявления всех глобальных переменных, функций, внешних файлов со сценариями помещают внутри элемента HEAD, то есть в заголовке страниц. Дело в том, что прежде чем использовать какие-либо переменные, функции или объекты, их необходимо объявить. Поскольку содержимое элемента HEAD читается первым, вы можете определять в нем то, на что будете ссылаться позже.

Таким образом, код веб-страницы со сценариями может выглядеть примерно так, как в листинге 12.1. В нем показаны фрагменты кода веб-страницы, касающиеся встраивания сценариев в HTML-документ.

Листинг 12.1. Пример веб-страницы со сценариями

<html>

<head>

<title>Страница со сценариями</title>

<!– Подключаем внешние файлы со сценариями –>

<script type="text/javascript" src="lib1.js"></src>

<!– Глобальные переменные, функции и объекты –>

<script type="text/javascript">

<!– Маскировка сценария

... // Код на JavaScript

// Конец маскировки сценария –>

</script>

</head>

<body>

<noscript>

<p>Ваш браузер не поддерживает сценарии или их поддержка отключена</p>

</noscript>

... <!– Элементы страницы –>

<script type="text/javascript>

<!–

... // Тоже код на веб-странице

//–>

</script>

... <!– Элементы страницы –>

<p onclick="...">Элемент страницы, события которого обрабатываются</p>

... <!– Элементы страницы –>

</body>

</html>

Таким образом, в HTML-документы внедряется код сценариев на JavaScript. Как видите, все довольно просто. Чтобы убедиться в этом, попробуйте создать свой первый сценарий.