Супер JavaScript

Программа курса

Курс состоит из 65 занятий, которые объединены в 4 главы, где будет рассмотрено 114 практических примера. Длительность курса составляет 20 часов. Супер JavaScript — практический видеокурс: в каждой главе теоретический материал будет закрепляться множеством наглядных примеров кода.

Глава 1

Основы языка JavaScript

12 занятий

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

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

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

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

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

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

Я расскажу вам про 5 видов циклов на языке JavaScript и покажу на примерах для чего они нужны и как их создавать.

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

Я расскажу как работать с датой и временем на языке JavaScript, а так же вы получите шпаргалку по работе с объектом Date, разработанную мной.

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

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

В дополнение к основам JavaScript я расскажу вам про некоторые отличные возможности стандарта ES6 который уже отлично поддерживается почти всеми браузерами. В этом уроке мы рассмотрим такие темы как: Babel, Константы, Оператор расширения, Деструктивное присваивание, Стрелочные функции, Сохранение контекста, Двоичные числа, Восьмеричные числа, Проверка на целое число, Проверка на число и значение NaN, Тригонометрические и Алгебраические методы, Определение знака числа, Повторение строки, Поиск в строке, Заполнение массива, Ключи и значения массива, Множества, Удаление дубликатов в массиве.

Глава 2

Работа с DOM деревом

15 занятий

В этом уроке мы начнем знакомство с DOM деревом, и узнаем как можно найти HTML элементы на языке JavaScript для дальнейшей работы с этим элементом.

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

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

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

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

Напишем скрипт который будет генерировать время на странице.

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

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

Решим похожую задачу но будем создавать таблицу не из массива, а из объекта. Рассмотрим как можно объединять ячейки таблицы из кода и закрепим ранее полученные знания в Главе 1.

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

Создадим универсальную функцию, которая будет генерировать карточки с информацией о пользователях.

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

Создадим функцию, которая будет генерировать прогресс бар для указанного нами времени обратного отсчета.

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

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

Глава 3

Обработка события

26 занятий

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

Рассмотрим как можно скрыть и показать любой элемент на сайте с помощью JavaScript.

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

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

В этом уроке я покажу, как можно создать свой JavaScript класс для упрощения работы с элементами DOM. С помощью этого класса мы сможем создавать объекты, которые будут являться DOM элементами и так же у этих объектов будет несколько интересных методов и свойств, которые мы реализуем в классе.

Я расскажу вам про фазы срабатывания событий на языке JavaScript и научу пользоваться мощным приемом разработки - делегированием. Делегирование - это один из главных приемов работы с событиями, который необходимо освоить в первую очередь.

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

Рассмотрим еще один часто используемый тип поведения и реализуем функционал переключателя.

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

За основу мы возьмем код из главы 2 и усовершенствуем его, добавив возможность сворачивать и разворачивать элементы списка, который генерируется из объекта.

Улучшим код из главы 2, где мы реализовали сортировку таблицы по фиксированному столбцу. Но в этом уроке мы сделаем возможность сортировки таблицы при нажатии на заголовок любого столбца таблицы.

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

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

В этом уроке я расскажу вам про то как отслеживать нажатые клавиши CTRL, SHIFT, ALT, CMD при разных событиях. Это поможет нам выполнять обработку событий только если произошло нажатие нескольких клавиш.

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

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

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

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

Познакомимся с событиями фокуса и потери фокуса у элементов форм и научимся их обрабатывать.

Реализуем возможность HTML элемента быть под вокусом даже если это не элемент формы и сделаем возможноть перемещения элемента на странице по клавишам-стрелкам.

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

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

Мы научимся работать с диапазонами Range и выделением Selection на языке JavaScript.

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

Создадим генератор CSS тени для быстрого и удобного подбора необходимых параметров свойства box-shadow. Создадим интерактивный интерфейс с возможностью все настраивать с помощью ползунокв, чекбоксов и инпутов с разными типами.

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

Глава 4

Дополнительно

12 занятий

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

Рассмотрим как создается анимация на языке JavaScript с помощью каскадных таблиц стилей CSS.

Самый длинный урок в этом крусе посвящен регулярным выражениям. Регулярные выражения это мощный инструмент для поиска и замены текста в строках.

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

Библиотека sweetalert2.js позволяет очень просто создавать различные модальные всплывающие окна. Я покажу как подключить эту библиотеку и настроить у себя всплывающее окно.

Чтобы создать всплывающую подсказку возле любого HTML блока мы воспользуемся библиотекой popper.js

Для создания галереии изображений существует простая библиотека baguetteBox.js, с помощью которой можно очень быстро и просто создать галерею у себя на сайте.

Библиотека lightgallery.js включает в себя более расширенный функционал для создания галереии изображений. Мы рассмотрим как работать с ней для того, чтобы вы могли выбирать способ создания галереии в зависимости от необходимого функционала.

С помощью библиотеки flatpickr.js можно очень быстро и просто создать календарь у себя на сайте и настроить для него различные фильтры и ограничения.

Библиотека Cleave.js позволяет очень просто настроить валидацию формы для таких типов данных как дата, номер телефона, номер банковской карты и время.

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

Чтобы создать слайдер любой сложности можно воспользоваться библиотекой Swiper.js, которая написана без каких либо зависимостей от других скриптов и позволяет делать слайдеры любой сложности.

Супер курс по JavaScript

Об авторе

Исмаил Усеинов

О курсе

Структурированный материал

Платформа для обучения

Пожизненный доступ

Практические задания

Огромный объем информации

Поддержка от автора

Курс для тех, кто

только начинает свой путь в мире web-технологий и программирования

уже знает HTML и CSS, но хочет изучать что-то новое и более крутое

хочет получить востребованную и хорошо оплачиваемую профессию

хочет научиться создавать интерактивные графические интерфейсы для своих web-приложений

Программа курса

Глава 1

Глава 2

Глава 3

Глава 4

FAQ

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

Какое оборудование мне понадобится для обучения?

Какие программы мне потребуются?

Предоставляется ли ссылка на скачку архива с уроками курса после его оплаты?

Могу ли я смотреть курс со смартфона?