Цель курса — дать слушателям навыки программирования функциональных сайтов, сформировать понимание взаимодействия JavaScript и HTML, показать основные приемы получения кроссбраузерного кода.

Интерактивное взаимодействие с посетителями — основа успешности любого сайта. Клиентский JavaScript позволяет просматривать увеличенные фотографии, направлять товар в корзину и выполнять другие функции, обеспечивающие взаимодействие сайта с клиентом. Уверенное знание этого языка позволит создавать функциональные сайты, мощные и удобные интерфейсы. По окончании курса Вы получите навыки программирования функциональных сайтов, сформируете понимание взаимодействия JavaScript и HTML, освоите основные приемы получения кроссбраузерного кода.

По окончании курса Вы будете уметь:

Твердые знания базового языка JavaScript и DOM
Понимание возможностей JavaScript для манипуляции с HTML-страницами
Умение управлять HTML-страницами с помощью JavaScript

Продолжительность курса - 24 ак. ч.

Модуль 1. Глобальный объект Window

DOM как связь базового JavaScript и HTML страницы
Краткая история развития DOM, текущая версия (2)
Глобальный объект Window, его свойства и методы
Объекты, доступные как свойства Window, их свойства и методы:
location
history
navigator
screen
document
Лабораторная работа: Использование методов prompt(), confirm(), alert() для задания условия выполнения действий и информирования пользователя
Лабораторная работа: Отложенный вызов кода (setTimeout(), setInterval()), использование методов для счетчиков времени
Лабораторная работа: Открытие окна, работа с его положением, получение и потеря фокуса, скроллирование, закрытие окна
Лабораторная работа: Отслеживание свойства closed открытого окна, взаимодействие окон с помощью переменной и свойства opener
window.frames[] и понятие HTML коллекции
Взаимодействие окон (глобальных объектов) во фреймовой структуре
Лабораторная работа: Работа с переменными в разных окнах (top, parent, self), закрепление понимания, что глобальные переменные - свойства объекта window, глобальные функции - методы этого объекта

Модуль 2. Объект Document, базовая модель событий

Свойства и методы объекта Document
Доступ к отдельным элементам страницы с помощью свойств объекта Document:
body
title
forms
images
links
anchors
applets
embeds
Доступ к атрибутам элементов страницы
Способ сохранения информации для посещенной страницы – cookie
Лабораторная работа: Модификация работы по открытию окна: добавление формирования содержимого
Лабораторная работа: Чтение и запись cookie
Базовая или исходная модель событий
Список событий и элементы страницы, где они могут возникнуть
Применение кода в качестве обработчика события
Вызов функций в значении атрибута
Регистрация функций-обработчиков в качестве свойства элемента, ключевое слово this
Передача ссылок на событие и элемент, в котором оно возникло
Лабораторная работа: Регистрация обработчиков событий в HTML коде, недостатки этого способа
Лабораторная работа: Регистрация обработчиков событий в коде скрипта, передача ссылки на событие

Модуль 3. Отдельные HTML элементы и работа с ними

Таблицы и ее элементы
Свойства и методы таблицы, ее элементов
Лабораторная работа: Динамическое создание таблицы (модификация примера из 2 модуля курса «Базовый JavaScript»)
Формы и элементы управления
Свойства и методы формы, ее элементов
События, связанные с формой и ее элементами
Лабораторная работа: Правильная организация формы, ее проверка перед отправкой, фильтрация ввода с клавиатуры
Изображения
Свойства изображений
События, связанные с изображениями
Лабораторная работа: Динамическое создание изображения, организация просмотра увеличенных изображений
 
Модуль 4. Объектная модель документа (DOM)

Реализация W3C DOM различными браузерами
Архитектура DOM, дерево элементов
Типы узлов, работа с атрибутами
Свойства и методы различных типов узлов
Доступ к значению атрибутов через свойства
Работа со встроенными стилями (атрибут style (inline))
Работа с таблицами стилей (элементы <link> для внешних таблиц (linking) и <style> для встроенных таблиц (ebbedding))
Методы экземпляров RegExp и String для поиска с использованием шаблонов
Лабораторная работа: Динамическое создание таблицы (модификация примера из 2-го модуля курса «Базовый JavaScript»)
Лабораторная работа: Поиск элементов страницы и манипуляции с ними
Лабораторная работа:
Построение списка со ссылками из массива
Лабораторная работа:
Изменение внешнего вида посредством работы с таблицами стилей

Модуль 5. Модель событий в объектной модели документа

Отличия целевых элементов для некоторых событий по сравнению с базовой моделью
Модель возникновения, распространения и обработки событий в W3C DOM и IE
Использование всплытия событий для регистрации единственного обработчика, исключения
Свойства события
Кроссбраузерное назначение функций-обработчиков событий
Лабораторная работа: Принципы построения кроссбраузерного служебного кода
Лабораторная работа: Реализация drag'n'drop
Лабораторная работа: Построение раскрывающегося по клику списка 

Модуль 6. Введение в AJAX, нетривиальные примеры работы с HTML страницей

Краткий обзор XML документов и формата JSON
Основные аспекты работы асинхронного запроса
Кроссбраузерный способ организации запроса
Принципы работы с полученным ответом в зависимости от его заголовка (responseText, responseXML)
Лабораторная работа: Работа с ответом в виде JavaScript-кода
Организация сценариев в реальных проектах
Лабораторная работа: Перетаскивание товара в корзину (клонирование элементов и работа с координатами события)
Лабораторная работа: Использование cookie для запоминания состояния элементов (раскрывающегося списка)
Лабораторная работа:  Построение выпадающего списка
Лабораторная работа:  Применение setTimeout(), setInterval() для визуальных динамических эффектов