КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Листинг 3.10. Файл chapter3/clock/clock. html
 |
<HTML>
<HEAD>
<TITLЕ>Електронні часи</TITLE>
<script language="JavaScript">
<!--
nTimer = 0;
var szCurrentTime = "";
var szCurrentDate = "",
var szTimeZone = "",
var szGMT = "";
var szLocal = "";
function updateClock()
{
var dtDate = new Date();
var nHours = dtDate.getHours();
var nMinutes = dtDate.getMinutes();
var nSeconds = dtDate getSeconds();
szCurrentTime = nHours + ":" + nMinutes + ":" + nSeconds;
szCurrentDate = dtDate.getDate () + "." + dtDate.getMonth() + "." + dtDate.getYear();
szTimeZone = dtDate.getTimezoneOffset()/60;
szGMT = dtDate.toGMTString();
szLocal = dtDate.toLocaleString();
Clock.time.value = szCurrentTime;
Clock.dat.value = szCurrentDate;
Clock.timeZone.value = szTimeZone;
Clock.gmt.value = szGMT;
Clock.loc.value = szLocal;
nTimer = setTimeout("updateClock()", 1000);
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<Н1>Електронні часи</Н1>
<FORM NAME="Clock">
<TABLE>
<ТR><ТD><У>Дата </B></TD><TD><INPUT TYPE="text"
NAME="dat" SIZE="20"></TD>
</TR>
<ТR><TD><У>Час </B></TD><TD><INPUT TYPE="text"
NAME="time" SIZE="20"></TD>
</TR>
<ТR><ТD><У>Зсув годинного пояса: </B></TD><TR><INPUT TYPE="text"
NAME="timeZone" SIZE="20"></TD>
</TR>
<ТR><ТD><B>Дата GMT: </B></TD><TD><INPUT TYPE="text"
NAME="gmt" SIZE="30"></TD>
</TR>
<ТR><ТD><У>Локальна дата: </b></td><td><input TYPE="text"
NAME="loc" SIZE="30" ></TD>
</TR>
</TABLE>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
updateClock();
//-->
</SCRIPT>
</BODY>
</HTML>
Часи запускаются відразу після завантаження документа HTML у вікно браузера. При цьому керування одержує функція updateClock. Ця функція визначена в заголовку, а її виклик знаходиться наприкінці області тіла документа HTML.
Отримавши керування, функція updateClock створює об'єкт Data для поточної дати, встановленої в комп'ютері:
var dtDate = new Date();
Потім функція визначає три компоненти часу (часи, хвилини і секунди), викликаючи для цього методи getHours, getMinutcs і getSeconds. визначені в класі Date:
|
|
|
var nHours = dtDate.getHours();
var nMinutes = dtDate. getMinutes();
var nSeconds = dtGate. getSeconds();
Отримані в такий спосіб значення комбінуються в текстовому рядку szCurrеntTime:
Надалі час буде записано функцією updalеClock у поле time форми Clock, як це показано нижче:
Рядок поточної дати утворюється в результаті виклику методів getDate, getMonth і getYear:
szCurrentDate = dtDate.getDate() + "." +
dtDate. getMonth() + ". " + dtDate. getYear();
Цей рядок записується в поле dat форми Clock:
Clock. dat. value = szCurrentDate;
Для обчислення зсуву годинного пояса необхідно скористатися методом getTimezoneOffset, що повертає значення в хвилинах:
getTimeZone = dtDate. getTimezoneOffset() / 60;
Для того щоб обчислити зсув у часах, необхідно розділити результат, отриманий від методу getTimezoneOffset, на 60. Обчислений зсув годинного пояса записується в поле timeZone форми Clock:
Clock. timeZone. value = szTimeZone;
Для одержання часу за Гринвічем скористаємося методом toGMTString:
szGMT = dtDate. toGMTString();
Отримане значення буде записано в поле gmt форми Clock:
Clock. gmt. value = szGMT;
І нарешті, локальну дату і час ми визначаємо за допомогою методу toLocaleString:
szLocal = dtDate. toLocaleString();
Результат записується в поле 1ос форми Clock:
Clock. loc. value = szLocal;
Періодичне виконання функції updateClock досягається за допомогою методу setTimeout:
nTimer = setTimeout("updateClock()", 1000);
Тут зазначено, що період відновлення показань часів повинний бути дорівнює 1 с.
4. ФРЕЙМЫ
Для того, щоб працювати відразу з декількома документами HTML, можна надати користувачу многооконный інтерфейс, реалізований за допомогою фреймов. Докладно про фреймах рассказывалось у першій частині, що називається "Програмування в Internet. Частина 1. Основи мови HTML".
4.1. Файл опису фреймов
Для того щоб об'єднати декілька документів HTML за допомогою фреймов, потрібно підготувати спеціальний документ HTML, у якому знаходиться опис параметрів фреймов, таких, як розмір і розташування.
|
|
|
Особливість такого документа - відсутність на своєму звичайному місці області тіла документа, виділеного операторами <BODY> і </BODY>. Замість цього у файлі описи фреймов розташовуються оператори <FRAMESET>, </FRAMESET>, <NOFRAME> і </NOFRAME>, як це показано нижче:
<HTML>
<HEAD>
…
</HEAD>
<FRAMESET
ROWS="Висота_рядки"
COLS="Ширина колонки"
onLoad="06pa6oтчик_події"
onUnload="Оброблювач_події">
<FRAME SRC="Aдpec_URL" NAME="Ім'я_фpeймa">
...
<FRAME SRC="Aдpec_URL" NАMЕ="Ім'я_фрейма">
<NOFRAME>
<B0DY>
...
</B0DY>
</NOFRAME>
</FRAMESET>
</HTML>
Параметри ROWS і COLS оператора <FRAMESLT> визначають розміри фреймов і задаються у виді списку значень, розділених запятой.
Можна визначити оброблювачі подій onLoad і onUnIoad, що одержують керування відповідно при завантаженні вмісту в головне вікно фрейма і при заміні текущею документа HTML у цьому вікні на інший. Фактично ці оброблювачі ставляться не до фреймам, а до вікна, де ці фреймы відображаються.
Для тих браузеров, що не можуть працювати з фреймами, необхідно підготувати документ HTML, розташувавши його тіло між операторами <NOFRAME> і </NOFRAME>. У цьому документі має сенс розмістити повідомлення про те, що для перегляду даної сторінки Web необхідно застосовувати більш сучасний браузер.
4.1.1. Параметри оператора <FRAMESET>
Роздивимося докладніше параметри оператора <FRAMESET>, призначеного для визначення набору фреймов:
Парамеmp Опис
COLS Ширина колонки у відсотках, пикселях або відносний розмір
ROWS Висота рядка у відсотках, пикселях або відносний розмір
FRAMEBORDER Якщо значення цього параметра дорівнює одиниці, фреймы будуть мати тривимірну рамку, ширина якої задається в пикселях. У тому випадку, коли зазначене значення 0, рамка не створюється
BORDER Використовується тільки браузером Netscape Navigator. Задає товщину рамки фрейма в пикселях
FRAMESPACING С поміччю цього параметра можна задати додаткову відстань між фреймами в пикселях
Параметри COLS і ROWS потрібні в тому випадку, коли фреймы, визначені в наборі, розташовуються у виді таблиці. Перший із цих параметрів указує ширину колонки, а другий - висоту рядка. Якщо фреймы розташовуються в однім стовпчику, параметр COLS указувати не треба. Аналогічно, якщо фреймы займають тільки один рядок, не потрібно вказувати параметр ROWS.
|
|
|
Можна задати значення для параметрів COLS і ROWS або в процентному відношенні, відповідно до ширини і висоти вікна браузера, або в пикселях. Якщо замість значення зазначений символ *, колонка або рядок займає всю оставшуюся частину вікна.
Наприклад, нижче зазначено, що висота первою фрейма дорівнює 90 пикселям, а другий фрейм займає всю нижню частину вікна браузера:
<FRAMESET ROWS="90, *" >
У такому прикладі два фрейма, розташовані поруч, займають відповідно 20 і 80 % ширини вікна браузера.
<FRAMESET COLS="20%,80%">
4.1.2. Параметри оператора <FRAME>
Між операторами <FRAMESET> і </FRAMESET> розташовуються оператори <FRAME>, що визначають параметри окремих фреймов. Це параметри SRC і NAME. Перший із цих параметрів задає адреса URL документа HTML, що буде завантажений у даний фрейм, а другий - ім'я фрейма, що можна використовувати в сценарії JavaScript для адресации об'єктів, розташованих у фрейме. Зауважимо, що адреса URL не повинна містити посилання на локальні мітки (anchor).
Оператор <FRAME> має такі параметри:
Параметр Опис
ALIGN Використовується тільки для "плаваючих фреймов" у браузере Microsoft Internet Explorer. Задає вирівнювання фрейма або тексту, розташованого поруч із фреймом. Цей параметр може приймати такі значення: LEFT, CENTER, RIGHT, TOP, BOTTOM
MARGINHEIGHT Розмір відступу по вертикалі від меж фрейма в пикселях
MARGINWIDTH Розмір відступу по горизонталі від меж фрейма в пикселях
FRAMEBORDER Якщо значення цього параметра дорівнює одиниці, фреймы будуть мати тривимірну рамку, ширина якої задається в пикселях. У тому випадку, коли зазначене значення ПРО, рамка не створюється
NAME Цей параметр задає ім'я фрейма, що використовується в операторі посилання <А> для вказівки, у який фрейм потрібно завантажити новий документ
NORESIZE Якщо зазначений цей параметр, користувач не зможе змінювати розміри фрейма, пересуваючи його межі мишею
|
|
|
SCROLLING Параметр SCROLLING визначає, потрібно чи створювати смуги перегляду для пакунки умісту фрейма. Для цього параметра можна вказувати такі значення:
YES - смуги перегляду створюються завжди;
NO - смуги перегляду не створюються;
AUTO - смуги перегляду створюються тільки при необхідності, коли документ HTML не поміщається цілком у вікні фрейма
SRC Адреса URL файла з документом HTML, що завантажується у вікно фрейма
4.2. Взаємодія між фреймами
За допомогою сценаріїв JavaScript ви можете наділити фреймы можливостями, недосяжними з застосуванням одного лише тільки мови розмітки гипертекста HTML. Наприклад, один із фреймов може містити посилання на документи, що при активізації цих посилань завантажуються у вікно іншого фрейма. Сценарій JavaScript дозволить завантажувати в такий спосіб не один документ, а одночасно декілька документів у різні фреймы. Приклад організації такої взаємодії ми роздивимося трохи пізніше, а зараз на конкретному прикладі розповімо про те, як можна передавати дані між об'єктами форм, розташованих у різних фреймах.
4.2.1. Десятично-шестнадцатеричный перетворювач
Десятично-шестнадцатеричный перетворювач виконаний на базі документів HTML із фреймами і сценарієм JavaScript.
Верхній фрейм використовується для розміщення заголовка. Клавіатура перетворювача, призначена для запровадження десяткових чисел і запуску процесу перетворення. знаходиться в лівому фрейме. Правий фрейм використовується для відображення вихідного десяткового числа в результат перетворення.
Можна уводити вихідне число не тільки за допомогою клавіатури, але і безпосередньо в поле Dec, розташоване в правому фрейме. Поле Hex заблокировано для запровадження за допомогою оброблювача події onFocus Аналогічний прийом використаний у шестнадцатеричном калькуляторі, вихідні тексти якого були приведені в попередній главі.
Вихідний текст файла опису фреймов поданий у листинге 4.1.
|
|
|
|
|
Дата добавления: 2014-11-29; Просмотров: 361; Нарушение авторских прав?; Мы поможем в написании вашей работы!