DOM І JQUERY
До сих пір ми використовували JavaScript для відносно простих завдань, на зразок перегляду тексту в консолі браузера або відображення діалогів alert і prompt. Однак крім цього JavaScript дозволяє взаємодіяти з HTML-елементами на веб-сторінках, змінюючи їх поведінку і зовнішній вигляд. У цьому розділі ми поговоримо про дві технології, які допоможуть вам писати набагато більш потужний JavaScript-код: це DOM і jQuery.
DOM - це засіб, що дозволяє JavaScript-коду взаємодіяти з вмістом веб-сторінок. Браузери використовують DOM для структурування сторінок та їх елементів (параграфів, заголовків і т. д.), а JavaScript може різними способами маніпулювати елементами DOM. Наприклад, змінювати заголовки HTML-документів, підставляючи туди значення, отримані з діалогу prompt.
Також ми познайомимося з зручним інструментом під назвою jQuery, який кардинально спрощує роботу з DOM. jQuery містить набір функцій, які дозволяють знайти потрібні вам елементи і зробити з ними певні дії.
У цьому розділі ми дізнаємося, як за допомогою DOM і jQuery змінювати існуючі елементи DOM, а також створювати нові, повністю контролюючи вміст веб-сторінок з JavaScript-коду. Також ми з'ясуємо, як використовувати jQuery для анімації елементів DOM - наприклад, для плавної появи і зникнення зображень і тексту.
Пошук елементів DOM
Коли ви відкриваєте HTML-документ, браузер перетворює його елементи в деревоподібну структуру - дерево DOM. На рисунку нижче зображено просте дерево DOM - ієрархія HTML. Браузер дає JavaScript-програмістам можливість доступу до цієї деревовидної структури за допомогою спеціальних методів DOM.
Ідентифікація елементів по id
HTML-елементу можна привласнити унікальне ім'я, або ідентифікатор, за допомогою атрибута id. Наприклад, у елемента h1 заданий атрибут id:
<h1 id="main-heading">Привіт, світ!</h1>
Задавши атрибуту id значення (в даному випадку "main-heading"), ми отримуємо можливість згодом знайти цей конкретний заголовок по його id і що-небудь з ним зробити, не зачіпаючи інші елементи, навіть якщо це інші заголовки рівня h1.
Пошук елемента за допомогою getElementById
Позначивши елемент унікальним id, ми можемо скористатися DOM-методом document.getElementById, щоб знайти елемент "main-heading":
var headingElement = document.getElementById("main-heading");
Викликом document.getElementById ("main-heading") ми даємо браузеру команду відшукати елемент, id якого дорівнює "main-heading". Цей виклик поверне DOM-об'єкт з відповідним id, і ми збережемо цей об'єкт у змінній headingElement. Коли елемент знайдений, їм можна управляти за допомогою JavaScript-коду. Наприклад, через властивість innerHTML ми можемо дізнатися, що за текст знаходиться всередині елемента, або замінити цей текст:
headingElement.innerHTML;
Ця команда повертає вміст headingElement - елемента, який ми знайшли за допомогою getElementById.
В даному випадку вміст - це текст "Привіт, світ!", Що знаходиться між тегів <h1>.
Міняємо текст заголовка через DOM
Ось приклад того, як міняти текст заголовка за допомогою DOM. Давайте створимо новий HTML-документ dom.html з наступним кодом:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Вивчаємо DOM</title>
</head>
<body>
<h1 id="main-heading">Привіт, світ!</h1>
<script>
var headingElement = document.getElementById("main-heading");
console.log(headingElement.innerHTML);
var newHeadingText = prompt("Введіть новий заголовок:");
headingElement.innerHTML = newHeadingText;
</script>
</body>
</html>
Спочатку за допомогою document.getElementById знайшли елемент h1 (id якого дорівнює «main-heading») і зберегли його в змінній headingElement. Далі вивели в консоль рядок, повернувши його викликом headingElement.innerHTML - тобто "Привіт, світ!". Далі відкрили діалог prompt, щоб отримати від користувача новий заголовок, і зберегли введений користувачем текст в змінній newHeadingText. І нарешті, присвоїли збережене в newHeadingText значення властивості innerHTML елемента headingElement.
Відкривши цей документ у браузері, ви повинні побачити діалог prompt.
Робота з деревом DOM через jQuery
Вбудовані в браузер методи DOM дуже гарні, але користуватися ними буває нелегко, тому багато програмістів застосовують спеціальну бібліотеку під назвою jQuery.
jQuery – це набір інструментів (в основному функцій), які сильно спрощують роботу з DOM-елементами. Підключивши цю бібліотеку, на нашу сторінку, ми зможемо викликати її функції і методи в додаток до функцій і методів, вбудованих в JavaScript і в браузер.
Підключаємо jQuery до HTML-сторінки
Перш ніж скористатися бібліотекою jQuery, потрібно, щоб браузер її завантажив, для чого достатньо одного рядка HTML-коду:
Зверніть увагу, що у тега <script> немає вмісту, зате є атрибут src. Цей атрибут дозволяє завантажити на сторінку JavaScript-файл, вказавши його URL (тобто веб-адресу). В даному випадку https://code.jquery.com/jquery-2.1.0.js – це URL конкретної версії jQuery (2.1.0) на сайті jQuery.
Міняємо текст заголовка за допомогою jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Вивчаємо DOM</title>
</head>
<body>
<h1 id="main-heading">Привіт, світ!</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
var newHeadingText = prompt("Введіть новий заголовок:");
$("#main-heading").text(newHeadingText);
</script>
</body>
</html>
Спочатку ми додали новий тег <script>, для завантаження jQuery. Коли бібліотека завантажена, можна використовувати jQuery-функцію $ для пошуку HTML-елементів.
Функція $ приймає один аргумент, який називається рядок селектора. Цей рядок вказує, який елемент або елементи потрібно знайти в дереві DOM. У нашому випадку це "# main-heading". Символ # означає id, тобто селектор "# main-heading" посилається на елемент, id якого дорівнює main-heading.
Функція $ повертає об'єкт jQuery, що відповідає знайденим елементам. Наприклад, виклик $ ( "# main-heading") поверне jQuery об'єкт для елемента h1 (id якого дорівнює "main-heading").
Тепер, коли у нас є об'єкт jQuery для елемента h1, ми можемо змінити його текст, викликавши в рядку метод jQuery-об'єкта text з новим заголовком як аргумент. Заголовок зміниться на введений користувачем рядок, який зберігається в змінній headingText. Як і раніше, при відкритті нашої сторінки повинен з'явитися діалог із запитом нового тексту для елемента h1.
Створення нових елементів через jQuery
Крім зміни існуючих елементів, за допомогою jQuery можна створювати нові елементи і додавати їх в дерево DOM. Для цього ми будемо використовувати метод jQuery-об'єкта append, передаючи йому потрібний HTML-код. Аppend перетворює HTML в DOM-елемент (відповідає заданим в коді тегам) і додає його до вмісту елемента, для якого він був викликаний.
Наприклад, щоб помістити в кінець сторінки новий елемент p, додамо в наш JavaScript такий код:
$("body").append("<p>Це новий параграф</p>");
Перша частина цієї команди викликає функцію $ з рядком селектора "body", щоб знайти тіло (вміст) нашого HTML документа. Пошук не обов'язково повинен відбуватися по id – код $ ("body") шукає елемент body, і точно так само ми можемо викликати $ ("p") для пошуку всіх елементів p.
Далі ми викликаємо для знайденого об'єкта метод append – і переданий йому рядок перетвориться в DOM-елемент, а потім додасться всередину елемента body, відразу перед закритим тегом.
Також append можна використовувати в циклі for для додавання кількох елементів:
for (var i = 0; i < 3; i++) {
var hobby = prompt("Назви одне зі своїх хобі!");
$("body").append("<p>" + hobby + "</p>");
}
Цей цикл повторюється тричі. При кожному повторенні створюється діалог prompt, що запитує у користувача його хобі, після чого рядок з хобі поміщається між тегів <p> і передається методу append, який додає його в кінець елемента body.
Анімація елементів засобами jQuery
На багатьох сайтах при показі і приховуванні частин сторінки використовується анімація. Наприклад, додаючи на сторінку новий параграф з текстом, ви можете зробити так, щоб він проявлявся поступово, а не весь цілком відразу.
За допомогою jQuery анімувати елементи зовсім не складно. Наприклад, щоб елемент повільно зникав, ми можемо скористатися методом fadeOut:
$("h1").fadeOut(3000);
Щоб знайти всі елементи h1, ми використовували функцію $. Оскільки в нашому html-документі елемент h1 всього один (це заголовок з текстом «Привіт, світ!»), Саме його ми і отримаємо у вигляді jQuery-об'єкта. Викликаючи для цього об'єкта метод fadeout (3000), ми запускаємо загасання заголовка до повного його зникнення протягом трьох секунд.
Ланцюговий виклик і анімація на jQuery
Якщо викликати метод jQuery-об'єкта, цей метод, як правило, поверне первісний об'єкт – той, для якого він і був викликаний.
Наприклад, $ ("h1") повертає jQuery-об'єкт з усіма елементами h1, а $ ("h1"). FadeOut (3000) повертає все той же jQuery-об'єкт з елементами h1. Тоді змінити текст заголовка і включити його загасання можна так:
$("h1").text("Цей текст скоро зникне").fadeOut(3000);
Подібний виклик декількох методів поспіль називають ланцюговим викликом.
Можна запустити кілька анімацій одного і того ж елемента. Наприклад, використовуючи ланцюговий виклик методів fadeOut і fadeIn, щоб елемент зник і тут же знову з’явився:
$("h1").fadeOut(3000).fadeIn(2000);
Анімація fadeIn змушує невидимий елемент проявитися. jQuery розуміє, що, коли ви робите ланцюговий виклик двох анімацій, ви, швидше за все, хочете, щоб вони спрацювали по черзі, одна після іншої. В результаті елемент h1 буде затухати протягом трьох секунд, а потім протягом двох секунд проявлятися.
В jQuery є ще два методи для анімації, схожі на fadeOut і fadeIn, – це slideUp і slideDown.
При виклику slideUp елементи зникають, відпливаючи вгору, а при виклику slideDown з'являються, опускаючись згори.
$("h1").slideUp(1000).slideDown(1000);
ІНТЕРАКТИВНЕ ПРОГРАМУВАННЯ
До сих пір JavaScript починав роботу відразу ж після завантаження сторінки, зупиняючись лише при виклику деяких функцій, таких як alert або confirm. Однак часом не потрібно виконувати весь код відразу – що якщо ми хочемо запустити фрагмент коду через якийсь час або у відповідь на дію користувача?
У цьому розділі ми розглянемо різні способи як управляти тим, коли саме виконується наш код. Це називається інтерактивним програмуванням. Воно дозволяє створювати інтерактивні веб-сторінки, які можуть змінюватися з часом і реагувати на дії користувачів.
Відкладене виконання коду і setTimeout
Замість того щоб викликати функцію зразу, можна попросити JavaScript зробити це через певний час. Такого роду відкладене виконання називається запуском по таймеру, і для цього в JavaScript є функція setTimeout. Ця функція приймає два аргументи: функцію, яку треба буде викликати при спрацьовуванні таймера, і саме час очікування в мілісекундах.
Наступний приклад показує, як відкрити діалог alert через setTimeout.
Зверніть увагу – виклик setTimeout повернув число 13. Це значення називають ідентифікатором (ID) таймера, який позначає цей конкретний таймер (до виклику функції). Зауважимо, що значення, яке повертає setTimeout може бути будь-яким числом, адже це просто ідентифікатор.
Скасування дії таймера
Після задання відкладеного виклику функції за допомогою setTimeout може з'ясуватися, що викликати цю функцію більше не потрібно. Для скасування дії таймера використовується функція clearTimeout з ID таймера (отриманим раніше від setTimeout) в якості аргументу.
Припустимо, ви встановили таймер «Зробити домашню роботу!» наступним чином:
var doHomeworkAlarm = function () {
alert("Зробити домашню роботу!");
};
var timeoutId = setTimeout(doHomeworkAlarm, 60000);
Функція doHomeworkAlarm створює діалог alert, що нагадує про домашню роботу. Виклик setTimeout (doHomeworkAlarm, 60000) повідомляє JavaScript, що функцію doHomeworkAlarm потрібно викликати через 60 000 мілісекунд (тобто 60 секунд). Далі ми викликали setTimeout і зберегли ID таймера в новій змінній timeoutID.
Тепер, щоб скасувати дію таймера, досить передати його ID функції clearTimeout, ось так:
clearTimeout(timeoutId)
Тепер setTimeout не викликатиме функцію doHomeworkAlarm.
Багаторазовий запуск коду і setInterval
Функція setInterval схожа на setTimeout, проте вона викликає передану їй функцію повторно через певні проміжки (інтервали) часу. Скажімо, якщо ви хочете за допомогою JavaScript оновлювати показання годин, використовуйте setInterval, щоб функція оновлення викликалася раз в секунду. SetInterval приймає два аргументи: функцію і інтервал часу в мілісекундах.
Наприклад, так можна раз в секунду виводити в консоль повідомлення:
Анімація елементів за допомогою setInterval
Відкладений виклик через setInterval можна використовувати для анімації елементів в браузері. По суті, для цього потрібно створити функцію, яка злегка зміщує елемент, і потім передати її setInterval, встановивши невеликий час повтору. За умови, що кожне зміщення буде досить малим і величина інтервалу теж, анімація вийде дуже плавною.
Давайте анімуємо положення фрагмента тексту в HTML документі, рухаючи його по горизонталі:
var leftOffset = 0;
var moveHeading = function () {
$("#heading").offset({ left: leftOffset });
leftOffset++;
if (leftOffset > 200) {
leftOffset = 0;
}
};
setInterval(moveHeading, 30);
Відкривши наш документ в браузері, ви побачите, як елемент заголовка плавно зсувається вправо, поки не пройде відстань в 200 пікселів. Потім він різко повернеться на своє місце, і все почнеться знову.
Спочатку ми створили змінну leftOffset (відступ зліва), яку далі будемо використовувати для задання позиції заголовка «Привіт, світ!". Її початкове
значення – 0. Це означає, що заголовок почне свій рух з лівого краю сторінки.
Далі в рядку ми створили функцію moveHeading, щоб викликати її через setInterval. У коді moveHeading, в рядку, ми використовуємо $ ( "# heading") для пошуку елемента з id "heading" (це елемент h1) і викликаємо метод offset, щоб задати зсув заголовка від лівого краю екрана, переміщуючи його вправо.
Метод offset приймає об'єкт, який може містити властивість left для задання зміщення від лівого краю або властивість top для зміщення від верху сторінки. В даному випадку ми вибрали властивість left і присвоїли їй значення змінної leftOffset. Якби було потрібно задати незмінне зміщення, ми могли б вказати для властивості числове значення. Скажімо, виклик $ ( "# heading").Offset({left: 100}) помістить заголовок на відстані 100 пікселів від лівого краю сторінки.
Далі ми збільшили leftOffset на 1. Щоб переконатися, що заголовок не змістився занадто далеко, в рядку виконується перевірка – leftOffset більше 200? Якщо це так, скидаємо значення до 0. Нарешті, ми викликали setInterval, передавши цій функції в якості аргументів функцію moveHeading і число 30 (що означає 30 мілісекунд).
Цей код викликає moveHeading кожні 30 мілісекунд, тобто приблизно 33 рази в секунду. При кожному виклику moveHeading змінна leftOffset збільшується, і далі значення цієї змінної використовується, щоб задати положення заголовка. Оскільки функція викликається періодично, а leftOffset кожен раз збільшується на 1, заголовок плавно рухається по сторінці, зміщуючись на 1 піксель кожні 30 мілісекунд.
Реакція на дії користувача
Як ми з'ясували, один із способів управління часом запуску коду - застосування функцій setTimeout і setInterval, які викликають функцію через фіксований проміжок часу. Інший спосіб – виконувати код за певних дій користувача, таких як клік мишкою, натискання клавіші або просто переміщення мишки. Тоді користувачі зможуть взаємодіяти з вашою сторінкою, отримуючи дію у відповідь.
На події можна підписуватися, додаючи обробник події до елемента, в якому ця подія відбувається. Наприклад, якщо ви хочете викликати функцію при кліці по заголовку, додайте до елементу заголовка обробник події. Зараз ми розберемося, як це робиться.
Реакція на кліки
Коли користувач клацає по елементу в браузері, виникає подія click. За допомогою jQuery дуже легко поставити цій події обробник.
var clickHandler = function (event) {
console.log("Клік! " + event.pageX + " " + event.pageY);
};
$("h1").click(clickHandler);
Спочатку ми створили функцію clickHandler з єдиним аргументом event. При її виклику в аргументі event буде переданий об'єкт, що містить інформацію про подію, наприклад про те, в якому місці був зроблений клік. В коді функції-обробника, ми використовували console.log для виведення властивостей pageX і pageY об'єкта event.
Ці властивості зберігають x- і y-координати події - іншими словами, вони повідомляють, де саме на сторінці стався клік.
Далі ми активували обробник кліків. Код $("h1") знаходить елемент h1, а виклик $("h1").Click(clickHandler) означає: «У разі кліка по елементу h1 буде викликано функцію clickHandler і передано їй об'єкт події ». В даному випадку обробник витягує з об'єкта event інформацію про x- і y-координати кліка.
У веб-браузері, як і в більшості інших середовищ графічного програмування, нульова позиція x- і y-координат знаходиться у верхньому лівому куті екрану. У міру зростання x-координати точка зміщується до правого краю сторінки, а в міру зростання y-координати - до низу сторінки.
Подія mousemove
Подія mousemove виникає щоразу при переміщенні мишки.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Переміщення мишки</title>
</head>
<body>
<h1 id="heading">Привіт, світ!</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
$("html").mousemove(function (event) {
$("#heading").offset({
left: event.pageX,
top: event.pageY
});
});
</script>
</body>
</html>
Спочатку ми викликом $("html").Mousemove(обробник) додали обробник події mousemove. В даному випадку аргумент обробника – це функція цілком. Вона починається після mousemove і триває до тега </script>. Ми використовували $ ( "html"), щоб знайти елемент html, тому обробник буде викликаний при переміщенні мишки в будь-якому місці сторінки: функція, яку ми передали в дужках після mousemove, буде викликатися щоразу, коли користувач пересуне мишку.
В коді функції-обробника, ми знайшли елемент заголовка і викликали для нього метод offset. Як раніше було сказано, у об'єкта, який передається в якості аргументу offset, можуть бути властивості left і top. В даному випадку ми присвоюємо властивості left значення event.pageX, а властивості top – event.pageY. Тепер кожен раз при пересуванні мишки заголовок буде переміщатися в позицію, де відбулася подія.
