Видеокурс "JavaScript. Полное руководство для современной вебразработки"
-
Издательство
Автор
ПОДРОБНОЕ ОПИСАНИЕ
Автор(ы): Владилен Минин – Webformyself
Данный курс – это полный охват теоретических и практических знаний и навыков по JS – без воды и в концентрированном виде. В курсе собраны лишь самые актуальные и востребованные в 2019 году знания по JS – для современной веб-разработки.
JavaScript. Полное руководство для современной вебразработки. (Владилен Минин - Webformyself) -
- Блок №1. Что такое JavaScript
В данном блоке говорится о том, что такое JavaScript, про то, как он работает. Далее говорится про выбор оптимальной среды разработки, в которой идет дальнейшая разработка на протяжении курса. В последнем уроке пишется первая мини-программа на JavaScript и разбираются способы включения скриптов в HTML файле.
- Урок №1. О курсе
В этом уроке вы узнаете про структуру курса, для кого он нужен, как его проходить и про автора.
- Урок №2. Что такое JavaScript
В данном видео вы узнаете про то, что такое JavaScript, для чего он служит. Вы узнаете, как появился данный язык и что с помощью него можно создавать.
- Урок №3. Редакторы кода
В этом уроке вы узнаете про самый оптимальный редактор кода, в котором будет вестись разработка на протяжении курса. Показана установка Visual Studio Code от компании Microsoft и настройка ее с помощью плагинов для удобной разработки.
- Урок №4. Выбор браузера
В данном уроке вы узнаете, чем отличаются разные браузеры друг от друга и выберете самый оптимальный из них для разработки - Google Chrome. Далее вы познакомитесь с инструментами для разработки, встроенные в сам браузер, которые будут использоваться на протяжении всего курса.
- Урок №5. Способ подключения в HTML
В этом уроке вы узнаете про несколько разных способ, с помощью которых можно подключить JavaScript к HTML странице, через которую будут запускаться скрипты.
- Блок №2. Основы JavaScript
Изучение начнется со старой версии языка - EcmaScript 5. А дальше осуществляется переход к самым последним нововведениям. В курсе рассмотрена именно эта версия, так как на текущий момент большое количество проектов еще написаны на старой версии и для их понимания необходимо понимать все аспекты языка.
- Урок №1. Переменные
В этом уроке вы узнаете про то, что такое переменные и как они создаются в JavaScript.
- Урок №2. Типы данных
В этом уроке вы узнаете про то, какие типы данных есть в языке несмотря на то, что JavaScript является не строго типизированным. Вы познакомитесь с шестью базовыми типами данных и для каждого из типов увидите примеры.
- Урок №3. Базовые операции
В этом видео вы узнаете про базовые операции, которые есть в JavaScript. Рассматриваются некоторые из них, такие как сложение, присвоение, умножение, вычитание и деление.
- Урок №4. Приоритет операций
Вы познакомитесь с таким понятием как приоритет операций (Operator Precedence): узнаете в каком порядке интерпретатор JavaScript выполняет операции.
- Урок №5. Больше операторов
В этом уроке вы познакомитесь еще с некоторыми важными операторами, которые часто используются при программировании, такие как взятие остатка от деления, инкремент и другие.
- Урок №6. Операторы сравнения
Вы познакомитесь с операторами, отвечающими за сравнение различных типов данных и значений.
- Урок №7. Как работают логические операторы
В этом уроке вы узнаете про то, как работает Boolean логика вне зависимости от языка программирования. На диаграмме вы увидите примеры и после вы напишите на языке JavaScript более сложные примеры, применяя базовые принципы.
- Урок №8. Условные операторы
В этом уроке вы познакомитесь с условными операторами, которые также применимы почти для любых языков программирования: конструкций If Else
- Урок №9. Тернарные операторы
В этом уроке вы узнаете, как упростить блок условных операторов, применив краткую запись - тернарный оператор, который позволяет записать все в одну строчку.
- Урок №10. Оператор Switch Case
В этом уроке вы познакомитесь с альтернативной для некоторых записей конструкцией Switch Case, которая упрощает блок условных операторов.
- Урок №11. Функции. Задание*
В этом уроке вы узнаете, как создаются и инициализируются функции в JavaScript.
Задание: перепишите функцию checkAndLogAge таким образом, чтобы:
- В консоли можно было определить, что это за объект (человек или машина).
- Мы могли сами определять с каким возрастом сравнивать (не только 10 лет, но и любой другой возраст), причем это должно быть отображено в консоли.
- Урок №12. Способы создания функций
В этом уроке вы узнаете про 2 способа создания функций: через ключевое слово Var и Function. Далее вы узнаете, чем отличаются эти способы и какой способ лучше использовать на практике.
- Урок №13. Строки
В этом уроке вы более подробно познакомитесь с типом данных строки, узнаете какие встроенные методы есть у строк, с помощью которых можно упрощать работу и узнаете про способы создания строк.
- Урок №14. Числа
Вы познакомитесь более детально с типом данных числа, узнаете какие встроенные методы есть у чисел, какие встроенные функции в язык есть для работы с числами и какие есть граничные значения у данного типа данных.
- Урок №15. Массивы
Вы узнаете про то, что такое массивы в языке JavaScript, за что они отвечают и к какому типу данных принадлежат.
- Урок №16. Объекты
В этом видео вы познакомитесь с основами того, чем являются объекты и как с ними работать.
- Урок №17. Циклы
В этом видео вы узнаете про то, как циклы упрощают разработку и про то, как ими пользоваться на примере встроенного цикла For.
- Блок №3. Работа с DOM
В данном блоке изучается взаимодействие с DOM-деревом. Разбирается, как получать доступ к DOM-элементам, как управлять состояниями элементов: менять свойства, контент, атрибуты и прочее. Рассматривается, как добавлять динамику веб страницам путем добавления событий на элементы. Далее говорится про свойства событий и способы их управления.
- Урок №1. Что такое DOM
В этом уроке вы познакомитесь с таким понятием, как DOM-дерево. Узнаете про то, какие объекты есть в JavaScript при работе с ним в браузере.
- Урок №2. Доступ к элементам
В этом уроке вы познакомитесь со старыми и новыми методами, которые позволяют получать доступ к DOM-элементам прямо из скрипта.
- Урок №3. Содержимое элементов
Вы познакомитесь с возможностями внутри JavaScript, которые позволяют в динамичном режиме менять текстовое содержимое элементов или даже их HTML-код.
- Урок №4. Атрибуты
В этом видео вы узнаете, как с помощью двух встроенных методов вы можете менять любые атрибуты у элементов: менять их значения, удалять и просто считывать их значение.
- Урок №5. Классы
В этом уроке вы узнаете про удобный API ClassList у элементов, который позволяет крайне просто манипулировать различными классами у элементов.
- Урок №6. Добавление событий
В этом видео вы узнаете, как добавлять динамики вашим веб страницам с помощью событий и функции addEventListener, познакомитесь с возможными событиями, которые поддерживает JavaScript.
- Урок №7. Всплытие и погружение
В этом уроке вы узнаете про то, как отличается модель поведения событий: всплытие событий и погружение событий на примере DOM-элементов.
- Урок №8. Объект события
В этом видео подробно рассматривается объект события и говорится, что с помощь него можно сделать. Также вы узнаете, что такое функции preventDefault и stopPropagation, и чем они отличаются друг от друга.
- Урок №9. Делегирование событий
В этом уроке вы узнаете про оптимальную стратегию добавления событий, которая позволяет максимально экономить память при наличии большого количества элементов с событиями.
- Блок №4. Дополнительные возможности
В данном блоке вы познакомитесь с некоторыми дополнительными возможностями, заложенными в JavaScript, которые не были освещены ранее, но крайне важны для дальнейшего прохождения курса. Вы узнаете про способы асинхронной загрузки скриптов, способы взаимодействия с пользователем и про некоторые глобальные объекты, позволяющие работать с данными: математические формулы, операции, работы с массивами. Далее вы узнаете про методы работы с датами и временем, способы работы с JSON-объектами и методы хранения данных локально в браузере пользователя.
- Урок №1. Атрибут Async Defer
Вы узнаете, чем отличается атрибут у HTML-тега Script: Async от Defer и как с помощью данных атрибутов можно легко оптимизировать загрузку скриптов и отслеживать последовательность их загрузки.
- Урок №2. Взаимодействие с пользователем
Вы познакомитесь с основными встроенными методами взаимодействия с пользователем: с консолью и с тремя всплывающими окнами.
- Урок №3. Методы массивов
В этом уроке вы узнаете про полезные встроенные методы у массивов, которые позволяют крайне просто изменять массивы или находить в них элементы по условиям.
- Урок №4. Объект Math
Вы узнаете про глобальный объект, который служит для работы с математическими операциями (например, взятие корня, вычисление синуса и другие), создание случайных чисел и много другое.
- Урок №5. Объект JSON
Вы узнаете, как в JavaScript работать с JSON-объектами: легко переводить их в строки и наоборот.
- Урок №6. Дата и время с Date
В JavaScript есть встроенный глобальный объект для работы с датами и временем, с которым вы познакомитесь в этом уроке.
- Урок №7. Хранение данных в localStorage
В этом видео вы узнаете, что такое Local Storage и как с его помощью локально в браузере клиента сохранять любые данные, которые будут доступны даже после перезагрузки страницы.
- Блок №5. Практика. Создание приложения
Это первый практический блок из двух в данном курсе. В нем с нуля, применяя базовые знания, показано, как создать игру на JavaScript. Игра будет заключаться в том, что за выбранное вами время необходимо будет прокликать как можно больше случайно сгенерированных элементов разных размеров и цветов.
- Урок №1. Введение
В этом видео показан финальный результат, и разрабатывается стратегия по созданию данного приложения.
- Урок №2. Начало игры
В этом уроке начинается создание игры и пишутся первые строчки кода, являющиеся основой будущей игры.
- Урок №3. Создание квадрата
Пишется функция, которая позволит генерировать элемент квадрата в рамках игрового поля.
- Урок №4. Случайные значения
Вы узнаете, как написать функцию, которая генерирует случайное значение в диапазоне заданных чисел. Далее на основе этой функции будут случайно задаваться размеры и положение квадрата.
- Урок №5. Реализация таймера
В этом видео реализуется таймер обратного отсчета, который будет считать время до конца игры. Также реализуется функционал по самостоятельной настройке времени игры.
- Урок №6. Вывод результата
В этом уроке создается отображение пользователю результата его игры.
- Урок №7. Завершение
В этом видео показана оптимизация кода приложения и закончивается написание функционала игры.
- Урок №8. Задание «Случайный цвет»
Реализуйте задание случайного цвета квадрату
- Блок №6. Объекты и функции
Данный блок является продвинутым, в нем рассматривается «сложная» теория JavaScript с углублением. Вы узнаете про то, что такое прототипирование, как оно работает в рамках языка и какие полезные функции можно делать. Вы узнаете про свойства объектов, как ими можно управлять. Узнаете про функции, как управлять передачей контекста и познакомитесь с таким понятием как замыкания.
- Урок №1. Что такое объекты и прототипы
В этом уроке вы узнаете про то, как устроен JavaScript и что он построен на прототипах. Рассматривается что такое объекты, как они работают, как устроены прототипы.
- Урок №2. Как работают прототипы
В этом видео вы подробней посмотрите на прототипы и на конкретных примерах разбираются способы их работы.
- Урок №3. Создание и настройка объектов
В этом уроке вы узнаете про то, как работает функция Object Create и как с помощью нее можно создавать и конфигурировать очень гибкие и кастомизируемые объекты.
- Урок №4. Итерация ключей объекта
Вы узнаете про два способа с помощью которых можно получить доступ и проитерировать все ключи объекта: Object.keys и циклы For In. Так же вы узнаете про функцию hasOwnProperty.
- Урок №5. Как работают замыкания
В этом уроке вы узнаете про такой концепт в JavaScript как замыкания. Показано создание двух примеров с замыканиями, показано, как они работают и узнаете про области применения замыканий.
- Урок №6. Что такое контекст
В этом уроке вы узнаете более детально про то, что такое ключевое слово This, какие особенности работы есть с контекстом и что можно реализовывать с помощью данного объекта.
- Урок №7. Привязка контекста
В этом видео вы узнаете про три важных функции: Call, Bind, Apply с помощью которых можно управлять контекстом и его передачей в объектах и функциях.
- Урок №8. Задача: определить метод для всех массивов*
Задание: реализуйте возможность используя прототип, чтобы у каждого массива был новый метод, позволяющий удваивать значение каждого элемента с учетом типа данных таким образом, чтобы:
- Для чисел это возведение в квадрат.
- Для строк это удваивание строки.
- Метод не изменял существующий массив и возвращал новый.
- Блок №7. Новый JavaScript: ES6
Пройдя данный блок, вы познакомитесь с современным стандартом языка - EcmaScript 6. В данном блоке вы узнаете про все основные изменения, которые наиболее часто применяются в практике, такие как: переменные, стрелочные функции, объекты, новые операторы и удобные синтаксические изменения.
- Урок №1. Переменные Let Const
Вы познакомитесь с двумя новыми способами создания переменных: с конструкцией Let для изменяемых переменных и Const для неизменяемых.
- Урок №2. Стрелочные функции
В этом видео вы узнаете про то, как создаются и работают стрелочные функции. Так же вы узнаете разницу между созданием функции через ключевое слово Function и стрелочной функцией при работе с контекстом.
- Урок №3. Параметры по умолчанию
Вы узнаете, как добавлять параметры по умолчанию в функциях и методах.
- Урок №4. Объекты
В этом видео вы подробней узнаете про новые способы работы с объектами и новыми синтаксическими конструкциями в языке.
- Урок №5. Операторы Rest и Spread
Вы узнаете про два похожих оператора: Rest и Spread и узнаете на множестве примеров чем они отличаются, как работают и какие особенности у них есть.
- Урок №6. Строки
В этом видео вы познакомитесь с нововведениями, которые коснулись строк: новые методы и способы нативной шаблонизации.
- Урок №7. Классы и наследование
В этом уроке вы узнаете какие синтаксические конструкции добавили в язык, для того чтобы очень просто реализовывать ООП. Вы узнаете про такие ключевые слова, как: Class, Extends, Super и Constructor и на примерах увидите, как их использовать.
- Урок №8. Задача: написать свой плагин*
Задание: реализуйте класс Dropdown, который будет инициализировать компонент выбора элементов по функционалу похожий на обычный HTML-элемент Select, но полностью реализованный вашим кодом без Select-тега.
- Блок №8. Асинхронность
В данном блоке рассмотрено, как работать с асинхронными операциями в языке JavaScript. Вы узнаете про новые операторы Async Await и способы их применения для еще большего упрощения кода. После вы узнаете и научитесь более детальной работе с Promise.
- Урок №1. Интервалы и таймеры
В этом уроке вы узнаете, как работать с нативными асинхронными функциями, такие как setTimeout и setInterval, а также узнаете про то, как их очищать и настраивать.
- Урок №2. Старый поход: Callbacks
В этом видео показано создание эмуляции клиент серверного взаимодействия и последовательно обрабатывается 5 асинхронных запросов используя Callbacks.
- Урок №3. Как работает Promise
В этом видео вы познакомитесь с таким классом как Promise, который позволяет очень удобно работать с асинхронными функциями. Далее показано, как переписать прошлый урок с эмуляцией на Promise и увидите, как эти подходы отличаются.
- Урок №4. Метод Fetch
Вы узнаете про функцию Fetch, которая позволяет очень удобно делать асинхронные Ajax-запросы на удаленные сервера в фоновом режиме, используя API Promise.
- Урок №5. Операторы: Async Await
В этом уроке вы познакомитесь с новыми операторами Async Await, которые сильно упрощают взаимодействие с асинхронным кодом и превращают его в синхронный.
- Урок №6. Еще о Promise
В этом видео вы узнаете про два удобных метода у Promise: Race и All, которые упрощают работу с несколькими асинхронными запросами и позволяют легко управлять ими.
- Урок №7. Задание: реализовать промисы
Реализуйте класс MyPromise, который будет работать точно так же, как и Promise. Достаточно реализовать методы: Then, Catch, Finally. Методы All, Race делать не нужно.
- Блок №9. Практика. Создание приложения
Наиболее важный итоговый практический блок, в котором применяются все знания, полученные в данном курсе. Перед тем как его проходить стоит ознакомиться с двумя бонусными блоками по Webpack и основам NodeJS, так как в этом блоке создается приложение, используя самые передовые методы и инструменты разработки. В результате данного блока создается полноценное приложение на чистом JavaScript, которое по своей сути будет блогом.
- Урок №1. Введение
В этом уроке показано финальное приложение для того, чтобы понимать, какие элементы в нем будут присутствовать, и далее разрабатывается стратегия того, как будет вестись разработка.
- Урок №2. Начало работы
В этом уроке настраиваются необходимые инструменты для того, чтобы подготовить окружающую среду для максимально эффективной разработки. Показана инициализация проекта и создание файла инструкции package.json.
- Урок №3. Настройка WebPack
В этом видео показана настройка WebPack для вашего проекта, настраивается два режима сборки: версия для продакшн билда и для разработки.
- Урок №4. Настройка Babel
В этом видео настраивается babel для компиляции проекта для того, чтобы можно было писать, используя самые последние возможности языка, и они были так же доступны в любых других браузерах. Также подключаются полифилы для проекта.
- Урок №5. Создание первого компонента
В этом видео начнется разработка и создается общий класс компонента, от которого будут наследоваться все компоненты в приложении. Далее создается первый компонент.
- Урок №6. Компонент заголовок
В этом уроке создается компонент, который отвечает за окно приветствия и реализуется так, чтобы оно показывалось только при первом посещении сайта пользователем.
- Урок №7. Создание навигации
В этом уроке показано создание компонента навигации, отвечающим за переключение видимости компонентов. Вы узнаете, как реализовать возможность отображения выбранной вкладки.
- Урок №8. Работающие табы
В этом уроке вы узнаете про то, как при переключении вкладки показывать нужный компонент и скрывать предыдущие.
- Урок №9. Создание формы
В этом видео создается форма, которая служит для создания новых постов в системе.
- Урок №10. Валидация формы
В этом видео вы узнаете один из способов универсальной динамической валидации формы, где можно очень гибко настраивать валидаторы и добавлять их на любые контролы внутри формы.
- Урок №11. Отображение ошибок валидации
В этом видео реализуется возможность по отображению ошибки на контроле если он не прошел валидацию, а если прошел, то ошибка будет автоматически удаляться.
- Урок №12. Сохранение записи в Firebase
В этом уроке создается приложение с базой данных Firebase, и сохраняется первый пост уже на сервере.
- Урок №13. Получение данных с сервера
В этом видео создается сервис, который будет отвечать за работу с API и реализуется метод, который позволит получать список всех постов с сервера.
- Урок №14. Вывод списка постов
В этом видео вы узнаете, как вывести на страницу список всех постов. Вначале показана загрузка их с севера, дальше приведение к локальному формату, а потом они циклом выводятся в HTML шаблон.
- Урок №15. Добавление индикатора загрузки
В этом уроке создается новый компонент, который будет отвечать за индикацию загрузки данных с сервера. Далее создаются компоненты и реализуется даннаю возможность.
- Урок №16. Сохранение в избранное
В этом видео вы узнаете, как добавлять в избранное любой из постов используя Local Storage.
- Урок №17. Вывод списка избранного
В этом уроке реализуется последний компонент в приложении, который будет отвечать за вывод избранных постов в список и загрузку отдельного поста используя его ID.
- Урок №18. Обзор приложения и деплой на Firebase
В этом видео рассматривается готовое приложение и показано, как выложить его на удаленный хостинг Firebase.
- Урок №19. Исправление ошибок
При деплои приложения возникает 2 неточности связанных с минификацией кода, потому в этом уроке показано, как починить приложение и заново залить его на удаленный хостинг уже без ошибок.
- Урок №20. Задание*
Задание: в списке избранное выведите названия заметок, а не их ID. Функционал должен остаться такой же
-
JavaScript. Полное руководство для современной вебразработки. (Владилен Минин - Webformyself)