Внедрение JavaScript в HTML-документ

Вы ознакомились с историей и перспективами развития JavaScript и выяснили, что требуется настоящему творцу сценариев, теперь можно приступить к их написанию. Первое, что вы должны понять, - каким образом объединяются на Web-странице JavaScript и HTML.

Изучив эту главу, вы узнаете:

  • как JavaScript внедряется в HTML на Web-странице;
  • о важности тэга <head>;
  • что такое блок SCRIPT и как добавить его в Web-страницу;
  • как скрыть JavaScript от старых версий браузеров, не поддерживающих JavaScript.

Соприкосновение миров: HTML и JavaScript

Итак, вы уже изучили HTML и кое-что узнали о JavaScript. Необходимо сделать следующий шаг - выяснить, как эти два языка объединяются и гармонично сочетаются на Web-странице.

Поскольку HTML и JavaScript - совершенно независимые друг от друга технологии, существуют правила, как нужно помещать JavaScript в HTML-документ. Есть несколько способов ввода JavaScript на Web-страницу, но сначала следует рассмотреть наиболее распространенный и самый гибкий: сценарий JavaScript вставляется блоком в тэг <head>.

Давайте посмотрим, как это делается.

Каркас HTML

Пример. Прежде чем переходить к дальнейшему изучению материала, вы должны ознакомиться с HTML-структурой страницы. Здесь приводится HTML-код Web-страницы, изображенной на рис. 2.1:

<html>
<head>
<title>Пpocтая страница</titlе>
</head>
<body>
<р>0чень простая Web-страница!</p>
</body>
</html>

Следует обратить особое внимание на блок HTML, начинающийся с открывающего тэга <head> и заканчивающийся тэгом </head>. Это блок HEAD, или заголовок Web-страницы, и именно сюда вы будете помещать свой сценарий JavaScript.


Рис. 2.1. Web-страница в Internet Explorer

Однако вы не сможете просто вставить код в блок HEAD. Сначала вам придется сделать еще кое-что.

Блок SCRIPT

Чтобы ввести сценарий JavaScript в блок HEAD, сначала нужно добавить новый HTML-блок. Это блок SCRIPT. Назначение данного блока - указать браузеру, что содержимое блока, заключенное между открывающим и закрывающим тэгами, является сценарием, который требует соответствующего обращения.

Этот блок может быть вставлен в любом месте внутри блока HEAD, но обычно добавляется в конце, перед закрывающим тэгом </head>:

<html>
<head>
<title>Пpocтая страница</title>
<script>

</script>
</head>
<body>
<р>0чень простая Web-страница!</p>
</body>
</html>

Предупреждение Блок SCRIPT помещается в заголовок для того, чтобы сценарий выполнялся в первую очередь и тем самым резко снижалось количество ошибок. Не волнуйтесь, если сейчас вам это кажется странным, позже данный вопрос будет рассмотрен в мельчайших подробностях.

Прежде чем вставлять сценарий JavaScript в блок SCRIPT, вы должны выполнить еще несколько действий. В первую очередь нужно указать браузеру, какого рода сценарий содержится в блоке SCRIPT. Дело в том, что JavaScript не единственный язык подготовки сценариев. Другим широко распространенным языком является VBScript компании Microsoft. Итак, чтобы ввести описание языка JavaScript, нужно добавить в тэг <script>, который открывает блок SCRIPT, атрибут language:

<html>
<head>
<title>Пpocтая страница</title>
<script language=" ">

</script>
</head>
<body>
<р>0чень простая Web-страница!</p>
</body>
</html>

Вы объявляете, что пользуетесь JavaScript, указывая в кавычках JavaScript:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
<р>0чень простая Web-страница!</p>
</body>
</html>

Примечание Если вы хотите писать сценарий на VBScript, следует указать язык vbscript: <script language="vbscript">

Необходимо отметить два важных момента.

Во-первых, кавычки. Иногда вам может встретиться код JavaScript, в котором название языка вводится безо всяких кавычек. Все вроде работает, так зачем они вообще нужны? Это один из тех случаев, когда следует строго соблюдать правила. Хотя браузеры Internet Explorer и Netscape Navigator понимают указание языка и без кавычек, все же предпочтительнее их использовать. Иногда возникают такие ситуации, когда требуется, чтобы код HTML был написан в соответствии со стандартами. Привычка правильно вводить код HTML поможет вам в будущем.

Во-вторых, регистр. Взгляните на следующие надписи:

  • <script language="javascript">
  • <script language="JavaScript">
  • <script language="JAVASCRIPT">

Здесь по-разному комбинируются строчные и прописные буквы. Хотя в этой книге используется написание «JavaScript», при создании Web-страниц желательно пользоваться только нижним регистром. Так быстрее и проще печатать.

Изучая сценарии, найденные в сети, вы можете заметить, что атрибут language иногда опускается. Как и в прошлом случае, это не приводит к ошибкам. Причина заключается в том, что язык подготовки сценариев JavaScript был создан первым, ж он считается языком по умолчанию. Однако при создании Web-страниц высо-кого качества желательно включать в код атрибут language. Это пригодится вам в будущем.

И вновь об атрибуте language

Атрибут language более важен, чем может показаться с первого взгляда. Хотя JavaScript и является языком, используемым по умолчанию, существует несколько версий и разновидностей JavaScript. JavaScript 1.0, JScript применяются до сих шор. Вы можете пользоваться атрибутом language, чтобы точно указать, для катай именно версии языка создается сценарий. Версия зависит от конкретного бра-узера и от того, на какую версию JavaScript рассчитан сценарий. На первый взгляд, этот принцип кажется сложным, но, как будет видно далее, его применение всегда оказывается полезным.

Строкой <script language=" javascript"> вы сообщаете браузеру, что ис-пользуете язык JavaScript, и обрабатывать его нужно специальной программой, интерпретирующей JavaScript. Это значение по умолчанию. Однако если вы используете JavaScript для браузера Internet Explorer компании Microsoft, то желательно указывать не JavaScript, a JScript:

<script language="JScript">
</script>

В этом случае сценарий JavaScript, содержащийся внутри блока SCRIPT, будет выполняться только в браузере Internet Explorer.

Но если ваш сценарий адресован пользователям Netscape Navigator 3.0? Из предыдущей главы вы узнали, что этот браузер поддерживает версию 1.1 языка JavaScript. В таком случае следует задать следующую установку:

<script language="JavaScript1.1">
</script>

Теперь вы получили полное представление о назначении атрибута language. Позже мы вновь обратимся к нему и раскроем еще несколько секретов.

Предупреждение Помните, что языком по умолчанию является JavaScript, и именно он используется в подавляющем большинстве примеров этой книги (иные случаи будут оговорены). Если вы по недосмотру укажете этот язык, используя на самом деле какой-либо другой, то это может привести к невыполнению сценария в новых браузерах, и отыскать причину ошибки будет очень непросто.

Сокрытие JavaScript от старых версий браузеров

Более ранние, чем Netscape Navigator 2.0 и Microsoft Internet Explorer 3.0, версии браузеров не поддерживают JavaScript, и имеющийся на Web-странице сценарий может привести к грубейшим ошибкам. Во избежание подобного рода проблем «спрячьте» сценарии внутри блока SCRIPT с помощью тэгов комментариев HTML. Вставляются они очень просто и, хотя старые версии браузеров сегодня встречаются довольно редко, имеет смысл ввести тэги комментариев в шаблон HTML, чтобы использовать их на каждой странице, содержащей сценарий JavaScript.

Такие комментарии очень легко добавить. Внутри тэгов <scr ipt> введите еще пару тэгов: <! — и - - >. Написанный вами код будет располагаться между ними и, следовательно, пропускаться теми браузерами, которые не поддерживают JavaScript.

Примечание Может показаться странным, что команды, которые требуется выполнить, помещаются внутри тэгов комментариев, поскольку комментарии именно для того и предназначены, чтобы скрывать текст на странице. Но суть заключается в том, что все браузеры, поддерживающие сценарии, игнорируют тэги комментариев и действуют так, как будто их нет.

Чтобы тэги комментариев HTML привлекали внимание, некоторые разработчики помещают внутри них собственные примечания (иногда довольно забавные), как бы предупреждая о своих намерениях:

<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>

Теперь страница имеет следующий вид:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
</head>
<body>
<р>0чень простая Web-страница!</р>
</body>
</html>

Примечание Вы уже сделали первые шаги в изучении JavaScript - научились пользоваться тэгами комментариев (//) и узнали, что они отличаются от тэгов комментариев HTML.



[ Назад ] [ Вверх ] [ Далее ] 
Hosted by uCoz