Использование JavaScript для создания интерактивных Web-страниц

Размещено на http://www.allbest.ru/

Лабораторная работа:

Использование JavaScript для создания интерактивных Web-страниц

Обобщенно гипертекстовая информационная система состоит из множества информационных узлов, множества гипертекстовых связей, определенных на этих узлах, и инструмента манипулирования узлами и связями. Технология World Wide Web - это технология ведения гипертекстовых распределенных систем в Internet, и, следовательно, она должна удовлетворять общему определению таких систем. Это значит, что все вышеперечисленные компоненты гипертекстовой системы должны быть и в Web

Internet как гипертекстовую систему можно рассматривать с двух точек зрения. Во-первых, как совокупность отображаемых страниц, связанных гипертекстовыми переходами. Во-вторых, как множество элементарных информационных объектов, составляющих отображаемые страницы (текст, графика, мобильный код и т.п.). В последнем случае множество гипертекстовых переходов страницы - это такой же информационный фрагмент, как и встроенная в текст картинка.

При втором подходе гипертекстовая сеть определяется на множестве элементарных информационных объектов самими HTML-страницами, которые и выступают в роли гипертекстовых связей. Этот подход более продуктивен с точки зрения построения отображаемых страниц "на лету" из готовых компонентов. При генерации страниц в Web возникает дилемма, связанная с архитектурой "клиент-сервер". Страницы можно генерировать как на стороне клиента, так и на стороне сервера. Последнее может быть реализовано, в частности, через механизм подстановок на стороне сервера (Server Site Includes). Компания Netscape распространила в 1995 году механизм управления страницами и на стороне клиента, разработав язык программирования JavaScript.

Таким образом, JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Если быть более точным, то JavaScript - это не только язык программирования на стороне клиента. Liveware, прародитель JavaScript, является средством подстановок на стороне сервера Netscape. Однако наибольшую популярность JavaScript обеспечило именно программирование на стороне клиента.

Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-объектов и свойств среды отображения в процессе просмотра HTML-страницы пользователем. При этом не происходит перезагрузки страницы. На практике это выражается в том, что можно, например, изменить цвет фона страницы или интегрированное в документ изображение, открыть новое окно или выдать окно сообщения.

Для реализации этой идеи была предложена объектная модель документа. Суть модели в том, что каждый HTML-контейнер - это объект, который характеризуется тройкой: {свойства, методы, события}. Объекты с одинаковым набором свойств, методов и событий объединяются в классы однотипных объектов. Классы - это описания возможных объектов. Сами объекты появляются только после загрузки документа браузером или как результат работы программы. Об этом нужно всегда помнить, чтобы не обратиться к объекту, которого нет.

Многие HTML-контейнеры имеют атрибуты. Например, контейнер якоря имеет атрибут href, который превращает его в гипертекстовую ссылку:

<a href="someref.html">someref</a>

Если рассматривать контейнер якоря <a ...>...</a> как объект, то атрибут href будет задавать свойство объекта типа "якорь". Программист может изменить значение атрибута и, следовательно, свойство объекта:

document.links[0].href="someref.html"

Для общности картины свойствами в JavaScript наделены объекты, которые не имеют аналогов в HTML-разметке. Например, среда исполнения, которая называется объектом navigator, или окно браузера, которое является вообще объектом самого высокого уровня JavaScript.

В терминологии JavaScript методы объекта определяют функции изменения его свойств. Например, с объектом документ связаны методы open(), write(), close(). Эти методы позволяют сгенерировать или изменить содержание документа. Рассмотрим следующий пример:

function helloAll() { id=window.open("","example","width=400, height=150"); id.focus(); id.document.open(); id.document.write("<h1>Hello all from JavaScript!</h1>"); id.document.write("<hr><form>"); id.document.write("<input type=button value='Закрыть окно' "); id.document.write("onClick='window.opener. focus();window.close();'>"); id.document.close(); }

В этом примере метод open() открывает поток записи в документ, метод write() осуществляет ее, а close() закрывает поток. Все происходит так же, как и при записи в обычный файл. Если у окна есть поле статуса (обычно в нем отображается процент загрузки документа), то при незакрытом потоке записи в документ в нем будет "метаться" прямоугольник продолжения записи, как это происходит при загрузке документа.

Кроме методов и свойств объекты характеризуются событиями, которые с ними могут происходить. Собственно, суть программирования на JavaScript заключена в написании обработчиков этих событий. Например, с объектом типа button (контейнер INPUT типа button - "кнопка") может происходить событие "Click", т.е. на кнопку можно нажать. Для этого атрибуты контейнера INPUT расширены атрибутом обработки события Click - onClick. В качестве значения этого атрибута указывается программа обработки события, которую должен написать автор HTML-документа на JavaScript.

<input type=button value="Нажми сюда!" onClick="window.alert('Привет!');">

Обработчики событий указываются в тех контейнерах, с которыми эти события связаны. Например, контейнер BODY определяет свойства всего документа, поэтому обработчик события завершения загрузки всего документа указывается в этом контейнере как значение атрибута onLoad.

Главный вопрос любого начинающего программиста: "Как оформить программу и выполнить ее?". Попробую на него ответить как можно проще, но при этом не теряя полноты способов применения JavaScript-кода. Во-первых, JavaScript-код исполняет браузер. В него встроен интерпретатор JavaScript. Следовательно, выполнение программы зависит от того, когда и как этот интерпретатор получает управление. Это, в свою очередь, зависит от функционального применения кода. В общем случае можно выделить четыре способа функционального применения JavaScript:

·гипертекстовая ссылка (схема URL);

·обработчик события (handler);

·подстановка (entity);

·вставка (контейнер SCRIPT).

В большинстве учебников по 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://koegde.ru/dir/address.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('Внимание!!!');"> <font color=red>Внимание!!!</font></a>

или при нажатии на кнопку типа Submit в форме можно заполнить текстовое поле этой же формы: управление сценарий внешний программа

<form name=f method=post action="javascript:window.document. f.i.value='Нажали на кнопку Click';void(0);"> <table border=0> <tr> <td><input name=i> <td><input type=submit value=Click> <td><input type=reset value=Reset> </table> </form>

В URL можно помещать сложные программы и вызовы функций. Следует только помнить, что схема JavaScript работает не во всех браузерах, а только в версиях Navigator'а и Explorer'а, начиная с четвертой.

Таким образом, при программировании гипертекстового перехода интерпретатор получает управление после того, как пользователь "кликнул" по гипертекстовой ссылке.

Обработчики событий

Код обработчика события указывается в атрибутах контейнеров, с которыми связано то или иное событие. Например, при нажатии на кнопку происходит событие "Click":

<form> <input type=button value="Кнопка" onClick="window.alert('Ууупс!!!');"> </form>

В данном примере атрибут onClick определяет программу обработки события Click. Аналогично можно обработать изменение данных в поле меню:

<form name=myform> <select name=sel onchange="javascript:window.alert (document.myform.sel.options[document. myform.sel.selectedIndex].text)"> <option>Привет <option>Пока </form>

В этом примере при выборе одного из предлагаемых вариантов выбранное значение отображается на экране в окне предупреждения:

Обработчики событий можно указать внутри многих HTML-контейнеров (BODY, IMG, A, FORM и т.п.). При этом особое внимание следует обратить на события onLoad и onUnload контейнера BODY, т.к. они позволяют определить действия после загрузки страницы или при переходе на другую страницу. Таким образом, интерпретатор получает управление после того, как происходит событие, вызванное действиями пользователя, и для которого определен обработчик события.

Подстановки

Подстановка (entity) довольно редко встречается на страницах Всемирной паутины. Тем не менее, это достаточно мощный инструмент генерации HTML-страницы на стороне браузера. Подстановки используются в качестве значений атрибутов HTML-контейнеров. Например, как значение умолчания поля формы, определяющего домашнюю страницу пользователя, будет указан URL текущей страницы:

<script language="JavaScript"> function l() { str = window.location.href; return(str.length); }</script><form> <input value="&{window.location};" size="&{l();};"> </form>

Подстановки не поддерживаются в Internet Explorer, поэтому пользоваться ими следует аккуратно. Прежде чем выдать браузеру страницу с подстановками, следует проверить тип этого браузера. В случае подстановки интерпретатор получает управление в момент разбора браузером (компонентом parser) HTML-документа. Как только parser натыкается на конструкцию &{..} у атрибута контейнера, он передает управление интерпретатору JavaScript, который, в свою очередь, после исполнения кода это управление parser'у возвращает. Таким образом, эта операции аналогична подкачке графики на HTML-страницу.

Вставка

Контейнер SCRIPT - это развитие подстановок до возможности генерации текста документа JavaScript-кодом. В этом смысле применение SCRIPT аналогично Server Site Includes, т.е. генерации страниц документов на стороне сервера. При разборе документа HTML-parser передает управление интерпретатору после того, как встретит тэг начала контейнера SCRIPT. Интерпретатор получает на исполнение весь фрагмент кода внутри контейнера SCRIPT и возвращает управление HTML-parser'у для обработки текста страницы после тэга конца контейнера SCRIPT.

Контейнер SCRIPT выполняет две основные функции:

·размещение кода внутри HTML-документа;

·условная генерация HTML-разметки на стороне браузера.

Первая функция аналогична декларированию переменных и функций, которые потом можно будет использовать в качестве программ переходов, обработчиков событий и подстановок. Вторая - это подстановка результатов исполнения JavaScript-кода в момент загрузки или перезагрузки документа. Собственно, особенного разнообразия в размещении кода нет. Его можно разместить либо в заголовке документа, внутри контейнера HEAD, либо - внутри BODY. Сейчас сосредоточимся на заголовке документа.

Код в заголовке размещается внутри контейнера SCRIPT:

<html><head><script language="JavaScript"> <!-- Это комментарий ...JavaScript-код...//--></script><body>... Тело документа ... </body> </html>

HTML-комментарии здесь вставлены для защиты от интерпретации данного фрагмента страницы HTML-parser'ом в браузерах, не поддерживающих тэг <script>. В свою очередь, конец HTML-комментария защищен от интерпретации JavaScript-интерпретатором(// в начале строки). Кроме этого, в качестве значения атрибута language у тэга начала контейнера указано значение "JavaScript" (альтернативой JavaScript является VBScript, о котором мы поговорим чуть позже).

Очевидно, что размещать в заголовке документа генерацию текста страницы бессмысленно - он не будет отображен браузером. Поэтому в заголовок помещают декларации общих переменных и функций, которые будут затем использоваться в теле документа (следует также отметить, что сами функции можно описать в отдельном файле, а в заголовке (или теле) документа лишь указать имя соответствующего файла). При этом браузер 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> <p class=art>В этом примере мы декларировали функцию time_scroll() в заголовке документа, а потом вызвали ее как обработчик события Load в тэге начала контейнера BODY (onLoad=time_scroll()). В качестве примера декларации переменной рассмотрим изменения статуса окна-потомка из окна-предка:</p> <input type=button value="Изменить поле статуса в окне примера" onClick="id.defaultStatus='Привет'; id.focus();">

При открытии окна-потомка мы в переменную id поместили указатель на объект окно id=window.open(). Теперь мы ее можем использовать как идентификатор объекта класса window. Использование id.focus() в нашем случае обязательно. При нажатии на кнопку "Изменить поле статуса в окне примера" происходит передача фокуса в родительское окно. Оно может иметь размер всего экрана. При этом изменения будут происходить в окне-потомке, которое будет скрыто родительским окном. Для того чтобы увидеть изменения, надо передать фокус. Переменная id должна быть определена за пределами каких-либо функций. В этом случае она становится свойством окна. Если мы ее разместим внутри функции открытия дочернего окна, то потом не сможем к ней обратиться из обработчика события Click.

Всегда приятно, когда с сервера мы получаем страницу, подстроенную под возможности нашего браузера или, более того, под пользователя. Существует только две возможности генерации таких страниц: на стороне сервера или непосредственно у клиента. 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>

В том, что время меняется, можно убедиться, перезагрузив страницу.

Размещено на Allbest.ru