logo
ВебТех Конспект лекций 2011 укр

Лекція 14. Об'єктна модель броузера.

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

Об'єкт window

Клас об'єктів Window - це найстарший клас в ієрархії об'єктів JavaScript. Об'єкт window, що відноситься до поточного вікна (тобто в якому виконується скрипт), є об'єктом класу Window. Клас об'єктів Frame міститься в класі Window, тобто кожен кадр - це теж об'єкт класу Window.

Об'єкт window створюється тільки в момент відкриття вікна. Всі інші об'єкти, які породжуються при завантаженні сторінки, є властивості об'єкта window. Більш того, всі глобальні змінні, визначені в даному вікні, теж є властивостями об'єкта window. Таким чином, в об'єкта window можуть бути різні властивості при завантаженні різних сторінок. Крім того, в різних браузерах властивості об'єктів і поведінку об'єктів і браузера при обробці подій може бути різним. При програмуванні на JavaScript найчастіше використовують такі властивості, методи і події об'єкту window:

Таблиця 4.1. Властивості, методи і події об'єкта window

Властивості

Методи

Події

status

defaultStatus  

location

history

navigator

 

document

frames []

 

opener

parent

self

top

open ()

close ()

focus ()

blur ()

 

alert ()

confirm ()

prompt ()

 

setTimeout ()

setInterval ()

clearTimeout ()

clearInterval ()  

Load

Unload

 

Focus

Blur

 

Resize

Error

Оскільки об'єкт window є найстаршим, то в більшості випадків при зверненні до його властивостей і методів приставку "window." можна опускати. Так, наприклад, можна писати alert ('Привіт') замість window.alert ('Привіт'), або location замість window.location. Винятками з цього правила є виклики методів open () і close (), у яких потрібно вказувати ім'я вікна, з яким працюємо (батьківське в першому випадку і дочірнє у другому).

Властивості об'єкту window

Поле статусу і властивість window.status

Полем статусу (status bar) називають поле нижній частині вікна браузера відразу під областю відображення HTML-сторінки. У полі статусу відображається інформація про стан браузера (завантаження документа, завантаження графіки, завершення завантаження, запуск апплета і т.п.). Програма на JavaScript має можливість працювати з цим полем як із змінним властивістю вікна. При цьому фактично з ним пов'язані два різних властивості:

Значення властивості status можна змінити - і воно тут же буде відображено в полі статусу. Властивість defaultStatus теж можна змінювати - і відразу по його зміні воно відображається в полі статусу.

Властивість status пов'язано з відображенням повідомлень про події, відмінних від простого завантаження сторінки. Наприклад, в Internet Explorer при наведенні покажчика миші на посилання обробник onMouseOver поміщає в поле статусу значення URL, вказане в атрибуті HREF цієї посилання (при цьому ніяк не змінюючи значення властивостей status і defaultStatus). При попаданні ж курсору миші на область, вільну від посилань, обробник onMouseOut повертає в полі статусу значення defaultStatus, за умови, що воно не є порожній рядок (знову ж ніяк не змінюючи значень обох властивостей). Ми можемо змінити цю поведінку, наприклад, як у наступному прикладі:

<A onMouseOver = "window.status = 'Миша над посиланням'; return true;"

   onMouseOut = "window.status = 'Миша повели з посилання';"

  HREF = " http://site.com/ "> Наведіть мишу на посилання і стежте за полем статусу </ A>

Зверніть увагу на оператор return true наприкінці обробника подій onMouseOver. Він необхідний для того, щоб скасувати дію за умовчанням (у даному випадку - висновок URL в поле статусу), яке, за відсутності цього оператора, браузер виконав би відразу після виведення нами своєю рядка в полі статусу, і користувач не встиг би побачити нашу рядок

Властивість defaultStatus визначає текст, що відображається в полі статусу, коли ніяких подій не відбувається. Доповнимо попередній приклад зміною цієї властивості в момент закінчення завантаження документа, тобто в обробнику onLoad:

<BODY onLoad="window.defaultStatus='Значеніе по умолчанію';">

 

<A onMouseOver = "window.status = 'Миша над посиланням'; return true;"

   onMouseOut = "window.status = 'Миша повели з посилання'; alert ('Чекаємо');"

  HREF = "http://site. com / "> Наведіть мишу на посилання і стежте за полем статусу </ A>

 

</ BODY>

 

Поле адреси і властивість window.location

Поле адреси в браузері звичайно розташовується у верхній частині вікна і відображає URL завантаженого документа. Якщо користувач хоче перейти вручну до якої-небудь сторінці (набрати її URL), він робить це в полі адреси.

Властивість location об'єкта window саме є об'єктом класу Location. Клас Location, у свою чергу, є підкласом класу URL, до якого належать також об'єкти класів Area і Link. Об'єкти Location успадковують всі властивості об'єктів URL, що дозволяє отримати доступ до будь-якої частини схеми URL.

З метою сумісності з колишніми версіями JavaScript, у мові підтримується також властивість window.document.location, яке в даний час повністю дублює властивість window.location з усіма його властивостями і методами. Розглянемо тепер властивості і методи об'єкта window.location (подій, пов'язаних з цим об'єктом, ні).

Властивості об'єкта location

Їх простіше продемонструвати на прикладі. Припустимо, що браузер відображає сторінку, розташовану за адресою:

http://www.site.ru:80/dir/page.cgi?product=phone&id=3 # mark

Тоді властивості об'єкта location візьмуть наступні значення:

window.location.href = "http://www.site.ru:80/dir/page.cgi?product=phone&id=3 # mark"

window.location.protocol = "http:"

window.location.hostname = "www.site.ru"

window.location.port = 80

window.location.host = "www.site.ru:80"

window.location.pathname = "dir / page.cgi"

window.location.search = "? product = phone & id = 3"

window . location.hash = "# mark"

До властивостей об'єктів можна звертатися як за допомогою точкового нотації (як вище), так і за допомогою скобочной нотації, наприклад: window.location ['host'].

Методи об'єкта location

Методи об'єкта location призначені для управління завантаженням і перезавантаженням сторінки. Це управління полягає в тому, що можна або перезавантажити поточний документ (метод reload ()), або завантажити новий (метод replace ()).

Window.location.reload (true);

Метод reload () повністю моделює поведінку браузера при натисканні на кнопку Reload в панелі інструментів. Якщо викликати метод без аргументу або вказати його рівним true, то браузер перевірить час останньої модифікації документа і завантажить його або з кеша (якщо документ не був модифікований), або з сервера. Така поведінка відповідає простого натискання кнопки Reload браузера (клавіші F5 в Internet Explorer). Якщо в якості аргументу вказати false, то браузер перезавантажить поточний документ з сервера, незважаючи ні на що. Така поведінка відповідає одночасному натисканні клавіші Shift і кнопки браузера Reload (або Ctrl + F5 в Internet Explorer).

Використовуючи об'єкт location, перейти на нову сторінку можна двома способами:

window.location.href = "http://www.newsite.ru/ ";

window.location.replace (" http://www.newsite.ru/ ");

Різниця між ними - у відображенні цієї дії в історії відвідувань сторінок window.history. У першому випадку в історію відвідувань додасться новий елемент, що містить адресу "http://www.newsite.ru/", так що при бажанні можна буде натиснути кнопку Back на панелі браузера, щоб повернутися до колишньої сторінці. У другому випадку новий адресу "http://www.newsite.ru/" замістить колишній в історії відвідувань, і повернутися до колишньої сторінці натисканням кнопки Back вже буде неможливо.

Історія відвідувань (history)

Історія відвідувань сторінок World Wide Web дозволяє користувачеві повернутися до сторінки, яку він переглядав раніше в даному вікні браузера. Історія відвідувань в JavaScript трансформується в об'єкт window.history. Цей об'єкт вказує на масив URL-сторінок, які користувач відвідував і які він може отримати, вибравши з меню браузера режим Go. Методи об'єкта history дозволяють завантажувати сторінки, використовуючи URL з цього масиву.

<FORM> <INPUT TYPE="button" VALUE="Назад" onClick="history.back()"> </ FORM>

Існує також метод go (), що має цілочисельний аргумент і дозволяє перескакувати на кілька кроків вперед або назад по історії відвідувань. Наприклад, history.go (-3) перенесе нас на 3 кроки назад в історії перегляду.

Тип браузера (navigator)

Часто виникає завдання налаштування сторінки на конкретну програму перегляду (браузер). При цьому можливі два варіанти: визначення типу браузера на стороні сервера, або на стороні клієнта. Для останнього варіанту в арсеналі об'єктів JavaScript існує об'єкт window.navigator. Найважливіші з властивостей цього об'єкта перераховані нижче.

Таблиця 4.2. Основні властивості об'єкта window.navigator

Властивість

Опис

userAgent

Основна інформація про браузер. Передається серверу в HTTP-заголовку при відкритті користувачем сторінок

appName

Назва браузера

appCodeName

Кодова назва браузера

appVersion

Дані про версію браузера і сумісності

Розглянемо простий приклад визначення типу програми перегляду:

<FORM> <INPUT TYPE = button VALUE = "Тип навігатора"

onClick = "alert (window.navigator.userAgent );"></ FORM>

При натисканні на кнопку відображається вікно попередження, що містить значення властивості navigator.userAgent. Якщо це значення розібрати по компонентах, то може вийти, наприклад, таке:

navigator.userAgent = "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1)"

navigator.appName = "Microsoft Internet Explorer"

navigator.appCodeName = " Mozilla

"navigator.appVersion=" 4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1) "

Методи об'єкта window

Що можна зробити з вікном? Відкрити (створити), закрити (видалити), покласти його поверх всіх інших відкритих вікон (передати фокус). Крім того, можна управляти властивостями вікна і властивостями підлеглих йому об'єктів. Зосередимося на простих і найбільш популярних методах управління вікнами.

Alert ()

Метод alert () дозволяє видати вікно попередження, що має єдину кнопку "OK":

<A HREF="javascript:window.alert('Внимание')">

Повторіть запит! < / A>

Потрібно лише мати на увазі, що повідомлення виводяться системним шрифтом, отже, для отримання попереджень російською мовою потрібна локалізована версія ОС.

confirm ()

Метод confirm () дозволяє задати користувачеві питання, на який той може відповісти або позитивно (натиснувши кнопку "OK"), або негативно (натиснувши кнопку "Скасувати" або "Cancel", або просто закривши вікно запиту). Відповідно з діями користувача метод confirm () повертає значення true або false. Приклад:

<FORM NAME=f>

<INPUT TYPE = button NAME = b VALUE = "Натисніть цю кнопку"

onClick = "if (window.confirm ('Ви знаєте JavaScript?'))

    Document.fbvalue = 'Так. Запитати ще? ';

else document.fbvalue =' Ні. Запитати ще ?';">

</ FORM>

Всі обмеження для повідомлень російською мовою, які були описані для методу alert (), справедливі і для методу confirm ().

prompt ()

Метод prompt () дозволяє прийняти від користувача Рядок тексту. Синтаксис його такий:

prompt ("Рядок питання", "Рядок відповіді за замовчуванням")

Коли користувач введе свою відповідь (або залишить незмінним відповідь за замовчуванням) і натисне кнопку OK, метод prompt () поверне отриману рядок у якості значення, яке можна далі привласнити будь-якої змінної і потім розбирати її в JavaScript-програмі.

<FORM NAME=f>

<INPUT TYPE = button VALUE = "Відкрити вікно введення"

onClick = "document.fevalue =

    window.prompt ('Введіть повідомлення', 'Сюди') ; ">

<INPUT SIZE=30 NAME=e>

</ FORM>

window.open ()

Метод open () призначений для створення нових вікон. У загальному випадку його синтаксис виглядає наступним чином:

myWin = window.open ("URL", "імя_окна", "параметр = значення, параметр = значення ,...", замінити);

Перший аргумент задає адресу сторінки, що завантажується в нове вікно (можна залишити порожній рядок, тоді вікно залишиться порожнім). Другий аргумент задає ім'я вікна, яке можна буде використовувати в атрибуті TARGET контейнерів <A> і <FORM>. Як значення припустимі також зарезервовані імена _blank, _parent, _self, _top, сенс яких такий же, як в аналогічних значень атрибуту TARGET. Якщо імя_окна збігається з назвою вже існуючого вікна (або фрейма), то нове вікно не створюється, а всі наступні маніпуляції зі змінною myWin будуть застосовуватись до цього вікна (або фрейму).

Третій аргумент є не містить пробілів рядок, що представляє собою список параметрів та їх значень, перерахованих через кому. Можливі параметри перераховані в таблиці 4.3. Замість значень yes і no можна використовувати 1 і 0. Останній аргумент "замінити" є необов'язковим, приймає значення true і false і означає: чи слід новий URL додати history в якості нового елемента або замінити їм останній елемент history.

Метод window.open () повертає посилання на знову відкрите вікно, тобто . об'єкт класу Window. Його можна присвоїти змінної (що ми і зробили вище), з тим щоб потім можна було керувати відкритим вікном (писати в нього, читати з нього, передавати і прибирати фокус, закривати).

Таблиця 4.2. Основні властивості об'єкта window.navigator

Параметр

Значення

Опис

width

число

Ширина вікна в пікселах (не менше 100)

height

число

Висота вікна в пікселах (не менше 100)

left

число

Відстань від лівого краю екрана до лівого кордону вікна в пікселах

top

число

Відстань від верхнього краю екрана до верхньої межі вікна в пікселях

directories

yes / no

Наявність у вікна панелі папок (Netscape Navigator)

location

yes / no

Наявність у вікна поля адреси

menubar

yes / no

Наявність у вікна панелі меню

resizable

yes / no

Чи зможе користувач міняти розмір вікна

scrollbars

yes / no

Наявність у вікна смуг прокручування

status

yes / no

Наявність у вікна поля статусу

toolbar

yes / no

Наявність у вікна панелі інструментів

Наведемо два приклади відкриття нового вікна:

<FORM>

<INPUT TYPE = button VALUE = "Просте вікно"

onClick = "window.open ('', '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 ('', 'test2',

 'directories = yes, height = 200, location = yes,' +

 'menubar = yes, resizable = yes, scrollbars = yes,

 '+'status = yes, toolbar = yes, width = 200');">

</ FORM>

При натисканні кнопки "Просте вікно" одержуємо вікно з наступними параметрами:

При натисканні кнопки "Складне вікно" одержуємо вікно, де:

window.close ()

Метод close () дозволяє закрити вікно. Найчастіше виникає питання, яке з вікон, власне, слід закрити. Якщо необхідно закрити поточний, то:

window.close ();

self.close ();

Методи focus () і blur ()

Метод focus () застосовується для передачі фокусу у вікно, з яким він використовувався. Передача фокуса корисна як при відкритті вікна, так і при його закритті, не кажучи вже про випадки, коли потрібно вибирати вікна.

Метод setTimeout ()

Метод setTimeout () використовується для створення нового потоку обчислень, виконання якого відкладається на час (в мілісекундах), зазначене другим аргументом:

idt = setTimeout ("JavaScript_код", Time);

Типове застосування цієї функції - організація періодичної зміни властивостей об'єктів . Наприклад, можна запустити годинник у полі форми:

<HTML> <HEAD> <SCRIPT>

var Chasy_idut = false;

 

function myclock ()

{if

 (Chasy_idut)

 {d

   = new Date ();

   document.fcvalue =

   d.getHours ()+':'+

   d.getMinutes ()+':'+

   d.getSeconds

 ();}

setTimeout ( "myclock ();",

500);}

 

function FlipFlag ()

{Chasy_idut

 =! Chasy_idut;

 document.fbvalue = (Chasy_idut)?

  'Зупинити':

'Запустити';}

</ SCRIPT> </ HEAD>

<BODY onLoad="myclock();">

<FORM NAME = f>

Сьогодні:  NAME=c size=8> <INPUT

<INPUTTYPE=button name=b VALUE="Запустіть"

onClick="FlipFlag();">

</ FORM> </ BODY> </ HTML>

Приклад 4.2 . Годинник з використанням setTimeout ()

Зверніть увагу, що потік породжується (тобто викликається setTimeout ()) завжди, навіть у тому випадку, коли ми зупинили показ годин. Якщо б він створювався тільки при значенні змінної Chasy_idut = true, то годинник б просто не запустилися, так як на самому початку виконання скрипта ми встановили var Chasy_idut = false. Але навіть якщо б ми встановили на початку var Chasy_idut = true, то годинник б запустилися при завантаженні сторінки, а після зупинки потік б зник, і при наступному натисканні кнопки "Запустити" годинник продовжував би стояти.

Метод clearTimeout ()

Метод clearTimeout () дозволяє знищити потік, викликаний методом setTimeout (). Очевидно, що його застосування дозволяє більш ефективно розподіляти ресурси обчислювальної установки. Для того щоб використовувати цей метод у прикладі з годинником, нам потрібно модифікувати функції і форму:

<HTML> <HEAD> <SCRIPT>

var Chasy_idut = false;

var potok;

 

function StartClock ()

{d

 = new Date ();

 document.fcvalue =

  d.getHours ()+':'+

  d.getMinutes ()+':'+

  d.getSeconds ();

 potok = setTimeout ('StartClock () ; ', 500);

 Chasy_idut =

true;}

 

function StopClock ()

{clearTimeout

 (potok);

 Chasy_idut =

false;}

</ SCRIPT> </ HEAD> <BODY>

<FORM NAME=f>

Поточний час: <INPUT NAME=c size=8>

<INPUT TYPE = button VALUE = "Запустити" onClick = "if (! Chasy_idut) StartClock ();">

<INPUT TYPE=button VALUE="Остановіть" onClick="if(Chasy_idut) StopClock();">

</ FORM> </ BODY> < / HTML>

Приклад 4.3. Годинник з використанням setTimeout () і clearTimeout ()

У даному прикладі для зупинки годин використовується метод clearTimeout (). При цьому, щоб не породжувалося безліч потоків, перевіряється значення покажчика на об'єкт потоку.

Методи setInterval () і clearInterval ()

У попередніх прикладах для того, щоб потік запускався знову і знову, ми поміщали в функцію в якості останнього оператора виклик методу setTimeout (). Проте в JavaScript для цих цілей є спеціальні методи. Метод setInterval ("код_JavaScript", time) виконує код_JavaScript з періодом раз на time мілісекунд. Значення, що повертається - посилання на створений потік. Щоб зупинити потік, необхідно викликати метод clearInterval (потік).

Події об'єкта window

Зупинимося коротенько на подіях, пов'язаних з об'єктом window. Обробники цих подій звичайно поміщають як атрибут контейнера <BODY>.

<BODY onLoad="alert('Документ повністю загружен.');">

<BODY onUnload="myWin.close();">

<SCRIPT>

Function ff ()

{alert ('Виникла помилка. Зв'яжіться з Web-майстром.');}

 

window.onerror = ff;

 

Alert ('Привіт');

</ SCRIPT>

<BODY onFocus="alert('Спасібо, що знову вернулісь!');">

Змінні як властивості вікна

Глобальні змінні насправді є властивостями об'єкта window. У наступному прикладі ми відкриваємо вікно з ідентифікатором wid, заводимо в ньому глобальну змінну t і потім користуємося нею у вікні-батьку, посилаючись на неї як wid.t:

<HTML> <HEAD>

<SCRIPT>

wid = window.open ('' ,'',' width = 750, height = 100, status = yes ');

wid.document.open (); R = wid.document.write;

R (' <HTML> <HEAD> <SCRIPT> var t; <\ / SCRIPT> </ HEAD> ');

R (' <BODY> <H1> Нове вікно </ H1> </ BODY> </ HTML> ');

wid.document.close ();

</ SCRIPT>

</ HEAD>

<BODY>

<A HREF = "javascript:

wid.t = window.prompt ('Новий стан :','');

wid.status = wid.t; wid.focus (); void (0) ;

">Змінимо значення змінної t в новому вікні </ A>

</ BODY> </ HTML>

Приклад 4.4. Зміна змінної відкритого вікна

Об'єкт document

Об'єкт document є найважливішою властивістю об'єкта window (тобто повністю до нього потрібно звертатися як window.document). Всі елементи HTML-розмітки, присутні на web-сторінці, - текст, абзаци, гіперпосилання, картинки, списки, таблиці, форми і т.д. - Є властивостями об'єкта document. Можна сказати, що технологія DHTML (Dynamic HTML), тобто динамічна зміна вмісту web-сторінки, полягає саме в роботі з властивостями, методами і подіями об'єкта document (не рахуючи роботи з вікнами і фреймами).

Таблиця 4.3. Властивості, методи і події об'єкту document

Властивості

Методи

Події

URL

domain

title

lastModified

referrer

cookie

 

linkColor

alinkColor

vlinkColor

open ()

close ()

 

write ()

writeln ()

 

getSelection ()

 

getElementById ()

getElementsByName ()

getElementsByTagName ()

Load

Unload

 

Click

DblClick

 

MouseDown

MouseUp

 

KeyDown

KeyUp

KeyPress

Крім перерахованих у цій таблиці властивостей, об'єкт document має властивості, які є колекціями (форм, картинок, посилань і т.п.); таблиця 3.1 містить їх опис. Крім того, можна формувати необхідні колекції "на льоту" за допомогою зазначених вище методів. Так, document.getElementsByTagName ('P') є колекція всіх HTML-елементів (точніше, відповідних їм об'єктів) виду <P>, тобто абзаців. Аналогічно, document.getElementsByName ('important') видасть колекцію (об'єктів) HTML-елементів будь-яких типів, у яких був заданий атрибут NAME = "important". Нарешті, document.getElementById ('id5') видасть той HTML-елемент (якщо їх декілька, то перший), у якого був заданий атрибут ID = "id5".

З одним методом ми вже часто працювали: document.write () - він пише в поточний HTML-документ. Його модифікація document.writeln () робить те ж саме, але додатково додає в кінці символ нового рядка; це зручно, якщо потім потрібно читати згенерований HTML-документ очима. Якщо запис йде в HTML-документ нового вікна, відкритого за допомогою window.open (), то перед записом в нього потрібно відкрити потік на запис за допомогою методу document.open (), а по закінченні запису закрити потік методом document.close () . Після виконання останньої дії відбудеться подія Load (і зголоситься відповідний обробник події onLoad) у документа, а потім біля вікна.

Події об'єкта document аналогічні однойменним подіям об'єкта window (тільки у document вони відбуваються раніше), або їх зміст зрозумілий з їхньої назви, тому ми не будемо детально їх розбирати.

Зупинимося коротко на властивостях об'єкта document. Властивості linkColor, alinkColor і vlinkColor задають колір гіперпосилань - невідвіданих, активних і відвіданих, відповідно. Властивість URL зберігає адресу поточного документа (тобто строковий літерал, рівний window.location.href, якщо сторінка складається з єдиного документа, а не є набором фреймів). Властивість domain видає домен (воно аналогічно window.location.hostname). Властивість title видає заголовок сторінки (вказаний в контейнері <TITLE>), lastModified вказує на дату і час останньої модифікації файлу, в якому міститься даний HTML-документ (без урахування часу модифікації зовнішніх файлів - стильових, скриптів і т.п.). Властивість referrer видає адресу сторінки, з якої користувач прийшов на дану web-сторінку, клікнувши по посиланню.

137