Курс розроблений для тих, хто хоче змінити професію і стати високооплачуваним професіоналом. Він підійде для працюючих людей, у яких мало часу.
На цьому курсі ви навчитеся робити справжні проекти, такі ж за рівнем складності, як в індустрії. І будете робити їх правильно, щоб після навчання видавати результат високого рівня, за який компанії готові платити.
програма
Перший тиждень
Розділ 1
Знайомство
Розглянемо схему роботи на інтенсиві, які інструменти знадобляться. Почнемо розбирати основи JavaScript.
Як проходить курс. Організаційні питання.
Організаційні питання.
- огляд проектів.
- Схема роботи на інтенсиві.
- програмування та алгоритми.
- дані.
- Лінійні алгоритми.
- розгалужені алгоритми.
- типи даних.
- оператори.
- приведення типів.
- змінні.
- функції.
- умовні оператори.
Розділ 2
Вбудовані API
Розбираємося зі складними типами даних: масиви і об'єкти, циклічні алгоритми, а також подивимося на вбудовані в JavaScript об'єкти для роботи з вікном браузера, відкритою сторінкою, Dom-елементами і графікою.
Налагодження коду.
Складні типи даних.
РОЗДІЛ 3
DOM
Пробуємо створювати, видаляти, переміщати і управляти Dom-елементами. Опишемо дані, які будемо відображати на сторінці, а потім, за допомогою шаблонів отрисуем їх.
Управління Dom-деревом.
Обробка подій
Розглянемо динамічну взаємодію з користувачем: як зробити так, щоб сторінка почала реагувати на введення тексту у форми, натискання на певні елементи, прокрутки та інше. Заодно спробуємо зробити сторінку більш доступною: як додати правильну роботу з клавіатурою і навіщо це потрібно.
Асинхронність, Event Loop.
Подія.
третій тиждень
Розділ 5
Модулі
Обговоримо принцип DRY (не повторюйся) і як ним користуватися для того, щоб писати менше коду, але при цьому робити більше.
Перетягування.
Робота з мережею
Поглянемо на протокол HTTP і інструменти, які дозволяють робити запити з браузера. Розглянемо, як змінюється взаємодія користувача з сайтом при початку роботи з мережею, що може піти не так і що з цим робити.
Виняток.
Оператор множинного вибору switch.
Протокол HTTP і формати даних.
Розділ 7
Структури даних
Розберемо непопулярну серед фронтенд-розробників тему структур даних. Що таке дані, чому у них є структура, і на доступних прикладах подивимося, як використання структур даних може полегшити розробнику життя.
Контекст функцій.
Розділ 8
Компонентний підхід
Розберемо просунуту роботу з об'єктами, дізнаємося як можна зручним способом створювати велику кількість однакових об'єктів і навіщо це потрібно.
Типізовані об'єкти.
Розділ 9
Вузькі місця в JavaScript
Подивимося на особливості JavaScript, які краще не забувати враховувати при розробці. Заодно поглянемо на додаткові корисні техніки, не розібрані на інтенсиві.
Вбудовані API
Розбираємося зі складними типами даних: масиви і об'єкти, циклічні алгоритми, а також подивимося на вбудовані в JavaScript об'єкти для роботи з вікном браузера, відкритою сторінкою, Dom-елементами і графікою.
Налагодження коду.
Складні типи даних.
- циклічні алгоритми.
- масиви.
- Об'єкти.
- document, елемент для роботи C Dom-деревом.
- canvas, елемент для роботи C програмованою графікою.
РОЗДІЛ 3
DOM
Пробуємо створювати, видаляти, переміщати і управляти Dom-елементами. Опишемо дані, які будемо відображати на сторінці, а потім, за допомогою шаблонів отрисуем їх.
Управління Dom-деревом.
- Dom-дерево: структура.
- Пошук елементів на сторінці.
- Управління атрибутами Dom-елементів.
- переміщення елементів в Dom-дереві.
- управління розміткою: insertAdjacentHTML, innerHTML, textContent.
- Створення Dom-об'єктів.
- рядкова шаблонізація.
- спеціальний тег<template & gt;.
Обробка подій
Розглянемо динамічну взаємодію з користувачем: як зробити так, щоб сторінка почала реагувати на введення тексту у форми, натискання на певні елементи, прокрутки та інше. Заодно спробуємо зробити сторінку більш доступною: як додати правильну роботу з клавіатурою і навіщо це потрібно.
Асинхронність, Event Loop.
Подія.
- обробники подій.
- Об'єкт Event, управління подіями.
- фази подій і делегування.
- клавіатурні події та доступність.
третій тиждень
Розділ 5
Модулі
Обговоримо принцип DRY (не повторюйся) і як ним користуватися для того, щоб писати менше коду, але при цьому робити більше.
Перетягування.
- зміна координат елементів на сторінці.
- Drag and Drop.
- області видимості.
- Глобальна область видимості.
- замикання.
- втрата оточення.
- повторне використання коду, принцип DRY.
- функції як модулі.
- поняття модуля, види модулів.
- інкапсуляція.
- негайно виконуються функції (IIFE).
Робота з мережею
Поглянемо на протокол HTTP і інструменти, які дозволяють робити запити з браузера. Розглянемо, як змінюється взаємодія користувача з сайтом при початку роботи з мережею, що може піти не так і що з цим робити.
Виняток.
Оператор множинного вибору switch.
Протокол HTTP і формати даних.
- XML.
- JSON.
- JSONP.
- Об'єкт XMLHttpRequest.
- обробка помилок у запитах.
Розділ 7
Структури даних
Розберемо непопулярну серед фронтенд-розробників тему структур даних. Що таке дані, чому у них є структура, і на доступних прикладах подивимося, як використання структур даних може полегшити розробнику життя.
Контекст функцій.
- ключове слово this.
- зміна контексту.
- управління масивами: вставка і видалення елементів.
- вибірки з масиву: slice і filter.
- сортування.
- ітератори за масивами.
- згортка масивів: some, every і reduce.
- Оцінка ефективності алгоритмів.
- Пропуск кадрів-тротлінг (throttle).
- усунення дребезга-дебаунс (debounce).
Розділ 8
Компонентний підхід
Розберемо просунуту роботу з об'єктами, дізнаємося як можна зручним способом створювати велику кількість однакових об'єктів і навіщо це потрібно.
Типізовані об'єкти.
- функції-конструктори.
- прототипи.
- ланцюжки прототипів, успадкування.
- поліморфізм, перевизначення методів.
Розділ 9
Вузькі місця в JavaScript
Подивимося на особливості JavaScript, які краще не забувати враховувати при розробці. Заодно поглянемо на додаткові корисні техніки, не розібрані на інтенсиві.
- Необов'язкові крапки з комою.
- підвішування (hoisting) змінних і функцій.
- просунуті техніки програмування.
- регулярні вирази.
- Мініфікація коду.
https://privatelink.de/?https://htmlacademy.ru/intensive/javascript