русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

HTML события | Объекты в html

ОГЛАВЛЕНИЕ

1 Доступ к свойствам объектов на HTML на Web-странице с помощью языка JavaScript
2 Обработка событий на Web-странице
Пример 1

1 Доступ к свойствам объектов на HTML на Web-странице с помощью языка JavaScript

В соответствии с объектной моделью документа DOM (Document Object Model), которая поддерживается языком JavaScript, все тэги Web-страницы являются объектами и помещены в коллекцию (набор), которая называется document.all, с возможностью программного доступа к любому из них для определения или изменения их свойств.

Наиболее простым способом доступа к объекту на Web-странице является доступ по его идентификатору. В этом случае может применяться одна из трех форм:

  • document.all("идентификатор").свойство;
  • document.getElementById("идентификатор").свойство;
  • идентификатор.свойство,
где

идентификатор - это идентификатор тэга, заданный с помощью параметра ID , например <P ID="txt">. Для тех тэгов, для которых допускается использование параметра NAME, например, таких как <IMG>, <A>, а также элементов тэга <FORM>, в качестве идентификатора вместо параметра ID можно использовать параметр NAME: <IMG NAME="img1" . . . >.

Третья форма доступа к тэгу является наиболее простой, ее поддерживает браузер Microsoft Internet Explorer, и мы в дальнейшем в основном будем использовать этот подход. К его недостаткам следует отнести то, что далеко не все браузеры поддерживают эту форму доступа. Если необходимо добиться того, чтобы Web-страница была правильно обработана любым браузером, лучше воспользоваться второй, более универсальной формой.

Необходимо обратить внимание на различие в двух вариантах обозначения имени тэга: в кавычках - "идентификатор" и без кавычек - идентификатор. Имя идентификатора тэга в кавычках имеет строковый тип и задает именно идентификатор тэга, тогда как имя идентификатора тэга без кавычек имеет тип объекта и задает сам тэг, как объект.

Использование всех трех способов доступа к тегам <H1> и <IMG> приведено в примере № 1.

Свойство - это или HTML-наименование параметра тэга, или наименование свойства CSS, заданного для этого тэга. В последнем случает используется следующее правило указания свойств CSS на языке JavaScript: если свойство CSS состоит из нескольких слов, записанных через дефис, то в обозначении свойства для JavaScript все знаки дефиса убираются, первое слово свойства пишется с прописной буквы, а второе слово и последующие слова свойства пишутся с заглавной буквы. Например, свойство CSS font-size на JavaScript будет выглядеть так: fontSize, а свойство CSS list-style-image:url(URL) так: listStyleImage="url(URL)".
Использование свойств CSS в JavaScript приведено в примере № 1.

Оглавление

2 Обработка событий в HTML на Web-странице

К событиям на Web-странице относятся как действия пользователя, связанные с работой с мышью и клавиатурой, так и действия браузера, связанные с загрузкой, выгрузкой Web-страниц и др.

JavaScript поддерживает следующие обработчики событий:

  • onMouseover - вызывается по событию Mouseover : наведение указателя мыши на объект;
  • onMouseout - вызывается по событию Mouseout: указатель мыши снимается с объекта:
  • onMousemove - вызывается по событию Mousemove: указатель мыши помещается на объект или двигается по объекту;
  • onClick - вызывается по событию Click: щелчок (нажатие левой клавиши мыши);
  • onDblclick - вызывается по событию Dblclick: двойной щелчок;
  • onContextmenu - вызывается по событию Contextmenu: нажатие правой клавиши мыши;
  • onKeydown - вызывается по событию Keydown: нажатие клавиши клавиатуры;
  • onKeypress - вызывается по событию Keypress: нажатие и удерживание клавиши клавиатуры;
  • onKeyup - вызывается по событию Keyup: отжатие клавиши клавиатуры;
  • onLoad - вызывается по событию Load: загрузка Web-страницы;
  • onUnload - вызывается по событию Unload: выгрузка Web-страницы;
  • onHelp - вызывается по событию Help: нажатие клавиши помощи F1;
  • onFocus - вызывается по событию Focus: установка фокуса поля (при щелчке мыши по полю);
  • onBlur - вызывается по событию Blur: снятие фокуса.

Для обработки события в языке JavaScript используется такая конструкция:
Обработчик события="действия по обработке события",
где Обработчик события - это один из перечисленных выше обработчиков событий; действия по обработке события - это или вызов функции, или встроенный фрагмент программы на JavaScript.
Эта конструкция помещается в тот тэг, параметры которого должны быть изменены при совершении события, связанного с работой мыши. Обработчики событий, связанных с нажатием клавиш клавиатуры или с работой браузера, помещаются в тэг <BODY>.
При обработке событий, касающихся клавиатуры, определить ASCII-код (точнее Unicode) нажатой или отжатой клавиши можно так:
event.keyCode.

Для определения самого символа используется следующий метод объекта String: String.fromCharCode(Unicode).
В примере № 1 показано применение двух функций - changeHeader() и restoreHeader().

Первая из них вызывается по наведению мыши на заголовок "ЗАГОЛОВОК ПАРАГРАФА" (тэг <H1 ID="hd"> со значением идентификатора, равным "hd") и изменяет некоторые его свойства: используя параметр HTML ALIGN выравнивает по центру экрана, используя свойство CSS - увеличивает в два раза размер, меняет цвет, жирность и наклон. Кроме того эта функция задает фон в виде рисунка, изменяя параметр BACKGROUND тэга <BODY>.

Вторая функция восстанавливает исходные свойства фона и заголовка при снятии с него указателя мыши.
Для того, чтобы сделать программу более компактной в функции restoreHeader() применяется оператор with.


Пример 1


<HTML>
<HEAD>
<TITLE> Изменение свойств объектов в HTML на Web-странице </TITLE>
<SCRIPT>
n=9;
function changeTag(hd) // Изменение свойств заголовка и рисунка
{
switch (hd) {
case head: {
bod.background="back.gif";
hd.align="center";
document.getElementById("head").style.color="#00F";
document.all("head").style.fontSize=2*n+"mm"; // 18 mm
hd.style.fontWeight="normal";
hd.style.fontStyle="italic";
break; }
case image: {
hd.width=300;
break; }
}
}
function restoreTag(hd) // Восстановление свойств заголовка и рисунка
{
bod.background="";
hd.align="left";
with (hd.style) {
color="black";
fontSize="9mm";
fontWeight="bold";
fontStyle="normal";
}
hd.width="50";
}
</SCRIPT>
</HEAD>
<BODY ID="bod">
<H1 ID="head" onMouseover="changeTag(head)"
onMouseout="restoreTag(head)"> ЗАГОЛОВОК ТЕКСТА </H1>
<IMG name="image" src="fish.gif"
onMouseover="changeTag(this)"
onMouseout="restoreTag(this)">
</BODY>
</HTML>

Оглавление

Просмотров: 18318

Вы можете --> заказать сайт - полноценный или в качестве обучения для студентов.

Вернуться воглавление


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.