Код JavaScript может быть встроен в документ HTML следующими основными способами.
Включение фрагментов сценария внутри элемента script:
<script type="text/JavaScript">
... операторы ...
</script>
На практике наряду с атрибутом type часто используют и атрибут language="JavaScript" , несмотря на то, в спецификации HTML он объявлен нежелательным. Наличие атрибута language гарантирует выполнение сценария любым браузером, поддерживающим JavaScript. Атрибут language позволяет также задать версию языка, возможности которой задействованы в сценарии, и тем самым ограничить выполенение сценария лишь браузерами, поддерживающими указанную версию. Например, при задании language="JavaScript1.5" сценарий будет выполняться лишь в браузерах, в которых реализована поддержка JavaScript1.5.
Элементы script могут содержаться как в разделе head, так и в body. При интерпретации документа они выполняются последовательно. В head, как правило, объявляются и инициализируются глобальные переменные и размещаются описания функций. В body фрагменты сценария обычно реализуют вставку динамически формируемого содержимого, например, вывод случайного изображения или даты последнего изменения документа.
Включение файлов со сценариями JavaScript:
<script type="text/JavaScript" src="myFunc.js"></script>
Вкключение файлов актуально, если одни и те же функции, объекты, глобальные переменные используются не в одном, а в ряде документов сайта. В таком случае эти файлы (обычно имеющих расширение .js) размещают в разделе head соответствующих документов. Это упрощает поддержку сценариев и позволяет ускорить загрузку за счет кэширования браузером файла с кодом JavaScript.
Определение обработчика события.
Обработчики событий, связанных с элементами документа HTML, указываются как атрибуты этих элементов. Список этих атрибутов приведен в разделе "События JavaScript". Значение этих атрибутов может представлять собой любое количество операторов JavaScript, однако обычно обработчики определяются как функции, описанные в элементе script. Ниже приведены два условных примера.
<span onClick="this.style.color='red'"> Click me! </span>
- в ответ на щелчок мыши текст "Click me!" станет красным.
<img src="jazz.jpg" id="jazz"
onMouseOver="changeImg('rock.jpg')"
onMouseOver="changeImg('jazz.jpg')">
- при наведении / уводе курсора мыши изображение меняется; это реализовано с помощью некоей функции changeImg().
URL типа JavaScript.
В гиперсылке можно указать значение атрибута href как псеводпротокол javascript: , после которого идет список инструкций. В этом случае при выборе гиперссылки браузер исполняет код JavaScript. Например выбор гиперссылки
<a href="javascript: window.open('next.htm','newWin','width=300,height=200'); void(0)">
откроем новое окно
</a>
приведет к открытию нового окна 300х200px и загрузке в него документа next.htm.
При использовании URL типа JavaScript следует помнить, что если последняя инструкция возвращает какое-то значение, его строковый эквивалент будет выведен в текущий документ, заменив его содержимое. Попробуйте, например, в приведенном выше коде убрать инструкцию void(0). Новое окно, конечно, откроется, но поскольку метод window.open() возвращает значение объектного типа, в исходном документе появится строка [object] или [object Window] (в зависимости от браузера). Чтобы избежать этого, применяют инструкцию void(0), указывающую на неопределенное возвращаемое значение.
Определенным недостатком URL типа JavaScript является отображение в статусной не адреса целевого документа, а последовательности инструкций JavaScript, невразумительной для большинства пользователей.