	Главная \| Случайная страница \| Контакты \| Мы поможем в написании вашей работы!

Теоретична частина. Спеціально для роботи з документами HTML в мові JavaScript є окремий об'єкт з назвою document

⇐ Предыдущая 14 15 16 17 18 19 20 212223 Следующая ⇒

8.1. Властивості об'єкта document

Спеціально для роботи з документами HTML в мові JavaScript є окремий об'єкт з назвою document. Користуючись його властивостями і методами, сценарій JavaScript може отримати інформацію про поточний документ, завантажений у вікно Web-броузера, а також управляти відображенням цього документа, що міститься.

Аналізуючи властивості об'єкта document, сценарій JavaScript може визначити значення атрибутів дескриптора <BODY>. Крім того, сценарію доступні локальні мітки, форми і зв'язки документа як елементи відповідних масивів, а також інформація із заголовка документа.

Властивості об'єкта document можна розділити по функціональному призначенню на три групи:

· загальні - властивості, що містять інформацію про самий документ і файл, в якому він зберігається на диску;

· властивості, пов'язані з кольором - властивості, дозволяючі задавати кольори окремих елементів документа;

· додаткові - властивості, що містять додаткову інформацію про документ.

Таблиця 8.1.

Властивість	Опис
alinkColor	Вміст атрибута ALINK дескриптора <BODY>
anchors	Масив локальних міток, розміщених в документі. Ці мітки застосовуються для організації посилань всередині документу
applets	Масив об'єктів, відповідних аплетам Java, розташованим в Web-странице
bgColor	Вміст параметра BGCOLOR
cookie	Значення cookie для поточного документа.
embeds	Масив об'єктів plug-in, що містяться в Web-странице
fgColor	Вміст параметра TEXT
forms	Масив, що містить у вигляді об'єктів всі форми, розташовані в Web-странице
images	Масив растрових зображень, включених в документ
lastModified	Дата останньої зміни Web-страницы
linkColor	Вміст параметра LINK
links	Масив, що містить всі посилання в Web-странице
location	Повна адреса URL Web-страницы
referrer	Адреса URL зухвалого документа Web-страницы
title	Заголовок документа, заданий за допомогою оператора <TITLE>
URL	Повна адреса URL Web-страницы
vlinkColor	Вміст параметра VLINK

Загальні властивості: розглянемо властивість document.lastModified.

Застосування даної властивості дозволяє автоматично виводити дату останньої модифікації документа.

Приклад 8.1.

<html>

<head>

<title>Вывод даты</title>

</head>

<body>

<h2><b>Последняя модификация документа:</b></h2>

document.write(document.lastModified)

</script>

</center>

</body>

</html>

Якомога бачити з наведеного прикладу, відображувалася повна дата, що включає і час модифікації.

Властивості, пов'язані з кольором: за допомогою цих властивостей можна одержувати і змінювати кольори тексту і фону сторінки, а також гіперпосилань.

Приклад 8.2.

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

<html><head><title>bgcolor</title></head><body text='#000000' bgcolor='#ffffff'><table border='0' align='center'><tr><td><form><input type=button value="КРАСНЫЙ" onClick="document.bgColor='#ff0000'"><input type=button value="ЖЕЛТЫЙ" onClick="document.bgColor='#ffff00'"><input type=button value="СИНИЙ" onClick="document.bgColor='#0000ff'"><input type=button value="ГОЛУБОЙ" onClick="document.bgColor='#87ceeb'"><input type=button value="КОРАЛЛОВЫЙ" onClick="document.bgColor='#ff7f50'"></form></td></table></body></html>

Приклад 8.3.

На ряді сторінок використовуються скриптові програми, що динамічно змінюють послідовність квітів фону для отримання різних візуальних ефектів. Відомо, колір фону задається або однією з представлених констант, або за допомогою шостнадцатерічного коду у форматі #RRGGBB, де RR - "вага" червоної складової кольору, GG - "вага" зеленої складової кольору, а BB - "вага" синьої складової кольору. Чим більше "вага" кожної складової, тим "ближче" колір до білого. Наприклад #000000 - це чорний колір #808080 - це сірий, а #ffffff - це білий. Тому, для того щоб можна було створити послідовність квітів, необхідні функції для перетворення кольору в шостнадцатерічне число.

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

//m - створює масив заданої довжини,

//який ініціализован нулями

function m(len){

this.length=len

for (i=1;i<=len;i++)

this[i]=0

return this

}

Наступним кроком буде реалізація функції для перетворення числа в його шостнадцатерічне представлення. Для цього виконуються наступні дії. Спочатку створюється масив n, який вміщує 16 елементів - цифри від 0 до 9 і букви: а, b, з, d, е, f:

n=new m(16)

for (i=0;i<10;i++)

n[i]=i

n[10]='а'

n[11]='b'

n[12]='с'

n[13]='d'

n[14]='е'

n[15]='f'

Тепер код самої функції перетворення:

//to - функція перетворення числа в шостнадцатерічне

function to(num){

if(num<0)

return "00"

else if(num>255)

return "ff"

else

return ""+n[Math.floor(num/16)]+n[num%16]

}

Дана функція працює таким чином: якщо передане число менше нуля, повертається 00, якщо число більше 255 - повертається ff (шостнадцатерічне представлення числа 255). Для інших чисел повертається шостнадцатерічне представлення. Функція для установки нового кольору фону по значеннях червоної, зеленої і синьої складових може бути реалізована таким чином:

function g(red,green,blue){

var xred=to(red)

var xgreen=to(green)

var xblue=to(blue)

document.bgColor="#"+xred+xgreen+xblue

}

Залишилося реализовать алгоритм плавної зміни фону:

//ch - плавна зміна фону документа

//от 255(білий) до 0 (чорний)

function ch(s){

for(х=0;х<=s;х++){

Math.floor(255*((s-х)/s)+0*(х/s))

Math.floor(255*((s-х)/s)+0*(х/s)))

}

Далі викликається функція сh в тілі документа, передаючи їй крок, з яким повинен змінюватися колір, - чим менше значення кроку, тим швидше здійснюється перехід від білого до чорного:

<body>

ch(500)

document.write('<font color="white"><center><b><h1>Готово!</b></h1>')

</script>

</body>

Повний текст HTML – файла, представлений таким чином:

<html>

<head>

<title>плавна зміна фона</title>

function m(len){

this.length=len

for (i=1;i<=len;i++)

this[i]=0

return this

}

n=new m(16)

for (i=0;i<10;i++)

n[i]=i

n[10]='а'

n[11]='b'

n[12]='с'

n[13]='d'

n[14]='е'

n[15]='f'

function to(num){

if(num<0)

return "00"

else if(num>255)

return "ff"

else

return ""+n[Math.floor(num/16)]+n[num%16]

}

function g(red,green,blue){

var xred=to(red)

var xgreen=to(green)

var xblue=to(blue)

document.bgColor="#"+xred+xgreen+xblue

}

function ch(s){

for(х=0;х<=s;х++){

Math.floor(255*((s-х)/s)+0*(х/s))

Math.floor(255*((s-х)/s)+0*(х/s)))

}

</script>

</head>

<body>

ch(500)

document.write('<font color="white"><center><b><h1>Готово!</b></h1>')

</script>

</body>

</html>

8.2. Методи об'єкта document. Колекція all

Сценарії JavaScript можуть викликати наступні п'ять методів, визначених в об'єкті document:

Таблиця 8.2.

Метод	Опис
clear	Видалення документа, що міститься, з вікна перегляду
close()	Закриття потоку даних, відкритого для документа методом open. У вікні відображують всі зміни документа, що міститься, зроблені сценарієм після відкриття потоку
open(тип MIME)	Відкриття вихідного потоку для запису в документ HTML даних типу MIME за допомогою методів write і writeln
write(вираз1...)	Запис в документ довільної конструкції мови HTML
writeln(вираз1...)	Аналогічно попередньому, але в кінці рядка добавляється символ нового рядка

Колекція all - це колекція всіх тегов і елементів, розташованих в тілі документа. Вона може використовуватися декількома способами. Наприклад, для отримання повного списку тегов, складових даний документ.

Приклад 8.4.

Хай є HTML - документ, в якому є текст, таблиця, список і форма з кнопкою

Для того, щоб переглянути вміст колекції all для даного документа, необхідно записати наступне:

function sall()

{

w=window.open("about:blank")

w.document.write("<р align='center'> Колекція all")

for (i=0;i<document.all.length;i++)

{

w.document.write(document.all(i).tagName,"<br>")

}

</script>

Відкривається нове вікно - вказівка імені about:blank гарантує наявність такого вікна - і потім в циклі виводиться в нього вміст кожного елемента колекції, який доступний через властивість tagName.

Виклик функції sall зв'язується з натисненням кнопки "Представити інформацію":

Ураховуючи все вище, запис програми представляється таким чином:

<html>

<head>

<title>html - документ</title>

function sall()

{

w=window.open("about:blank")

w.document.write("<р align='center'> Колекція all")

for (i=0;i<document.all.length;i++)

{

w.document.write(document.all(i).tagName,"<br>")

}

</script>

</head>

<body>

<р align="center">Документ - HTML

<tr>

</tr>

</table>

<ul>

<li>Строка 1

<li>Строка 2

<li>Строка 3

</ul>

<р>

<form>

<р align="center">

</form>

</body>

</html>

8.3. Об'єкти window

Представляє вікно або кадр Web-броузера. Оскільки код JavaScript інтерпретується в контексті об'єкта Window, в якому він виконується, цей об'єкт повинен містити посилання (або посилання на посилання) на всі інші необхідні об'єкти JavaScript (тобто він є коренем ієрархії об'єктів JavaScript).

Об'єкт window має властивості, що описують розміри вікна, розташовані у вікні фрейми, ім'я вікна, вміст рядки стану вікна і інші характеристики. В більшості своїй ці властивості відносяться до об'єкта, відповідного даному вікну.

В клієнтському варіанті JavaScript для звернення до об'єкта Window, ніякий спеціальний синтаксис не потрібен, і до властивостей цього об'єкта можна звертатися як до перемінним (тобто можна указати не вікно. document, а просто document). Аналогічним чином методи об'єкта Window, який відповідає поточному вікну, можна використовувати як функції.

Таблиця 8.3.

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

Властивість	Опис
parent	повертає батьківське вікно для даного вікна
self	повертає посилання на поточне вікно
top	повертає посилання на саме ближнє до користувача вікно
name	повертає ім'я вікна, задане тегом <frameset>
opener	повертає вікно, що створило дане вікно
closed	указує на те, що вікно закрито
status	задає текст, що відображувався в статусній панелі
defaultStatus	повертає текст, що відображувався в статусній панелі
returnValue	дозволяє події або діалоговій панелі повертати значення
clientInformation	повертає посилання на об'єкт navigator
document	повертає посилання на об'єкт document
event	повертає посилання на глобальний об'єкт event
history	повертає посилання на об'єкт history
location	повертає посилання на об'єкт location
navigator	повертає посилання на об'єкт navigator
screen	повертає посилання на глобальний об'єкт screen

Серед методів, визначених в об'єкті window, слід зазначити методи, призначені для відкриття нових вікон і закриття існуючих, для відображення на екрані найпростіших діалогових панелей з повідомленнями і методи для установки таймера:

Таблиця 8.4.

Метод	Опис
alert(повідомлення)	Відображення діалогової панелі Alert з повідомленням і кнопкою ОК
close()	Закриття вікна
confirm(повідомлення)	Відображення діалогової панелі Confirm з кнопками ОК і Cancel. У випадку, якщо натиснута кнопка OK, метод повертає true, якщо Cancel – повертає false.
open(адрес URL, им`я вікна, параметри) окна)	Відкриття вікна
prompt(повідомлення, початковий рядок)	Відображення діалогової панелі Prompt з полем введення. Метод повертає значення введеного рядка.
setTimeout(cmd затримка)	Установка таймера: періодично через час затримка (в мілісекундах) буде викликатися вираз cmd. Метод повертає ідентифікатор таймера idTimer
clearTimeout(idTimer)	Скидання таймера з ідентифікатором idTimer.
moveTo(coordX, coordY)	Пересуває позицію вікна (лівий верхній ріг) до заданих координат
moveBy(offsetX, offsetY)	Пересуває позицію вікна (лівий верхній ріг) на задану кількість пікселів
scrollTo(coordX, coordY)	Прокручує позицію вікна (лівий верхній ріг) до заданих координат
scrollBy(offsetX, offsetY)	Прокручує позицію вікна (лівий верхній ріг) на задану кількість пікселів
resizeTo(coordX, coordY)	Збільшує розмір вікна (лівий верхній ріг) до заданих координат
resizeBy(offsetX, offsetY)	Збільшує розмір вікна (лівий верхній ріг) на задану кількість пікселів

З об'єктом класу window пов'язано дві події - onLoad і onUnload. Перше з них виникає, коли Web-броузер закінчує завантаження вікна або всіх вікон фреймів, визначених оператором <FRAMESET>, а друге - коли користувач завершує роботу з документом HTML.

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

8.4. Робота з вікнами.

Створення нових вікон: одне з призначень об'єкта вікна - це створення нового вікна. Нове вікно броузера створюється за допомогою методу window.open(). Метод window.open() має ряд додаткових аргументів, які дозволяють задати місцеположення вікна, його розмір і тип, а також указують, чи повинне вікно мати смуги прокрутки, смугу команд і т. п. Крім цього можна задавати і ім'я вікна.

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

nw=window.open('URL', 'NAME', 'PARAMETR')

Переменная nw зберігає дані нового об'єкта window. Ее ім'я можна використовувати з методами і властивостями створеного об'єкта window. Перший параметр методу window.open() - це URL документа, завантажуваного у вікні. Якщо його не заповнити, то вікно залишиться порожнім. Другий параметр визначає назву вікна (NAME). Це ім'я використовується як значення параметра TARGET у тегов <FORM> і <А>. Третій параметр представляє список необов'язкових опцій, розділених комі. З їхньою допомогою визначаєте вид нового вікна: наявність в ньому панелей інструментів, рядка стану і інших елементів.

Всі можливі значення параметри вікна наведені в таблиці:

Таблица 8.5.

Параметр

Значення

Опис

fullscreen

yes	no

указує, чи показується нове вікно на повний екран або як звичайне вікно. За умовчанням показується звичайне вікно

channelmode

yes	no

дозволяє указати, чи відображувалася смуга каналів

toolbar

yes	no

дозволяє указати, чи відображувалася смуга кнопок

location

yes	no

дозволяє указати, чи відображувалася смуга для введення адреси

directories

yes	no

дозволяє указати, чи відображувалася смуга кнопок для вибору каталогів

status

yes	no

дозволяє указати, чи відображувалася смуга статусу

menubar

yes	no

дозволяє указати, чи відображувалася смуга меню

scrollbars

yes	no

задає відображення горизонтальної і вертикальної смуг прокрутки

resizable

yes	no

дозволяє указати, чи може вікно змінювати свій розмір

width

yes	no

задає ширину вікна в пикселах. Мінімальне значення - 100

height

yes	no

задає висоту вікна в пикселах. Мінімальне значення - 100

top

yes	no

задає вертикальну координату лівого верхнього рогу вікна

left

yes	no

задає горизонтальну координату лівого верхнього рогу вікна

Закриття вікон: метод window.close() закриває вікно.

Розглянемо приклад: вимагається створити програму, що дозволяє відкривати і закривати вікна за допомогою клацань кнопками миші. Наведемо два приклади.

Приклад 8.5.

<html>

<head>

<title>создание окна</title>

</head>

<body>

<h1>Создание нового окна</h1>

<hr>

для открытия и закрытия окна используйте эти кнопки

<hr>

<input type="button" value="Открыть новое окно"

onClick="NewWin=window.open('', 'NewWin', 'toolbar=no

status=no, width=100, height=100')">

<р>

<р>

</form>

<hr>

</body>

</html>

Якщо клацнути по кнопці "Открыть новое окно" - створится нове вікно із заданими параметрами.

Якщо необхідно, щоб в створене вікно завантажився вже існуючий файл, то запис фрагмента програми повинен виглядати таким чином:

onClick="NewWin=window.open('а:/java_10/java_01.htm', 'NewWin', 'toolbar=no, status=no, width=100, height=100')">

Якщо клацнути по кнопці "Закрыть новое окно"- нове вікно закриється. Якщо клацнути по кнопці "Закрыть главное окно" - то заздалегідь відображується повідомлення.

Якщо користувач вибере "Да", то головне вікно буде закрито.

Приклад 8.6

Розглянемо ще один приклад, використовуючи функцію.

<html>

<head>

<title>создание окна</title>

function win(){

NewWin=open('', 'NewWin', 'width=200, height=200, status=yes, toolbar=yes, nenubar=yes')

}

function win1(){

NewWin=NewWin.close()

}

</script>

</head>

<body>

<h1>Создание нового окна</h1>

<hr>

Для открытия и закрытия окна используйте эти кнопки

<hr>

<р>

</form>

<hr>

</body>

</html>

NewWin=open('а:/java_10/java_01.htm', 'NewWin', 'width=200, height=200, status=yes, toolbar=yes, nenubar=yes')

В наведених прикладах розмір створюваного вікна не можна змінити, а значить не можна переглянути повністю інформацію, розташовану в ньому (розмір вікна дуже малий). Тому задамо ряд команд, дозволяючих компенсувати це.

1. Завдання смуг прокрутки:

NewWin=open('а:/java_10/java_01.htm', 'NewWin', 'width=200, height=200, status=yes, toolbar=yes, nenubar=yes, scrollbars=yes')

2. Завдання можливості зміни розміру вікна за допомогою миші:

NewWin=open('а:/java_10/java_01.htm', 'NewWin', 'width=200, height=200, status=yes, toolbar=yes, nenubar=yes, resizable=yes')

8.5. Тимчасові затримки

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

Зауваження: тимчасова затримка не викликає припинення виконання сценарія. Вона тільки визначає час, через котрое буде виконуватися наступна після методу setTimeout() команда. під час очікування настання моменту виконання необхідної команди броузер продовжує скоювати інші дії, для яких тимчасова затримка не визначена.

Тимчасова затримка починає роботу при виклику методу setTimeout(). Він має два параметри: перший - це оператор JavaScript (або група операторів), ув'язнений в дужки. Другий параметр - цей час затримки в мілісекундах (тисячних частках секунди). Приклад: z=window.setTimeout("alert('Ваше время истекло')", 5000) В даному прикладі задана команда відображення попередження із затримкою в 5 секунд.

Зауваження: подібно обробникам подій, оператори тимчасової затримки використовують лапки для виділення операцій, що виконуються. Тому, при введенні текстових значень в цих операторах, використовуйте одинарні лапки (апострофи).

Переменная z має власне ім'я і представляє собою ідентифікатор тимчасової затримки. Це дозволяє в одному сценарії використовувати декілька різних тимчасових затримок.

Приклад 8.7:

<html>

<head>

<title>временные задержки</title>

function wz(){

document.write('Ваше время истекло')

}

function demo(){

//вызвать функцию wz через 5 секунд

window.setTimeout('wz()', 5000)

}

demo()

</script>

</head>

<body>

</body>

</html>

Для виконання дій, що повторюються з певним інтервалом часу, використовується метод window.setInterval().

Після виконання програми через кожні 5 секунд видається повідомлення:

Приклад 8.8:

<html>

<head>

<title>Временные задержки</title>

function wz(){

window.alert('Прошло 5 секунд')

}

function demo(){

//вызывать функцию wz каждые 5 секунд

window.setInterval('wz()', 5000)

}

demo()

</script>

</head>

<body>

</body>

</html>

Методи window.clearTimeout() і window.clearInterval() відміняють дії методів window.setTimeout() і window.setInterval()

8.6.Отображение діалогових панелей

Об'єкт window використовує три методи відображення повідомлень:

1.

Після виконання програми видається повідомлення:

метод alert()

Приклад 8.9

<html>

<head>

<title>метод confirm()</title>

if (window.confirm("Закрыть текущее окно"))

{

window.close()

}

</script>

</head>

<body>

</body>

</html>

При виборі кнопки "OK" - ще раз повторюється запит:

Якщо користувач вибирає кнопку "Да" - то веб - сторінка закривається.

8.7. Модальні діалогові панелі

Для відображення модальних діалогових панелей використовується метод window.showModalDialog() В загальному вигляді даний метод виглядає таким чином:

d=window.showModalDialog('URL','ARG','PARAMETR')

де

URL - адреса діалогової панелі. Вказівка порожнього рядка (' ') неприпустимо
ARG - необов'язковий список аргументів будь-якого типу
PARAMETR - необов'язковий список параметрів

Таблица 8.6

Параметр

Значення

Опис

dialogWidth

число

задає ширину діалогової панелі

dialogHeight

число

задає висоту діалогової панелі

dialogTop

число

задає вертикальну координату лівого верхнього угла діалогової панелі

dialogLeft

число

задає горизонтальну координату лівого верхнього угла діалогової панелі

center

yes	no

задає вирівнювання діалогової панелі по центру екрану

Приклад 8.10.

Пусть требуется по нажатию кнопки вызвать диалоговую панель для ввода пароля. Введенный пароль возвращается запрашивавшей странице.

Создадим index.htm - файл (даний файл є початковим):

<html>

<head>

<title>index.htm</title></head>

<body>

function p()

{

При перегляді файла index.htm на екрані броузера відображувалася кнопка: "Жми":

s=window.showModalDialog('ss.htm',

null, 'dialogWidth:15em, dialogHeight:34em,center:1')

alert('password='+s)

}

</script>

<form>

</form>

</body>

</html>

Створимо файл - ss.htm:

<html>

<head>

function w()

{

window.returnValue=window.document.all.s.value

window.close()

}

</script>

<form>

Введите пароль:

</form>

</body>

</html>

Розглянемо більш детально даний приклад: при натисненні на кнопку "Жми" викликається функція р(), в якій викликається метод вікно.showModalDialog(), де відкривається діалогова панель, описана у файлі ss.htm.

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

В діалоговій панелі видається введений користувачем пароль.

8.8. Відображення довідкової інформації

Для відображення довідкової інформації використовується метод вікно.showHelp(). Наприклад:

Справка

</button>

Цей метод також може використовуватися для відображення файлів WinHelp - в цьому випадку як перший параметр указується ім'я *.hlp - файла.

При виконанні програми на екрані відображується наступна інформація:

8.9. Створення діалогових вікон

Приклад 8.11.

Приклад програми, що відображувала діалогові панелі:

<html>

<head>

<title>дополнительный материал</title>

</head>

<body>

<h1>Дилоговые окна</h1>

<hr>

Для тестировании используйте кнопки, приведенные ниже

<hr>

<p>

<input type='button' value='Подтверждение' onClick="temp=window.confirm('Правильно?');

window.status=(temp)?'confirm:true':'confirm:false'">

<p>

<input type='button' value='Запрос' onClick="var temp=window.prompt('Введите текст:',

'Значение по умолчанию');

window.status=temp">

</form>

<br>

</body>

</html>

При натисненні на кнопку Сообщение, відображувалася діалогова панель:

При натисненні на кнопку Подтверждение, відображувалася діалогова панель:

При натисненні на кнопку Запрос, відображувалася діалогова панель:

⇐ Предыдущая 14 15 16 17 18 19 20 212223 Следующая ⇒

Дата публикования: 2015-04-10; Прочитано: 324 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!

studopedia.org - Студопедия.Орг - 2014-2024 год. Студопедия не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования (0.075 с)...