Супер JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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