Разработка веб-приложений: учебное пособие

4. Основы JavaScript

4.4. Размещение JavaScript на HTML-странице

Для вставки JavaScript-кода в HTML-страницу обычно используют элемент <script>, который впервые появился в браузере Netscape Navigator 2, а позднее вошел в формальную спецификацию HTML. Он имеет шесть атрибутов:

async (необязательный) – указывает, что нужно немедленно начать загрузку сценария с сервера и сразу же перейти к выполнению других действий на странице, таких как загрузка ресурсов или других сценариев. Действителен только для внешних файлов сценариев;
charset (необязательный) – определяет кодировку сценария, указанного с помощью атрибута src. Этот атрибут используется редко, и большинство браузеров его игнорируют;
defer (необязательный) – указывает, что выполнение сценария можно безопасно отложить, пока не будут полностью закончены синтаксический анализ и визуализация контента документа. Он действителен только для внешних сценариев;
language (устарел) – определял язык сценариев, используемый в блоке кода (например, "JavaScript", "JavaScript 1.2" или "VBScript"). Большинство браузеров игнорируют этот атрибут, поэтому использовать его не следует;
src (необязательный) – указывает внешний файл с кодом, который нужно выполнить;
type (необязательный) – заменяет атрибут language. Указывает тип контента (MIME-тип) языка сценариев, который используется в блоке кода. Традиционно этот атрибут имел значение "text/javascript", но оба значения, и "text/javascript", и "text/ecmascript", устарели. JavaScript-файлы обычно возвращаются сервером с MIME-типом "application/x-javascript", хотя присвоение этого значения атрибуту type может привести к игнорированию сценария. В браузерах, отличных от Internet Explorer, также поддерживаются "application/javascript" и "application/ecmascript". По традиции и ради обеспечения совместимости этому атрибуту обычно присваивают значение "text/javascript". Атрибут type можно безопасно опускать, так как при его отсутствии используется значение "text/javascript".

Есть два способа применения элемента <script>: можно внедрить JavaScript-код непосредственно в страницу или включить в нее сценарий из внешнего файла.

Чтобы встроить JavaScript-код непосредственно в страницу, поместите его прямо в элемент <script>:


<script type="text/javascript"> 

function sayHi(){alert("Hi!");}

</script>

JavaScript-код в элементе <script> обрабатывается сверху вниз. В приведенном примере определение функции интерпретируется и сохраняется в среде интерпретатора. Остальной контент страницы не загружается и не отображается, пока не будет выполнен весь код в элементе <script>.

При написании встроенного JavaScript-кода помните, что использовать строку "</script>" в своем коде нельзя. Например, при загрузке следующего кода в браузере возникнет ошибка:


<script type="text/javascript"> 

function sayScript(){alert("</script>");}

</script>

При синтаксическом анализе встроенного в страницу сценария браузер интерпретирует строку "</script>" как закрывающий тег </script>. Чтобы решить эту проблему, экранируйте знак /, как показано в этом фрагменте:


<script type="text/javascript"> 

function sayScript(){alert("<\ /script>");}

</script>

Это изменение устраняет ошибку, делая код понятным для браузеров.

Чтобы включить в страницу JavaScript-код из внешнего файла, нужно использовать атрибут src. Его значением должен быть URL-адрес файла со сценарием, например:

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

</seript>

В этом примере на страницу загружается внешний файл с именем example.js. Сам файл должен содержать только JavaScript-код, который иначе располагался бы между тегами <script> и </script>. Как и в случае встроенного JavaScript-кода, на время интерпретации внешнего файла обработка страницы приостанавливается (также требуется некоторое время на загрузку файла). В XHTML-документах закрывающий тег можно опускать, например:

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

He используйте такой синтаксис в HTML-документах, потому что он нарушает правила HTML и неправильно обрабатывается некоторыми браузерами, в частности Internet Explorer.

Внешним JavaScript-файлам обычно назначают расширение .js, но это не обязательно, поскольку браузеры не проверяют расширения включаемых файлов. Это позволяет динамически генерировать JavaScript-код с помощью JSP, РНР или другого языка сценариев на стороне сервера. Помните, однако, что серверы часто используют расширение файла для определения правильного MIME-типа, назначаемого ответу. Если вы не применяете расширение .js, убедитесь, что ваш сервер возвращает правильный MIME-тип.

Элемент <script> с атрибутом src не может содержать дополнительный JavaScript-код между тегами <script> и </script>, в противном случае, хотя сценарий загружается и выполняется, встроенный код игнорируется.

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

<scripttype="text/javascript" src="http://www.somewhere.com/afile.js">

</script>

Код из внешнего домена загружается и интерпретируется как часть страницы, в которую он загружается. Это позволяет при необходимости получать JavaScript-сценарии из других доменов, но будьте осторожны, загружая сценарии с сервера, который вы не контролируете: злоумышленник может в любой момент заменить загружаемый файл. Включайте JavaScript-файлы из других доменов, только если эти домены принадлежат вам или если вы доверяете их владельцам.

Независимо от того, как код включается в HTML-страницу, элементы <script> интерпретируются в том порядке, в котором они расположены, при условии, что у них нет атрибутов defer и async. Код первого элемента <script> должен быть полностью интерпретирован, чтобы можно было приступить ко второму элементу <script>, второй элемент должен быть полностью обработан перед третьим, и т. д.