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

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

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

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

или так:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/vbscript">

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

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

 

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

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

<SCRIPT TYPE="text/javascript">

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

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

</SCRIPT>

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

<SCRIPT SRC="script.js" TYPE="text/javascript">

<SCRIPT SRC="script.vbs" TYPE="text/vbscript">

 

Вторым способом использования сценариев в документе является назначение сценариев-обработчиков событий различным элементам 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>

<SCRIPT TYPE="text/javascript">

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

function HelloUser(txtName) {

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

}

</SCRIPT>

</HEAD>

<BODY BGCOLOR ="SILVER", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">

<SCRIPT TYPE="text/javascript">

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

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

</SCRIPT>

<FORM NAME="form1">

<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.

 








Дата добавления: 2015-04-19; просмотров: 1110;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.007 сек.