Category: JavaScript

Приклади маніпулювання DOM за допомогою jQuery

У попередніх статтях категорії Уроки JavaScript ми розглянули основні принципи DOM, дізналися, як можна взаємодіяти і маніпулювати елементами DOM за допомогою простого JavaScript. У цій статті ми трохи розширимо цю тему і розглянемо приклади маніпулювання елементами DOM за допомогою потужної бібліотеки JavaScript – jQuery. Бібліотека jQuery має потужні інструменти для знаходження елементів і роботи з ними для досягнення потрібної мети. За допомогою методів jQuery завдання обходу і маніпуляції елементами DOM вирішуються досить простими та інтуїтивно...

Уроки JavaScript – виконання коду після повного завантаження DOM

Досить часто при написанні коду JavaScript вам потрібно перевіряти, що DOM повністю завантажений. Це робиться для того, щоб бути впевненим, що всі елементи DOM доступні, і ви можете отримати доступ до цих елементів і вже можете ними маніпулювати. Всякий раз, коли ви використовуєте JavaScript для маніпулювання вашою сторінкою, вам потрібно дочекатися події готовності документа. Подія готовності документа сигналізує про завантаження DOM сторінки, після якого ви вже можете маніпулювати ним. Зверніть увагу, що подія готовності документа...

Уроки JavaScript – Діалогові вікна alert, confirm і prompt

Діалогові вікна дозволяють взаємодіяти з користувачем і працювати з даними, які отримані від цього користувача. Ви, безсумнівно, бачили їх, використовували їх і вони вас завжди дратували, коли вони з’являлися на якомусь сайті. Тепер прийшов час навчитися самому їх створювати. За допомогою діалогових вікон JavaScript ви можете взаємодіяти з відвідувачем вашого сайту досить простим і тривіальним способом. Наприклад, ви можете запитувати ім’я відвідувача, а потім якось його відображати на сайті. Або ви можете зробити діалогове вікно...

Уроки JavaScript – Об’єкт події (Event Object)

В попередній статті ми розглянули основні події в браузері. Сьогодні ми розширимо цю тему, та коротко розглянемо Об’єкт події (Event Object), який є одним з важливих аспектів обробки подій. Всякий раз, коли ви прив’язуєте функцію до події, тобто коли ви створюєте обробник подій, функція буде передана об’єкту. Це трапляється на самому початку, тому нам не потрібно робити для цього додаткових кроків. Цей об’єкт події містить різноманітну інформацію про подію, яка тільки що відбулася; він також...

Уроки JavaScript – Короткий огляд подій в браузері

Перш, ніж ми перейдемо до розгляду даної теми, важливо зробити акцент на одній речі: дерево DOM і мова JavaScript – це дві різні сутності. Події браузера є частиною API DOM, але вони не є частиною JavaScript. Події браузера є основою будь-якого веб-додатку і вони дуже часто використовуються в JavaScript. Саме через ці події ми визначаємо те, що має статися. Якщо у вашому документі є кнопка, і вам потрібна перевірка форми при її натисканні, ви повинні...

Уроки JavaScript – Основи маніпулювання елементами в DOM

Минулого разу ми розглянули деякі основи JavaScript і торкнулися різних аспектів об’єктної моделі документа, в тому числі способи доступу до вузлів і переміщення по DOM. Сьогодні ми поговоримо про те, як маніпулювати елементами в DOM.     Елементи для маніпулювання В останньому уроці ми розглянули кроки, пов’язані з доступом до колекції вузлів DOM або окремого вузла DOM. Справжня магія виникає, коли ми потім маніпулюємо певними властивостями, що призводить до так званої «поведінки». Кожен окремий вузол...

Уроки JavaScript – Доступ до вузлів та атрибутів в DOM

У цій статті ми продовжимо говорити про об’єктну модель документів (DOM) і розглянемо основні способи доступу до неї за допомогою JavaScript.     Давайте для прикладу візьмемо невеликий HTML документ, в якому є абзац та невпорядкований список: <!DOCTYPE html> <html lang="uk-UA"> <head> <meta charset="UTF-8"> <title>JavaScript – доступ до вузлів DOM</title> </head> <body> <p id="paragraph">Перший тестовий параграф</p> <ul> <li>Пункт 1 невпорядкованого списку</li> <li>Пункт 2 невпорядкованого списку</li> <li>Пункт 3 невпорядкованого списку</li> <li>Пункт 4 невпорядкованого списку</li> <li>Пункт 5...

Основи JavaScript

В цьому уроці ми розглянемо базові поняття про деякі основи JavaScript. Сьогодні ми приділимо увагу різним типам даних JavaScript, визначенню функцій, побачимо, що таке масиви і об’єкти, познайомимося з операторами в JavaScript, умовою if/else, а також з циклами for і while.     В JavaScript ви можете мати різні типи значень. Існують такі типи даних: числа, рядки, логічні значення (boolean), об’єкти, невизначені та нульові (NULL): Однорядкові коментарі пишуться з використанням двох косих рисок (//), весь...

JavaScript та DOM

У цій статті ми поговоримо про основні аспекти мови програмування JavaScript і DOM (об’єктна модель документів). Використання фреймворків, таких як jQuery або Prototype – це відмінний спосіб швидкої розробки додатків на JavaScript, але також важливо знати і розуміти базові аспекти цієї мови. Навіть якщо ви використовуєте тільки якусь конкретну бібліотеку, сьогоднішня інформація все одно принесе вам користь – розуміння того, як щось працює під «капотом», — це дуже важливо.     JavaScript – вступ JavaScript...

Шпаргалка по jQuery для початківців

Ми вирішили зібрати всю основну інформацію по jQuery (таку як робота з ядром, атрибутами, селекторами; маніпуляція з DOM, події, ефекти, AJAX та ін.) для початківців в одному місці. Сподіваємося, що дана шпаргалка буде корисна всім програмістам, незалежно від їх рівня та досвіду.   Ядро: Функції jQuery, Дані об’єкта, Дані, Взаємодія Атрибути: Attr, Значення, Клас, HTML, Текст   Селектори: Основні, Ієрархія, Основний фільтр, Форма, Атрибути, Фільтр контенту, Фільтр дочірніх елементів, Фільтр видимості   Переміщення по дереву...