Javascript. Элементы script.

Подробности: Создано 17.03.2013 20:24; Дата публикации

Теперь, после того как вы узнали немного о JavaScript и о том, зачем он нужен, пора приступить к написанию первого настоящего сценария.

Элемент <script>

Любой сценарий начинается с блока <script>. Он может располагаться в любом месте XHTML-документа. Но фактически у вас есть два варианта его размещения.

В разделе <body>. В этом случае браузер выполнит прописанные в XHTL-документе сценарии, достигнув элемента <script> в разделе <body>. Если поместить код в начало раздела, браузер запустит выполнение сценария до отображения страницы.

СОВЕТ
Как правило, фанаты JavaScript размещают свои сценарии в конце раздела <body>. Это позволяет избежать ошибок, которые могут возникнуть, если сценарий зависит от другой части страницы, кото¬рую браузер еще не прочел. Поскольку браузеры быстро считывают всю страницу, сценарии выполняются почти незамедлительно.

В разделе <head>. Если поместить обычный сценарий в раздел <head> вашего XHML-документа, он будет выполнен незамедлительно, до того, как браузер обработает какую-либо часть XHTML- разметки. Однако раздел <head> принято использовать для сценариев, содержащих функции. Функции не выполняются немедленно, они вызываются, когда посетители выполняются какие-либо действия на странице, например перемещают мышь.


ПРИМЕЧАНИЕ
Веб-страница может содержать сколько угодно блоков <script>.

Как правило, блок сценариев состоит из серии программных инструкций. Чтобы понять, как работают эти инструкции, рассмотрим следующий пример, который заставляет браузер вывести на экран окно сообщений JavaScript :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
chtml xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>JavaScript TecT</title> </head>
<body>
<Ь1>Вы будете удивлены!</hl>
<р>Эта страница использует JavaScript.</р>
<script type="text/javascript">
alert("Привет, JavaScript разработчик!")
</script> </body>
</html>

После нажатия кнопки ОК сообщение исчезнет и страница вернется в свое исходное состояние. Как и все сценарии, код JavaScript в этом примере располагается между элементами <script>. Атрибут type сообщает браузеру, что сценарий содержит код JavaScript и это необходимая деталь:

<script type="text/javascript"> </script>

Наверное, вы удивлены тому, как функционирует этот сценарий. Когда браузер обрабатывает сценарий, он выполняет весь код, строка за строкой. В данном случае это одна строка:

alert("Привет, JavaScript разработчик!")

В этой строке использована встроенная JavaScript-функция alert. Функция — это подпрограмма, состоящая из одной или более строк кода и выполняющая определенную задачу. Язык JavaScript содержит множество встроенных функций, но допускает и создание собственных.

Для работы функции alert () необходима некоторая информация, в терминологии программирования называемая аргументом. В данном случае информация представляет собой текст, отображаемый в окне предупреждений. Чтобы вывести в сообщении обычное число, скажем 6, достаточно просто указать его, без кавычек. Однако чтобы вывести текст, необходимо сообщить браузеру о том, где он начинается и где за-канчивается. В JavaScript эта проблема решается с помощью одинарных (') или двойных (") кавычек (см. пример выше).

ПРИМЕЧАНИЕ
В терминологии программирования отдельный участок текста программы называется строкой. Например, «Дружественная лиса», «а» и «Румпельштицхен» — это строки.

Вот и все. Все, что делает этот простой сценарий, — вызывает функцию alert () языка JavaScript. (Проведите достаточно времени рядом с программистами и фанатами JavaScript, и скоро узнаете, что «вызов» — это предпочтительный способ описания действия по запуску функции.) Функция alert () делает все остальное — выводит на экран окно правильного размера и ожидает от посетителя нажатия кнопки ОК.

ПРИМЕЧАНИЕ
Для написания этого сценария нужно знать о том, что существует такая функция, alert (). Узнать об этом можно на множестве обучающих сайтов, посвященных JavaScript.

Используя полученные знания, вы должны суметь изменить этот сценарий следующим образом.
•   Вывести другое сообщение (изменив аргумент).
•   Вывести более одного сообщения, одно за другим (добавив строки в блок <script>).
•   Вывести сообщение до отображения веб-страницы (изменив положение блока <script>).

Это не отнимет много времени, но зато покажет, насколько просто начать использовать или изменить простой сценарий.

Сценарии и язык XHTML

Как вы уже знаете, для хранения кода JavaScript в XHTML- документе используется блок <script>. При этом важно понимать, что данный блок — всего лишь один из элементов языка разметки XHTML, который должен удовлетворять установленным правилам. Одно из правил запрещает ввод недопустимых символов внутри блока <script>, таких как угловые скобки, которые имеют специальное значение в языке XHTML.

К сожалению, иногда в коде возникают специальные символы. Их можно заменить символьными кодами, но от этого код становится сложно читать, понимать и редактировать. Более правильным решением будет поместить весь сценарий в специальный раздел CDAТА — особый участок XHTML-документа, в котором не действуют привычные правила разметки XHTML. Пример:

<script type="text/javascript"> //<![CDATA[
alert("Привет, JavaScript-разработчик!")
//]]>
</script>

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