ВІДЕОУРОК № 5. Стилі
На цьому уроці буде розглянуто оточення, в якому виконується JavaScript код. Ви дізнаєтесь, що таке DOM та BOM. І найголовніше - навчитеся шукати потрібні вузли DOM дерева, що дозволить почати будувати динамічні веб-сторінки і впливати на вміст документа за допомогою JavaScript коду.
Для того, щоб будувати динамічні сторінки, необхідно розуміти, як взаємодіяти з вузлами DOM дерева, а також розуміти, які властивості доступні для редагування цих вузлів. Не менш важливо - навчитися переходити від елемента до елемента на основі розташування знайденого елемента DOM дереві. На цьому уроці ви дізнаєтеся, як відбувається навігація по DOM дереву, а також типи вузлів і вивчіть їх основні властивості.
На цьому уроці ви дізнаєтеся, як за допомогою JavaScript коду можна маніпулювати вмістом сторінки – додавати та видаляти елементи. Спочатку ви навчитеся створювати нові вузли, а потім дізнаєтеся, як за допомогою різних методів додавати створені вузли у потрібні частини сторінки. Цей урок дасть розуміння основ створення нового контенту для веб-сторінок за допомогою JavaScript коду.
Об'єкти, які знаходяться в DOM дереві, створюються на основі HTML розмітки, а властивості для цих об'єктів визначаються через HTML атрибути. На цьому уроці ви дізнаєтесь, як отримати доступ до значень атрибутів і як змінити атрибути через код JavaScript. Дізнаєтеся навіщо потрібні data атрибути та розберете приклади використання data атрибутів на практиці.
Мета цього уроку – навчитися використовувати CSS класи в JavaScript коді та змінювати оформлення елементів як за допомогою класів, так і за допомогою inline css стилів. Також, у цьому відео уроці буде розглянуто таке поняття, як обчислені стилі, розуміння яких важливе для JavaScript розробника, що вносить зміни в оформлення сторінки під час виконання сценарію.
Побудова інтерфейсу користувача нерозривно пов'язане з реакцією на взаємодію з елементами управління – натисканням на кнопки, введенням значень у поля та іншими подібними діями. Щоб відреагувати на дію користувача, необхідно вміти обробляти події та знати, які елементи управління, можуть їх видати. На цьому уроці ви дізнаєтеся, що таке події і як обробляти події JavaScript, використовуючи властивості DOM елементів і метод addEventListener.