[Специалист]JavaScript. Уровень 2. Расширенные возможности Год выпуска: 2010 Производитель: Specialist Сайт производителя: http://www.specialist.ru/course/dzhsk-a Автор: Шуйков Сергей Юрьевич Продолжительность: 10 ч. Тип раздаваемого материала: Видеоурок Язык: Русский Описание: Цель курса — дать слушателям навыки программирования функциональных сайтов, сформировать понимание взаимодействия JavaScript и HTML, показать основные приемы получения кроссбраузерного кода. Интерактивное взаимодействие с посетителями — основа успешности любого сайта. Клиентский JavaScript позволяет просматривать увеличенные фотографии, направлять товар в корзину и выполнять другие функции, обеспечивающие взаимодействие сайта с клиентом. Уверенное знание этого языка позволит создавать функциональные сайты, мощные и удобные интерфейсы. По окончании курса Вы получите навыки программирования функциональных сайтов, сформируете понимание взаимодействия JavaScript и HTML, освоите основные приемы получения кроссбраузерного кода.
Модуль 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() для визуальных динамических эффектов
Файлы примеров: отсутствуют
File Name : specialist/22055/1.wmv (Windows Media) Duration: 03:24:06.899
Video : GoToMeeting3, 114 Kbps, 1024 x 768, Aspect Ratio: 1.333
Audio : WMA2, 48.0 Kbps, 1 channel, 44.1 KHz
File Name : specialist/22055/2.wmv (Windows Media) Duration: 02:47:04.007
Video : GoToMeeting3, 122 Kbps, 1024 x 768, Aspect Ratio: 1.333
Audio : WMA2, 48.0 Kbps, 1 channel, 44.1 KHz
File Name : specialist/22055/3.wmv (Windows Media) Duration: 03:08:33.551
Video : GoToMeeting3, 132 Kbps, 1024 x 768, Aspect Ratio: 1.333
Audio : WMA2, 48.0 Kbps, 1 channel, 44.1 KHz
