Лабораторна робота № 4

Робота з об'єктом Document

4. Об'єкт document

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

Перед тим, як перейти до опису властивостей і методів об'єкта document, варто розглянути призначення окремих параметрів оператора <BODY>.

У загальному виді цей оператор виглядає в такий спосіб:

<BODY

BACKGROUND="Фонове_зображення"

BGCOLOR="Колір_тла"

TEXT="Колір_тексту"

LINK="Колір_непосещенных_посилань"

ALINK="Колір_активізованих_посилань"

VLINK=" Колір_посещенных_посилань "

onLoad="Оброблювач_події_при_завантаженні_документа"

onUnload="0бработчик_події_при_вивантаженні_документа"

</BODY>

Опис параметрів оператора приведено нижче:

Параметр Опис

BACKGROUND ЗА допомогою цього параметра можна вказати адреса URL зображення, що заповнює фон тіла документа

BGCOLOR Параметр BGCOLOR застосовується в тих випадках, коли тло документа необхідно розфарбувати в який-небудь колір. Колір задається у виді "#rrggbb", де константи rr, gg і bb - відповідно червоний, зелений і блакитний компоненти кольору. Значення констант може знаходитися в діапазоні від 0 до FF (у шестнадцатеричном виді). Колір може також задаватися символічними константами, такими, як red чи white

TEXT Колір тексту. Задається так само, як і колір тла BGCOLOR LINK Параметр LINK визначає колір посилань, розміщених у документі HTML і ще не посещенных користувачем

ALINK Цей параметр визначає колір посилань, обраних користувачем

VLINK Параметр VLINK визначає колір посилань, розміщених у документі HTML, що уже відвідувалися користувачем раніше

OnLoad ЗА допомогою параметра onLoad можна визначити оброблювач події, що одержить керування при завантаженні документа у вікно браузера

OnUnload Аналогічно попередньому, однак оброблювач події одержить керування при видаленні документа з вікна браузера

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

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

Перелічимо властивості об'єкта document, доступні сценарію JavaScript:

Властивість Опис

alinkColor Уміст параметра ALINK

anchors Масив локальних міток, розміщених у документі. Ці мітки застосовуються для організації посилань усередині документа

applets Масив об'єктів, що відповідають апплетам Java, розташованим у документі HTML

bgColor Уміст параметра BGCOLOR

cookie Значення cookie для поточного документа. Про те, що це таке, буде розказано в останній главі

embeds Масив об'єктів plug-in, що містяться в документі HTML

fgColor Уміст параметра TEXT

forms Масив, що містить у виді об'єктів усі форми, розташовані в документі HTML

images Масив растрових зображень, включених у документ

lastModified Дата останньої зміни документа HTML

linkColor Уміст параметра LINK

links Масив, що містить усі посилання в документі HTML

location Повна адреса URL документа HTML

referrer Адреса URL зухвалого документа HTML

title Заголовок документа, заданий за допомогою оператора <TITLE>

URL Повна адреса URL документа HTML

vlinkColor Уміст параметра VLINK

Об'єкт document може містити в собі інші об'єкти, доступні как властивості:

Властивість Опис

Anchог Локальна мітка, визначена в документі HTML за допомогою оператора <А>

Form Форма, обумовлена в документі HTML за допомогою оператора <FORM>

history Список адрес URL, посещенных користувачем

link чи текст зображення, що грають роль гіпертекстового посилання. Створюється за допомогою оператора мови HTML <A> у який додатково задаються оброблювачі подій' onClick і onMouseOver

4.2. Методи об'єкта document

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

Метод Опис

сlеаг Видалення вмісту документа з вікна перегляду

close Закриття потоку даних, відкритого для документа методом open. У вікні будуть відображені вес зміни вмісту документа, зроблені сценарієм після відкриття потоку

open Відкриття вихідного потоку для запису в документ НТМ даних типу MIME за допомогою методів write і writein

write Запис у документ довільної конструкції мови HTML

writeln Аналогічно попередньому, але наприкінці рядка додається символ нового рядка

4.3. Колірне оформлення документа

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

Сценарій змінив п'ять властивостей документа HTML - колір тла і тексту, а також кольору посещенных, не посещенных і обраних користувачем посилань (листинг 4.1).

Листинг 4.1. Файл chapter2/ColorLinks/ColorLinks.html

<HTML>

<HEAD>

<TITLE>Color Links</TITLE>

<!--

document.bgColor = "#00FF80";

document.fgColor = "#800080";

document.linkCoior = "#000000";

document.alinkColor = "#FF0000";

document.vlinkColor = "#4000FF";

//-->

</SCRIPT>

</HEAD>

<Н1>Зміна колірного оформлення</Н1>

<Р>Відвідаєте ці сервери:

<Р><A HREF="http: //www.glasnet. ru/~frolov/index.html">Hаша домашня сторінка</А>

<P><A HREF="http://www. auramedia. ru">Каталог програм Auramedia</A>

<P><A HREF="http://www.microsoft.corn/Java/">Сторінка cервера Microsoft про Java</A>

<P><A HREF="ColorLinks.html#локальный роздягнув ">Локальний розділ</А>

<HR>

<Н1><А NAME="Локальний розділ">Локальний розділ</А></H1>

<Р>Цей локальний розділ ви можете переглянути, навіть якщо ваш комп'ютер не підключений до Internet

</BODY>

</HTML>

Зверніть увагу, що сценарій перевизначає колір фона, заданий параметром BGCOLOR в операторі <BODY>:

document.bgColor = "#00FF80";

4.4. Посилання і метки в документі

Як вже розповідалося, для того щоб вставити в документ HTML чи посилання локальну мітку, необхідно використовувати оператор <А>. У загальному виді цей оператор представлений нижче

<A НRЕ=Адреса URL чи локальна мітка

NАМЕ="Ім'я локальної мітки"

ТАRGЕТ="Ім'я вікна"

onClick="06pa6oтчик події: щиглик по посиланню"

оnмоusеоvег="Оброблювач події: курсор над посиланням">

Текст посилання

</А>

Опис параметрів оператора <А> приведено нижче:

Параметр Опис

HREF Параметр HREF задає адреса URL чи ім'я локальної мітки документа, куди буде зроблений перехід по посиланню

NAМЕ Якщо зазначений параметр NAME, оператор <А> визначає локальну мітку. Значення цього параметра задає ім'я метки

TARGET Параметр TARGET задає ім'я вікна, куди буде завантажений документ при виконанні посилання. Це може бути ім'я існуючого вікна фрейму, визначеного за допомогою оператора <FRAMESET>, чи одне з наступних зарезервованих імен - _top, _parent, _self, чи _blank

OnClick За допомогою параметра onClick можна визначити оброблювач події, що одержить керування, коли користувач зробить щиглика лівою клавішею миші по посиланню

OnMouseOver Аналогічно попередньому, однак оброблювач події одержить керування, коли користувач розмістить курсор миші над посиланням

Для кожного посилання, розміщеної в документі HTML, створюється окремий об'єкт. Усі такі об'єкти знаходяться в об'єкті документа Document как елементи масиву links.

Сценарій JavaScript може визначити властивості кожного посилання, розташованої в документі HTML, аналізуючи елементи об'єкта links. От список цих властивостей:

Властивість Опис

bash Ім'я локального посилання, якщо вона визначена в адресі URL

host Ім'я вузла і порт, зазначені в адресі URL

hostname Ім'я вузла і доменне ім'я вузла мережі. Якщо доменне ім'я недоступне, замість нього вказується адреса IP

href Повна адреса URL

pathname Шлях до об'єкта, зазначений в адресі URL

port Номер порту, використовуваного для передачі даних із сервером, зазначеним у даному посиланні

protocol Рядок назви протоколу передачі данных (включающая символ "двокрапка"), зазначеного в посиланні

search Рядок запиту, зазначений в адресі URL після символу ?

target Значення параметра TARGET, задане в посиланні

length Кількість елементів у масиві links, то кількість посилань у поточному документі HTML

Приклад документа, з формою, списком і кнопкою Jump заповнює список посиланнями, розміщеними в документі HTML.

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

Тому що список посилань формується сценарієм динамічно, нові посилання, додані в документ HTML, з'являться в списку автоматично без додаткових зусиль по редагуванню сценарію.

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

Спочатку виводяться властивості першого посилання, що містить адресу головної сторінки нашого сервера Web у мережі Internet:

http://www.glasnet.ru/~frolov/index.html

host: www.glasnet.ru:80

hostname: www.glasnet.ru

href: http://www.glasnet.ru/~frolov/index.html

pathname: ~frolov/index.html

port: 80

protocol: http:

search:

target:

Тому що в цьому посиланні зазначена повна адреса URL, що включає шлях файлу документа index.html, то цей шлях записується у властивість з ім'ям pathname.

Хоча порт, з використанням якого встановлюється з'єднання із сервером Web, не зазначений, у властивості host і port записується значення, застосовуване для цієї мети за замовчуванням, а саме 80.

Можна розглянути наступне посилання:

http://www.auramedia.ru/

host: www.auramedia.ru:80

hostname: www.auramedia.ru

href: http://www.auramedia.ru/

pathname:

port: 80

protocol: http:

search:

target:

Тут шлях до файлу документа HTML не зазначена, тому властивість pathname містить порожній рядок.

У посиланні на сервер Microsoft зазначений шлях до каталогу Java:

http://www.microsoft.com/java/

host: www.microsoft.com:80

hostname: www.microsoft.com

href: http://www.microsoft.com/java/

pathname: Java/

port: 80

protocol: http:

search:

target: newwnd

Цей частковий шлях виявився записаним у властивість pathname. Kрім того, для відображення вмісту сервера Microsoft повинне бути створене нове вікно. Ім'я цього вікна задано як newwnd у параметрі TARGET оператора <А>. За допомогою цього оператора розміщене посилання в документі НTML. Ім'я вікна виявилося записане у властивість target.

Останнє посилання - це адреса електронної пошти:

mailto:frolov@glas.apc.org

host:glas.apc.org

hostname: glas.apc.org

href: mailto:frolov@glas.apc.org

pathname:

port:0

protocol: mailto:

search:

target:

У властивості protocol даного посилання записаний рядок "mailto:". Нижче розглянутий вихідний текст документа HTML, що містить сценарій JavaScript, що працює з посиланнями (листинг 4.2).

Листинг 4.2. Файл chapter2/LinksList/LinksList.html

<HTML>

<HEAD>

<TITLE>Links and Anchors</TITLE>

<!--

function urlJump()

{

var szNewURL="";

szNewURL=

.document.links[Sel.ListOfLinks.selected Index];

window.location.href=szNewURL;

}

//-->

</SCRIPT>

</HEAD>

<Н1>Перегляд посилань</Н1>

</SELECT>

</FORM>

<Р>Відвідаєте ці сервери:

<Р><А HREF="http://www.glasnet.ru/~frolov/index.html">Haшa домашня сторінка</А>

<BR><A HREF="http://www .auramedia.ru">Каталог програм Auramedia</A>

<BR><A HREF="http://www.microsoft.corn/Java/" TARGET="newwnd">Cтpaница сервера Microsoft про Java</A>

<Р>Пишіть нам за адресою: <А HREF="mailto:frolov@glas.арі.org">frolov@glas.apc.org</A>

<HR>

<Н1>Список посилань</Н1>

<Р>Цей список сформований динамічно сценарієм JavaScript</P>

<!--

elem=new Array();

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

{

elem[i]=new Option("Elem" + i, i, false, false);

Sel.ListOfLinks.options [i]=elem[i];

Sel.ListOfLinks.options[i].text=document.links[i];

document.write("<HR>");

var szText=document.links[i] + "<BR>";

document.write(szText.bold());

document.write("host: ".italics() + document.links[i].host + "<BR>");

document.write("hostname: ".italics() + document.links[i].hostname + "<BR>");

document.write("href: ".italics() + document.links[i].href + "<BR>");

document.write("pathname: ".italics() + document.links[i].pathname + "<BR>");

document.write("port: ".italics() + document.links[i].port + "<BR>");

document.write("protocol: ".italics() + document.links[i].protocol + "<BR>");

document.write("search: ".italics() + document.links[i].search + "<BR>");

document.write("target: ".italics() + documerit. links [i] .target + "<BR>");

}

Sel.ListOfLinks.selectedIndex=0;

//-->

</SCRIPT>

</BODY>

</HTML>

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

function urlJump()

{

var szNewURL="";

szNewURL =

document.links[Sel.ListOfLinks.selectedlndex];

window.location.href=szNewURL;

}

Список посилань, а також кнопка Jump, що служить для активізації обраного посилання, визначені в такий спосіб:

</SELECT>

</FORM>

Ім'я форми, необхідне сценарію JavaScript для доступу до списку і кнопки, визначено в параметрі NAME оператора <FORM> как Sel.

Список з ім'ям ListOfLinks створиться оператором <SELECT>. Спочатку в списку не має ні елемента. Всі елементи будуть додані в список сценарієм JavaScript.

Кнопка Jump активізує функцію urlJump, для чого в її визначенні зазначений оброблювач події onClick.

Функція urUump адресується до обраного елемента списку в такий спосіб:

szNewURL = document.links[Sel.ListOfLinks.selectedIndex];

Тут узята форма Sel і зазначена ім'я списку ListOfLinks как ім'я одного з властивостей форми. Номер виділеного елемента списку знаходиться у властивості списку з ім'ям selectedIndex.

Сценарій заповнює масив посилань links і список Sel.ListOfLinks таким чином, що перший елемент масиву links відповідає першому посиланню в списку, другий елемент масиву - другому елементу і т.д. Тому вираження Sel.ListOfLinks.selectedIndex є номером посилання масиві links, яку необхідно активізувати. Функція urlJump записує це посилання в змінну szNewURL, а потім установлює значення властивості window, location, href.

У сценарії JavaScript, визначеному в тілі документа HTML, створюється масив elem:

elem=new Array();

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

Далі в сценарії розташовується цикл по всіх посиланнях, розміщеним у документі HTML:

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

...

}

Кількість посилань знаходиться у властивості length об'єкта links, тому змінна циклу i змінює своє значення від 0 до document.links. length.

У циклі створюється новий елемент списку і записується в нього текст посилання:

elern[i] = new Option("Elem" + i, i, false, false);

Sel.ListOfLinks.options [ i] = elem[i];

Sel.ListOfLinks.options[i].text = document.links[i];

Текстовий рядок, що відповідає посиланню, витягається з масиву links как document. links[i].

Після запису в документ HTML розділової лінії сценарій записує в нього текст посилання, виділяючи его жирним шрифтом:

document.write("<HR>");

var szText=document.links [i] + "<BR>";

document.write(szText.bold());

Слідом за цим у документ HTML записуються усі властивості посилання, витягнуті з поточного елемента масиву links. Наприклад, ім'я вузла і номер порту витягаються і записуються в документ HTML у такий спосіб:

document. write ( "host: ".italics() + document.links[i].host + "<BR>");

Останнє, що робить сценарій уже після завершення циклу, - це виділення першого елемента в списку Sel. ListOfLinks:

Sel.ListOfLinks.selectedIndex=0;

Для цього номера виділюваного елемента (у даному випадку це 0) записується у властивість списку з ім'ям selectedIndex.

4.6. Убудований клас Math

4.6.1. Властивості

Усі властивості класу є математичними константами, тому сценарій JavaScript не може змінювати їхнє значення.

Ця властивість являє собою константу е. Приблизне значення цієї константи дорівнює 2,72. От приклад використання властивості Е:

var nЕ;

n = Math.E;

Тут записується в змінну n значення константи е.

РI

Властивість PI - це число п. Вона також є константою з приблизним значенням, рівним 3,14. Приклад використання властивості PI:

var nL;

var nR;

n = 2 * Math.PI * n;

Тут властивість PI використовується для обчислення довжини окружності по її радіусі. Обчислення виконується по наступній формулі:

l = 2п

де R - радіус окружності.

LN2

Властивість LN2 - константа зі значенням натурального логарифма числа 2, тобто ln2. Приклад використання:

var nValue;

nValue = Math.LN2;

LN10

Властивість LN10 - константа зі значенням натурального логарифма числа 10, тобто ln 10. Приклад використання:

var nValue;

nValue = Math.LN10;

LOG2E

Ця властивість є константою зі значенням, рівним логарифму числа 2 за основою е, то log_e2. Приклад використання:

var nValue;

nValue = Math.LOG2E;

LOG10E

Властивість LOG10E - це логарифм числа е за основою 10, тобто log₁₀e. Приклад використання:

var nValue;

nValue = Math.LOG10E;

SQRT2

Властивість SQRT2 - це значення квадратного кореня з двох. Приклад використання:

var nValue;

nValue = Math.SQRT2;

SQRT1_2

Властивість SQRT1_2 - це значення квадратного кореня з 0,5. Приклад використання:

var nValue;

nValue = Math.SQRTl_2;

4.6.2. Методи

Перелічимо методи класу Math.

abs

Обчислення абсолютного значення. Приклад використання:

var nValueAbs;

nValueAbs = Math.abs(nValue);

Тут у змінну nValueAbs записується абсолютне значення змінної nValue.

acos

Обчислення арккосінуса. Приклад використання:

var nValue;

nValue = Math.acos(nAngle);

asin

Обчислення арксінуса. Приклад використання:

var nValue;

nValue = Math.asin(nAngle);

atan

Обчислення арктангенса. Приклад використання:

var nValue;

nValue = Math.atan(nAngle);

ceil

Обчислення найменшого цілого значення, більшого чи рівного аргументу функції. Приклад використання:

var nValue;

nValue = Math.ceil(nArg);

cos

Обчислення косінуса. Приклад використання:

var nValue;

nValue = Math.cos(nAngle);

exp

Експонентна функція, значення якої дорівнює числу е, зведеному в ступінь аргументу функції. Приклад використання:

var nValueExp;

nValueExp = Math.exp(nValue);

floor

Обчислення найбільшого цілого значення, меншого чи рівного аргументу функції. Приклад використання:

vaг nValue;

nValue = Math.floor(nArg);

log

Обчислення натурального логарифма аргументу функції. Приклад використання:

var nValue;

nValue = Math.log(nArg);

max

Визначення найбільшого з двох значенні. Приклад використання:

var nValue1;

var nValue2;

var nValueMax;

nValueMax = Math.max(nVaiue1 nVaiue2);

min

Визначення найменшого з двох значень. Приклад використання:

var nVaiue1;

var nValue2;

var nValueMin;

nValueMin = Math.min(nVaiue1, nVaiue2);

pow

Зведення числа в заданий ступінь. Приклад використання:

var nValue;

nValue = Math.pow(2, 3);

Тут число 2 зводиться в ступінь 3, а результат, рівний восьми, записується в змінну nValue.

random

Метод random повертає випадкове число в інтервалі від 0 до 1. Приклад використання:

var nRandomValue;

nRandomValue = Math.random();

round

Метод round призначений для виконання округлення значення аргументу до найближчого цілого. Якщо десяткова частина числа дорівнює 0,5 чи більше цього значення, то виконується округлення у велику сторону, якщо менше - у меншу. Приклад використання:

var nValue;

nValue = Math.round(1.8);

Після виконання округлення значення nValue буде дорівнює двом.

sin

Обчислення сінуса. Приклад використання:

var nValue;

nValue = Math.sin(nAngle);

sqrt

Обчислення квадратного кореня від аргументу. Приклад використання:

var nValueSqrt;

nValueSqrt = Math.sqrt(nArg);

tan

Обчислення тангенса. Приклад використання:

var nValue;

nValue = Math.tan(nAngle);

4.7. Убудований клас Date

4.7.1. Конструктори класу Date

Для використання більшості методів класу Date необхідно створити об'єкт цього класу за допомогою одного з трьох конструкторів.

Конструктор першого виду викликається в такий спосіб:

var dtNewDate;

dtNewDate = new Date();

Тут створюється об'єкт Date, у якому зберігається інформація про поточну дату і час. Цей час задається за Гринвічем чи, користаючись більш сучасним визначенням, з використанням часу Universal Coordinated Time.

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

var dtNewDate;

dtNewDate = new Date(nMilliseconds);

Параметр nMilliseconds задає дату в мілісекундах, вважаючи від 1 січня 1970 року.

Конструктор третього виду призначений для роздільної установки компонентів дати й у багатьох випадках більш зручний для використання:

var dtNewDate;

dtNewDate = new Date (year, month, date, hours, min, sec, ms);

Параметри цього конструктора описані нижче:

Параметр Опис

year Рік, наприклад 1998 чи 2012

month Номер місяця від 0 (січень) до 11 (грудень)

date Календарна дата, задається в діапазоні від 1 до 31

hours Необов'язковий параметр, що задає перша година дня в діапазоні від 0 до 23. Ви зобов'язані вказувати цей параметр тілько в том випадку, якщо заданий параметр min

min Необов'язковий параметр, що задає хвилини в діапазоні від 0 до 59. Ви зобов'язані вказувати цей параметр тілько в тому випадку, якщо заданий параметр sec

sec Необов'язковий параметр, що задає секунди в діапазоні від 0 до 59. Ви зобов'язані вказувати цей параметр тілько в тому випадку, якщо заданий параметр ms

ms Необов'язковий параметр, що задає миллисекунды в діапазоні від 0 до 999

getDate

Визначення дати, що зберігається в об'єкті класу Date. Метод повертає значення календарної дати в діапазоні від 1 до 31. Приклад використання:

var dtNewDate;

var nDate;

dtNewDate = new Date();

nDate = dtNewDate.getDate();

getDay

Визначення номера дня тижня, що зберігається в об'єкті класу Date. Метод повертає 0 для неділі, 1 - для понеділка, і т.д. Приклад використання:

nDay = dtDate.getDay();

getHours

Визначення кількості годин, що пройшли після півночі. Приклад використання:

nHours = dtDate.getHours();

getMinutes

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

nMinutes = dtDate.getMinutes();

getMonth

Визначення кількості місяців, що пройшли із січня. Приклад використання:

nMonth = dtDate.getMonth();

getSeconds

Визначення кількості секунд, що пройшли з початку хвилини. Приклад використання:

nSeconds = dtDate.getSeconds();

getTime

Визначення часу для заданого об'єкта класу Date. Метод getTime повертає кількість миллисекунд, що пройшли з 1 січня 1970 року. Приклад використання:

nMilliseconds = dtDate.getTime();

getTimeZoneOffset

Визначення зсуву локального часу щодо часу за Гринвічем (у мілісекундах). Приклад використання:

nOffsetMilliseconds = dtDate.getTimeZoneOffset();

getYear

Метод getYear повертає рік, що зберігається в об'єкті класу Date. Приклад використання:

nYear = dtDate.getYear();

parse

Метод parse повертає кількість мілісекунд, що пройшли з 00 годин 00 хвилин 1 січня 1970 року по час, зазначений у параметрі функції. Для виклику цього методу вам не потрібно створювати об'єкт класу Date, а можна просто послатися на ім'я цього класу:

nMS = Date.parse(szDataString);

Через параметр szDataString ви можете вказати час, наприклад, так:

"12 Oct 1998 12:00:00"

"12 Oct 1998 12:00:00 GMT"

"12 Oct 1998 12:00:00 GMT+0330"

Перша з цих рядків задає локальну дату і час, друга - дату і час за Гринвічем, і, нарешті, остання - час і дату за Гринвічем сo зсувом на 3 час. і 30 хв.

Метод parse звичайно застосовують разом з конструктором об'єкта Date чи з методом setTime, що ми розглянемо нижче.

setDate

Метод setDate використовується для установки календарної дати в об'єкті клacca Date. Приклад використання:

dtNewDate.setDate(nDateNumber) ;

Параметр nDateNumber може приймати значення від 1 до 31.

setHours

Метод setHours використовується для установки кількості годин, що пройшли після півночі, в об'єкті класу Date. Приклад використання:

dtNewDate.setHours (nHours);

Параметр nHours може приймати будь-які позитивні чи негативні значення. При необхідності відбувається відповідне і зміна календарної дати, записаної в об'єкті класу Date.

setMinutes

Метод setMinutes використовується для установки кількостіхвилин, що пройшли після початку години, в об'єкті класу Date. Приклад використання:

dtNewDate.setMinutes(nMinutes);

Параметр nMinutes може приймати будь-які позитивні чи негативні значення. При необхідності відбувається відповідна зміна календарної дати, записаної в об'єкті класу Date.

setMonth

Метод setMonth використовується для установки номера місяця, що пройшов з початку року, в об'єкті класу Date. Приклад використання:

dtNewDate.setMonth(nMonth);

Параметр nMonth може приймати будь-які позитивні чи негативні значення. При необхідності відбувається відповідна зміна календарної дати, записаної в об'єкті класу Date.

setSeconds

Метод setSeconds використовується для установки кількості секунд, що пройшли з початку хвилини, в об'єкті класу Date. Приклад використання:

dtNewDate.setSeconds(nSeconds);

Параметр nSeconds може приймати будь-які позитивні чи негативні значення. При необхідності відбувається відповідна зміна календарної дати, записаної в об'єкті класу Date.

setTime

За допомогою методу setTime можна установити дату в об'єкті класу Date, що відповідає заданій кількості мілісекунд, що пройшли після 1 січня 1970 року. Приклад використання:

dtNewDate.setTime(nMilliseconds);

setYear

Метод setYear використовується для установки номера року, в об'єкті класу Date. Приклад використання:

dtNewDate.setYear(nsetYear);

toGMTString

Метод toGMTString призначений для перетворення дати в рядок, записаний у стандартному форматі часу за Гринвічем (GMT).

toLocaleString

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

UTC

Метод UTC перетворює дату, задану параметрами методу, у кількість мілісекунд, що пройшли з 1 січня 1970 року.

При використанні методу UTC, так само як і методу parse, немає необхідності створювати об'єкт класу Date:

nMillisecond = Date.UTC(year, month, date, hours, min, sec, ms);

Параметри методу UTC задаються в такий же спосіб, як і описані вище параметри конструктора об'єкта класу Date третього виду.

4.8. Убудовані функції

У цьому розділі перераховані декілька корисних убудованих функцій, які можна використовувати в сценаріях JavaScript.

eval

Функція eval призначена для перетворення текстового рядка в чисельне значення. Через єдиний параметр вона одержує текстовий рядок і обчислює її як вираження мови JavaScript. Функція повертає результат обчислення:

vаг nValue = Eval(szStr);

parseInt

Ця функція призначена для перетворення текстового рядка в целочисленне значення. Рядок передасться функції через параметр:

var nValue = parseInt(szStr);

parseFloat

Функція parseFloat намагається перетворити текстовий рядок у число з плаваючою крапкою. Текстовий рядок передається цієї функції через перший параметр, а підстава числення - через другий:

var nFloat = parseFloat(szStr, nRadix);

escape

За допомогою функції escape сценарій JavaScript може закодувати текстовий рядок із застосуванням URL-кодування. У цьому кодуванні спеціальні символи, такі, як "пробіл" чи "табуляція", перетворюються до наступного виду: %ХХ, де XX - шістнадцятеричний код символу. Приклад використання цієї функції:

var szURL = escape(szStr);

unescape

Функція unescape, виконує дію, прямо протилежне дії функції unescape - перекодує рядок з URL-кодування в звичайний текстовий рядок:

var szStr = unescape(szURL);

4.9. Плавна зміна кольору фону документа HTML

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

Складний на перший погляд ефект досягається надзвичайно просто: зміною властивості bgColor об'єкта document. У листинге 4.3 приведений приклад сценарію, що після завантаження документа HTML у вікно браузера змінює колір его тла з білого на чорний.

Листинг 4.3. Файл chapter2/ChangeBkg/ChangeBkg.html

<HTML>

<HEAD>

<TITLE>Color Links</TITLE>

<!--

var nRed = 255;

var nGreen = 255;

var nBlue = 255;

function colorShift()

{

var cmd = "colorShift()";

document.bgColor = "#" +

dec2hex(nRed) +

dec2hex(nGreen) +

dec2hex(nBlue);

if(nRed > 0)

{

nRed -= 10;

nGreen -= 10;

nBlue -= 10;

}

timer = window.setTimeout(cmd, 50);

}

function dec2hex(nDec)

{

var szHexTable = "0123456789ABCDEF";

var szResult = "";

var szBuf = "";

var nRem = 0;

var bNegative = false;

if(nDec < 0)

{

bNegative=true;

nDec = -nDec;

}

nTmp = nDec;

while(true)

{

nRem = nTmp % 16;

nTmp = nTmp / 16;

if(Math.floor(nTmp) < 16)

break;

szBuf = szHexTable.charAt(nRem);

szResult = szBuf.concat(szResult);

}

szBuf = szHexTable.charAt(nRem);

szResult = szBuf.concat(szResult);

if(Math.floor (nTmp) != 0)

{

szBuf = szHexTable.charAt(Math.floor(nTmp));

szResult = szBuf.concat(szResult);

}

if(bNegative == true)

return("-" + szResult);

else

return szResult;

}

//-->

</SCRIPT>

</HEAD>

<Н1>Зміна колірного оформлення</Н1>

<Р>Відвідаєте ці сервери:

<Р><А HREF="http: //www. g las net.ru/~frolov/index.htiTil">Haшa домашня сторінка</А>

<P><A HREF="http://www. auramedia.ru">Каталог програм Auramedia</A>

<P><A HREF="http://www.microsoft.com/java/">Cтpaница сервера Microsoft про Java</A>

<P><A HREF="ColorLinks.html#локальный роздягнув">Локальний розділ</А>

<HR>

<H1><A NАМЕ="Локальний розділ">Локальний розділ</А></Н1>

<Р>Цей локальньй роздягнув ви можете переглянути, навіть якщо ваш комп'ютер не підключений до Internet

<!--

colorShift();

//-->

</SCRIPT>

</BODY>

</HTML>

Робота сценарію починається після завантаження документа з виклику функції colorShift. Цей виклик розташований наприкінці області тіла документа HTML.

Функція поступово зменшує значення червоного, зеленого і блакитного компонента кольору. Початкові значення цих компонентів зберігаються в глобальних змінних nRed, nGreen і nBlue:

var nRed =255;

var nGreen = 255;

var nBlue = 255;

Значення кольору тла формується в такий спосіб:

document.bgColor = "#" + dec2hex(nRed) + dec2hex(nGreen) + dec2hex (nBlue);

Тут за допомогою функції dec2hex перетворюється десяткове значення колірного компонента в шестнадцатеричное. Ця функція буде описана докладно пізніше в розділі "Шестнадцатеричный калькулятор" гл.3.

Далі після установки кольору фону перевіряється значення червоного колірного компонента, і, якщо воно більше нуля, зменшується і воно, і значення інших колірних компонентів на 10:

if(nRed > 0)

{

nRed -= 10;

nGreen -= 10;

nBlue -= 10;

}

Для того щоб функція colorShift викликалася періодично, використовується метод setTimeout викликом його наприкінці функції:

var cmd = "colorShift()";

timer = window.setTimeout(cmd, 50);

У результаті функція colorShift буде викликатися кожні 50 мс.

4.10. Індивідуальні завдання на лабораторну роботу №4

4.10.1. Індивідуальне завдання для кожного студента. На основі листингов 4.1-4.3 підготувати і налагодити код JavaScript, у якому передбачити реалізацію індивідуального завдання. Вибір варіанта завдання здійснюється з таблиці 2 на підставі номера залікової книжки студента. У завданні кожного студента – дванадцять задач (по числу рядків). Номер варіанта кожної конкретної задачі виходить як залишок від розподілу числа з двох останніх цифр номера залікової книжки на число варіантів конкретної задачі, збільшений на «1». Наприклад, для номера зачіткі «ХХХ21», третьої задачі «Перетворення типів», що має п'ять варіантів, обираний варіант буде дорівнює:

Вар.=(21%5)+1=1+1=2.

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

Таблиця 2

Завдання	Варіант 1	Варіант 2	Варіант 3	Варіант 4	Варіант 5	Варіант 6	Варіант 7
Базовий вихідний листинг	Листинг 4.1	Листинг 4.2	Листинг 4.3	Листинг 4.2	Листинг 4.1	Листинг 4.2	Листинг 4.3
Початкові кольори посилань (непосещ./акт./ посещ.)	Синій/ жовтий/ ліловий	Чорний/ зелений/ фіолетовий	Сірий/ червоний/ зелений	Зелений/ чорний/ червоний	Жовтий/ синій/ ліловий	Жовтогарячий/ синій/ чорний	Синій/ чорний/ жовтогарячий
Модифіц-ние кольору посилань (непосещ./акт./ посещ.)	Чорний/ зелений/ фіолетовий	Зелений/ чорний/ червоний	Жовтогарячий/ синій/ чорний	Синій/ жовтий/ ліловий	Сірий/ червоний/ зелений	Синій/ чорний/ жовтогарячий	Жовтий/ синій/ ліловий
Для об'єкта браузера Document використовувати властивість	anchors	forms	images	links	forms	images	links
Для об'єкта браузера Document використовувати методи	open , write, close	open, writeln, close	open , clear, close	open , clear, write	open , clear, writeln	open, writeln, close	open , clear, close
Для об'єкта браузера Document використовувати оброблювачі	onClick	onMouseOver	onClick	onMouseOver	onClick	onMouseOver	onClick
Використовувати властивості і методи класу Math	E, abs	PI, acos	LN2, asin	LN10, atan	LOG2E, ceil	LOG10E, cos	SQRT2, exp
Використовувати методи класу Date	getDate, setDate	getYear, setYear	getHours, setHours	getMinutes, setMinutes	getMonth, setMonth	getSeconds, setSeconds	getTime, setTime
Використовувати убудовані функції	eval	parseInt	parseFloat	escape	unescape	parseInt	parseFloat
Виконати плавний перехід кольору тла документа	З білого на голубой	З жовтого на рожевий	Із салатового на жовтогарячий	З блакитного на сірий	З жовтогарячого на жовтий	З зеленого на рожевий	З блакитного на сірий