JavaScript. Уровень 2. Расширенные возможности: Вебинар

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

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

Программа:
Модуль 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))
• Работа с таблицами стилей (элементы для внешних таблиц (linking) и для встроенных таблиц (ebbedding))
• Методы экземпляров RegExp и String для поиска с использованием шаблонов
• Лабораторная работа: Динамическое создание таблицы (модификация примера из 2-го модуля курса «Базовый JavaScript»)
• Лабораторная работа: Поиск элементов страницы и манипуляции с ними
• Лабораторная работа:
• Построение списка со ссылками из массива
• Лабораторная работа:
• Изменение внешнего вида посредством работы с таблицами стилей

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

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

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

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