Язык программирования JavaScript разработан для добавления интерактивности в интерфейс пользователя. Изменение состояние элементов позволяет в полной мере создавать динамические макеты сайтов.
Также язык JavaScript помогает при работе над автоматизацией задач, автоматическому добавлению расширений и готовых решений из сторонних источников.
Автоматизация позволяет минимизировать временные затраты на выполнение стандартных задач процесса веб-разработки, позволяет создавать более универсальных код, который компилируется в один или несколько различных релизов.
Данный курс предназначен для добавления интерактивности в интерфейс и освоения слушателями основ автоматизации процессов разработки веб-приложений.
Целью дисциплины является изучение принципов работы с языком JavaScript системами контроля версий, использование возможностей программных средств для управления пакетами, описание и запуск часто повторяемых задач, работа с препроцессорами и постпроцессорами.
Знания и умения, полученные в результате изучения
В результате обучения слушатели будут
Знать:
- логику работы с языком JavaScript;
- принципы работы с системами контроля версий;
- приемы работы с git в командной строке;
- принципы работы с препроцессорами и постпроцессорами;
- приемы управления автоматизацией часто выполняемых задач;
- приемы разработки в режиме «непрерывной интеграции».
Уметь:
- добавлять в интерфейс пользователя интерактивные элементы;
- менять состояние элементов посредством JavaScript;
- устанавливать git, npm, bower, gulp;
- управлять задачами автоматизации;
- создавать код на языке SassScript;
- устанавливать модули npm;
- работать с потоками автоматизации;
- проектировать цепочку автоматизации рабочего процесса от исходного кода проекта до сборки релиза;
- создавать условия изменения сборок при изменении критериев проекта.
Тема 1
Объектная модель документа
- Реализация DOM в разных браузерах.
- Элементы документа, их свойства и методы работы с ними.
- Типы узлов, работа с атрибутами.
Основы JQuery
- Обзор существующих библиотек.
- Загрузка и подключение библиотеки JQuery, версии, документация по библиотеке.
- Структура библиотеки.
- Обработчик готовности документа.
Выбор элементов документа
- Базовые селекторы.
- Селекторы выбора потомков, контейнеров и атрибутов.
- Селекторы выбора элементов по расположению в дереве DOM.
- Применение фильтров.
Тема 2
Доступ к атрибутам элементов
- Добавление, удаление и изменение классов и атрибутов.
- Изменение сss свойств элемента. Позиционирование и масштабирование элемента.
Работа с содержимым элемента
- Замена html-разметки или текста.
- Перемещение, копирование, удаление элементов.
События
- Основные события, поддерживаемые JQuery.
- Подключение обработчиков событий. Методы bind(),one(), unbind().
- Динамические обработчики событий. Методы live(), die().
- Задание callback-функций, вызываемых при наступлении события.
Тема 3
Базовые эффекты и анимация
- Скрытие и отображение элементов.
- Переключение состояния отображения метод toggle.
- Постепенное скрытие и отображение элементов.
- Остановка анимационных эффектов.
- Создание анимационных эффектов: масштабирование, эффект падения.
Тема 4
Пользовательские интерфейсы JQuery
- Библиотека JQuery UI. Загрузка и использование.
- Темы оформления JQuery UI.
Эффекты JQuery UI
- Применение виджетов.
- Применение готовых и создание собственных стилевых тем. Разработка слайдера. Progressbar.
- Репозиторий плагинов. Загрузка и подключение плагинов.
Плагины JQuery
- Взаимодействие JQuery UI с мышью.
- Перетаскивание элементов мышью.
- Упорядочивание элементов.
- Изменение размеров элементов.
Новейшие решения
- Формы.
- Меню.
- Интерактивные галереи.
Тема 5
- Установка и запуск git.
- Работа в консоли.
- Создание локального и внешнего репозитория.
- Управление коммитами и ветками проекта.
Тема 6
- Установка компилятора для препроцессоров.
- Сравнение less, sass и scss.
- Основы SassScript.
- Работа с переменными. Область видимости.
Тема 7
- less, sass и scss типы данных, операции, функции.
- Автоматизация стилевых описаний для фронтенд разработки.
- Создание функций.
- Работа с циклами и условиями.
Тема 8
- Установка gulp и дополнительных модулей.
- Проектирование задач автоматизации.
- Создание файла gulpfile.js.
- Итеративное улучшение потока задач, работа с pipe.
- Инкрементальная сборка, watch.
Тема 9
- Установка менеджеров пакетов.
- Создание множественных сборок проекта с вариативными частями.
- Публикация кода в репозитории. Потоковая загрузка файлов на конечный сервер.
- Тестирование кода. Создание сборки для отладки разработчиком и формирование финального релиза.