|
Учебник JavaScriptСтраницы: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 Многие объекты языка JavaScript соответствуют тегам, формирующим HTML-документы. Каждый такой объект состоит во внутренней иерархии, поскольку все они имеют общий родительский объект - браузер, который представлен объектом window.Иерархия объектов представлена в схеме: Некоторые объекты языка JavaScript имеют потомков. В частности, гиперсвязь является объектом, наследованным из объекта document. В языке JS наследованные объекты называются также свойствами. Например, множество гиперсвязей является свойством объекта document, а links - именем этого свойства. Таким образом, трудно провести четкую границу между объектами и свойствами. Гиперсвязь, являясь объектом, в то же время представляет собой свойство links объекта document. Рассмотрим пример. Напишем простенькую программку и посмотрим, как будут создаваться объекты HTML. Тоесть, при загрузке HTML-документа в браузер соответственно будут созданы HTML-объекты на JavaScript. Теги HTML собственно служат исключительно для удобства написания документа: <html> <head> <title>Пример программы</title> </head> <body bgcolor="White"> <form> <input type="checkbox" checked name="chck1">Item 1 </form> </body> </html> Посмотрим эквивалентную запись на JavaScript document.title="Пример программы" document.bgColor="White" document.forms[0].chck1.defaultChecked=true Как видно из примера, тегу <title> соответствует свойство document.title, а цвету фона документа, установленному в теге <body>, - свойство document.bgColor. Переключателю checkbox с именем chck1, определенному в форме, соответствует выражение document.forms[0].chck1. Свойство defaultChecked принадлежит объекту check-box и может принимать значения true или false в зависимости от того, указан ли в теге <input> атрибут checked. Когда этот атрибут задан, переключатель отображается на экране как включенный по умолчанию. Поскольку документ может включать несколько таких объектоов, как гиперсвязи, формы и другие объекты, многие из них являются массивами. Для обращения к определенному элементу массива нужно указать его индекс. Например, forms[0] - первая форма текущего документа. Ко второй форме можно обратиться соответственно forms[1]. Заметьте, что индексы массивов в JS программах всегда начинаются с нуля. В нашем примере объект верхнего уровня - window, потому, что любой документ загружается в окно. Например, выражения document.forms[0] и window.document.forms[0] обращаются к одному и тому же объекту, а именно к первой форме текущего документа. Однако если необходимо обратиться к форме в другом окне (фрейме), следует использовать выражение вида parent.frames[n].document.forms[n] где n является индексом нужного элемента массива. Ну чтож, перечислим объекты в таблице.
Объекты, которым соответствует массивы, являются многомерными объектами. В некоторых HTML-тегах можно определить несколько элементов, например множество элементов списка в теге <select>. Рассмотрим тег <select>, содержащий два элемента: <form> <select name="primer"> <option>Опция1 <option>Опция2 </select> </form> Тег <select> сам по себе является объектом, однако для обращения к отдельным элементам этого объекта (тегам <option>) используется массив option. Данный массив представляет собой множество значений, которые соответствует тегам <option>, содержащимся в теге <select>. В нашем примере создается два объекта: первый - объект select в целом (к нему обращаются, чтобы выяснить, сколько элементов он фактически соодержит), второй - массив options (он позволяет обращаться к отдельным элементам, содержащимся в первом объекте). Таким образом, некоторые объекты могут использовать объекты-массивы для обращения к содержащимся в них элементам. Однако это не является правилом, все зависит от структуры рассматриваемых объектов и тех объектов, из которых они унаследованы. Например, HTML-тегам <a name> . . . </a> соответствует объект anchor, являющийся элементом массива anchors, и в то же время эти теги встречаются сами по себе, а не в других тегах. Просто родительским объектом (parents) для объекта anchors является объект document, а в документе может быть определено множество меток. Окна тоже могут содержать множество документов, связанных с ними через фреймы. Ну чтож, рассмотрим теперь каждый объект более подробно. Объект anchor и массив anchors Anchor - это элемент текста, который является объектом назначения для тега гиперсвязи <a href>, а также свойством объекта document. Тегу <a name> в языке JavaScript соответствует объект anchor, а всем тегам <a name>, имеющимся в документе, - массив anchors. Являясь объектами назначения для гиперсвязей <a name>, метки в основном используются для индексирования содержимого гипертекстовых документов, обеспечивая быстрое перемещение к определенной части документа при щелчке мыши на гиперсвязи, которая обращается к данной метке. Тег <a>, задающий метки и гиперсвязи, имеет синтаксис: Должен предупредить, что некоторые старые браузеры его не поддерживают, например IE 3.01. Кнопка - это область окна, которая реагирует на щелчки мыши и может активизировать оператор или функцию языка JavaScript при помощи атрибута события onClick. Кнопки являются свойствами объекта form и должны быть заключены в теги <form> . . . </form> языка HTML. <input type="button" name="buttonName" value="buttonText" [onClick="handlerText"]> Атрибут name задает имя кнопки и в языке JS ему соответствует свойство name нового объекта buttun. Атрибут value определяет надпись на кнопке, котороой соответствует свойство value. К свойствам и методам объекта button можно обратиться одним из способов: -- buttonName.propertyName -- buttonName.methodName (parameters) -- formName.elements[i].propertyName -- formName.elements[i].methodName (parameters) Здесь buttonName - значение атрибута name, а formName - либо значение атрибута name объекта form, либо элемент массива forms. Переменная i является индексом, используемым для обращения к отдельному элементу массива, в данном случае к элементу button. Свойства Свойства name и value объекта button соответствует атрибутам name и value HTML-тега <input>. Обратившись к значениям этих свойств, можно вывести полный список кнопок, имеющихся в текущем документе. Свойство type объекта button всегда имеет значение "button".
Объект button имеет метод click() - о нем будем говорить позже. Приведем простой пример, например, выведем текущую дату и время посредством нажатия кнопки. Будем использовать событие onClick для вызова метода alert() и конструктора Date() Пример схематичный, объект должен быть определен
Контрольный переключатель - это кнопка(флажок), которую можно установить в одно из двух состояний: включено или выключено. Объекты checkbox являются свойствами объекта form и должны быть помещены в теги <form> . . . </form>. Простой контрольный переключатель: <input name="checkboxName" type="checkbox" value="checkboxValue" [checked] [onClick="handlerText"]>textToDisplay где атрибут name является именем объекта checkbox. Ему соответствует свойство name объекта языка JavaScript. Атрибут value определяет значение, которое передается серверу при пересылки значений элементов формы, если контрольный переключатель включен. Необязательный атрибут checked указывает, что контрольный переключатель должен быть включен по умолчанию. Если этот атрибут задан, свойство defaultChecked имеет значение true. При помощи свойства checked можно определить, включен ли контрольный переключатель. Текст, отображаемый рядом с контрольным переключателем, задается строкой textToDisplay. К объекту checkbox можно обращаться одним из способов:
К любому элементу формы можно обратиться так же, как к элементу массива elements, который является свойством объекта form. В этом случае для обращения к определенному контрольному переключателю следует использовать его порядковый номер (i) в массиве всех элементов формы. Свойства Если контрольный переключатель включен, свойство checked имеет значение true. Когда в теге <input> используется атрибут checked, например <input checked type=checkbox>, свойсту defaultChecked также присваивается значение true. Свойство name соответствует атрибуту name тега <input name= . . . type=checkbox>, а свойство value - атрибуту value тега <input>. (оно и правильно: ключевые слова и должны соответствовать чтобы путаницы небыло). Свойство type объекта checkbox всегда содержит значение "checkbox". Метод Click() может использоваться с объектом checkbox, мне не приходилось его использовать, но есть много замечаний в адрес этого метода, - в некоторых браузерах он должным образом не работает. Но тем не менее он имеется. Для объекта checkbox предусмотрен только один обработчик - onClick(). Об этом и других событиях языка JavaScript поговорим позже в отдельном разделе. Массив elements содержит все элементы HTML-формы - контрольные переключатели (checkbox), селекторные кнопки (radio-button), текстовые объекты (text) и другие, - в том порядке, в котором они определены в форме. Этот массив можно использовать для доступа к элементам формы в JS-программе по их порядковому номеру, не используя свойства name этих элементов. Массив elements, в свою очередь, является свойством объекта forms, поэтому при обращении к нему следует указывать имя формы, к элементу которой вы хотите обратиться:
Свойства Объект elements имеет только одно свойство, length, значением которого является количество элементов объекта form. document.forms[0].elements.length возвратит значение, соответствующее количеству элементов в первой форме текущего документа. Пример Теперь рассмотрим текст этой программы: <html> <head> <script language="JavaScript"> <!-- function showElem(f) { var formEl = " "; for (var n=0; n < f.elements.length; n++) { formEl += n + ":" + f.elements [n] +"\n"; } alert("Элементы в форме '" + f.name + "' :\n\n" + formEl ); } //--> </script> </head> <body> <form name="Форма для примера"> Имя: <input type="text" size=10 name="fullname"> Адрес: <textarea name="adr"></textarea> <BR> <input type="button" value="Смотрим элементы" onClick="showElem(this.form)"> </form> </body> </html> Здесь функция перебирает все элементы массива elements заданной формы, в данном примере их три, формирует строку formEl, содержащую информацию об элементах данного массива. IE покажет здесь в виде "n:[object]" тоесть этот браузер не содержит в массиве elements строки с информацией об объекте формы. Созданная строка (для удобства читаемости разделена "переводом строки \n" ) выводится в окне предупреждения с помощью метода alert(). Функция showEl() вызывается с аргументом this.form, который обращается к текущей форме. Если оператор this опустить, то из функции showEl() к форме придется обращаться с помощью выражения document.forms[n], - это не очень удобно, так как мы обращаемся из текущей формы. Объект form и массив forms Форма - это область гипертекстового документа, которая создается при помощи контейнера <form> . . . </form> и содержит элементы, позволяющие пользователю вводить информацию. Многие HTML-теги, например теги, определяющие поля ввода (text field), области текста (textarea), контрольные переключатели (checkbox), селекторные кнопки (radio button) и списки (selection list), располагаются только в контейнере <form> . . . </form>. Всем перечисленным элементам в языке JavaScript соответствуют отдельные объекты. Программы на языке JS могут обрабатывать формы непосредственно, получая значения, содержащиеся в необходимых элементах (например для проверки ввода обязательных данных). Кроме того, данные из формы обычно передаются для обработки на удаленный Web-сервер. К любой форме текущего гипертекстового документа можно обращаться как к элементу массива forms. Для этого необходимо указать индекс запрашиваемой формы. Например, forms[0] - первый тег <form> в текущем документе.
Выражение вида document.forms[i] можно также присвоить переменной var myForm = document.forms[i]; Теперь, если в форме имеется, к примеру, поле ввода, определенное в HTML-теге <form> <input type=text name=myField size=40> . . . </form> то в JS-программе к этому полю позволяет обращаться переменная myForm. В частности, при помощи следующего оператора содержимое данного поля ввода присваивается новой переменной с именем result: var result = myForm.myField.value; Значение свойства length соответствует количеству форм в документе: var numForms = document.forms.length Массив forms содержит данные, которые используют только для чтения. Свойства Объект form имеет шесть свойств, большинство из них соответствуют атрибутам тега <form>:
Методы Метод submit() применяется для передачи формы из JavaScript-программы. Его можно использовать вместо тега <input type=submit>, имеющегося в большинстве форм, информация которых должна передаваться на сервер.
Обработчик события onSubmit() позволяет перехватывать события, связанные с передачей данных формы. Такие события возникают либо после нажатия кнопки передачи данных, определенной тегом <input type=submit> в контейнере <form>, либо при передаче данных формы с помощью метода submit(), вызванного из JS-прграммы. <form nethod="post" action="mailto:my@mail.ru" enctype="text/plain"> <input type="submit" value="Отправить почту"> <input type="reset" value="Очистить форму"> <textarea name="email" rows=5 cols=60> </textarea> </form> Думаю, коментарии здесь будут излишни. До этого столько пережевывал. . . |
© 2008 |
Сайт оптимизирован под разрешения 1024х768 и 1280х1024, нажмите F11, для более полного погружения в контент сайта |