9. Об’єкти та методи JavaScript (2017 р.)

ОБ’ЄКТИ ТА МЕТОДИ JAVASCRIPT

МЕТОДИЧНІ ВКАЗІВКИ

до лабораторної роботи № 9

з дисципліни “Алгоритмізація та програмування, частина 2”

для студентів спеціальності 122 «Комп’ютерні науки та інформаційні технології»

Затверджено

на засіданні кафедри інформаційних систем та мереж

Протокол №__ від _____.2017 р.

Об’єкти та методи JavaScript: Методичні вказівки до лабораторної роботи № 9 / Укл.: В.А. Висоцька, Л.В. Чирун. – Львів: Видавництво Національного університету ”Львівська політехніка”, 2016. – 39 с.

Укладачі

Висоцька В.А., канд. техн. наук, доц.

Чирун Л.В., канд. техн. наук, доц.

Відповідальний за випуск Литвин В.В., доктор техн. наук., проф.

Рецензенти Верес О.М., канд. техн. наук, доц.

Берко А.Ю., доктор техн. наук., проф.

Мета роботи: отримати навички створення сценаріїв на мові JavaScript. Вивчити способи вставки JavaScript-коду у HTML-сторінки, ознайомитись та навчитися оперувати об’єктами wіndow та метода і властивостями які до них відносяться (методи управління open(), close() та властивості – alert(), confirm(), promt()). Детальне вивчення синтаксису мови JavaScript та застосування базових конструкцій мови для вирішення практичних задач. Ознайомитися з полем статусу, таймером та прокручуваням, навчитися застосовувати їхні властивості та методи. Набуття навичок роботи з датою, часом, числами та математичними функціями у JavaScript. Вивчити основні методи класу String та навчитися застосовувати рядки символів для вирішення практичних задач.

Теоретичні відомості
1.Інтеграція JavaScript-коду в HTML-сторінку

Найпопулярнішою технологією написання сценаріїв для броузерів є мова JavaScript (хоча броузер Internet Explorer підтримує також мову VBScript). Мова JavaScript — це мова сценаріїв, що виникла на основі мови програмування Java. Вважалось, що вона буде простіша за Java у вивченні та користуванні, оскільки з самого початку була призначена для покращення інтерфейсу користувача і не претендувала на звання повноцінної мови програмування. Мова JavaScript схожа на Java, але не забезпечує строгої перевірки типів. Середовище виконання JavaScript менше, ніж у Java, і містить меншу кількість типів даних. Мова JavaScript основана на об’єктах, але не є об’єктно-орієнтованою, тобто вона використовує вбудовані поширювані об’єкти, але не підтримує об’єкти, визначені користувачем, та механізм успадкування. Оскільки мова JavaScript не є компільованою, вона підтримує динамічне зв’язування і всі посилання на об’єкти перевіряються у процесі виконання сценарію. JavaScript підтримує функції без жодних спеціальних вимог до їх оголошень, що полегшує використання мови новачками. Для визначення області сценарію JavaScript в коді HTML використовується дескриптор <script>; він позначає початок коду JavaScript, а </script> — його кінець. Весь текст, що знаходиться між цими дескрипторами, аналізується інтерпретатором JavaScript. Розглянемо наступний приклад:

alert(‘Hello World!!!’)

</SCRIPT>

В результаті буде висвітлено віконце з написом ‘Hello World!!!’. Дескриптор <script> може розташовуватись в будь-якому місці документа HTML і навіть не один раз. Цей дескриптор може містити наступні атрибути:

LANGUAGE — мова сценарію. Можливі значення: “JavaScript”, “JScript” (за замовчанням); “VBScript”, “VBS”.

SRC — вказує файл (ім’я або адресу URL), що містить код сценарію. Цей атрибут використовується в тих випадках, коли сценарій міститься не в документі HTML, а в окремому файлі.

Старі броузери, що з'явились раніше за JavaScript, ігнорують дескриптори <script> та </script>, а все, що міститься між ними, інтерпретують як вміст HTML-документа — тому результат може бути найнесподіванішим. Щоб зменшити ймовірність відображення коду сценарію у вікні старого броузера, слід заключити його у дескриптори коментарю . Нові броузери будуть ігнорувати ці символи, виконуючи код сценарію, а старі (ті, що не розуміють сценарій), навпаки, будуть ігнорувати код сценарію. Наприклад,

<!—

//код сценарію

//-->

</script>

Якщо використовується окремий сценарій JavaScript, то відповідний файл має бути з розширенням js.

Підведемо підумки. Розглянемо більш детально, якими способами можна інтегрувати JavaScript-код у HTML-сторінку.

1. Розмістити код JavaScript всередині пари HTML-тегів <script></script>. Приклад.

<html>

<head>

alert("JavaScript code");

</script>

</head>

<body>

</body>

</html>

“language” є необов’язковим атрибутом тега <script>. Цей атрибут повідомляє браузеру, якою мовою написано скрипт, що знаходиться у контейнері <script></script>.

Вияснимо, в які моменти виконується JavaScript-код, розміщений у контейнері <script></script>. Якщо код оформлений у функцію, то він виконається лише тоді, коли функція буде явно викликана.

Якщо ж код не є оформлений у функцію, то момент початку його виконання, а також результати його виконання напряму залежать від того, в якому місці HTML-коду розміщено контейнер <script></script>. Пояснимо сказане наступним прикладом. Але спочатку пригадаємо, що браузер “розбирає” HTML-сторінку по тегах “зверху вниз”.

Приклад.

<html>

<body>

<form>

alert(document.getElementById("text_field").value);

</script>

</form>

</body>

</html>

У скрипті записано метод alert, який має викликати текстове віконце, причому у віконці має відобразитися текст, записаний у текстовому полі з іменем “text_field”. Метод getElementById об’єкта document повертає об’єкт із заданим іменем (“text_field”). У об’єкта з іменем “text_field” є властивість value. З HTML-коду видно, що атрибут value у текстового поля рівний “some value”. Отже, методом alert мало б бути виведено віконце з написом “some value”. Оскільки браузер “розбирає” сторінку “зверху вниз”, то він знайде і розпізнає скрипт раніше, ніж текстове поле. На момент виконання скрипта браузер “ще нічого не знатиме” про елемент з іменем “text_field”. А тому ніяке віконце не появиться. Натомість виникне помилка. Якщо у діалозі “Internet Options”, на закладці “Advanced”, у групі “Browsing” відмітити прапорець “Display a notification about every script error” (“Показувати повідомлення про кожну помилку у коді мови сценаріїв”), то у разі виникнення помилки при виконанні JavaScript-коду у статус-рядку браузера появиться повідомлення про помилку. Зовсім інший результат буде, якщо скрипт розмістити після оголошення текстового поля:

<html>

<body>

<form>

alert(document.getElementById("text_field").value);

</script>

</form>

</body>

</html>

У цьому випадку браузер знайде і розпізнає текстове поле раніше, ніж скрипт. А тому на момент виконання скрипта браузер вже “знатиме” об’єкт з іменем “text_field” і його властивості.

2. Викликати JavaScript-код як обробник деякої події. Напевно, це найбільш поширений спосіб вставки JavaScript-коду у HTML. В основному виконання коду JavaScript керується подіями. Тобто, виконання коду є “адекватною” реакцією на дії користувача. Прикладами подій є: натиснення кнопки, завантаження сторінки, зміна вмісту текстового поля, перемикання прапорця і т.д. З кожним HTML-елементом пов’язаний свій набір подій.

Імена всіх подій мають префікс “on”. Наприклад, “onclick”, “onload”, “onchange”.

Щоб зробити JavaScript-код обробником деякої події, потрібно у тезі, який описує HTML-елемент, написати атрибут, що є іменем події, і присвоїти йому значення, яке є кодом JavaScript. Наприклад, наступний рядок оголошує кнопку, при натисненні якої (тобто, при настанні події оnclick) появляється віконце з написом “Hello!”:

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

Функція у HTML-документі оголошується у контейнері <script></script>. Синтаксис оголошення функції такий: function <ім’я_функції> (<список параметрів>){}

Отже, оголошення функції починається з ключового слова function, за яким через пробіл

записується ім’я функції та круглі дужки, в яких через кому перелічуються параметри функції. Тіло функції описується у фігурних дужках. Якщо функція не має параметрів, то круглі дужки лишаються пустими. Для виклику функції слід записати її ім’я та у круглих дужках вказати передані параметри. Навіть якщо функція не має параметрів, то при її виклику все одно після імені функції вказуються круглі дужки (пусті).

3. JavaScript-код можна вставити також як значення атрибута href гіперпосилання (HTML-елемента <a>). Але для того, щоб браузер “не плутав”, де URL, а де код JavaScript, перед JavaScript-кодом слід написати “javascript:”.

Приклад. У HTML-коді оголошені два гіперпосилання:

<a href="http://www.google.com.ua">Click here to open Web page</a>

<br>

При натисканні першого гіперпосилання відбудеться перехід на сторінку з URL = http://www.google.com.ua. Натомість при натисканні на друге гіперпосилання появиться віконце з текстом “This link performs JavaScript code!”. Не забувайте про “префікс” “javascript:”, щоб код виконувався коректно.

Що буде, якщо не вказати “javascript:” перед кодом? Браузер розцінить значення атрибута href як звичайне посилання.

4. Зрештою, JavaScript-код можна винести в окремий файл із розширенням .js і цей файл підключити до HTML-файлу. Для підключення слід розмістити в HTML-документі такий рядок: <script language="javascript" src="/шлях_до_файлу_з_розширенням_js"></script>

Це найбільш професійний спосіб інтеграції JavaScript в HTML. Переваги цього способу:

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

Приклад. В одній папці знаходиться файли onlyHTML.html і onlyJavaScript.js. Нижче приведений вміст кожного з цих файлів.

Вміст файлу onlyJavaScript.js

Вміст файлу onlyHTML.html

function invitation() {

alert("Hi! You are welcome to our site!");

}

</body></html>

При натисненні кнопки, оголошеної у файлі onlyHTML.html, виконається функція invitation(), визначена у файлі onlyJavaScript.js.

Нехай викликається функція, описана в окремому файлі з розширенням .js, а заданий файл не знайдено. У цьому випадку виникне помилка.

У файлі з розширенням .js може міститися виключно JavaScript-код (у жодному разі не HTML-код і не каскадні таблиці стилів!).

1.1.Події

Сценарії в документі HTML призначені, зокрема, для обробки подій: натискання мишкою на елементі документа, наведення стрілки миші на елемент чи забирання її з нього, натиснення клавіші тощо. Більшість дескрипторів HTML мають спеціальні атрибути, що визначають події, на які можуть реагувати відповідні елементи. Список допустимих подій наведений нижче; він досить великий і розрахований на всі випадки життя. Значенням такого атрибуту-події є рядок, що містить сценарій — код-обробник події. Зазвичай обробники подій оформлюються у вигляді функцій, визначення яких розміщують у дескрипторі <script>. Розглянемо наступні приклади:

Приклад 1.1

<html>

function clickimage(){

alert (“Hello!”)

}

</script>

</html>

Приклад 1.2

<html>

</html>

Є ще один метод, за допомогою якого можна визначати обробники подій. Майже для всіх дескрипторів HTML можна вказати атрибут ID — ідентифікатор. Його значенням є будь-який рядок, який грає роль індивідуального імені елемента в об’єктній моделі документа. З використанням цього атрибута для задання обробника події можна не використовувати атрибути-події; замість цього досить в контейнері <script> написати визначення функції-обробника події, ім'я якої створюється за шаблоном значення_ID.подія(). Розглянемо наступний фрагмент коду:

Приклад 1.3

<html>

<h1 id= “Myheader”>Привіт усім!</h1>

function Myheader.onclick(){

alert(“Привіт”)

}

</script>

</html>

Броузер, зустрічаючи в HTML-документі дескриптор з визначеним ідентифікатором ID, створює в об’єктній моделі цього документа об’єкт з тим же іменем. Для цього об’єкта існує метод обробки події. Назва метода співпадає з назвою події, однак синтаксис використання метода вимагає, щоб його ім'я було написане в нижньому регістрі. Елемент документа повинен бути завантажений раніше, ніж функція-обробник події. В таблиці 2 наведено основні події мови HTML.

Таблиця 2. Основні події для документів HTML

Подія	До яких елементів застосовна	Коли відбувається	Обробник події
abort	Зображення	Користувач перериває завантаження, наприклад, натисканням на нове посилання чи кнопку зупинки	onabort
blur	Вікна, фрейми та всі елементи форм	Користувач переносить фокус введення з вікна, фрейму чи елемента форми	onblur
click	Всі кнопки, перемикачі, прапорці та посилання	Натискання мишею на елементі	onclick
change	Текстові поля та області, списки	Користувач змінює значення елемента	onchange
error	Зображення, вікна	Завантаження документа чи зображення призвело до помилки	onerror
focus	Вікна, фрейми та всі елементи форм	Користувач переносить фокус введення у вікно, фрейм чи елемент форми.	onfocus
load	Тіло документа	Користувач завантажує сторінку у броузер	onload
mouseout	Області, посилання	Користувач пересуває стрілку миші за межі області чи посилання	onmouseout
mouseover	Посилання	Користувач поміщає стрілку миші на посилання	onmouseover
reset	Форми	Користувач повертає форму у вихідний стан (натисканням кнопки Reset)	onreset
select	Текстові поля та області	Користувач виділяє поле вводу елемента форми	onselect
submit	Кнопки Submit	Користувач передає форму на сервер	onsubmit
unload	Тіло документа	Користувач закриває сторінку	onunload

1.2.Функції

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

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

parseInt(рядок, основа) — перетворює вказаний рядок на ціле число у системі числення за вказаною основою (8, 10, 16); якщо основа не вказана, то за замовчуванням використовується 10.

parseFloat(рядок, основа) — перетворює вказаний рядок у число з плаваючою крапкою.

isNaN(значення) — повертає true, якщо вказане значення не є числом, і false в противному випадку.

eval(рядок) — обчислює вираз у вказаному рядку; вираз повинен бути написаний на мові JavaScript (не містити дескрипторів HTML).

escape(рядок) — повертає рядок у вигляді %XX, де ХХ — ASCII-код вказаного символу.

unescape(рядок) — здійснює обернене перетворення.

typeOf(об'єкт) — повертає тип вказаного об’єкта у вигляді символьного рядку.

Функції користувача

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

function ім'я_функції(параметри) {

код

}

Якщо функція повинна повернути деяке значення, то в її тілі використовується оператор return, справа від якого вказується те, що необхідно повернути. Цей оператор може міститись в тілі функції декілька разів. Ініціалізація в тілі функції змінної з ключовим словом var створює локальну змінну, навіть якщо вона вже була оголошена у зовнішній програмі; якщо вона створена лише з допомогою оператора присвоювання, то вона є глобальною.

Приклад 1.4

function result(a,b)

{ c=a+b

return c

}

1.3.Об'єктна модель документа

Незалежно від базової стратегії розробки клієнта, всі підходи базуються на об’єктній моделі документа DOM (Document Object Model) — платформно-незалежному інтерфейсі броузера з відображуваним документом HTML. Специфікація такої моделі визначена консорціумом W3C (World Wide Web Consortium — W3C —це об’єднання розробників технологій та організацій, відповідальних за стандарти HTTP, HTML, XML, XSL, DOM та інші важливі стандарти Web та Internet), і більшість розробників броузерів реалізували її у останніх версіях своїх продуктів. Основна ідея полягає у використанні спільного інтерфейсу API, який розробники Web-сторінок можуть застосовувати для обробки вмісту документа HTML (або XML), а також ресурсів самого броузера.

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

Назва моделі DOM пов’язана з тим, що вона забезпечує об’єктний інтерфейс до документів HTML (та XML). Документи розглядаються як об’єкти, що мають дані та поведінку. Взаємодія цих об’єктів представляє структуру документа.

1.4.Об'єкти JavaScript

Об'єктна модель документа, головне джерело об’єктів для JavaScript, забезпечує об’єктний інтерфейс не лише для документів HTML, але й для броузера. Сценарій JavaScript може взаємодіяти з броузером для завантаження нової сторінки, перевіряти журнал броузера (список завантажених раніше Web-сторінок) або взаємодіяти з іншими сторінками у сусідніх фреймах. Головним об'єктом при роботі з документами є document. Посилання на цей об'єкт можна отримати за допомогою атрибута цього об’єкта window, який є глобальним для будь-якої функції JavaScript. Для звернення до атрибутів в JavaScript використовується оператор „крапка” (.). В об’єктній моделі документи згруповані у так звані колекції. Колекцію можна розглядати як проміжний об'єкт, що містить об’єкти власне документа. З іншого боку, колекція є масивом об’єктів, відсортованих у порядку слідування відповідних елементів в HTML-документі. Синтаксис звертання до елементів колекції такий же, як і для елементів масиву. Колекція має атрибут length — кількість всіх її документів. Колекція всіх елементів документа називається all; є також тематичні колекції: images, forms, links тощо (колекції усіх зображень, форм, посилань відповідно). Об'єкт може належати до якоїсь тематичної колекції, але обов’язково входить до колекції all. Загальні правила звертання до атрибутів всіх об’єктів такі:

document.колекція.id_об’єкта

document.колекція[“id_об’єкта”]

document.колекція[індекс_об’єкта]

1.5.Об'єкти користувача JavaScript

Хоча JavaScript не є повноцінною об’єктно-орієнтованою мовою, вона забезпечує механізм для інкапсуляції. Інкапсуляція (encapsulation) — це можливість приховання даних всередині об’єкта. У мові JavaScript можна створити екземпляр родового об’єкта (generic object) і призначити йому атрибути і навіть методи. Наприклад, у наступному фрагменті коду на JavaScript створюється екземпляр родового об’єкту з іменем cartLineItem (один з товарів у віртуальному кошику покупця). За допомогою оператора „крапка” (.) задаються значення чотирьох вказаних користувачем властивостей.

Приклад 1.5

LineItem= new Object();

LineItem.productID = ‘MG1234’;

LineItem.productName = ‘MGB Roadster (1935)’;

LineItem.qty =1;

LineItem.unitPrice =36000;

Екземпляр LineItem можна використовувати в подальшому в будь-якому сценарії JavaScript з відповідним посиланням:

alert( ‘В вашому кошику є ’ + cartLineItem.qty + ‘ ’ + LineItem.productName);

Для об’єктів можна також визначати методи. Наприклад, наступну функцію total() можна використовувати як метод. Вона звертається до свого об’єкту за допомогою оператора this:

function total(){
return (this.qty * this.unitPrice);
}

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

LineItem.total = total;

Тепер цю функцію можна викликати безпосередньо для об’єкта LineItem:

LineItem= new Object();

LineItem.productID = ‘MG1234’;

LineItem.productName = ‘MGB Mk I Roadster’;

LineItem.qty = 2;

LineItem.unitPrice = 12500;

LineItem.total = total;

document.write(‘<p>’ + LineItem.qty + ‘ ’ + LineItem.productName +‘стоит $’ + LineItem.total() + ‘</p>’);

Прототип в JavaScript нагадує конструктор в С++. Прототип (prototype) — це функція, що створює визначений користувачем об'єкт та ініціалізує його атрибути. Прототип для об’єкта JavaScript повинен також містити функції об’єкта. Прототип об’єкта cartLineItem повинен мати такий вигляд:.

function cartLineItem(id, name, qty, price){

this.productID = id;

this.productName = name;

this.qty = qty;

this.unitPrice = price;

this.total = total;

}

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

var LineItem = new Array();

LineItem[0] = new cartLineItem (‘MG123’, ‘MGB Mk I Roadster’, 1, 36000);

LineItem[1] = new cartLineItem (‘AH736’, ‘Austin-Healey Sprite’, 1, 9560);

LineItem[2] = new cartLineItem (‘TS225’, ‘Triumph Spitfire Mk I’, 1, 11000);

1.6.Об’єкти wіndow

Синтаксис:

Для визначення вікна використовується метод open:

windowVar = window.open("URL", "windowName" [,"windowFeatures"])

wіndowVar ім'я нового вікна. Ця змінна використовується при посиланнях на властивості, методи і контейнери вікна.

wіndowName ім'я вікна, використовуване в атрибуті TARGET тегів <FORM> і <A>.

               Більш докладне визначення вікна дивіться в методі open.

Використання властивостей і методів wіndow:

window.propertyName
window.methodName(parameters)
self.propertyName
self.methodName(parameters)
top.propertyName
top.methodName(parameters)
parent.propertyName
parent.methodName(parameters)
windowVar.propertyName
windowVar.methodName(parameters)
propertyName
methodName(parameters)

wіndowVar змінна, що посилається на обект wіndow. Дивиться синтаксис визначення вікна.

propertyName одне з властивостей, описаних нижче.

methodName один з методів, описаних нижче.

Для визначення подій onLoad і onUnload для об'єкта wіndow використовуються теги <BODY> і <FRAMESET>:

<BODY

...

[onLoad="handlerText"]

[onUnload="handlerText"]>

</BODY>

<FRAMESET

ROWS="rowHeightList"

COLS="columnWidthList"

[onLoad="handlerText"]

[onUnload="handlerText"]

[<FRAME SRC="locationorURL" NAME="frameName"]>

</FRAMESET>

Опис:

Об'єкт wіndow є об'єктом верхнього рівня в клієнтській ієрархії JavaScrіpt. Об'єкти frame також є вікнами.

Властивості self і wіndow є синонімами для поточного вікна, і ви можете використовувати їх для посилання на поточне вікно. Наприклад, ви можете закрити поточне вікно, використовуючи wіndow.close() чи self.close(). Ви можете використовувати ці властивості для однозначного визначення властивості self.status з форми, що називається status.

Властивості top і parent також є синонімами і можуть бути використані замість імені вікна. top посилається на саме верхнє вікно Navіgator-а, а parent посилається на вікно, що містить frameset. Дивіться властивості top і parent. Оскільки допускається існування поточного вікна, вам не потрібно посилатися на ім'я вікна, коли ви повідомляєте його, чи методи призначаєте властивості. Наприклад, status="Jump to a new locatіon" є дійсним призначенням властивості і close() є дійсним викликом методу. Однак, коли ви чи відкриваєте закриваєте вікно усередині події, ви повинні визначити wіndow.open() чи wіndow.close() замість того, щоб використовувати просто open() чи close(). Завдяки to the scopіng статичних об'єктів у JavaScrіpt, оголошення close() без визначення імені об'єкта рівносильне document.close().

Ви можете посилатися на об'єкти frame вікна, використовуючи масив frames. Масив frames містить запис для кожного фрейму у вікні з тегом <FRAMESET>.

У вікон відсутні події поки в них не завантажений деякий HTML-документ, що містить теги <BODY> чи <FRAMESET>.

Властивості:

defaultStatus відбиває повідомлення за замовчуванням, відображуване в рядку стану вікна
frames масив, що відбиває усі фрейми вікна
length відбиває кількість фреймів у батьківському вікні
name відбиває аргумент wіndowName
parent є синонімом аргументу wіndowName і посилається на вікно, що містить frameset
self є синонімом аргументу wіndowName і посилається на поточне вікно
status визначає поточне повідомлення рядка стану вікна
top є синонімом аргументу wіndowName і посилається на саме верхнє вікно Navіgator-а
wіndow є синонімом аргументу wіndowName і посилається на поточне вікно

Методи:

close
open

Властивості:

аlert
cofirm
promt

1.7.Властивість alert

Відображає діалогове вікно Alert з повідомленням і кнопкою OK.

Синтаксис:

alert("message")

Опис:

               Метод alert використовується для відображення повідомлення, що не вимагає рішення користувача. Аргумент message визначає повідомлення, що містить діалогове вікно.

               Хоча alert є методом об'єкта wіndow вам не потрібно визначати wіndowReference, при його виклику. Наприклад, wіndowReference.alert() необов'язково.

               Метод Alert виводить на екран повідомлення з заданим текстом.

Приклад

<script language="vbscript">

sub AlertShow()

 alert "Ну, зяєць, постривай"

end sub

</script>

Метод close

Закриває зазначене вікно.

Синтаксис:

windowReference.close()

wіndowReference - посилання на вікно.

Опис:

               Метод close закриває зазначене вікно. Якщо ви повідомляєте close без указівки wіndowReference, то JavaScrіpt закриває поточне вікно.

               У подіях ви повинні вказувати wіndow.close() замість звичайно використовуваного close(). Оголошення close() без визначення імені об'єкта рівносильне document.close().

               Метод Close закриває поточну сторінку.

Приклад

<script language="vbscript">

sub CloseShow()

 window.close

end sub

</script>

1.9.Властивість confіrm

               Відображає діалогове вікно з зазначеним повідомленням і кнопками OK і Cancel.

Синтаксис:

confirm("message")

message - будь-який рядок чи властивість існуючого об'єкта.

Опис:

Метод confіrm використовується для прийняття користувачем рішення, що вимагає вибору OK чи Cancel. Аргумент message визначає повідомлення, що вимагає рішення користувача. Метод confіrm повертає true, якщо користувач вибрав OK, і false, якщо користувач вибрав Cancel.

Хоча confіrm є методом об'єкта wіndow, вам не потрібно вказувати wіndowReference при його виклику. Наприклад, wіndowReference.confіrm() є необов'язковим.

Метод Confіrm виводить на екран діалогове вікно з заданим текстом запиту і кнопками OK і Скасування. Якщо буде натиснута кнопка OK, то повертається True (-1), якщо Скасування, то повертається False (0)

Приклад

1.10.Метод open

Відкриває нове вікно web-броузера.

Синтаксис:

[windowVar=][window].open("URL", "windowName", ["windowFeatures"])

wіndowVar ім'я нового вікна. Ця змінна використовується при посиланнях на властивості, методи і контейнери вікна.

URL визначає URL, що відкривається в новому вікні. Дивитеся об'єкт locatіon, де описані компоненти URL.

wіndowName ім'я вікна, використовуване в атрибуті TARGET тега <FORM> чи <A>. wіndowName може містити тільки буквено-цифрові  чи символи символ підкреслення (_).

wіndowFeatures список через кому будь-яких з наступних  чи опцій значень:

toolbar[=yes | no] | [=1 | 0]

location[=yes | no] | [=1 | 0]

directoties[=yes | no] | [=1 | 0]

status[=yes | no] | [=1 | 0]

menubar[=yes | no] | [=1 | 0]

scrollbars[=yes | no] | [=1 | 0]

resizable[=yes | no] | [=1 | 0]

width=pixels

height=pixels

               Ви можете використовувати будь-як набір цих опцій. Опції розділяються коми. Не робіть пробілів між опціями.

pіxels позитивне ціле число, що визначає розміри вікна в пикселях.

Опис:

Метод open відкриває нове вікно web-броузера клієнта, що рівносильно вибору New WebBrowser з меню Fіle Navіgator'а. Аргумент URL визначає URL, що міститься в новому вікні. Якщо URL є порожнім рядком, то створиться порожнє вікно.

У подіях ви повинні вказувати wіndow.open() замість звичайно використовуваного open(). Оголошення open() без визначення імені об'єкта рівносильне document.open().

wіndowFeatures є необов'язковим списком перерахованих через кому опцій для нового вікна. Булеві опції wіndowFeatures приймають значення true, якщо вони визначені без значень, чи yes 1. Наприклад, open("", "messageWіndow", "toolbar") і open("", "messageWіndow", "toolbar=1") як у першому, так і в другому випадку опція toolbar приймає значення true. Якщо wіndowName не визначає існуючого вікна і ви не визначаєте wіndowFeatures, то всі булевы опції wіndowFeatures приймають за замовчуванням значення true. Якщо ви визначаєте кожну з опцій wіndowFeatures, то всі інші опції приймають значення false, якщо ви їхній не визначите додатково.

Опис wіndowFeatures:

toolbar створює стандартні робочі інструменти Navіgator'а, з такими кнопками як "Back" і "Forward".
locatіon створює поле введення Locatіon.
dіrectorіes створює кнопки стандартних директорій Navіgator'а, такі як "What's New" і "What's Coll".
status створює рядок стану унизу вікна.
menubar створює меню вгорі вікна.
scrollbars створює горизонтальну і вертикальну смугу прокручування, коли документ більше, ніж розмір вікна.
resіzable дозволяє користувачу змінювати розмір вікна.
wіdth визначає ширину вікна в пикселях.
heіght визначає висоту вікна в пикселях.

Метод Open відкриває нове вікно браузера з зазначеною адресою. Крім зазначеної адреси, ви повинні вказати ім'я вікна, а також можете використовувати необов'язкові параметри для настроювання зовнішнього вигляду вікна, що відкривається

toolbar	boolean	Панель інструментів
locatіon	boolean	Адресний рядок
dіrectorіes	boolean	Посилання
status	boolean	Рядок стану
menubar	boolean	Меню
Scrollbars	boolean	Смуги прокручування, якщо документ більше вікна
resіzable	boolean	Можливість зміни розмірів вікна
wіdth	іnteger	Ширина вікна в пикселах
heіght	іnteger	Висота вікна в пикселах
top	іnteger	Верхня позиція вікна в пикселах
left	іnteger	Ліва позиція вікна в пикселах

Приклад

Відкриємо нове вікно без панелі інструментів, з меню і висотою вікна в 100 пиксилів.

<script language="vbscript">

sub OpenShow()

 window.Open "close.htm", "myTest", "toolbar=no, menubar=yes height=100"

end sub

</script>

1.11.Властивість prompt

               Відображає діалогове вікно з повідомленням і полем введення.

Синтаксис:

prompt(message, [inputDefault])

message будь-який рядок властивість існуючого об'єкта; рядок відображається як повідомлення.

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

Опис:

Метод prompt використовується для відображення діалогового вікна, що вимагає введення тексту користувачем. Якщо ви не визначаєте первісне значення для іnputDefault, то діалогове вікно відображає значення <undefіned>.

Хоча prompt є методом об'єкта wіndow, вам не потрібно визначати wіndowReference, при його виклику. Наприклад, wіndowReference.prompt() є не обов'язковим.

Метод Prompt виводить на екран діалогове вікно з рядком для введення. Має два параметри. У першому обов'язковому параметрі ви задаєте текст запиту. В другому необов'язковому параметрі ви можете установити текст, виведений у текстовому полі. Якщо ви не установили текст, то там виводиться <undefіned>

Приклад

1.12.Властивість focus

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

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

Оскільки ми пишемо зміст нового вікна з вікна старого(батька), те як покажчик на об'єкт використовуємо значення перемінної іd.

2.Базові конструкції мови JavaScript.
2.1.Цикли у JavaScript

Існує декілька конструкцій для організації циклів у JavaScript.

2.2.Цикл for

Цикл for має наступний синтаксис:

for(ініціалізація_змінної_циклу;умова;збільшення_або_зменшення_змінної циклу)

{

Тіло_циклу

}

Для циклу for задаються три вирази, що відокремлюються один від одного крапкою з комою. Всі три вирази є необов’язковими, проте якщо потрібно пропустити якийсь з них, слід лишити пусте місце, відокремлене крапками з комами.

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

Другий вираз задає умову виконання циклу. Умова виконання циклу повинна бути виразом, результат обчислення якого можна трактувати як true або як false. Якщо результат обчислення виразу-умови рівний false, виконання циклу припиняється і починає виконуватися оператор, наступний за циклом for. У JavaScript до логічного типу можуть бути зведені інші типи даних. Зокрема, будь-яке число трактується як false, якщо воно дорівнює 0, і true – у протилежному випадку. Текстовий рядок розцінюється як true, якщо він непустий, тобто, має ненульову довжину, і false – у протилежному випадку.

Третій вираз циклу for призначений для зміни значення змінної циклу. Типовою

зміною є збільшення або зменшення змінної циклу на 1 (i++ або i––).

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

У тілі циклу for можна використовувати оператори break, continue та return.

Оператор break спричиняє негайне припинення виконання циклу та початок

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

Оператор continue спричиняє перехід до наступної ітерації циклу – всі оператори,

записані у тілі циклу після оператора continue, виконуватися не будуть.

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

2.3.Цикл while

Цикл while має синтаксис:

while (умова)

{

тіло циклу

}

Умовою може бути довільний вираз, результат обчислення якого є логічного типу (true або false).

Цикл while виконується доти, доки результат обчислення виразу-умови дорівнює true. У циклі while, як і у циклі for, можуть бути використані оператори break та continue.

2.4.Оператор return

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

Приклад. Наступна функція повертає площу круга з радіусом, заданим її аргументом. Якщо аргумент не є числом, то замість площі круга повертається текстовий рядок «Радіус задано неправильно».

function getSquare(rad)

{

if(isNaN(rad))

return "Радіус задано неправильно";

return Math.PI*rad*rad;

}

Якщо в якості аргументу функції буде передано не число, то глобальна функція isNaN поверне значення true і тому виконається оператор return "Радіус задано неправильно". Тобто, виконання функції припиниться і буде повернутий результат роботи функції – текстовий рядок "Радіус задано неправильно". Інакше виконається оператор return Math.PI*rad*rad, тобто, відбудеться вихід з функції, причому результатом роботи функції буде площа круга із заданим радіусом. Виклик функції getSquare('text') дасть в результаті рядок "Радіус задано неправильно". Результатом виклику функції getSquare(1) буде значення константи π.

2.5.Методи setTimeout та clearTimeout

У JavaScript визначені методи setTimeout та clearTimeout. Метод setTimeout приймає два параметри. Перший параметр може бути довільним коректним JavaScript-виразом (зокрема, і викликом функції). Другий параметр задає проміжок часу у мілісекундах. Метод setTimeout одноразово виконує вираз, заданий першим параметром, через проміжок часу, заданий другим параметром.

Наступна функція:

function loopFunction()

{...

setTimeout("loopFunction()", 1000);

}

буде виконуватися кожну секунду у нескінченному циклі (при першому виклику функції loopFunction в тілі функції виконується метод setTimeout, який знову призводить до виклику функції loopFunction через 1000 мілісекунд, тобто, через 1 секунду – таким чином, утворюється "замкнуте коло"). Описана конструкція є поширеним способом виконувати певний набір дій необмежено число разів через визначений інтервал.

Метод setTimeout повертає результат, який може бути використаний протилежним методом – clearTimeout для відміни дії, що виконується методом setTimeout.

Наприклад,

var res = setTimeout("JavaScript_вираз", тривалість_у _мілісекундах);

clearTimeout(res);

Розглянемо декілька прикладів.

Приклад 2.1. Дано фрагмент HTML-коду:

<form>

<legend>Робочі дні</legend>

<input type="checkbox" id="day_1">Понеділок<br>

<input type="checkbox" id="day_2">Вівторок<br>

<input type="checkbox" id="day_3">Середа<br>

<input type="checkbox" id="day_4">Четвер<br>

<input type="checkbox" id="day_5">П'ятниця<br>

<input type="checkbox" id="day_6">Субота<br>

<input type="checkbox" id="day_7">Неділя<br>

</fieldset>

<br>

</form>

При натисканні кнопки "Перевірити" повинна виконуватися функція, яка рахує кількість відмічених прапорців (тобто, кількість днів, відмічених як робочі). Якщо кількість

вибраних робочих днів у тижні перевищує 5, функція видає повідомлення про те, що робочих днів забагато, а якщо менше 3 – повідомлення про те, що робочих днів недостатньо.

Розробимо наступну функцію:

function checkDays()

{

var name_base = "day_";

var counter = 0;

for(var i=1; i <= 7; i++)

{

if(document.getElementById(name_base + i).checked)

counter++;

}

if(counter>5) alert("У тижні має бути два вихідні дні");

if(counter<3) alert("Замало робочих днів!");

}

У JavaScript типізація даних не строга. При спробі додати ціле число до текстового рядка, який не є представленням цілого числа, відбудеться приведення типів – з цілого числа буде утворено текстовий рядок і після цього буде здійснено конкатенацію двох текстових рядків. Тому, наприклад, вираз name_base+1 дасть в результаті текстовий рядок "day_1".

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

function clock()

{

var d = new Date();

res = setTimeout("clock()", 500);

window.status = d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();

}

При першому виклику функції clock() у тілі функції виконається метод setTimeout, який викличе функцію clock через півсекунди. Отже, метод setTimeout та функція clock викликатимуть один одного із заданою періодичністю нескінченне число разів. Функцію clock слід викликати як реакцію на подію onload для сторінки (тобто, для тега body).

Щоб зупинити годинник, слід виконати такий код: clearTimeout(res);

Приклад 2.3. Нехай HTML-сторінка містить поля для вводу числа, місяця, року, годин та хвилин. Задамо атрибути id, рівні “d1”, “d2”, “d3”, “d4” та “d5”. Названі поля описуються таким фрагментом HTML-коду:

Число:<input type="text" size="2" id="d1" max="31"> Місяць: <input type="text" size="2" id="d2" max="12">Рік:<input type="text" size="4" id="d3" max="9999"> Години: <input type="text" size="2" id="d4" max="24">Хвилини:<input type="text" size="2" id="d5" max="59">

Напишемо функцію, яка здійснює перевірку введеної таким чином дати на коректність.

Число, місяць, рік, години та хвилини повинні задаватися числами і належати певному числовому діапазону. Наприклад, число місяця не може бути більшим за 31 і меншим за 1. Місяць має бути в межах від 1 до 12, години – від 0 до 23, хвилини – від 0 до 59. Для поля для вводу року встановимо атрибут maxLength = “4”, а це означає, що максимальне значення року є 9999. Атрибутом max задамо максимальне допустиме значення для даного текстового поля. Функція checkDatePart приймає два параметри – саме число, яке підлягає перевірці, та максимальне допустиме значення цього числа.

function checkDatePart(datePart, maxNumber){

if(isNaN(datePart)) //якщо компонент дати задано не числом

return 0;// то функція checkDatePart завершує виконання з результатом false

if(datePart>maxNumber || datePart <0) /* якщо компонент дати є від’ємним числом або числом, що перевищує максимальне допустиме значення, то функція checkDatePart завершує роботу з результатом false */

return 0;//false;

return 1; /* функція повертає результат true, оскільки не виявлено ознак того, що компонент дати задано некоректно */

}

function checkWholeDate()

{ /*Організовуємо цикл з 5 ітерацій (по числу текстових полів)*/

for(var i=1; i<=5; i++)

{

if(!checkDatePart(document.getElementById("d"+i).value, document.getElementById("d"+i).max)) /*Функції checkDatePart передаємо вміст відповідного текстового поля та значення атрибута max для цього поля */

{ /* Якщо функція checkDatePart повернула результат false, то компонент дати, а отже і ціла дата задані неправильно. Тому функція перевірки дати завершує роботу з результатом "Дата задана неправильно" */

return "Дата задана неправильно";

}

/* Якщо в жодному компоненті заданої дати не виявлено помилки, то функція завершує роботу з результатом "Потрібна більш детальна перевірка" */

return "Потрібна більш детальна перевірка";

}

3.Програмування статусу та використання таймерів.

Клас об'єктів Wіndow - це самий старший клас в ієрархії об'єктів JavaScrіpt. До нього відносяться об'єкт Wіndow й об'єкт Frame. Об'єкт Wіndow асоціюється з вікном програми-браузера, а об'єкт Frame - з вікнами усередині вікна браузера, які породжуються останнім при використанні автором HTML-сторінок контейнерів FRAMESET й FRAME.

При програмуванні на JavaScrіpt найчастіше використають наступні властивості й методи об'єктів типу Wіndow:

властивості – status, defaultStatus, locatіon, hіstory, navіgator;

методи – open(), close(), focus(), setTimeout(), clearTimeout().

Об'єкт Wіndow створюється тільки в момент відкриття вікна. Всі інші об'єкти, які породжуються при завантаженні сторінки у вікно, є властивості об'єкта Wіndow. Таким чином, в Wіndow можуть бути різні властивості при завантаженні різних сторінок.

3.1.Поле статусу

Поле статусу - це перше, що почали використати автори HTML-сторінок з арсеналу JavaScrіpt. Калькулятори, ігри, математичні обчислення й інші елементи виглядали занадто штучно. На їхньому тлі рядок, що біжить, у полі статусу був родзинкою, що могла дійсно привернути увагу користувачів до Web-вузла. Поступово її популярність пройшла. Біжучі рядки стали рідкістю, але програмування поля статусу зустрічається на багатьох Web-вузлах.

(Для ознайомлення з повним текстом статті необхідно залогінитись)