Что Вы будете изучать
Данный курс научит Вас тому, как кодировать программную логику в веб-приложениях, используя JavaScript, а также, как создавать страницы HTML5, чтобы разобрать и отправить данные c использованием формата HTML5. Помимо этого - создавать и изменять Объектную модель документа ( Document Object Model - DOM), создавать быстро реагирующие слои с CSS3, сохранять локальные данные с JSON и “рисовать” на HTML5 холсте (HTML5 canvas). Студенты смогут добавить интерактивность к веб-страницам, получая при этом необходимый практический опыт, применить динамические данные, используя AJAX, REST и WebSocket с JavaScript.
После успешного окончания курса вы сможете:
Кодировать логику приложения с использованием JavaScript для управления взаимодействиями с пользователем и управления данными
Создавать приложения с HTML5 формами для передачи данных сервисам
Отлаживать и проверять веб-приложения и стили с использованием инструментария браузеров
Создавать шаблоны оформления и стандарты, используя CSS и JavaScript, которые адаптируются к различным устройствам, включая мобильные
Использовать механизмы Media Queries и Responsive Design
Читать и проверять данные из форм HTML5, используя JavaScript
Разбирать, изменять и проверять данные, используя API Javascript
Добавлять интерактивность в формы HTML5 с использованием механизма событий и изменения DOM
Сохранять и отправлять данные объектов JavaScript в службы, локальные хранилища или через различные страницы и использование элементов HTML5
Использовать механизмы JavaScript Object Notation
Рисовать на холсте ( canvas) HTML5 с использованием JavaScript
Сохранять пользовательские данные в веб-приложениях, используя HTML5 Local Storage
Создавать код JavaScript, чтобы получить и вывести на экран динамические данные от служб REST, используя AJAX
Создавать код JavaScript для взаимодействия с WebSocket при работе в режиме реального времени
Создавать код jQuery для анимации элементов, обработки DOM, событий или ответов AJAX
Преимущества для Вас
Этот курс подготовит любого веб-разработчика с достаточным количеством знаний по JavaScript, HTML5 и CSS3, необходимых для создания сложных и современных сайтов, в том числе для тех, кто надеется участвовать в разработке “front-end” веб-приложений с использованием Java EE.
Необходимые знания
Базовый опыт в любом языке программирования
Базовые знания по концепциям веб-технологий
Цель курса:
Создавать и запускать HTML5 приложения в среде NetBeans
Писать код на языке JavaScript с использованием переменных, объектов, функций и массивов
Создавать формы HTML5, чтобы запросить и обработать информацию
Писать функции JavaScript для событий HTML5
Управлять элементами HTML5 с использованием DOM
Использовать JavaScript API
Сохранять объекты, используя JSON API, Cookies и Local Storage
Стиль HTML документов при наличии CSS3
Использовать Media Queries и медиа-данные, чтобы адаптировать веб-страницу к различным размерам экрана
Создавать замыкания (closures), прототипы и модули в JavaScript
Создавать холст (Canvas), интервалы, взаимодействия вида Drag and Drop и манипуляции мышью в HTML5
Применять AJAX при использовании RESTful Web Services
Идентифицировать требуемые Back-End технологии для REST и WebSocket с Java EE7
Использовать Selectors и манипуляторы DOM для обработки документов с jQuery
Обрабатывать события и ответы сервера AJAX с jQuery
Аудитория курса:
Разработчики приложений
Разработчики
Разработчики форм
Разработчики J2EE
Разработчики Java
Разработчики Java EE
Ведущие специалисты
Технические консультанты
Все материалы по курсу предоставляются на английском языке.
По окончании выдается сертификат Учебного центра РДТЕХ.
Введение
Изучение целей курса. Установка среды.
Основы Веб-приложения
Создание приложений HTML5 в NetBeans. Выполнение страниц HTML и их анализ при помощи средств разработки браузера. Отделение CSS и контента JavaScript от страниц HTML. Выполнение Приложений HTML5 в NetBeans. Практика: Создание Веб-приложения HTML5 с NetBeans 8. Практика: Разделение ресурсов JavaScript и CSS.
Основы JavaScript
Написание кода JavaScript для объявления переменных, объектов, функций и массивов. Создание массивов JavaScript для хранения данных. Определение Объектов JavaScript как хранилищ пары “ключ-значение”. Доступ к свойствам объекта. Практика: Написание кода JavaScript для прохождения тестов в Jasmine.
Сочетание HTML5 и JavaScript в Веб-приложениях
Создание документов HTML5. Создание Форм HTML5 для запроса информации и её обработки. Проверка допустимости форм ввода HTML5 . Написание функций JavaScript для событий HTML5. Управление элементами HTML5 с использованием DOM. Практика: Написание кода JavaScript для изменения элементов документа.
JavaScript API
Проверка пользовательского ввода с помощью JavaScript и регулярных выражений. Обработка нескольких значений с использованием JavaScript Collections. Управление датами с испоьзованием JavaScript Date API. Практика: Создание приложения “meal-divider”. Практика: Расчет общего количества в зависимости от возраста.
Данные Веб-приложения
Преобразование Объектов к виду JSON Strings. Разбор JSON Strings внутри JavaScript Objects. Сохранение Objects при помощи JSON API , Cookies и Local Storage. Практика: Сохранение пользовательского ввода при помощи JSON API и Local Storage. Практика: Восстановление сохраненных данных, в момент загрузки страницы.
Стиль приложений, использующих CSS3 и JavaScript
Применение CSS-стилей к документам HTML. Использование возможностей CSS3 для добавления динамических стилей к элементам с событиями. Использовать Media Queries и медиа-данные, чтобы адаптироваться к различным экранам. Использование JavaScript, для добавления и удаления стилей из элементов. Практика: Написание правил CSS, для установления стилей элементов в документе.
Продвинутый JavaScript
Определение Функций. Создание замыканий (closures) и объяснение компоненты Variable Scope. Написание функций JavaScript в виде модулей. Создание прототипов (Prototypes). Создание взаимодействий вида Drag-and-Drop с использованием JavaScript. Создание таймеров и задержек JavaScript, для получения анимации в HTML. Использование объекта HTML5 Canvas для рисования на страницах. Практики: Создание холста (Canvas), интервалов, Drag and Drop и манипуляции мышью.
AJAX и WebSocket
Использование AJAX с JavaScript для запроса данных от сервера приложений. Применение AJAX при использовании RESTful Web Services . Использование вызовов AJAX для создания взаимодействия вида"Server Push" . Определение альтернатив AJAX для использования в устаревшем коде. Понимание компоненты AJAX Security. Использование компоненты WebSocket, для создания взаимодействия вида Real-time Client/Server. Определение требуемых Back-End технологий для REST и WebSocket с Java EE7. Практики: Создание одностраничного приложения, использующего RESTand a Tic-Tac-Toe Game Client с WebSocket.
Разработка приложений с jQuery
Добавление jQuery и библиотек UI jQuery к вашим проектам. Использование Selectors и манипуляторов DOM для обработки документов. Обработка событий с jQuery. Анимация элементов и применение эффектов в документе. Обработка ответов сервера AJAX.
