МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

ОДЕСЬКИЙ НАЦІОНАЛЬНИЙ МОРСЬКИЙ УНІВЕРСИТЕТ

КАФЕДРА "ТЕХНІЧНА КІБЕРНЕТИКА"

МОВА ПРОГРАМУВАННЯ JAVASCRIPT

Навчальний посібник
з дисципліни
"Веб-технології і веб-дизайн"

Одеса-2015
 Зміст

Основи JavaScript ........................................................................................................ 3

Змінні і типи даних в JavaScript ............................................................................. 3
Перетворення типів ................................................................................................. 4
Включення скриптів JavaScript в HTML-документ.............................................. 5
Виведення даних ...................................................................................................... 5
Метод alert() .......................................................................................................... 5
Метод write() ......................................................................................................... 6
Введення даних ........................................................................................................ 8
Метод confirm() ..................................................................................................... 8
Метод prompt () ..................................................................................................... 9
Оператори мови JavaScript .................................................................................... 10
Коментарі ............................................................................................................ 10
Арифметичні оператори .................................................................................... 10
Оператори присвоєння ....................................................................................... 11
Оператори порівняння ....................................................................................... 11
Логічні оператори ............................................................................................... 11
Оператори умовного переходу.......................................................................... 12
Оператори циклу ................................................................................................ 14
Функції ....................................................................................................................... 17
Вбудовані об'єкти ...................................................................................................... 19
Об'єкт String ............................................................................................................ 19
Об'єкт Array ............................................................................................................ 24
Об'єкт Math ............................................................................................................. 29
Об'єкт Date .............................................................................................................. 31
Основи створення сценаріїв. Обробка подій .......................................................... 35
Об'єктна модель документу (DOM) ........................................................................ 38
Колекція all ............................................................................................................. 39
Об'єкт form .............................................................................................................. 42
Об'єкт window......................................................................................................... 45
Об'єкт document ...................................................................................................... 52

2
Основи JavaScript

JavaScript - це мова для написання сценаріїв, розроблена компанією

Netscape. За допомогою мови JavaScript ми можемо створювати інтерактивні
веб-сторінки найбільш зручним і ефективним способом. Щоб запустити скрипт,
написаний на JavaScript, потрібен браузер з активованою здатністю
розпізнавати JavaScript.
Сценарій (скрипт) - програма, яка розширює можливості мови HTML.
Скрипти обробляються (інтерпретуються) браузером одночасно з кодом HTML.
Прикладами програм на JavaScript можуть служити програми, які
перевіряють введені користувачем дані або виконують якісь дії при відкритті
або закритті документу. Такі програми можуть реагувати на дії користувача -
натиснення кнопок "миші", введення даних в екранній формі або переміщення
"миші" по сторінці. Більше того, JavaScript-програми можуть управляти самим
браузером і атрибутами документу.

Змінні і типи даних в JavaScript

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

від "A" до "Z", від "a" до "z", цифр від "0" до "9", а також символ підкреслення
"_". При цьому першим символом імені не може бути цифра, а заголовні і
рядкові букви відрізняються (тобто імена MyVariable і myvariable відносяться
до різних змінних).
Існує три прості типи даних: числовий, логічний і строковий, а також два
складені типи даних: об'єкти і масиви.
Числові дані можуть задаватися в довільній формі, наприклад, 1.349, 12,
.0529, - 1.5e10. Запис цілих чисел можливий у вісімковій (починаються з 0) або
шістнадцятиричній (починається з 0x) формі. Якщо в ході операцій виникає
помилка (наприклад, при діленні на нуль), то змінна набуває значення NaN
(not-a-number, не число).
Логічні дані можуть набувати тільки два значення: true і false.
Строкові дані це послідовність будь-яких символів, цифр і спеціальних
символів, розміщених в одинарні або подвійні лапки. Можна вкладати лапки
одного типу в лапки іншого.
Об'єкти є складеним типом даних. Число властивостей об'єкту
необмежено, можна визначати нові властивості або ж використати зумовлені.
Властивості мають свою назву і значення. Доступ до властивостей об'єкту
здійснюється за допомогою символу точка ".". Наприклад, в наступному записі
властивості name об'єкту person присвоюється значення Petrov:

person.name = "Petrov";

Об'єкти створюються за допомогою оператора new:

var person = new Object();

3
 Існує ряд зумовлених об'єктів. Можна створити новий об'єкт, що наслідує
властивості вже існуючого об'єкту таким чином (на прикладі об'єкту Date):

var today = new Date();

Масив представляє тип даних, до значень яких можна звернутися по

індексу. Першому елементу масиву відповідає індекс нуль. Для створення
порожнього масиву використовується оператор new Array(). Для визначення
масиву розмірності n використовується оператор new Array(n). Наприклад:

var a = new Array();

var b = new Array(5);
a[0] = 10;
b[0] = -5;
b[1] = a[0] + b[0];

Перетворення типів

Мова JavaScript не є мовою, що жорстко типізується, як, наприклад,

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

s = 5;

тобто задати їй числове значення, а пізніше у іншому місці скрипта присвоїти

їй строкове значення:

s = "Це строкова змінна";

Якщо у вираженні є присутніми змінні числового і строкового типів,

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

a = 7+" разів відміряй, "+1+" раз відріж"

буде рядок "7 разів відміряй, 1 раз відріж".

Змінні в JavaScript можна не описувати в тілі скрипта, проте, при
використанні локальної змінної усередині функції, оголошення змінної
обов'язкове. Для опису локальної змінної використовується ключове слово var:

var i;
var x = 10, y = 20;
var str = 'Hello world';

4
Включення скриптів JavaScript в HTML-документ

Створимо елементарну програму на мові JavaScript. Відкрийте текстовий

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

<html>
<head>
<script type="text/javascript">
document.write("Hello,world!");
</script>
</head>
</html>

Збережіть цю програму у файлі з ім'ям hello.htm. У вікні браузеру

побачимо текст "Hello, world!".
Текст програми на мові JavaScript вставляється безпосередньо у текст
HTML-сторінки між тегами <script> і </script>. Тег <script> повідомляє
браузер про те, що усередині знаходиться виконуваний скрипт. Атрибут type
визначає тип вмісту тега <script>. Атрибут може бути відсутнім, але з точки
зору стандарту його слід вказати.
Зазвичай javascript-код взагалі не пишуть в HTML-сторінці, а
підключають окремий файл із скриптом:

<script src="script.js"></script>

При цьому файл script.js містить javascript-код, який інакше міг би

знаходитися усередині тега <script>. Це дуже зручно, тому що один і той же
файл із скриптами можна підключати на різних сторінках.
Щоб підключити декілька скриптів, використайте декілька таких тегів:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>

Введення і виведення даних

Виведення даних

Мова JavaScript надає два способи виведення даних.

Метод alert()

За допомогою методу alert() можна відображати на екрані клієнтського

браузеру невеликі за розміром повідомлення - ці повідомлення з'являються в
діалоговій панелі, що містить кнопку Ok. Натиснення цієї кнопки призводить
до закриття діалогової панелі. Ми називатимемо таку діалогову панель панеллю
повідомлень.
Наведемо приклад простого повідомлення.
5
<script type="text/javascript">
alert('Приклад виведення повідомлення в панелі повідомлень');
</script>

На екрані результат виконання цього скрипта виглядає таким чином (рис.1).

Рисунок 1 - Виведення повідомлення методом alert()

Діалогове вікно, виведене на екран методом alert(), можна прибрати,

клацнувши на кнопці ОК. До тих пір, поки ви не зробите цього, перехід до
раніше відкритих вікон неможливий. Вікна, що мають властивість зупиняти усі
подальші дії користувача і програм, називаються модальними. Таким чином,
вікно, що створюється методом alert(), є модальним.

Метод write()

Цей метод представляється об'єктом document. Детальніше з об'єктом

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

<script type="text/javascript">
document.write('Приклад виведення повідомлення у вікно браузеру');
</script>

У вікні браузеру відобразиться наступне (рис.2).

Рисунок 2 - Виведення повідомлення методом write()

6
 Рядок, що виводиться, може містити і теги мови HTML. В цьому випадку
браузер виведе цей рядок точно так, як якби вона була розміщена
безпосередньо в HTML-документі.
Наведемо приклад.

<script type="text/javascript">
document.write('<H1><I>Привіт</I></H1>');
</script>

На екрані побачимо результат роботи скрипта (рис.3).

Рисунок 3 - Виведення повідомлення методом write()

Якщо рядок, що виводиться, має велику довжину, ми можемо розділити

його на декілька підрядків, об'єднавши їх символом "+".

<script type="text/javascript">
document.write('<H1><I>Приклад виведення ' +
' повідомлення у вікно браузеру</I></H1>');
</script>

Виведення інформації за допомогою методу document.write()

завершується після останнього символу рядка. Подальше виведення цього
методу розпочинає відображення з наступної позиції - символ "повернення
каретки / перевод рядка" не виводиться.

<script type="text/javascript">
document.write('Рядок 1');
document.write('Рядок 2');
</script>

У вікні браузеру відобразиться наступне (рис.4).

Рисунок 4 - Виведення інформації методом write()

7
 Щоб текст 'Рядок 2' виводився з нового рядка, можна використати або тег
<P>, або тег <BR>, який включають до складу рядка, що виводиться.
Наприклад:

<script type="text/javascript">
document.write('Рядок 1<BR>');
document.write('Рядок 2<BR>');
</script>

На рис. 5 відображається результат виконання цього скрипта.

Рисунок 5 - Виведення інформації методом write()

Введення даних

Для введення даних можна скористатися двома стандартними методами -

confirm() і prompt(). Як і метод alert(), розглянутий вище, ці методи
забезпечуються об'єктом window, що входить, як і об'єкт document, до складу
об'єктної моделі браузеру. Але на відміну від методів об'єкту document при
виклику методів alert(), confirm() і prompt() не потрібна вказівка імені
самого об'єкту window.

Метод confirm()

Метод confirm() відображає діалогову панель, що містить повідомлення

і дві кнопки - Ok і Cancel. Натиснення кнопки Ok повертає значення true,
натиснення кнопки Cancel - false. Цей метод може використовуватися для
отримання підтверджень від користувачів або іншої інформації, яка може бути
представлена булевим значенням true/false. Наведемо приклад.

<script type="text/javascript">
if (confirm('Перейти по гіперпосиланню?'))
document.write('Перехід по гіперпосиланню')
else
document.write('Відміна переходу по гіперпосиланню');
</script>

На екрані результат роботи скрипта виглядає таким чином (рис.6).

8
 Рисунок 6 - Введення інформації методом confirm()

При натисненні кнопки Ok метод confirm() повертає значення true -

виводиться повідомлення (рис.7).

Рисунок 7 - Виведення повідомлення при натисненні кнопки Ok

При натисненні кнопки Cancel метод confirm() повертає значення false -

виводиться повідомлення (рис.8).

Рисунок 8 - Виведення повідомлення при натисненні кнопки Cancel

Метод prompt ()

Цей метод виводить діалогову панель, що містить текст, рядок для

введення тексту і кнопки Ok і Cancel. При натисненні кнопки Ok метод
prompt() повертає вміст рядка введення, при натисненні кнопки Cancel -
значення null. Метод prompt() має два параметри. Перший задає текст, що
пояснює тип інформації, яку необхідно ввести, другий - значення за

9
умовчанням. Другий параметр може бути і порожнім рядком "". Наведемо
приклад.
<script type="text/javascript">
var x;
x=prompt('Введіть значення змінної x', '');
document.write(x);
</script>

У вікні браузеру буде виведена діалогова панель (рис.9).

Рисунок 9 - Введення інформації методом prompt()

Тут користувач отримує пропозицію ввести значення змінної x,

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

Оператори мови JavaScript

Коментарі

Оператори коментаря дозволяють виділити фрагмент програми, який не

виконується інтерпретатором, а служить лише для пояснень змісту програми.
У JavaScript допустимі два види операторів коментаря:
// - один рядок символів, розташований праворуч від цього оператора,
вважається коментарем;
/*...*/ - все, що знаходиться між символами /* і */, вважається
коментарем; за допомогою цього оператора можна виділити декілька рядків в
якості коментаря.

Арифметичні оператори

Арифметичні оператори в JavaScript можуть застосовуватися до даних

будь-яких типів:
+ складання;
- віднімання;
* множення;
/ ділення;
10
 %% ділення по модулю;
++ збільшення на 1;
- - зменшення на 1.

Оператори присвоєння

Для зміни значення змінної використовується оператор присвоєння.

Оператор присвоєння визначається знаком присвоєння =, зліва від якого
розташовується будь-яка змінна, а справа - деяке вираження.
Окрім звичайного оператора присвоєння = є ще п'ять додаткових
операторів, що поєднують в собі дії звичайного оператора присвоєння і
арифметичних операторів : +=, -=, *=, /=, %=.

Оператори порівняння

У програмах часто доводиться перевіряти, чи виконуються які-небудь

умови. Умови, що перевіряються, формуються на основі операторів порівняння,
таких як "рівно", "менше", "більше" і т. п. Результатом обчислення
елементарного вираження, що містить оператор порівняння і операнди
(порівнювані дані), є логічне значення, тобто true або false. Оператори
порівняння : = =, !=, >, <, >=, <=.
Порівнювати можна числа, рядки і логічні значення. Порівняння чисел
відбувається за правилами арифметики, а рядків - шляхом порівняння ASCII-
кодів символів, починаючи з лівого кінця рядків. Логічні значення
порівнюються так само, як і числа 1 і 0 (true відповідає 1, a false - 0).
Оператори порівняння можуть бути застосовані і до різнотипних даних.
Якщо порівнюються рядок і число, то інтерпретатор приводить операнди до
числового типу. Те ж саме відбувається при порівнянні логічних даних і числа.

Логічні оператори

Логічні дані, що зазвичай отримуються за допомогою елементарних

виразів, що містять оператори порівняння, можна об'єднувати в складніші
вираження. Для цього використовуються логічні оператори - І і АБО, а також
оператор заперечення НЕ. Вирази з логічними операторами повертають
значення true або false.
Логічні оператори:
! заперечення (НЕ);
&& І;
|| АБО.
Пріоритет операторів (починаючи з молодших; у одному рядку
старшинство однакове) :
"+=", " -=", " *=", " /=" "%=";
умовне вираження: "?:";
логічне "АБО": "||";
11
 логічне "І": "&&";
порівняння на рівність "= =", "!=";
порівняння: "<", "<=", ">", ">=";
складання, віднімання : "+", "-";
множення, ділення : "*", "/", "%";
заперечення, інкремент, декремент : "!", "++", "--";
дужки: "( )", "[ ]".

Оператори умовного переходу

Обчислювальний процес можна спрямувати по тому або іншому шляху

залежно від того, чи виконується деяка умова або ні. Цій меті служать
оператори умовного переходу if і switch.

Оператор if

Синтаксис оператора if наступний:

if (умова)
{код, який виконується, якщо умова виконана}
else
{код, який виконується, якщо умова не виконана}

У фігурних дужках розташовується блок коду - декілька виразів. Якщо у

блоці використовується не більше за одне вираження, то фігурні дужки можна
не писати. Частина цієї конструкції, яка визначена ключовим словом else,
необов'язкова:

if (умова)
{код, який виконується, якщо умова виконана}

Оператор switch

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

використати розглянутий вище оператор if. Проте у разі декількох умов
зручнішим і наочнішим виявляється оператор switch (перемикач). Він
особливо зручний, якщо вимагається перевірити декілька умов, які не є
взаємовиключними.
Синтаксис оператора switch виглядає таким чином:

switch (вираження){
case вар1: виконання оператора 1, якщо вираження рівне вар1
[break]
case вар2: виконання оператора 2, якщо вираження рівне вар2
[break]
. . .

12
[default: виконання оператора n, якщо вираження не відповідає
жодному з варіантів]
}

Параметр вираження оператора switch може набувати строкових,

числових і логічних значень. Зрозуміло, у разі логічного виразу можливі тільки
два варіанти. Ключові слова (оператори) break і default не є обов’язковими,
що визначено за допомогою прямокутних дужок. Тут вони є елементами опису
синтаксису, і при написанні операторів їх вказувати не треба. Якщо оператор
break вказано, то перевірка інших умов не виконується. Якщо вказано оператор
default, то код, що йде за ним, виконується, якщо значення вираження не
відповідає жодному з варіантів. Якщо всі варіанти можливих значень
передбачені в операторові switch, то оператор default можна не
використовувати.
Оператор switch працює таким чином. Спочатку обчислюється
вираження, вказане в круглих дужках відразу за ключовим словом switch.
Отримане значення порівнюється з тим, яке вказане в першому варіанті. Якщо
вони не співпадають, то код цього варіанту не виконується і відбувається
перехід до наступного варіанту. Якщо ж значення співпали, то виконується код,
що відповідає цьому варіанту. При цьому, якщо не вказано оператор break, то
виконуються коди і інших варіантів, поки не зустрінеться оператор break. Це ж
правило діє і для інших варіантів.
Розглянемо приклади з використанням оператора switch.

<script type="text/javascript">
var x=2;
switch (x) {
case 1: alert(1);
case 2: alert(2);
case 3: alert(3);
}
</script>

У наведеному прикладі спрацює 2-й і 3-й варіанти. Якщо ми хочемо, щоб

спрацював тільки один який-небудь варіант (тільки той, який відповідає
значенню вираження), то слід використати оператор break.

<script type="text/javascript">
var x = 2;
switch (x) {
case 1: alert(l);
break;
case 2: alert(2);
break;
case 3: alert(3);
break;
}
</script>

13
 В даному прикладі спрацює тільки 2-й варіант.

Оператори циклу

При складанні програм досить часто зустрічаються випадки, коли деяку

послідовність команд треба виконати кілька разів підряд. Процеси, в яких
багаторазово виконуються одні і ті ж дії, називаються циклічними процесами.
Відомі три типи циклів: цикл з передумовою, цикл з постумовою і цикл з
параметром. Спочатку ми розглянемо цикл з параметром.

Оператор for

Структура оператора циклу з параметром for:

for (i=1; i<10; i++){

<тіло циклу>
}

Перший параметр (i=1) визначає лічильник і вказує його початкове

значення. Другий параметр (i<10) це логічний вираз, значення якого має бути
істинним, щоб цикл виконувався; як тільки значення цього логічного виразу
стає false, робота циклу завершується. Третій параметр (i++) - це оператор,
який виконується при кожному послідовному проходженні циклу (приріст
лічильника в даному випадку дорівнює одиниці).
Усі оператори, що введені в дужках і становлять тіло циклу, виконуються
при кожному проходженні циклу. Якщо в тілі циклу виконується тільки один
оператор, то фігурні дужки можна не використовувати.
Розглянемо рішення задачі: необхідно обчислити значення 10!.
Програма для обчислення 10! на мові JavaScript виглядатиме таким
чином:

<script type="text/javascript">
var i;
var n=1;
for (i=1; i<=10; i++){
n=n*i;
document.write(i+'!'+'='+n+'<br>');
}
document.write('<br><br>10!=',n);
</script>

Результат виконання цього скрипта приведений на рис. 10.

Для примусового виходу з циклу використовується оператор break.
Якщо цей оператор зустрічається в тілі циклу, то цикл відразу ж завершується.
Зазвичай оператор break застосовується при перевірці деякої додаткової умови,
виконання якої вимагає завершення циклу.

14
 Рисунок 10 - Виведення значень n!

Для управління обчисленнями в операторові циклу можна також

використати оператор continue. Так само, як і break, цей оператор
застосовується в тілі циклу разом з оператором умовного переходу. Проте, на
відміну від break, оператор continue припиняє виконання подальшого коду,
виконує вираження оновлення і повертає обчислювальний процес в початок
оператора циклу, де робиться перевірка умови, вказаної в заголовку.

Цикл з передумовою

Розглянемо цикл з передумовою. Цей цикл реалізується оператором

while. У JavaScript оператор while має наступну структуру:

while (логічний вираз){

<тіло циклу>
}

Поки значення логічного виразу істинно, виконується тіло циклу. Тіло

циклу може бути представлене простим або складеним оператором.
Розглянемо завдання: необхідно скласти програму на мові JavaScript для
обчислення значень функції Y(x) =х*x на відрізку [1;5] з кроком h=0.5.
Програма на мові JavaScript виглядатиме таким чином:

<script type="text/javascript">
var y;
var x=1;
document.write('Обчислити значення функції У(х) =x*x на відрізку
[1;5] з кроком h=0.5','<br>');
while (x<=5){
y=x*x;
document.write('<b>Y(',x,') = </b>',y,'<br>');
x=x+0.5
}
</script>

Результат роботи цього скрипта приведений на рис.11.

15
 Рисунок 11 - Табулювання функції

Цикл з постумовою

Оператор циклу do ... while використовується для реалізації циклу з

постумовою. У JavaScript оператор циклу do ... while має наступну
структуру:

do {
<тіло циклу>
}
while (логічний вираз);

Оскільки умова циклу розташовується після тіла циклу, то цикл буде

виконаний, щонайменше, один раз на відміну від циклу з передумовою
(нагадаємо, що цикл з передумовою може жодного разу не виконатися).
Розглянемо детальніше роботу оператора циклу do ... while. Спочатку
виконується тіло циклу, потім перевіряється умова циклу. Якщо значення
логічного виразу істинне, знову виконується тіло циклу. Якщо значення
логічного виразу дорівнює false, то цикл завершує свою роботу.
Розглянемо завдання: необхідно скласти програму на мові JavaScript для
обчислення значень функції Y(x) =х*x на відрізку [1;5] з кроком h=0.5.
Програма на мові JavaScript виглядатиме таким чином:

<script type="text/javascript">
var y;
var x=1;
document.write('Обчислити значення функції У(х) =x*x на відрізку
[1;5] з кроком h=0.5','<br>');
do{
y=x*x;
document.write('<b>Y(',x,')=</b>',y'<br>');
x=x+0.5
}
while (x<=5);
</script>

16
Функції

Функція є підпрограмою, яку можна викликати для виконання,

звернувшись до неї по імені. Взаємодія функції із зовнішньою програмою, з
якої вона була викликана, відбувається шляхом передачі функції параметрів і
прийому від неї результату обчислень. Втім, функція в JavaScript може і не
вимагати параметрів, а також нічого не повертати.
У JavaScript є вбудовані функції, які можна використовувати в програмах,
але код яких не можна редагувати або подивитися. Все, що ми можемо
дізнатися про них, це опис їх дії, параметрів і значення, що повертається.
Окрім використання вбудованих функцій ви можете створити свої власні,
так звані функції користувача. Фрагменти програмного кода, які часто
використовуються, доцільно оформляти у вигляді функцій. Такий фрагмент
коду розміщується у фігурних дужках, а перед ним пишеться ключове слово
function, ім'я функції, за яким йдуть круглі дужки, що обрамляють список
параметрів.
Щоб викликати функцію в програмі, слід написати вираження в
наступному форматі: ім’я_функції(параметри). Якщо потрібно параметри, то
вони вказуються в круглих дужках через кому. Функція може і не мати
параметрів. Наведемо приклад використання функції.

<html>
<head>
<script type="text/javascript">
function Greeting(s){
alert("Hello, " + s);
}
</script>
</head>
<body>
<script type="text/javascript">
Greeting ("world");
</script>
</body>
</html>

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

існують функції, що повертають в сценарій певні значення. Це дозволяє
використати функцію для проведення обчислень. Щоб повернути результат в
сценарій, що містить функцію, використовується ключове слово return.
Розглянемо програму обчислення площі прямокутника.

<script type="text/javascript">
function Srect(width,height) {
var S = width * height;
return S}
alert(Srect(4,7));
</script>

17
Вбудовані функції

У JavaScript є вбудовані функції. Розглянемо деякі з них.

Функція parseInt(рядок, основа) перетворить вказаний рядок в ціле

число в системі числення по вказаній основі (8, 10 або 16); якщо основа не
вказана, то передбачається 10, тобто десяткова система числення.
Наприклад, необхідно перетворити рядок '25 метрів' в числове значення.

<script type="text/javascript">
var x='25 метрів';
y=parseInt(x);
alert(y);
</script>

Після виконання цих операторів змінна у набуває значення 25.

Функція parseFloat(рядок, основа) перетворить вказаний рядок в

число з плаваючою точкою в системі числення по вказаній основі (8,10 або 16);
якщо основа не вказана, то передбачається 10, тобто десяткова система
числення.
Наприклад, необхідно з двох чисел знайти більше і вивести його.

<script type="text/javascript">
var x=prompt("Введіть число x", "");
var y=prompt("Введіть число y", "");
x=parseFloat(x);
y=parseFloat(y);
if (y>x)
alert ("max="+y)
else
alert ("max="+x);
</script>

Функція isNaN(значення) повертає true, якщо вказане в параметрі

значення не є числом, інакше - false.

Функція eval(рядок) обчислює вираження у вказаному рядку;

вираження має бути написане на мові JavaScript (не містить тегів HTML).

<script type="text/javascript">
var у = 7;
var x = "if (у<10) у=у+12";
alert(eval(x));
</script>

18
Вбудовані об'єкти

Об'єкти є програмними одиницями, що мають деякі властивості і методи.

Про об'єкт ми можемо судити по значеннях його властивостей і опису того, як
він функціонує. Програмний код вбудованих в JavaScript об'єктів нам
недоступний.
Вбудовані об'єкти мають фіксовані назви, властивості і методи.
Властивості аналогічні звичайним змінним. Вони мають імена і значення. Деякі
властивості об'єктів доступні тільки для читання. Це означає, що їх значення не
можна змінювати. Інші властивості доступні і для запису - їх значення можна
змінювати за допомогою оператора присвоєння. Методи аналогічні функціям,
вони можуть мати параметри або не мати їх.
Щоб упізнати значення властивості об'єкту, необхідно вказати ім'я цього
об'єкту і ім'я властивості, відокремивши їх один від одного точкою:
ім’я_об’єкту.властивість. Об'єкт може не мати властивостей.
Ми можемо змусити об'єкт виконати той або інший властивий йому
метод. В цьому випадку також говорять про застосування методу до об'єкту.
Синтаксис відповідного виразу такий: ім’я_об’єкту.метод(параметри).
Об'єкт може не мати методів.
У світлі викладеного вище об'єкт можна розуміти як деякий контейнер,
що містить змінні-властивості і функції-методи. Ми можемо впливати на об'єкт
тільки за допомогою властивостей і методів.
У JavaScript математичні обчислення, складна обробка рядків і дат, а
також створення масивів виконуються за допомогою відповідних вбудованих
об'єктів. Для розробників веб-сайтів особливо важливі об'єкти String (обробка
рядків), Array (робота з масивами), Math (математичні формули і константи) і
Date (робота з датами). Зверніть на них особливу увагу.
Вбудовані об'єкти, як вже відзначалося, мають фіксовані назви. Об'єкти з
іменами, співпадаючими з їх фіксованими назвами, називаються статичними.
Проте ви можете створити екземпляри (копії) статичних об'єктів, присвоївши їм
свої власні імена. Екземпляри статичних об'єктів є об'єктами у вашій програмі,
які наслідують від перших всі їх властивості і методи. В той же час ви можете
використовувати і статичні об'єкти в чистому вигляді, не створюючи ніяких їх
копій. Наприклад, для математичних обчислень використовується статичний
об'єкт Math, а у разі масивів створюються екземпляри статичного об'єкту Array,
що містять конкретні дані, до яких застосовані усі загальні методи і властивості
статичного об'єкту Array.

Об'єкт String

Об'єкт String представляє інтерес головним чином завдяки методам

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

19
 За допомогою об'єкту String можна створити рядок як строковий об'єкт.
Проте в переважній більшості випадків для цього досить використати звичайну
змінну і оператор присвоєння строкового значення. В цьому випадку
інтерпретатор все одно створює екземпляр строкового об'єкту, властивості і
методи якого доступні з програмного коду.

Створення об'єктів String

Для створення строкового об'єкту використовується вираження

наступного виду :

var ім’я_змінної = new String("строкове_значення");

Тут ім’я_змінної виконує роль посилання на строковий об'єкт.

Наприклад, вираження mystring = new String("Привіт!") створює
строковий об'єкт mystring зі значенням " Привіт! ".
Проте можна створити строковий об'єкт і за допомогою звичайного
оператора присвоєння:

var ім’я_змінної = "строкове_значення";

Доступ до властивостей і методів строкового об'єкту забезпечується

такими виразами: рядок.властивість, рядок.метод([параметри]).
Деякі методи можуть і не мати параметрів, що вказано за допомогою
квадратних дужок. Тут рядок може бути посиланням на строковий об'єкт,
строковою змінною, вираженням, що повертає рядок, а також просто строковим
значенням.
Нижче приведені три різні способи використання властивості length
строкового об'єкту, значенням якої є довжина рядка (кількість символів в
рядку).

var mystring = "Браузер - програма для перегляду Web-сторінок";

mystring.length
"Створення об'єктів String".length
function fstring(){return "abcde"}
fstring().length
// значення дорівнює 45
// значення дорівнює 25
/* функція, що повертає
рядок "abcde" */
//значення дорівнює 5

Методи строкового об'єкту використовуються для синтаксичної обробки і

форматування рядків.

Об'єднання рядків

Для об'єднання двох і більше рядків використовується оператор

конкатенації +.

20
<script type="text/javascript">
var a, b, c;
a="Браузер - програма";
b="для перегляду Web- сторінок";
c=a+" "+b;
alert (c);
</script>

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

Властивість length - визначення довжини рядка.

Визначимо довжину рядка c і виведемо в панель повідомлення.

<script type="text/javascript">
var c="Браузер - програма для перегляду Web - сторінок";
alert(c.length);
</script>

Методи об'єкту String обробки рядків

Метод toLowerCase() переводить рядок в нижній регістр (рядкові

букви).
Синтаксис: рядок.toLowerCase()
Повертає рядок.

Метод toUpperCase() переводить рядок у верхній регістр (прописні

букви).
Синтаксис: рядок.toUpperCase()
Повертає рядок.
Розглянемо застосування методу toUpperCase() для нашого прикладу:

<script type="text/javascript">
var c="Браузер - програма для перегляду Web - сторінок";
alert (c.toUpperCase());
</script>

Метод charAt(індекс) повертає символ, що займає в рядку вказану

позицію.
Синтаксис: рядок.charAt(індекс)
Повертає односимвольний або порожній рядок.
Індекс першого символу дорівнює 0.
Так, наприклад, вимагається визначити, який символ в рядку знаходиться
на 5 позиції:

<script type="text/javascript">
var c="Браузер - програма для перегляду Web- сторінок";
alert (c.charAt(5));
</script>

21
 Метод concat(рядок) - конкатенація рядків.
Синтаксис: рядок1.concat(рядок2)
Повертає рядок.
Цей метод діє так само, як і оператор + складання для рядків: до рядка
рядок1 приписується справа рядок2.

<script type="text/javascript">
var x;
x="Браузер - програма ";
alert (x.concat("для перегляду Web- сторінок"));
</script>

Метод charCodeAt([індекс]) перетворить символ у вказаній позиції

рядка в його числовий еквівалент (код).
Синтаксис: рядок.charCodeAt([індекс])
Повертає число.

<script type="text/javascript">
var c="Браузер - програма для перегляду Web- сторінок";
alert (c.charCodeAt(2));
</script>

Метод fromCharCode(номep1[,номер2[, ... номерN]]) повертає

рядок символів, числові коди якого вказані в якості параметрів.
Синтаксис: рядок.fromCharCode(номep1[,номер2[, ... номерN]])
Повертає рядок.

Метод index0f(рядок_пошуку[,індекс]) здійснює пошук рядка,

вказаного параметром, і повертає індекс його першого входження.
Синтаксис: рядок.index0f(рядок_пошуку[,індекс])
Повертає число.
Метод здійснює пошук позиції першого входження рядок_пошуку в
рядок. Число, що повертається, (індекс входження) відлічується від 0. Якщо
пошук невдалий, то повертається -1. Пошук в порожньому рядку завжди
повертає -1. Пошук порожнього рядка завжди повертає 0.
Другий параметр, що не є обов'язковим, вказує індекс, з якого слід почати
пошук.

<script type="text/javascript">
var c="Браузер - програма для перегляду Web- сторінок";
alert (c.indexOf("Web"));
</script>

Метод lastIndexOf(рядок_пошуку[,індекс]) здійснює пошук рядка,

вказаного параметром, і повертає індекс його першого входження; при цьому
пошук починається з кінця початкового рядка, але індекс, що повертається,
відлічується від її початку, тобто від 0.
22
 Синтаксис: рядок.lastIndexOf(рядок_пошуку[,індекс])
Повертає число.
Метод аналогічний розглянутому вище index0f() і відрізняється лише
напрямом пошуку.

Метод substring(індекс1,індекс2) повертає підрядок

початкового рядка, початковий і кінцевий індекси якого вказуються
параметрами.
Синтаксис: рядок.substring(індекс1,індекс2)
Порядок індексів не важливий: найменший з них вважається початковим.
Відлік позицій починається з початку рядка. Перший символ рядка має індекс
0. Символ, що відповідає кінцевому індексу, не включається в рядок, що
повертається.

<script type="text/javascript">
var c="Браузер - програма для перегляду Web - сторінок";
alert (c.substring(10,19));
</script>

Метод slice(індекс1[,індекс2]) повертає підрядок початкового

рядка, початковий і кінцевий індекси якого вказуються параметрами, за
винятком останнього символу.
Синтаксис: рядок.slice(індекс1[,індекс2])
Якщо другий параметр не вказаний, то повертається підрядок з
початковою позицією індекс1 і до кінця рядка. Відлік позицій починається з
початку рядка. Перший символ рядка має індекс 0. Якщо другий параметр
вказаний, то повертається підрядок початкового рядка, починаючи з позиції
індекс1 і до позиції індекс2, виключаючи останній символ. Якщо другий
параметр негативний, то відлік кінцевого індексу робиться від кінця рядка.

<script type="text/javascript">
var c="Браузер - програма для перегляду Web - сторінок";
alert (c.slice(10, - 8));
</script>

Метод substr(індекс[,довжина]) повертає підрядок початкового

рядка, початковий індекс і довжина якого вказуються параметрами.
Синтаксис: рядок.substr(індекс[,довжина])
Якщо другий параметр не вказаний, то повертається підрядок з
початковою позицією індекс1 і до кінця рядка. Відлік позицій починається з
початку рядка. Перший символ рядка має індекс 0. Якщо другий параметр
вказаний, то повертається підрядок початкового рядка, починаючи з позиції
індекс1 із загальною кількістю символів, рівною параметру довжина.

<script type="text/javascript">
var c="Браузер - програма для перегляду Web - сторінок";

23
alert (c.substr(20,13));
</script>

Метод split(роздільник[,обмежувач]) повертає масив елементів,

отриманих з початкового рядка.
Синтаксис: рядок.split(роздільник[,обмежувач])
Повертає масив.
Перший параметр є рядком символів, який використовується як
роздільник рядка на елементи. Другий необов'язковий параметр - число, що
вказує, скільки елементів рядка, отриманого при розділенні, слід включити в
масив, що повертається.
Якщо роздільник - порожній рядок, то повертається масив символів
рядка.

<script type="text/javascript">
var c="Браузер - програма для перегляду Web - сторінок";
alert (c.split("а"));
</script>

Об'єкт Array

Масив - це впорядкований набір даних. Значеннями елементів масиву

можуть бути дані будь-якого типу, у тому числі і масиви. У останньому
випадку можна говорити про багатовимірні масиви (тобто про масиви масивів).
Кількість елементів в масиві називається довжиною масиву. До елементів
масиву можна звертатися у програмі по їх порядковому номеру (індексу).
Нумерація елементів масиву починається з нуля.

Створення масиву

Існує декілька способів створення масиву. У будь-якому випадку,

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

var ім’я_масиву = new Array([довжина_масиву]);

Якщо довжина масиву не вказана, то створюється порожній масив, що не

містить жодного елементу. Інакше створюється масив з вказаною кількістю
елементів, проте усі вони мають значення null (тобто не мають значень).
Вираження з ключовими словами new Array створює екземпляр (копію)
об'єкту Array.
Створивши масив, можна присвоїти значення його елементам,
використовуючи для цього оператор присвоєння. Розглянемо створення масиву
earth, що містить в якості елементів деякі характеристики нашої планети.
Зверніть увагу, що елементи в цьому масиві різних типів (строкові і числові).

24
var earth = new Array(4); // масив з 4-х елементів
earth[0] = "Планета";
earth[l] = "24 години";
earth[2] = 6378;
earth[3] = 365.25;

Якщо нам знадобиться значення, наприклад, третього елементу масиву,

то достатньо використати вираження earth[2].
Інший спосіб створення масиву полягає у безпосередньому визначенні
елементів в круглих дужках за ключовим словом Array:

var earth = new Array("Планета", "24 години", 6378, 365.25);

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

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

var earth = new Аrrаy(); // порожній масив

earth.xtype = "Планета";
earth.xday = "24 години";
earth.radius = 6378;
earth.period = 365.25;

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

об'єкту, наприклад earth.radius. Можливий і такий варіант:
earth["radius"]. Проте по індексу до елементів в такому масиві звертатися не
можна.

Властивість length

Властивість length - його значенням є довжина масиву.

Синтаксис: ім’я_масиву.length
Оскільки індексація елементів масиву розпочинається з нуля, індекс
останнього елементу на одиницю менше довжини масиву.
Наведемо приклад: обчислення суми елементів масиву. Ми визначаємо
функцію aSum(), яка повертає суму елементів числового масиву. Як параметр
ця функція приймає масив.

<script type="text/javascript">
function aSum(xarray){
var s=0;
for (var i=0; i<=xarray.length-1;i++){
s=s+xarray[i]
}
return s
}

25
var myarray = new Array(2, 3, 4);
var sum = aSum(myarray);
alert ("Сума = "+sum);
</script>

Методи об'єкту Array

Методи об'єкту Array призначені для управління даними, збереженими в

структурі масиву.

Метод concat(масив) - конкатенація масивів, об'єднує два масиви в

третій масив.
Синтаксис: ім’я_масиву1.concat(ім’я_масиву2)
Повертає масив.

Метод join(роздільник) створює рядок з елементів масиву з вказаним

роздільником між ними (за умовчанням використовується символ ",").
Синтаксис: ім’я_масиву.join(рядок)
Повертає рядок символів.

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

Синтаксис: ім’я_масиву.рор()
Повертає значення видаленого елементу масиву.
Цей метод змінює початковий масив.

Метод push(значення|об'єкт) додає до масиву вказане значення в

якості останнього елементу і повертає нову довжину масиву.
Синтаксис: ім’я_масиву.push(значення|об'єкт)
Повертає число. Цей метод змінює початковий масив.

Метод shift() видаляє перший елемент масиву і повертає його

значення.
Синтаксис: ім’я_масиву.shift()
Повертає значення видаленого елементу масиву. Цей метод змінює
початковий масив.

Метод unshift(значення|об'єкт) додає до масиву вказане значення в

якості першого елементу.
Синтаксис: ім’я_масиву.unshift(значення|об'єкт)
Нічого не повертає. Цей метод змінює початковий масив.

Метод reverse() змінює порядок слідування елементів масиву на

протилежний.
Синтаксис: ім’я_масиву.reverse()
Повертає масив. Цей метод змінює початковий масив.

26
 Метод slice(індекс1[,індекс2]) створює масив з елементів
початкового масиву з індексами вказаного діапазону.
Синтаксис: ім’я_масиву.slice(індекс1[,індекс2])
Повертає масив. Цей метод не змінює початковий масив.
Другий параметр (кінцевий індекс) не є обов'язковим, про що свідчать
квадратні дужки в описі синтаксису. Якщо він не вказаний, то створюваний
масив містить елементи початкового масиву, починаючи з індексу індекс1 і до
кінця. Інакше створюваний масив містить елементи початкового масиву
починаючи з індексу індекс1 і до індексу індекс2, за винятком останнього.
При цьому початковий масив залишається без змін.

Метод sort([функція_порівняння]) сортує (упорядковує) елементи

масиву за допомогою функції порівняння.
Синтаксис: ім’я_масиву.sort([функція_порівняння])
Повертає масив. Цей метод змінює початковий масив. Параметр не
обов'язковий.
Якщо параметр не вказаний, то сортування робиться на основі порівняння
ASCII-кодів символів значень. Це зручно для порівняння символьних рядків,
але не зовсім підходить для порівняння чисел. Так, число 357 при сортуванні
вважається меншим, ніж 85, оскільки спочатку порівнюються перші символи і
тільки у разі їх рівності порівнюються наступні, і т. д. Таким чином, метод
sort() без параметра підходить для простого сортування масиву із строковими
елементами.
Можна створити свою власну функцію для порівняння елементів масиву,
за допомогою якої метод sort() відсортує увесь масив. Ім'я цієї функції (без
лапок і круглих дужок) передається методу в якості параметра. При роботі
методу функції передаються два елементи масиву, а її код повертає методу
значення, що вказує, який з елементів повинен йти за іншим. Припустимо,
порівнюються два елементи, х і у. Тоді залежно від числового значення
(негативного, нуля або позитивного), який повертається функцією порівняння,
методом sort() приймається одно з трьох можливих рішень (табл.1).

Таблиця 1 - Результати порівняння х і у

Значення, яке повертається Результат порівняння х і у
функцією порівняння

<0 у слідує за х
0 порядок слідування х і у не змінюється
>0 х слідує за у

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

функції порівняння.

<script type="text/javascript">
var myarray = new Array(25, 8, 7, 41);
27
function comp (x, y){return x - y}
myarray.sort(comp);
alert(myarray);
</script>

Результат роботи цього скрипта наведено на рис.12.

Рисунок 12 - Сортування елементів масиву

Якщо ми змінимо функцію function comp(x, y){return y - x},то

отримаємо інший результат – масив буде відсортовано в зворотньому порядку
(рис.13).

Рисунок 13 - Сортування елементів масиву

Функції обробки числових масивів

У багатьох застосуваннях вимагається отримати статистичні

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

function sum(aN){
var s=aN[0]
for(var i = 1; i<=aN.length-1;i++){
s += aN[i]

28
}
return s
}

Очевидно, для обчислення середнього значення слід просто скористатися

вираженням sum(aN)/aN.length.
Функція, що повертає найменше значення серед елементів масиву:

function Nmin(aN){
var min=aN[0]
for(var i = 1; i<= aN.length-1; i++){
if (aN[i]<min)
min = aN[i]
}
return min
}

Об'єкт Math

Об'єкт Math призначений для зберігання деяких математичних констант

(наприклад, число ) і виконання перетворень чисел за допомогою типових
математичних функцій. Доступ до властивостей і методів об'єкту Math
забезпечується наступними виразами: Math.властивість,
Math.метод(параметри).

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

Властивості об'єкту Math мають в якості своїх значень математичні

константи:

 F - постійна Ейлера;
 LN10 - значення натурального логарифма числа 10;
 LN2 - значення натурального логарифма числа 2;
 LOG10E - значення десяткового логарифма експоненти;
 LOG2E - значення двійкового логарифма експоненти;
 PI - значення ;
 SQRT1 2 - значення квадратного кореня з 1/2;
 SQRT2 - значення квадратного кореня з 2.

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

число , яке можна отримати як властивість об'єкту Math :

var R = 10; // радіус кола

circus = 2*R*Math.PI; // довжина кола

29
Методи об'єкту Math

 abs(число) - повертає модуль (абсолютне значення) числа;

 асоs(число) - повертає арккосинус числа;
 аsin(число) - повертає арксинус числа;
 аtаn(число) - повертає арктангенс числа;
 atan2(x, у) - повертає кут в полярних координатах точки;
 сеil(число) - округлює число вгору до найближчого цілого;
 соs(число) - повертає косинус числа;
 ехр(число) - повертає число е в ступені число;
 flооr(число) - округлює число вниз до найближчого цілого;
 1оg(число) - повертає натуральний логарифм числа;
 mах(число1, число2) - повертає більше з чисел число1, число2;
 min(число1, число2) - повертає менше з чисел число1, число2;
 рow(число1, число2) - повертає число1 в ступені число2;
 random() - повертає випадкове число між 0 і 1;
 rоund(число) - округлює число до найближчого цілого;
 sin(число) - повертає синус числа;
 sqrt(число) - повертає квадратний корінь з числа;
 tan(число) - повертає тангенс числа.

Приклади

1. Метод random() повертає випадкове число, що лежить в інтервалі від 0 до 1.

Щоб отримати випадкове число в межах від 0 до Nmax, слід написати наступне
вираження:

х = Nmax*Math.random();

Можна також створити функцію для обчислення випадкового числа в заданому

інтервалі:

function rand(a, b){

return a+(b-a)*Math.random()
}

2. Для обчислення значення тригонометричної функції sin(x), у якої аргумент

х виражений в градусах, слід застосувати наступне вираження:

Math.sin(Math.PI*x/180);

30
Об'єкт Date

Цей об'єкт дозволяє використати в сценаріях JavaScript дати і числа. Дати

в JavaScript зберігаються в мілісекундах, починаючи з 00:00 01.01.1970. Ця дата
називається епохальною. Дати до цього моменту часу використовувати в
JavaScript не можна. Це пов'язано з тим, що в сценаріях набагато частіше
доводиться мати справу з сьогоденням і майбутнім, ніж з минулим.

Створення об'єкту Date

Об'єкт Date створюється так само, як і інші об'єкти JavaScript, - за

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

var z=new Date();

z=new Date("Місяць дд, рррр гг:хв:сс");
z=new Date("Місяць дд, рррр");
z=new Date(рр, мм, дд, гг, хв, сс);
z=new Date(рр, мм, дд);
z=new Date(мілісекунди);

Місяць вказується у вигляді повної його англійської назви (абревіатури

не допускаються).
Для читання і зміни інформації про дату і час, що зберігається в об'єкті
дати, служать методи об'єкту Date.
Для установки значення елементів об'єкту Date використовується набір
методів set :
 setDate() - встановлює день місяця;
 setMonth() - встановлює місяць, місяць визначається числом в діапазоні
від 0 до 11;
 setYear() - встановлює рік;
 setTime() - встановлює час, відлічений в мілісекундах від початку
першого січня 1970 року;
 setHours(), setMinutes(), setSeconds() - встановлює час.
Метод get використовується для отримання значень, збережених в
об'єкті Date :
 getDate() - повертає день місяця;
 getMonth() - повертає місяць;
 getYear() - повертає рік;
 getTime() - повертає час, відлічений в мілісекундах від початку
першого січня 1970 року;
 getHours(), getMinutes(), getSeconds() - повертає час.
Приведемо ряд прикладів.

31
 Для виведення поточної дати використовується об'єкт Date і метод
write() об'єкту document :

<script type="text/javascript">
var current_date = new Date();
document.write("<p><i>Поточна дата:</i>" + current_date + ".<p>");
</script>

Результат роботи скрипта приведений на рис.14.

Рисунок 14 - Виведення поточної дати

Також можна вивести скорочений варіант, для цього використовуються

методи getDate(), getMonth(), getYear(). Зверніть увагу, що нумерація
місяців розпочинається з нуля:

<script type="text/javascript">
var current_date = new Date();
document.write("<i>Дата:</i>"+current_date.getDate()+ "." +
(current_date.getMonth()+1) + "." + current_date.getYear() + ".");
</script>

У вікні браузеру побачимо наступне (рис.15).

Рисунок 15 - Виведення поточної дати

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

<script type="text/javascript">
var current_date = new Date();

32
document.write("<i>Час:</i> " + current_date.getHours()+ "." +
current_date.getMinutes()+ "." + current_date.getSeconds() + ".");
</script>

Результат виконання скрипта приведений на рис.16.

Рисунок 16 - Виведення поточного часу

Як ми розглянули раніше, об'єкт Date повертає поточну дату і час, а

також забезпечує ряд методів для отримання окремих складових цих величин -
дня, місяця, години і т. п. Розглянемо ряд функцій, які полегшать використання
об'єкту Date.
Функція fDateTime повертає поточну дату і час у вигляді об'єкту Date.

<html>
<head>
<script type="text/javascript">
function fDateTime(){
return new Date()
}
</script>
</head>
<body>
<script>
alert(fDateTime());
</script>
</body>
</html>

В результаті на екран виводиться панель повідомлення (рис.17).

Рисунок 17 - Виведення поточної дати і часу

33
 Функція fTime повертає рядок, що містить поточний час.

<html>
<head>
<script type="text/javascript">
function fTime (){
var n=new Date();
var s=n.getHours();
var minut=n.getMinutes();
var sec=n.getSeconds();
var tSt=""+((s>12)?s-12:s);
tSt+=((minut<10)?":0":":")+minut;
tSt+=((sec<10)?":0":":")+sec;
tSt+=(s>=12)?"PM":"AM";
return tSt
}
</script>
</head>
<body>
<script>
alert(fTime());
</script>
</body>
</html>

Виводиться повідомлення про поточний час (рис.18).

Рисунок 18 - Виведення поточного часу

Відмітимо, що ця функція відображає час в 12 - годинному форматі. Щоб

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

<script type="text/javascript">
function fTime(){
var n=new Date();
var s=n.getHours();
var minut=n.getMinutes();
var sec=n.getSeconds();
var tSt=""+s;
tSt+=((minut<10)?":0":":")+minut;

34
tSt+=((sec<10)?":0":":")+sec;
return tSt
}
alert(fTime())
</script>

В результаті виконання скрипта з'явиться повідомлення (рис.19).

Рисунок 19 - Виведення поточного часу

Основи створення сценаріїв. Обробка подій

Одним з головних призначень сценаріїв в HTML-документі є обробка

подій, таких, як клацання кнопкою миші на елементі документу, переміщення
покажчика миші на елемент, переміщення покажчика з елементу, натиснення
клавіші і тому подібне. Більшість тегів HTML мають спеціальні атрибути, що
визначають події, на які можуть відреагувати відповідні елементи. Події
називаються досить просто, наприклад, клацання лівою кнопкою миші -
onClick; зміна в полі введення даних - onChange; подія onMouseOver
відбувається, коли покажчик миші розміщується на елемент HTML-документу.
Значенням таких атрибутів-подій в тегах HTML є рядок, що містить сценарій,
який виконує роль обробника події.
Розглянемо приклад, в якому ми опишемо форму, в якій є кнопка.
Інструкція onClick="alert('Виконується сценарій JavaScript')"
визначає ту дію, яку буде виконано при клацанні на кнопці. Якщо відбувається
подія Click, то комп'ютер виконує інструкцію alert('Виконується сценарій
JavaScript').

<form>
<input type="button" value="Виконати" onClick="alert('Виконується
сценарій JavaScript')">
</form>

При клацанні на кнопці у вікні браузеру ми побачимо наступне

повідомлення (рис.20).

35
 Рисунок 20 - Результат виконання сценарію

Для одного і того ж елементу можна визначити декілька подій, на які він
реагуватиме. Отже, значенням атрибуту-події, як вже відзначалося, являється
код сценарію, поміщений в лапки. Цей сценарій називають також обробником
події. Якщо обробник події містить декілька виразів, то вони розділяються
крапкою з комою.
Зазвичай обробники подій оформляються у вигляді функцій, визначення
яких поміщають в контейнерний тег <script>.
Як приклад нижче приведений варіант оформлення обробника клацання
на зображенні. Зображення в HTML-документі визначається, як відомо, тегом
<img>. Файл із зображенням задається атрибутом src. Обробник події onClick
задається в прикладі як функція clickimage(), яка має бути визначена у
контейнері <script>. В результаті клацання на графічному зображенні
виводиться вікно з повідомленням.

<html>
<script type="text/javascript">
function clickimage(){
alert("Виконується сценарій JavaScript!")
}
</script>
<body>
<img src = "pict.jpg" onClick = "clickimage()">
</body>
</html>

Якщо сценарій обробки події невеликий і використовується в HTML-

документі один раз, то доцільно оформляти його безпосередньо у вигляді
значення атрибуту-події. У інших випадках переважний варіант оформлення
обробника у вигляді функції.
У таблиці 2 наводиться список подій згідно специфікації HTML 4.0.
Трактування браузерів може відрізнятися від стандарту і в плані застосовності
обробника до тих або інших елементів.

36
Таблиця 2 - Події JavaScript
Обробник HTML-елементи Опис Метод
події імітації
Втрата поточним елементом
A, AREA, фокусу, тобто перехід до
BUTTON, INPUT, іншого елементу. Виникає при
onBlur blur()
LABEL, SELECT, клацанні мишею поза
TEXTAREA елементом або натисненні
клавіші табуляції.
Зміна значень елементів форми.
INPUT, SELECT, Виникає після втрати
onChange change()
TEXTAREA елементом фокусу, тобто після
події blur.
Практично усі Одинарне клацання (натиснута і
onClick click()
HTML-елементи відпущена кнопка миші).
Практично усі Подвійне клацання.
onDblClick
HTML-елементи
A, AREA, Отримання елементом фокусу
BUTTON, INPUT, (клацання мишею на елементі
onFocus focus()
LABEL, SELECT, або чергове натиснення клавіші
TEXTAREA табуляції).
Практично усі Натиснута клавіша на
onKeyDown
HTML-елементи клавіатурі.
Практично усі Натиснута і відпущена клавіша
onKeyPress
HTML-елементи на клавіатурі.
Практично усі Відпущена клавіша на
onKeyUp
HTML-елементи клавіатурі.
BODY, Закінчено завантаження
onLoad
FRAMESET документу.
Практично усі Натиснута кнопка миші в межах
onMouseDown
HTML-елементи поточного елементу.
Практично усі Переміщення курсора миші в
onMouseMove
HTML-елементи межах поточного елементу.
Практично усі Курсор миші, виведений за
onMouseOut
HTML-елементи межі поточного елементу.
Практично усі Курсор миші, наведений на
onMouseOver
HTML-елементи поточний елемент.
Практично усі Відпущена кнопка миші в
onMouseUp
HTML-елементи межах поточного елементу.
onReset FORM Скидання даних форми reset()
onResize WINDOW Зміна розмірів вікна.
INPUT, Виділення тексту в поточному
onSelect
TEXTAREA елементі.
onSubmit FORM Відправка даних форми submit()

37
Об'єктна модель документу (DOM)

HTML-документ відображається у вікні браузеру. Вікну браузеру

відповідає об'єкт window, a HTML-документу, завантаженому у вікно,
відповідає об'єкт document. Ці об'єкти містять у своєму складі інші об'єкти.
Зокрема, об'єкт document входить до складу об'єкту window. Елементам HTML-
документу відповідають об'єкти, які входять до складу об'єкту document. Вся
множина об'єктів має ієрархічну структуру, що називається об'єктною моделлю
документу (DOM).
Нагадаємо, що об'єкт є свого роду контейнером для зберігання
інформації. Він характеризується властивостями, методами, а також подіями, на
які може реагувати. Доступ до властивостей і методів об'єкту здійснюється за
допомогою виразів виду: об'єкт.властивість, об'єкт.метод().
Об'єкт, який включає в себе інший об'єкт, називають батьківським.
Об'єкт, який міститься в якому-небудь об'єкті, називають дочерним по
відношенню до нього. Таким чином, встановлюється ієрархія. Щоб вказати
конкретний об'єкт, треба перерахувати усі об'єкти, що містять його, починаючи
з об'єкту самого верхнього ієрархічного рівня, подібно до того, як вказується
повний шлях до файлу на диску: объект1.объект2. . . . объектN.
У об'єктній моделі документу об'єкти згруповані в так звані колекції.
Колекція є масивом об'єктів, відсортованих в порядку згадки відповідних їм
елементів в HTML-документі. Індексація об'єктів в колекції починається з нуля.
Синтаксис звернення до елементів колекції такий же, як до елементів масиву.
Колекція має властивість length - кількість усіх її елементів. Так, наприклад,
колекція усіх об'єктів графічних зображень в документі називається images,
колекція усіх форм - forms, колекція усіх посилань - links. Це приклади так
званих приватних або тематичних колекцій. Окрім них є колекція усіх об'єктів
документу, яка називається all.
Розглянемо способи звернення до властивостей об'єктів документу.
Загальне правило полягає в тому, що в посиланні має бути згадана назва
колекції. Далі, якщо йдеться про документ, завантажений в поточне вікно, то
об'єкт window можна не згадувати, а відразу розпочинати з ключового слова
document. Можливі декілька способів звернення до об'єктів документу:

document.колекція.id_об’єкту
document.колекція["id_об'єкту"]
document.колекція[індекс_об'єкту]

Тут id_об'єкту - значення атрибуту ID в тегу, який визначає відповідний

елемент в HTML-документі. Величина індекс_об'єкту - ціле число, яке вказує
порядковий номер об'єкту в колекції. Перший об'єкт в колекції має індекс 0.
Деякі теги, наприклад <form>, мають атрибут name. Значення цього
атрибуту можна використати при зверненні до об'єкту нарівні зі значенням
атрибуту id. До об'єкту форми, окрім описаних вище способів, можна

38
звертатися за значенням атрибуту name (ім'я форми), якщо він вказаний в тегу
<form>:

document.ім’я_форми

Колекція all

Колекція all це колекція усіх тегів, розташованих в тілі документу. Вона

може використовуватися декількома способами. Наприклад, для отримання
повного списку тегів, що становлять цей документ.
Розглянемо приклад: нехай є HTML-документ, в якому є текст, таблиця,
список і форма з кнопкою. Для того, щоб проглянути вміст колекції all для
цього документу, використовуємо властивість tagName, яка повертає назву тега,
за допомогою якого був створений відповідний об'єкт.

<html>
<head>
<title>html - документ</title>
<script type="text/javascript">
function sall()
{var msg = "";
for(var i = 0; i < document.all.length; i++){
msg += i + " " + document.all[i].tagName + "\n"}
alert(msg)}
</script>
</head>
<body>
<p align="center"> HTML - документ
<table border='1' width='75%'>
<tr>
<td width='50%'> Осередок1</td>
<td width='50%'> Осередок2</td></tr>
</table>
<ul>
<li>Рядок 1
<li>Рядок 2
<li>Рядок 3
</ul>
<form>
<p align="center">
<input type="button" value="Представити інформацію" name="b1"
onClick="sall()">
</form>
</body>
</html>

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

інформацію". Результат роботи скрипта приведений нижче (рис.21).

39
 Рисунок 21 - Виведення вмісту колекції all для цього документу

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

використанні колекції all. Проте окрім нього існує ще один спосіб,
грунтований на методі getElementById():
document.getElementById(id_об’єкту)

Зверніть увагу, в якому регістрі пишуться окремі букви цього методу.

Метод getElementById() об’ єкту document дозволяє звернутися до будь-якого
елементу по значенню його ідентифікатора - значенню атрибуту ID.

Форми

Розглянемо приклад: нехай є форма, що складається з двох полів

введення, двох радіокнопок і двох кнопок.

<html>
<head>
<title>Приклад форми</title>
</head>
<body>
<p align="center"><font size=6> Приклад форми </font>
<form name="m_form" action="form01.htm" method="POST">
<b> Будь ласка, вкажіть ім'я і прізвище </b>
<br>
<input type="text" name="m" size="30" value=""><br>
<input type="text" name="n" size="30" value=""><br>
Ч<input type="radio" name="g">
Ж<input type="radio" name="g">
<br>
<input type="submit" name="Send" value=" Введення ">
<input type="reset" name="Clear" value="Відмінити">
</form>

40
</p>
</body>
</html>

У вікні браузеру відобразиться наступна форма (рис.22).

Рисунок 22 - Виведення форми

Додамо обробник натиснення кнопки Send :

<input type="submit" name="Send" value="Введення"

onClick="doClick()">

і напишемо код для нього:

<script type="text/javascript">
function doClick (){
alert ("Кнопка натиснута");
}
</script>

Таким чином, натиснення кнопки "Введення" призводитиме до появи

повідомлення (рис.23).

Рисунок 23 - Результат виконання сценарію

41
Об'єкт form

Кожна форма на сторінці HTML представляється окремим об'єктом form.

Форми завжди є присутніми у вигляді елементів масиву forms[], що є
властивістю об'єкту document. Форми розташовані в цьому масиві в тому ж
порядку, що і в документі. Отже, document.forms[0] посилається на першу
форму документу.
Найцікавіша властивість об'єкту form - це масив elements[], що містить
об'єкти JavaScript (різних типів), що представляють різні елементи введення у
формі. Елементи цього масиву також є присутніми в тому ж порядку, в якому
вони розташовані в документі. Інші властивості об'єкту form :
- action - відповідає атрибуту форми action або програмі, в яку
відсилаються дані, введені у форму;
- length - вказує кількість елементів у формі;
- method - визначає метод, що використовується для відправки даних, -
GET або POST;
- target - визначає вікно, в якому відображатимуться результати
обробки введених у форму даних.
Розглянемо заголовок форми, для цього змінимо код функції doClick()
таким чином:

<script type="text/javascript">
function doClick(){
var s="name="+document.forms[0].name+"\n"+
"action="+document.forms[0].action+"\n"+
"method="+document.forms[0].method+"\n";
alert(s)}
</script>

Тут ми звертаємося до першого елементу масиву forms - forms[0] і

виводимо значення його властивостей (рис.24).

Рисунок 24 - Виведення значень властивостей об'єкту form

42
 Упізнати кількість форм в цьому документі ми можемо за допомогою
властивості length:

function doClick(){
var s="Кількість форм в документі: "+document.forms.length;
alert(s)}

Результат виконання функції doClick() приведений на рис.25.

Рисунок 25 - Виведення кількості об'єктів form в документі

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

усього масиву. Властивість length окремого елементу (у нашому прикладі -
першого) дає кількість елементів у формі:

function doClick(){
var s="Кількість елементів у формі: "+document.forms[0].length;
alert (s)
}

Результат виконання функції doClick() приведений на рис.26.

Рисунок 26 - Виведення кількості елементів у формі

43
 Об'єкт form підтримує два методи, submit() і reset(). Виклик методу
submit() передає дані форми, а виклик reset() скидає значення елементів
форми.
Напевно, найчастіше у формах зустрічаються однорядкові поля,
призначені для введення і редагування тексту. Сценаріям JavaScript доступні
три властивості поля редагування як об'єкта класу text :
- defaultValue - відбиває стан параметра value;
- name - значення параметра name;
- value - поточний вміст поля редагування.
Відразу після відображення поля редагування властивості defaultValue і
value зберігають однакові рядки. Коли користувач редагує текст, усі зміни
відбиваються у властивості value. Помітимо, що змінюючи вміст властивості
value, сценарій JavaScript може змінити вміст поля редагування.
Для об'єкту text визначені методи focus(), blur() і select(), що не
мають параметрів. За допомогою методу focus() сценарій JavaScript може
передати фокус полю редагування, а за допомогою методу blur() - відібрати
фокус у цього поля. Виклик методу select() призводить до виділення вмісту
поля редагування.
Обробники подій об'єкту text викликаються в наступних випадках:
- onFocus - поле редагування отримує фокус введення;
- onBlur - поле редагування втрачає фокус введення;
- onChange - при зміні вмісту поля редагування;
- onSelect - при виділенні вмісту поля редагування.

Перевірка введених даних

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

Необхідно перевірити, чи немає порожніх рядків і чи правильно введено
електронну адресу (наявність символу "@").

<html>
<head>
<title>Приклад форми</title>
<script type="text/javascript">
function doClear(){
if(confirm('Очистити поля форми?'))
document.user.reset()
}
function doSend(){
var s=document.user.e.value;
var v=s.indexOf("@",1);
if(document.user.f.value==""){
alert('Ви повинні заповнити поле ПІБ');
document.user.f.focus()
} else
if(document.user.a.value==""){
alert('Ви повинні заповнити поле адреси');

44
document.user.a.focus()
} else
if(document.user.e.value==""){
alert('Ви повинні заповнити поле e-mail');
document.user.e.focus()
} else
if(v==-1){
alert('Адресу e-mail вказано невірно');
document.user.e.select();
document.user.e.focus()
}
else
document.user.submit()
}
</script>
</head>
<body>
<p align="center"><font size=6> Дані про користувача</font>
<form name="user" action="page.php" method="POST">
<b> Будь ласка, вкажіть дані про себе:</b>
<br><br>
ПІБ &nbsp;<input type="text" name="f" size="30"><br>
Адреса &nbsp;<input type="text" name="a" size="35"><br>
e-mail &nbsp;<input type="text" name="e" size="30"><br>
<input type="button" value="Послати" onClick="doSend()">
<input type="button" value=" Відмінити" onClick="doClear()">
</form>
</p>
</body>
</html>

Якщо при натисненні на кнопку "Послати" якесь поле буде порожнім, то

відобразиться повідомлення про необхідність заповнити це поле.
Якщо ж усі поля заповнені, але в полі введення e - mail відсутній символ
@, то видається повідомлення “Адресу e - mail вказано невірно ”.
При натисненні на кнопку "Відмінити" видається панель з запитом
“Очистити поля форми?”. Якщо вибираємо "OK", в полях форми інформація
видаляється, якщо вибираємо "Відміна", інформація у формі залишається.

Об'єкт window

Завантаження у браузер HTML-документу призводить до того, що у

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

window.властивість
window.метод([параметри])

45
 У об'єкту window є синонім self, який використовується при зверненні
до вікна, що містить поточний документ. Інакше кажучи, ідентифікатор self
застосовується у багатовіконних системах, коли вимагається вказати вікно з
документом, в якому знаходиться цей сценарій. Його рекомендується
вставляти, щоб не заплутатися. При запуску сценарію в посиланнях на об'єкти
тільки поточного документу ідентифікатори window і self можна опускати.
У об'єкту window є ряд підоб'єктів. Об'єкт location містить інформацію,
корисну для роботи в мережі. Окрім цього, властивість href об'єкту location
використовується для завантаження документу в поточне вікно:

window.location.href = "URL-адрес документу"

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

Відображення діалогових панелей

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

методи ми вже розглядали:
- метод alert();
- метод confirm();
- метод prompt().

Створення нових вікон

Одно з призначень об'єкту вікна - це створення нового вікна. Нове вікно

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

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

Змінна nw зберігає дані нового об'єкту window. Її ім'я можна використати

з методами і властивостями створеного об'єкту window.
Перший параметр методу window.open() - це URL документу, що
завантажується у вікні. Якщо його не заповнити, то вікно залишиться
порожнім.
Другий параметр визначає ім'я вікна (NAME). Це ім'я використовується як
значення параметра target у тегів <form> і <a>.
Третій параметр представляє список необов'язкових опцій, розділених
комою. З їх допомогою визначається вид нового вікна: наявність в ньому
панелей інструментів, рядка стану і інших елементів.
Опис параметрів нового вікна методу open(), що задається третім
параметром (PARAMETR) наведено у таблиці 2.
46
Таблиця 2 - Параметри нового вікна
Параметр Значення Опис
yes no Вказує, чи показується нове вікно на повний
fullscreen
1 0 екран або як звичайне вікно.
yes no
toolbar Задає відображення смуги кнопок
1 0
yes no
location Задає відображення смуги для введення адреси
1 0
yes no Задає відображення смуги кнопок для вибору
directories
1 0 каталогів
yes no
status Задає відображення смуги статусу
1 0
yes no
menubar Задає відображення смуги меню
1 0
yes no Задає відображення горизонтальної і вертикальної
scrollbars
1 0 смуг прокрутки
yes no Дозволяє вказати, чи може вікно змінювати свій
resizable
1 0 розмір
yes no Задає ширину вікна в пікселах. Мінімальне
width
1 0 значення - 100
yes no Задає висоту вікна в пікселах. Мінімальне
height
1 0 значення - 100
yes no Задає вертикальну координату лівого верхнього
top
1 0 кута вікна
yes no Задає горизонтальну координату лівого верхнього
left
1 0 кута вікна

Закриття вікон

Метод window.close() закриває вікно.

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

<html>
<head>
<title>Створення вікна</title>
<script type="text/javascript">
function win (){
var NewWin=open('', 'NewWin', 'width=200, height=200, status=yes,
toolbar=yes, menubar=yes')
}
function win1(){
NewWin.close()
}
47
</script>
</head>
<body>
<h1>Створення нового вікна</h1>
<hr>
Для відкриття і закриття вікна використайте ці кнопки
<hr>
<form name="winform">
<input type="button" value="Відкрити нове вікно" onClick="win()">
<p>
<input type="button" value="Закрити нове вікно" onClick="win1()">
</form>
<hr>
</body>
</html>

Якщо клацнути по кнопці “Відкрити нове вікно”, створиться нове вікно

із заданими параметрами (рис.27).

Рисунок 27 - Нове вікно із заданими параметрами

Якщо клацнути по кнопці Закрити нове вікно - нове вікно закриється.

Часові затримки

JavaScript містить спеціальні функції, що дозволяють задати часову

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

48
<script type="text/javascript">
var z=window.setTimeout("alert ('Ваш час витік')", 5000);
</script>

У цьому прикладі задана команда відображення попередження із

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

<html>
<head>
<script type="text/javascript">
var msg = "Помістіть на це місце своє повідомлення ... "
function scrollMsg(){
document.scrollerForm.welcomeMsg.value = msg;
msg = msg.substring(1, msg.length) + msg.substring(0, 1);
setTimeout("scrollMsg()", 150)
}
</script>
</head>
<body onLoad="scrollMsg()">
<form name="scrollerForm">
<input type="text" name="welcomeMsg" value="" size=40>
</form>
</body>
</html>

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

використовується метод window.setInterval().
Наведемо приклад.

<html>
<head>
<title>Тимчасові затримки</title>
<script type="text/javascript">
function wz(){
window.alert('Прошло 5 секунд')
}
function demo(){
//викликати функцію wz кожні 5 секунд
window.setInterval('wz()', 5000)
}
demo()
</script>
</head>
<body>
</body>
</html>

49
 В результаті виконання скрипта через кожні 5 секунд видається
повідомлення (рис.28).

Рисунок 28 - Кожні 5 секунд видається повідомлення

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

дії методів window.setTimeout() і window.setInterval().

Текстовий годинник

Створимо скрипт, що виводить поточний час. Час виводитиметься як

заголовок інтерфейсного елементу "кнопка". Приведемо текст скрипта.

<html>
<head>
<title>Годинник</title>
<script type="text/javascript">
function ftime(){
var time=new Date();
var h=time.getHours();
var minute=time.getMinutes();
var sec=time.getSeconds();
var temp=h;
temp+= ((minute<10)?":0":":") +minute;
temp+= ((sec<10)?":0":":") +sec;
document.forms[0].clock.value=temp;
setTimeout ("ftime()",1000)
}
</script>
</head>
<body onLoad="ftime()">
<div align="center">
<font size=5><b>Поточний час</b></font>
<form name="d">
<input type="button" name="clock" value="">
</form>
</div>
</body>
</html>

50
 Результат роботи скрипта приведений на рис.29.

Рисунок 29 - Виведення поточного часу

Спочатку ми створюємо новий екземпляр об'єкту Date, що дозволяє нам

отримати поточну дату і час. Потім за допомогою методів об'єкту Date ми
отримуємо необхідні нам дані, додаємо 0 до чисел хвилин і секунд, які менше
10, і відображаємо час як нове значення підпису кнопки.
Для того, щоб годинник працював, використовуємо метод setTimeout()
об'єкту window. Оскільки нам потрібен годинник, що відображає час кожну
секунду, ми задаємо інтервал 1000 і викликаємо функцію ftime().

Таймер

Розглянемо, як можна створити таймер. Реалізація таймера схожа з

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

<html>
<head>
<title>Таймер</title>
</head>
<body>
<form name="f">
<div align="center">Ви знаходитеся на цій сторінці вже<br>
<input type="text" name="timer" size=" 16"><br>секунд (ы)
</div>
</form>
<script type="text/javascript">
var ms=0;
var sc=0;
document.f.timer.value='0';
function up()
{
if (ms>=9)
{ms=0;
sc+=1;

51
}
else
{
ms+=1
}
document.f.timer.value=sc+'.'+ms;
setTimeout("up()",100);
}
up()
</script>
</body>
</html>

Об'єкт document

Об'єкт document є центральним в ієрархічній об'єктній моделі і

представляє усю інформацію про HTML-документ за допомогою колекцій і
властивостей. Він також надає безліч методів і подій для роботи з документами.
Ми вже розглядали деякі основні прийоми роботи з цим об'єктом. Розглянемо
деякі властивості об'єкту document.
Наприклад, властивість document.lastModified. Застосування цієї
властивості дозволяє автоматично виводити дату останньої модифікації
документу.

<html>
<head>
<title> Виведення дати</title>
</head>
<body>
<div align="center">
<h2>Остання модифікація документу:</h2>
<script type="text/javascript">
document.write(document.lastModified)
</script>
</div>
</body>
</html>

У вікні браузеру відобразиться дата останньої модифікації документу

(рис.41).

Рисунок 41 - Виведення дати останньої модифікації документу

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

Таблиця 3 - Властивості об'єкту document, пов'язані з кольором

Властивість Опис
bgColor Визначає колір фону документу
fgColor Визначає колір тексту документу
linkColor Визначає колір гіперпосилання
alinkColor Визначає колір активного гіперпосилання
Визначає колір гіперпосилання, що раніше
vlinkColor
відвідувалося

Наведемо приклад: нехай відбувається зміна фону документу при

клацанні на кнопці з назвою кольору.

<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>

У вікні браузеру відобразяться кнопки з написами назв кольорів. При

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

53