Встраивание сценариев в рамках элемента 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. Как видите, все довольно просто. Чтобы убедиться в этом, попробуйте создать свой первый сценарий.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

Взаимодействие с процессами в рамках платформы .NET

Из книги Язык программирования С# 2005 и платформа .NET 2.0. [3-е издание] автора Троелсен Эндрю

Взаимодействие с процессами в рамках платформы .NET Хотя процессы и потоки сами по себе не являются чем-то новым, способы взаимодействия с этими примитивами в рамках платформы .NET существенно изменены (к лучшему). Чтобы успешно пройти путь к пониманию приемов построения


Встраивание

Из книги Microsoft Visual C++ и MFC. Программирование для Windows 95 и Windows NT автора Фролов Александр Вячеславович

Встраивание В некоторых случаях более удобно и эффективно выполнять подстановку тела функции вместо ее вызова. Непосредственная подстановка тела функции позволит сэкономить время процессора на вызове функции. В языке Си этого можно достичь при помощи директивы


Отладка сценариев в Microsoft Script Debugger

Из книги Внедрение SAP R/3: Руководство для менеджеров и инженеров автора Кале Вивек

Отладка сценариев в Microsoft Script Debugger Если при выполнении сценариев возникают ошибки или получаются непредвиденные результаты, можно воспользоваться специальным отладчиком для трассировки сценария и проверки значений переменных. Мы в качестве такого отладчика


Управление изменениями в рамках проекта SAP

Из книги Сетевые средства Linux автора Смит Родерик В.

Управление изменениями в рамках проекта SAP Внедрение изменений и управление реакцией на изменение — это две важные задачи, с которыми сталкиваются компании в наше время. Способность изменять бизнес-процессы вносит непосредственный вклад в практический результат


Настройка сервера для работы в рамках поддерева chroot

Из книги Операционная система UNIX автора Робачевский Андрей М.

Настройка сервера для работы в рамках поддерева chroot Создав поддерево chroot, можно приступать к его использованию. Для этого надо сконфигурировать сервер для работы в рамках поддерева, организовать запуск сервера и обеспечить контроль доступа к поддереву chroot извне.


Запуск сервера в рамках поддерева chroot

Из книги HTML, XHTML и CSS на 100% автора Квинт Игорь

Запуск сервера в рамках поддерева chroot Если сервер осуществляет вызов функции chroot(), вероятнее всего, что в его конфигурационном файле содержится одна или несколько опций, предназначенных для управления выполнением в рамках поддерева chroot. Например, для ProFTPd предусмотрена


Запуск сервера BIND в рамках поддерева chroot

Из книги автора

Запуск сервера BIND в рамках поддерева chroot Ранее описывался процесс подготовки сервера к запуску в рамках поддерева chroot. Чтобы лучше понять изложенный выше материал, желательно рассмотреть запуск конкретного сервера в подобном режиме. В качестве примера выберем сервер


Встраивание драйверов в ядро

Из книги автора

Встраивание драйверов в ядро Драйвер устройства является частью кода ядра операционной системы и обеспечивает взаимодействие других подсистем UNIX с физическими или псевдоустройствами. Существует два основных метода встраивания кода и данных драйвера в ядро


4.1. Встраивание изображений

Из книги автора

4.1. Встраивание изображений Начнем с добавления изображения, потому что это самый простой для добавления и самый распространенный мультимедийный элемент, встречающийся в Интернете. У изображений много плюсов: статичность, небольшие размеры файлов (относительно других


Встраивание объектов

Из книги автора

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


Встраивание аудио

Из книги автора

Встраивание аудио Для начала возьмем самую распространенную задачу – проигрывание фонового звука. Чтобы разобраться с ней, нужно немного отвлечься от элемента OBJECT, потому что есть способ встроить фоновый звук и без него. Создатели языка HTML предусмотрели для этого


Встраивание видео

Из книги автора

Встраивание видео Сейчас встраивать видео на сайт можно без опасений – нынешних скоростей доступа в Интернет достаточно, чтобы у пользователей не было проблем с просмотром и скачиванием видео. Тем более что сейчас перемещение видеоархивов в сеть становится весьма


7.1. Встраивание CSS в HTML

Из книги автора

7.1. Встраивание CSS в HTML Начнем разбирать таблицы стилей с небольшого HTML-документа (листинг 7.1).Листинг 7.1. Простой HTML-документ<html><head><title>Моя домашняя страница</title></head><body><h1>Моя домашняя страница</h1><p>На этой странице вы найдете информацию обо мне