Cправочник web-дизайнера / javascr3
.htmMy home page Стандартные объекты языка JavaScript Язык JavaScript предлагает в распоряжение программиста семейство объектов, включающее около 20 стандартных типов, каждый из которых характеризуется набором свойств и методов. Объекты обеспечивают доступ к элементам, из которых строится HTML-документ. Каждому дескриптору HTML соответствует объект языка JavaScript.
Типы объектов языка Java Script Тип объектаИмя объекта в NetscapeОписание объекта и соответствующий ему тег AnchorИспользуется для организации доступа к якорям HTML <a name>..</a> ButtonИспользуется для организации доступа к кнопкам HTML (<input type="button">) CheckboxИспользуется для доступа к контрольным переключателям HTML (<input type="checkbox">) Date Используется для обработки значений даты и времени DocumentdocumentСодержит ссылку на текущий гипертекстовый документ, загруженный в Netscape FormformСодержит ссылку на текущий контейнер HTML <form>. Используется для организации доступа к элементам этой формы HistoryhistoryСодержит ссылки на "историю прохождения" по гиперссылкам и на объекты стандартных кнопок навигатора Netscape. Используется для организации перемещения между документами и внутри них, а также для повторных запросов по URL LinkИспользуется для доступа к гиперсвязям, созданным с помощью тега HTML <a href>..</a> LocationlocationСодержит информацию о текущем местонахождении документа; например, основанную на информации, содержащейся в URL MathmathСодержит математические константы и функции PasswordСодержит информацию о поле ввода текста с обеспечением защиты содержимого (тег HTML <input type="password">) Radio buttonИспользуется для организации доступа к селекторной кнопке (радиокнопке) HTML (<input type="radio">) Reset buttonИспользуется для организации доступа к кнопке сброса HTML-формы (<input type="reset">) Selection listИспользуется для организации доступа к элементу, находящемуся в контейнере <select> (список выбираемых элементов) StringИспользуется для обработки текстовых строк. Все текстовые строки в языке JavaScript рассматриваются как объекты (например, "Wombat" является строковым объектом) Submit button Используется для организации доступа к кнопке передачи (<input type="submit"> HTML-формы TextИспользуется для доступа к полю ввода текста (<input type= "text">) Text areaИспользуется для доступа к многострочному полю ввода текста HTML (<textarea>) WindowwindowИспользуется для ссылки на текущее окно Netscape Использование объектов языка JavaScript Некоторые объекты, такие как Data и Math, встроены в интерпретатор JavaScript, а другие связаны с соответствующими дескрипторами HTML. Например, объект Text позволяет получить доступ к полю ввода текста, определенному дескриптором HTML <input type="text">. При определении объектов нужно учитывать следующее:
1. В дескрипторы HTML, определяющие объект, необходимо включить атрибут name (имя), задающий имя, по которому можно было бы ссылаться на данный объект. Например, дескриптор <input type="text" name="nameField" size=20> это уже не просто поле ввода текста, а теперь это можно рассматривать как объект, являющийся полем ввода. В языке JavaScript HTML - дескрипторы вместе с их атрибутами рассматриваются как объекты.
2. Объекту в языке JavaScript присущи свойства, которые являются характеристиками объекта. Немаловажным является и то обстоятельство, что в броузере NN атрибуты дескриптора HTML по умолчанию представляются как свойства языка JavaScript. С появлением языка JavaScript многие дескрипторы HTML были соответствующим образом модифицированы, чтобы обеспечить возможность задания атрибутов обработки событий. С помощью этих атрибутов модно вызывать программные блоки языка JavaScript для определенных объектов, что позволяет сделать эти объекты интерактивными. Например, внутри дескриптора HTML <body> можно указать атрибут onLoad, который задает вызов функции языка JavaScript при загрузке документа. Так, если дескриптор имеет вид <body onLoad="InitFunction ()"> то при загрузке текущего документа будет вызвана функция языка JavaScript InitFunction ().
Методы объектов Каждому объекту языка JavaScript соответствует ряд связанных с ним методов. Методы выполняют определенные действия над объектами; например, для строковых объектов можно осуществить перевод в нижний регистр с помощью оператора присваивания
myString = "JAVASCRIPT".toLowerCase();
где "JAVASCRIPT" - это строковый объект, а toLowerCase() - метод, который переводит строку в нижний регистр.
Свойства объектов Еще одно понятие, использующееся в объектно-ориентированном программировании - свойства. Многие объекты имеют свойства, используемые по умолчанию. Ссылаться на такие свойства следует так:
ПОСЛЕ ИМЕНИ ОБЪЕКТА НУЖНО ПОСТАВИТЬ ТОЧКУ, ПОСЛЕ КОТОРОЙ УКАЗАТЬ ИМЯ СВОЙСТВА
При рассмотрении объектов мы будем отражать следующее:
- свойства объектов;
- методы объектов;
- обработчики событий объектов;
- синтаксис HTML или языка JavaScript;
- описание объекта.
Объект anchor (якорь) Свойства: name
Методы: нет Обработчики событий: нет
Синтаксис:
<a name="anchorName">
Текст якоря
</a>
Описание:
Объект anchor - это объект в HTML-документе, который соответствует фрагменту, являющему целевым для гиперсвязи. Якорь создается с помощью дескриптора <a> с атрибутом name.
Для активации якоря необходимо использовать дескриптор:
<a href="#refName"> Link Name </a>
где refName - имя якоря, соответствующего месту в документе, куда пользователь хочет попасть, а Link Name - отображаемый текст гиперсвязи, на котором пользователь активизирует связь, нажав клавишу мыши. Символ # указывает на то, что якорь является локальным, т.е. что он существует в пределах текущего документа. На якоре расположенных во внешних HTML-документах следует ссылаться с помощью записи вида URL\fileName#anchorName.
В языке JavaScript можно ссылаться на якоря в гипертекстовом документе, загруженном в NN, используя свойство anchors объекта document. В этом свойстве содержится массив точек входа для всех якорей, определенных в данном гипертекстовом документе.
Объект button (кнопка) Свойства: name, value
Методы: click()
Метод click() можно использовать для активации объекта, соответствующего кнопке.
Обработчики событий: onClick
Атрибут onClick дескриптора <input type> для того, чтобы при нажатии кнопки вызывать определенные операторы или функции языка JavaScript.
Синтаксис:
<input type="button"
[name="ButtonName"]
[onClick="EventHandler"]
value="ButtonText">
Описание:
Объект button является объектом HTML-формы, который можно выбрать с помощью мыши. Кнопки используются для активации различных событий языка JavaScript.
Пример 6
Объект checkbox (контрольный переключатель) Свойства: name, checked, DefaultChecked
Методы: click()
Метод click() можно использовать для активации объекта, соответствующего кнопке.
Обработчики событий: onClick
Атрибут onClick дескриптора <input type> для того, чтобы при нажатии кнопки вызывать определенные операторы или функции языка JavaScript.
Синтаксис:
<input type="checkbox"
[name="CheckboxName"]
[onClick="EventHandler"]
[checked]
value="Text">
Описание:
Объект checkbox позволяет выбрать одну из возможностей: да/нет. Свойство checked является булевым (true, если контрольный переключатель включен). Свойство DefaultChecked принимает значение true, когда в дескрипторе указан атрибут Checked, с помощью которого можно указать, что контрольный переключатель по умолчанию должен отображаться включенным.
Пример 7
Объект date (дата и время) Свойства: нет
Методы : getdate (), getDay (), getHours (), getMinutes (), grtSeconds (), getTime (), getMoth (), getYear (), parse (), setdate (), setDay (), setHours (), setMinutes (), grtSeconds (), setTime (), setMoth (), setYear (), setString ()
Обработчики событий: нет
Синтаксис:
dateVar = new Date (parameters);
dateVar.method ();
Описание:
Объекты Date являются встроенными объектами языка JavaScript. Они предназначены для организации доступа к функциям даты и времени. В языке JavaScript значение системного времени хранится во внутренней переменной языка в виде количества миллисекунд, прошедших от момента времени 00:00:00 1 января 1970 года. С объектом Date связано больше методов, чем с остальными другими. Эти методы позволяют прочитать любое поле объекта Date и присвоить ему значение.
Из синтаксиса видно, что оператор new служит для создания нового экземпляра объекта Date. Список аргументов parametres может быть любым из следующих:
- пустой список параметров Date () задает подстановку текущей даты и времени;
- строка, содержащая дату и время в виде: "Месяц, число, год, время", например, "March, 12, 1997 13:12:00";
- набор значений для года, месяца, дня, часов, минут и секунд,например, строка "97,3,1,13,30,00" обозначает 1 марта 1997 года, 13:30:00.
- набор целых значений только для года, месяца и дня, например, "97,3,1" обозначает 1 марта 1997 года. Если поля, соответствующие времени опущены, то в них будут записаны нули.
Пример 1.
toDay = new Date ();
Создан новый объект Date, используя текущую дату и время.
Пример 2.
theDate = Date (97,3,1,13,30,00);
Создан объект Date с датой 1 марта 1997 г. и временем 13:30:00.
Пример 8
Объект document (документ) Свойства: alinkColor, anchors, bgColor, fgColor, forms, lastModified, linkColor, links, loadedDate, location, referrer, title, userAgent, vlinkColor.
Методы: clear(), close (), open (), write (), writeln ().
Обработчики событий: onLoad, onUnLoad
Синтаксис:
<body background="Image URL"
bgColor="#backgroundColor"
fgColor="#foregroundColor"
link="hyperlinkColor"
alink="activelinkColor"
vlink="visitedlinkColor"
[onLoad="EventHandler"]
[onUnLoad="EventHandler"]>
[ HTML - тext... ]
</body>
Описание:
Объект document содержит информацию о текущем гипертекстовом документе, загруженном в NN. Объект document создается в HTML с помощью дескрипторов <body> .... </body>. Свойства объекта document связаны с атрибутами дескриптора <body>.
Все свойства объекта document соответствуют элементам, которые могут содержаться в гипертекстовом документе (якоря, формы, заголовки и гиперсвязи). Свойства, которых может быть несколько (формы и гиперсвязи), хранятся в виде массива свойств.
Объект form (форма) Свойства: action, elements, method, name, target
Методы: submit ()
Обработчики событий: onLoad, onUnLoad
Синтаксис:
<form name="formName"
[target="winndowName"]
[action="CGIscriptURL"]
[method="GetIPOAT"]
[onSubmit="EventHandler"]>
<input type= ..... >
<textarea> .... </textarea>
<select> .... </select>
</form>
Описание:
Объекты form дают возможность пользователю осуществлять ввод информации в целый ряд полей гипертекстовой страницы.
Формы могут содержать поля ввода, селекторные кнопки, контрольные переключатели, меню или поля списка и кнопки. Форма создается с помощью контейнера <form>..</form>. Данные формы передаются на сервер с помощью тега <input type="submit">. Атрибут target (место назначения) определяет окно, в котором можно увидеть подтверждающие сообщения сервера, т.е. подтверждение тому, что сервер принял переданные ему данные формы.
Доступ к формам можно организовать по имени формы (после присвоения форме определенного имени с помощью атрибута name) или воспользовавшись свойством document.forms[n].
Пример 9
Объекты history Имя объекта: history
Свойства: current, lenght
Методы: back(), forward(), go()
Синтаксис:
history.methodName (args)
Обработчики событий: нет
Описание:
Объекты history (история) содержат информацию о документах, которые загружались пользователем в Netscape (т.е. маршруты URL).
С помощью оператора history.go(-2) можно получить доступ к последовательности предшествовавших вызовов различных документов в их хронологическом порядке. Уже открывавшиеся документы имеют отрицательные номера. Для определения текущего размера буфера истории Netscape можно использовать выражение history.lenght.
Объекты Link Свойства: target
Синтаксис:
<a href="locationURL"
[name="LinkName"]
[target="windowName"]
[onClick="Eventhandler"]
[onMouseOver="Eventhandler"]>
Текст гиперссылки...
</a>
Обработчик событий: onClick, onMouseOver
Описание объекта:
Простой объект Link можно создать с помощью тега HTML <a href>, например: <a name="hlink1" href="http://www.gold.net"> Go to GoldNet </a> В этом объекте текст Go to GoldNet рассматривается как гиперсвязь.
Объекты location Имя объекта: location
Свойства: hash, host, hostname, href, pathname, port, protocol, search
Методы: assign(), toString()
Обработчики событий: нет
Синтаксис:
location.propertyName
Описание:
Объекты location содержат информацию о текущем URL- т.е. о текущем документе, загруженном в броузер Netscape. Объекты location используются для извлечения информации о местоположении из текущего URL.
Пример 10
Объекты math Имя объекта: math
Свойства: E, LN10, LN2, PI, SQRT1_2, SQRT2
Методы: abs(), acos(), asin(), atan(), cos(), exp(), log(), max(), min(), pow(),round(), sin(), sqrt(), tan()
Обработчики событий: нет
Синтаксис:
Math.propertyName
Math.methodName()
Описание:
Объект math предоставляет в распоряжение программиста целый набор математический констант и методов, которые можно использовать при выполнении различных вычислений. Например,
piVal=Math.PI; //Значение константы 'PI'
x=Math.pow(2,12); //Вычисляет 2 в степени 12
Объекты password Свойства: defaultValue, name, value
Методы: focus(), blur(), select()
Обработчики событий: нет
Синтаксис:
<input type="password"
[name="ObjectName"]
[value="defaultValue"]
[size=NumofChars]>
Описание:
Чтобы посторонние не могли получить доступ к важной информации, вводимый в поле пароля текст отображается на экране в виде звездочек (*).
<form name="PassForm">
Enter password: <input type="password" name="PassField" size=10>
</form>
В этом фрагменте программы создается поле для ввода пароля длиной в 10 символов.
Объекты radio button Свойства: checked, defaultChecked, index, length, name, value
Методы: click()
Обработчики событий: onClick
Синтаксис:
<input type="radio"
[name="ObjectName"]
[checked]
[onClick="EventHandler"]
value="buttonValue"> [RadioText...]
Описание:
Селекторные кнопки реализуют возможность выбора да/нет. Атрибут name (имя) должен быть одинаковым для всех создаваемых селекторных кнопок. Объект radio button создается как массив, причем доступ к его элементам осуществляется с помощью соответствующего индекса.
Например, в форме:
<form>
<input type="radio" name="select" checked> Good
<input type="radio" name="select"> Bad
<input type="radio" name="select"> Ugly
</form>
создаются три селекторные кнопки. Для того, чтобы определить выбрана ли первая селекторная кнопка, можно использовать свойство checked:
document.forms[0].select[0].checked
Если значение этого выражения - true, то данная кнопка является выбранной (включенной).
Пример 11
Объекты reset button Свойства: name, value
Методы: click()
Обработчики событий: onClick
Синтаксис:
<input type="reset"
value="ButtonText"
[onClick="Eventhandler"]>
Описание:
Объект reset button соответствует кнопке сброса в HTML-форме. Кнопка сброса используется для очистки всех полей формы.
Объекты selection list Свойства: defaultSelected, index, selected, text, value
Методы: click()
Обработчики событий: onChange, onBlur, onFocus
Синтаксис:
<select name="objectName"
[size="NumberofChars"]
[multiple]
[onBlur="Eventhandler"]
[onChange="Eventhandler"]
[onFocus="Eventhandler"]
<option [selected] OptionText>
</select>
Описание:
Объект selection list соответствует контейнеру <select>.. </select> в HTML-форме. Свойство options объекта selection list можно использовать для доступа к элементам объекта. Отдельные элементы объекта selection list создаются с помощью тега HTML <option>. Атрибутом multiple задается выбор более чем одного элемента. С помощью атрибута selected тега <option> задаются свойства, которые будут выбраны при первом использовании этого объекта.
Объекты string Свойства: lenght
Методы: anchor(), big(), bold(), charAt(), fixed(), fontcolor(), fontsize, indexOf(),italics(), link(), small(), sub(), substring(), sup(), toLowerCase(),toUpperCase()
Обработчики событий: нет
Синтаксис:
StringObject.methodName()
StringObject.PropertyName
Описание:
Объект string (строка) состоит из набора буквенно-цифровых символов и имеет лишь одно свойство length (длина). Например, если строковая переменная с именем name определяется с помощью оператора:
var Name="Java"
то значением выражения языка JavaScript
Name.length
будет число 4.
Метод substring (start, end) возвращает подстроку строки, где start - начальное положение в строке, а end - конечное положение. Нумерация символов в строке в языке JavaScript начинается с нуля (0), номера увеличиваются в направлении слева направо.
Объекты submit button Свойства: name, value
Методы: click()
Обработчики событий: onClick
Синтаксис:
<input type="submit" value="ButtonText">
Описание:
Объект submit button соответствует кнопки передачи в HTML-форме. Они используются для отправки данных текущей формы на сервер для дальнейшей обработки. Имя сервера, который должен производить обработку можно указать в атрибуте action тега <form>, задающего данную кнопку передачи. Пересылка формы всегда приводит к перезагрузки текущей страницы.
Объекты text и text area Свойства: defaultValue, name, value
Методы: blur(), focus(), select()
Обработчики событий: onBlur, onChange, onFocus, onSelect
Синтаксис (текстовое поле):
<input type="text"
[name="objectName"]
[value="defaultValue"]
[size="NumberofChars"]
[onBlur="Eventhandler"]
[onChange="Eventhandler"]
[onFocus="Eventhandler"]
[onSelect="Eventhandler"]>
Синтаксис (контейнер текстовой области):
<textarea [name="objectName"]
[rows=rows]
[cols=columns]
[onBlur="Eventhandler"]
[onChange="Eventhandler"]
[onFocus="Eventhandler"]
[onSelect="Eventhandler"]>
[Default-Text...]
</textarea>
Описание:
Объект text соответствует полю формы, в которое пользователь может ввести строку из букв и цифр. Объекты text area соответствуют многострочным полям ввода.
Объекты text и text area Пример 12
Объекты window Имя объекта: window
Свойства: frames, parent, self, top, status, defaultStatus
Методы: alert(), close(), confirm(), open(), prompt()
Обработчики событий: onLoad, onUnLoad
Синтаксис:
window.PropertyName
window.methodName()
Описание:
Объект window является объектом высокого уровня в языке JavaScript, поскольку все документы и их составные части должны отображаться в каком-либо окне. Следовательно, всегда предполагается наличие текущего окна, и его не обязательно явно указывать при разработке методов и вызове свойств этого объекта. Для ссылки на текущее окно одинаково пригодны свойства self и window. Аналогичным образом окно можно закрыть с помощью методов close(), self.close() и window.close().