Как работают фреймы

На первый взгляд, фреймы - это нечто сложное, но их легче понять, если провести аналогию с ячейками таблицы. Расположение фреймов на экране задается почти так же, как ячеек в таблице: таги и атрибуты работают так же, как их табличные ро дственники. Однако, хотя аналогия между единичным фреймом на странице и ячейкой таблицы полезна, нужно помнить, что есть и отличия. Содержимое ячейки задано в коде HTML-страницы с таблицей. Текст или графика, составляющие содержимое таблицы, фактически вв одятся на той же самой странице HTML, что и таг или атрибут, описывающие таблицу. Напротив, экран с фреймами описывается в НТМL-странице, называемой (frameset ). Содержимое же фрейма - это отдельная HTML-страница, которая может находиться где угодно - в д ругом каталоге, на локальном сервере или на удаленном узле где-то в сети. Фреймовая структура определяет только способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются URL, описывающие местонахождение их данных. Как правило, на странице с фреймовой структурой нет содержимого фреймов. Такая страница обычно невелика - она описывает только кадровую структуру экрана. Когда документ загружается в фрейм, вы можете щелкать мышкой на ссылке в этом документе, что вызовет появление связанных документов в других кадрах, заданных в фреймовой структуре.

Как сделать активное изображение

Процесс создания активного изображения состоит из двух этапов. Сначала вы должны определить области на картинке, которые вы хотите сделать активными, а потом соотнести их со ссылками на другие URL. Активные области задаются перечислением их координат (в пикселях). Все это можно сделать вручную, определив координаты углов активных областей, но гораздо проще воспользоваться какой-нибудь программой, например МарЕdit.

Определить карту легко. Нужно открыть в МарEdit файл, содержащий изо6ражение, на котором вы хотите создать активные области, после чего щелкнуть и потянуть мышкой, обозначив границу области. Программа автоматически генерирует файл, описывающий границы активной области. Затем этой области нужно приписать URL. В любых местах изображения можно нарисовать активные области в форме прямоугольника, многоугольника или круга и определить для каждой из них URL. Активные области могут даже пересекаться, но в этом случае возникают проблемы. Важно оставлять между областями немного места, чтобы читатель был уверен, что он активирует правильную ссылку. Большинство броузеров при попадании на пересечение нескольких активных областей считают активной ту из них, которая первой встречается в карте.

Границы активных областей задаются координатами углов прямоугольника и многоугольника или центра и радиуса круга. Эти параметры записываются в карту (МАР-файл)

Закончив создание активного изображения, вы можете сохранить полученный файл в формате NCSA или СЕRN, если оно будет работать на сервере, или в формате СSIМ, если оно функционирует на клиентской машине. Всю остальную работу выполняет программа МарEdit. Она создает карту на сервере или встраивает карту на стороне клиента в указанный вами файл HTML. Если вы решили делать активное изображение у клиента, Мар Edit поставляет данные только для тагов <МАР>. Вам придется самому задать таг изображения с атрибутом USЕМАР и поместить его после тага </МАР>. Не забудьте перед именем карты в атрибуте USЕМАР записать символ # следующим образом: <IMG SRC="mymap.gif " USЕМАР="#sitemap">

Как сделать так, чтобы ваша форма хорошо смотрелась

Один из способов свести все трудности к минимуму состоит в том, чтобы разместить области ввода и выпадающие меню в левой части страницы, а весь сопроводительный текст - справа. Поскольку ширину областей ввода можно задать с помощыо атри бута SIZЕ=, вы по крайней мере выровняете строки слева, а текст справа будет невыровненным - как в большинстве документов. Такая форма выглядит несколько аккуратнее. Не забудьте оставить промежуток между текстом и областью ввода формы. Другой несколько бо лее сложный способ - разместить элементы формы в ячейки таблицы. Это позволяет разместить сопроводительный текст слева, а области ввода справа. Это показано в примере.

Как задать размеры графики

Если у вас есть какая-нибудь программа для работы с графикой, то определить размер изображения нетрудно. Для начала откройте файл в графическом редакторе и определите размер картинки в пикселях. В таге изображения задайте ширину и высоту вашей картинки таким образом: <IMG SRC="picture.gif" WIDTH=413 НЕIGНТ=356>

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

Как заставить формы работать

Возможно, это именно тот раздел, которого вы ждете - как сделать так, чтобы формы отсылали на сервер введенные данные. На самом деле заставить форму пересылать данные довольно просто. Главная проблема - понять, куда их пересылать. Форма льно вы просто пишете в таге <FORM> атрибут АСТION= и задаете ссылку на URL программы, которая может обработать входные данные и сделать с ними что-нибудь полезное.

Контейнер SPAN применяется для...

Контейнер SPAN применяется для переопределения стиля отображения текущего фрагмента текста и в некотором смысле аналогичен контейнеру FONT. Часто SPAN применяют для достижения типографских эффектов, таких например, как выделение заглавной буквы абзаца:

Пример 1.31

<HTML>  <HEAD> <style TYPE="text/css"> FS.all { color:red; font-size: 24pt; font-family: times;} H1 {color:navy; text-transform: uppercase;font-size: 18pt; font-weight: bold; font-family: times;} H2 {color:navy; font-size: 14pt; font-weight: bold; font-style: italic; font-family: times;} H3 {color:navy; font-size: 10pt; font-weight: bold; font-family: times;} P {color:navy; font-size: 12pt; font-family: times; text-align: justify} P.HELP {color:darkgreen; font-size: 10pt; font-family: times; text-align: justify;} P.LEFT {color:navy; font-size: 12pt; font-family: times; text-align: right;} </style> </HEAD> <BODY bgcolor=lightyellow> <center> <h3>Центр информационных технологий</h3> <h1>Информационные Ресурсы Internet</h1> <h3>(Учебное пособие для компьютерных непрофессионалов)</h3> <h3>Храмцов П.Б.</h2> <h3>Москва, 1997</h2> <hr> </center> <p><span class=FS>C</span>обществу глобальных компьютерных сетей Internet в 1995 году исполнилось 25 лет. На настоящий момент - это самый большое информационный ресурс мира. Одновре-менно Internet - это самая популярная и массовая компьютерная сеть планеты. По оценкам международного центра координации сетевой деятельности в рамках Internet(Internic-Internet Information Center) на 1997 год в сети насчитывалось несколько десятков миллионов постоянно зарегистрированных компьютеров-серверов, которые откликаются на запросы пользователей 365 дней в году и 24 часа в сутки. Этот огромный информационный ресурс полностью децентрализован и не подчиняется ни одному правительству или крупной финансовой компании мира. </BODY> </HTML>

В данном примере, контейнер SPAN применен сразу после тага начала параграфа <p>, что позволяет выделить первую букву в отображаемом абзаце:

Контейнеры тела документа НТМL - BODY

Таги тела документа

Таги тела документа предназначены для управления отображением информации в программе интерфейса пользователя. Они описывают гипертекстовую структуру базы данных при помощи встроенных в текст контекстных гипертекстовых ссылок. Тело документа состоит из: иерархических контейнеров и заставок; заголовков (от Н1 до Н6); блоков (параграфы, списки, формы, таблицы, картинки и т.п.); горизонтальных отчеркиваний и адресов; текста, разбитого на области действия стилей (подчеркивание, выделение, курсив), математических описаний, графики и гипертекстовых ссылок.

ВОDY

Описание тагов тела документа следует начать с тага ВОDY. В отличии от тага НEАD, таг ВОDY имеет атрибуты:

ID - идентификатор тага. Используется для именования тагов, а также в качестве точки перехода по гипертекстовой ссылке. Данный атрибут имеется практически во всех тагах тела документа. С точки зрения практического использования идентификатора ВОDY в качестве точки перехода по гипертекстовым ссылкам, использование этого атрибута сомнительно, т.к. отображаемая часть документа собственно и начинается с этого тага.

LANG - определяет язык документа в виде двухсимвольного кода ISO-639, за которым следует через точку необязательный код страны в формате ISO-3166. По замыслу разработчиков стандарта языка данный атрибут должен распознаваться программами интерпретации и управлять отображением многоязычных текстов. Однако даже Аrеnа, специально предназначенная для иллюстрации НТМL 3.0, не реализует этой возможности.

СLASS - иерархически организованное имя типа "ADDITION.FIRST". Предназначено для связывания тага текста с определенным стилем отображения. Реально пока не используется.

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

ВАСКGROUND - определяет фон, на котором отображается текст документа. В примере НТМL-документа в качестве фона был использован небольшой графический образ "bgr.gif. <ВОDY ВАСКGROUND="bgr.gif"> Как видно из этого примера, в качестве значения данного атрибута используется адрес в сокращенной форме URL. В данном случае это адрес локального файла.

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

Атрибут	Значение
ВАСКCOLOR=#FFFFFF	Цвет фона
ТЕХТ=#0000FF	Цвет текста
VLINK=#FF0000	Цвет пройденных гипертекстовых ссылок
LINK=#00FF00	Цвет гипертекстовой ссылки

В данной таблице строка #ХХХХХХ определяет цвет в терминах RGB в шестнадцатеричной нотации. Так, цвет текста определен как синий, фона - белый, пройденные ссылки красные, а новые ссылки зеленые. Если в качестве атрибутов тага ВОDY указать: <ВОDY ВАСКCOLOR=#FFFFFF ТЕХТ=#0000FF VLINK=#FF0000 LINK=#00FF00> то цвет фона будет желтым, текст будет синим, ссылки - зеленые, а пройденные ссылки станут красные. Однако пользоваться этими атрибутами следует крайне осторожно, т.к. у пользователя может оказаться другой интерфейс, который эти параметры не интерпретирует. Назад | Содержание | Вперед

Контейнеры заголовка документа НТМL - HEAD

Заголовок документа не имеет атрибутов. Основное назначение тагов заголовка - это описание общих для всего документа параметров отображения. К таким параметрам можно отнести стиль отображения документа, общий базовый адрес гипертекстовы х ссылок, общие гипертекстовые ссылки, идентификатор и имя документа и т.п. Мы рассмотрим только наиболее часто встречающиеся контейнеры.

Кроме новых контейнеров таблицы...

Свойства контейнеров, управляемые описателями стилей

Первую группу свойств составляют свойства шрифтов:
font-size, font-family, font-weight, font-style.

Вторую группу свойств составляют свойства текста:
line-height, text-decoration, text-transform, text-align, text-indent.

Третью группу свойств составляют свойства блоков текста:
margin-left, margin-right, margin-top, margin-bottom, margin, padding-top, padding-right, padding-bottom, padding-left, paddings, border-top-width, border-bottom-width, border-left-width, border-right-width, border-width, border-style, border-colo r

Четвертую группу составляют описатели цвета фона и цвета текста:
color, background-image, background-color.

Кроме того, существуют свойства определяющие тип пульки у элементов списка и ряд других свойств элементов HTML-разметки.

Листание картинок и их автоматический просмотр

Вся страница размечается как таблица, состоящая из одного столбца в две ячейки. В первой ячейке размещаются три кнопки управления просмотром картинок "Вперед", "Старт/Стоп", "Назад". Во второй ячейке размещаются картинки, выбранные путем листания. Листание осуществляется кнопками "Вперед" и "Назад". Возможен и другой вариант выбора картинки, когда система сама через некоторый промежуток времени периодически меняет картинки. Для этого следует сначала запустить автоматическую смену картинок, нажав на кнопку "Старт/Стоп", а потом, когда будет показана нужная картинка, остановить автоматическое листание, снова нажав на кнопку "Старт/Стоп". Ниже приведен пример реализации такой компоновки и пример кода самой страницы.

МЕТА

Таг МЕТА предназначен для определения в заголовке документа конструкций, отсутствующих в спецификации НТМL. Имеет три атрибута: NAME, CONTENT, HTTP-EQUIV. Применение данного тага затруднено тем, что для интерпретации конструкций, которы е вводятся через этот таг, необходимо, чтобы сервер или интерфейс пользователя могли эти конструкции расшифровать и применить. Для такого сорта работы программа должна иметь интерпретировать конструкции SGML, что практически не реализовано ни в одной инте рфейсной программе. Единственным способом применения данного тага на практике является включение в заголовок отклика по протоколу НТТР информации, определенной через атрибут НТТР-ЕQUIV: <META HTTP-EQUIV="Keywords" CONTENT="Plsma, Nuclear Physics">

При таком использовании в заголовок НТТР-пакета будет включена строка: Keywords: Plasma, Nuclear Physics, что удобно при отправке почты, например.

Наиболее эффектное применение контейнера МЕТА для построения демонстрационных роликов. В этом случае изменение отображаемой страницы строится на параметре Rеfresh (т.е. времени обновления документа). В заголовок документа записывается к онтейнер МЕТА следующего вида: <meta http-equiv = "Refresh": content = "0, URL=next.html">

такое предложение равносильно появлению в заголовке сообщения протокола НТТР предложения вида: Refresh = 0; URL=next.html <LF>

В свою очередь это означает замену документа сразу же после загрузки его браузером. При этом в качестве нового документа используется документ из параметра URL.

Методы

Методы позволяют нам создать на экране видимое окно, закрыть окно и проделать с ним другие операции. С методом window.alert мы уже знакомы. Методы window.confirm и window.prompt используются для получения ответов от пользователя:

Обратите внимание: на приведенных...

Пример 1.25

<HTML> <HEAD> <TITLE> Пример фрейма</TITLE> </HEAD> <FRAMESET COLS="25%, 75%" <FRAME SRC="html-pr5-2.html"> <FRAME SRC="html-pr2-3.html" NAME="main"> </FRAMESET> <NOFRAMES> Вы видите эту страницу броузером не поддерживающим фреймы. Броузер поддерживающий фреймы не видит этот текст. </NOFRAMES> </HTML>

Ограничивающие прямоугольники и атрибуты АLТ=

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

Описание иерархии классов

Все встроенные объекты JavaScript берут свое начало от рабочей области Netscape, и их можно представить в виде следующей иерархии:

Кроме этих классов объектов пользователь может создавать и свои собственные. Но обычно большинство программ используют эту систему классов и не создают новых.

Пример простого документа

Пример 1.1

<HTML> <HEAD> <TITLE>Simple Document</TITLE> </HEAD> <BODY text=#0000ff BACKGROUND=#f0f0f0 > <H1> Пример простого документа</H1> <HR> Формы HTML-документов <UL> <LI>Классическая <LI>Фреймовая </UL> <HR> </BODY> </HTML>

Frame Sample

Пример 1.2

<HTML> <HEAD> <TITLE>Frame Sample</TITLE> </HEAD> <FRAMESET COLS="30%,*"> <FRAME SRC=HTML-lecture.html NAME=LEFT> <FRAME SRC=HTML-lec-1.html NAME=RIGHT> </FRAMESET> </HTML>

Открытое акционерное общество Компания основанная

Пример 1.3

<HTML> <HEAD> <TITLE> Главная страница</TITLE> </HEAD> <BODY> Компания. Открытое акционерное общество Компания основанная в 1996 году, является одним из ведущих продавцов бытовой электроники в России. Ос-новными направлениями деятельности Компании являются: реализация бытовой электроники ведущих фирм мира через сеть магази-нов; создание сервисных центров по обслуживанию бытовой электроники; Компания ищет агентов по сбыту бытовой электроники. Контактная информация Telephone (123) 123-34-56 FAX (123) 123-34-56 Почтовый адрес 123456 г. Город, ул Лесная, 106 Электронная почта Общая информация: abc@abc.su Продажи: abc@abc.abc.su Copyright © 1997 Компания </BODY> </HTML>

в 1996 году, является одним

Пример 1.4

<HTML> <HEAD> <TITLE> Главная страница</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Компания.</H1> <H3 ALIGN=LEFT>Открытое акционерное общество Компания основан-ная в 1996 году, является одним из ведущих поставщиков бытовой электроники в России.</H3> <H4 >Основными направлениями деятельности Компании являются: реализация бытовой электроники ведущих фирм мира через сеть ма-газинов; создание сервисных центров по обслуживанию бытовой электроники; </H4> <H3> Компания ищет агентов по сбыту бытовой электроники.</H3> <H5 ALIGN=CENTER>Контактная информация Telephone (123) 123-34-56 FAX (123) 123-34-56 Почтовый адрес 123456 г. Город, ул Лесная, 106 Электронная почта Общая информация: abc@abc.su Продажи: abc@abc.abc.su Copyright © 1997 Компания</H5> </BODY> </HTML>

Использование тагов...

Пример 1.5. Использование тагов, управляющих формой отображения.

<HTML> <HEAD> <TITLE> Главная страница</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Компания.</H1> <H3 ALIGN=LEFT><I>Открытое акционерное общество Компания осно-ванная в 1996 году, является одним из ведущих поставщиков бытовой электроники в России.</I></H3> <H3 ><B>Основными направлениями деятельности Компании являются</B>: реализация бытовой электроники ведущих фирм мира через сеть магазинов; создание сервисных центров по обслуживанию бытовой электроники;</H3> <H3><U> Компания ищет агентов по сбыту бытовой электроники.</U></H3> <H5 ALIGN=CENTER><TT>Контактная информация</TT> <DL>Telephone (123) 123-34-56 <DL>FAX (123) 123-34-56 <DL>Почтовый адрес 123456 г. Город, ул Лесная, 106 Электронная почта <DL>Общая информация: abc@abc.su <DL>Продажи: abc@abc.abc.su</DL> Copyright © 1997 Компания</H5> </BODY> </HTML>

Использования тагов различных списков.

Пример 1.6. Использования тагов различных списков.

<HTML> <HEAD> <TITLE> Главная страница</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Компания.</H1> <HR> <H3 ALIGN=LEFT><I>Открытое акционерное общество Компания осно-ванная в 1996 году, является одним из ведущих поставщиков бытовой электроники в России.</I></H3> <HR> <H3>Основными направлениями деятельности Компании являются: <OL> <LI>реализация бытовой электроники ведущих фирм мира через сеть магазинов; <LI>создание сервисных центров по обслуживанию бытовой электроники.</H3> </OL> <HR> <H3><U><FONT COLOR=RED> Компания ищет агентов по сбыту бытовой электроники.</FONT></U></H3> <H5 ALIGN=CENTER>Контактная информация</H5> <UL> <LI>Telephone (123) 12-34-56 <LI>FAX (123) 12-34-56 <LI>Почтовый адрес 123456 г. Город, ул Лесная, 106 <UL TIPE=CIRCLE>Электронная почта<BR> <LI>Общая информация: abc@abc.su <LI>Продажи: abc@abc.abc.su</UL></UL> <BR><BLINK>Copyright</BLINK> © 1997 Компания </BODY> </HTML>

Открытое акционерное общество Компания основанная

Пример 1.7

<HTML> <HEAD> <TITLE> Главная страница</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Компания.</H1> <HR> <H3 ALIGN=LEFT><I> Открытое акционерное общество Компания основанная в 1996 году, является одним из ведущих поставщиков бытовой электроники в России.</I></H3> <HR> <p ALIGN=CENTER><font color="#400040" size="4">[ <a href="news.html">Новости</a> |<a href="products.html">Товары</a> | <a href="servis.html">Услуги</a> | <a href="contact.html"> Контакты</a> | <a href="search.htm">Поиск</a> ] </font> <HR> <H3>Основными направлениями деятельности Компании являются: <OL> <LI>реализация бытовой электроники ведущих фирм мира через сеть магазинов; <LI>создание сервисных центров по обслуживанию бытовой электроники.</H3> </OL> <HR> <H3><U><FONT COLOR=RED> Компания ищет агентов по сбыту бытовой электроники.</FONT></U></H3> <H5 ALIGN=CENTER>Контактная информация</H5> <UL> <LI>Telephone (123) 12-34-56 <LI>FAX (123) 12-34-56 <LI>Почтовый адрес 123456 г. Город, ул Лесная, 106 <UL TIPE=CIRCLE>Электронная почта
<LI>Общая информация: abc@abc.su <LI>Продажи: abc@abc.abc.su</UL></UL> <BR><BLINK>Copyright</BLINK> © 1997 Компания </BODY> </HTML>

На экране это будет выглядеть следующим образом. При нажатии на ссылку "Товары" в окно броузера будет загружен новый документ.

Почтовый адрес 123456 г. Город,

Пример 1.9

<HTML> <HEAD> <TITLE> Товары</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">Компания.</H1> <HR> <p ALIGN="CENTER"><font color="#400040" size="4">[ <a href="news.html">Новости</a> | <a href="products.html">Товары</a> | <a href="servis.html">Услуги</a> | <a href="contact.html">Контакты</a> | <a href="search.htm">Поиск</a> ] </font> <HR> <H3 ALIGN=CENTER>Виды бытовой электроники предлагаемые Компани-ей </H3> <IMG SRC="catal2.jpg" usemap="#catal2" ALIGN=MIDDLE> <map name="catal2"> <area shape="rect" coords="8,5,128,134" href="tv.html"> <area shape="default" nohref> </map> <HR> <H3 ALIGN="CENTER">Контактная информация</H3> <UL> <LI>Telephone (123) 12-34-56 <LI>FAX (123) 12-34-56 <LI> Почтовый адрес 123456 г. Город, ул Лесная, 106 <UL TIPE="CIRCLE">Электронная почта<BR> <LI>Общая информация: abc@abc.su <LI>Продажи: abc@abc.abc.su </UL> </UL> <BR><BLINK>Copyright</BLINK> © 1997 Компания </BODY> </HTML>

в таблице два тага

Пример 1.10

<HTML> <BODY> <H1 ALIGN=CENTER>Таблица</H1> <CENTER> <TABLE BORDER> <TR> <TD COLSPAN=3>Если в таблице два тага <TR> то в ней две строки.</TD> </TR> <TR> <TD>Если в стоке три тага <TD> </TD> <TD>то в ней </TD> <TD>три столбца.</TD> </TR> </TABLE> </CENTER> </BODY> </HTML>

нибудь ячейку шире, чем верхняя

Пример 1.14

<HTML> <BODY> <CENTER> <TABLE BORDER=3> <TR> <TD> Если вы хотите сделать какую- нибудь ячейку шире, чем верхняя или нижняя, </TD> <TD> можно воспользоваться атрибутом СОLSPAN=, </TD> </TR> <TR> <TD BGCOLOR=WHITE COLSPAN=2> чтобы растянуть ее над любым количеством обычных ячеек. </TD> </TR> </TABLE> </CENTER> </BODY> </HTML>

Текст или данные

Пример 1.15

<HTML> <BODY> <TABLE BORDER WIDTH=100%> <TR> <TD ALIGN=CENTER> Текст или данные - ширина 100% </TR> </TABLE> или <TABLE BORDER WIDTH=50%> <TR> <TD ALIGN=CENTER>Текст или данные - ширина 50%</TD> </TR> </TABLE> или <TABLE BORDER WIDTH=200> <TR> <TD ALIGN=CENTER>Текст или данные - ширина 200 пикселей</TD> </TR> </TABLE> или <TABLE BORDER WIDTH=100> <TR> <TD ALIGN=CENTER>Текст или данные - ширина 100 пикселей</TD> </TR> </TABLE> </BODY> </HTML>

TABLE BORDER

Пример 1.16

<HTML> <BODY> <CENTER> < TABLE BORDER CELLPADDING=20> <TR> <TD>Текст или данные</TD> <TD>Текст или данные</TD> <TD>Текст или данные</TD> </TR> <TR> <TD>Текст или данные</TD> <TD>Текст или данные</TD> <TD>Текст или данные</TD> </TR> </TABLE> <BR> <TABLE BORDER CELLPADDING=O> <TR> <TD>Текст или данные</TD> <TD>Текст или данные</TD> <TD>Текст или данные</TD> </TR> <TR> <TD>Текст или данные</TD> <TD>Текст или данные</TD> <TD>Текст или данные</TD> </TR> </TABLE> </CENTER> </BODY> </HTML>

Пример 1.19

h2>

TABLE BORDER

Пример 1.20

<HTML> <BODY> <CENTER> <TABLE CELLPADDING=10 CELLSPACING=0 BORDER=16> <TR> <TD ALIGN=CENTER> <H1>ПЕРФОРАТОР</H1> <H3>Только сегодня!</H3> < TABLE BORDER WIDTH=100%> <TR><TD ALIGN=CENTER><I>Почти бесплатно!</I></TD> </TR> </TABLE> </TD> </TR > </TABLE> </CENTER > </BODY> </HTML>

Как просверлить бетонную

Пример 1.21

<HTML> <BODY BACKGROUND="bgr.gif" BGCOLOR="YELLOW" > <CENTER> <TABLE BORDER=3 CELLPADDING=20> <CAPTION ALIGN=TOP><H2> Как просверлить бетонную стену</H2></CAPTION> <TR> <TD BGCOLOR=GRAY> <TABLE CELLPADDING=10 CELLSPACING=0 BORDER=16> <TD BGCOLOR=RED ALIGN=CENTER> <H1>ПЕРФОРАТОР</H1> <H3>Только сегодня!</H3> <TABLE BORDER WIDTH=100%> <TR> <TD BGCOLOR=AQUA ALIGN=CENTER><I>Почти бесплатно!</I></TD> </TR> </TABLE> </TABLE> <TD WIDTH=50% BGCOLOR=BROWN ALIGN=CENTER> <IMG SRC="perfor1.gif" WIDTH=200 HEIGHT=150> </TD> </TR> <TR> <TD BGCOLOR=PINK> <FONT SIZE=6 COLOR=BLUE>От 6 до 20 мм</FONT> </TD> <TD BGCOLOR=BLUE> <FONT SIZE=6 COLOR=PINK>Просверлим все</FONT> </TD> </TR> </TABLE> </CENTER > </BODY> </HTML>

Вы видите эту страницу броузером

Пример 1.22

<HTML> <HEAD> <TITLE>Пример фреймов</TITLE> </HEAD> <FRAMESET COLS="25%, 75%" <FRAME SRC="a.html"> <FRAME SRC="b.html" NAME="main"> </FRAMESET> <NOFRAMES> Вы видите эту страницу броузером не поддерживающим фреймы. </NOFRAMES> </HTML>

Пожалуйста сообщите нам, что вы

Пример 1.26

<HTML> <HEAD> <TITLE>Коментарии</TITLE> </HEAD> <BODY> <H1>Коментарии</H1> <BR> Пожалуйста сообщите нам, что вы думаете о нашем web сайте, компании, продукции, или услугах. Если вы сообщите нам свою контактную информацию, у нас будет возможность связаться с вами и ответить на ваши вопросы.< <FORM METHOD="POST" action="mailto: yourname@your.email.address"> <H3>Контактная информация</H3> <TABLE > <TR> <TD ALIGN="right"><em>Имя</em></td> <TD><input type="text" size="35" name="Name"></td> </TR> <TR> <TD ALIGN="right"><em>Тема</em></td> <TD><input type="text" size="35" name="Title"></td> </TR> <TR> <TD ALIGN="right"><em>Компания</em></td> <TD><input type="text" size="35" name="Company"></td> </TR> <TR> <TD ALIGN ="right"><em>Адрес</em></td> <TD><input type="text" size="35" name="Address"></td> </TR> <TR> <TD ALIGN ="right"><em>Телефон</em></td> <TD><input type="text" size="35" name="Telephone"></td> </TR> <TR> <TD ALIGN ="right"><em>Факс</em></td> <TD><input type="text" size="35" name="FAX"></td> </TR> <TR> <TD ALIGN ="right"><em>E-mail</em></td> <TD><input type="text" size="35" name="Email"></td> </TR> </TABLE> <p> <input type="reset" value="Очистить форму"> < </FORM> </BODY> </HTML>

Документ со встроенной ссылкой на

Пример 1.27

<HTML> <HEAD> <TITLE> Документ со встроенной ссылкой на applet.</TITLE> </HEAD> <BODY bgcolor=#FFFFFF> <CENTER> <H1>Документ со встроенным апплетом hello Java</H1> <HR> <APPLET CODE=hello width=200 height=100> Аррlet будет отображаться в этом месте, если Ваш браузер интерпретирует Java </APPLET> <HR> </BODY) </HTML>

В результате ссылки на такой документ сначала будет загружен текст документа. За тем будет обнаружен контейнер аррlet, и произойдет загрузка кода апплета. Файл hello.class должен в этом случае находиться там же, где и НТМL-файл, в котор ом есть на него ссылка. После приема апплета браузер отведет под него место в своей рабочей области и только после этого начнет его исполнение.

В общем случае контейнер АРРLЕТ имеет следующий вид: <applet [codebase = codebase url] code = applet.class [alt = text] [name= applet name] width = number of pixels height = number of pixels [align = alignment] [vspace=number of picsels] [hspace=number of pixels] [<param name=param name value=param value>] [HTML text] </applet>

Параметр соdebase задает базу для поиска кода апплета, соdе - это имя файла апплета, которое должно иметь расширение сlass, аlt - альтернативный текст - отображается в том случае когда выполнение апплета запрещено, name - имя контейнера аррlet, используется для ссылки на контейнер, widthт - ширина области отображения апплета, height - высота области отображения апплета, аlign - управляет выравниванием области отображения апплета внутри рабочей области браузера, vspase и hspase - указыва ют на отступ от текста НТМL-документа (вертикальный и горизонтальный, соответственно).

Использование контейнера РАRАМ позволяет передавать параметры внутрь апплета и НТМL-документа. Это аналогично вызову команды с различными аргументами командной строки. Для того, чтобы получить эти параметры внутри апплета, следует испол ьзовать метод getParametr ().

Из атрибутов контейнера АРРLЕТ обязательными являются только соdе, width и height Все остальные атрибуты (они заключены в квадратные скобки "[ ]") можно опускать. Большинство систем разработки Java-программ сами генерируют НТМL-документ , точнее его макет, для тестирования Java-апплетов. Так поступают, например, в АDК (Аррlet Development Kit) компании IВМ.

Для получения URL документа, из которого вызван аррlet можно использовать метод getDocumentBase и getCodeBase. Первый определяет базу адреса для документа, в то врeмя как второй определяет базу самого апплета. Применение этих методов не обходимо для обращения за данными (текст или графика), которые могут храниться там жe, где и документ аррlet.

a first part of the

Пример 1.28

<html> <head> style type="text/css"> p {color:blue; font-family: times; font-size:10pt;} h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;} </style> </head> <body> <h1>Test Style Sheets in Communicator</h1> <p> This is a first part of the document </body> </html>

То же самое но в JavaScript-нотации будет выглядеть следующим образом:

a first part of the

Пример 1.29

<html> <head> <style type="text/javascript"> tags.p.color="blue"; tags.p.fontFamily="times"; tags.p.fontSize="10pt"; tags.h1.color="black"; tags.h1.fontSize="12pt"; tags.h1.fontStyle="Arial"; tags.h1.textAlign-"center"; </style> </head> <body> <h1>Test Style Sheets in Communicator</h1> <p> This is a first part of the document </body> </html>

Сoзданный таким образом документ будет отображаться следующим образом:

The body of the document

Пример 1.30

<html> <head> <link REL=STYLESHEET TYPE="text/css" HREF=http://localhost/css.htm> </head> <body> The body of the document should be here. </body> </html>

Из данного примера видно, что писание стилей в фале css.htm полностью совпадает с описанием в контейнере STYLE. В тексте файла описания стилей не нужно указывать таги контейнера STYLE.

Довольно часто используют не мультипликацию,

Пример 2.1

<HTML> <HEAD> <SCRIPT> function multi_pulti() { img_array = new Array() img_array[0] = new Image(50,100) .... img_array[99] = new Image(50,100) img_array[0].src = "image1.gif" ... img_array[99].src = "image100.gif" n=0 while(n==0) { document.images[0].src = img_array[0].src ... } } </SCRIPT> </head> <body onLoad="multi_pulti()"> <img src=image1.gif> </body> </html>

Довольно часто используют не мультипликацию, а выбор картинки через OPTION, другой новый объект JavaScript. При этом можно через поле формы SELECT менять не только саму картинку, но и гипертекстовую ссылку, которая может быть связана с этой картинкой. На гипертекстовую ссылку также можно ссылаться по индексу: document.links[index].href = kuku.html

Данный прием оправдан и с точки зрения интерфейса навигатора. При использовании такого сорта массивов ссылок не требуется их длительное перечисление и листание страницы в рабочей области навигатора - можно просто выбрать ссылку из "выпа дающего" меню. Другой способ для сокращения числа нажатий на клавиши - использование событий. В том же объекте OPTION можно использовать событие onChange, что делает необязательным нажатие кнопок типа submit. В этом случае достаточно будет просто выбрать альтернативу и перейти к новой странице сразу после выбора.

The JavaScript Functions Definition function

Пример 2.2

<HTML>  <HEAD> <TITLE>Registration</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <CENTER> <TABLE> <TR><TH><IMG SRC="radleg3.gif"></TH><TH><H2>ISTC. Project RADLEG(#245)</H2> RRC "Kurchatov Institute"<BR> <I>Dec, 25, 1995</I> </TH></TR> </TABLE> </CENTER> <HR> <CENTER> <h2>Registration Form</h2> <hr> ...... Текст страницы. ..... <hr> <FORM NAME=help_call> <table> <TR> <TD><INPUT NAME=next TYPE=button VALUE=Next onClick="main_menu()"></TD> <TD><INPUT NAME=help TYPE=button VALUE=Help onClick="help_win()"></TD> </TR> </TABLE> </FORM> <hr> </CENTER> </BODY> </HTML>

В данном примере в заголовок документа (контейнер HEAD) включен контейнер SCRIPT. До недавнего времени атрибут LANGUAGE в этом контейнере не являлся обязательным. Но с момента появления VBSCRIPT смысл в указании типа языка появился - Navigator не понимает скриптов на других языках. Отсутствие атрибута может привести к ошибкам при отображении гипертекстовых страниц.

Далее в тексте страницы определен комментарий, в который включен текст скрипта. Начинается комментарий со строки:

Внутри контейнера скрипта определены две функции пользователя: help_win() и main_menu(). Смысл этих функций достаточно прозрачен. Help_win() предназначена для организации контекстно зависимого help, а main_menu() осуществляет допуск пользователя к главному меню Website. Обе функции используют один и тот же метод open (встроенную в JavaScript функцию, которая определена над объектом window) для того, чтобы открыть новое окно Netscape Navigator и загрузить в него гипертекстовые документы. При этом функция main_menu порождает стандартное окно (с кнопочками, иконками и т.п.), а функция help_win() окно без стандартных атрибутов. У этого окна имеются только линейки прокрутки (scroll bars).

Вызов функций осуществляется после нажатия на соответствующую кнопку, которые определены в HTML-форме help_call. Таким образом выполнение функций будет осуществлено только в том случае, если произойдет событие, описанное атрибутом onClick в контейнере INPUT соответствующего поля формы.

Если быть более точным, то приведенный пример - это фрагмент, реализующий регистрацию пользователя. К моменту его выполнения окно главного меню уже открыто, поэтому создание этого окна при выборе кнопки "NEXT" не происходит, а текст загружается в уже открытое окно.

below were arbitrarily chosen.

Пример 2.3

<HTML>  <HEAD> <TITLE>Проверка устного счета.</TITLE> <SCRIPT LANGUGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <CENTER> <H1>Математический тест</H1> <HR> <FORM NAME=test> <table> <TR> <TD><INPUT NAME=i10 TYPE=button VALUE="0-10" onClick="max_value=10"></TD> <TD><INPUT NAME=i20 TYPE=button VALUE="0-20" onClick="max_value=20"></TD> <TD><INPUT NAME=i100 TYPE=button VALUE="0-100" onClick="max_value=100"></TD> <TD><INPUT NAME=i+ TYPE=button VALUE=" + " onClick="set_sign('+')"></TD> <TD><INPUT NAME=i- TYPE=button VALUE=" - " onClick="set_sign('-')"></TD> </TR> </TABLE> <HR> <table> <TR> <TD><INPUT NAME=op1 SIZE=2 MAXLENGTH=2></TD> <TD><INPUT NAME=s_sign SIZE=1 MAXLENGTH=1></TD> <TD><INPUT NAME=op2 SIZE=2 MAXLENGTH=2></TD> <TD>=</TD> <TD><INPUT NAME=result SIZE=3 MAXLENGTH=3></TD> <TD><INPUT NAME=award TYPE=button VALUE=" ? " onClick="main_calc()"> <TD><INPUT NAME=r0 VALUE=" ??? "> </TR> </TABLE> <HR> <TABLE BORDER=2> <TR> <TD><INPUT NAME=b1 TYPE=button VALUE=" 1 " onClick="input_sign('1')"></TD> <TD><INPUT NAME=b2 TYPE=button VALUE=" 2 " onClick="input_sign('2')"></TD> <TD><INPUT NAME=b3 TYPE=button VALUE=" 3 " onClick="input_sign('3')"></TD> </TR> <TR> <TD><INPUT NAME=b4 TYPE=button VALUE=" 4 " onClick="input_sign('4')"></TD> <TD><INPUT NAME=b5 TYPE=button VALUE=" 5 " onClick="input_sign('5')"></TD> <TD><INPUT NAME=b6 TYPE=button VALUE=" 6 " onClick="input_sign('6')"></TD> </TR> <TR> <TD><INPUT NAME=b7 TYPE=button VALUE=" 7 " onClick="input_sign('7')"></TD> <TD><INPUT NAME=b8 TYPE=button VALUE=" 8 " onClick="input_sign('8')"></TD> <TD><INPUT NAME=b9 TYPE=button VALUE=" 9 " onClick="input_sign('9')"></TD> </TR> <TR> <TD><INPUT NAME=b0 TYPE=button VALUE=" 0 " onClick="input_sign('0')"></TD> <TD COLSPAN=2><INPUT NAME=bs TYPE=button VALUE=" OK " onClick="input_sign('10')"> </TD></TR> </TABLE> </FORM> </CENTER> <HR> </BODY> </HTML>

Приведенный здесь пример содержит датчик случайных чисел (функции init и rand), таблицу, реализующую функции кнопок клавиатуры, и блок проверки результата вычислений. После загрузки программы пользователь должен выбрать тип вычислений (+,-), интервал вычислений (в пределах 10, 20, 100) и нажать кнопку "?" для генерации примера. После ввода с отображаемой клавиатуры числа пользователь нажимает на символ "=", что означает "исполнить", и система проверяет правильность ответа. Если ответ правильный, то программа поздравляет фразой "Молодец!", если нет - "Думай!?". В системе Windows 3.x нет встроенного датчика случайных чисел, поэтому стандартная функция rand в этой версии JavaScript не реализована. Используемый в данной программе датчик был позаимствован из телеконференции по JavaScript. В скрипте кроме этого используются объект типа "дата" и его методы, а также встроенные функции контроля вводимых данных. Как видно из примера обращение к полям HTML-формы представляет из себя обращение к структуре, корнем которой является объект окно, в котором определен объект документ, внутри которого определена форма и ее поля и атрибуты полей. Не у всех полей можно менять значения атрибутов, так, например, атрибут VALUE в кнопке не меняет своего значения, если только не перезагрузить страницу.

Другим часто встречающимся примером является бегущая строка. Строка может бежать либо в поле статуса (низ экрана), либо внутри поля формы. Рассмотрим такой пример.

Бегущая строка

Пример 2.4. Бегущая строка

<HTML>   <HEAD> <TITLE>Welcome to Demos Company - Moscow, Russia</TITLE>   <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY BACKGROUND="back.gif" BGCOLOR="#FFFFFF" TEXT="#000040" LINK="#000080" VLINK="#400080" ALINK="#FF0000" onLoad="roll()"> ..... </BODY> </HTML>

Здесь приведен фрагмент страницы компании Демос разработанный Дмитрием Алтуховым (andy@demos.su). Как видно из этого примера, прокрутка осуществляется за счет изменения содержания отображаемой переменной msg1. Запускается бегущая строка в момент загрузки страницы по событию onLoad. Из комментария к примеру следует, что автор не несет ответственность за проблемы, которые может данный скрипт породить при его отображении программой просмотра на компьютере пользователя. Собственно проблема вызвана применением функции setTimeout. Изначально предполагалось, что программа просмотра, которая поддерживает JavaScript будет исполняться в среде многопотоковых операционных систем. В этом случае к моменту порождения нового потока старый уже завершится и setTimeout будет таким образом порождать последовательно исполняемые потоки. Однако, при реализации JavaScript в Netscape Navigator 2.0 не все было выполнено аккуратно, и setTimeout стала просто "пожирать" ресурсы компьютера. Системы Windows 3.x вообще не являются много поточными и в них просто происходит переполнение стека при выполнении данного скрипта. Весь вопрос заключается только в том, как быстро "упадет" система, что зависит от объема исполняемой по setTimeout функции. Самое лучше, что можно посоветовать, если вдруг на экране появляется прокрутка - поскорее покинуть такую страницу. Справедливости ради следует отметить, что прокрутку можно организовать и другими способами, поэтому ее появление не обязательно должно вызывать крах системы или крах программы просмотра.

Прокручивать можно и вертикальные фрагменты. Достигается это за счет использования полей типа TEXTAREA.

Собственно все организовано также, как

Пример 2.5

<HTML>  <HEAD> <TITLE>Text Block Scrolling</TITLE> <SCRIPT LANGUAGE="JavaScript"> var line_beak = "\n" var screen = "" // 1234567890123456789012345678901234567890 screen += "Будем прокручивать " screen += "Данный фрагмент текста " screen += "В поле типа " screen += "TEXTAREA " screen += "формы term " for(i=0;i<6;i++) screen += " " var i=0 var j=40 flag = 0 function scroll() { if( flag== 0 ) { display_str = "" for(k=0;k<11;k++) { display_str += screen.substring(i,j) i +=40;j = i + 40 if(i>400) i = 0 } window.document.term.work_field.value = display_str i += 40 ; if(i>400) i =0 } id = setTimeout("scroll()",1000) return true } function change_button() { if(flag==0) { flag = 1 return true } if(flag == 1) { flag = 0 return false } } </SCRIPT> </HEAD> <BODY onLoad="scroll()"> <CENTER> <H1>Text Block Scrolling.</H1> <HR> <FORM NAME=term> <TEXTAREA NAME=work_field COLS=40 ROWS=10 WRAP=ON></TEXTAREA> <P> <INPUT NAME=alarm VALUE="Start/Stop" TYPE=button onClick="change_button()"> </FORM> </CENTER> <HR> </BODY> </HTML>

Собственно все организовано также, как и в предыдущем примере, только прокрутка осуществляется в поле формы, для этого поля введен параметр переноса текста на новую строку, ширина поля подобрана под размер выводимых строк. Прокрутка осуществляется как по событию onLoad, так и при нажатии на кнопку "Start/Stop". В этом случае не надо немедленно покидать страницу с прокруткой, а достаточно просто ее остановить.

Другой часто встречающийся пример на страницах со скриптами JavaScript - идущие часы:

This is the start

Пример 2.6

<HTML> <HEAD> <TITLE> type_Document_Title_here </TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY onLoad="move_clock()"> This is the start point:<BR> <a href="#next"> This the document start point.</a> kukuku <a name=next> <FORM NAME=kuku onSubmit="alert('You submit data to server')" METHOD="GET"> <INPUT TYPE=SUBMIT NAME=SABMIT VALUE=SUBMIT> Make a clock here: <INPUT NAME=f_clock maxlength=8 size=8> <P> <INPUT NAME=adv_string maxlength=45 size=45> <INPUT NAME=i_field size=10> </FORM> </BODY> </HTML>

Минимизация, максимизация окна и его удаление.

Пример 2.7. Минимизация, максимизация окна и его удаление.

<HTML>  <HEAD> <title>Iconize</title> <script language="JavaScript"> function make_icon() { window.open("test_icon.htm","test_icon","resizable=yes,scrollbars=no, width=50,height=70") window.close() } </script> </HEAD> <BODY> <h1>minimize page</h1> <form name=icon> <input name=icon_button type=button value=icon onClick="make_icon()"> </form> </BODY> </HTML>

Максимизация окна:

Пример 2.8. Максимизация окна:

<HTML>  <HEAD> <script> function max_window() { window.open("iconize.htm","new","toolbar=yes,scrollbars=yes,directories=yes, status=yes,menubar=yes,resizable=yes,location=yes,width=700,height=500") window.close() } </script> </HEAD> <BODY> <center> <a href="" onClick="max_window()"><img src=back.jpg></a> </center> </BODY> </HTML>

Программа выдачи простого...

Пример 2.9. Программа выдачи простого предупреждения при выборе гипертекстовой ссылки. Схема URL - JavaScript

<HTML> <HEAD> <title>Самый первый пример JavaScript</title> </HEAD> <BODY> <center> <h1>Мой первый пример JavaScript</h1> <hr> </center> В текст этого документа внедрена гипертекстовая ссылка <a href="javascript:window.alert('Do you speak English?')"> "Don`t click here" </a>. Любопытно, что будет, если все-таки выбрать? </BODY> </HTML>

В данном примере среди текста документа расположена гипертекстовая ссылка "Don`t click here". Если ее выбрать при просмотре (кликнуть мышкой), то на экране появится окно-предупреждение с вопросом: "Do you speak English?".

Генерация этого окна осуществляется специальным методом window.alert, который выполняется при выборе гипертекстовой ссылки. Если быть более точным, то в качестве URL информационного ресурса, который следует загрузить при переходе по данной гипертекстовой ссылке, используется схема JavaScript - расширение спецификации URI для программирования сценариев просмотра гипертекстовых документов World Wide Web. В этом случае выполнение JavaScript-программы происходит при выборе гипертекстовой ссылки, а сам код программы записан как URL.

Программа выдачи...

Пример 2.10. Программа выдачи простого предупреждения по событию Click при выборе гипертекстовой ссылки

<HTML> <HEAD> <title>Самый первый пример JavaScript</title> </HEAD> <BODY> <center> <h1>Мой первый пример JavaScript</h1> <hr> </center> В текст этого документа внедрена гипертекстовая ссылка <a href="javascript:void(0)" onClick="window.alert('Do you speak English?')">"Don`t click here"</a>. Любопытно, что будет, если все-таки выбрать? </BODY> </HTML>

Обойтись без новой схемы URL здесь также не удается, но она используется только для того, чтобы после выбора гипертекстовой ссылки в рабочем поле программы навигатора не появлялось пустой страницы, или не приходилось загружать вновь старую страницу. Для обработки события используется конструкция onClick, которая реализует обращение к обработчику (handler) данного события, который в свою очередь вызывает выполнение кода, записанного вслед за onClick.

Размещение кода программы на JavaScript непосредственно в тагах HTML является обычным делом, но не всегда бывает удобным. Наиболее часто JavaScript-код выносят в специальный HTML-контейнер SCRIPT(</script>.....</script>). Для того, чтобы продемонстрировать применение этого подхода, видоизменим наш пример следующим образом:

Применение контейнера...

Пример 2.11. Применение контейнера SCRIPT для размещение JavaScript-кода

<HTML> <HEAD> <title>Самый первый пример JavaScript</title> <script language="JavaScript">  </script> </HEAD> <BODY> <center> <h1>Мой первый пример JavaScript</h1> <hr> </center> В текст этого документа внедрена гипертекстовая ссылка <a href="javascript:void(0)" onClick="question()">"Don`t click here"</a>. Любопытно, что будет, если все-таки выбрать? </BODY> </HTML>

Данный пример развивает применение JavaScript-кода для обработки события Click. Но только в этом случае мы не размещаем весь код обработки события в атрибуте onClick. В данный атрибут помещается только вызов функции, которая будет обрабатывать это событие. Само тело функции размещено в заголовке HTML-документа внутри тагов <script ...> и </script>

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

Различные браузеры поддерживают разные версии JavaScript, что накладывает определенные ограничения при написании сценариев JavaScript. Для того, чтобы максимально адаптировать свою программу к конкретному типу программного обеспечения, часто включают проверку версии и имени программы-браузера в JavaScript.

Получение типа программы просмотра HTML-страниц

Пример 2.12. Получение типа программы просмотра HTML-страниц

<HTML> <HEAD> <title>Test of Browser name</title> </HEAD> <BODY> <h1 align=center>Проверка имени типа браузера;</h1> <hr> Для того, чтобы получить имя вашей программы просмотра выберите кнопку "Browser"<br> <center> <form name=kuku> <input type=button name=browser value=Browser onClick="window.alert(window.navigator.appName)"> </form> </BODY> </HTML>

Данная программа в точности повторяет пример 2.10, но в окне предупреждения выдает имя программы просмотра HTML-страниц (window.navigator.appName). Вообще говоря, в простом сообщении о типе программного обеспечения большого смысла нет, но если вставить проверку данного имени в текст HTML-страницы и реализовать условную компиляцию страницы, то тогда обращение к данной конструкции JavaScript будет оправданным:

Условная генерация...

Пример 2.13. Условная генерация текста страницы по типу программы просмотра

<HTML> <HEAD> <title>Test of Browser name</title> </HEAD> <BODY> <h1 align=center>Проверка имени типа браузера</h1> <hr> <script language=JavaScript>  </script> </BODY> </HTML>

В данном примере текст JаvaScript-программы размещен непосредственно в теле документа. При его загрузке, когда HTML-интерпретатор доходит до контейнера SCRIPT, вызывается JavaScript-интерпретатор. В этот момент будет проверяться условие, которое содержится в операторе if. В зависимости от результата проверки этого условия остальной текст страницы примет тот или иной вид в зависимости от типа программы просмотра. При просмотре данного документа программой отличной от Netscape Navigator будет выдано еще и окно предупреждения.

Размещение скрипта...

Пример 2.14. Размещение скрипта в отдельном файле (netscape.jsc)

<HTML> <HEAD> <title>Test of Browser name</title> </HEAD> <BODY> <h1 align=center>Проверка имени типа браузера</h1> <hr> <script language=JavaScript src=netscape.jsc> </script> </BODY> </HTML>

В данном случае текст условной генерации страницы размещен во внешнем файле. При загрузке страницы этот текст докачивается программой просмотра и исполняется так же, как если бы он размещался в документе. Любопытно, что при просмотре текста документа через опцию "View Source" текст скрипта не отображается, что дает возможность скрыть его содержание от пользователя. В самом файле, который содержит конструкции JavaScript, HTML-таги не используются:

Содержание файла...

Пример 2.15. Содержание файла netscape.jsc, ссылка на который установлена в атрибуте SCR тага <SCRIPT > из примера 6

if(window.navigator.appName == "Netscape") { document.write("<br><center><font color=steelblue size=+5>"); document.write("У вас хороший навигатор."); document.write("</font></center>"); } else { document.write("<font color=red size=+3>Необходим Netscape Navigator версии 3.0 и выше.</font>"); window.alert("Down load new version of your browser now."); }

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

Однако, существует лазейка в этом заколдованном круге, которой мы и воспользуемся. Это схема JavaScript универсального локатора ресурсов (URL). В наших примерах мы уже использовали эту схему. Она помогала нам открывать окно-передупреждение при выборе гипертекстовой ссылки (пример 2.10) и избегать перезагрузки страниц (пример 2.11). Мы будем пользоваться этой схемой вызова JavaScript-кода до тех пор, пока не появится в нашем рассмотрении объект (контейнер HTML) с атрибутом обработки события.

После этого небольшого отступления начнем рассматривать приемы программирования на JavaScript в соответствии с иерархией объектов этого языка, начиная с самого старшего объекта и двигаясь вглубь дерева объектов: от объекта "окно" к элементам формы.

Использование методов Alert, Prompt, Confirm

Пример 2.16. Использование методов Alert, Prompt, Confirm

<HTML> <HEAD> <title>Window simple example</title> </HEAD> <BODY> <center> <h1>Simple window methods</h1> <hr> </center> <ul> <li><a href="javascript:window.alert('Attention!!! press the button to continue.')">Метод Alert.</a> <li><a href="javascript:window.status=window.confirm('Answer yes or no.');void(0);">Метод Confirm.</a> <li><a href="javascript:window.status=window.prompt('Type string here:','');void(0);">Метод Prompt.</a> </ul> </BODY> </HTML>

В данном примере при вызове метода confirm появляется окно с просьбой подтверждения некоторого действия, при использовании метода prompt - окно с приглашением ввести информацию в поле ввода. В двух последних случаях если не указать функции void(0), произойдет замещение текста HTML-документа на значение, которое возвращают эти два метода. Если внимательно смотреть за полем окна навигатора, в котором отображается информация о загрузке документов, то там можно будет увидеть возвращаемые значения, т.к. они присваиваются свойству status текущего окна, которое связано именно с этим полем, и которому можно присваивать значения, и, следовательно, эти значения будут отображаться в этом поле.

Однако, следует признать, что рассмотренные выше методы используются крайне редко. А тем более в приведенном здесь контексте, поэтому поспешим рассмотреть методы открытия и закрытия окна.

Открыть окно можно используя метод open:

Метод window.open

Пример 2.17. Метод window.open

<HTML> <HEAD> <title>Window simple example</title> </HEAD> <BODY> <center> <h1>Open window methods</h1> <hr> </center> Если выбрать гипертекстовую ссылку <a href="javascript:window.open('simple8.htm','example','scrollbars, resizable,width=300,height=200');void(0);">Открыть окно</a>, то будет открыто новое окно. Чаще всего этот прием используют при создании контекстно зависимых меню. </BODY> </HTML>

В данном случае при выборе гипертекстовой ссылки будет открыто окно шириной 300 пикселей и высотой 200 пикселей, в окне не будет никаких стандартных меню навигатора, и в окно будет загружен документ simple8.html. Метод open позволяет также определить области прокрутки, наличие или отсутствие стандартных меню навигатора и возможность изменения размеров окна. Последняя возможность зависит от платформы на которой исполняется скрипт.

Документ simple8.htm в свою очередь содержит код, который позволяет закрыть окно, открытое в примере 2.17: