Внедрение сценария в документ
Внедрение сценария в документ это "штатная" возможность 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; просмотров: 1041;