Огромный бесплатный видеокурс по основам JavaScript и связанным темам

На YouTube появился курс по основам JavaScript и связанным темам: ES6, React, чистому коду, структурам данных и шаблонам проектирования. В каждом разделе изложена необходимая ключевая информация, а видео одинаково удобно смотреть как в рамках курса, так и по отдельности для изучения интересующих вопросов.

Для закрепления материала на практике можно воспользоваться учебной программой от freeCodeCamp. Ниже вы найдете все плейлисты курса и ссылки на отдельные видео по каждой теме. Курс пополняется. Приятного обучения!

Основы JavaScript

В первом блоке разбираются базовые понятия и синтаксис языка.

1. Переменные (Variables).
2. Типы данных (Data Types).
3. Числа (Numbers).
4. Строки (String Basics).
5. Квадратные скобки в строках (Strings: Bracket Notation) — доступ к отдельным символам в строке.
6. 20 строковых методов (20 String Methods in 7 Minutes).
7. Функции (Functions).
8. «Поднятие» переменных и функций (Hoisting).
9. Операторы сравнения и условная конструкция (Comparison Operators & If Else).
10. Равенство и строгое равенство (== vs ===).
11. Null vs undefined — разница между двумя типами данных.
12. Логические операторы и сокращенные логические операции (Logical Operators & Tricks with short-circuit evaluation)
13. Тернарный оператор (Ternary Operator).
14. Переключатели (Switch Statements).
15. Массивы (Arrays).
16. Основные методы массивов (Common Array Methods).
17. Копирование массивов (Copying Arrays).
18. Случайные числа и parseInt (Random Numbers & parseInt).
19. Цикл For (For Loop).
20. Циклы While/Do While (While/Do While Loops).
21. Циклы For in/For of (For in/For of Loops).
22. 8 методов итерации по массиву (Array Iteration: 8 Methods).
23. Объекты (Objects).
24. Объекты, часть 2 (Objects Part 2).
25. AJAX.
26. JSON.
27. Ключевое слово this.
28. Замыкания (Closures).
29. Промисы (Promises).
30. Уведомления (Desktop Notifications).
31. Немедленно вызываемая функция (Immediately Invoked Function Expression).
32. «Строгий режим» (Strict Mode).
33. Содержит ли объект указанное свойство (Check If A Property Is In An Object).
34. setInterval и setTimeout — внутренние таймеры-планировщики.

ECMAScript 6

Во втором блоке рассматривается ES6 — современный стандарт встраиваемого языка программирования, чьим расширением является JavaScript.

1. Var vs Const vs Let — объявление переменных.
2. Классы (Classes).
3. Символы (Symbols).
4. Шаблонные строки (Template Literals).
5. Прокси (Proxies).
6. Операторы Spread и Rest.
7. Стрелочные функции (Arrow Functions).
8. Деструктуризация (Destructuring).
9. Ассоциативный массив и объект map в ES6 (Map Data Structure & ES6 map object).
10. Import и Export — ключевые слова для модулей.

У нас есть шпаргалка по ES6 с основными хитростями, лучшими практиками и примерами: часть 1 и часть 2.

DOM (Document Object Model)

Третий раздел курса посвящен дереву DOM — объектной модели для XML- и HTML-документов.

1. Выбор и изменение элементов сайта (DOM Manipulation).
2. CSS стили (CSS Styles in JavaScript: Setting and Getting).
3. События (DOM Events).
4. addEventListener() — метод для добавления нескольких обработчиков к одному событию.
5. Узлы (DOM Nodes).
6. Анимация (Animation in the DOM).
7. requestAnimationFrame() — метод для указания браузеру на воспроизведение анимации.
8. Объект Window (Window Object) — параметры окна браузера.
9. Всплывающие окна (Pop-ups Tutorial).
10. cookies vs localStorage vs sessionStorage — разница между способами хранения данных в браузере.
11. История (Browser History).

Чистый код

В этой части курса рассматриваются принципы написания чистого кода на JavaScript. Материал основан на статье Райана Макдермотта (Ryan McDermott), которая, в свою очередь, основана на книге Роберта Мартина (Robert C. Martin). Чистый код можно использовать многократно, он удобен для чтения и рефакторинга.

1. Переменные (Variables).
2. Функции, часть 1 (Functions Part 1).
3. Функции, часть 2 (Functions Part 2).
4. Объекты (Objects).
5. Классы (Classes).
6. SOLID — пять основных принципов написания чистого кода.
7. Тестирование, конкурентность и устранение ошибок (Testing, Concurrency, & Error Handling).
8. Форматирование и комментарии (Formatting and Comments).

У нас есть подборка из 16 лучших практик написания читаемого кода. Этот и другие тематические материалы можно найти по тегу «Кодстайл».

Алгоритмы и структуры данных

Этот блок посвящен основам основ — автор рассказывает о разных видах алгоритмов и структур данных, показывая их реализацию на JavaScript.

1. Стеки (Stacks).
2. Множества (Sets).
3. Очереди и очереди с приоритетом (Queues & Priority Queues).
4. Двоичное дерево поиска (Binary Search Tree).
5. Двоичное дерево поиска: обход и высота (Traversal & Height).
6. Ассоциативный массив и объект map в ES6 (Map data structure & ES6 map object).
7. Хеш-таблицы (Hash Tables).
8. Связный список (Linked List).
9. Префиксное дерево (Trie).
10. Куча (Heap).
11. Введение в графы (Graph Data Structure Intro).

Предлагаем ознакомиться с нашей подборкой статей по алгоритмам и структурам данных для начинающих, а также с другими полезными материалами в разделе «Алгоритмы».

Шаблоны проектирования

Шаблоны проектирования, или паттерны — это обобщенные проверенные способы решения часто встречающихся при проектировании проблем и вопросов.

1. «Одиночка» (Singleton).
2. «Наблюдатель» (Observer).
3. «Модуль» (Module).
4. «Посредник» (Mediator).

У нас выложен видеокурс по теме «Шаблоны проектирования для новичков», а также отдельный материал про подводные камни использования паттерна Singleton.

Основы React

Фреймворк React.js делает процесс проектирования модульных, многократно используемых компонентов пользовательского интерфейса простым и интуитивным. В этой части курса взаимодействие компонентов React показано на примере создания небольшого приложения со списком покупок.

Тем, кто начинает знакомство с React.js, рекомендуем ознакомиться с нашей подборкой из 9 полезных советов по использованию фреймворка.