Лекція 14. Об'єктна модель броузера.
Властивості об'єкту window
Поле статусу і властивість window.status
Поле адреси і властивість window.location
Властивості об'єкта location
Методи об'єкта location
Історія відвідувань (history)
Тип браузера (navigator)
Методи об'єкта window
Alert ()
confirm ()
prompt ()
window.open ()
window.close ()
Методи focus () і blur ()
Метод setTimeout ()
Метод clearTimeout ()
Методи setInterval () і clearInterval ()
Події об'єкта window
Змінні як властивості вікна
Об'єкт document
Розглядаються питання програмування властивостей вікна браузера, керування вікнами, а також робота з фреймами.
Об'єкт 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 має можливість працювати з цим полем як із змінним властивістю вікна. При цьому фактично з ним пов'язані два різних властивості:
window.status - значення поля статусу;
window.defaultStatus - значення поля статусу за замовчуванням.
Значення властивості 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>
При натисканні кнопки "Просте вікно" одержуємо вікно з наступними параметрами:
directories = no - вікно без панелі папок
height = 200 - висота 200 px
location = no - поле адреси відсутня
menubar = no - без меню
resizable = no - розмір вікна змінювати не можна
scrollbars = no - смуги прокручування відсутні
status = no - статусна рядок відсутній
toolbar = no - системні кнопки браузера відсутні
width = 200 - ширина 200 px
При натисканні кнопки "Складне вікно" одержуємо вікно, де:
directories = yes - вікно з панеллю папок
height = 200 - висота 200 px
location = yes - поле адреси є
menubar = yes - меню є
resizable = yes - розмір змінювати можна
scrollbars = yes - є смуги прокручування
status = yes - статусний рядок є
toolbar = yes - системні кнопки браузера є
width = 200 - ширина 200 px
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>.
Load - подія відбувається в момент, коли завантаження документа в цьому вікні повністю закінчилася. Якщо поточним вікном є фрейм, то подія Load його об'єкта window відбувається, коли в даному фреймі завантаження документа закінчилася, незалежно від стану завантаження документів в інших фреймах. Використовувати обробник даної події можна, наприклад, наступним чином:
<BODY onLoad="alert('Документ повністю загружен.');">
Unload - подія відбувається в момент вивантаження сторінки з вікна. Наприклад, коли користувач закриває вікно, або переходить з цієї Web-сторінки на іншу, клікнувши посилання або набравши адресу в адресному рядку, або при зміні адреси сторінки (властивості window.location) скриптом. Наприклад, при догляді користувача з нашої сторінки, ми можемо подбати про його зручність і закрити відкрите раніше нашим скриптом вікно:
<BODY onUnload="myWin.close();">
Error - подія відбувається при виникненні помилки в процесі завантаження сторінки. Якщо ця подія відбулася, можна, наприклад, вивести повідомлення користувачу за допомогою alert () або спробувати перезавантажити сторінку за допомогою window.location.reload (). У наступному прикладі ми призначаємо обробником події Error функцію ff (), яка буде видавати повідомлення. У тексті програми ми допустили помилку: слово Alert написано з великої літери (пам'ятаєте, що в JavaScript це неприпустимо?). Тому при відкритті цього прикладу виникне помилка і користувач отримає про це "дружнє" повідомлення.
<SCRIPT>
Function ff ()
{alert ('Виникла помилка. Зв'яжіться з Web-майстром.');}
window.onerror = ff;
Alert ('Привіт');
</ SCRIPT>
Focus - подія відбувається в момент, коли вікна передається фокус. Наприклад, коли користувач "розкриває" згорнуте раніше вікно, або (у Windows) вибирає це вікно браузера з допомогою Alt + Tab серед вікон інших додатків. Ця подія відбувається також при програмній передачі фокусу даного вікна шляхом виклику методу window.focus (). Приклад використання:
<BODY onFocus="alert('Спасібо, що знову вернулісь!');">
Blur - подія, протилежне попередньому, відбувається в момент, коли це вікно втрачає фокус. Це може статися в результаті дій користувача або програмними засобами - викликом методу window.blur ().
Resize - подія відбувається при зміні розмірів вікна користувачем або сценарієм.
Змінні як властивості вікна
Глобальні змінні насправді є властивостями об'єкта 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-сторінку, клікнувши по посиланню.
- Конспект лекцій з дисципліни
- Лекція 1. Принципи організації глобальної мережі Інтернет. Введення в Веб-технології: структура та принципи Веб.
- Предмет курсу
- Характеристика Інтернет
- Стек протоколів tcp / ip
- Система доменних імен dns
- Структура і принципи www
- Проксі-сервери
- Протоколи Інтернет прикладного рівня
- Лекція 2. Принципи побудови Веб-сайтів. Структура Веб застосуваннь. Характеристика мови html.
- Історія розвитку html
- Принципи гіпертекстової розмітки
- Групи тегів нтмl
- Лекція 3. Структура html-документа і елементи розмітки заголовка документа.
- Призначення заголовка
- Відображення змісту елемента title
- Основні контейнери заголовка
- Елемент розмітки head
- Елемент розмітки title
- Елемент розмітки base
- Елемент розмітки meta
- Елемент розмітки link
- Елемент розмітки style
- Елемент розмітки script
- Лекція 4. Контейнери тіла документа.
- Теги тіла документа
- Тіло документа - контейнер body
- Теги управління розміткою Заголовки
- Атрибут аlign
- Теги управління відображенням символів
- Теги, що управляють формою відображення
- Верхні і нижні індекси
- Атрибут sizе
- Атрибут соlоr
- Створення списків в html
- Атрибути маркерів у ненумерований списку
- Коментарі в мові html
- Гіпертекстові посилання
- Лекція 5. Графіка.
- Використання графіки в html.
- Атрибут src
- Атрибут alt
- Атрибут аlign
- Формати графічних файлів
- Активні зображення
- Зображення в мініатюрі
- Лекція 6. Таблиці html.
- Засоби опису таблиць в html
- Створення таблиць в html
- Атрибут nowrap
- Атрибут соlspan
- Атрибут rowspan
- Атрибут widтн
- Застосування порожніх клітинок
- Атрибут сеllраdding
- Атрибути аlign і valign
- Атрибут border
- Атрибут cellspacing
- Атрибут bgcolor
- Атрибут background
- Використання таблиць в дизайні сторінки
- Лекція 7. Використання html-форм
- Html-Форми
- Завдання форми - елемент form
- Атрибут cols
- Атрибут name
- Атрибут rows
- Алгоритм роботи фреймів
- Створення простої сторінки з фреймами
- Завдання фреймової структури
- Підготовка вмісту фрейма
- Підготовка фрейму main
- Атрибути rows і соls
- Атрибут rows
- Атрибут сols
- Атрибут nаме
- Атрибут маrginwidth
- Атрибут маrginheight
- Атрибут scrolling
- Атрибут noresize
- Атрибут srс
- Атрибут таrgет
- Вкладені і множинні кадрові структури
- Лекція 9. Призначення і застосування каскадних таблиць стилів css
- Призначення css
- Способи застосування css
- Перевизначення стилю
- Елемент style
- Посилання на зовнішній опис
- Імпорт опису стилів
- Селектор - ім'я елемента розмітки
- Селектор - ім'я класу
- Селектор - ідентифікатор об'єкта
- Спадкування й перевизначення
- Лекція 10. Блокові і стрічкові елементи css
- Блокові і стрічкові елементи
- Елемент div
- Елемент span
- Властивості блоків
- Відступи (margin)
- Набивання (padding)
- Рамка (border)
- Обтікання блоку тексту
- Лекція 11.Позиціонування у css
- Координати і розміри
- Абсолютні координати
- Відносні координати
- Лінійні розміри блоку
- Управління видимістю
- Порядок накладення і область видимості
- Порядок накладення блоків. Z-index
- Область видимості блоку. Clip
- Лекція 12. Призначення та застосування JavaScript.
- Метод join ()
- Метод reverse ()
- Метод sort ()
- Оператори мови
- Лекція 14. Об'єктна модель броузера.