✔ На уроках курса «JavaScript (ECMA часть 2). Основы создания интерфейса сайта »вы получите навыки написания и профессионального использования скриптов сайта на JavaScript. Вы узнаете, как взаимодействуют JavaScript и HTML, изучите основные приемы получения кросс-браузерного кода.
✔ Быстрый отклик страницы сайта на любое действие пользователя - один из главных успехов и отличный бонус в конкурентоспособности веб-проекта.
Клиентский JavaScript предоставляет возможность выполнять различные функции, повышающие качество взаимодействия сайта с клиентом.
✔ Хорошее знание этого языка позволит вам создавать интерактивные сайты.
✔ Успешно завершив курсы, вы сможете писать коды для сайтов на JavaScript, понимать, как взаимодействуют JavaScript и HTML, вы изучите основные методы получения кроссбраузерного кода.
По окончании курса Вы будете уметь:
- Взаимодействовать с составляющими браузера
- Просматривать структуру документа различными методами
- Создавать, удалять, добавлять и изменять различные элементы html
- Заходить в свойства элементов и менять их
- Заходить в стилистические свойства и менять их
- Обрабатывать события браузера
- Создавать и менять динамические компоненты такие как выпадающее меню, слайдер, динамический поиск
- Создавать скрипты для адоптивной страницы под различные устройства
- Создавать интерактивные элементы и простые игры
Преподаватели курса
Предварительная подготовка
Обязательная - JavaScript (ECMA_часть_1). Основы языка и среда разработки или эквивалентная подготовка
Получить консультацию о необходимой предварительной подготовке по курсу Вы можете по тел. 079 844 644
Программа курса
JavaScript. Окружение Browser
- Объекты окружения браузера
- Объектная модель браузера DOM
- Объектная модель документа DOM
- Основные объекты DOM
- Взаимодействие с DOM, применение
- Практическая работа
DOM иерархия
- Дерево DOM
- Валидация и авто исправление кода, что важно учесть
- Возможности DOM
- Основные объекты DOM
- Типы объектов DOM
- Особенности старых браузеров
- Просмотр DOM при помощи консоли
- Быстрый доступ к элементам
- Типы элементов
- Объект document
- Свойства объекта document
- Быстрый доступ к определенным наборам элементов в document
- Важность момента запуска скрипта и порядок элементов в DOM
- Практическая работа
Элементы и узлы DOM
- Узлы
- Текстовые узлы
- Элементы
- Классы объектов DOM
- Навигация по узлам
- HTML элементы и их типы
- Коллекции элементов
- Доступ к наследникам
- Родительский элемент
- Соседние элементы
- Доступ к свойствам
- Универсальные свойства
- Свойства популярных элементов
- Особенности старых браузеров
- Новые атрибуты HTML5
- Что такое полифилы, пример создания
- Практическая работа
Поиск элементов в DOM
- Функции поиска и возвращаемые значения
- Типы возвращаемых элементов
- Собственные функции поиска
- Функции поиска по формулам CSS
- Современные функции поиска, совместимость
- Поиск при помощи XPath
- Особенности поиска в разных браузерах
- Оптимизация поиска, советы
- Практическая работа
Управление узлами и элементами DOM
- Управление текстовым контентом узлов
- Управление внутренним HTML-ем элементов
- Управление свойствами элементов HTML
- Добавление и удаление элементов
- Добавление и удаление свойств
- Особенности старых браузеров
- Управление элементами в модерн браузерах
- Практическая работа
События
- Что такое событие
- Как появляются браузерные события
- Типы событий, область видимости
- Порядок обработки событий
- Всплытие и перехват события
- Объект Event, структура
- Свойства и методы События
- Действия по умолчанию
- Понятие callback или Event Handler, обработчика
- Подключение, прослушивание событий
- Передача события обработчику
- Добавление и удаление callback-ов
- Как генерировать событие
- Делегирование событий
- Классификация событий и их применение
- События и современные устройства
- Практическая работа
Свойства CSS, стили
- Синтаксис CSS в JavaScript
- Доступ к свойствам композитного стиля
- Доступ к встроенному стилю
- Доступ к унаследованным стилям
- Доступ к свойствам из внешней таблицы стилей
- Изменение свойств стиля
- Клонирование, копирование, удаление свойств стиля
- Чего следует избегать
- Система координат браузера и метрика позиционирования
- Практическая работа
Локальное хранилище
- Методы для хранения данных в браузере
- Cookies
- SessionStorage
- LocalStorage
- Функции для чтения, записи и модификации
- Создание локальных записей
- Преимущества локального хранения данных
- Применение локального хранения данных браузера
- Практическая работа
Таймер
- Функции таймера
- Установка, прекращение таймера
- События таймера
- Практическая работа
Создание анимации
- Принципы создания анимации
- Анимация CSS3 или JavaScript, сравнение
- Ключевые кадры
- Функции "сглаживания"
- Продолжительность и задержка
- Анализ и оптимизация производительности
- Принципы создания слайдера JavaScript / HTML / CSS
- Практическая работа
Графика, HTML5 Canvas
- Canvas, обзор
- Canvas или Flash, сравнение
- Режимы рисования
- Основные графические функции
- Принципы работы 2D / 3D
- Принципы создания простой анимации
- Практическая работа
Взаимодействие с сервером, AJAX
- Обзор AJAX
- Методы обмена данными
- Заголовки и ответы сервера
- Формат обмена и тип MIME
- Объект XHR, свойства и методы
- Как применять XHR
- Что такое XSS
- Защита от спама, трюки
- Практическая работа