Основы объектно-ориентированного программирования в JavaScript
События JavaScript
События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие Click. Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный листинг представляет простой пример программы обработки события onClick:
<html>
<body>
<form>
<input type="button" value="Click me" onClick="alert('Привет')">
</form>
</body>
</html>
В приведенном примере функция alert() позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку.
Опишем синтаксис основных событий, использующихся в JavaScript:
- onClick - Вызывается после щелчка левой кнопкой мыши на объекте. <INPUT TYPE="elementType" onClick="function">
- onMouseOver - Событие происходит, когда указатель мыши помещается над гиперссылкой.<A HREF="URL" onMouseOver="function">linkText</A>
- onFocus - Событие происходит в тот момент, когда пользователь переходит к элементу формы select, text или textarea для ввода данных.<INPUT TYPE="inputType" onFocus="function">
- onBlur - Событие происходит в тот момент, когда элемент формы select, text или textarea теряет фокус. <INPUT TYPE="elementType" onBlur="function">
- onSelect - Обработчик события onSelect вызывается в тот момент, когда выделен текст внутри элемента формы.<INPUT TYPE="textType" onSelect="function">
- onSubmit - Событие происходит в момент щелчка мышью на кнопке Submit для посылки данных формы на сервер.<TAG onSubmit="function">
- onLoad - Вызывается, когда загрузка документа в окно или в фрейм закончена.<BODY onLoad="function">, <FRAMESET onLoad="function">
- onUnload - Вызывается, когда пользователь выходит из документа.<BODY onUnload="function">, <FRAMESET onUnload="function">
- onChange - Событие происходит в тот момент, когда значение элемента формы select, text или textarea изменилось и элемент потерял фокус.<INPUT TYPE="elementType" onChange="function">
Приведем некоторые примеры:
< html>
< body>
<A HREF="http://www.newmail.ru" onMouseOver="window.status='Бесплатный хостинг'; return true">Ссылка</A>
<form>
<input type="text" size="30" onFocus="window.status='Текст в строке состояния';">
</ form>
< form>
< input type=" text" size="45" value="Впишите свое имя и щелкните по другой строке" onBlur=" alert('Вы изменили ответ — уверены, что он правильный?');">
</ form>
< form>
< input TYPE=" text" size="45" value="Измените текст и щелкните по другой строке" onChange=" window. status='Текст был изменен';">
</form>
<form>
<input TYPE="submit" onSubmit="parent.location='thanksalot.html'";>
</form></body>
</html>
|
|
|
|
|
|
Классы и объекты JavaScript
В языке JavaScript имеется три типа объектов: встроенные объекты, объекты браузера и объекты, которые программист создает самостоятельно
С точки зрения сценария JavaScript браузер представляется иерархически организованным набором объектов. Обращаясь к свойствам и методам этих объектов можно выполнять различные операции над окном браузера, загруженным в это окно документом HTML, а также над отдельными объектами, размещенными в документе HTML. Например, можно создавать новые окна браузера, загружая в них документы HTML, динамически формировать текст документа HTML, обращаться к полям форм, определенных в документе HTML и так далее.
Объекты браузера являются тем интерфейсом, с помощью которого сценарий JavaScript взаимодействует с пользователем и документом HTML, загруженным в окно браузера, а также с самим браузером. В сценариях JavaScript нельзя создавать новые классы на базе классов, соответствующих этим объектам, однако свойства и методы объектов браузера доступны.
|
|
|
На рисунке схематически показана иерархия объектов браузера.
Объект Window обычно соответствует главному окну браузера и является объектом верхнего уровня в языке JavaScript, поскольку документы, собственно, и открываются в окне. Рассмотрим основные свойства Window:
- defaultStatus - Выводимое по умолчанию сообщение в строке состояния в нижней части окна броузера - [windowName].defaultStatus
- status - Устанавливает текст основного или временного сообщения в строке состояния - [windowName].status.
- frames - Содержит массив фреймов, содержащихся в окне - [windowName.][parent.]frameName,[windowName.][parent.]frames[index]
- name - Задает заголовок окна - windowRef.name
- window - Синоним текущего окна - [windowName.] window
- alert - Выводит на экран диалоговое окно JavaScript Alert с кнопкой OK и определенным сообщением - [window].alert(AlertMessage)
- open - Создает новый экземпляр окна - [window.]open("URL", "windowName" [,"windowFeatures"]);
- close - Закрывает текущий экземпляр окна - [window.]close();
- prompt - Отображает диалоговое окно ввода пользователя - [windowName.]prompt(message [inputDefault])
- confirm - выводит на экран окна сообщения с кнопками Yes и No, и возвращает булевое значение true или false, в зависимости от нажатой кнопки - [window].confirm(ConfirmMessage)
- setTimeout - Исполняет выражение по истечении указанного в миллисекундах промежутка времени - [window.]setTimeout(timerID)
Пример:
|
|
|
<SCRIPT LANGUAGE="JavaScript">
if (confirm("Уверены, что хотите просмотреть документ?") )
{
alert("Счастливого пути");
}
else
{
alert("Tогда оставайтесь");
window.close()
}
</SCRIPT>
document - объект, создаваемый броузером во время загрузки страницы. Объект document является одним из основных в JavaScript и содержит информацию о текущем документе, такую как заголовок, цвет фона, имеющиеся в документе формы и т.п.. Эти свойства определяются в теге . Рассмотрим основные свойства document:
- action - Отображение атрибута ACTION тега <FORM> - document.formName.action; document.forms[index].action; action возвращает строку, состоящую из URL назначения для данных, введенных в форму. Это значение может быть установлено или изменено как до, так и после загрузки и форматирования документа.
- alinkColor - Цвет активной гиперссылки - document.alinkColor
- anchors - Массив всех якорей в документе - document.anchors(index)
- bgColor - Фоновый цвет документа - document.bgColor
- fgColor - Цвет текста, выводимого на странице - document.fgColor
- forms - Массив объектов, соответствующих формам, созданных в тегах HTML в том же порядке - document.forms
- lastModified - Строка только для чтения, хранящая дату последнего изменения текущего документа - document.lastModified
- linkColor - Цвет гиперссылки в документе - document.linkColor
- links - Массив гипертекстовых связей - document.links[index]
- location - Возвращает строку с URL текущего документа - document.location
- referrer - URL документа, который привел к текущему документу - document.referrer
- title - Возвращает значение только для чтения, указанное внутри тега <TITLE> - document.title
- vlinkColor - Возвращает или устанавливает цвет просмотренной гиперссылки - document.vlinkColor
- images- Масив изображений, ссылки на которые заданы в текущем документе - document.images[index]
Основные методы объекта document
- open - Создает новый документ - document.open([MIMEtype]). Метод открывает поток вывода для методов write или writeln. Если тип MIME является версией text или image (например, text/html или image/gif), документ будет открыт для показа.
- write - Записывает строку или несколько строк в окно документа - document.write(string)
- writeln - Записывает строку или несколько строк в окно документа и добавляет символ новой строки в конце вывода - document.writeln(string)
- close - Закрывает документ, посылает браузеру информацию об изменениях в документе -
document.close() - clear - Очистка текущего документа - document.clear()
Пример:
<script language="JavaScript">
var bgc = document.bgColor;
var fgc = document.fgColor;
var url = document.location;
var lm = document.lastModified;
document.write("Цвет фона этой страницы <B>"+bgc+"</B>")
document.write("<BR>URL этой страницы <B>" +url+ "</B>")
document.write("<BR>Последние изменения внесены- <B>"+lm+ "</B>")
document.bgColor="00FFFF";
document.writeln("<b>Hello world!</b>");
</script>
Объект location сохраняет местоположение текущего документа в виде адреса этого документа.При управлении объектом location существует возможность изменять URL документа. Объект location связан с текущим объектом window - окном, в которое загружен документ. Рассмотрим основные свойства объекта:
- hash - Возвращает часть URL, начинающуюся с символа #, т.е. метку - document.linkName.hash; document.links[index].hash; document.location.hash
- hostname - Возвращает или изменяет строку с именем домена или IP-адресом URL - location.hostname; linkName.hostname; links[index].hostname
- href - Возвращает строку, содержащую полный URL текущего документа - location.href; linkName.href; links[index].href
- pathname - Извлекает из URL ту его часть, которая содержит путь - location.pathname; link.pathname; links[index].pathname
- port - Извлекает из URL номер порта компьютера - location.port; link.port; links[index].port
- protocol - Возвращает метод доступа к объекту(протокол передачи данных) - location.protocol; link.protocol; links[index].protocol
- target - Строка, указывающая имя окна, в которое будет помещен ответ после посылки данных формы серверу - location.target; link.target; links[index].target
Методов для объекта location не существует и с обработчиками событий он не связан
Пример:
<SCRIPT LANGUAGE="JavaScript">
document.write("Вы находитесь на следующей странице - " + window.location.href)
</SCRIPT>
<form>
<input type="button" value="Переход" onClick="location.href='forma/content.html '">
</form>
Объект history содержит список адресов URL, посещенных в этом сеансе. Объект history связан с текущим документом.
Единственным свойством объекта является свойство length, которое определяет количествоэлементов в списке history
Методы объекта History:
- back - Вызывает переход к предыдущему URL из списка просмотренных в текущей сессии работы с броузером документов - history.back()
- forward - Загружает следующий документ из списка URL, просмотренных за текущий сеанс работы с броузером - history.forward()
- go - Загружает документ из списка страниц, посещенных за текущий сеанс работы броузера - history.go(argumentOrURL)
Пример:
<html>
<A href="javascript:history.back()">
<IMG height=23 src="rew.gif" border=0>
</A>
<A href="javascript:history.forward()">
<IMG height=23 src="fw.gif" border=0>
</A>
<p>
<A href="javascript:history.go(-1)"><IMG height=23 src="rew.gif" border=0>
</A>
<A href="javascript:history.go(1)"><IMG height=23 src="fw.gif" border=0>
</A>
</html>
Объект navigator содержит информацию о броузере на клиентском компьютере.Объект navigator возвращает информацию о броузере, такую как имя и версия броузера. Одно из основных применений этого объекта состоит в определении платформы, используемой на клиентском компьютере, для учета особенностей конкретного броузера, подобных обработке символа новой строки или генерации случайных чисел. Рассмотрим основные свойства объекта:
- appCodeName - Возвращает строку (только для чтения) с кодовым именем броузера - navigator.appCodeName
- appName - Возвращает строку (только для чтения) с именем броузера - navigator.appName
- appVersion - Возвращает строку с информацией о версии броузера - navigator.appVersion
- userAgent - Заголовок, посылаемый как часть протокола HTTP от клиента к серверу для идентификации типа клиента - navigator.userAgent
Методы и события не определены для этого объекта.
Пример:
<SCRIPT LANGUAGE="JavaScript">
var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;
document.write("Вы пользуетесь <B>" +an+ "</B>,версия " +av+ ".<BR>Кодовое название " +acn+ ", заголовок "+ua+ "." );
</SCRIPT>
Дата добавления: 2018-02-28; просмотров: 299; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!