JavaScript.6

1. 2012 JavaScript.6

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. Свойства формы oformName.propertyName oformName.methodName (parameters) oforms[i].propertyName oforms[i].methodName (parameters) <form name="formName"  target="windowname"  action="serverURL"  method="get" | "post"  enctype="encodingType"  [onSubmit="handlerText"]> </form>

9. Элементы формы • form.elements[ ] var form=window.document.forms[0] for (var i=0; i<form.elements.length; i+1) { if (form.elements[i].type = =“text”) { form.elements[i].value=“ ” } }

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

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

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

13. Пример отправки почты с помощью формы <form method="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>

14. Объект button • Кнопка - это область окна, которая реагирует на щелчки мыши и может активизировать оператор или функцию языка JavaScript при помощи атрибута события onClick. • Синтаксис: <input type="button"   name="buttonName"   value="buttonText"   [onClick="handlerText"]>

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-тега <input>. Обратившись к значениям этих свойств, можно вывести полный список кнопок, имеющихся в текущем документе. Свойство type объекта button всегда имеет значение "button".

17. Методы и обработчики событий • Объект button имеет метод click() • Обработчик событий onClick позволяет выполнить оператор или вызвать функцию языка JavaScript при щелчке мыши на кнопке, которой соответствует в программе определенный объект button. • Пример <form> <input type="button"  value="Date and Time"  onClick='alert(Date())'> </form>

18. Объект checkbox <input name="checkboxName"  type="checkbox"  value="checkboxValue"  [checked]  [onClick="handlerText"]>textToDisplay • где атрибут name является именем объекта checkbox. Ему соответствует свойство name объекта языка JavaScript. Атрибут value определяет значение, которое передается серверу при пересылки значений элементов формы, если контрольный переключатель включен. Необязательный атрибут checked указывает, что контрольный переключатель должен быть включен по умолчанию. Если этот атрибут задан, свойство defaultChecked имеет значение true. При помощи свойства checked можно определить, включен ли контрольный переключатель. Текст, отображаемый рядом с контрольным переключателем, задается строкой textToDisplay.

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

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

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

22. Скрытый объект • Это поле, которое может передаваться из формы , при этом не отображаться на экране. Это текстовые поля позволяют сохранять определенные значения в структурах, отличных от переменных языка JS, хотя данные значения существуют до тех пор, пока загружен текущий документ. <input type="hidden" [name="hiddenName"] [value="textValue"]> • Атрибут name задает имя поля и является необязательным. Значение текстового поля указывают при помощи атрибута value, который позволяет задавать и значение поля по умолчанию. К свойствам скрытых объектов можно обращаться посредством одного из следующих выражений: ofieldName.propertyName oformName.elements[i].propertyName • где fieldName - имя скрытого поля, заданное в атрибуте name тега <input>, а formName - имя формы, в которой определено скрытое поле.

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

24. Пример обращения к скрытому полю <form name="hiddenField"> <input name="hfield" type="hidden" size=20 value="page 1"> </form> • Значение этого поля можно изменить с помощью оператора следующего вида: • document.hiddenField.hfield.value = "page 2";

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

26. Свойства • Объект password имеет следующие свойства: • odefaultValue - значение по умолчанию, задаваемое с помощью атрибута value; • oname - соответствует атрибуту name тега <name> • ovalue - соответствует текущему значению объекта password; • otype - значением этого свойства для всех объектов password является строка "password".

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

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

29. Свойства • Объект radio имеет следующие свойства: ochecked - содержит булево значение true или false, в зависимсти от того, выбрана или нет данная селекторная кноопка; odefaultChecked - сответствует атрибуту checked тега <input type="radio">, а также содержит булево значение; olength - представляет кооличество селекторных кнопок в бъекте radio; oname - соответствует атрибуту name тега <input> ovalue - сооответствует атрибуту value тега <input> otype - для объектов radio значением этого атрибута является строка "radio"

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

31. Объект reset <input type="reset" name="resetName" value="buttonText" [onClick="handlerText"]> • Атрибут name задает имя объекта reset, а атрибут value - текст, отоображаемый на кнопке. Для обращения к методам и свойствам объекта reset используется синтаксис: oresetName.propertyName oresetName.methodName(parameters) oformName.elements[i].propertyName otformName.elements[i].methodName(parameters) • где resetName - имя объекта reset, заданное в атрибуте объекта name, а formName - имя формы, в которой определен объект reset, указанное в атрибуте name тега <form>, или элемент массива forms.

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

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

34. Объект select и массив options <select name="selectName"   [size="integer"]  [multiple]   [OnBlur="handlerText"]   [OnChange="handlerText"]   [OnFocus="handlerText"]>   <option value="optionValue" [selected]> textToDisplay </select>

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

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

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

38. Свойства • Объект select имеет свойства: olength - количество тегов <option>, заданных в теге <select> Oname - соответствует атрибуту name тега <select> ooptions - массив значений тегов <option> oselectIndex - содержит индекс выбранного элемента, а если выбрано несколько элементов, то индекс первого; otype - для списков с возможностью выбора одного элемента содержит значение "select-one", а для списков с возможностью выбора нескольких элементов - значение "select-multiple"

39. свойства для массива options odefaultSelected - соответствует первому тегу <option>, определенному с атрибутом selected; oindex - номер даннго элемента в массиве; olength - количество элементов в списке объекта select; oselected - не равное нулю, если данный элемент списка выбран oselectedIndex - содержит индекс выбранного элемента otext - соответствует тексту, который указан в теге <option> ovalue - соответствует атрибуту value тега <option>

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

41. Пример • <script language = "JavaScript"> • <!-- function showSelected(a) { • var selNum = a.beer.selectedIndex; • var selText = a.beer.options[selNum].text; • alert("Выбрана ОПЦИЯ: "+ selNum + "\n" + • "Текст выбранной опции: "+ selText); • } //--> • </script> • <form name ="Мой выбор"> • Какое пиво лучше? • <select name = "beer"> • <option>Жигулевское • <option selected>Очаковское • <option>Бочкарев • <option>Балтика • </select> • <P> • <input type = "button" value="Смотрим что выбрали" onClick="showSelected(this.form)"> • </form>

42. Объект submit <input type="submit" name="submitName" value="buttonText" [onClick="handlerText"]> • С помощью атрибута name задается имя объекта submit, которое является значением одноименного свойства объекта в языке JS. В качестве значения атрибута value используется строка текста, отображаемая на кнопке. Атрибуту value в языке JS соответствует свйство value объекта submit. Для обращения к методам и свойствам объекта submit применяются выражения: • osubmitName.propertyName • osubmitName.methodName(parameters) • oformName.elements[i].propertyName • otformName.elements[i].methodName(parameters)

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

44. Объект text <input [type="text"] name="textName" value="textValue" size=integer [onBlur="handlerText"] [onChange="handlerText"] [onFocus="handlerText"] [onSelect="handlerText"]>

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

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

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

48. Пример • Рассмотрим пример приведенный выше: <form> <B>Пример:</B> <input type="text" name="exeName" value="Это поле ввода" size=20 onFocus="this.select()"> </form> • В данном примере обработчик события, связанного с получением фокуса ввода, onFocus применяется для выделения текста в поле ввода. Для самого выделения используется метод select(), а обращение к полю ввода осуществляется при помощи оператора this.

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

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