Src
Размещение кода на HTML-странице.
Главный вопрос любого начинающего программиста: "Как оформить программу и выполнить ее?", или другими словами: "Куда кобылу запрягать?". Попробуем на него ответить как можно проще, но при этом не теряя полноты способов применения JavaScript-кода.
Во-первых, исполняет JavaScript-код браузер. В него встроен интерпретатор JavaScript. Следовательно, выполнение программы зависит от того, когда и как этот интерпретатор получает управление. Это, в свою очередь зависит от функционального применения кода .
В общем случае можно выделить четыре способа функционального применения JavaScript:
В учебниках по JavaScript обычно начинают описание применения JavaScript с контейнера SCRIPT. Но с точки зрения самого программирования это не совсем правильно, т.к. такой порядок не дает ответа на ключевой вопрос: Как JavaScript-код получает управление? Т.е. каким образом вызывается и исполняется программа, написанная на JavaScript и размещенная в HTML-документе.
В зависимости от профессии автора HTML-страницы и уровня его знакомства с основами программирования возможны несколько вариантов начала освоения JavaScript. Если Вы программист классического толка (С, Fortran, Pascal и т.п.), то проще всего начинать с программирования внутри тела документа, если Вы привыкли программировать под Windows, то в этом случае начинайте с программирования обработчиков событий, если вы имеете только опыт HTML-разметки или давно не писали программ, то тогда лучше начать с программирования гипертекстовых переходов.
URL-схема JavaScript
Схема URL(Uniform Resource Locator) - это один из ключевых элементов Web-технологии. Каждый информационный ресурс в Web имеет свой уникальный URL. URL указывают в атрибуте href контейнера A, в атрибуте src контейнера IMG, в атрибуте action контейнера FORM и т.п.. Все URL подразделяются на схемы доступа, которые зависят от протокола доступа к ресурсу, например, для доступа к FTP-архиву применяется схема ftp, для доступа к Gopher-архиву - схема gopher, для отправки электронной почты - схема smtp. Тип схемы определяется по первому компоненту URL:
http://kuku.ru/directory/page.html
В данном случае URL начинается с http - это и есть определение схемы доступа(схема http).
Основной задачей языка программирования гипертекстовой системы является программирование гипертекстовых переходов. Это означает, что при выборе той или иной гипертекстовой ссылки вызывается программа реализации гипертекстового перехода. В Web-технологии стандартной программой является программа загрузки страницы. JavaScript позволяет заместить стандартную программу на программу пользователя. Для того чтобы отличить стандартный переход по протоколу HTTP от программируемого на JavaScript перехода, разработчики языка ввели в употребление новую схему URL - javascript:
<a href="javascript:JavaScript_код">...</a>
<img src="javascript:JavaScript_код>
В данном случае текст "JavaScript_код" обозначает программы-обработчики на JavaScript, которые вызываются при выборе гипертекстовой ссылки в первом случае и при загрузке картинки во втором.
Например, при нажатии на гипертекстовую ссылку Внимание!!! можно получить окно предупреждения:
<a href="javascript:alert('Attention!!!');"><font color=red>Внимание!!!</font></a>
или при нажатии на кнопку типа Submit в форме можно заполнить текстовое поле этой же формы:
<form name=f method=post action="javascript:window.document.f.i.value='Нажали кнопку Click';void(0);">
<table>
<tr>
<td><input name=i>
<td><input type=submit value=Click>
<td><input type=reset value=Reset>
</table>
</form>
Таким образом, при программировании гипертекстового перехода интерпретатор получает управление после того, как пользователь "кликнул" по гипертекстовой ссылке.
начало страницы
Обработчики событий
Программы обработчики событий(handler) указываются в атрибутах контейнеров, с которыми эти события связаны. Например, при нажатии на кнопку происходит событие Click:
<form><input type=button value=Кнопка onClick="window.alert('Yahoo!!!');"></form>
В данном примере атрибут onClick определяет программу обработки события Click. Аналогично можно обработать изменение данных в поле меню:
<form>
<select name=s1 onChange="
window.alert(
document.s.s1.options[document.s.s1.selectedIndex].text
);">
<option>Привет
<option>Пошел вон
</form>
Привет
Пошел вон
В этом примере при выборе альтернативы она(альтернатива) отображается в окне предупреждения. При этом если не происходит смены альтернативы, то окно не появляется, если же был сделан новый выбор, то окно появляется.
Обработчики событий можно указать внутри многих HTML-контейнеров(BODY, IMG, A, FORM и т.п.). При этом особой популярностью пользуются атрибуты onLoad и onUnload контейнера BODY, т.к. позволяют определить действия после загрузки страницы или при переходе на другую страницу.
Таким образом, интерпретатор получает управление после того, как происходит событие, вызванное действиями пользователя, и для которого определен обработчик события.
начало страницы
Подстановки
Подстановка (entity) довольно редко встречается на страницах Web. Тем не менее, это достаточно мощный инструмент генерации HTML-страницы на стороне браузера. Подстановки используются в качестве значений атрибутов HTML-контейнеров. Например, как значение умолчания поля формы, определяющего домашнюю страницу пользователя, будет указан URL текущей страницы:
<script>
function l()
{
str = window.location.href;
return(str.length);
}
</script>
<form><input value="&{window.location};" size="&{l();};"></form>
Подстановки не поддерживаются в Internet Explorer 4.0, поэтому пользоваться ими следует аккуратно. Прежде чем выдать браузеру страницу с подстановками следует проверить тип этого браузера.
В случае подстановки интерпретатор получает управление в момент разбора браузером(компонента parser) HTML-документа. Как только parser натыкается на конструкцию &{..} у атрибута контейнера, он передает управление интерпретатору JavaScript, который, в свою очередь, после исполнения кода это управление parser-у возвращает. Таким образом, эта операции аналогична подкачке графики на HTML-страницу.
начало страницы
Вставка(Контейнер SCRIPT - принудительный вызов интерпретатора)
Контейнер SCRIPT - это развитие подстановок до возможности генерации текста документа JavaScript-кодом. В этом смысле применение SCRIPT аналогично Server Site Includes, т.е. генерации страниц документов на стороне сервера. Однако здесь мы забежали чуть-чуть вперед. При разборе документа HTML-parser передает управление интерпретатору после того, как встретит таг начала контейнера SCRIPT. Интерпретатор получает на исполнение весь фрагмент кода внутри контейнера SCRIPT и возвращает управление HTML-parser-у для обработки текста страницы после тага конца контейнера SCRIPT.
У контейнера SCRIPT две основные функции:
Первая функция аналогична декларированию переменных и функций, которые потом можно будет использовать в качестве программ переходов, обработчиков событий и подстановок. Вторая - это подстановка результатов исполнения JavaScript-кода в момент загрузки или перезагрузки документа.
Размещение кода внутри HTML-документа
Собственно особенного разнообразия в размещении кода нет. Его можно разместить либо в заголовке документа, внутри контейнера HEAD, либо - внутри BODY. Последний способ и его особенности будут рассмотрены в "Условная генерация HTML-разметки на стороне браузера". Сосредоточимся поэтому на заголовке документа.
Код в заголовке размещается внутри контейнера SCRIPT:
<html>
<head>
<script language=JavaScript>
<!-- Это комментарий
...JavaScript-код...
// -->
</script>
<body>
... Тело документа ...
</body>
</html>
HTML- комментарии здесь вставлены для защиты от интерпретации данного фрагмента страницы HTML-parser-ом в старых браузерах(у высокого начальства еще встречаются :-)). В свою очередь, конец HTML-комментария защищен от интерпретации JavaScript-интерпретатором(// в начале строки). Кроме этого, в качестве значения атрибута language у тага начала контейнера указано значение "JavaScript". VBScript, который является альтернативой JavaScript - это скорее экзотика, чем общепринятая практика, поэтому этот атрибут можно опустить - значение "JavaScript" принимается по умолчанию.
Очевидно, что размещать в заголовке документа генерацию текста страницы бессмысленно - он не будет отображен браузером. Поэтому в заголовок помещают декларации общих переменных и функций, которые будут затем использоваться в теле документа. При этом браузер Netscape более требовательный и более строгий, чем Explorer. Если не разместить описания функции в заголовке, то при ее вызове в теле документа можно получить ошибку о том, что данная функция не определена.
Приведем пример размещения и использования функции:
<html>
<head>
<script>
function time_scroll()
{
d = new Date();
window.status = d.getHousrs()+":"+d.getMinutes()+":"+d.getSconds();
setTimeout('time_scroll();';500);
}
</script>
</head>
<body onLoad=time_scroll()>
<center>
<h1>Часы в строке статуса</h1>
<form>
<input type=button value="Закрыть окно" onClick=window.close()>
</form>
</center>
</body>
</html>
В этом примере мы декларировали функцию time_scroll() в заголовке документа, а потом вызвали ее как обработчик события Load в таге начала контейнера BODY(onLoad=time_scroll()).
В качестве примера декларации переменной рассмотрим изменения статуса окна-потомка из окна-предка:
<input type=button value="Изменить поле статуса в окне примера" onClick="id.defaultStatus='Привет';id.focus();">
При открытии окна-потомка мы в переменную id поместили указатель на объект окно id=window.open(). Теперь мы ее можем использовать как идентификатор объекта класса window. Использование id.focus() в нашем случае обязательно. При нажатии на кнопку "Изменить поле статуса в окне примера" происходит передача фокуса в родительское окно. Оно может иметь размер всего экрана. При этом изменения будут происходить в окне-потомке, которое будет скрыто родительским окном. Для того чтобы изменения увидеть, надо передать фокус. Переменная id должна быть определена за пределами каких-либо функций. В этом случае она становится свойством окна. Если мы ее разместим внутри функции открытия дочернего окна, то потом не сможем к ней обратиться из обработчика события Click.
Условная генерация HTML-разметки на стороне браузера
Всегда приятно, когда с сервера мы получаем страницу, подстроенную под возможности нашего браузера или, более того, под пользователя. Существует только две возможности генерации таких страниц: на стороне сервера или непосредственно у клиента. JavaScript-код исполняется на стороне клиента(вообще говоря, это совсем не так. Серверы компании Netscape способны исполнять JavaScript-код и на стороне сервера, только в этом случае он носит название LiveWire-код. Не путать с LiveConnect), поэтому рассмотрим только генерацию на стороне клиента.
Для генерации HTML-разметки контейнер SCRIPT размещают в теле документа. Простой пример - встраивание в страницу локального времени:
<body>
...
<script>
d = new Date();
document.write("<br>");
document.write("Момент загрузки страницы:"+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());
document.write("<br>");
</script>
...
<body>
d = new Date();
document.write("
");
document.write("Момент загрузки страницы: "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());
document.write("
