О чём курс
Курс посвящен современному JavaScript (EcmaScript 2015+), использованию JS для работы в браузере (события, манипуляция HTML и CSS), работе с модулями JS (NPM, Webpack), работе с сервером (HTTP, REST, AJAX, Axios, WebSocket). Курс является основой для изучения веб-фреймворков Angular и React. Делается упор на применение ООП, работу с JSON, функциональное программирование. Детально изучается работа с классами, объектами, массивами, датами, иммутабельность и асинхронность.
Цели
После прохождения курса слушатели будут хорошо разбираться в возможностях языка JavaScript, получат основу для дальнейшего использования веб-фреймворков, таких как React или Angular. Слушателями будет подробно изучена структура и синтаксис языка, его объектная модель. Подробно рассматривается DOM модель HTML документа, дается введение в CSS, изучается техника управления DOM и CSS c помощью JavaScript. Изучаются модели обработки событий. Изучаются вопросы создания форм. Рассматривается технология JSON и технология Ajax, асинхронность и работа с сервером.
Целевая аудитория
Веб-разработчики.
Предварительная подготовка
Слушатели знакомы с HTML и CSS, желателен опыт программирования на каком-либо языке с С-подобным синтаксисом (C, C++, Java, C#).
Для кого
Разработчик
Улучшаемые навыки
Основы JavaScript
Работа с DOM и событиями
Асинхронное программирование
Модули и управление зависимостями
Работа с фреймворками и библиотеками
Темы курса
01
Язык JavaScript
- Версии и реализации JavaScript;
- Области применения JavaScript (браузер, сервер, мобильная разработка);
- Типы данных: String, Number, Boolean (понятие truthy и falsy);
- Операторы, приоритет операторов;
- Объявление переменных: var, const, let;
- Циклы: while, for, for … in, for …of;
- Работа с числами и строками;
- Значения null и undefined: отличия и цели применения;
- Работа с консолью;
- Исключения в JavaScript.
02
JSON, объекты и массивы
- Формат JSON, примеры;
- JSON.parse и stringify;
- Объекты, работа с классом Object;
- Создание объектов (с помощью литерала {}, оператор new, метод create);
- Прототипическое наследование, ссылка __proto__;
- Геттеры и сеттеры;
- Оператор in и hasOwnProperty, понятие перечислимых свойств;
- Метод toString(), вызов и переопределение метода;
- Метод valueOf(), вызов и переопределение метода;
- Создание массивов: литералы и new Array();
- Автоматическое изменение длины массива;
- Получение и установка длины массива length, усечение массива;
- Применение методов join() и concat();
- Использование метода sort, задание порядка сортировки массива;
- Использование методов slice и splice;
- Использование методов push, pop, shift, unshift: создание стека или очереди.
03
Работа с датами и строками
- Применение конструктора new Date();
- Понятие компьютерного представления даты как времени с Epoch;
- Использование getTime() и setTime();
- Парсинг строкового представления дат;
- Варианты создания строк в JS: использование одинарных и двойных кавчек;
- Интерполяция строк (строка в апострофах);
- Экранирование специальных символов в строке;
- Конкатенация строк, перевод в верхний и нижний регистр;
- Поиск подстроки с помощью indexOf() и lastIndexOf();
- Выделение подстроки с помощью substring() и substr()
- Применение методов includes, endsWith, startsWith.
04
Применение JavaScript в браузере: модель DOM
- Управление окном браузера, документом, событиями и оформлением (CSS-стилями);
- Объект window и его применение;
- Подключение кода JavaScript к HTML-странице;
- Порядок выполнения скриптов на странице;
- Кэширование скриптов, CDN-серверы, принудительная перезагрузка JavaScript;
- Работа с ссылками, подключение JavaScript к ссылкам;
- Событие onload и его использование;
- XSS-атаки на сайт;
- Работа с DOM: использование window, document, childNodes;
- Манипуляции документом с помощью DOM: создание, удаление, перемещение элементов;
- Использование getElementById(), getElementsByTagName(), getElementsByClassName() для поиска элементов на странице;
- Работа с методами и свойствами HTMLDocument и HTMLElement.
05
Работа с событиями в браузере
- Понятие событийного программирования;
- Обработчики и слушатели событий;
- Подключение обработчиков c помощью addEventListener();
- Свойства и методы класса Event;
- Распространение событий вверх (bubbling) и вниз (capturing);
- Остановка распространения;
- События окна;
- События мыши и клавиатуры, специальные свойства событий;
- События формы.
06
Работа с CSS и управление стилями
- Стандарт CSS, основные свойства CSS;
- Общие стили и стили отдельных элементов;
- Каскадирование стилей;
- CSS-селекторы;
- Изменение CSS с помощью JavaScript;
- Отступы: margin, padding, border;
- Управление видимостью элементов: visibility и display;
- Позиционирование элементов: absolute, fixed, relative, установка top и left;
- Единицы измерения px, pt и другие;
- Переполнение элемента и управление через свойство overflow;
- Управление слоями документа: свойство zIndex;
- Анимация, перемещение элементов;
- Работа с классами, установка className;
- Работа с прозрачностью и переходами (transition);
- Метод querySelectorAll().
07
Работа с модулями в JavaScript, менеджер пакетов NPM, сборщик Webpack
- Причины использования модулей;
- Экспорт из модуля;
- Импорт из модуля;
- Реэкспорт;
- Работа с NPM, файл package.json;
- Папка node_modules, загрузка пакетов с помощью NPM;
- Глобальная и локальная установка пакетов;
- Применение webpack для сборки проекта;
- Загрузчики CSS и TypeScript;
- Конфигурация webpack.config.js;
- Создание бандла, сжатие;
- Плагины webpack;
- Применение старых систем модульности – CommonJS и AMD;
- Использование CommonsChunkPlugin, несколько точек входа;
- Горячая замена модулей HMR.
08
Классы и наследование в JavaScript
- Прототипное наследование, ссылка __proto__;
- Прототип объекта;
- Использование instanceof;
- Ключевое слово class, создание классов;
- Ключевое слово super;
- Применение метода Object.assign();
- Применение метода Object.defineProperty();
- Геттеры и сеттеры;
- Spread-оператор для работы с объектами и массивами;
- Деструктурирование массива и объекта.
09
Функциональное программирование в JavaScript
- Функции как переменные;
- Массив arguments;
- Класс Function, методы call() и apply();
- Метод bind(), установка this и части параметров с помощью bind;
- Замыкания в JavaScript;
- Инкапсуляция значений с помощью замыканий;
- Создание функции через конструктор Function: конструирование строки;
- Стрелочные функции, примеры их применения;
- Функциональная манипуляция массивом: find, findIndex, filter;
- Примеры использования map/filter/reduce для обработки данных в массиве.
10
Иммутабельность, тестирование, паттерн MVC
- Понятие иммутабельности, ее преимущества;
- Мутабельные и иммутабельные методы изменения объектов и массивов;
- Понятие и преимущества Virtual DOM;
- Тестирование иммутабельных функций, применение Jest;
- Мемоизация, ее преимущества;
- Основные ошибки и рекомендации при использовании функционального программирования;
- Паттерн MVC, создание пользовательского интерфейса;
- Обзор основных библиотек для разработки интерфейса: Angular, React, Vue.
11
Асинхронность в JavaScript. Промисы
- Понятие и необходимость асинхронности;
- Работа с setTimeout, setInterval, clearTimeout;
- Функции обратного вызова (коллбэки);
- Потеря this при работе с функцией обратного вызова. Варианты решения (использование bind, стрелочных функций и др.);
- Понятие промисов, возвращение Promise из асинхронной функции;
- Метод Promise.all(), его применение;
- Синтаксис async/await, варианты применения, ограничения;
- Обработка внештатных ситуаций: Promise reject, обработка исключений при асинхронных вызовах.
12
Работа с сервером. Протокол HTTP. REST-сервисы
- Протокол HTTP;
- Заголовки и методы HTTP (GET, POST, PUT, DELETE, другие), передача данных;
- HTTP-серверы (обзор);
- Коды ответа HTTP-сервера;
- Использование форм для отправки данных;
- Передача данных на сервер с помощью AJAX;
- Архитектура REST: преимущества и особенности;
- Реализация CRUD (операций Create/Read/Update/Delete) при работе с REST;
- Применение фунции fetch() для получения и отправки данных;
- Документирование REST-сервисов с помощью Swagger;
- Понятие HATEOAS, применение
13
Библиотека AXIOS. Протокол WebSocket
- Сравнение высокоуровневой библитеки Axios и применения низкоуровневого fetch();
- GET- и POST- запросы в Axios;
- Применение async/await c Axios;
- Обработка ошибок при использовании Axios;
- Отмена запроса с помощью Axios;
- Протокол WebSocket;
- Примеры использования WebSocket, сравнение с HTTP;
- HTML-анимация.
Чему вы научитесь
01
Научитесь синтаксису и основным концепциям языка JavaScript, включая переменные, типы данных, операторы, функции и управление потоком
02
Освоите методы взаимодействия с Document Object Model (DOM) и обработки событий
03
Научитесь использовать асинхронные операции с помощью колбеков, промисов и async/await
04
Освоите принципы модульного программирования в JavaScript, включая использование ES6-модулей и систем сборки, таких как Webpack
05
Научитесь использовать популярные фреймворки и библиотеки, такие как React, Vue.js или Angular
Ведущий курса
Аракелов Армен
Записаться на курс
39 900 ₽
35 910 ₽ — для физ. лиц
Юр. лицо — 39 900 ₽
Физ. лицо — 35 910 ₽
17.02.2025, Онлайн
17.02.2025, Онлайн
Открытая дата
Отзывы о курсе
Отзывы учеников
Тренинг превзошел ожидания. Особенно хочется отметить широчайший кругозор тренера - Николая Смирнова.
Я очень довольна тренингом, наполнением практическими заданиями. Мне очень понравилось что практически не было сухого зачитывания слайдов с экрана, все сразу разъяснялось на примерах.
Весь курс оказался полезен. Это первое знакомство с языком. Были как самые базовые вещи, так и затронули библиотеки, упрощающие разработку в разы.
Отличный тренинг, хорошая подача материала и материала много. Хорошо, что есть теоретическая часть по домашнему заданию и практическая. Отлично, что все автоматизированно. Понравилась компетентность тренера. Наиболее полезным было то, что тренер имеет большой практический опыт работы по тем предметам, о которых он рассказывал. Владимиру отдельное спасибо!
Мне очень понравилась: 1) качественные презентационные материалы - подробная информация по предмету. 2) программа-опросник, которую создал Владимир. Эта программа содержит вопросы по пройденному материалу. Ответы на вопросы помогают быстрее и лучше разобраться в теме, как и практика. Курс, как всегда, на высоте!
Отличная организация курса. Лекции, вопросы на дом, практические задания, разбор дз. Все очень четко, грамотно, без заминок, отлажено и продумано. Понравилось, что внимание уделено тому, чтобы слушатель был вовлечен. Наш тренер – Владимир все доступно объясняет, хорошо отвечает на вопросы, уделяет много внимания слушателям. Курс рекомендую 😊
Понравилось все, наиболее полезным был интерактив, мы задавали вопросы и тренер, спрашивал нас, чтобы проверить, как мы поняли материал. Много практических примеров. Открытость тренера к вопросам. Повторение материала при разборе ответов, это прям огонь фишка. Доходчивое объяснение взаимодействия js и ui. И вообще отличные примеры по каждому вопросу курса.
Понравилось: 1) Практика, на которую делал упор тренер. 2) Последовательность подачи материалов (не перескакиваем с одной темы на другую). 3) Разбор заданий. 4) Ответы тренера на вопросы (связанные с курсом). Минус только один – хотелось бы позаниматься больше 😊 тренер действительно хороший, не зря его хвалят.
Для меня самой полезной информацией было то, как работают "promise"-ы и как создать классы и обьекты с "private set" и "public get". Понравилось, что нам порекомендовали книги для более углубленного изучения тему и дали прототипы для работы. В целом курс для тех, кто хочет узнать, как работает JavaScript на более низком уровне.
Связанные курсы
WEB-012
30 часов
Разработка на React
В курсе изучается JavaScript-библиотека React.js, а также библиотека Redux для управления состоянием приложения.
от Middle
37 900 ₽
WEB-017
10 часов
Разработка на NodeJS
Курс посвящен изучению основ NodeJS, сборщика модулей NPM и фреймворка Express. Также рассматривается работа с файловой системой, базой данных, отладка NodeJS-приложений и работа с протоколом WebSocket.
от Middle
13 500 ₽
WEB-021
30 часов
Разработка на Angular
В данном курсе слушатели получат представление о фреймворке Angular 9, его использовании для разработки полномасштабных веб-приложений. Курс включает в себя изучение языка TypeScript, NoSQL базы данных MongoDb, сервера NodeJS, основ сборки JavaScript приложений. В курсе подробно изучаются создание и использование компонентов, директив, сервисов, работа с формами, маршрутизацией. Также рассматривается библиотека RxJS и ее применение совместно с Angular. Предлагаются практические упражнения по каждой теме.
от Middle
37 900 ₽
Наши ученики работают в:
Наши клиенты
