JavaScript Базовый

В этом уроке будет рассмотрено окружение, в котором выполняется 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 запрос на сервер, после чего обработать полученный ответ.