Полный курс по JavaScript - с нуля до результата

66 уроков
21 просмотров
15 ч.
6000 ₽

Личные консультации

Card image cap
Подробное код-ревью домашнего задания
360 минут

800 ₽

Card image cap
Проверка вашего стороннего проекта
1800 минут

1500 ₽

Card image cap
Частный урок по FrontEnd разработке
75 минут

1750 ₽


Программа курса: что вы изучите

1

Подготовка к работе

В этой секции мы полностью настроим программы для реальной работы
Про этот курс

00:01:52

Описание

В этом уроке мы поговорим о том из чего будет состоять курс и что вы получите в итоге

Как проходить данный курс

00:02:56

Описание

Ответы на домашние задания - тут

 

Настройка рабочего пространства

00:08:32

Описание

В этом уроке мы познакомимся с VS Code, установим все необходимые для удобной работы плагины и настроим своё окружение.

Однако в своей работе вы можете использовать любой другой удобный для вас текстовый редактор или IDE: Atom, Brackets, WebStorm, Sublime Text 3...

Cписок необходимых плагинов:

  1. All Autocomplete

  2. Auto Close Tag

  3. Auto Complete Tag

  4. Auto Rename Tag

  5. Beautify

  6. Code Runner

  7. GitLens — Git supercharged

  8. Import Cost

  9. JavaScript (ES6) code snippets

  10. jshint

  11. Live Server

  12. Multiple clipboards for VSCode

  13. Reactjs code snippets

  14. Sass

  15. Theme - Oceanic Next

  16. vscode-icons

  17. ESLint

Так же необходимо установить Node.js с официального сайта.

Ссылки на ресурсы:

VS Code - https://code.visualstudio.com/

Node.js - https://nodejs.org/en/

Список необходимых плагинов - тут

Как работать с JSHint

00:07:05

Описание

В этом уроке мы научимся работать с одним из самых полезных инструментов для Front-End разработчика. JSHint будет в автоматическом режиме указывать на недочеты и ошибки в нашем коде. Теперь никакие синтаксические ошибки, опечатки и прочие мелочи не испортят ваш код!

Скачайте файл настройки и поместите его в вашу общую рабочую папку, чтобы его действие распространилось на все файлы внутри неё. Он уже настроен для стандартной работы.

 

Сайт JSHint - https://jshint.com/

Параметры настройки .jshintrc - https://jshint.com/docs/options/

Скачать файл настройки: тут


2

Основы JavaScript

В этом модуле мы узнаем основные понятия в программировании и JavaScript
Подключение JS к странице и переменные

00:11:42

Описание

В этом уроке мы познакомимся с тем, что такое JavaScript, какими способами его можно подключить к странице и как это делать правильно.

Познакомимся с таким понятием как переменные и зачем они нужны в программировании.

Хороший учебник по JS

Правильная стилистика кода наглядно: тут

Классификация типов данных в JavaScript

00:09:13

Описание

В этом уроке мы познакомимся с классификацией типов данных в JavaScript.

Мы все время будем работать с разными данными и нам обязательно нужно понимать, а что же это за данные, чтобы правильно их применять в коде.

Классификация типов данных наглядно: тут

Простое общение с пользователем

00:05:44

Описание

В этом уроке мы научимся простому взаимодействию с пользователем на странице. Научимся выводить информацию на экран, задавать пользователю вопросы и получать ответы. Понимая, как это работает, в будущем мы сможем правильно работать со страницей.

Операторы в JS

00:10:46

Описание

В этом уроке мы узнаем, что такое операторы и как правильно их применять в JS.

Таблица приоритетов операторов

Учимся работать с системой контроля версий Git и с сервисом GitHub

00:22:23

Описание

Использование систем контроля версий - это важный навык. Они применяются как для небольших проектов, так и для крупнейших в мире сервисов. Они помогают не потерять результат работы, позволяют работать нескольким разработчикам сразу над одним проектом и наглядно отслеживать и показывать результат работы.

В этом уроке мы познакомимся с СКР - Git и сервисом для хранения своих репозиториев - GitHub.

Обучение Git'у и его возможностям

Github

Документация по Git

Git

Как работать с GitHub с разных компьютеров, gitignore и Git Kraken

00:15:52

Описание

В этом уроке мы научимся работать с GitHub репозиториями с разных компьютеров.

Git Kraken

Файл gitignore (скрытый файл, положить в проект)

Условия

00:10:19

Описание

В этом уроке мы узнаем как использовать условия для того, чтобы направлять нашу программу в нужное русло. Этот прием используется не только в JS, но и в других языках программирования, так что навык работы с ними вам необходимо освоить обязательно.

Циклы

00:07:51

Описание

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

Циклы наглядно тут: тут

Практика. Пишем приложение. Часть 1

00:14:16

Описание

Продолжаем работу с проектом, используем циклы и условия. В течении 5 заданий мы напишем своё приложение. Готовая верстка будет предоставлена в следующих заданиях.

Инструкции к заданию:

Дописать нашу программу по видео.

1) Переписать наш цикл for еще двумя способами и закомментировать их (еще 2 вида циклов, тренируемся)

2) Проверить, чтобы все работало и не было ошибок в консоли

3) Добавить папку со вторым уроком в свой репозиторий на GitHub

Подсмотреть ответ тут

Функции

00:20:09

Описание

В этом уроке мы познакомимся с основными строительными блоками программ - функциями. Узнаем, какие они бывают и как их правильно использовать.

Про замыкание функций

Про методы строк

Про методы чисел

Практика. Пишем приложение. Часть 2

00:11:48

Описание

Мы продолжаем работу с проектом и сейчас будем использовать функции в нем.

Инструкции к заданию:

Дополнить нашу программу по видео.

1) Оформить расчет дневного бюджета  и вывод на экран этого значения как одну функцию (detectDayBudget)

2) Оформить блок кода с расчетом уровня достатка как отдельную функцию (detectLevel)


3) Создать функцию для определения необязательных расходов (chooseOptExpenses):

Необходимо 3 раза спросить у пользователя “Статья необязательных расходов?”

Записать ответы в объект optionalExpenses в формате Номер - Ответ.

  1. optionalExpenses: {
  2. 1 : “ответ на вопрос”
  3. }

Вызывать функции не обязательно.

4) Добавить папку с третьим уроком на GitHub

Подсмотреть ответ тут

Callback-функции

00:04:57

Описание

В этом уроке мы узнаем, что такое callback-функции и для чего они применяются.

Классификация функций наглядно тут

Объекты

00:08:59

Описание

В этом уроке мы познакомимся с таким типом данных, как объект поподробнее. Узнаем, что такое методы и свойства и научимся с ними работать.

Массивы и псевдомассивы

00:21:35

Описание

В этом уроке мы познакомимся с частным случаем объектов - массивами. Разберемся с его методами и как его правильно использовать в работе.

Полное описание массивов

Наглядно важнейшие методы массивов и обёекты тут

Полная шпаргалка: тут

Объектно Ориентированное Программирование (ООП)

00:06:20

Описание

В этом уроке мы познакомимся с таким архитектурным приёмом, как ООП. Он используется во многих языках программирования, в том числе и в JS.

Функции-конструкторы

Классы

Практика. Пишем приложение. Часть 3

00:12:29

Описание

Продолжаем работать с проектом, используем полученные знания про объекты.

Инструкции к заданию

Дополнить свою программу по видео

1) Написать проверку, что пользователь может:

·        Ввести в дополнительных доходах (chooseIncome) только строку

·        Не может оставить строку пустой

·        Не может отменить вопрос

2) При помощи метода перебора массива(forEach) вывести на экран сообщение "Способы доп. заработка: " и полученные способы (внутри chooseIncome)

·        Товары должны начинаться с 1, а не с 0. Выполняем этот пункт в chooseIncome.

3) Используя цикл for in для объекта (appData) вывести в консоль сообщение "Наша программа включает в себя данные: " (вывести весь appData)

4) Проверить, чтобы все работало и не было ошибок в консоли

5) Добавить папку с уроком на свой GitHub

Подсмотреть ответ тут

Отлавливаем ошибки в своем коде при помощи консоли разработчика. Breakpoints.

00:09:20

Описание

В этом видео мы освоим очень важный навык - поиск ошибок в своем коде при помощи консоли разработчика.

Динамическая типизация

00:23:57

Описание

В этом уроке мы поговорим о том, что такое динамическая и статическая типизация в программировании. Узнаем, как работает динамическая типизация в JS.

Про типизацию

Шпаргалку скачать тут

Видео-разбор задач

00:17:04

Описание

В этом уроке мы разберем задачи из предыдущего урока.

Получение элементов со страницы

00:13:11

Описание

В этом уроке мы научимся получать элементы с HTML-страницы и использовать их в работе JavaScript кода.

Файл со стилями, если захотите повторить: тут

Действия со страницей

00:27:11

Описание

В этом уроке мы научимся манипулировать содержимым страницы при помощи JavaScript. Теперь мы сможем на лету удалять/добавлять/заменять элементы и тд.

События и их обработчики

00:26:23

Описание

В этом уроке мы познакомимся с важнейшей теме в JavaScript. Мы научимся отслеживать действия пользователя и реагировать на них. Это ключевой навык, с которым мы будем работать в течении всего курса.

События

addEventListener

Про даты в JS

Про disabled

Практика. Пишем приложение. Часть 5

00:45:50

Описание

В этом задании мы завершаем работу над этим проектом. Используем знания об обработчиках событий и создадим полностью функционирующее приложение.

Инструкции к заданию

1) Добавить весь функционал, повторяя за видео

2) Если программа еще не запущена( не нажали кнопку "Начать расчет") - сделать кнопки неактивными.

3) Реализовать функционал: при расчете дневного бюджета учитывать сумму обязательных трат (т. e. от бюджета на месяц отнимаем общую сумму всех обяз. трат и ее делим на 30 дней)

4) Проверить, чтобы все работало и не было ошибок в консоли

5) Добавить папку с уроком на свой GitHub

Подсмотреть ответ тут

Бонус. События на мобильных устройствах и основы регулярных выражений

00:31:11


3

JavaScript в работе

В этом модуле мы с вами научимся создавать интерактивные элементы на сайте: таймеры, модальные окна, табы и пр.
Скрипты и время их выполнения. setTimeout и setInterval.

00:24:51

Описание

В этом уроке мы научимся запускать наши скрипты через определенный промежуток времени и поймем, как реализуются анимации при помощи JavaScript

Про анимации

Делегирование событий 1

Делегирование событий 2

Делегирование событий 3

Про requestAnimationFrame

Создаем табы на странице

00:18:38

Описание

Начиная с этой практики мы будем работать над проектом Landing-page, урок за уроком реализуя функционал на нем. В этом задании мы напишем интерактивные табы для просмотра информации.

Инструкции к заданию

  1. Скачать проект тут

  2. Написать рабочие табы

  3. Проверить, чтобы все работало и не было ошибок в консоли

  4. Добавить папку с уроком на GitHub

Подсмотреть ответ можно тут

Формируем портфолио на GitHub

00:09:10

Описание

Уже сейчас нужно задуматься о том, как будет выглядеть ваше портфолио. И сейчас мы займемся им.

 

Параметры документа, окна и работа с ними

00:26:09

Описание

В этом уроке мы познакомимся с такими важными понятиями, как document, window, screen и научимся работать с их параметрами.

Метрики тут

Создаем таймер обратного отсчета на сайте

00:21:28

Описание

В этом задании мы научимся создавать интерактивные элементы, которые отсчитывают время - таймерами.

Инструкции к заданию

1) Написать таймер обратного отсчета

2) Проверить, чтобы все работало и не было ошибок в консоли

3) У таймера есть проблема (нужно исправить)

·        Если дата уже прошла, а мы заходим на страницу, то получим

2018-10-18_22-23-28-5372adc534863a6d489dfabd1c60a92a.png

4) Изменить скрипт так, чтобы в таком случае выводилось: 00:00:00 

·        Необходимо подставлять 0 перед значениями, которые состоят из одной цифры (из 4:6:50 сделает 04:06:50)

3) Добавить папку с уроком на GitHub

Подсмотреть ответы тут

Конструкторы и классы

00:09:03

Описание

В этом уроке мы научимся работать с конструкторами и классами в JavaScript. Этот навык особенно пригодится при работе с Angular/React/Vue

Функции-конструкторы

Классы

Контекст вызова (this)

00:24:26

Описание

В этом уроке мы узнаем, что такое this. Это одно из важнейших понятий в JavaScript и мы подробно остановимся на четырех конкретных ситуациях с примерами.

Большой гайд по this

Создаем модальное окно и работаем с this

00:06:41

Описание

В этом задании мы с вами создадим модальное окно и увидим, как же может использоваться this на реальном примере.

Инструкции к заданию

1) Написать функцию вызова модального окна

2) Привязать модальное окно к кнопкам “Узнать подробнее” в табах. Код не должен дублироваться.

Второе задание:

У вас есть код:

  1. <input id="age" value="30">
    let age = document.getElementById('age');
    function showUser(surname, name) {
    alert("Пользователь " + surname + " " + name + ", его возраст " + this.value);
    }
    showUser();

     

Выведите на экран правильное сообщение, которое берет значение из input

Написать скрипт в отдельном js файле.

Проверить, чтобы все работало и не было ошибок в консоли.

Добавить папку с уроком на GitHub

 

Подсмотреть ответ тут

Стандарт ES6. Интерполяция

00:06:09

Описание

В этом уроке мы начнем знакомится с современным стандартом ES6 и таким важным понятием, как интерполяция. Понимание и применение этой возможности нового стандарта сильно облегчит работу.

Шпаргалка по ES6

ES6 по человечески

ES6. let и const

00:05:51

Описание

В этом уроке мы еще раз проговорим основные отличия между var и let/const

Увидим как они различаются при работе с циклами.

Про let

Про const

ES6. Стрелочные функции

00:06:46

Описание

В этом уроке мы познакомимся с новым синтаксисом у функций, который принес нам ES6. Узнаем основные особенности и когда стоит её использовать, а когда нет.

Arrow function

ES6. Параметры по умолчанию

00:04:03

Описание

В этом уроке мы познакомимся с таким понятием как параметры по умолчанию. Практический пример использования будет в следующем уроке.

Параметры по умолчанию

ES6. Классы

00:04:49

Описание

В этом уроке мы рассмотрим что же такое оператор разворота (spread) и применим его на практике.

Про классы №1

Про классы №2

ES6. Spread-операторы

00:05:33

Описание

В этом уроке мы рассмотрим что же такое оператор разворота (spread) и применим его на практике.

Про spread - оператор


4

Продвинутый JavaScript

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

00:11:19

Описание

В этом уроке мы познакомимся с понятием локальных серверов и установим один из них.

Сайт Open Server

Сайт MAMP

JSON формат передачи данных

00:05:44

Описание

В этом уроке мы научимся работать с современным форматом передачи данных - JSON.

 

AJAX

00:24:34

Описание

В этом уроке мы научимся работать с асинхронными запросами на сервер. Теперь мы сможем без перезагрузки страницы получать данные с сервера или отдавать ему их.

XMLHttpRequest

Использование XMLHttpRequest

Объект FormData

Из FormData в JSON

Заголовки HTTP

Реализация скрипта отправки данных из формы

00:22:39

Описание

В этом задании мы научимся отправлять данные на сервер без перезагрузки страницы

Инструкции к заданию

1) Подключить скрипт отправки данных с формы к:

·        Модальному окну

·        Контактной форме

2) Проверить, чтобы все работало и не было ошибок в консоли

3) Добавить папку с уроком на GitHub

Подсмотреть ответ тут

ES6. Promise

00:20:47

Описание

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

Про Promise №1

Про Promise №2

Создаем слайдер на сайте

00:25:46

Описание

В этом задании мы создадим интерактивный слайдер на сайте.

Инструкции к заданию

Реализовать слайдер на сайте по видео

Подсмотреть ответ тут

Создаем калькулятор на сайте

00:15:29

Описание

В этом задании мы создадим интерактивный калькулятор на сайте.

Инструкции к заданию

1) Реализовать калькулятор на сайте

2) Проверить, чтобы все работало и не было ошибок в консоли.

3) Исправить баг в логике калькулятора:

Если заполнить оба поля, а потом очистить одно из них - общая сумма всё равно рассчитывается.

4) Добавить папку с уроком на GitHub

Подсмотреть ответ тут

Как сохранить данные без БД. Работа с localStorage

00:17:34

Описание

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

про localStorage просто

Ошибки. Как избежать “поломки” своего кода

00:11:18

Описание

В этом уроке мы научимся отлавливать ошибки в коде и красиво о них сообщать.

Про try/catch #1

Про try/catch #2

Современные библиотеки и фрэймворки. JQuery, как устроена $

00:30:26

Описание

В этом уроке мы познакомимся с основными современными библиотеками и фрэймворками.

Научимся работать с  Jquery и узнаем, как её можно заменить нативным JS.

Составим план обучения в зависимости от того, какую технологию вы выберете в будущем: Angular, Vue, React

Документация Jquery

Angular

React

Vue

Скачать файл стилей из урока тут

Инкапсуляция. Прием модуль, как и зачем его использовать

00:21:46

Описание

В этом уроке мы узнаем что такое инкапсуляция и модули, для чего они нужны и разберем на примерах из жизни.

Инкапсуляция, полиморфизм, наследование

Настраиваем Webpack и собираем наш проект

00:25:57

Описание

В этом уроке мы рассмотрим, как правильно настроить Webpack, при помощи него соберем наш проект в модульную структуру.

Webpack

Скачать webpack config

Сборка проектов при помощи Browserify

00:04:12

Описание

В этом уроке мы посмотрим на аналог Webpack и принцип его работы.

Browserify

Как превратить код ES6 в старый формат ES5. Babe, Babel-loader и полифиллы.

00:15:04

Описание

В этом уроке мы узнаем, как превратить код из нового стандарта в старый, для поддержки Internet Explorer 11 и ниже.

Babel

Babel-loader

ES6-Promise polyfill

babel-plugin-es6-promise

Polyfill for IE11 missing NodeList.forEach

foreach-polyfill npm

formdata-polyfill

Конфиг для webpack тут

ES6 Модули

00:04:13

Описание

В этом уроке мы познакомимся с новым синтаксисом модулей, который был введен со стандартом ES6

ES6 Модули

Работаем с готовым кодом

00:18:24

Описание

В этом уроке мы учимся не придумывать велосипед и правильно использовать чужой код.

OwlCarousel

Slick slider

Fotorama slider

Galleria slider

Сайт с готовыми решениями

Бонус. React

00:40:26

Описание

В этом уроке мы познакомимся с основными концепциями React и напишем простое приложение.

Документация React

Стоит почитать про React

Про JSX

Про styled-components



Начните обучение сегодня