Партнерка на США и Канаду по недвижимости, выплаты в крипто

30% recurring commission
Выплаты в USDT
Вывод каждую неделю
Комиссия до 5 лет за каждого referral

Оператор <FRAME> имеет следующие параметры:

Параметр	Описание
ALIGN	Используется только для “плавающих фреймов” в браузере Microsoft Internet Explorer. Задает выравнивание фрейма или текста, расположенного рядом с фреймом. Этот параметр может принимать следующие значения: LEFT, CENTER, RIGHT, TOP, BOTTOM
MARGINHEIGHT	Размер отступа по вертикали от границ фрейма в пикселах
MARGINWIDTH	Размер отступа по горизонтали от границ фрейма в пикселах
FRAMEBORDER	Если значение этого параметра равно 1, фреймы будут иметь трехмерную рамку, ширина которой задается в пикселах. В том случае, когда указано значение 0, рамка не создается
NAME	Этот параметр задает имя фрейма, которое используется в операторе ссылки <A> для указания, в какой фрейм нужно загрузить новый документ
NORESIZE	Если указан этот параметр, пользователь не сможет изменять размеры фрейма, передвигая его границы мышью
SCROLLING	Параметр SCROLLING определяет, нужно ли создавать полосы просмотра для свертки содержимого фрейма. Для этого параметра можно указывать следующие значения: YES полосы просмотра создаются всегда; NO полосы просмотра не создаются; AUTO полосы просмотра создаются только при необходимости, когда документ HTML не помещается полностью в окне фрейма
SRC	Адрес URL файла с документом HTML, который загружается в окно фрейма

Взаимодействие между фреймами

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

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

Десятично-шестнадцатеричный преобразователь

На рис. 4.1. показан внешний вид десятично-шестнадцатеричного преобразователя, выполненного на базе документов HTML с фреймами и сценарием JavaScript.

Рис. 4.1. Десятично-шестнадцатеричный преобразователь, выполненный с использованием фреймов

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

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

Исходный текст файла описания фреймов представлен в листинге 4.1.

Листинг 4.1. Файл chapter4/Converter/index. html

<HTML>

<HEAD>

<TITLE>Десятично-шестнадцатеричный преобразователь</TITLE>

</HEAD>

</FRAMESET>

</BODY>

</NOFRAME>

</FRAMESET>

</HTML>

Наш сценарий будет работать с фреймами toc и mainpage, расположенными, соответственно, в файлах с именами toc. html и main. html. В файле title. html располагается заголовок (листинг 4.2).

Листинг 4.2. Файл chapter4/Converter/title. html

<HTML>

<HEAD>

</HEAD>

<H2>Десятично-шестнадцатеричный преобразователь</H2>

</TD></TR></TABLE>

</BODY>

</HTML>

Исходный текст документа, содержащего форму с полями Dec и Hex, представлен в листинге 4.3.

Листинг 4.3. Файл chapter4/Converter/main. html

<HTML>

<HEAD>

</HEAD>

<TABLE>

<TR><TD><B>Hex:</B></TD><TD><INPUT TYPE="text"

NAME="hexValue" SIZE="20" onFocus="this. blur();"></TD></TR>

<TR><TD><B>Dec:</B></TD><TD><INPUT TYPE="text"

NAME="decValue" SIZE="20"></TD></TR>

</FORM>

</BODY>

</HTML>

Для поля исходного десятичного числа при помощи параметра NAME мы задали имя decValue. Поле результата называется hexValue. Эти имена используются сценарием JavaScript для адресации наших полей.

Документ toc. html (листинг 4.4) содержит форму с кнопками и сценарий JavaScript.

Листинг 4.4. Файл chapter4/Converter/toc. html

<HTML>

<!--

var bNewNumber = true;

function dec2hex(nDec)

{

var szHexTable="ABCDEF";

var szResult = "";

var szBuf="";

var nRem = 0;

var bNegative=false;

if(nDec < 0)

{

bNegative=true;

nDec = - nDec;

}

nTmp=nDec;

while(true)

{

nRem = nTmp % 16;

nTmp = nTmp / 16;

if(Math. floor(nTmp) < 16)

break;

szBuf=szHexTable. charAt(nRem);

szResult = szBuf. concat(szResult);

nTmp = Math. floor(nTmp);

}

szBuf=szHexTable. charAt(nRem);

szResult = szBuf. concat(szResult);

if(Math. floor(nTmp) != 0)

{

szBuf=szHexTable. charAt(Math. floor(nTmp));

szResult = szBuf. concat(szResult);

}

if(bNegative == true)

return ("-" + szResult);

else

return szResult;

}

function putNumber(btn, form)

{

var szOld = "";

var szNew = "";

if(bNewNumber)

{

parent. mainpage. document. forms[0].hexValue. value = "";

parent. mainpage. document. forms[0].decValue. value = "";

bNewNumber = false;

}

szOld = parent. mainpage. document. forms[0].decValue. value;

szNew = szOld. concat(btn. name);

nCurrent = eval(szNew);

parent. mainpage. document. forms[0].decValue. value = nCurrent;

}

function clearAll(form)

{

total = 0;

lastOperation = "+";

parent. mainpage. document. forms[0].hexValue. value = "0";

parent. mainpage. document. forms[0].decValue. value = "0";

bNewNumber = true;

}

function getResult(form)

{

parent. mainpage. document. forms[0].hexValue. value = dec2hex(parent. mainpage. document. forms[0].decValue. value);

bNewNumber = true;

}

// -->

</SCRIPT>

<FORM>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</FORM>

</BODY>

</HTML>

Сценарий нашего десятично-шестнадцатеричного преобразователя работает аналогично сценарию шестнадцатеричного калькулятора (за исключением, конечно, того, что преобразователь не выполняет никаких арифметических действий). Главное отличие заключается в том, что теперь поля для ввода и отображения чисел располагаются в другом документе HTML, загруженном в отдельный фрейм.

Для того чтобы проинициализировать поля hexValue и decValue, мы ссылаемся на форму, расположенную внутри фрейма mainpage:

parent. mainpage. document. forms[0].hexValue. value = "";

parent. mainpage. document. forms[0].decValue. value = "";

Здесь parent ссылается на объект, который является родительским по отношению к документу HTML, содержащему сценарий. В данном случае это окно, содержащее все наши фреймы.

Для чтения содержимого поля decValue применяется аналогичная техника:

szOld = parent. mainpage. document. forms[0].decValue. value;

Функция getResult, выполняющая десятично-шестнадцатеричное преобразование, получает исходное число из поля decValue и передает его функции dec2hex. Результат преобразования, выполненного этой функцией, записывается затем в поле hexValue:

function getResult(form)

{

parent. mainpage. document. forms[0].hexValue. value = dec2hex(parent. mainpage. document. forms[0].decValue. value);

bNewNumber = true;

}

Отображение нескольких документов HTML

На рис. 4.2 мы показали внешний вид содержимого нашего авторского компакт-диска, первый выпуск которого появился недавно в продаже.

Рис. 4.2. Авторский компакт-диск

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

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

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

При этом если нажать кнопку с надписью “Добро пожаловать”, в заголовке появится наш логотип, показанный на рис. 4.2. Если же нажать кнопку “Книги” или “Статьи”, заголовок будет выглядеть так, как это показано на рис. 4.3 и 4.4, соответственно.

Рис. 4.3. Просмотр информации о книгах

Рис. 4.4. Просмотр информации о статьях

В листинге 4.5 мы показали исходный текст файла описания фреймов.

Листинг 4.5. Файл chapter4/ourCD/index. html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Авторский диск Александра Фролова и Григория Фролова</TITLE>

</HEAD>

</FRAMESET>

</BODY>

</NOFRAME>

</FRAMESET>

</HTML>

Так же как и в предыдущем примере, здесь описаны три фрейма.

Документ заголовка, который отображается сразу после загрузки фрейма, а также после того как пользователь нажмет кнопку “Добро пожаловать”, показан в листинге 4.6.

Листинг 4.6. Файл chapter4/ourCD/title. html

<HTML>

<HEAD>

</HEAD>

<P>

<TR>

</TD></TR>

</TABLE>

<P>

</BODY>

</HTML>

Файл main. html представлен в листинге 4.7 (в сокращенном виде). Он не имеет никаких интересных особенностей.

Листинг 4.7. Файл chapter4/ourCD/main. html

<HTML>

<HEAD>

<TITLE>Untitled</TITLE>

</HEAD>

<H2>Добро пожаловать!</H2>

<P>

<P>

Вы приобрели первый выпуск авторского компакт-диска технических писателей Александра Фролова и Григория Фролова.

. . .

<P>

<CENTER><A HREF="copyrihgt. htm" ><I><FONT SIZE=2>© Александр Фролов, Григорий Фролов, 1997 </FONT></I></A></CENTER>

</BODY>

</HTML>

Гораздо важней для нас файл toc. html. В этом файле находятся функции сценария JavaScript и ссылки на другие документы HTML. Этот файл с несущественными сокращениями показан в листинге 4.8.

Листинг 4.8. Файл chapter4/ourCD/toc. html

<HTML>

<!--

function loadPage(szNewURL, szTitle)

{

parent. mainpage. window. location. href=szNewURL;

parent. title. window. location. href=szTitle;

}

// -->

</SCRIPT>

<P>

<BR>

<BR>

<BR>

. . .

<P>

</BODY>

</HTML>

Функция loadPage загружает в фреймы mainpage и title документы HTML, адреса URL которых передаются ей через параметры. Для загрузки мы устанавливаем свойство location. href для окна соответствующего фрейма:

parent. mainpage. window. location. href=szNewURL;

parent. title. window. location. href=szTitle;

Для вызова функции loadPage мы использовали следующую конструкцию:

Здесь в параметре HREF оператора ссылки <A> после ключевого слова javascript мы расположили строку вызова функции. Обратите внимание на использование одинарных и двойных кавычек. Так как в сценариях JavaScript вложение одинаковых кавычек недопустимо, для строк, передаваемых функции в качестве параметров, мы применили одинарные кавычки. Значение параметра HREF выделено при этом двойными кавычками.

5 растровые изображения

Растровые изображения в виде файлов формата GIF и JPEG широко применяются в документах HTML, так как с их помощью можно значительно улучшить внешний вид страниц серверов Web.

К сожалению, возможности HTML не позволяют добиться достаточно сложных видеоэффектов без применения дополнительных средств, таких как аплеты Java, компоненты ActiveX и сценарии JavaScript. Фактически кроме статической графики вы можете использовать только анимационные изображения, построенные с применением многосекционных файлов GIF, и сегментированные графические изображения. Последние нужны для создания ссылок.

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

Растровое изображение как объект

Для того чтобы встроить растровое изображение в документ HTML, необходимо использовать оператор <IMG>. Общий вид этого оператора показан ниже:

<IMG SRC="Адрес_файла_изображения"

NAME="Имя_изображения"

. . .

WIDTH="Ширина"

HEIGHT="Высота">

Здесь мы указали только три параметра. Полный список параметров оператора <IMG> с кратким их описанием вы найдете ниже:

Параметр	Описание
SRC	Адрес URL файла с растровым графическим изображением
NAME	Имя объекта, соответствующего растровому графическому изображению. Это имя может быть использовано для ссылки на объект в сценариях JavaScript
ALT	Текстовая строка, которая отображается в тех случаях, когда браузер не может показывать графические изображения или когда такая возможность отключена
ALIGN	Выравнивание текста относительно графического изображения LEFT по левой границе; RIGHT по правой границе; TOP по верхней границе; MIDDLE по центру изображения; BOTTOM по нижней границе; TEXTTOP выравнивание по верхней границе относительно самых высоких символов в текстовой строке; ABSMIDDLE выравнивание середины текстовой строки относительно середины изображения; BASELINE выравнивание нижней рамки изображения относительно базовой линии текстовой строки; ABSBOTTOM выравнивание нижней границы изображения относительно нижней границы текущей строки
HEIGHT	Высота изображения в пикселах
WIDTH	Ширина изображения в пикселах
BORDER	Ширина рамки вокруг изображения в пикселах (используется только браузером Netscape Navigator)
HSPACE	Ширина свободного пространства в пикселах, отделяющее изображение от текста по горизонтали
VSPACE	Ширина свободного пространства в пикселах, отделяющее изображение от текста по вертикали
USEMAP	Адрес URL файла, содержащего так называемую карту изображения. Эта карта используется для сегментированной графики
ISMAP	Этот параметр указывает, что данное изображение является сегментированным

Параметры оператора <IMG> определяют адрес файла с изображением, выравнивание текста, расположенного возле изображения и так далее. С помощью параметров HEIGHT и WIDTH вы можете выполнять масштабирование графических изображений. Значение этих параметров можно указывать в процентах от ширины окна просмотра.

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

Применение сегментированной графики мы подробно рассмотрели в 29 томе “Библиотеки системного программиста.

Если в документе HTML размещено несколько растровых изображений, то вы можете адресовать соответствующие объекты как элементы массива document. images. Например, первое изображение адресуется следующим образом: document. images[0]. Однако в некоторых случаях удобнее пользоваться именами изображений, определенными параметром NAME оператора <IMG>.

Объект-изображение имеет свойство src, соответствующее параметру SRC оператора <IMG>. Адресуясь к этому свойству, вы можете не только определять текущий адрес URL изображения, но и задавать новый. Этим мы воспользуемся в следующем разделе нашей книги.

Динамическая замена растровых изображений

Одна из наиболее интересных возможностей, доступных при использовании сценариев JavaScript, заключается в динамической замене графических изображений, указанных в параметре SRC оператора <IMG>.

Например, в следующей строке сценария JavaScript мы указываем, что изображение с именем btn1 должно иметь адрес URL pic/aurap. gif:

document. btn1.src=”pic/aurap. gif”

Здесь мы указали неполный адрес URL, однако можно указывать и полный адрес.

Что произойдет при выполнении приведенной выше строки сценария?

Область, выделенная в окне браузера для растрового изображения btn1 будет заполнена изображением pic/aurap. gif. Если до этого там было другое изображение, оно будет заменено на новое.

Как можно воспользоваться динамической заменой растровых изображений?

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

Во-вторых, с помощью замены растровых изображений в сценарии JavaScript можно создавать анимационные изображения.

Рассмотрим примеры сценариев, решающих указанные задачи.

Изменение внешнего вида графических ссылок

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

Рис. 5.1. Кнопка с надписью АУРАМЕДИА изменила свой цвет

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

Обратите внимание на исходный текст документа HTML, показанный в листинге 5.1.

Листинг 5.1. Файл chapter5/grbutton/grbutton. html

<HTML>

<P>

<A HREF="mainaur. htm"

onMouseOver="document. btn1.src='pic/aurap. gif'"

onMouseOut="document. btn1.src='pic/aura. gif'"><IMG

SRC="pic/aura. gif" NAME = "btn1" BORDER=0 ALT="Журнал Аурамедиа"</A>

<BR>

<A HREF="soft/default. htm"

onMouseOver="document. btn2.src='pic/softcatp. gif'"

onMouseOut="document. btn2.src='pic/softcat. gif'"><IMG

SRC="pic/softcat. gif" NAME = "btn2" BORDER=0 ALT="Soft-каталог"</A>

</LEFT>

</FONT>

</BODY>

</HTML>

Для создания ссылок мы воспользовались оператором <A>. Этот оператор использован здесь совместно с оператором <IMG>, поэтому ссылка отображается как графическое изображение.

Для оператора ссылки <A> мы определили обработчики событий onMouseOver и onMouseOut:

onMouseOver="document. btn1.src='pic/aurap. gif'"

onMouseOut="document. btn1.src='pic/aura. gif'"

Когда курсор мыши оказывается над ссылкой (то есть над графическим изображением ссылки), управление получает обработчик события onMouseOver. Этот обработчик загружает изображение pic/aurap. gif, где слово АУРАМЕДИА написано красным цветом (для второй кнопки в аналогичной ситуации загружается изображение pic/softcatp. gif).

После того как пользователь убирает курсор мыши с поверхности кнопки, в дело включается обработчик события onMouseOut. Он восстанавливает исходное изображение, указанное в параметре SRC оператора <IMG>.

Создание анимационных изображений

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

На рис. 5.2 мы показали документ HTML, в котором используется такая анимация.

Рис. 5.2. Анимация с помощью сценария JavaScript

В окне браузера последовательно отображаются кадры анимационного изображения (рис. 5.3), причем сначала в прямой, а затем - в обратной последовательности. Это выглядит так, как будто слово Noise периодически тонет в цветном шуме и затем проявляется вновь. Заметим, что похожий эффект мы уже получали совершенно другими средствами в аплете Java, исходный текст которого был опубликован в журнале “Мир ПК” №1 за 1998 год.

Рис. 5.3. Изображения отдельных кадров анимационной последовательности

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

Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 11 12 13 14

Семь вариаций на тему “Hello, world!” (стр. 10 )

Партнерка на США и Канаду по недвижимости, выплаты в крипто

Взаимодействие между фреймами

Десятично-шестнадцатеричный преобразователь

Отображение нескольких документов HTML

5 растровые изображения

Растровое изображение как объект

Динамическая замена растровых изображений

Изменение внешнего вида графических ссылок

Создание анимационных изображений

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

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

Техника

Общество

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

Мир

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