Практическое введение в программирование на JavaScript (стр. 4 )

Можно поместить на страницу с фреймами кнопку No Frames (Без фреймов). Ее назначение очевидно. Такой вариант достаточно разумен и легко осуществим.

На тот случай, если вы неуверенно чувствуете себя при использовании < NOFRAMES >, ниже приведен пример страницы с фреймовой структурой с добавленным в конце разделом < NOFRAMES >.

Пример 1.25

<HTML>

<HEAD>

<TITLE> Пример фрейма</TITLE>

</HEAD>

<FRAMESET COLS="25%, 75%"

</FRAMESET>

Вы видите эту страницу броузером не поддерживающим фреймы.

Броузер поддерживающий фреймы не видит этот текст.

</NOFRAMES>

</HTML>

Имейте в виду, что поддерживающий фреймы броузер проигнорирует все, что находится между тагами < NOFRAMES > и </ NOFRAMES >. И наоборот, не поддерживающий фреймы броузер проигнорирует все, что находится между тегами <FRAMESET> и </FRAMESET>. Код без фреймов можно поместить и в начало, и в конец страницы.

Специфические таги и атрибуты фреймов

Изучив таги и атрибуты для работы с фреймами, давайте поговорим о том, как лучше всего проектировать страницы с фреймовой структурой.

Таг <FRAMESET>

Таги <FRAMESET> обрамляют текст, описывающий компоновку фреймов. Здесь размещается информация о числе фреймов, их размерах и ориентации (горизонтальной или вертикальной). У тага <FRAMESET> только два возможных атрибута: ROW=, задающий число строк, и СОLS=, задающий число столбцов. Между тагами <FRAMESET> не требуется указания тага <ВОDY>, но его можно поместить между тагами <NOFRAME> в конце фреймовой структуры. Между тагами <FRAMESET> не должно быть никаких тегов или атрибутов, которые обычно используются между тагами <ВОDY>. Единственными тагами, которые могут находиться между тагами <FRAMESET> и </FRAMESET>, являются таги <FRAME>, <FRAMESET> и < NOFRAME>. Это упрощает задачу. В основном все связано с тагами <FRАМЕ> и их атрибутами. Если же вы хотите поэкспериментировать, можно сделать вложенные друг в друга таги <FRAMESET> аналогично тагам <ТАВLЕ>.

НЕ нашли? Не то? Что вы ищете?

Атрибуты ROW= и СОLS= похожи. Имейте в виду, что для каждой строки и столбца, упомянутых в таге <FRAMESET>, должен быть свой набор тагов <FRАМЕ>.

Атрибут ROW=

Атрибут ROW= тага < FRAMESET > задает число и размер строк на странице. Количество тагов <FRАМЕ> должно соответствовать указанному числу строк. Справа от знака = можно определить размер каждой строки в пикселях, процентах от высоты экрана или в относительных величинах (обычно это указание занять оставшуюся часть места). Не забывайте пользоваться кавычками и запятыми и оставлять пробелы между значениями атрибутов. Например, следующая запись формирует экран, состоящий из трех строк: высота верхней равна 20 пикселей, средней - 80 пикселей, нижней - 20 пикселей:

Следующий таг < FRAMESET > создает экран, на котором верхняя строка занимает 10% высоты экрана, средняя - 60%, а нижняя - оставшиеся 30%.

Можно поступить элегантнее, задав относительные значения в комбинации с фиксированными, выраженными в процентах или пикселях. Например, следующий таг создает экран, на котором верхняя строка имеет высоту 20 пикселей, средняя - 80 пикселей, а нижняя занимает все оставшееся место:

< FRAMESET ROW="20, 80, *" >

А можно сделать так:

< FRAMESET ROW="20, 2*, *" >

Число перед знаком ' показывает, что соответствующая строка (в данном случае - средняя) занимает в два раза больше оставшегося на экране места, чем нижняя. Не забывайте, что значения относительны (они зависят от размера экрана). Это часто бывает удобно, ведь вы не всегда знаете, какой у вашего пользователя монитор и какое разрешение он использует.

Атрибут СOLS=

Столбцы задаются так же, как строки. Для них применимы те же атрибуты.

Таг <FRАМЕ>

Таг <FRАМЕ> определяет внешний вид и поведение фрейма. Этот таг не имеет закрывающего тага, поскольку в нем ничего не содержится. Вся суть тага <FRАМЕ> в его атрибутах. Их шесть: NАМЕ=, MARGINWITH=, MARGINHEIGHT=, SCROLLING=, NORESIZE= и SRC=.

Атрибут NАМЕ=

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

<FRАМЕ SRC="my. html" NАМЕ="main">

Имена целевых фреймов должны начинаться с буквы или цифры. Выбирайте названия попроще, чтобы не запутаться. Одни и те же имена разрешается использовать в нескольких фреймовых структурах. По щелчку мыши соответствующие страницы будут отображаться в именованном фрейме:

Атрибут МАRGINWITH=

Атрибут МАRGINWITH = действует аналогично атрибуту таблиц CELLPADDING=. Он задает горизонтальный отступ между содержимым кадра и его границами. Наименьшее значение этого атрибута равно 1. Нельзя указать 0. Можно ничего не присваивать - по умолчанию атрибут равен б.

Атрибут МАRGINHEIGHT=

Атрибут МАRGINHEIGHT= действует так же, как и МАRGINWITH =. Он задает поля в верхней и нижней части фрейма.

Атрибут SCROLLING=

Хотите ли вы, чтобы ваши читатели пользовались прокруткой в фрейме? Иногда бывает разумно лишить их этого удовольствия. Возможные варианты: SCROLLING =YES, SCROLLING =NО, SCROLLING =АUТО. SCROLLING =YES означает, что в фрейме всегда будут полосы прокрутки, даже если это не нужно. При задании SCROLLING =NО полос прокрутки не будет, даже если они необходимы. Если документ слишком большой, а вы задали режим без прокрутки, то документ просто будет обрезан. Атрибут SCROLLING =АUТО предоставляет броузеру самому решать, требуются ли полосы прокрутки или нет. Если атрибут SCROLLING= отсутствует, результат будет таким же, как и при задании SCROLLING =АUТО.

Атрибут NORESIZE

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

Атрибут SRС=

Атрибут SRС= применяется в таге FRАМЕ при разработке фреймовой структуры для того, чтобы определить, какая страница появится в том или ином кадре. Если вы зададите атрибут SRС= не для всех фреймов, у вас возникнут проблемы. Даже если страницы, отображаемые в фрейме, выбираются в соседнем фрейме, вы должны по крайней мере задать для каждого фрейма начальную страницу. Если вы не укажите начальную страницу и URL, фрейм окажется пустым, а результаты могут быть самыми неожиданными - например, ваш броузер начнет выводить все новые и новые окна просмотра.

Атрибут ТАRGЕТ=

Чтобы разобраться с атрибутом ТАRGЕТ=, давайте вернемся к нашему простому примеру с кадром оглавления. Когда пользователь щелкает мышкой на одной из ссылок в левом фрейме, соответствующая страница должна появиться в правом фрейме, а оглавление остается неизменным. Чтобы этого добиться, нужно определить целевой фрейм ТАRGЕТ, в котором будет отображаться страница для каждого пункта оглавления. Задание целевых фреймов осуществляется в ссылках левого фрейма. Вот зачем всем кадрам в фреймовой структуре были присвоены имена. Правый фрейм называется main, так что нужно в каждой ссылке добавить атрибут ТАRGЕТ="main", в результате чего соответствующая страница появится в фрейме main. Обратите внимание: каждая ссылка содержит атрибут ТАRGЕТ="main", который в ответ на щелчок мышью отображает страницу в фрейме main.

Атрибут ТАRGЕТ= можно задавать для нескольких различных тагов. При использовании в таге <ВАSЕ> он направляет все ссылки в определенный целевой фрейм, если в дальнейшем особо не оговорено другое. Можно задать атрибут ТАRGЕТ= в таге <АRЕА> в активном изображении или в таге <FОRМ>. Фреймы полезны для организации форм. Пользователи будут видеть одновременно и форму, и результат своего выбора. Обычно при щелчке мышью кнопки Submit форма исчезает и возникает страница с результатами выбора. Сочетание форм и фреймов может оказаться удобным средством навигации.

"Волшебные" целевые фреймы

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

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

Фрейм "blank"

Если атрибут ТАRGЕТ= ссылается на " blank", то документ всегда будет появляться в новом пустом окне.

Фрейм "self"

Имя "self" указывает на то, что выбранная страница загружается в тот же фрейм, где была активирована ссылка. Если вы щелкнете мышкой на ссылке в фрейме оглавления, выбранная страница окажется в том же самом фрейме. Если вы задали фрейм для всего документа в атрибуте ВАSЕ=, то "self" помогает нейтрализовать ссылку в ВАSЕ=.

Фрейм "раrent"

Пользоваться этим именем небезопасно. Документы, вызываемые по ссылке на "раrent", появляются в родительской фреймовой структуре. Это хороший способ окончательно сбить с толку читателей. Да и у вас могут возникнуть трудности в процессе форматирования страниц. Соблюдайте осторожность.

Фрейм "top"

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

Вложенные и множественные кадровые структуры

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

В основном вложенные фреймы действуют так же, как вложенные таблицы. Задайте кадровую структуру, а внутри какого-нибудь фрейма в ней еще одну структуру. Помните, что таг <FRАМЕ> не имеет закрывающего тага. Вы, наверное, заметили, что при работе с фреймами не используются таги <СОLSРАN> и <ROWSРАN>. Их роль играют множественные, или вложенные, фреймы. Задав внутри одной объемлющей фреймовой структуры две независимых подструктуры, можно поместить в левой части экрана столбец из двух, а в правой - из трех фреймов

1.6. Формы

Интерактивные формы позволяют читателям Web-страниц легко общаться с их владельцами. Благодаря простоте использования тага <mailto:> и форм стал возможен двусторонний диалог между владельцами Web-узлов и их читателями. Это открывает для Web-навигаторов увлекательные перспективы и коммерческие возможности. К сожалению, многие старые броузеры не поддерживают таг <mailto:>.

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

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

Пример 1.26

<HTML>

<HEAD>

<TITLE>Коментарии</TITLE>

</HEAD>

<BODY>

<H1>Коментарии</H1>

<BR>Пожалуйста сообщите нам, что вы думаете о нашем web сайте, компании,

продукции, или услугах. Если вы сообщите нам свою контактную информацию,

у нас будет возможность связаться с вами и ответить на ваши вопросы.</p>

<H3>Контактная информация</H3>

<TR>

</TR>

<TR>

</TR>

<TR>

<TD ALIGN="right"><em>Компания</em></td>

</TR>

<TR>

<TD ALIGN ="right"><em>Адрес</em></td>

</TR>

<TR>

<TD ALIGN ="right"><em>Телефон</em></td>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

<p>

</FORM>

</BODY>

</HTML>

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

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

1.7. Апплеты

Собственно и не стоило бы говорить о Java, если бы не возможность использования небольших мобильных программ, которые можно передавать по сети и исполнять на компьютере пользователя. Эти программы в терминологии Java называются апплетами (яблочками). Для встраивания вызовов апплетов в текст НТМL-документа и отведения места для отображаемой апплетом информации в НТМL был введен контейнер АРРLЕТ, который начинается тагом <аррlet> и кончается тагом </аррlet>. В общем виде документ, содержащий ссылки на апплеты будет выглядеть так, как это представлено в примере.

В данном примере после заглавия документа (таг H1) и горизонтальной черты начинается поле апплета шириной 200 пикселей и высотой 100 пикселей. В данное поле загружается аррlet с именем hello (файл hello. class). Текст между тагами начала и конца контейнера аррlet используется для размещения встраиваемых контейнеров и текста, который отображается броузерами, не позволяющими использовать Java.

Пример 1.27

<HTML>

<HEAD>

<TITLE>Документ со встроенной ссылкой на applet.</TITLE>

</HEAD>

<H1>Документ со встроенным апплетом hello Java</H1>

<HR>

Арр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.

1.8. Каскадные таблицы стилей (Cascad Style Sheets)

Каскадные таблицы стилей были предложены w3c(WWW Consorcium) в рамках разработки спецификации HTML 3.0. Однако, реализованы в реально действующих навигаторах они были только в 1997 году. Фактически, в качестве применяемой HTML-разметки они стали доступны только с версий Netscape Navigator 4.0 и Internet Explorer 4.0.

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

Контейнеры во многом походят на блоки в универсальный языках программирования. При этом свойства контейнеров можно интерпретировать как переменные, которые принимают определенные значения в пределах каждого из контейнеров. Как и в языках программирования, например в Паскаль, описание свойств можно вынести в специальную секцию данных в начале документа. Такой секцией и является секция описания каскадных стилей. Обычно стиль описывается внутри контейнера STYLE:

</style>

Вообще говоря, в Netscape поддерживают еще одну нотацию описание таблиц стилей - нотация JavaScript:

</style>

При описании таблиц стилей мы будем опираться на документацию Netscape, т. к. - это наиболее популярный браузер Internet. Internet Explorer поддерживает только спецификацию w3c.

Начнем с простого примера. Нужно описать стили отображения текста в параграфе и заглавии документа:

Пример 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-нотации будет выглядеть следующим образом:

Пример 1.29

<html>

<head>

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зданный таким образом документ будет отображаться следующим образом:

Разберем теперь описатели стилей более подробно. Определим область их применения и способы встраивания в документ.

Новые HTML-контейнеры

С появлением таблиц стилей в языке появилось три новых контейнера: STYLE, LINK, SPAN. Вообще говоря LINK - это не новый таг, а новое применение старого тага.

Контейнер STYLE(<style type="...">......</style>) служит для определения таблицы описания стилей. Хотя в спецификации CSS прямо не говорится, в каком контейнере документа следует применять STYLE, тем не менее, в примерах чаще всего приводится этот контейнер внутри контейнера HEAD.

Контейнер LINK в контексте описателей стилей применяется для определения внешнего файла с описаниями стилей для данного документа. Например, внешний файл может содержать следующее описание стилей:

/* contents of the external style sheets file css. htm*/

p {color:blue; font-family: times; font-size:10pt;}

h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;}

/* the end of style sheets definition */

Для применения этого описателя стилей в заголовок документа необходимо включить следующий таг:

Пример 1.30

<html>

<head>

</head>

<body>

The body of the document should be here.

</body>

</html>

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

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

Пример 1.31

<HTML>

<!--

Author: Paul Khramtsov

Date: September 19, 1997

URL: http://polyn. kiae. su/Internet/intro. html

-->

<HEAD>

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>

<h3>Центр информационных технологий</h3>

<h1>Информационные Ресурсы Internet</h1>

<h3>(Учебное пособие для компьютерных непрофессионалов)</h3>

<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>, что позволяет выделить первую букву в отображаемом абзаце:

Кроме новых контейнеров таблицы описания стилей привнесли еще и новые атрибуты в известные таги.

Новые свойства контейнеров HTML

Перечень новых атрибутов у тагов HTML следует начать с атрибута STYLE. Этот атрибут используется для определения стиля отображаемого контейнера непосредственно внутри тага начала контейнера:

<h3 style="line-hieght:24pt; font-weight:bold; color: blue">The blue text

<h3 style="lineHeight='24pt'; fontWeght='bold'; color='blue'">The blue text

Можно также определить класс стилей и использовать его при помощи атрибута CLASS:

h3.class1 {font-size:12pt;color=blue}

</style>

.....

<h3 class="class1">This is a blue text

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

all. class1 {font-size:12pt;color=blue}

</style>

Kроме определения классов существует еще возможность создания поименованных стилей. Поименованный стиль создается как уточнение какого-либо класса:

all. class1 {font-size:12pt;color=blue}

#C1 { font-size: 20;}

</style>

....

<h3 class="class1">This is a blue text

<h3 class="class1" id="C1">This is a blue text

Таким образом, атрибуты контейнеров позволяют связать описатели стилей с содержанием контейнеров и управлять формой отображаемой информации.

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

Первую группу свойств составляют свойства шрифтов:

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-color

Четвертую группу составляют описатели цвета фона и цвета текста:

color, background-image, background-color.

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

2. Управление просмотром страниц Web-узла. JavaScript

Современные гипертекстовые информационные системы условно можно представить в виде совокупности нескольких компонентов: системы хранения гипертекстовых объектов, системы отображения гипертекстовых объектов, системы подготовки гипертекстовых объектов и системы программирования просмотра совокупности гипертекстовых объектов. С этой точки зрения технология World Wide Web только к 1996 году получила законченный, функционально полный вид. Первыми были разработаны системы хранения и просмотра ( г. г.), которые продолжают развиваться и в настоящее время. После 1990 года стали появляться первые системы подготовки документов. Наконец, в 1995 году были предложены первые языки управления сценариями просмотра.

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

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

Программы просмотра гипертекстовых страниц традиционно называют скриптами (scripts) по аналогии с исполняемыми файлами, написанными для командных интерпретаторов типа sh. Собственно как это было и раньше в локальных системах, в программировании просмотра гипертекстовых документов World Wide Web существуют два подхода: создание интерпретируемых программой просмотра скриптов или компиляция байт-кода. Первый подход следует традиции World Wide Web, согласно которой для разработки гипертекстовой страницы нужен только обычный текстовый редактор и сам гипертекстовый документ должен легко читаться человеком-оператором. Второй подход позволяет повысить эффективность исполнения программы и защищенность кода от несанкционированных модификаций. Как первый, так и второй способ опираются на объектно-ориентированный подход к программированию. По поводу байт-кодов или мобильных кодов, как их еще называют, написано в контексте технологии программирования Java достаточно много, поэтому сосредоточим свое внимание на скриптах, а точнее на скриптах, написанных на языке JavaScript

2.1. Модель объектов JavaScript - объекты Navigator'а

Идея JavaScript очень проста. Все операции, которые можно исполнять в программе на JavaScript, описывают действия над хорошо известными и понятными объектами, которыми являются элементы рабочей области программы Netscape Navigator и контейнеры языка HTML. Собственно объектная ориентированность JavaScript на этом и кончается. Есть только объекты с набором свойств и набор функций над объектами. Последние называются методами. Кроме методов существуют и другие функции, которые больше похожи на функции из традиционных языков программирования и позволяют работать со стандартными математическими типами или управлять процессом выполнения программы. Еще в JavaScript есть события - аналог программных прерываний. Эти события также ориентированы на работу в World Wide Web, например, загрузка страницы в рабочую область Navigator'a или выбор гипертекстовой ссылки. Используя события, автор гипертекстовой страницы и программы ее отображающей может организовать просмотр динамических объектов, например, бегущая строка, или управление многооконным интерфейсом.

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

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

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

2.2. Методы объектов и свойства объектов. Управление потоком вычислений

Каждый из этих классов имеет функции управления объектами класса - методы. Самыми главными их этих методов являются те, которые позволяют переназначать значения объектов. Делается это обычно по операции присваивания. Вообще, все типы операторов, которые поддерживаются обычными языками программирования, реализованы JavaScript (+,-,*, /, %, >>,<<, +=, -=, ...). При этом оператор сложения "+" при работе со строками означает конкатенацию последних, т. е. добавление в конец строки новую строку:

s = "string1"+"string2"

Кроме операций с числами и описаний стандартных классов в JavaScript есть команды управления потоком вычислений:

break - принудительный выход из цикла;

while(i &lt 6)

{

if(i==3) break;

}

continue - переход в конец цикла;

while(i &lt 6)

{

if(i==3) continue;

}

for - цикл;

for(i=0;i<9;i++)

{

...

}

for - цикл свойств объекта (переменных определенных в классе);

for(i in obj)

{

str = obj[i]

}

if..else - условный оператор;

if(i>0)

{

...

}

else

{

...

}

wile - условный цикл;

wile(j==k)

{

j++;

k--;

}

var - оператор объявления переменной.

var kuku = "kuku"

Тип переменной определяется по присвоенному ей значению.

Перечисленные здесь операторы не представляют полного перечня операторов JavaScript, но их вполне достаточно для выполнения практических занятий

2.3. События

Важным элементом языка являются события. Программист использует события для выполнения определенных частей программного кода скрипта. Один из наиболее часто используемых приемов - исполнение определенных действий в момент загрузки страницы в Navigator.

Не будем перечислять все события, но упомянем о наиболее часто используемых:

onLoad - выполнение скрипта или функции при загрузке;

onChange - порождается при изменении значения элемента формы;

onClick - порождается при выборе объекта (button, checkbox и т. п.);

onSelect - порождается при выборе текстового объекта (text, textarea);

onSubmit - при нажатии на кнопку Submit;

onUnload - при переходе к другой странице.

Появление Netscape Navigator 3.0 и новой версии JavaScript 1.1 заставляет продолжить обзор возможностей управления сценариями просмотра Website, который был опубликован в предыдущем выпуске "Открытых Систем Сегодня" (CW N 46, 1996). В новой версии языка были введены: возможность взаимодействия JavaScript и Java, определение установленных plug-ins, определены новые типы объектов (Area, Function, Image) и ряд других особенностей, которые по мнению разработчиков должны повысить мощь программирования на JavaScript

Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6

Практическое введение в программирование на JavaScript (стр. 4 )

Домашний очаг

Справочная информация

Техника

Общество

Образование и наука

Мир

Бизнес и финансы