Внедрение сценария в документ

Внедрение сценария в документ это "штатная" возможность HTML. Рассмотрим способы и правила внедрения:

Для начала необходимо задать язык разработки сценариев для нашего HTML-документа. Это делается при помощи мета-записи Content-Script-Type (См. раздел 2.3.) в заголовке нашего документа. Например вот так:

или так:

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

Как уже было упомянуто ранее, внедрение сценария в документ осуществляется "штатными" средствами HTML. Рассмотрим как это сделать.

Первый способ это - использование тега HTML <SCRIPT>. Возможно использование данного тега в формате элемента для внедрения фрагмента кода в документ и в форме одиночного тега для связывания файла содержащего сценарии с документом.

Для внедрения используется элементный формат записи тега, с атрибутом TYPE, задающим тип сценария:

/* код сценария на Javascript */

document.write("Hi !!!");

</SCRIPT>

Для связывания документа с внешним файлом сценария, используется одиночный формат записи тега, с атрибутом SRC, задающим URL файла сценария:

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

OnLoad	Броузер заканчивает открытие документа HTML
OnUnload	Броузер выгружает документ HTML
OnClick	Пользователь щелкнул мышью по элементу
OnDblClick	Пользователь дважды щелкнул мышью по элементу
OnMouseDown	Пользователь нажимает кнопку мыши
OnMouseOver	Пользователь перемещает мышь поверх элемента
OnMouseMove	Пользователь перемещает мышь поверх элемента
OnMouseOut	Пользователь перемещает мышь, выходя из элемента
OnFocus	Элемент получает фокус ввода
OnBlur	Элемент теряет фокус ввода
OnKeyPress	Пользователь нажимает и отпускает клавишу
OnKeyDown	Пользователь нажимает клавишу над элементом
OnKeyUp	Пользователь отпускает клавишу над элементом
OnSubmit	Данные из формы переданы Web-серверу
OnReset	Форма очищена
OnSelect	Пользователь выбирает текст в текстовом поле
OnChange	Потеря фокуса ввода элементом после изменения его значения

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

<INPUT TYPE="BUTTON" NAME="btnPress" VALUE="Нажми меня" onClick="btnClick();"> - в данном случае при нажатии кнопки, происходит выполнение функции btnClick;

<A HREF="help.htm" onReset="lnkClick();">Помощь</A> - в данном случае вы не дождетесь выполнения функции lnkClick, поскольку элемент документа - ссылка, никогда не породит событие onReset;

Как внедрять сценарии в документы мы разобрали, но не менее важный вопрос КУДА, вернее в какое место документа?

От того, где мы разместим сценарий, зависит схема выполнение его браузером. Со сценариями обработчиками событий все должно быть ясно: элемент документа порождает событие и браузер выполняет сопоставленный событию сценарий-обработчик, но как быть со сценариями расположенными в других структурных разделах HTML-документа? Правила таковы:

Код сценария <SCRIPT>...</SCRIPT> в теле HTML-документа. В данном случае сценарий выполняется браузером при загрузке документа, и результаты его работы (если они есть) отображаются в окне браузера при открытии документа (надеюсь вы понимаете что, функции помещенные в тело HTML-документа не выполняются, если не указан их вызов);

Код сценария <SCRIPT>...</SCRIPT> в заголовке HTML-документа. В данном случае сценарии не выполняются браузером при загрузке документа. В заголовке обычно размещают различные служебные функции которые вызываются при обработки событий и из других сценариев размещенных в теле документа;

Приведем пример:

<HTML>

<HEAD>

<TITLE>Куда внедрить сценарий имеет значение !</TITLE>

/* код функции Javascript */

function HelloUser(txtName) {

alert("Привет пользователю " + txtName);

}

</SCRIPT>

</HEAD>

/* код исполняемого при загрузке сценария */

document.write("<H2>Вежливая страница</H2>");

</SCRIPT>

<p>Введите имя: <INPUT TYPE="TEXT" LENGTH="25" NAME="usnam">

<p><INPUT TYPE="BUTTON" NAME="btnPress" VALUE="Привет документу"

onClick="HelloUser(document.form1.usnam.value);">

</FORM>

</BODY>

</HTML>

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