На веб-сторінці можуть відбуватись різноманітні події: сам факт завантаження сторінки у браузері, клацання кнопок чи інших елементів сторінки, наведення вказівника мишки чи натиснення клавіш на клавіатурі - все це приклади подій. Вказавши обробник для події у вигляді функції мовою JavaScript, можна забезпечити гнучку інтерактивність та динамічне оновлення вмісту сторінки залежно від дій користувача.
Для окремих елементів сторінки додаються вказівки обробки стандартних подій, наприклад клацання кнопки. Обробником такої події може бути функція, описана у скрипті на цій же сторінці чи у прикріпленому файлі. Обробник події може звертатись до об'єктної моделі сторінки, модифікуючи її вміст та оформлення.
Розглянемо простий приклад. На сторінці подано питання і 2 кнопки, котрі називаються Підказка та Відповідь. При клацанні кнопки Підказка має бути показаний текст підказки на поставлене питання; при повторному клацанні підказка знову приховується. При наведенні вказівника мишки на кнопку Відповідь користувачеві запропонують ввести пароль. Якщо введений пароль правильний, то буде показана відповідь. Подібну взаємодію з користувачем допоможе забезпечити програмний код мовою JavaScript.
Завдання та приклади краще виконувати в сервісі https://jsbin.com/
Кнопка з підказкою
Спочатку розберемо кнопку з підказкою. Об’єкт кнопка створюється тегом <button> </button>, всередині якого вписуємо текст напису кнопки. Атрибутом тегу може бути функція, котра буде виконана в результаті настання деякої події, наприклад, клацанні по цій кнопці.
<button onclick='show()'>Підказка</button>
Наприклад, вкажемо, що після клацання по кнопці має бути виконана функція show(), яку й опишемо у розділі <script></script> заголовка нашої сторінки.
Розберемо дію цієї функції: якщо підказку приховано, то її потрібно показати, інакше її потрібно приховати.
Підказка – це блок вмісту, позначений, наприклад ідентифікатором hint.
<div id="hint" style="display:none"> Текст підказки </div>
Прихованому стану блоку відповідає атрибут display, що дорівнює none. Якщо блок показано, атрибут display дорівнює порожнім лапкам "". Виходячи із цього, запишемо код мовою JavaScript:
function show() {
if (document.getElementById("hint").style.display == "none") {
document.getElementById("hint").style.display = "";
} else {
document.getElementById("hint").style.display = "none";
}
}
Приклад: https://jsbin.com/lopevubasa/1/edit?html,js,output
Тепер розберемось із самим текстом підказки. Нам не потрібно його одразу показувати на сторінці – тоді кожен бажаючий зможе побачити підказки і правильні відповіді, відкривши початковий код сторінки. Сформуємо підказку за допомогою функції skarb(), яка буде виконуватись після завантаження основного вмісту веб-сторінки, тобто до тегу body додаємо обробку події onload :
<body onload="skarb()">
Ця функція створить текстовий напис підказки та додасть його у документ у вигляді заголовка другого рівня, приховавши його в момент додавання.
function skarb() {
var hint_element=document.createElement("div");
document.body.appendChild(hint_element);
hint_element.innerHTML = "Це тільки підказка. Правильна відповідь за паролем!";
hint_element.setAttribute("id", "hint");
hint_element.style.display = "none";
}
Команди цієї функції можна пояснити так:
Створюємо елемент вмісту – div
Додаємо створений елемент до основного тексту веб-сторінки
Текст створеного елементу рівний напису в лапках
Надаємо створеному елементу ідентифікатор hint (саме до цього ідентифікатора застосовується функція show())
Вказуємо властивість display = "none" для приховання створеного елемента на сторінці.
Зберігаючи сторінку, випробуємо дію створеного коду.
Приклад: https://jsbin.com/yatifirada/1/edit?html,js,output
Кнопка з паролем
Додамо функцію обробки події наведення вказівника миші на кнопку Відповідь. Нагадаємо, при цьому має з’являтись запит паролю, і правильна відповідь показуватиметься лише якщо введено правильний пароль.
Якщо елемент був прихований, то потрібно виконати запит паролю. Якщо введений пароль правильний, то потрібно показати прихований текст, інакше повідомити, що пароль помилковий.
Якщо текст не був прихований, то його слід приховати.
function show_with_pass() {
if (document.getElementById("vidp").style.display == "none") {
var enteredpass = prompt("Вкажіть пароль");
if (enteredpass == "123456") {
document.getElementById("vidp").style.display = "";
} else {
alert("пароль неправильний");
}
} else {
document.getElementById("vidp").style.display = "none";
}
}
Приклад: https://jsbin.com/yuniganefo/1/edit?html,js,output
Ускладнення паролю
Правильним паролем може бути не просто певна послідовність символів (у наведеному прикладі це 123456), але й, наприклад, поточна дата (число). Додамо на початок функції створення об’єкту типу Дата:
var d= new Date();
А введений користувачем текст будемо порівнювати не із заданим паролем, а поточною датою:
if (enteredpass == d.getDate())
Цікаве: спробуйте дослідити роботу методів getMonth() та getYear().