Файловый архив студентов. Файловый архив студентов.
1312 вуза, 5254 предмета.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Ивано-Франковский национальный технический университет нефти и газа
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
Основи мови JavaScript.doc
Скачиваний:
0
Добавлен:
01.07.2025
Размер:
1.04 Mб
Скачать
☆
►Содержание►

4.2. Взаємодія між фреймами

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

4.2.1. Десятично-шестнадцатеричный перетворювач

Десятично-шестнадцатеричный перетворювач виконаний на базі документів HTML із фреймами і сценарієм JavaScript.

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

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

Вихідний текст файла опису фреймов поданий у листинге 4.1.

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

<HTML>

<HEAD>

<ТIТLЕ>Десятично-шестнадцатеричный перетворювач</ТIТLЕ>

</HEAD>

<FRAMESET ROWS="85,*" FRAMEBORDER=1>

<FRAME SCROLLING="no" NAME="title" SRC="title.html" MARGINHEIGHT="1">

<FRAMESET COLS="180,*" FRAMEBORDER=1>

<FRAME SCROLLING="auto" NAME="toc" SRC="toc.html">

<FRAME SCROLLING="auto" NAME="mainpage" SRC="main.html">

</FRAMESET>

<NOFRAME>

<BODY BGCOLOR="#FFFFFF"> </BODY>

</NOFRAME>

</FRAMESET>

</HTML>

Сценарій будет працювати з фреймами toc і mainpage, розташованими відповідно у файлах з іменами toc. html і main. html. У файлі title. html розташовується заголовок (листинг 4.2).

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

<HTML>

<HEAD>

<ПОЗНАЧКА HTTP-EQUIV="Content-Type" CONTENT="text/html ;

charset=windows-1251">

</HEAD>

<BODY BGCOLOR="#ffffff">

<TABLE>

<TR> <TD> <Н2>Десятично-шестнадцатеричный перетворювач</H2> </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Вихідний текст документа, що містить форму з полями Dec і Hex, поданий у листинге 4.3.

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

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;

charset=windows-1251">

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<FORM NAME="Sel">

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

<BODY BGCOLOR="#BOFFD8">

<SCRIPT LANGUAGE="JavaScript">

<!--

var bNewNumber = true;

function dec2hex(nDec)

{

var szHexTable="0123456789ABCDEF";

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);

e1se

return szResult;

}

function putNumber(bin, 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>

<TABLE BORDER=2 BORDERCOLOR="Black" BGCOLOR="Yellow">

<TR>

<TD ALIGN=CENTER><INPUT TYPE="button" NAME="5" VALUE=" 5 " onClick="putNumber(this, this.form);"></TD>

<TD ALIGN=CENTER><INPUT TYPE="button" NAME="6" VALUE=" б " onClick="putNumber(this, this.form);"></TD>

<TD ALIGN=CENTER><INPUT TYPE="button" NAME="7" VALUE=" 7 " onClick="putNumber (this, this.form);"></TD>

<TD ALIGN=CENTER><INPUT TYPE="button" NAME="8" VALUE=" 8 " onClick="putNunber (this, this.form);"></TD>

<TD ALIGN=CENTER><INPUT TYPE="button" NAME="9" VALUE=" 9 " onClick="putNumber (this, this.form);"></TD> </TR> <TR>

<TD ALIGN=CENTER><INPUT TYPE="button" NAME="0" VALUE=" 0 " onClick="putNumber(this,this.form);"></TD>

<TD ALIGN=CENTER><INPUT TYPE="button" NAME="1" VALUE=" 1 " onClick="putNumber (this, this.form);"></TD>

<TD ALIGN=CENTER><INPUT TYPE="button" NAME="2" VALUE=" 2 " onClick="putNumber (this, this. form);"></TD>

<TD ALIGN=CENTER><INPUT TYPE="button" NAME="3" VALUE=" 3 " onClick="putNumber (this, this.form);"></TD>

<TD ALIGN=CENTER><NPUT TYPE="button" NAME="4" VALUE=" 4 " onClick="putNumber (this, this.form);"></TD>

</TR>

<TR>

<TD ALIGN=CENTER><INPUT TYPE="button" NAME="C" VALUE=" С "

onClick="clearAll (this. form);"></TD>

<TD COLSPAN=4 ALIGN=CENTER><INPUT TYPE="button" NAME="=" VALUE=" to Hex " onClick="getResult (this.form);"></TD>

</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, що виконує десятично-шестнадцатеричное перетворення, одержує вихідне число з нуля dccValue і передасть його функції dec2hex . Результат перетворення, виконаного цією функцією, записується потім у поле hexValue:

function getResult(form)

{

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

bNewNumber = true;

}

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности