Видео курс JavaScript Базовый. Модификация DOM дерева - видео курсы ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

    Выбери свою IT специальность

    Начать бесплатно

    Выбери свою IT специальность

    Начать бесплатно

      ×

      Вы открыли доступ к тесту! Пройти тест

      Вы действительно хотите открыть доступ к тестированию по курсу JavaScript Базовый на 40 дней?

      ВИДЕОУРОК №3. Модификация DOM дерева

      Для просмотра полной версии видеокурса, онлайн тестирования и получения доступа к дополнительным учебным материалам купите курс Купить курс
      Для просмотра всех видеокурсов ITVDN, представленных в Каталоге, а также для получения доступа к учебным материалам и онлайн тестированию купите подписку Купить подписку
      В этом уроке будет рассмотрено окружение, в котором выполняется JavaScript код. Вы узнаете, что такое DOM и BOM. И самое главное - научитесь производить поиск нужных узлов DOM дерева, что позволит начать строить динамические веб страницы и влиять на содержимое документа с помощью JavaScript кода.
      Читать дальше...
      Для того чтобы строить динамические страницы, необходимо понимать, как взаимодействовать с узлами DOM дерева, а также понимать, какие свойства доступны для редактирования у этих узлов. Не менее важно - научиться переходить от элемента к элементу на основе расположения найденного элемента в DOM девере. В этом уроке вы узнаете, как происходит навигация по DOM дереву, а также типы узлов и изучите основные их свойства.
      Читать дальше...
      В этом уроке вы узнаете, как с помощью JavaScript кода можно манипулировать содержимым страницы – добавлять и удалять элементы. Сначала вы научитесь создавать новые узлы, а потом узнаете, как с помощью разных методов добавлять созданные узлы в нужные части страницы. Этот урок даст понимание основ создания нового контента для веб страниц с помощью JavaScript кода.
      Читать дальше...
      Объекты, которые находятся в DOM дереве, создаются на основе HTML разметки, а свойства для этих объектов определяются через HTML атрибуты. В этом уроке вы узнаете, как получить доступ к значениям атрибутов и как изменить атрибуты через JavaScript код. Узнаете зачем нужны data атрибуты и разберете примеры использования data атрибутов на практике.
      Читать дальше...
      Цель этого урока – научиться использовать CSS классы в JavaScript коде и изменять оформление элементов, как с помощью классов, так и с помощью inline css стилей. Также, в этом видео уроке, будет рассмотрено такое понятие, как вычисленные стили, понимание которых важно для JavaScript разработчика, вносящего изменения в оформление страницы во время выполнения сценария.
      Читать дальше...
      Построение пользовательского интерфейса неразрывно связано с реакцией на взаимодействие с элементами управления – нажатием на кнопки, вводом значений в поля ввода и другими подобными действиями. Для того, чтобы отреагировать на действие пользователя, необходимо уметь обрабатывать события и знать, какие элементы управления, какие события могут выдать. В этом уроке вы узнаете, что такое события и как обрабатывать события в JavaScript, используя свойства DOM элементов и метод addEventListener.
      Читать дальше...
      Этот урок нацелен на изучение событий, которые часто используются при построение пользовательских интерфейсов. Вы узнаете, как обрабатывать события мыши, события нажатия на клавиши клавиатуры, а также научитесь обрабатывать события, связанные с загрузкой документа. Этот урок нацелен на практическое применение разных событий и содержит несколько интересных примеров построения интерфейса, где используются события движения курсора и клавиатуры.
      Читать дальше...
      В DOM дереве событие проходит по определенному маршруту - от корня дерева к элементу, который событие инициировал, а после этого событие идет в обратную сторону - к корню DOM дерева. Используя addEventListener в JavaScript, можно определить на каком именно этапе будет обрабатываться событие. Это позволяет создать эффективный код обработки событий нескольких элементов управления. В этом уроке будут рассмотрены этапы распространения события, способы установки обработчиков на разные этапы и примеры кода, показывающие для чего это используется.
      Читать дальше...
      Современный пользовательский интерфейс состоит из множества HTML элементов с разными атрибутами и, обычно, его структура достаточно сложная. Построение такого интерфейса на чистом JavaScript не простая задача, которая может быть связана с множеством мелких ошибок. Чтобы избежать этих ошибок и упросить генерацию разметки используются специальные библиотеки – шаблонизаторы. В этом уроке вы научитесь использовать шаблонизатор mustache.js и узнаете о том, как пользоваться HTML элементом template.
      Читать дальше...
      Объекты – важная часть разработки на любом объектно-ориентированном языке программирования. JavaScript включает в себя разные ООП техники, поэтому работа с объектами очень важна для написания полноценных сценариев. В этом уроке вы научитесь создавать объекты с одинаковой структурой с помощью функций конструкторов. А также узнаете о том, что такое прототип и какую роль он играет в работе множества механизмов JavaScript.
      Читать дальше...
      Функции конструкторы и прототипы, которые вы изучали на прошлом уроке, важны для правильного понимания работы множества конструкций в JavaScript. Сегодня, вместо функций конструкторов, на практике применяют классы и другие современные возможности, связанные с ними. В этом уроке вы узнаете, что класс — это, по сути, расширение функций конструкторов и это очень удобный способ работы с объектами, который позволяет, с помощью небольшого объема кода, определить свойства и методы и правильно воспользоваться прототипами.
      Читать дальше...
      Наследование – концепция ООП языков программирования, согласно которой функциональность одного класса может быть передана в другой класс. С появлением ключевого слова class в JavaScript наследование стало очень простым и не требует написания большого количества кода, связанного с прототипами, как это было ранее. В этом уроке вы узнаете, как работает наследование и используется ключевое слово extends. Немаловажной частью этого урока будет рассмотрение работы статических свойств и методов.
      Читать дальше...
      В этом уроке будет детально рассмотрено понятие контекста функции. Вы узнаете какие возможные значения может принимать ключевое слово this. Как ведет себя контекст глобальных функций в строгом режиме, а также узнаете, как пользоваться методами call, apply и bind для смены контекста вызываемой функции. Функции - важный инструмент в JavaScript, так как этот язык включает в себя техники функционального программирования. Хорошее понимание функций дает возможность лучше понимать и использовать разные шаблоны кодирования в JavaScript.
      Читать дальше...
      Замыкания - полезный механизм любого функционального языка программирования. В JavaScript замыкания работают на основе внутренних структур, которые создаются во время выполнения функций – контекстов выполнения и лексических окружений. Этот видео урок посвящен механизмам, которые лежат в основе работы функций и показывает примеры того, как используется замыкание в JavaScript сценариях.
      Читать дальше...
      На этом уроке вы научитесь работать с HTML формами через JavaScript код и получать значения, введенные пользователем. Также вы узнаете зачем нужны HTML формы и как они работают при отправке значений на сервер.
      Читать дальше...
      Проверка данных – основная роль JavaScript, когда речь идет о HTML формах. Данные, введенные пользователем, могут не соответствовать ожиданиям разработчика. Пользователь может не ввести какое-то обязательное значение или указать данные в неправильном формате, например, когда требуется ввести email адрес и номер телефона. В этом уроке вы узнаете о событиях, которые будут полезными при проверке данных, а также рассмотрите несколько подходов в организации процесса проверки введенных значений, в том числе изучите проверку данных без применения JavaScript, используя HTML5 атрибуты для валидации.
      Читать дальше...
      В этом уроке будут изучены основные варианты хранения данных на стороне клиента. Cookies самый простой способ сохранить небольшой объем данных, но значения, записанные в cookies, отправляются на сервер при каждом запросе, поэтому такой способ хранения данных больше подходит для отслеживания действий пользователя и авторизации пользователя на сайте. WebStorage – это более современный API для работы с браузером, который позволяет сохранить больше данных, чем cookies и предназначен только для сохранения значений и не связан с отправкой данных на сервер.
      Читать дальше...
      В любом приложении могут возникнуть ошибки во время выполнения. Такие ошибки зачастую невозможно предугадать, например, при отправке запроса на сервер пропало соединение и отправить запрос не получится или JSON данные содержат ошибку и восстановить на основе этих данных объект уже невозможно. Все ситуации, из-за которых нельзя продолжить выполнение кода, называются исключениями, а два ключевых слова try/catch – способ обработать ошибку в коде и предоставить альтернативный способ выполнения сценария.
      Читать дальше...
      В этом видео уроке речь пойдет об организации асинхронного кода. Вы узнаете о том, как можно обработать результат асинхронной операции с помощью функции обратного вызова и поймете недостатки такого подхода при описании сложной логики. Но большая часть урока посвящена использованию объектов Promise, с помощью которых код получается проще и позволяет представить каждую асинхронную операцию в виде отдельного объекта.
      Читать дальше...
      Современное веб приложение, написанное с помощью JavaScript, невозможно представить без взаимодействия с серверной стороной. В этом уроке, для лучшего понимания принципов работы с сетевыми запросами, будут рассмотрены основы HTTP протокола. Вы узнаете, как выглядит запрос и ответ, какие бывают HTTP глаголы и на что они влияют, а также узнаете об основных статус кодах, которые приходят в ответе сервера. Главная задача урока – показать, как пользоваться методом fetch и отправить HTTP запрос на сервер, после чего обработать полученный ответ.
      Читать дальше...
      ПОКАЗАТЬ ВСЕ
      Студенты также смотрят
      JavaScript Стартовый
      ПОДРОБНЕЕ
      JavaScript Шаблоны
      ПОДРОБНЕЕ
      JavaScript: Расширенные возможности
      ПОДРОБНЕЕ
      Пакеты подписки с доступом ко всем курсам и сервисам

      Пакеты подписки с доступом ко всем курсам и сервисам

      Стартовый
      • Все видеокурсы на 3 месяца
      • Тестирование по 10 курсам
      • Проверка 5 домашних заданий
      • Консультация с тренером 30 мин
      Базовый
      • Все видеокурсы на 6 месяцев
      • Тестирование по 16 курсам
      • Проверка 10 домашних заданий
      • Консультация с тренером 60 мин
      Премиум
      • Все видеокурсы на 1 год
      • Тестирование по 24 курсам
      • Проверка 20 домашних заданий
      • Консультация с тренером 120 мин
      комментарии и обсуждения
      Notification success
      Мы используем cookie-файлы, чтобы сделать взаимодействие с нашими веб-сайтами и услугами простым и значимым.