Интерактивность на HTML-страницах. Реакция на действия пользователя Переход по гиперссылке Click мышки на объекте Элементы форм Произвольные события,

Презентация:



Advertisements
Похожие презентации
Каскадные таблицы стилей CSS Блоковая модель. Синтаксис CSS.
Advertisements

Программирование в Mozilla По материалам сайта. Добавление Javascript в XUL-страницы Добавление страниц с текстом на Javascript происходит точно так же,
Объектная модель документа. Динамический HTML Делает страницу интерактивной Вместо дополнительных запросов к серверу на действия пользователя реагирует.
Объектная модель документа. Динамический HTML Делает страницу интерактивной Вместо дополнительных запросов к серверу на действия пользователя реагирует.
Лекция 8 Обработка событий. Примеры привязки обработчиков событий Привязка с помощью атрибута обработчика: ; Информация о модели DOM консорциума W3C Привязка.
JavaScript Лекция 8. JavaScript JavaScript - новый язык для составления скриптов, разработанный фирмой Netscape. С помощью JavaScript можно легко создавать.
Слои «Создание Web-сайтов». Тэг-контейнер для создания слоя Содержимое слоя.
CSS Cascading Style Sheet. CSS это правила как должен выглядеть HTML. Существуют три типа правил CSS 1. HTML селектор - текстовая часть HTML тэга. P селектор.
Стиль маркера list-style-type: circle | … | none | inherit Маркированный список circle маркер в виде кружка; disc маркер в виде точки; square маркер в.
ВОПРОСЫ: 1. Позиционирование 2. Иерархия кода страницы 3. Абсолютное позиционирование 4. Относительное позиционирование 5. Смешанное позиционирование.
ТЕКСТОВЫЙ РЕДАКТОР. Тест.. 1. Текстовый редактор - программа, предназначенная для А. создания, редактирования и форматирования текстовой информации; Б.
4.3 Каскадные таблицы стилей. Каскадные таблицы стилей (Cascading Style Sheets, CSS) способ оформления страниц HTML, позволяющий с помощью параметров.
Интернет- технологии МИИГаИК. Указание XML-документов в ориентире на будущее
Скажи мне, я забуду. Покажи мне, я могу запомнить. Позволь мне сделать самому это, и это станет моим навсегда" "Скажи мне, я забуду. Покажи мне, я могу.
CSS Cascading Style Sheets. Структура css селектор { свойство1: значение1; свойство2: значение2; }
Click to edit Master title style IDK1011 Основы программирования События и их обработка.
Форматирование текста на Web- странице. Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! Структура HTML-документа.
Тема «Клавиатура. Группы клавиш» Клавиатура компьютерное устройство, которое располагается перед экраном дисплея и служит для набора текстов и управления.
Учебный курс Введение в HTML и CSS Лекция 6 Текст и списки. Позиционирование кандидат технических наук Павел Брониславович Храмцов
Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! Структура HTML-документа.
Транксрипт:

Интерактивность на HTML-страницах

Реакция на действия пользователя Переход по гиперссылке Click мышки на объекте Элементы форм Произвольные события, вызванные мышкой и клавиатурой

Изменение содержимого Загрузка новой страницы Замена картинки Изменение стилевых свойств элемента Перемещение элементов Произвольное изменение содержимого некоторого элемента

Изменение стилевых свойств Выделение фрагментов Перемещение

Изменение видимости Свойство visibility hidden Свойство display none

Позиционирование элементов Свойство position relative – задаёт точку отсчёта координат и координаты самого элемента считаются от этой точки. absolute – назначает отсчёт от предыдущей (внешней) точки. Из нормального потока элементов изымаются. fixed – то же, что absolute, но не прокручивается static – обычное позиционирование

Работа с объектом event В FireFox event доступен только в момент самого события В IE после события Корректный код: function action(e){ alert(e.type); }

Работа с объектом event Обработка нажатий клавиш function getKey(e){ alert(e.keyCode); // alert(e.charCode); - in FF } text

Работа с объектом event Обработка нажатий мышки. Определение координат. Разместить элемент, координаты которого необходимо определить, в элементе, для которого position=relative или absolute Сделать, чтобы поля элемента были фиксированными Использовать разные методы для IE и FF

Работа с объектом event IEFireFox x, y+- offsetX, offsetY+- screenX, screenY++ clientX, clientY++ pageX, pageY-+ layerX, layerY-+

Изменение содержимого элемента innerText innerHTML outerHTML