JavaScript.6 2012. Объекты документа Объект History Свойства: current next previous length. - презентация

1 JavaScript

2 Объекты документа

3 Объект History Свойства: current next previous length

4 Объект History Методы back() forward() go (относительное число| url или заголовок)

5 Объект document Свойства Documents.forms[ ] Documents.form.length Documents.formName Методы Document.write()

6 Объект ссылки documents.links[ ].propertyName

7 Объект FORM

8 Свойства формы o formName.propertyName o formName.methodName (parameters) o forms[i].propertyName o forms[i].methodName (parameters)

9 Элементы формы form.elements[ ] var form=window.document.forms[0] for (var i=0; i

10 Свойства форм Объект form имеет шесть свойств, большинство из них соответствуют атрибутам тега : o action - соответствует атрибуту action; o elements - массив, содержащий все элементы формы; o encoding - соответствует атрибуту enctype; o length - количество элементов в форме; o method - соответствует атрибуту method; o target - соответствует атрибуту target Массив forms имеет только одно свойство length - количество форм в документе.

11 методы форм Метод submit() применяется для передачи формы из JavaScript-программы. Его можно использовать вместо тега, имеющегося в большинстве форм, информация которых должна передаваться на сервер.

12 Обработчики событий Обработчик события onSubmit() позволяет перехватывать события, связанные с передачей данных формы. Такие события возникают либо после нажатия кнопки передачи данных, определенной тегом в контейнере, либо при передаче данных формы с помощью метода submit(), вызванного из JS-прграммы.

13 Пример отправки почты с помощью формы

14 Объект button Кнопка - это область окна, которая реагирует на щелчки мыши и может активизировать оператор или функцию языка JavaScript при помощи атрибута события onClick. Синтаксис:

15 Объект button (2) Атрибут name задает имя кнопки и в языке JS ему соответствует свойство name нового объекта button. Атрибут 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.

16 Свойства button Свойства name и value объекта button соответствует атрибутам name и value HTML-тега. Обратившись к значениям этих свойств, можно вывести полный список кнопок, имеющихся в текущем документе. Свойство type объекта button всегда имеет значение "button".

17 Методы и обработчики событий Объект button имеет метод click() Обработчик событий onClick позволяет выполнить оператор или вызвать функцию языка JavaScript при щелчке мыши на кнопке, которой соответствует в программе определенный объект button. Пример

18 Объект checkbox textToDisplay где атрибут name является именем объекта checkbox. Ему соответствует свойство name объекта языка JavaScript. Атрибут value определяет значение, которое передается серверу при пересылки значений элементов формы, если контрольный переключатель включен. Необязательный атрибут checked указывает, что контрольный переключатель должен быть включен по умолчанию. Если этот атрибут задан, свойство defaultChecked имеет значение true. При помощи свойства checked можно определить, включен ли контрольный переключатель. Текст, отображаемый рядом с контрольным переключателем, задается строкой textToDisplay.

19 Объект checkbox К объекту checkbox можно обращаться одним из способов: o checkboxName.propertyName o checkboxName.methodName (parameters) o formName.elements[i].propertyName o formName.elements[i].methodName (parameters) где checkboxName - значение атрибута name объекта checkbox, а formName - имя объекта form или формы, которой принадлежит данный контрольный переключатель. Другими словами, к форме можно обращаться как к элементу массива forms, например forms[0] - для обращения к первой форме документа, либо по имени объекта form, если оно определено в атрибуте name HTML-тега. К любому элементу формы можно обратиться так же, как к элементу массива elements, который является свойством объекта form. В этом случае для обращения к определенному контрольному переключателю следует использовать его порядковый номер (i) в массиве всех элементов формы.

20 Свойства Если контрольный переключатель включен, свойство checked имеет значение true. Когда в теге используется атрибут checked, например, свойству defaultChecked также присваивается значение true. Свойство name соответствует атрибуту name тега, а свойство value - атрибуту value тега. Свойство type объекта checkbox всегда содержит значение "checkbox".

21 Методы и обработчики событий Метод Click() может использоваться с объектом checkbox, но в некоторых браузерах он должным образом не работает. Для объекта checkbox предусмотрен только один обработчик - onClick().

22 Скрытый объект Это поле, которое может передаваться из формы, при этом не отображаться на экране. Это текстовые поля позволяют сохранять определенные значения в структурах, отличных от переменных языка JS, хотя данные значения существуют до тех пор, пока загружен текущий документ. Атрибут name задает имя поля и является необязательным. Значение текстового поля указывают при помощи атрибута value, который позволяет задавать и значение поля по умолчанию. К свойствам скрытых объектов можно обращаться посредством одного из следующих выражений: o fieldName.propertyName o formName.elements[i].propertyName где fieldName - имя скрытого поля, заданное в атрибуте name тега, а formName - имя формы, в которой определено скрытое поле.

23 Свойства o name - соответствует атрибуту name тега ; o value - соответствует атрибуту value тега ; o type - соответствует атрибуту type и содержит значение "hidden". Скрытые объекты не имеют методов и обработчиков событий.

24 Пример обращения к скрытому полю Значение этого поля можно изменить с помощью оператора следующего вида: document.hiddenField.hfield.value = "page 2";

25 Объект password Для обращения к свойствам и методам поля пароля применяются выражения вида: o passName.propertyName o passName.methodName(parameters) o formName.elements[i].propertyName o formName.elements[i].methodName(parameters) Здесь passName - значение атрибута name объекта заданного в теге, а formName - либо значение свойства name объекта form, либо определенный элемент в массиве forms, например forms[0]. Переменная i применяется для указания полоожения требуемого элемента в массиве.

26 Свойства Объект password имеет следующие свойства: o defaultValue - значение по умолчанию, задаваемое с помощью атрибута value; o name - соответствует атрибуту name тега o value - соответствует текущему значению объекта password; o type - значением этого свойства для всех объектов password является строка "password".

27 Методы и обработчики событий Метод focus() объекта password применяется для установки фокуса в поле ввода пароля, а метод blur() - для его удаления. При помощи метода select() можно выделить данные в поле ввода. Этот метод обычно используется вместе с методом focus(). Для объекта password обработчики событий не определены.

28 Объект radio Для обращения к методам и свойствам селекторной кнопки используют выражения: o radioName[i].propertyName o radioName[i].methodName(parameters) o formName.elements[i].propertyName o tformName.elements[i].methodName(parameters) где radioName - значение атрибута name, заданное в соответствующем теге, а formName - либо значение атрибута name объекта form, либо обращение к элементу массива forms. Поскольку селекторные кнопки являются элементами формы, для обращения к ним можно использоовать массив элементов формы elements. document.forms[0].radioName[0] Следует иметь в виду, что для группы селекторных кнопок элементы массива для каждого элемента этой группы располагаются в обратном порядке.

29 Свойства Объект radio имеет следующие свойства: o checked - содержит булево значение true или false, в зависимсти от того, выбрана или нет данная селекторная кноопка; o defaultChecked - сответствует атрибуту checked тега, а также содержит булево значение; o length - представляет кооличество селекторных кнопок в бъекте radio; o name - соответствует атрибуту name тега o value - сооответствует атрибуту value тега o type - для объектов radio значением этого атрибута является строка "radio"

30 Методы и обработчики событий Для выбора селекторной кнопки используется метод click(). Объект radio имеет обработчик событий onClick, который используется для обработки событий, связанных с активизацией селекторной кнопки. При этом можно задать выполнение как отдельных операторов, так и функции.

31 Объект reset Атрибут name задает имя объекта reset, а атрибут value - текст, отоображаемый на кнопке. Для обращения к методам и свойствам объекта reset используется синтаксис: o resetName.propertyName o resetName.methodName(parameters) o formName.elements[i].propertyName o tformName.elements[i].methodName(parameters) где resetName - имя объекта reset, заданное в атрибуте объекта name, а formName - имя формы, в которой определен объект reset, указанное в атрибуте name тега, или элемент массива forms.

32 Свойства Свойство name сответствует атрибуту name тега, свойство value - атрибуту value, а свойство type - атрибуту type и для объектов reset всегда имеет значение "reset".

33 Методы и Обработчики событий Объект reset имеет метод click(). Вообще все методы Click() и не только для объекта reset, но и для других тоже обычно не используют, не всегда корректно работает. Для объекта reset можно определить обработчик события onClick..

34 Объект select и массив options textToDisplay

35 Объект select Для обращения к свойствам и методам объекта select используются выражения типа: o selectName.propertyName o selectName.methodName(parameters) o formName.elements[i].propertyName o formName.elements[i].methodName(parameter s)

36 Объект select (3) К отдельным элементам списка, определенного в объекте select, можно обратиться при помощи массива options или массива elements, используя выражения вида: o selectName.options[i].propertyName o formName.elements[i].options[index].propertyNam e где selectName - имя, заданное в атрибуте name тега, а formName - имя формы, в которой определен данный объект select.

37 Массив options Элементам списка, определенным в тегах, в JavaScript соответствуют элементы массива options, массив является свойством объекта select. Если тег с именем beer содержит два тега, в JS им соответствуют элементы beer.options[0] и beer.options[1]. Массив options, в свою очередь, имеет свойство length. Значение этого свойства - количество тегов в заданном объекте select. Например, выражение beer.options.length будет возвращать значение 2.

38 Свойства Объект select имеет свойства: o length - количество тегов, заданных в теге O name - соответствует атрибуту name тега o options - массив значений тегов o selectIndex - содержит индекс выбранного элемента, а если выбрано несколько элементов, то индекс первого; o type - для списков с возможностью выбора одного элемента содержит значение "select-one", а для списков с возможностью выбора нескольких элементов - значение "select-multiple"

39 свойства для массива options o defaultSelected - соответствует первому тегу, определенному с атрибутом selected; o index - номер даннго элемента в массиве; o length - количество элементов в списке объекта select; o selected - не равное нулю, если данный элемент списка выбран o selectedIndex - содержит индекс выбранного элемента o text - соответствует тексту, который указан в теге o value - соответствует атрибуту value тега

40 Методы и обработчики событий Объект select имеет методы focus() и blur(). Для объекта select можно определить обработчики событий, соответствующие атрибутам onBlur и onChange, задавая реакцию объекта на события, связанные с потерей и получением фокуса ввода.

41 Пример Какое пиво лучше? Жигулевское Очаковское Бочкарев Балтика

42 Объект submit С помощью атрибута name задается имя объекта submit, которое является значением одноименного свойства объекта в языке JS. В качестве значения атрибута value используется строка текста, отображаемая на кнопке. Атрибуту value в языке JS соответствует свйство value объекта submit. Для обращения к методам и свойствам объекта submit применяются выражения: o submitName.propertyName o submitName.methodName(parameters) o formName.elements[i].propertyName o tformName.elements[i].methodName(parameters)

43 Методы и Обработчики событий Объект submit имеет метод click(). Для объекта submit можно определить только один обработчик события onClick.

44 Объект text

45 Объект text (2) Для обращения к методам и свойствам объекта text используют выражения вида: o textName.propertyName o textName.methodName(parameters) o formName.elements[i].propertyName o tformName.elements[i].methodName(parameters) типичные для всех элементоов формы. Строка textName - имя объекта text, заданное с помощью атрибута name в теге, а стрка formName - соответственно имя формы, в которой и определен данный объект

46 Свойства Свойство defaultValue соответствует атрибуту value. Значением свойства value является текущее значение объекта text. Свойство name соответствует атрибуту name объекта text, а свойство type - атрибуту type и содержит в данноом случае значение "text".

47 Методы и обработчики событий Объект text имеет три метода: focus(), blur() и select(). Для объектов text можно определить четыре обработчика событий: onBlur, onChange, onFocus и onSelect.

48 Пример Рассмотрим пример приведенный выше: Пример: В данном примере обработчик события, связанного с получением фокуса ввода, onFocus применяется для выделения текста в поле ввода. Для самого выделения используется метод select(), а обращение к полю ввода осуществляется при помощи оператора this.

49 Объект textarea < textarea name="textareaName" rows="integer" cols="integer" [onBlur="handlerText"] [onChange="handlerText"] [onFocus="handlerText"] [onSelect="handlerText"]> [textToDisplay] [wrap="hand | soft"] [textToDisplay] [wrap="hand | soft"]">

50 Объект textarea (2) Для обращения к методам и свойствам объекта textarea применяются типичные для элементов формы выражения: o textareaName.propertyName o textareaName.methodName(parameters) o formName.elements[i].propertyName o formName.elements[i].methodName(parameters) где textareaName - это значение атрибута name тега, а formName - имя формы, в котрой определен объект textarea. Содержимое объектов textarea в JS-программах может динамически изменяться путем присваивания нового значения их свойству value. Например: document.forms[0].myArea.value = "Новый текст"

51 Свойства O defaultValue - значение содержит текст, помещенный в контейнер... O name - соответствует атрибуту name тега O value - соответствует текущему значению объекта textarea т.е. текущему содержимому области текста; O type - для объекта textarea всегда содержит значение "textarea".

52 Методы Метод focus() используется для помещения фокуса ввода в область текста, а метод blur() - для его удаления из области текста. Метод select() применяется для выделения информации в области текста.

53 Обработчики событий В теге можно определить четыре атрибута, задающие обработку событий, связанных с объектом textarea. С помощью атрибута onBlur определяется реакция объекта на удаление фокуса ввода из области текста, а с помощью атрибута onChange - реакция объекта на изменение содержимого области текста. Атрибуты onFocus и onSelect активизируют обработку событий, связанных соответственно с получением фокуса ввода и с выделением данных в области текста.

54 Пример Измените этот текст и перейдите в другое поле формы: Это объект textarea Пример текста по умолчанию