Статьи про HTML-Написание скриптов

Доступ к свойствам элементов и их динамическое управление на веб-странице осуществляется посредством программы, которая связывается с документом HTML. Подобные программы принято называть скриптами или, как можно встретить в отдельных источниках, сценариями. Скрипты описываются с помощью тега SCRIPT, который содержит ссылку на программу или ее текст на определенном языке. Используется два основных языка программирования - JavaScript и VBScript.

Создание скриптов

Скрипты могут создаваться несколькими способами. Наиболее распространенный заключается в размещении программы внутри контейнера SCRIPT. Данный тег может ссылаться на внешний файл, либо содержать программу внутри себя.

Текст программы

</script>

Параметр language указывает язык написания скрипта, который может принимать значения VBScript или JavaScript. Для последнего часто еще присоединяют номер версии к названию языка, например JavaScript1.3 (Пример 1).

Пример 1. Определение языков поддерживаемых браузером

<body>

</body>
</html>

Результат выполнения программы представлен ниже

Рекомендуется всегда указывать параметр language, поскольку если браузер не распознает язык программирования, то скрипт игнорируется и не выполняется. Вместе с тем, в HTML 4.0 данный параметр советуют не использовать. Вместо него следует применять параметр type, который указывает тип MIME для определенного языка: для JavaScript - "text/JavaScript", а для VBScript - "text/VBScript". Но поскольку некоторые браузеры не понимают параметр type, лучше задавать сразу два атрибута одновременно - language и type. Если браузер распознает значение параметра type, то значение language отменяется.

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

При ссылке на внешний файл скрипта контейнер SCRIPT оставляем пустым. Сам файл с программой может располагаться в любом месте сайта, для его вызова действуют те же правила, что и для ссылок.

Местоположение скриптов

Скрипты могут располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа TITLE. При создании объектов программными средствами скрипты размещают прямо в документе и выводят результат с помощью метода document.write или document.writeln (Пример 2).

Пример 2. Создание таблицы с помощью скрипта

<table width=400 border=1>
<script language="JavaScript">
for (i=1; i<6; i++) {
document.writeln("<tr>");
for (j=1; j<6; j++) document.write("<td>" + i + j + "</td>");
document.writeln("</tr>");
}
</script>
</table>

</body>
</html>

В примере скрипт создает таблицу размером 5 на 5 ячеек и заполняет ее числами.

Комментарии

Для скрытия кода программы от браузеров, которые не понимают скриптов, перед началом и после окончания кода добавляют комментарий HTML.

Закрывающему комментарию HTML должен предшествовать комментарий языка JavaScript (//) или VBSscript (').

В настоящее время все современные браузеры понимают скрипты, поэтому комментарий необязателен и его можно опустить.

Вызов и запуск скриптов

Основные способы выполнения скриптов - через вызов функции и при достижении определенного события. Скрипт можно, также, запускать автоматически после загрузки страницы, как показано в примере 3.

Пример 3. Автоматический запуск скрипта

Ту же самую программу можно написать через вызов функции.

Пример 4. Автоматический запуск скрипта

<html>
<head>
<script language="JavaScript">
function foo() {
alert("Hello, world!")
}

foo();
</script>
</head>

Функция foo запускается при загрузке страницы, поскольку ее вызов указан явно.

Для связывания скриптов с событиями существует два способа. Первый использует зарезервированные события мыши или клавиатуры, например, нажатие на левую кнопку мыши отслеживается событием onClick.

Пример 5. Использования события мыши

Если нажать на кнопку появится окно с надписью.

Другой способ реагирования на определенные события, связан с параметрами тега SCRIPT - for, который задает имя элемента для которого выполнять скрипт и event определяющий событие.

В примере вызов сообщения появляется при завершении загрузки документа. Некоторые браузеры не поддерживают параметры for и event и запускают скрипт немедленно. В этом случае лучше использовать события, как показано в примере 5.