Автор работы: Пользователь скрыл имя, 08 Апреля 2011 в 13:06, реферат
Целью работы является разработка HTML приложений с применением языка JavaScript.
Основной
задачей языка программирования
гипертекстовой системы является программирование
гипертекстовых переходов. Это означает,
что при выборе той или иной
гипертекстовой ссылки вызывается программа
реализации гипертекстового перехода.
В Web-технологии стандартной программой
является программа загрузки страницы.
JavaScript позволяет поменять стандартную
программу на программу пользователя.
Для того чтобы отличить стандартный переход
по протоколу HTTP от перехода, программируемого
на JavaScript, разработчики языка ввели новую
схему URL - JavaScript:
<A
HREF="JavaScript:JavaScript_
<IMG
SRC="JavaScript:JavaScript_
В данном случае текст "JavaScript_код" обозначает программы-обработчики на JavaScript, которые вызываются при выборе гипертекстовой ссылки в первом случае и при загрузке картинки - во втором. Например, при нажатии на гипертекстовую ссылку Внимание!!! можно получить окно предупреждения Рис 1.1:
<A
HREF="JavaScript:alert('
А
при нажатии на кнопку типа submit
в форме можно заполнить текстовое поле
этой же формы:
<FORM NAME=f METHOD=post
ACTION="JavaScript:window.
'Нажали кнопку Click';void(0);">
<TABLE BORDER=0>
<TR>
<TD><INPUT NAME=i></TD>
<TD><INPUT TYPE=submit VALUE=Click></TD>
<TD><INPUT TYPE=reset VALUE=Reset></TD>
</TABLE>
</FORM>
В
URL можно размещать сложные
Таким образом, при программировании гипертекстового перехода интерпретатор получает управление после того, как пользователь "кликнул" по гипертекстовой ссылке.
Такие программы, как обработчики событий (handler), указываются в атрибутах контейнеров, с которыми эти события связаны. Например, при нажатии на кнопку происходит событие click:
<FORM><INPUT TYPE=button VALUE="Кнопка" onсlick=
Подстановка
(entity) встречается на Web-страницах
довольно редко. Тем не менее это достаточно
мощный инструмент генерации HTML-страницы
на стороне браузера. Подстановки используются
в качестве значений атрибутов HTML-контейнеров.
Например, как значение по умолчанию поля
формы, определяющего домашнюю страницу
пользователя, будет указан URL текущей
страницы:
<SCRIPT>
function l()
{
str = window.location.href;
return(str.length);
}
</SCRIPT>
<FORM><INPUT
VALUE="&{window.location.href}
</FORM>
<SCRIPT>
<!--
Это комментарий ...JavaScript-
</SCRIPT>
<BODY>
... Тело документа ...
</BODY>
</HTML>
HTML-комментарии здесь вставлены для защиты от интерпретации данного фрагмента страницы HTML-парсером в старых браузерах (у высокого начальства еще встречаются). В свою очередь, конец HTML-комментария защищен от интерпретации JavaScript-интерпретатором (// в начале строки). Кроме того, в качестве значения атрибута LANGUAGE у тега начала контейнера указано значение "JavaScript". VBScript, который является альтернативой JavaScript - это скорее экзотика, чем общепринятая практика, поэтому данный атрибут можно опустить - значение "JavaScript" принимается по умолчанию.
Очевидно,
что размещать в заголовке
документа генерацию текста страницы
бессмысленно - он не будет отображен
браузером. Поэтому в заголовок
помещают декларации общих переменных
и функций, которые будут затем использоваться
в теле документа. При этом браузер Netscape
Navigator более требовательный, чем Internet Explorer.
Если не разместить описание функции в
заголовке, то при ее вызове в теле документа
можно получить сообщение о том, что данная
функция не определена. Приведем пример
размещения и использования функции:
<HTML>
<HEAD>
<SCRIPT>
function time_scroll()
{
var d = new Date();
window.status = d.getHours() +":"+d.getMinutes() +":"+
setTimeout('time_scroll();',
}
</SCRIPT>
</HEAD>
<BODY onLoad=time_scroll()>
<CENTER>
<H1>Часы в строке статуса</H1>
В Internet Explorer 4.0 подстановки не поддерживаются, поэтому пользоваться ими следует аккуратно. Прежде чем выдать браузеру страницу с подстановками, нужно проверить тип этого браузера.
В случае подстановки интерпретатор получает управление в момент разбора браузером (компонент парсер) HTML-документа. Как только парсер встречает конструкцию &{..} у атрибута контейнера, он передает управление интерпретатору JavaScript, который, в свою очередь, после исполнения кода это управление возвращает парсеру. Таким образом данная операция аналогична подкачке графики на HTML-страницу.
Контейнер SCRIPT - это развитие подстановок до возможности генерации текста документа JavaScript-кодом. В этом смысле применение SCRIPT аналогично Server Side Includes, т.е. генерации страниц документов на стороне сервера. Однако здесь мы забежали чуть вперед. При разборе документа HTML-парсер передает управление интерпретатору после того, как встретит тег начала контейнера SCRIPT. Интерпретатор получает на исполнение весь фрагмент кода внутри контейнера SCRIPT и возвращает управление HTML-парсеру для обработки текста страницы после тега конца контейнера SCRIPT.
Контейнер SCRIPT выполняет две основные функции:
Первая функция аналогична декларированию переменных и функций, которые потом можно будет использовать в качестве программ переходов, обработчиков событий и подстановок. Вторая - это подстановка результатов исполнения JavaScript-кода в момент загрузки или перезагрузки документа.
Собственно, особенного разнообразия здесь нет. Код можно разместить либо в заголовке документа, внутри контейнера HEAD, либо внутри BODY. Последний способ и его особенности будут рассмотрены в разделе "Условная генерация HTML-разметки на стороне браузера". Поэтому обратимся к заголовку документа.
Код
в заголовке размещается внутри
контейнера SCRIPT:
<HTML>
<HEAD>
<SCRIPT>
function time_scroll()
{
d = new Date();
window.status = d.getHours() +":"+d.getMinutes() +":"
setTimeout('time_scroll();',
}
</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()) .
В
качестве примера декларации переменной
рассмотрим изменение статуса окна-
function sel()
{
id = window.open("","example","
id.focus();
id.document.open();
id.document.write("<HTML><
id.document.write("<BODY>");
id.document.write("<CENTER>");
id.document.write("<H1>Change text into child window.</H1>");
id.document.write("<FORM NAME=f>");
id.document.write("<INPUT TYPE=text NAME=t SIZE=20
MAXLENGTH=20 VALUE='This is the test'>");
id.document.write("<INPUT TYPE=button VALUE='Close the window'
id.document.write("</CENTER>")
id.document.write("</BODY></
id.document.close();
}
<INPUT TYPE=button VALUE="Изменить поле статуса в окне примера"
onClick="id.defaultStatus='
Открывая окно-потомок, мы поместили в переменную id указатель на объект окно id=window.open(). Теперь мы можем использовать ее как идентификатор объекта класса Window. Использование id.focus() в нашем случае обязательно. При нажатии на кнопку "Изменить поле статуса в окне примера" происходит передача фокуса в родительское окно. Оно может иметь размер экрана. При этом изменения будут происходить в окне-потомке, которое будет скрыто родительским окном. Для того чтобы увидеть изменения, надо передать фокус. Переменная id должна быть определена за пределами каких-либо функций, что и сделано. В этом случае онстановится свойством окна. Если мы поместим ее внутри функции открытия дочернего окна, то не сможем к ней обратиться из обработчика события click.
Всегда приятно получать с сервера страницу, подстроенную под возможности нашего браузера или, более того, под пользователя. Существует только две возможности генерации таких страниц: на стороне сервера или непосредственно у клиента. JavaScript-код исполняется на стороне клиента (на самом деле, серверы компании Netscape способны исполнять JavaScript-код и на стороне сервера, только в этом случае он носит название LiveWire-код; не путать с LiveConnect), поэтому рассмотрим только генерацию на стороне клиента.
Для
генерации HTML-разметки контейнер SCRIPT размещают
в теле документа. Простой пример - встраивание
в страницу локального времени: