JavaScript

Зміст
1. , общие сведения Призначення та застосування JavaScript, загальні відомості
1.1 Вступ
1.2 Поняття об'єктної моделі стосовно до JavaScript
войства 1.2.1 C войства
1.2.2 Методи
1.2.3 Події
-странице 1.3 Розміщення коду на HTML-сторінці
-схема JavaScript 1.4 URL-схема JavaScript
1.5 Обробники подій
1.6 Підстановки
- принудительный вызов интерпретатора) 1.7 Вставка (контейнер SCRIPT - примусовий виклик інтерпретатора)
-документа 1.7.1 Розміщення коду всередині HTML-документа
-разметки на стороне браузера 1.7.2 Умовна генерація HTML-розмітки на стороні браузера
1.8 Ієрархія класів
2 Програмуємо властивості вікна браузера
2.1 Поле статусу
2.2 Програмуємо status
2.3 Програмуємо defaultStatus
2.4 Поле location
2.4.1 Властивості
2.4.2 Методи
) 2.4.3 Історія відвідувань (History)
) 2.4.4 Тип браузера (об'єкт Navigator)
2.5 Управління вікнами
2.5.1 window.alert ()
2.5.2 window.confirm ()
2.5.3 window.prompt ()
2.5.4 window.open ()
2.5.5 window.close ()
2.5.6 window.focus ()
2.5.7 window.setTimeout ()
2.5.8 window.clearTimeout
2.6 Фрейми (Frames)
2.6.1 Ієрархія фреймів
2.6.2 Іменування фреймів
2.6.3 Передача фокуса у фрейм
1. Призначення та застосування JavaScript, загальні відомості
1.1 Вступ
Гіпертекстова інформаційна система складається з безлічі інформаційних вузлів, безлічі гіпертекстових зв'язків, визначених на цих вузлах і інструментах маніпулювання вузлами і зв'язками. Технологія World Wide Web - це технологія ведення гіпертекстових розподілених систем в Internet, і, отже, вона повинна відповідати загальним визначенням таких систем. Це означає, що всі перераховані вище компоненти гіпертекстової системи повинні бути і в Web.
Web, як гіпертекстову систему, можна розглядати з двох точок зору. По-перше, як сукупність відображуваних сторінок, пов'язаних гіпертекстовими переходами (посиланнями - контейнер ANCHOR). По-друге, як безліч елементарних інформаційних об'єктів, що становлять відображаються сторінки (текст, графіка, мобільний код і т.п.). В останньому випадку безліч гіпертекстових переходів сторінки - це такий же інформаційний фрагмент, як і вбудована в текст картинка.
При другому підході гіпертекстова мережа визначається на безлічі елементарних інформаційних об'єктів самими HTML-сторінками, які і відіграють роль гіпертекстових зв'язків. Цей підхід більш продуктивний з точки зору побудови відображуваних сторінок "на льоту" з готових компонентів.
При генерації сторінок в Web виникає дилема, пов'язана з архітектурою "клієнт-сервер". Сторінки можна генерувати як на стороні клієнта, так і на стороні сервера. У 1995 році фахівці компанії Netscape створили механізм управління сторінками на клієнтській стороні, розробивши мову програмування JavaScript.
Таким чином, JavaScript - це мова керування сценаріями перегляду гіпертекстових сторінок Web на стороні клієнта. Якщо бути більш точним, то JavaScript - це не лише мова програмування на стороні клієнта. Liveware, прабатько JavaScript, є засобом підстановок на стороні сервера Netscape. Однак найбільшу популярність JavaScript забезпечило програмування на стороні клієнта.
Основна ідея JavaScript полягає в можливості зміни значень атрибутів HTML-контейнерів і властивостей середовища відображення в процесі перегляду HTML-сторінки користувачем. При цьому перезавантаження сторінки не відбувається.
На практиці це виражається в тому, що можна, наприклад, змінити колір фону сторінки або інтегровану в документ картинку, відкрити нове вікно або видати попередження.
Назва "JavaScript" є власністю Netscape. Реалізація мови, здійснена розробниками Microsoft, офіційно називається Jscript. Версії JScript сумісні (якщо бути зовсім точним, то не до кінця) з відповідними версіями JavaScript, тобто JavaScript є підмножиною мови JScript.
стандартизован ECMA ( European Computer Manufacturers Association - Ассоциация европейских производителей компьютеров). JavaScript стандартизований ECMA (European Computer Manufacturers Association - Асоціація європейських виробників комп'ютерів). Відповідні стандарти носять назви ECMA-262 і ISO-16262. Цими стандартами визначається мова ECMAScript, який приблизно еквівалентний JavaScript 1.1. Відзначимо, що не всі реалізації JavaScript на сьогодні повністю відповідають стандарту ECMA. У рамках даного курсу ми у всіх випадках будемо використовувати назву JavaScript.
1.2 Поняття об'єктної моделі стосовно до JavaScript
Для створення механізму управління сторінками на клієнтській стороні було запропоновано використовувати об'єктну модель документа. Суть моделі в тому, що кожен HTML-контейнер - це об'єкт, який характеризується трійкою:
властивості;
методи;
події.
Об'єктну модель можна представити як спосіб зв'язку між сторінками і браузером. Об'єктна модель - це представлення об'єктів, методів, властивостей та подій, які присутні і відбуваються в програмному забезпеченні браузера, у вигляді, зручному для роботи з ними коду HTML і вихідного тексту сценарію на сторінці. Ми можемо з її допомогою повідомляти наші побажання браузеру і далі - відвідувачеві сторінки. Браузер виконає наші команди і відповідно змінить сторінку на екрані.
Об'єкти з однаковим набором властивостей, методів і подій об'єднуються в класи однотипних об'єктів. Класи - це описи можливих об'єктів. Самі об'єкти з'являються тільки після завантаження документа браузером або як результат роботи програми. Про це треба завжди пам'ятати, щоб не звернутися до об'єкта, якого немає.
1.2.1 Властивості
Багато HTML-контейнери мають атрибути. Наприклад, контейнер якоря <A ...> ...</ A> має атрибут HREF, який перетворює його в гіпертекстове посилання:
<A HREF=intuit.htm> intuit </ A>
Якщо розглядати контейнер якоря <A ...> ...</ A> як об'єкт, то атрибут HREF буде задавати властивість об'єкта "якір". Програміст може змінити значення атрибута і, отже, властивість об'єкту:
document.links [0]. href = "intuit.htm";
Не у всіх атрибутів можна змінювати значення. Наприклад, висота і ширина графічної картинки визначаються по першій завантаженої в момент відображення сторінки картинці. Усі наступні картинки, які замінюють початкову, масштабуються до неї. Справедливості заради слід зауважити, що в Microsoft Internet Explorer розмір картинки може змінюватися.
Для спільності картини властивостями в JavaScript наділені об'єкти, які не мають аналогів у HTML-розмітки. Наприклад, середовище виконання, звана об'єктом Navigator, або вікно браузера, яке є взагалі найстаршим об'єктом JavaScript.
1.2.2 Методи
У термінології JavaScript методи об'єкта визначають функції зміни його властивостей. Наприклад, з об'єктом "документ" пов'язані методи open (), write (), close (). Ці методи дозволяють згенерувати або змінити зміст документа. Наведемо простий приклад:
function hello ()
{
id = window.open (""," example "," width = 400, height = 150 ");
id.focus (); id.document.open ();
id.document.write ("<H1> Привіт! </ H1>");
id.document.write ("<HR> <FORM>");
id.document.write ("<INPUT TYPE = button VALUE = 'Закрити вікно'");
id.document.write ("onClick = 'window.opener.focus ();
window.close ();'>");
id.document.close ();
}
У цьому прикладі метод open () відкриває потік запису в документ, метод write () здійснює цей запис, метод close () закриває потік запису в документ. Все відбувається так само, як і при записі в звичайний файл. Якщо у вікна є поле статусу (звичайно в ньому відображається рівень завантаження документа), то при незакритих потоці запису в документ у ньому буде "кидатися" прямокутник продовження запису, як це відбувається при завантаженні документа.
1.2.3 Події
Крім методів і властивостей об'єкти характеризуються подіями. Власне, суть програмування на JavaScript полягає в написанні обробників цих подій. Наприклад, з об'єктом типу button (контейнер INPUT типу button - "Кнопка") може відбуватися подія click, тобто користувач може натиснути на кнопку. Для цього атрибути контейнера INPUT розширені атрибутом обробки події click - onClick. Як значення цього атрибуту вказується програма обробки події, яку повинен написати на JavaScript автор HTML-документа:
<INPUT TYPE = button VALUE = "Натиснути" onClick =
. alert ('Пожалуйста, нажмите еще раз');"> "Window. Alert ('Будь ласка, натисніть ще раз');">
Обробники подій вказуються в тих контейнерах, з якими ці події пов'язані. Наприклад, контейнер BODY визначає властивості всього документа, тому обробник події завершення завантаження всього документа вказується в цьому контейнері як значення атрибуту onLoad.
Примітка. Строго кажучи, кожен браузер, будь то Internet Explorer, Netscape Navigator або Opera, має свою об'єктну модель. Об'єктні моделі різних браузерів (і навіть різні версії одного) відрізняються один від одного, але мають принципово однакову структуру. Тому немає сенсу зупинятися на кожній з них окремо. Ми будемо розглядати загальний підхід стосовно до всіх браузерам, іноді, звичайно, загострюючи увагу на відмінностях між ними.
1.3 Розміщення коду на HTML-сторінці
Головне питання будь-якого початківця програміста: "Як оформити програму і виконати її?". Спробуємо на нього відповісти якомога простіше, але при цьому не забуваючи про всі способи застосування JavaScript-коду.
По-перше, виконує JavaScript-код браузер. У нього вбудований інтерпретатор JavaScript. Отже, виконання програми залежить від того, коли і як цей інтерпретатор отримує управління. Це, у свою чергу, залежить від функціонального застосування коду. У загальному випадку можна виділити чотири способи функціонального використання JavaScript:
гіпертекстове посилання (схема URL);
обробник події (handler);
підстановка (entity) (в Microsoft Internet Explorer реалізована у версіях від 5.X і вище);
вставка (контейнер SCRIPT).
У підручниках з JavaScript опис застосування JavaScript зазвичай починають з контейнера SCRIPT. Але з точки зору програмування це не зовсім правильно, оскільки такий порядок не дає відповіді на ключове питання: як JavaScript-код отримує управління? Тобто яким чином викликається і виконується програма, написана на JavaScript і розміщена в HTML-документі.
У залежності від професії автора HTML-сторінки і рівня його знайомства з основами програмування можливі кілька варіантів початку освоєння JavaScript. Якщо ви програміст класичного спрямування (С, Fortran, Pascal і т.п.), то простіше за все починати з програмування всередині тіла документа, якщо ви звикли програмувати під Windows, то в цьому випадку починайте з програмування обробників подій, якщо ви маєте лише досвід HTML-розмітки або давно не писали програм, то тоді краще почати з програмування гіпертекстових переходів.
1.4 URL-схема JavaScript
Схема URL (Uniform Resource Locator) - це один з основних елементів Web-технології. Кожен інформаційний ресурс в Web має свій унікальний URL. URL вказують в атрибуті HREF контейнера A, в атрібте SRC контейнера IMG, в атрибуті ACTION контейнера FORM і т.п. Всі URL поділяються на схеми доступу, які залежать від протоколу доступу до ресурсу, наприклад, для доступу до FTP-архіву застосовується схема ftp, для доступу до Gopher-архіву - схема gopher, для відправки електронної пошти - схема smtp. Тип схеми визначається за першим компоненту URL: http://intuit.ru/directory/page.html. У даному випадку URL починається з http - це і є визначення схеми доступу (схема http).
Основним завданням мови програмування гіпертекстової системи є програмування гіпертекстових переходів. Це означає, що при виборі тієї чи іншої гіпертекстового посилання викликається програма реалізації гіпертекстового переходу. У Web-технології стандартною програмою є програма завантаження сторінки. JavaScript дозволяє поміняти стандартну програму на програму користувача. Для того щоб відрізнити стандартний перехід по протоколу HTTP від переходу, програмованого на JavaScript, розробники мови ввели нову схему URL - JavaScript:
<A HREF="JavaScript:JavaScript_код"> ...</ A>
<IMG SRC="JavaScript:JavaScript_код">
У даному випадку текст "JavaScript_код" позначає програми-обробники на JavaScript, які викликаються при виборі гіпертекстового посилання в першому випадку і при завантаженні зображення - у другому. Наприклад, при натисканні на гіпертекстове посилання Увага! Можна отримати вікно попередження:
<A HREF="JavaScript:alert('Вніманіе!!!');"> Увага !!!</ A>
Рис. 1.1.
А при натисканні на кнопку типу submit у формі можна заповнити текстове поле цієї ж форми:
<FORM NAME = f METHOD = post
ACTION = "JavaScript: window.document.fiVALUE =
'Натиснули кнопку Click'; void (0); ">
<TABLE BORDER=0>
<TR>
<TD> <INPUT NAME=i> </ TD>
<TD> <INPUT TYPE=submit VALUE=Click> </ TD>
<TD> <INPUT TYPE=reset VALUE=Reset> </ TD>
> </ TABLE>
> </ FORM>
У URL можна розміщувати складні програми і виклики функцій. Варто тільки пам'ятати, що схема JavaScript працює не у всіх браузерах, а тільки у версіях Netscape Navigator і Internet Explorer, починаючи з четвертої.
Таким чином, при програмуванні гіпертекстового переходу інтерпретатор отримує управління після того, як користувач "клікнув" через гіпертекстове посилання.
1.5 Обробники подій
Такі програми, як обробники подій (handler), вказуються в атрибутах контейнерів, з якими ці події пов'язані. Наприклад, при натисненні на кнопку відбувається подія click:
>< INPUT TYPE = button VALUE ="Кнопка" on с lick = <FORM> <INPUT TYPE = button VALUE = "Кнопка" on з lick =
. alert (' intuit ');"></ FORM > "Window. Alert ('intuit');"></ FORM>
1.6 Підстановки
Підстановка (entity) зустрічається на Web-сторінках досить рідко. Тим не менш це досить потужний інструмент генерації HTML-сторінки на стороні браузера. Підстановки використовуються як значення атрибутів HTML-контейнерів. Наприклад, як значення за замовчуванням поля форми, що визначає домашню сторінку користувача, буде вказана URL поточної сторінки:
> <SCRIPT>
() function l ()
{
str = window.location.href;
return (str.length);
}
</ SCRIPT>
<FORM> <INPUT VALUE="&{window.location.href};" SIZE="&{l()};">
</ FORM>
<SCRIPT>
<! - Це коментар ... JavaScript-код ...// ->
> </ SCRIPT>
> <BODY>
... Тіло документа ...
> </ BODY>
> </ HTML>
HTML-коментарі тут вставлені для захисту від інтерпретації даного фрагмента сторінки HTML-парсер в старих браузерах (у високого начальства ще зустрічаються). У свою чергу, кінець HTML-коментаря захищений від інтерпретації JavaScript-інтерпретатором (/ / на початку рядка). Крім того, як значення атрибуту LANGUAGE у тега початку контейнера вказано значення "JavaScript". VBScript, який є альтернативою JavaScript - це скоріше екзотика, ніж загальноприйнята практика, тому даний атрибут можна опустити - значення "JavaScript" приймається за замовчуванням.
Очевидно, що розміщувати в заголовку документа генерацію тексту сторінки безглуздо - він не буде відображений браузером. Тому в заголовок поміщають декларації загальних змінних і функцій, які будуть потім використовуватися в тілі документа. При цьому браузер Netscape Navigator більш вимогливий, ніж Internet Explorer. Якщо не розмістити опис функції в заголовку, то при її виклику в тілі документа можна отримати повідомлення про те, що дана функція не визначена. Наведемо приклад розміщення і використання функції:
> <HTML>
> <HEAD>
> <SCRIPT>
_ scroll () function time _ scroll ()
{
var d = new Date ();
window.status = d.getHours () +":"+ d.getMinutes () +":"+
d.getSeconds ();
setTimeout ('time_scroll ();', 500);
}
</ SCRIPT>
</ HEAD>
<BODY OnLoad=time_scroll()>
> <CENTER>
1>Часы в строке статуса</ H 1> <H 1> Годинник у рядку статусу </ H 1>
В Internet Explorer 4.0 підстановки не підтримуються, тому користуватися ними слід акуратно. Перш ніж видати браузеру сторінку з підстановками, потрібно перевірити тип цього браузера.
У разі підстановки інтерпретатор отримує управління в момент розбору браузером (компонент парсер) HTML-документа. Як тільки парсер зустрічає конструкцію &{..} у атрибуту контейнера, він передає управління інтерпретатору JavaScript, який, у свою чергу, після виконання коду це управління повертає парсер. Таким чином дана операція аналогічна підкачування графіки на HTML-сторінку.
1.7 Вставка (контейнер SCRIPT - примусовий виклик інтерпретатора)
Контейнер SCRIPT - це розвиток підстановок до можливості генерації тексту документа JavaScript-кодом. У цьому сенсі застосування SCRIPT аналогічно Server Side Includes, тобто генерації сторінок документів на стороні сервера. Однак тут ми забігли трохи вперед. При розборі документа HTML-парсер передає управління інтерпретатору після того, як зустріне тег початку контейнера SCRIPT. Інтерпретатор отримує на виконання весь фрагмент коду всередині контейнера SCRIPT і повертає управління HTML-парсер для обробки тексту сторінки після тега кінця контейнера SCRIPT.
Контейнер SCRIPT виконує дві основні функції:
розміщення коду всередині HTML-документа;
умовна генерація HTML-розмітки на стороні браузера.
Перша функція аналогічна декларуванню змінних і функцій, які потім можна буде використовувати в якості програм переходів, обробників подій і підстановок. Друга - це підстановка результатів виконання JavaScript-коду в момент завантаження чи перезавантаження документа.
1.7.1 Розміщення коду всередині HTML-документа
Власне, особливого розмаїття тут немає. Код можна розмістити або в заголовку документа, всередині контейнера HEAD, або всередині BODY. Останній спосіб і його особливості будуть розглянуті в розділі "Умовна генерація HTML-розмітки на стороні браузера". Тому звернемося до заголовка документа.
Код в заголовку розміщується всередині контейнера SCRIPT:
<HTML>
<HEAD>
<SCRIPT>
function time_scroll ()
{
d = new Date ();
window.status = d.getHours () +":"+ d.getMinutes () + ":"
+ D.getSeconds ();
setTimeout ('time_scroll ();', 500);
}
</ SCRIPT>
</ HEAD>
<BODY OnLoad=time_scroll()>
> <CENTER>
1>Часы в строке статуса</ H 1> <H 1> Годинник у рядку статусу </ H 1>
<FORM>
<INPUT TYPE=button VALUE="Закрить окно" onClick=window.close()>
</ FORM>
</ CENTER>
</ BODY>
</ HTML>
У цьому прикладі ми декларували функцію time_scroll () в заголовку документа, а потім викликали її як обробник події load в тезі початку контейнера BODY (onLoad = time_scroll ()).
оздадим дочернее окно с помощью следующей функции, продекларировав ее, а затем и вызвав: Як приклад декларації змінної розглянемо зміна статусу вікна-нащадка з вікна-предка: c оздадім дочірнє вікно за допомогою наступної функції, продекларувавши її, а потім і викликавши:
function sel ()
{
id = window.open (""," example "," width = 500, height = 200, status, menu ");
id.focus ();
id.document.open ();
id.document.write ("<HTML> <HEAD>");
id.document.write ("<BODY>");
id.document.write ("<CENTER>");
id.document.write ("<H1> Change text into child window. </ H1>");
id.document.write ("<FORM NAME=f>");
id.document.write ("<INPUT TYPE = text NAME = t SIZE = 20
MAXLENGTH = 20 VALUE = 'This is the test'>");
id.document.write ("<INPUT TYPE = button VALUE = 'Close the window'
onClick = window.close ()></ FORM> ");
id.document.write ("</ CENTER>");
id.document.write ("</ BODY> </ HTML>");
id.document.close ();
}
<INPUT TYPE = button VALUE = "Змінити поле статусу у вікні прикладу"
onClick = "id.defaultStatus = 'Привіт'; id.focus ();">
Відкриваючи вікно-нащадок, ми помістили в змінну id покажчик на об'єкт вікно id = window.open (). Тепер ми можемо використати її як ідентифікатор об'єкта класу Window. Використання id.focus () в нашому випадку обов'язково. При натисканні на кнопку "Змінити поле статусу у вікні прикладу" відбувається передача фокусу в батьківське вікно. Воно може мати розмір екрану. При цьому зміни будуть відбуватися у вікні-нащадку, яке буде приховано батьківським вікном. Для того щоб побачити зміни, треба передати фокус. Змінна id повинна бути визначена за межами будь-яких функцій, що і зроблено. У цьому випадку вона стає властивістю вікна. Якщо ми помістимо її всередині функції відкриття дочірнього вікна, то не зможемо до неї звернутися з обробника події click.
1.7.2 Умовна генерація HTML-розмітки на стороні браузера
Завжди приємно отримувати з сервера сторінку, підлаштований під можливості нашого браузера або, більше того, під користувача. Існує тільки дві можливості генерації таких сторінок: на стороні сервера або безпосередньо у клієнта. JavaScript-код виконується на стороні клієнта (насправді, сервери компанії Netscape здатні виконувати JavaScript-код і на стороні сервера, тільки в цьому випадку він носить назву LiveWire-код, не плутати з LiveConnect), тому розглянемо тільки генерацію на стороні клієнта.
Для генерації HTML-розмітки контейнер SCRIPT розміщують в тілі документа. Простий приклад - вбудовування в сторінку локального часу:
<BODY>
...
<SCRIPT>
d = new Date ();
document.write ("<BR>");
document.write ("Момент завантаження сторінки:
"+ D.getHours ()+":"+ d.getMinutes ()+":"+ d.getSeconds ());
document.write ("<BR>");
</ SCRIPT>
...
</ BODY>
1.8 Ієрархія класів
Об'єктно-орієнтована мова програмування припускає наявність ієрархії класів об'єктів. В JavaScript така ієрархія починається з класу об'єктів Window, тобто кожен об'єкт приписаний до того чи іншого вікна. Для звернення до будь-якого об'єкта або його властивості вказують повне або часткове ім'я цього об'єкта або властивості об'єкта, починаючи від імені об'єкта старшого в ієрархії, в який входить даний об'єкт:
Рис. 1.2.
Відразу обмовимося, що наведена нами схема об'єктної моделі правильна для Netscape Navigator версії 4 і вище, а також для Microsoft Internet Explorer версії 4 і вище. Ще раз відзначимо, що об'єктні моделі у Internet Explorer і Netscape Navigator зовсім різні, а наведена схема складена на основі їх загальної частини.
Взагалі кажучи, JavaScript не є класичним об'єктним мовою (його ще називають полегшеним об'єктним мовою). У ньому немає наслідування та поліморфізму. Програміст може визначити власний клас об'єктів через оператора function, але частіше користується стандартними об'єктами, їх конструкторами і взагалі не застосовує деструктори класів. Це пояснюється тим, що область дії JavaScript-програми зазвичай не поширюється за межі поточного вікна.
Іноді у різних об'єктів JavaScript бувають визначені властивості з однаковими іменами. У цьому випадку потрібно чітко вказувати, властивість якого об'єкта програміст хоче використовувати. Наприклад, Window і Document мають властивість location. Тільки для Window це місце - Location, а для Document - рядковий літерал, який приймає в якості значення URL завантаженого документа.
Слід також враховувати, що для багатьох об'єктів існують стандартні методи перетворення значень властивостей об'єктів у звичайні змінні. Наприклад, для всіх об'єктів за замовчуванням визначено метод перетворення в рядок символів: toString (). У прикладі з location, якщо звернутися до window.location в строковому контексті, буде виконано перетворення за замовчуванням, і програміст цього не помітить:
<SCRIPT>
document.write (window.location);
document.write ("<BR>");
document.write (document.location);
</ SCRIPT>
Однак різниця все-таки є, і досить істотна. У тому ж прикладі отримаємо довжини рядкових констант:
<SCRIPT>
w = toString (window.location);
d = toString (document.location);
h = window.location.href;
document.write (w.length);
document.write (d.length);
document.write (h.length);
</ SCRIPT>
Результат виконання отримаєте самі.
Як легко переконатися, при зверненні до властивості об'єкта типу URL, а властивість location якраз є об'єктом даного типу, довжина рядка символів після перетворення буде іншою.
2. Програмуємо властивості вікна браузера
— это самый старший класс в иерархии объектов JavaScript . Клас об'єктів Window - це найстарший клас в ієрархії об'єктів JavaScript. и объект Frame . До нього відносяться об'єкт Window і об'єкт Frame. ассоциируется с окном программы-браузера, а объект Frame — с окнами внутри окна браузера, которые порождаются последним при использовании автором HTML -страниц контейнеров FRAMESET и FRAME . Об'єкт Window асоціюється з вікном програми-браузера, а об'єкт Frame - з вікнами всередині вікна браузера, які породжуються останнім при використанні автором HTML-сторінок контейнерів FRAMESET і FRAME.
чаще всего используют следующие свойства и методы объектов типа Window : При програмуванні на JavaScript найчастіше використовують такі властивості і методи об'єктів типу Window:
.1. Таблиця 2 .1.
Властивості
Методи
Події
status
( open ( )
Подій немає
location
close ()

history
focus ()

navigator

создается только в момент открытия окна. Об'єкт Window створюється тільки в момент відкриття вікна. . Всі інші об'єкти, які породжуються при завантаженні сторінки у вікно, є властивості об'єкта Window. могут быть разные свойства при загрузке разных страниц. Таким чином, у Window можуть бути різні властивості при завантаженні різних сторінок.
2.1 Поле статусу
-страниц из арсенала JavaScript . Поле статусу - це перше, що почали використовувати автори HTML-сторінок з арсеналу JavaScript. Калькулятори, ігри, математичні обчислення та інші елементи виглядали занадто штучно. -узлу. На їх фоні біжучий рядок у полі статусу була родзинкою, яка могла дійсно привернути увагу користувачів до Web-сайту. Поступово її популярність зійшла нанівець. -узлах. Ті, що біжать рядки стали рідкістю, але програмування поля статусу зустрічається на багатьох Web-вузлах.
.1. Рис. 2 .1. Поле статусу
Полем статусу (status ) называют среднее поле нижней части окна браузера сразу под областью отображения HTML -страницы. bar) називають середню полі нижній частині вікна браузера відразу під областю відображення HTML-сторінки. У полі статусу відображається інформація про стан браузера (завантаження документа, завантаження графіки, завершення завантаження, запуск апплета і т.п.). имеет возможность работать с этим полем как с изменяемым свойством окна. Програма на JavaScript має можливість працювати з цим полем як із змінним властивістю вікна. При цьому фактично з ним пов'язані два різних властивості:
. status ; window. status;
. defaultStatus . window. defaultStatus.
Різниця між ними полягає в тому, що браузер насправді має кілька станів, пов'язаних з деякими подіями. Стан браузера відображається в повідомленні в полі статусу. ) и происходят какие-то события ( status ). За великим рахунком, існує тільки два стани: немає жодних подій (defaultStatus) і відбуваються якісь події (status).
2.2 Програмуємо status
связано с отображением сообщений о событиях, отличных от простой загрузки страницы. Властивість status пов'язано з відображенням повідомлень про події, відмінних від простого завантаження сторінки. , указанный в атрибуте HREF , отображается в поле статуса. Наприклад, коли курсор миші проходить над гіпертекстової посиланням, URL, вказаний в атрибуті HREF, відображається в полі статусу. : Done ). При попаданні курсора миші на поле, вільний від посилань, в полі статусу відновлюється повідомлення за замовчуванням (Document: Done). и defaultStatus : Ця техніка реалізована на даній сторінці при переході на опис властивостей status і defaultStatus:
<A HREF = # status onMouseover =
"Window.status = 'Jump to status description'; return true;"
onMouseout = "window.status = 'Status bar programming'; return true;">
window.status </ A>
указано, что обработчик событий mouseover и mouseout должен возвращать значение true . У документації по JavaScript зазначено, що обробник подій mouseover і mouseout повинен повертати значення true. Це потрібно для того, щоб браузер не виконував дій, заданих за замовчуванням. 4.0 прекрасно обходится и без возврата значения true . Практика показує, що Netscape Navigator 4.0 чудово обходиться і без повернення значення true.
2.3 Програмуємо defaultStatus
определяет текст, отображаемый в поле статуса, когда никаких событий не происходит. Властивість defaultStatus визначає текст, що відображається в полі статусу, коли ніяких подій не відбувається. У нашому документі ми визначили його при завантаженні документа:
<BODY OnLoad="window.defaultStatus='Status bar programming';">
Це повідомлення з'являється в той момент, коли завантажені всі компоненти сторінки (текст, графіка, аплети і т.п.). Воно відновлюється в рядку статусу після повернення з будь-якої події, яке може статися при перегляді документа. . Цікаво, що рух миші по вільному від гіпертекстових посилань полю сторінки призводить до постійного відображенню defaultStatus.
2.4 Поле location
отображается URL загруженного документа. У полі location відображається URL завантаженого документа. ), он делает это в поле location . Якщо користувач хоче перейти вручну до якої-небудь сторінці (набрати її URL), він робить це в полі location. Поле розташовується у верхній частині вікна браузера нижче панелі інструментів, але вище панелі особистих переваг.
Рис. Поле Location 2. 2 Поле Location
— это объект. Взагалі кажучи, Location - це об'єкт. класс Location входит как подкласс и в класс Window , и в класс Document . Через зміни у версіях JavaScript клас Location входить як підклас і в клас Window, і в клас Document. только как window . location . Ми будемо розглядати Location тільки як window. Location. — это еще и подкласс класса URL , к которому относятся также объекты классов Area и Link . Location наследует все свойства URL , что позволяет получить доступ к любой части схемы URL . Крім того, Location - це ще й підклас класу URL, до якого належать також об'єкти класів Area і Link. Location успадковує всі властивості URL, що дозволяє отримати доступ до будь-якої частини схеми URL.
: Розглянемо характеристики та способи використання об'єкта Location:
властивості;
методи;
, нет. подій, що характеризують Location, немає.
неполный. Як ми бачимо, список характеристик об'єкта Location неповний.
2.4.1 Властивості
Припустимо, що браузер відображає сторінку, розташовану за адресою:
:// intuit . ru :80/ r / dir / page ? search # mark http: / / intuit. ru: 80 / r / dir / page? search # mark
примут следующие значения: Тоді властивості об'єкта Location візьмуть наступні значення:
window.location.href = http://intuit.ru:80/r/dir/page?search # mark
window.location.protocol = http;
window.location.hostname = intuit.ru;
window.location.host = intuit.ru: 80;
window.location.port = 80
window.location.pathname = / r / dir /;
window.location.search = search;
window.location.hash = mark;
2.4.2 Методи
предназначены для управления загрузкой и перезагрузкой страницы. Методи Location призначені для управління завантаженням і перезавантаженням сторінки. ), либо загрузить ( replace ). Це управління полягає в тому, що можна або перезавантажити документ (reload), або завантажити (replace). ) информация не заносится: При цьому в історію перегляду сторінок (history) інформація не заноситься:
window.location.reload (true);
window.location.replace ('# top');
( ) полностью моделирует поведение браузера при нажатии на кнопку Reload в панели инструментов. Метод reload () повністю моделює поведінку браузера при натисканні на кнопку Reload в панелі інструментів. , то браузер проверит время последней модификации документа и загрузит его либо из кеша (если документ не был модифицирован), либо с сервера. Якщо викликати метод без аргументу або вказати його рівним true, то браузер перевірить час останньої модифікації документа і завантажить його або з кеша (якщо документ не був модифікований), або з сервера. . Така поведінка відповідає простого натискання на кнопку Reload. , то браузер перезагрузит текущий документ с сервера, несмотря ни на что. Якщо в якості аргументу вказати false, то браузер перезавантажить поточний документ з сервера, незважаючи ні на що. и кнопку клавиатуры Shift ( Reload + Shift ). Така поведінка відповідає одночасному натисканні на Reload і кнопку клавіатури Shift (Reload + Shift).
( ) позволяет заменить одну страницу другой таким образом, что это замещение не будет отражено в трассе просмотра HTML -страниц ( history ), и при нажатии на кнопку Back из панели инструментов пользователь всегда будет попадать на первую загруженную обычным способом (по гипертекстовой ссылке) страницу. Метод replace () дозволяє замінити одну сторінку іншої таким чином, що це заміщення не буде відображено в трасі перегляду HTML-сторінок (history), і при натисканні на кнопку Back з панелі інструментів користувач завжди буде потрапляти на першу завантажену звичайним способом (через гіпертекстове посилання ) сторінку. также происходит перезагрузка страниц, но в этом случае записи об их посещении в history пропадают. Нагадаємо, що при зміні властивостей Location також відбувається перезавантаження сторінок, але в цьому випадку запису про їх відвідування в history пропадають.
2.4.3 Історія відвідувань (History)
Історія відвідувань (траса) сторінок World Wide позволяет пользователю вернуться к странице, которую он просматривал несколько минут (часов, дней) назад. Web дозволяє користувачеві повернутися до сторінки, яку він переглядав кілька хвилин (годин, днів) назад. трансформируется в объект класса history . Історія відвідувань в JavaScript трансформується в об'єкт класу history. -страниц, которые пользователь посещал и которые он может получить, выбрав из меню браузера режим GO . Цей об'єкт вказує на масив URL-сторінок, які користувач відвідував і які він може отримати, вибравши з меню браузера режим GO. позволяют загружать страницы, используя URL из этого массива. Методи об'єкта history дозволяють завантажувати сторінки, використовуючи URL з цього масиву.
можно, только используя индекс URL . Щоб не виникло проблем з безпекою браузера, подорожувати по History можна, лише використовуючи індекс URL. , как текстовая строка, программисту недоступен. При цьому URL, як текстовий рядок, програмісту недоступний. Найчастіше цей об'єкт використовують у прикладах чи сторінках, на які можуть бути посилання з декількох різних сторінок, припускаючи, що можна повернуться до сторінки, з якої приклад буде завантажений:
<FORM> <INPUT TYPE = button VALUE = "Назад"
С lick=history.back()></FORM> on-С lick = history.back ()></ FORM>
Даний код відображає кнопку "Назад", натиснувши на яку ми повернемося до попередньої сторінки.
2.4.4 Тип браузера (об'єкт Navigator)
У зв'язку з війною браузерів (яка, можна вважати, вже закінчилася на користь Microsoft Internet ) стала актуальной задача настройки страницы на конкретную программу просмотра. Explorer) стала актуальною задача настройки сторінки на конкретну програму перегляду. При цьому можливі два варіанти: визначення типу браузера на стороні сервера і визначення типу браузера на стороні клієнта. существует объект Navigator . Для останнього варіанту в арсеналі об'єктів JavaScript існує об'єкт Navigator. . Цей об'єкт - властивість об'єкта Window.
Розглянемо простий приклад визначення типу програми перегляду:
<FORM> <INPUT TYPE = button VALUE = "Тип навігатора"
onClick = "window.alert (window.navigator.userAgent );"></ FORM>
При натисканні на кнопку відображається вікно попередження. , которую браузер помещает в соответствующий HTTP -заголовок. У ньому міститься рядок userAgent, яку браузер поміщає до відповідного HTTP-заголовок.
Цей рядок можна розібрати по компонентах, наприклад:
Лістинг 2.1
navigator.appName = Microsoft Internet Explorer
navigator.appCodeName = Mozilla
navigator.appVersion = 4.0 (compatible; MSIE 5.5; Windows 98)
navigator.userAgent = Mozilla/4.0 (compatible; MSIE 5.5; Windows 98)
есть еще несколько интересных с точки зрения программирования применений. В об'єкта Navigator є ще кілька цікавих з точки зору програмування застосувань. . Наприклад, перевірка підтримки Java. Проілюструємо цю можливість на прикладі:
Лістинг 2.2
<SCRIPT>
document.write ("<P ID=red>");
if (navigator.javaEnabled () == true)
document.write ("Ваша програма підтримує виконання Java-аплетів");
if (navigator.javaEnabled () == false)
document.write ("<FONT COLOR=red> Ваша програма не підтримує виконання Java-аплетів </ FONT>");
</ SCRIPT>
</ Example>
Аналогічно можна перевірити формати графічних файлів, які підтримує ваш браузер:
Лістинг 2.3
<SCRIPT>
if (navigator.mimeTypes ['image / gif']! = null)
document.write ("Ваш браузер підтримує GIF <BR>");
if (navigator.mimeTypes ['image / tif'] == null)
document.write ("Ваш браузер не підтримує TIFF");
</ SCRIPT>
На жаль, така перевірка не дозволяє визначити наявність автоматичної підвантаження графіки.
2.5 Управління вікнами
Що можна зробити з вікном? Відкрити (створити), закрити (видалити), покласти його поверх всіх інших відкритих вікон (передати фокус). Крім того, можна управляти властивостями вікна і властивостями підлеглих йому об'єктів. Опису основних властивостей присвячений розділ "Програмуємо властивості вікна браузера", тому зосередимося на простих і найбільш популярних методах управління вікнами:
alert ();
confirm ();
prompt ();
open ();
close ();
focus ();
setTimeout ();
clearTimeout ().
( ) и blur ( ). Первый позволяет прокрутить окно на определенную позицию. Тут не вказані тільки два методи: scroll () і blur (). Перший дозволяє прокрутити вікно на певну позицію. Але його дуже складно використовувати, не знаючи координат вікна. ( Cascading Останнє є звичайною справою, якщо тільки не використовується технологія програмування шарів або CSS (Cascading Style ). Sheets).
Другий метод відводить фокус з вікна. При цьому абсолютно незрозуміло, куди цей фокус буде переданий. Краще цілеспрямовано передати фокус, ніж просто його втратити.
2.5.1 window.alert ()
( ) позволяет выдать окно предупреждения: Метод alert () дозволяє видати вікно попередження:
<A HREF="javascript:window.alert('Внимание')">
> Повторіть запит! </ A>
Все дуже просто, але потрібно мати на увазі, що повідомлення виводяться системним шрифтом, отже, для отримання попереджень російською мовою потрібна локалізована версія ОС.
2.5.2 window.confirm ()
( ) позволяет задать пользователю вопрос, на который тот может ответить либо положительно, либо отрицательно: Метод confirm () дозволяє задати користувачеві питання, на який той може відповісти або позитивно, або негативно:
<FORM>
<INPUT TYPE = button VALUE = "Ви знаєте JavaScript?"
onClick = "if (window.confirm ('Знаю все') == true)
{
document.forms [0]. elements [1]. value = 'Так';
}
else
{
document.forms [0]. elements [1]. value = 'Ні';
> }; "> <BR>
> </ FORM>
( ) , справедливы и для метода confirm ( ). Всі обмеження для повідомлень російською мовою, які були описані для методу alert (), справедливі і для методу confirm ().
2.5.3 window.prompt ()
( ) позволяет принять от пользователя короткую строку текста, которая набирается в поле ввода информационного окна: Метод prompt () дозволяє прийняти від користувача коротку рядок тексту, яка набирається в полі введення інформаційного вікна:
<FORM>
<INPUT TYPE = button VALUE = "Відкрити вікно введення"
onClick = "document.forms [0]. elements [1]. value =
window.prompt ('Введіть повідомлення');">
<INPUT SIZE=30>
</ FORM>
-программе. Введену користувачем рядок можна присвоїти будь-якої змінної і потім розбирати її в JavaScript-програмі.
2.5.4 window.open ()
У цього методу вікна атрибутів більше, ніж у деяких об'єктів. ( ) предназначен для создания новых окон. Метод open () призначений для створення нових вікон. У загальному випадку його синтаксис виглядає наступним чином:
open ("URL", "window_name", "param, param ,...", replace);
— страница, которая будет загружена в новое окно, window _ name — имя окна, которое можно использовать в атрибуте TARGET в контейнерах A и FORM . де: URL - сторінка, яка буде завантажена в нове вікно, window _ name - ім'я вікна, яке можна використовувати в атрибуті TARGET в контейнерах A і FORM.
Таблиця 2.2.
Параметри
Призначення
replace
Дозволяє при відкритті вікна керувати записом у масив History
param
Список параметрів
width
Ширина вікна в пікселах
height
Висота вікна в пікселах
toolbar
Створює вікно з системними кнопками браузера
location
Створює вікно з полем location
directories
Створює вікно з меню переваг користувача
status
Створює вікно з полем статусу status
menubar
Створює вікно з меню
scrollbars
Створює вікно з смугами прокрутки
resizable
Створює вікно, розмір якого можна буде змінювати
Наведемо такий приклад:
Лістинг 2.4
<FORM>
<INPUT TYPE = button VALUE = "Просте вікно"
onClick = "window.open ('about: blank', 'test1',
'Directories = no, height = 200, location = no, menubar = no,
resizable = no, scrollbars = no, status = no, toolbar = no,
width = 200 ');
">
<INPUT TYPE = button VALUE = "Складне вікно"
onClick = "window.open ('about: blank', 'test2',
'Directories = yes, height = 200, location = yes, menubar = yes,
resizable = yes, scrollbars = yes, status = yes, toolbar = yes,
width = 200 ');
">
</ FORM>
При натисканні кнопки "просте вікно" одержуємо вікно з наступними параметрами:
directories = no - вікно без меню;
; height = 200 - висота 200 px;
location = no - поле location відсутня;
; menubar = no - без меню;
= no - размер изменять нельзя; resizable = no - розмір змінювати не можна;
= no - полосы прокрутки отсутствуют; scrollbars = no - смуги прокручування відсутні;
= no - статусная строка отсутствует; status = no - статусна рядок відсутній;
= no - системные кнопки браузера отсутствуют; toolbar = no - системні кнопки браузера відсутні;
=200 - ширина 200. width = 200 - ширина 200.
При натисканні кнопки "складне вікно" одержуємо вікно, де:
directories = yes - вікно з меню;
; height = 200 - висота 200 px;
location = yes - поле location є;
; menubar = yes - меню є;
= yes - размер изменять можно; resizable = yes - розмір змінювати можна;
= yes - есть полосы прокрутки; scrollbars = yes - є смуги прокрутки;
= yes - статусная строка есть; status = yes - статусний рядок є;
= yes - системные кнопки браузера есть; toolbar = yes - системні кнопки браузера є;
=200 - ширина 200. width = 200 - ширина 200.
2.5.5 window.close ()
( ) — это оборотная сторона медали метода open ( ). Он позволяет закрыть окно. Метод close () - це зворотний бік медалі методу open (). Він дозволяє закрити вікно. Найчастіше виникає питання, яке з вікон, власне, слід закрити. Якщо необхідно закрити поточний, то:
window.close ();
self.close ();
Якщо необхідно закрити батьківське вікно, тобто вікно, з якого було відкрито поточний, то:
window.opener.close ();
Якщо необхідно закрити довільне вікно, то тоді спочатку потрібно отримати його ідентифікатор:
id = window.open ();
...
id.close ();
тут ни при чем), а используют указатель на объект. Як видно з останнього прикладу, закривають вікно не по імені (значення атрибуту TARGET тут ні при чому), а використовують покажчик на об'єкт.
2.5.6 window.focus ()
( ) применяется для передачи фокуса в окно, с которым он использовался. Метод focus () застосовується для передачі фокусу у вікно, з яким він використовувався. Передача фокуса корисна як при відкритті вікна, так і при його закритті, не кажучи вже про випадки, коли потрібно вибирати вікна. Розглянемо приклад.
Відкриваємо вікно і, не закриваючи його, знову відкриємо вікно з таким же ім'ям, але з іншим текстом. Нове вікно не з'явилося поверх основного вікна, так як фокус йому не був переданий. Тепер повторимо відкриття вікна, але вже з передачею фокусу:
Лістинг 2.5
function myfocus (a)
{
id = window.open (""," example "," scrollbars, width = 300,
=200"); height = 200 ");
/ / Відкриваємо вікно і заводимо змінну з покажчиком на нього
/ / Якщо вікно з таким ім'ям існує, то нове вікно не
/ / Створюється, а відкривається потік для запису у вікно з цим ім'ям
if (a == 1)
{
id.document.open ();
/ / Відкриваємо потік введення у вже створене вікно
. document . write ("< CENTER >>Открыли окно в первый раз"); id. document. write ("<CENTER>> Відкрили вікно в перший раз");
/ / Пишемо в цей потік
}
( a ==2) if (a == 2)
{
. document . open (); id. document. open ();
. document . write ("< CENTER >Открыли окно во второй раз"); id. document. write ("<CENTER> Відкрили вікно вдруге");
}
if (a == 3)
{
id.focus ();
/ / Передаємо фокус, потім виконуємо ті ж дії,
/ / Що і в попередньому випадку
. document . open (); id. document. open ();
. document . write ("< CENTER >Открыли окно в третий раз"); id. document. write ("<CENTER> Відкрили вікно в третій раз");
}
id.document.write ("<FORM> <INPUT TYPE = button
onClick = 'window.close ();' VALUE = 'Закрити вікно'> </ CENTER> ");
id.document.close ();
}
. Оскільки ми пишемо зміст нового вікна з вікна старого (батька), то в якості покажчика на об'єкт використовуємо значення змінної id.
2.5.7 window.setTimeout ()
( ) используется для создания нового потока вычислений, исполнение которого откладывается на время ( ms ), указанное вторым аргументом: Метод setTimeout () використовується для створення нового потоку обчислень, виконання якого відкладається на час (ms), зазначене другим аргументом:
idt = setTimeout ("JavaScript_код", Time);
Типове застосування цієї функції - організація автоматичного зміни властивостей об'єктів. Наприклад, можна запустити годинник у полі форми:
Лістинг 14.6
var flag = 0;
var idp = null;
function myclock ()
{
if (flag == 1)
{
d = new Date ();
window.document.cfvalue = d.getHours ()+":"+ d.getMinutes ()+":"+ d.getSeconds ();
}
idp = setTimeout ("myclock ();", 500);
}
function flagss ()
{
if (flag == 0) flag = 1; else flag = 0;
}
...
<FORM = c >Текущее время: NAME = c> Поточне час:
<INPUT NAME=f size=8> <INPUT TYPE = button VALUE = "Start / Stop"
onClick = "flagss (); myclock ();">
</ FORM>
Потрібно мати на увазі, що потік породжується завжди, навіть у тому випадку, коли годинник коштує. равном единице, то при значении 0 он исчез бы, тогда при нажатии на кнопку часы продолжали бы стоять. Якщо б він створювався тільки при значенні змінної flag рівному одиниці, то при значенні 0 він зник би, тоді при натисненні на кнопку годинник продовжував би стояти.
2.5.8 window.clearTimeout
( ) позволяет уничтожить поток, вызванный методом setTimeout ( ). Очевидно, что его применение позволяет более эффективно распределять ресурсы вычислительной установки. Метод clearTimeout () дозволяє знищити потік, викликаний методом setTimeout (). Очевидно, що його застосування дозволяє більш ефективно розподіляти ресурси обчислювальної установки. Для того щоб використовувати цей метод у прикладі з годинником, нам потрібно модифікувати функції і форму:
Лістинг 14.7
var idp1 = null;
function start ()
{
d = new Date ();
window.document.c1.f1.value =
d.getHours ()+":"+ d.getMinutes ()+":"+ d.getSeconds ();
idp1 = setTimeout ("start ();", 500);
}
function stop ()
{
clearTimeout (idp1); idp1 = null;
}
...
<FORM = c 1> Текущее время: NAME = c 1> Поточний час:
<INPUT NAME=f1 size=8>
<INPUT TYPE = button VALUE = "Start"
onClick = "if (idp1 == null) start ();">
<INPUT TYPE = button VALUE = "Stop"
onClick = "if (idp1! = null) stop ();">
</ FORM>
( ). При этом, чтобы не порождалось множество потоков, проверяется значение указателя на объект потока. У даному прикладі для зупинки годин використовується метод clearTimeout (). При цьому, щоб не породжувалося безліч потоків, перевіряється значення покажчика на об'єкт потоку.
2.6 Фрейми (Frames)
Фрейми - це кілька видозмінені вікна. Відрізняються вони від звичайних вікон тим, що розміщуються всередині них. У фрейму не може бути ні панелі інструментів, ні меню, як у звичайному вікні. В якості поля статусу фрейм використовує поле статусу вікна, в якому він розміщений. Існує і ряд інших відмінностей.
Ми зупинимося на:
ієрархії фреймів;
іменуванні фреймів;
передачі даних у фрейм.
Природно, що ієрархія визначає і правила іменування фреймів, і способи передачі фокусу фрейму.
2.6.1 Ієрархія фреймів
Розглянемо спочатку простий приклад. Розділимо екран на дві вертикальні колонки: (відкрити)
<HTML>
<HEAD>
</ HEAD>
<FRAMESET COLS="50%,*">
<FRAME NAME=left SRC=left.html>
<FRAME NAME=right SRC=right.html>
</ FRAMESET>
</ HTML>
Рис. 2.3. Фрейм з двома вертикальними колонками
(_ parent ). Назвемо вікно, в якому розміщують фрейми, _ top (_ parent).
Ускладнимо приклад: розіб'ємо правий фрейм на два по горизонталі: (відкрити)
<HTML>
<HEAD>
</ HEAD>
<FRAMESET COLS="50%,*">
<FRAME NAME=left SRC=left.html>
<FRAMESET ROWS="50%,*">
<FRAME NAME=top SRC=top.html>
<FRAME NAME=bottom SRC=bottom.html>
</ FRAMESET>
</ FRAMESET>
</ HTML>
Рис. 2.4. Правий фрейм, розбитий на два по горизонталі
и top , во-вторых, исчез фрейм right . Зверніть увагу на два моменти: по-перше, слід розрізняти _ top і top, по-друге, зник фрейм right. — это зарезервированное имя старшего окна, а top — имя фрейма, которое назначил ему автор страницы. З приводу першого зауваження: _ top - це зарезервоване ім'я старшого вікна, а top - ім'я фрейму, яке призначив йому автор сторінки. в данном случае не существует. З приводу другого зауваження: старшим вікном для всіх фреймів є все вікно браузера, фрейму з ім'ям right в даному випадку не існує.
Для того щоб він з'явився, потрібно звести обидва наших прикладу в один. мы снова должны загрузить фреймовый документ. Це означає, що у фрейм right ми знову повинні завантажити фреймовий документ.
Перший документ:
<HTML>
<HEAD>
</ HEAD>
<FRAMESET COLS="50%,*">
<FRAME NAME=left SRC=left.html>
<FRAME NAME=right SRC=right.html>
</ FRAMESET>
</ HTML>
. htm ): Другий документ (right. Htm):
<HTML>
<HEAD>
</ HEAD>
<FRAMESET ROWS="50%,*">
<FRAME NAME=top SRC=top.html>
<FRAME NAME=bottom SRC=bottom.html>
</ FRAMESET>
</ HTML>
У цьому випадку підпорядкування сторінок буде виглядати інакше, ніж у прикладі з трьома фреймами. Таким чином, ми отримали той самий результат, що і з трьома фреймами і одним старшим вікном. Однак цей варіант більш гнучкий: він дозволяє задіяти фрейм, що містить горизонтальну розбивку.
. Така інтерпретація фреймової структури сторінки знаходить відображення і в іменуванні фреймів JavaScript.

2.6.2 Іменування фреймів
[ ] . Звернутися до фрейму можна або по імені, або як до елементу масиву frames []. Розглянемо HTML-документ:
<HTML>
<HEAD>
...
</ HEAD>
<FRAMESET COLS="20%,*">
<FRAME NAME=left SRC=frame1.htm>
<FRAME NAME=right SRC=frame2.htm>
</ FRAMESET>
</ HTML>
Припустимо, що на сторінці, завантаженої в правий фрейм, є дві картинки. второй из них можно использовать следующие записи: Для зміни властивості src другий з них можна використовувати такі записи:
top.frames [1]. images [1]. src = "pic.gif";
або
top.right.images [1]. src = "pic.gif";
. У зв'язку з індексацією фреймів виникає питання про те, як вони нумеруються в одновимірному вбудованому масиві фреймів об'єкта Window. Проілюструємо це на прикладі: (відкрити)
<FRAMESET ROWS="50,*,50">
<FRAME NAME=top SRC=top.html>
<FRAMESET COLS="100,*,100">
<FRAME NAME=left SRC=left.html>
<FRAME NAME=center SRC=center.html>
<FRAME NAME=right SRC=right.html>
</ FRAMESET>
<FRAME NAME=bottom SRC=bottom.html>
</ FRAMESET>
Рис. 2.5. Центральний фрейм, розбитий на три вертикальні
Побудуємо тепер щось перпендикулярне попереднього прикладу - стовпець з трьох фреймів (рис.2.6): (відкрити)
<FRAMESET COLS="100,*,100">
<FRAME NAME=left SRC=top.html>
<FRAMESET ROWS="60,*,60">
<FRAME NAME=top SRC=left.html>
<FRAME NAME=center SRC=center.html>
<FRAME NAME=bottom SRC=right.html>
</ FRAMESET>
<FRAME NAME=right SRC=bottom.html>
</ FRAMESET>
Таким чином, при нумерації фреймів в одновимірному масиві фреймів на сторінці система дотримується правила "зліва направо, зверху вниз". Вкладаючи наші приклади один в одного, можна одержати правильну індексацію сторінок при будь-якій складній фреймової структурі.
Рис. 2.6. Центральний фрейм, розбитий на три горизонтальні
2.6.3 Передача фокуса у фрейм
-узла является загрузка результатов исполнения CGI -скрипта во фрейм, отличный от фрейма, в котором вводятся данные для этого скрипта. Звичайною завданням при розробці типового Web-сайту є завантаження результатів виконання CGI-скрипта у фрейм, відмінний від фрейму, в якому вводяться дані для цього скрипта. формы. Якщо шлях завантажити результати фіксований, то можна просто використовувати атрибут TARGET форми. Складніше, якщо результат роботи повинен бути завантажений в різні фрейми, в залежності від обраної кнопки.
. Це завдання можна вирішувати по-різному: відкривати раніше відкрите вікно або перепризначувати властивість target. Останнє рішення, звичайно, більш витончене, з нього і почнемо:
Лістинг 2.8
function load ()
{
if (self.document.fsoptions [document.fsselectedIndex].
text == "top")
{
document.f.target = "mytop";
self.top.frames [2]. document.open ();
self.top.frames [2]. document.close ();
}
else
{
document.f.target = "mybottom";
self.top.frames [1]. document.open ();
self.top.frames [1]. document.close ();
}
return true;
}
( ) вызывается как обработчик события submit , она является логической функцией. Функція load () викликається як обробник події submit, вона є логічною функцією. позволяет реализовать перезагрузку документа. Повернення значення true дозволяє реалізувати перезавантаження документа.
Тепер розглянемо другий варіант. Його ідея полягає в тому, що при спробі відкрити вікно з ім'ям існуючого вікна нове вікно не відкривається, а використовується вже відкрите. Фрейм - це теж вікно, тому на нього це правило поширюється, але ось функція, яка реалізує цей варіант, відрізняється від попередньої:
Лістинг 14.9
function load ()
{
if (self.document.fsoptions [document.fsselectedIndex].
text == "top")
{
window.open (". / framer.htm", "mytop");
self.top.frames [2]. document.open ();
self.top.frames [2]. document.close ();
}
else
{
window.open (". / framer.htm", "mybottom");
self.top.frames [1]. document.open ();
self.top.frames [1]. document.close ();
}
return false;
}
. Зверніть увагу на те, що дана функція повертає значення false. . Ведь документ уже перезагружен и снова его загружать не надо. Це відбувається тому, що треба маскувати подія submit. Адже документ вже перезавантажений і знову його завантажувати не треба.