ПРОГРАММА КУРСА
"Web-разработка для детей и подростков. Углубленный уровень"
Количество занятий: 20
Занятие 1. Введение в JavaScript
  • Способы подключения скрипта. Структура кода. Режим «use strict». Константы, переменные и литералы. Ключевые слова let, const, var. Типы данных: число, строка, логический тип, значения «null» и «undefined», объекты и символы. Оператор typeof. Преобразования типов.
  • Операторы и операнды. Унарный и бинарный операторы. Приоритет операторов. Присваивание. Инкремент/декремент. Операторы сравнения.
Занятие 2. Взаимодействие с пользователем. Ветвления и циклы
  • Методы взаимодействия: alert, prompt, confirm, document.write. Условный оператор if и тернарный оператор '?'. Логические операторы. Конструкция «switch».
  • Циклы for, while, do…while.
Занятие 3. Редакторы кода. Консоль разработчика
  • Редактор кода Visual Studio Code. Настройки редактора. Рабочая область редактора. Разделение экрана. Работа с проектами. Режим просмотра. Работа с терминалом. Базовые операции командной строки. Установка и настройка плагинов. Плагин быстрого набора кода Emmet.
  • Консоль разработчика и отладка кода в браузере Chrome.
Занятие 4. Функции
  • Объявление функции: Function Declaration и Function Expression. Области видимости переменных: глобальные (внешние) и локальные переменные. Параметры функции. Возврат значения. Рекурсия. Замыкания. Выбор названия функции. Принцип: одна функция – одно действие. Функции высшего порядка и callback-функции. Конструктор функций.
  • Функции-стрелки. Многострочные стрелочные функции.
Занятие 5. Массивы и методы массивов
  • Объявление массива. Внутреннее устройство и эффективность массива. Перебор элементов с помощью for, for…of и forEach. Свойство length. Отрицательные индексы. Многомерные массивы. Метод toString.
  • Методы начала массива: shift, unshift. Методы конца массива: pop, push. Добавление, удаление и замена элементов массива – метод splice. Копирование элементов массива – методы slice, concat. Поиск в массиве – методы indexOf/lastIndexOf, includes, find и findIndex, filter.
  • Преобразования и упорядочения массива – методы map, sort, reverse, split и join, reduce/reduceRight и др.
Занятие 6. Работа со строками
  • Методы indexOf, lastIndexOf, substring, escape, unescape, eval. Свойство length. Регулярные выражения.
Занятие 7. Объекты
  • Объекты JavaScript, объекты браузера и пользователя. Создание объектов. Свойства и методы объектов. Ключевое слово this. Операции с объектами. Доступ к свойству через точку, квадратные скобки, переменную. Вычисляемые свойства. Методы call, apply, bind.
  • Объекты как ассоциативные массивы. Объявление объекта со свойствами: пары ключ-значение. Проверка существования свойства. Перебор и подсчет свойств: цикл for…in. Передача изменений по ссылке. Клонирование объектов. Метод delete. Сериализация объектов – методы JSON.stringify и JSON.parse.
  • Объекты Number, String, Boolean и др. Методы объекта Math. Методы объекта Date.
  • Модули в JavaScript. Директивы export и import.
Занятие 8. Объектно-ориентированное программирование
  • Классы. Функциональный и прототипный стили. Конструктор объектов. Внутренний (приватный) и внешний (публичный) интерфейсы. Наследование.
Занятие 9. Браузерное окружение. DOM (Document Object Model) – объектная модель документа
  • Программный интерфейс DOM. Методы поиска элементов HTML: по идентификатору – getElementById, по имени тега – getElementsByTagName, по имени класса – getElementsByClassName, по CSS селекторам – querySelectorAll, getComputedStyle и др.
  • Методы изменения элементов HTML и CSS: внутреннего содержимого – innerHTML, значения атрибута – setAttribute, стиля элемента – style, cssText, classList и др. Принцип именования свойств CSS в JavaScript.
  • Методы добавления и удаления элементов HTML: создание – createElement, удаление – removeChild, добавление – appendChild, замена – replaceChild и др.
  • Навигация по узлам. Работа с узлами. Наборы элементов. Списки узлов.
  • События и реагирования на события (обработчики событий). События объектов браузера. События мыши. Клавиатурные события и др. Атрибуты событий. События выбранного элемента. Метод addEventListener.
  • Анимация в JavaScript: методы setInterval, setTimeout, clearInterval, clearTimeout.
Занятие 10. Браузерное окружение. BOM (Browser Object Model) – объектная модель браузера
  • Свойства/методы объектов window, document, screen, location, history, navigator, event.
  • Выбор элементов по коллекции document: images, links, forms.
  • Хранение пользовательской информации в веб-страницах – cookies.
Занятие 11. Взаимодействие с сервером
  • HTTP-запросы. JavaScript AJAX. JavaScript Object Notation (JSON).
  • Серверная платформа JavaScript – Node.js.
Занятие 12. Adobe Photoshop для создания макета web-приложения
  • Разработка структуры и функционала web-приложения.
  • Модульная сетка. Работа с направляющими. Работа со слоями.
  • Создание секций web-приложения: меню, слайдер изображений, панели, карточки товаров и услуг, фильтры, формы.
  • Сохранение макета в формате psd.
Занятие 13. Adobe Illustrator для создания элементов flat-дизайна
  • Интерфейс редактора. Работа с web-шаблонами.
  • Рабочая и монтажная области. Масштабирование.
  • Панели инструментов и плавающие палитры.
  • Добавление эскиза и рисование объектов.
  • Обводка и заливка. Трансформации.
  • Сохранение рисунка для веб в формате svg.
Занятие 14. HTML5 для JavaScript-разработчика
  • Структура HTML-документа.
  • Cписки, изображения, гиперссылки, цвета.
  • Работа с таблицами и формами HTML.
  • Вставка аудио и видеоматериалов HTML.
Занятие 15. CSS3 для JavaScript-разработчика
  • Способы подключения CSS. Синтаксис и элементы стилей.
  • Виды селекторов: тега, класса, идентификатора, потомка, дочерний, братский, атрибута, псевдокласса, псевдоэлемента, структурных псевдоклассов, универсальный.
  • Комбинирование и группирование селекторов, переменные в CSS.
  • Наследование и каскадирование селекторов.
  • Использование CSS-медиазапросов для адаптивного дизайна.
  • Анимация и трансформация в CSS. Градиенты, рамки, тени, переходы, фильтры.
  • Использование препроцессоров и постпроцессоров - вендорных префиксов. CSS-фреймворки.
Занятие 16. Модели верстки web-приложения для JavaScript-разработчика
  • Семантические элементы HTML5.
  • Блочный элемент <div>. Строчный элемент <span>.
  • Блочная модель: контейнеры и обертки. Свойства width, height, margin, border, padding. Тип контейнера элемента – свойство display. Область блочного элемента – свойство box-sizing. Позиционирование элементов - свойство position. Переполнение блочного элемента - свойство overflow. Наложение элементов - свойство z-index. Плавающие блоки - свойство float и clear. CSS-спрайты - свойство background-position.
  • Компоновка элементов с помощью модели CSS Flexbox.
  • Компоновка элементов с помощью модели CSS Grid.
Занятие 17. Библиотека jQuery
  • Быстрое получение и изменение атрибутов и содержимого элементов DOM.
  • Добавление и удаление элементов.
  • Управление событиями.
  • Создание анимационных эффектов.
  • Выполнение AJAX-запросов.
  • Использование плагинов.
Занятие 18. HTML5 JavaScript API (Application Programming Interface) - интерфейс прикладного программирования
  • Понятие API. API браузера. Сторонние API.
  • API форм (Form API). Интерфейс HTMLFormElement. Свойства элемента form - name, action, method, enctype. Методы form – submit, reset. Выбор формы по коллекции forms и по значению атрибута name. Выбор элементов по коллекции elements. Элементы <input> с полем ввода текста. Проверка формы с помощью метода setCustomValidity(). Псевдоклассы :focus, :invalid, :valid, :required, :optional. Элементы <input> с выбором значения. Валидация радиокнопок и чекбоксов. Другие элементы формы. События focus/blur.
  • API перетаскивания (Drug&Drop API). События источника - dragstart, drag, dragend. События целевого элемента - dragenter, dragover, drop, dragleave. Примеры перетаскивания одного элемента в другой; полного перетаскивания; выбора источника для перетаскивания; выбора позиции относительно указателя мыши; перетаскивание файлов из внешних источников.
  • API геолокации (Geolocation API). Определение и слежение за местоположением. Методы getCurrentPosition, watchPosition, clearWatch. Подключение Google-карт и Яндекс-карт.
  • API Видео и аудио (Video and audio APIs). Свойства, методы и события для программирования интерактивного плейера.
  • API web-хранилища (Web Storage API) - развитие технологии cookies.
  • API холст (Canvas API). Создания графики с помощью JavaScript: цветной прямоугольник, линии и пути, квадратичная и кубическая кривые Безье, линейный и радиальный градиенты, работа с текстом, создание тени, вставка изображений (обычных, с измененными размерами, кадрированных, шаблоны изображений), трансформация элементов, сохранение и восстановление состояния настроек, наложения элементов. Обработка видео. Библиотеки для работы с графикой - Paper.JS, Fabric.JS, Kinetic.JS и др.
Занятие 19. Введение в JavaScript-фреймворк Google Angular 2
  • Установка фреймворка.
  • Создание модуля.
  • Создание компонента.
  • Директивы в Angular 2.
  • Привязка данных.
  • Особенности языка TypeScript.
  • Работа с формами.
Занятие 20. Material Design в Angular 2. Создание приложения
  • Установка и подключение Material Design.
  • Создание панелей (toolbar).
  • Создание спиннера.
  • Создание кнопок и иконок.
  • Создание меню.
  • Создание карточки.
  • Создание кнопки-переключателя c фильтрацией и др.
  • Создание web-приложения в Angular 2: создание компонент, добавление интерактивных элементов, программирование взаимодействия.