10. Динамічне управління формами та застосування масивів в JavaScript (2017 р.)

ДИНАМІЧНЕ УПРАВЛІННЯ ФОРМАМИ ТА ЗАСТОСУВАННЯ МАСИВІВ В JAVASCRIPT

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

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

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

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

Затверджено

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

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

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

Укладачі

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

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

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

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

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

Мета роботи: ознайомитись з найбільш часто вживаними подіями у JavaScript та навчитися застосовувати події для побудови динамічних сторінок. Набуття навичок динамічного управління формами та застосуванням масивів для вирішення практичних задач. Навчитися застосовувати можливості мови JavaScript для динамічної зміни вигляду та поведінки HTML-елементів у відповідь на дії користувача. Навчитися перевіряти та редагувати дані в елементах форм за допомогою регулярних виразів. Набути практичних навичок з програмування JavaScript , на прикладі створення меню.

1. Теоретичні відомості
2. 1.Застосування подій для організації інтерактивних HTML-сторінок

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

Таблиця 1. Деякі події JavaScript

У JavaScript існує об’єкт Event, властивості якого описують подію. Наприклад, властивість keyCode об’єкта Event містить код натиснутої клавіші. Властивості clientX та clientY (у MSIE та Opera) об’єкта Event містять поточні координати миші відносно сторінки.  

Поки обробляється подія, Microsoft Internet Explorer зберігає посилання на об’єкт Event у змінній window.event. Браузери Mozilla, Firefox та сучасний Netscape передають об’єкт Event як аргумент обробникові події. Щоб написати крос-браузерний JavaScript-код, слід передавати об’єкт Event як аргумент обробникові події.

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

Приклад 1.1. Реалізуємо підміну рисунка при наведенні на нього миші. Для цього у дескрипторі <img> задамо для події onmouseover такий код:

this.src= “шлях_до_графічного_файла_1”. Для події onmouseout задамо код:

this.src= “шлях_до_графічного_файла_2”.

Приклад 1.2. Реалізуємо такий JavaScript-код, щоб у текстове поле неможливо було ввести символи, відмінні від десяткових цифр.

            Напишемо наступну функцію:

function checkSymbol(kc) /* Передаємо функції код натиснутої клавіші */

{ /* Символ “0” має код 48, символ “9” – код 57. Коди всіх десяткових цифр попадають у діапазон від 48 до 57. Якщо kc не попадає в зазначений діапазон, то kc не є кодом цифри, а тому функція повертає значення false. */

            if(kc < 48 || kc >57)

                        return false;

            return true;

}

            Для події onkeypress текстового поля задамо такий обробник:

return checkSymbol(event.keyCode);

            Нехай фокус належить текстовому полю. Як тільки користувач натисне якусь клавішу, для поля настане подія onkeypress. Почне виконуватися обробник події. Якщо викликана функція  checkSymbol повертає false (користувач пробував ввести символ, відмінний від цифри), то символ у поле введений не буде.

Приклад 1.3.  Реалізуємо наступну функціональність. При натисненні правої кнопки миші в будь-якій точці документа замість контекстного меню будемо відображати власне, користувацьке “меню”. Для побудови меню використаємо дескриптор <div></div> . Нижче подано код меню та його вигляд:

            Як видно з поданого HTML-коду, кожен пункт меню оформлений в окремий контейнер <div></div>. Події onclick кожного такого контейнера <div></div> присвоєно в якості обробника функцію doAction, яку нам ще належить описати. Функція doAction приймає один параметр – текстовий рядок, котрий вказує, яку саме дію має виконати дана функція. Для кожного пункту меню функції при виклику передається свій унікальний текстовий рядок.

            Всі пункти меню розміщені у контейнер <div></div>, атрибуту id якого присвоєне значення “custommenu”. Для цього контейнера задано розміри 250×80 пікселів та властивість visibility, рівну ‘hidden’. Тобто, спочатку наше меню є прихованим.

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

            Розробимо функцію, яка показує (приховує) наше “меню”:

function showCustomMenu(sign, x, y) {/*  Функція приймає три параметри. Перший параметр (sign) є логічного типу. Він задає, що слід зробити з меню – показати чи приховати. Другий параметр (x) та третій параметр (y)  задають горизонтальну та вертикальну екранні координати точки, в якій користувач натиснув праву кнопку миші  */

            var cm = document.getElementById("custommenu"); /* Змінна cm буде вказувати на наше «меню» */

            if(sign) /* Якщо передано параметр sign, рівний true, то меню покажемо, а інакше приховаємо */

                        cm.style.visibility = 'visible';

            else

                        cm.style.visibility = 'hidden';

/* Задаємо меню абсолютну позицію та встановлюємо координати його лівого верхнього кута */

            cm.style.position = 'absolute';

            cm.style.left = x;

            cm.style.top = y;

}

            У дескрипторі <body> в якості обробника події oncontextmenu задамо наступний код:

oncontextmenu="showCustomMenu(true,event.clientX, event.clientY); return false;"

            Присутній у коді оператор return false; запобігає виклику стандартного контекстного меню.

            При виклику функції  showCustomMenu їй передаємо значення true параметра sign, а також координати точки, в якій була натиснута права кнопка миші (відносно сторінки).

            Події onclick дескриптора <body> слід присвоїти такий код:

onclick="showCustomMenu(false, event.clientX, event.clientY); return false;"

            Функції showCustomMenu у цьому випадку передаємо значення false параметра sign. Тобто, при натисненні лівої кнопки миші меню приховується.

Опишемо функцію doAction:

function doAction(actionType)

{

            switch(actionType) {

                        case "copy":

                        break;

                        case "close":

                                   window.close();

                        break;

                        case "fontIncrease":

                                   document.body.style.fontSize="20pt";

                        break;

            }

}

            Функції передається в якості параметра текстовий рядок actionType. Цей текстовий рядок порівнюється (за допомогою оператора switch) з рядками “copy”, “close” та “fontIncrease”. При співпадінні рядка actionType з одним з перелічених рядків виконується відповідна частина коду. З опису функції видно, що при actionType = “close” викликається метод close вікна, при  actionType = “fontIncrease” встановлюється шрифт 20pt для тексту по всьому документу, а при actionType = “copy” нічого не відбувається.

1. 2.Програмування форм. Масиви.

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

До форми можна звернутися кількома способами. Як і до будь-якого іншого елемента, до форми можна звернутися за атрибутом id (викликати функцію getElementById) і за іменем (атрибут name). Крім того, об’єкт document у JavaScript має властивість – масив forms. Елементи цього масиву є посиланнями на форми. Посилання на форми в масиві перелічуються у тому ж порядку, в якому форми оголошені у документі. Масив forms[], як і всі інші масиви, нумерується починаючи з 0. Наприклад, у документі оголошені дві форми:

<html>

<head></head>

<body>

<form name="f1">

</form>

<form name="f2">

</form>

</body>

<script>

alert(document.forms[0].name); // виведено текст “f1”

alert(document.forms[1].name); // виведено текст  “f2”

</script>

</html>

document.forms[0] є посиланням на форму з іменем “f1”, а document.forms[1] – посиланням на форму з іменем “f2”.

            Серед методів форми найбільш вживаними є методи submit() і reset(). Метод submit() відправляє форму на сервер, а метод reset() очищає форму.

Властивості форми:

elements[]  –  масив, в якому перелічені всі елементи у ній. Отже, до елементів форми можна звертатися як до елементів цього масиву, хоча зручніше звертатися до них за іменем або ж за id.

length – кількість елементів у формі;

target – містить значення атрибута target;

method – містить значення атрибута method;

action – містить значення атрибута action.

1. 2.1.Елементи форми

Випадаючі списки

Розглянемо деякі властивості і методи випадаючих списків:

Прапорці (Checkboxes)

            Найбільш широко вживаною властивістю прапорця є властивість checked. Ця властивість рівна true, якщо прапорець відмічений, а інакше вона рівна false.

            Ще вживається властивість value – текстовий рядок, який містить значення атрибута value прапорця.

Приклад.

Дано HTML-код прапорця:

<input type="checkbox" value="flag" id="ch1">

document.getElementById("ch1").value є текстовим рядком, рівним "flag".

Перемикачі (Radio) мають той самий набір властивостей

Текстові поля

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

            Інші властивості текстових полів:

maxLength  –  задає максимальну кількість символів, яку можна ввести у текстове поле (за допомогою цієї властивості читається і встановлюється значення атрибута maxlength).

readonly – приймає значення true, якщо текстове поле недоступне для читання, а інакше приймає значення false. Властивість доступна для запису.

Поля для вводу паролю мають ті ж властивості, що текстові поля.

            Усі елементи форми мають властивість disabled. Властивість disabled = true, якщо елемент неактивний. Якщо елемент активний, то disabled = false. Властивість доступна як для читання, так і для запису.

Приклад. Нехай на сторінці присутній прапорець з атрибутом id = “ch1” та кнопка з атрибутом id = “send”. Напишемо код, який робить кнопку неактивною, якщо прапорець вимкнений, і активною – у протилежному випадку:

<input type="checkbox" id="ch1" onclick="if(this.checked)

document.getElementById('send').disabled = false; else

document.getElementById('send').disabled = true;"><input type="button" value="Send"

id="send" disabled>

Зауважте, що кнопка від початку є неактивною (оскільки спочатку прапорець є вимкнений).

            Часто в залежності від того, які дані ввів користувач в елементи форми, слід показати або ж приховати окремі деталі сторінки. Згадаймо, що видимістю будь-якого об’єкта x за допомогою JavaScript можна керувати так:

                        x.style.visibility = ‘hidden’ /* об’єкт х буде прихований */

                        x.style.visibility = ‘visible’ /* об’єкт х буде видимий */

Масиви

Масиви поділяються на вбудовані (document.links[], document.images[],...) і визначені автором документа. 

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

a = new Array();

b = new Array(10);

c = new Array(10, "Текстовий рядок");

a[0] = "1"; a[1] = "5"; a[2] = "7";

Екземпляр класу Array створюється за допомогою оператора new та конструктора Array. Можливо спочатку створити масив, не ініціалізуючи його (таким чином створений масив a). Для цього слід викликати конструктор без параметрів. Пізніше завжди можна ініціалізувати існуючий масив, звертаючись до його елементів за індексом (наприклад, a[0] = "1" – присвоєння значення "1" нульовому елементу масиву). Одразу зазначимо, що елементи масивів нумеруються починаючи з нуля.  Якщо ж конструктору Array передано один параметр –  ціле число, то це число інтерпретується як довжина масиву. Зрештою, якщо конструктору передано два і більше параметрів, то ними буде проініціалізований масив. Наприклад, масив c одразу при створенні проініціалізований. Він має два елементи:

c[0] = 10 і c[1] = "Текстовий рядок". Слід пам'ятати, що елементи масиву у мові JavaScript зовсім не зобов'язані бути однакового типу!

Об’єкт Array володіє властивістю length (доступною лише для читання), яка містить поточний розмір масиву. У мові JavaScript розмір масиву може динамічно змінюватися.

Розглянемо декілька найбільш часто вживаних методів.

join     "Склеює" елементи масиву у текстовий рядок і повертає цей текстовий рядок. Метод join приймає один аргумент - символ-роздільник, який відокремлює елементи масиву у текстовому рядку.

Приклад. mas = new Array("0","2","4","6","8");

s = new String();

s = mas.join("."); Текстовий рядок  s="0;2;4;6;8".

pop     Вилучає останній елемент масиву та повертає цей елемент. Розмір масиву при цьому зменшується на 1.

Приклад. mas = new Array("0","2","4","6","8"); var elem = mas.pop(); Змінна elem рівна "8" (останній елеменет масиву),

а масив mas тепер містить 4 елементи "0", "2", "4" та "6".

push    Додає елементи в кінець масиву. Метод push може приймати один і більше параметрів. Довжина масиву збільшується на кількість доданих елементів.

Приклад. mas = new Array("0","2","4","6","8");

mas.push("3"); // Після цього масив mas міститиме 6 елементів: "0", "2", "4", "6", "8" та "3".

mas. push("5", "7") // Після цього масив mas міститиме 8 елементів: "0", "2", "4", "6", "8", "3", "5" та "7".

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

Приклад. mas = new Array("0","2","4","6","8");

mas.reverse();// Після цього елементи в масиві mas записані у такому порядку: "8", "6", "4", "2", "0".

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

Приклад. mas = new Array("0","2","4","6","8"); var elem = mas.shift();

Змінна elem містить елемент  "0", а масив mas містить 4 елементи: "2","4","6" та"8".

slice    Вибирає з масиву елементи із заданими індексами та повертає масив цих елементів. Індекси задаються діапазоном (у цьому випадку метод slice приймає два параметри - початковий індекс та кінцевий індекс) або ж одним числом (у цьому випадку метод slice повертає всі елементи масиву починаючи із вказаного індексу).

Приклад. mas = new Array("0","2","4","6","8"); mas1 = mas.slice(2);

Масив mas не зміниться, а масив mas1 міститиме елементи масиву mas починаючи з елементу з індексом 2, тобто,

mas1 міститиме елементи "4", "6" та "8".

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

Приклад. mas = new Array("0","2","4","6","8","7","7","9");

mas.splice(4,2); В результаті з масиву буде видалено два елементи починаючи з індексу 4, тобто, масив

mas міститиме елементи "0","2","4","6","7" та "9". Жоден елемент не буде доданий.

Приклад. mas = new Array("0","2","4","6","8","7","7","9");

mas.splice(4,2,"a","b","c","d");

В результаті з масиву буде видалено два елементи починаючи з індексу 4 і додано 4 елементи починаючи з індексу 4,

тобто, масив mas міститиме елементи "0","2","4","6","a","b","c","d","7" та "9".

Приклад. mas = new Array("0","2","4","6","8","7","7","9");

mas.splice(4,0,"х");

В результаті з масиву не буде видалено ніяких елементів, проте в масив буде додано на 4-те позицію

елемент "x", тобто, масив max міститиме елементи  "0","2","4","6","x","8","7","7","9".

unshift           Метод додає елемент(и) на початок масиву (на відміну від методу push, який додає елементи в кінець масиву). Розмір масиву збільшується на кількість доданих елементів.

Приклад. mas = new Array("0","2","4","6","8");

var elem = mas.unshift("х","y");

Масив mas тепер міститиме елементи "x","y","0","2","4","6","8".

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

Приклад 2.1. Вирішимо наступну задачу. Нехай на сторінці присутнє поле для вводу паролю. Якщо користувач ввів у нього надто мало символів, то справа від поля для вводу паролю повинно з'явитися повідомлення, що надійний пароль повинен містити більше символів (слід вказати мінімальну кількість символів). Якщо користувач ввів у нього забагато символів, то справа від поля для вводу паролю повинно з'явитися повідомлення, що довжина паролю не повинна перевищувати деяку (вказати яку) максимальну кількість символів. Попередження будемо виводити дрібним червоним шрифтом. У випадку, якщо довжина паролю знаходиться в допустимих межах, виведемо повідомлення 'Ok' дрібним зеленим шрифтом. У HTML-коді оголосимо поле для вводу паролю та контейнер <font></font>, у якому будемо розміщати текст-попередження. Звісно, для перевірки роботи нашої функції зовсім не обов'язково поле для вводу паролю та текст форматувати за допомогою таблиць, проте на практиці поодиноке поле для вводу паролю не зустрічається у формі – воно супроводжується іншими елементами форми. Тому оформимо поле для вводу паролю та текст-попередження у рядок таблиці:

<form>

<table>

            <tr><td>Введіть пароль:</td><td><input type="password" id="pwd1" onkeyup="editPassword(this.id,'message',8,16);"></td><td><font id="message" style="font-size: 8pt;"></font></td></tr>

</table>

</form>

            Слід не забути таблицю "огорнути" контейнером <form></form>, інакше втрачається головна мета застосування елементів форм – даними, введеними в них, не можна буде обмінятися з сервером. Полю для вводу паролю та дескриптору <font> присвоєно атрибути id – для того, щоб до них можна було звернутися засобами мови JavaScript. Як видно з HTML-коду, при події onkeyup спрацьовує функція editPassword (її ми зараз опишемо). Цій функції в якості параметрів передаються значення атрибутів id самого текстового поля, контейнера <font></font>, куди ми будемо виводити текст-повідомлення, а також мінімальна допустима (8 символів) та максимальна допустима (16 символів) дожвина поля для вводу паролю.

            Тепер напишемо JavaScript-код:

<script>

function editPassword(password, messageId, minLength, maxLength) { /* Параметр password задає атрибут id потрібного поля для вводу паролю, а параметр messageId – атрибут id відповідного дескриптора <font>, в якому розміщатимемо текст-попередження. Параметри minLength та maxLength задають відповідно мінімальну та максимальну довжини поля для вводу паролю у символах */

            var password = document.getElementById(password); /* password вказує на поле для вводу паролю */

            var message = document.getElementById(messageId); /* message вказує на контейнер <font></font>, куди будемо виводити текст-попередження */

            if (password.value.length < minLength) /* якщо кількість символів у полі для вводу паролю менша за minLength */

                        {/* Формуємо текст-повідомлення про те, що символів замало. Зауважте, що тут ми користуємося властивістю innerText. innerText – це текст, записаний між відкриваючим та закриваючим тегами (в даному випадку, текст, записаний між тегами <font> та </font>)*/

                                   message.innerText = 'Надійний пароль повинен містити не менше ' + minLength + ' символів';

                                   message.style.color = '#ff0000'; /* Задаємо тексту червоний колір */

                        }

            else

                        if (password.value.length > maxLength) /* якщо кількість символів у полі для вводу паролю більша за maxLength, то формуємо відповідне повідомлення і виводимо його теж червоним шрифтом */

                        {

                                   message.innerText = 'Довжина паролю не повинна перевищувати ' + maxLength + ' символів';

                                   message.style.color = '#ff0000';

                        }

            else /* інакше (коли довжина поля для вводу паролю знаходиться у дозволених межах), виводимо повідомлення “Ok” зеленим шрифтом */

                        {

                                   message.innerText = 'Ok';

                                   message.style.color = '#00cc00';

                                   return true;

                        }

}

</script>

Приклад 2.2. Вирішимо задачу масштабування карти посилань. При зміні розмірів звичайного зображення достатньо просто помножити ширину та висоту зображення на одне і те саме число (і пропорції при цьому будуть збережені). При масштабуванні карти посилань слід, крім множення ширини і висоти на певний коефіцієнт, змінити координати усіх областей карти посилань. А саме, слід зчитати всі координати кожної області карти посилань та кожну координату помножити на той самий коефіцієнт масштабування. Як відомо, координати області карти посилання задаються атрибутом coords дескриптора <area></area>, причому координати перелічуються через кому. Наприклад:

<area shape="poly" coords="0,5,10,10,20,5"> (область трикутна з вершинами у точках (0,5), (10,10) та (20,5)).

            У JavaScript-об'єкта, що представляє HTML-елемент <area></area> існує властивість coords, доступна як для читання, так і для запису. Значенням властивості coords є текстовий рядок, який представляє відокремлені комою координати і співпадає зі значенням атрибута coords тега <area></area>. Якщо JavaScript-змінна shape представляє вказану вище трикутну область, то shape.coords буде рівною "0,5,10,10,20,5".

            Найзручніше базувати вирішення задачі масштабування карти посилань на використанні двох методів – методі split об'єкта String та методі join об'єкта Array. Метод split  приймає один параметр - символ-роздільник. Він розбиває текстовий рядок на окремі текстові рядки, відокремлені символом-роздільником та повертає масив з цих окремих текстових рядків. Наприклад, якщо задано текстовий рядок str = "0,5,10,10,20,5", то результатом виклику методу str.split(",") буде масив з 6 елементів: "0","5","10","10", "20" та "5". Результатом виклику методу str.split("1") буде масив з 3 елементів: "0,5,", "0," та "0,20,5". Метод join має протилежну дію – він "склеює" всі елементи в один текстовий рядок, відокремлюючи елементи у рядку символом-роздільником. Метод join приймає один параметр – символ-роздільник. Наприклад, нехай задано масив mas з 6 елементів: mas[0] = "0", mas[1] = "5", mas[2] = "20", mas[3] = "10", mas[4] = "0", mas[5] = "25". Тоді результатом виклику методу mas.join(",") буде текстовий рядок "0,5,20,10,0,25". Результатом виклику методу mas.join("-") буде текстовий рядок "0-5-20-10-0-25".

            Напишемо такий JavaScript-код:

<script>

function zoomMap(zoom, imageId) { /* функції в якості параметрів передаємо коефіцієнт масштабування (параметр zoom) та атрибут id того зображення, яке підлягає масштабуванню (параметр imageId) */

            var karta = document.getElementById(imageId); /* karta посилається на тег <img>, що представляє зображення, яке плануємо масштабувати */

            var areas = document.all.map.areas; /* змінна areas є масивом JavaScript-об'єктів, що представляють області карти посилань */

            for(var i=0; i<areas.length; i++) /* у циклі по черзі розглядаємо кожну область карти посилань */

            {

                        var coords = (areas[i].coords).split(','); /* змінна coords міститиме координати карти посилань. І справді, після розбиття текстового рядка, що є значенням атрибута coords тега <area> на складові текстові рядки, коли символом-роздільником є ",", буде одержаний масив координат */

                        for(var j = 0; j < coords.length; j++) /* "перебираємо" всі елементи масиву coords. Кожен елемент множимо на коефіцієнт масштабування. Результат заокруглюємо до цілого числа, оскільки координати областей карти посилань повинні бути цілими числами. */

                        {

                                   coords[j] = Math.round(coords[j]*zoom);

                        }

                        areas[i].coords = coords.join(','); /* Зменшені (або збільшені) в zoom разів координати знову "склеюємо" у текстовий рядок (символом-роздільником є ",") та записуємо назад у атрибут coords відповідної області посилання */

            }

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

            karta.width = Math.round((karta.width)*zoom);

            karta.height = Math.round((karta.height)*zoom);

}

</script>

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

Приклад 2.3. Реалізуємо один з численних варіантів класичної для Web-програмування задачі – задачі наповнення одного списку елементами в залежності від елемента, вибраного у другому списку. У нашому прикладі фігуруватимуть список районів та список вулиць міста Львова. Список районів містить елемент "Виберіть район" і ще 5 елементів, які перелічують райони міста Львова. Якщо у списку районів вибрано елемент "Виберіть район", то список вулиць прихований (користувач не бачить його на сторінці). Інакше список вулиць видимий і наповнений назвами вулиць району, вибраного у списку районів. Це зручний спосіб представлення інформації – спочатку користувач вибирає загальну тему (наприклад, назву района), а тоді поступово "звужує коло інтересів", обираючи потрібний пункт з одного або більше списків (наприклад, обираючи конкретну вулицю з виділеного району). Сьогодні у Web-додатках часто можна зустріти організацію способу вибору інформації за допомогою одного та більше списків. Тематика різноманітна - наприклад, "місто-район-вулиця", "континент-країна", "марка товару (автомобіля, мобільного телефона, телевізора і т.д) – модель товару", "жанр літератури – список творів" тощо.

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

Райони:

<select onchange="showStreets(this.selectedIndex,'streets');">

                        <option>Виберіть район</option>

                        <option>Галицький</option>

                        <option>Франківський</option>

                        <option>Личаківський</option>

                        <option>Сихівський</option>

                        <option>Шевченківський</option>

                        </option>

<select>

Вулиці:

<select id='streets' style='visibility:hidden;'>        

                        <option></option>

<select>

            Подія onchange для списку настає тоді, коли змінюється вибраний елемент. Якщо користувач вибирає певний елемент зі списку районів, спрацьовує функція showStreets, яку нам ще належить описати. Першим параметром цієї функції є індекс вибраного елемента (this вказує на об'єкт, що викликав подію onchange, тобто, на сам список районів, відповідно, this.selectedIndex є властивістю selectedIndex для списку районів. Властивість selectedIndex містить індекс поточного вибраного елемента списку). Другим параметром функції showStreets є значення атрибута id списку вулиць. Список вулиць від початку є пустий і невидимий, оскільки для нього задано значення 'hidden' ("прихований") CSS-властивості visibility. Для списку вулиць задано id = "streets" (саме це значення ми передаємо функції showStreets).

            Тепер час розробити JavaScript-код, зокрема і згадану функцію showStreets.

<script>

/* Для вирішення нашої задачі зручно застосувати масиви. Опишемо 5 масивів, кожен з яких містить назви вулиць одного конкретного району міста Львова: */

var streetsGal = new Array('Галицька','Ставропігійська','Краківська','Театральна','Вірменська');

var streetsShev = new Array('Чорновола','Остряниці','Замарстинівська','Топольна','Варшавська');

var streetsFran = new Array('Сахарова','Наукова','Княгині Ольги','В.Великого');

var streetsLych = new Array('Личаківська','Пекарська','Нечуя-Левицького','Зелена');

var streetsSykh = new Array('Хоткевича','Червоної Калини');

/* Оголосимо масив streetsAll з 6 елементів. Першим елементом зробимо значення null, наступні 5 елементів будуть вже оголошеними масивами streetsGal,streetsFran,streetsLych,streetsSykh та streetsShev. Кількість та послідовність елементів масиву streetsAll повинна відповідати кількості та послідовності елементів списку районів. Елементу "Виберіть район" списку районів відповідає значення null, елементу "Галицький" – масив streetsGal, що описує вулиці Галицького району, елементу streetsFran – масив streetsFran, що перелічує вулиці Франківського району і т.д. Масив streetsAll сформований так, щоб можна було написати лаконічний, мінімізований код функції showStreets */

var streetsAll = new Array(null,streetsGal,streetsFran,streetsLych,streetsSykh,streetsShev);

function showStreets(regionIndex,selectId) {

            if (regionIndex <= 0) /* Якщо зі списку районів не вибрано жоден елемент або ж виділений елемент "Виберіть район", то список вулиць приховуємо (присвоюючи властивості visibility значення 'hidden') і припиняємо роботу функції (за допомогою оператора return). Якщо ж у списку районів вибрано назву району, то виконання функції продовжується */

            {

                        streetsSelect.style.visibility = 'hidden';

                        return false;

            }

/* Змінна streetsSelect вказуватиме на список вулиць, до якого звертаємося за значенням атрибута id: */

            var streetsSelect =  document.getElementById(selectId);

            clearSelect(streetsSelect); /* викликаємо допоміжну функцію clearSelect, яку нам ще належить описати. Функція clearSelect здійснює "очищення" списку від елементів. Вона приймає один параметр – об'єкт (а точніше, саме список), з якого слід видалити елементи */

            streetsSelect.style.visibility = 'visible'; /* робимо список вулиць видимим */

/* І зрештою, найголовніше – "населення" списку вулиць новими елементами. Ось для чого нам знадобиться масив streetsAll. Оскільки індекс вибраного району співпадає з індексом елемента масиву streetsAll, який описує вулиці цього району, то до відповідного масиву вулиць можна звернутися так: streetsAll[regionIndex]. У циклі "перебираємо" всі вулиці вибраного району */

            for(var i = 0; i < streetsAll[regionIndex].length; i++)

            {/* створюємо новий елемент списку, текст і значення value якого рівний streetsAll[regionIndex])[i] (тобто, i-ій вулиці з масиву потрібних вулиць) */

                        var newStreet =  new Option((streetsAll[regionIndex])[i],(streetsAll[regionIndex])[i]);

                        streetsSelect.add(newStreet,i); /* на i-ту позицію списку вулиць додаємо новостворений елемент */

            }

}

/* Опишемо функцію clearSelect: */

function clearSelect(selectObject){

            while(selectObject.length) /* Поки у списку ще є елементи, видаляємо елемент списку з індексом 0. Зауважте, що для запису умови циклу while тут використано наступну властивість мови JavaScript: ціле число інтерпретується як false, якщо воно нульове, і як true у протилежному випадку. Поки властивість length не рівна 0, цикл виконуватиметься */

                        selectObject.remove(0);

}

/*

Зауваження. Елементи масивів streetsGal,streetsFran,streetsLych,streetsSykh та streetsShev у нашому прикладі перелічені без будь-якого впорядкування. Насправді для реального застосування слід було б сортувати вулиці в алфавітному порядку. Щоб не обтяжувати JavaScript-програміста впорядкуванням вулиць вручну, варто скористатися методом sort об'єкта Array. Метод sort() повертає відсортований масив. Отже, наш масив streetsAll варто було б оголосити так:

var streetsAll = new Array(null,streetsGal.sort(),streetsFran.sort(),streetsLych.sort(),streetsSykh.sort(),streetsShev.sort()); 

*/

</script>         

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