Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Объект select имеет свойства:
o length - количество тегов <option>, заданных в теге <select>
o name - соответствует атрибуту name тега <select>
o options - массив значений тегов <option>
o selectIndex - содержит индекс выбранного элемента, а если выбрано несколько элементов, то индекс первого;
o type - для списков с возможностью выбора одного элемента содержит значение "select-one", а для списков с возможностью выбора нескольких элементов - значение "select-multiple"
Теперь рассмотрим свойства для массива options:
o defaultSelected - соответствует первому тегу <option>, определенному с атрибутом selected;
o index - номер даннго элемента в массиве;
o length - количество элементов в списке объекта select;
o selected - не равное нулю, если данный элемент списка выбран
o selectedIndex - содержит индекс выбранного элемента
o text - соответствует тексту, который указан в теге <option>
o value - соответствует атрибуту value тега <option>
Методы и обработчики событий
Объект select имеет методы focus() и blur(). Для объекта select можно определить обработчики событий, соответствующие атрибутам onBlur и onChange, задавая реакцию объекта на события, связанные с потерей и получением фокуса ввода. Используются не часто, но всеже существуют такие задачи где эти события как раз-то и нужно применить, - будем говорить о событиях в соответствующей главе.
Пример
Рассмотрим пример приведенный выше:
<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>
Если вы во всем разобрались до этого примера, то комментарии и не понадобятся, но всеже. Объект select, определенный в данном примере содержит четыре элемента. При щелчке мыши на кнопке "Смотрим что выбрали" активизируется функция showSelected(), которая выводит окно сообщения с информацией об выбранном элементе. Для этого используются свойства text и selectedIndex. Функция showSelected() принимает параметр - имя формы. Значение этого параметра возвращается выражением this. form и представляет собой ссылку на текущую форму. Можно было, конечно и не передавать параметр функции если эта функция существует специально для текущей формы, но если кнопка будет находиться в другой форме, то параметр будет необходим. В функции showSelected() переменной selNum присваивается значение свойства selectIndex объекта select, а затем это значение используется при вычислении значения переменной setText для индексации массива options.
Объект submit
Объект submit отображается как кнопка в фотме HTML. Ее нажатие вызывает передачу текущей формы на сервер, имя которго задано при помощи атрибута action тега <form>. Объект submit является свойством объекта form. Обычно он представляет собой последнее поле формы, хотя его можно указывать в любом месте контейнера <form> . . . </form>. При активации кнопки данные пересылаются на сервер. Мы уже пользовались этим объектом ранее, когда рассматривали объект form.
Синтаксис:
<input type="submit"
name="submitName"
value="buttonText"
[onClick="handlerText"]>
С помощью атрибута 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)
где submitName - значение атрибута name объекта submit, а formName - либо значение атрибута name объекта form, свойством которого является данный объект submit, либо элемент массива forms, например forms[0] для первой формы в текущем документе. Не правда ли все похоже на объект reset, рассматриваемый ранее, только назначение их разноое. Они и применяются зачастую вместе. Свойства, методы и обработчики событий тоже похожи.
Методы и Обработчики событий
Объект submit имеет метод click(). Вообще метод Click() обычно не используют, - не всегда корректно работает - если я это говорю уже не в пятнадцатый раз :).
Для объекта submit можно определить только один обработчик события onClick.
Объект text
Объект text - это поле ввода, определяемое в теге <input type="text"> и предоставляющее пользователю возможность вводить текстовые данные. Объект text является свойством объекта form и должен размещаться в контейнере <form> . . . </form>. Объекты text содержат данные, которые можно и читать, и динамически изменять в JS-прграммах.
Пример:
Синтаксис тега:
<input [type="text"]
name="textName"
value="textValue"
size=integer
[onBlur="handlerText"]
[onChange="handlerText"]
[onFocus="handlerText"]
[onSelect="handlerText"]>
С помощью атрибута name задается имя объекта text, которое можно использовать в JS-программах. Этому атрибуту в языке JS соответствует свойство name объекта text. Значение атрибута value определяет содержимое поля по умолчанию. Атрибуту value тега <input> соответствует свойство value объекта text, а также свойство defaultValue, значение которого сохраняет содержимое текстового поля, заданное по умолчанию. Присвоив нужное значение атрибуту size, можно установить размер поля в символах. По умолчанию значением атрибута type для объектов text является строка "text", т. е. если атрибут type в определении тега <input> опустить, то создаваемый элемент формы будет полем ввода. Для обращения к методам и свойствам объекта text используют выражения вида:
o textName. propertyName
o textName. methodName(parameters)
o formName. elements[i].propertyName
o tformName. elements[i].methodName(parameters)
типичные для всех элементоов формы. Строка textName - имя объекта text, заданное с помощью атрибута name в теге <input>, а стрка formName - соответственно имя формы, в которой и определен данный объект.
Свойства
Свойство defaultValue соответствует атрибуту value. Значением свойства value является текущее значение объекта text. Свойство name соответствует атрибуту name объекта text, а свойство type - атрибуту type и содержит в данноом случае значение "text".
Методы и обработчики событий
Объект text имеет три метода: focus(), blur() и select(). Для объектов text можно определить четыре обработчика событий: onBlur, onChange, onFocus и onSelect. Более подробно мы будем рассматривать обработчики событий позже отдельно, а сейчас пока будем пользоваться в примерах без лишних комментариев. Назначение некоторых ясно из их названия.
Пример
Рассмотрим пример приведенный выше:
<form>
<B>Пример:</B>
<input type="text"
name="exeName"
value="Это поле ввода"
size=20
onFocus="this. select()">
</form>
В данном примере обработчик события, связанного с получением фокуса ввода, onFocus применяется для выделения текста в поле ввода. Для самого выделения используется метод select(), а обращение к полю ввода осуществляется при помощи оператора this.
Объект textarea
Объект textarea соответствует области текста, определенной в форме. Объекты textarea являются свойствами объекта form и должны быть помещены в контейнер <form> . . . </form>. Элементы этого типа используются для ввода нескольких строк текста в свободном формате. Также его часто используют для вывода примеров текста например JS-программы, сформированнго текста предлагаемого для размещения например баннера и др.
Измените этот текст и перейдите в другое поле формы:
Это объект textarea
Пример текста по умолчанию
Тег, задающий область текста, имеет синтаксис:
< textarea name="textareaName"
rows="integer"
cols="integer"
[onBlur="handlerText"]
[onChange="handlerText"]
[onFocus="handlerText"]
[onSelect="handlerText"]>
[textToDisplay]
[wrap="hand | soft"]
</textarea>
Атрибут name определяет имя области текста, и ему соответствует свойство name объекта textarea. Атрибуты rows и cols задают размеры поля области в символах. Строка textToDisplay представляет собой необязательный текст, помещенный в область текста при первом отображении на экране. Эта строка является значением свойства defaultValue объекта textarea в языке JavaScript. Форматирование в этй строке и происходит обычным способом, то есть без тегов <br> и других, а также теги отображаются здесь как они написаны, тоесть теги в этой строке не работают. Значение атрибута wrap определяет, каким образом введенный в поле текст разбивается на строки. Так, значение soft задает отображение строк в области текста полностью. В противном случае текст между двумя символами конца строки (Enter) размещается в одной строке.
Для обращения к методам и свойствам объекта textarea применяются типичные для элементов формы выражения:
o textareaName. propertyName
o textareaName. methodName(parameters)
o formName. elements[i].propertyName
o formName. elements[i].methodName(parameters)
где textareaName - это значение атрибута name тега <textarea>, а formName - имя формы, в котрой определен объект textarea.
Содержимое объектов textarea в JS-программах может динамически изменяться путем присваивания нового значения их свойству value. Например:
document. forms[0].myArea. value = "Новый текст"
Свойства
Объекты textarea имеют свойства:
o defaultValue - значение содержит текст, помещенный в контейнер <textarea> . . . </textarea>
o name - соответствует атрибуту name тега <textarea>
o value - соответствует текущему значению объекта textarea т. е. текущему содержимому области текста;
o type - для объекта textarea всегда содержит значение "textarea".
Методы
Метод focus() используется для помещения фокуса ввода в область текста, а метод blur() - для его удаления из области текста. Метод select() применяется для выделения информации в области текста. Очень удобный метод, когда нужно выделить большой по объему текст.
Обработчики событий
В теге <textarea> можно определить четыре атрибута, задающие обработку событий, связанных с объектом textarea. С помощью атрибута onBlur определяется реакция объекта на удаление фокуса ввода из области текста, а с помощью атрибута onChange - реакция объекта на изменение содержимого области текста. Атрибуты onFocus и onSelect активизируют обработку событий, связанных соответственно с получением фокуса ввода и с выделением данных в области текста.
Пример
Разберем пример. Выше приведена его действующая модель:
<script language = "JavaScript">
<!--
function sCange() {
alert ("Содержимое текстовой области изменено");
}
//-->
</script>
<form>
Измените этот текст и перейдите в другое поле формы:<BR>
<textarea name="tarea" rews=5 cols=40 onChange="sCange()">
Это объект textarea
Пример текста по умолчанию
</textarea>
<P>
<input type="text" size=35 name="stxt">
</form>
Здесь содержится два поля. Первое поле является областью текста (textarea). При изменении содержимого текстовой области активизируется функция sCange(), которая выводит окно сообщения, информирующее о том, что текст изменялся. Второе поле является обычным полем ввода, я его разместил для того, чтобы было, куда переместить фокус.
На этом закончим рассмотрение объектов соответствующих тегам HTML.
Использование языка JavaScript при обработке событий значительно расширило возможности языка HTML. Чаще всего программы создаются для обработки информации, вводимой пользователем в поля форм. Возможности управления элементами форм обеспечиваются главным образом за счет функций обработки событий, которые могут быть заданы для всех элементов формы. События делятся на несколько категорий:
· события, связанные с документами (события документа):
- загрузка и выгрузка документов;
· события, связанные с гиперсвязью (события гиперсвязи):
- активизация гиперсвязи;
· события, связанные с формой (события формы):
- щелчки мыши на кнопках
- получение и потеря фокуса ввода и изменение содержимого полей ввода, областей текста и списков;
- выделение текста в полях ввода и областях текста;
· события, связанные с мышью:
- помещение указателя мыши на гиперсвязь и активизация гиперсвязи.
События, связанные с документами, возникают при загрузке и выгрузке документа, в то время как события гиперсвязей возникают при их активизации или при помещении на них указателя мыши.
Чтобы обеспечить перехват события, необходимо написать функцию-обработчик события. В качестве обработчиков событий могут быть задану целые функции языка JavaScript или только группы из одного или нескольких JS-операторов. В таблице перечислены имена всех событий и условия их возникновения:
|
Потеря фокуса - атрибут onBlur
Атрибут обработчика события onBlur работает со следующими тегами HTML:
· <input. type=". . ." onBlur="expr | function()">
· <textarea onBlur="expr | function()"> . . . </textarea>
· <select onBlur="expr | function()"> . . . <option> . . . </select>
С помощью атрибута onBlur задается выражение языка JavaScript, которое выполняется, когда соответствующий элемент HTML-формы теряет фокус ввода. Потеря фокуса ввода происходит либо при щелчке мыши на другом элементе формы или другой формы, либо при переходе к другому элементу формы посредством клавиши [Tab]. Атрибут onBlur применяют для проверки данных, введенных в соответствующее поле.
Рассмотрим пример, в котором идет проверка на возраст. Если введено менее 16 - поле ввода очищается и выдается соответствующее сообщение:
a) && (0!=a)){ alert ("Вам нужно еще подрости до 16 лет \nа в возрасте "+a+" лет пожалуйте в детский сад"); document. forms[0].a. value = ""; document. forms[0].a. focus(); } } //-->
Ваш возраст | |
Имя |
<script language ="JavaScript">
<!--
function checkA(a) {
if (a == "")
a=0;
if (16>a) {
alert ("Вам нужно еще подрости до 16 лет \nа в возрасте "+a+" лет пожалуйте в детский сад");
document. forms[0].a. value = ""; // очищаем содержимое формы
document. forms[0].a. focus(); // устанавливаем фокус на первое поле
}
}
//-->
</script>
<form>
<table border=0>
<tr><td>Ваш возраст</td>
<td><input name="a" size=5 onBlur="checkA(this. value)">
</td></tr>
<tr><td>Имя</td>
<td><input name="name" size=25>
</td></tr>
</table>
</form>
Если в первое поле ввода было введено значение меньше 16, выдается сообщение, затем очищается поле ввода и устанавливается на него фокус, то есть программа не выпустит вас из поля до тех пор, пока не будет введено значение 16 или более.
Атрибут onChange - изменение содержимого поля и выбранных элементов списка.
Атрибут обработчика события onChange можно использовать в следующих HTML-тегах:
· <select onChange="expr | function()"> . . . <option> . . . </select>
· <textarea onChange="expr | function()"> . . . </textarea>
· <input type=text onChange="expr | function()">
Атрибут onChange задает выражение, которое должно выполняться при потере фокуса ввода элементом HTML-формы и при изменении содержимого этого элемента. Данный атрибут подобен атрибуту onBlur, однако для того чтобы возникло событие Change, содержимое поля должно быть изменено, и поле должно потерять фокус ввода.
Рассмотрим небольшой пример:
Выберите марку пива: Жигулевское Очаковское Бочкарев Красный восток
<script language ="JavaScript">
<!--
function selChange(seln) {
selNum = seln. beer. selectedIndex;
Isel = seln. beer. options[selNum].text;
alert("Выбрано: "+Isel);
}
//-->
</script>
<form>
Выберите марку пива:
<select name="beer" onChange="selChange(this. form)">
<option>Жигулевское
<option>Очаковское
<option>Бочкарев
<option>Красный восток
</select>
</form>
В этом примере имеется единственный объект select с именем beer, содержащий четыре элемента, определенные в тегах <option>. Каждый раз при выборе нового элемента вызывается функция JavaScript с именем selChange(). Для обращения к значениям тегов <option> в программе используется массив свойств options. Подобный пример разбирался ранее, только сейчас используется событие onChange.
Где это можно применить? Ну, представим, вы делаете заказ чего-либо в интернет-магазине, вы заполнили уже много полей характеристик товара, далее выбираете, допустим, цвет изделия, а если такого, например, нет, то еще до отправки формы, еще в момент ввода можно предупредить пользователя. Но а конечно для навигации такой метод использовать не рекомендуется, - лучше рядом кнопку поставить.
Атрибут onClick - активизация гиперсвязей
Атрибут onClick может использоваться в следующих тегах HTML:
· <a herf=URL onClick="expr | function()">. . .</a>
· <input. type="checkbox" onClick="expr | function()">
· <input. type="radio" onClick="expr | function()">
· <input. type="reset" onClick="expr | function()">
· <input. type="submit" onClick="expr | function()">
· <input. type="button" onClick="expr | function()">
Операторы языка JavaScript, заданные в атрибуте onClick, выполняются при щелчке мыши на таких объектах как гиперсвязь, кнопка перезагрузки формы или контрольный переключатель. Для контрольных переключателей и селекторных кнопок событие Click возникает не только при выборе элемента, но и при разблокировании.
Разберем пример использования атрибута onClick для кнопок, определенных тегами <input type="button"> в контейнере <form> . . . </form>:
<script language="JavaScript">
<!--
function but1() {
alert("Вы нажали первую кнопку");
}
function but2() {
alert("Вы нажали вторую кнопку");
}
//-->
</script>
<form>
<input type="button" value="Первая кнопка" onClick="but1()">
<input type="button" value="Вторая кнопка" onClick="but2()">
</form>
Когда пользователь щелкает мышью по кнопке, вызывается либо функция but1(), либо but2(). При этом с помощью метода alert() на экран выводится соответствующее сообщение. (Я часто применяю метод alert() так, как с помощью его очень удобно демонстрировать работу той или иной программы)
Разберем использование события onClick например для контрольных переключателей. Обработка этого события здесь выполняется как при включении, так и при выключении контрольных переключателей. Для проверки состояния переключателей следует использовать свойство checked, которое содержит значение true, если переключатель включен. Рассмотрим пример:
Переключатель 1
Переключатель 2
<script language="JavaScript">
<!--
function chk1(f) {
if (f. checked)
alert("Первый переключатель включен");
else
alert("Первый переключатель отключен");
}
function chk2(f) {
if (f. checked)
alert("Второй переключатель включен");
else
alert("Второй переключатель отключен");
}
//-->
</script>
<form name="chkform">
<input type="checkbox" checked name="c1" onClick="chk1(this. form. c1)"> Переключатель 1 <BR>
<input type="checkbox" name="c2" onClick="chk2(this. form. c2)"> Переключатель 2
</form>
после передачи значения this. form. c1 или this. form. c2 в соответствующие функции. Проверяется свойство checked контрольного переключателя, переданного функции, и в зависимости от значения свойства checked срабатывает метод alert().
Обычно подобный подход применяется для сложного ввода каких-то данных, и в зависимости от установленного "флажка" предлагается заполнять соответствующие поля форм или переместить фокус в одно из полей, так как данные отслеживаются еще при вводе текущей формы.
Подтверждение активизации гиперсвязи
Гиперссылка обычно всегда срабатывает по клику мыши, но иногда нужно, чтобы пользователь был уверен, что хочет перейти по ссылке в следующий документ. Для этого существует метод confirm(), который отображает на экране окно сообщения с кнопками "Ok" и "Cancel". Для перехвата события в теге <a href= ... > мы применим событие onClick. рассмотим пример:
http://docs. *****
<a href="http://docs. *****" onClick="return confirm('Вы действительно хотите перейти по ссылке?')">
http://docs. *****
</a>
при клике на ссылке выйдет окно для подтверждения активизации ссылки. Также такой подход можно применить и для отработки других функций, например функция запроса пароля.
Получение фокуса ввода - атрибут onFocus
Атрибут обработчика события onFocus работает со следующими тегами HTML:
· <input. type="text" onFocus="expr | function()">
· <textarea onFocus="expr | function()"> . . . </textarea>
· <select onFocus="expr | function()"> . . . <option> . . . </select>
Название говорит за себя, атрибут onFocus позволяет обрабатывать события, связанные с получением фокуса ввода. Я не буду переписывать приведенное выше описание атрибута onBlur. Все дело в том, что эти атрибуты очень похожи, только в отличие от onBlur, здесь обрабатывается событие при получении фокуса ввода.
Атрибут onLoad - загрузка документа
Атрибут обработчика события onLoad работает со следующими тегами HTML:
· <body onLoad="expr | function()"> . . . </body>
· <frameset> . . . <frame onLoad="expr | function()"> . . . </frameset>
Атрибут onLoad, помещенный в тег <body>, активизирует заданные операторы языка JavaScript, когда загрузка текущего документа в браузер завершена. Событие происходит после завершения загрузки текста HTML в текущее окно или фрейм.
Для чего это нужно? Иногда пользователь не дождавшись загрузки всего документа переходит по ссылке в следующий. Может быть такая ситуация, что предварительно нужно ввести какие-то данные в текущем документе, поля которых еще не загружены. Событие onLoad не может использоваться для изменения текущего документа, но с помощью соответствующих функций можно например оставить данные в cooke, или в случае фреймосодержащего документа - в обычные переменные. Также для гарантированной отработки каких-то функций на языке JavaScript в текущем документе.
Атрибут unLoad - выгрузка документа
Атрибут обработчика события unLoad работает со следующими тегами HTML:
· <body unLoad="expr | function()"> . . . </body>
· <frameset> . . . <frame unLoad="expr | function()"> . . . </frameset>
Соответствующее событие возникает при выгрузке текущего документа, то есть вызывается функция-обработчик события перед выгрузкой документа из текущего окна или фрейма.
Для чего это может пригодиться? Представим, что пользователь в последний момент отказался отправить форму и кликнул на какую либо ссылку или баннер, а нам нужно знать некую, например для статистики, информацию введенную пользователем, - тут можно проверить если форма не отправлялась и не пустые ли поля, отправить без подтверждения с соответствующей пометкой. Так, как событие возникает перед выгрузкой, то этот обработчик можно использовать например для контроля необходимого ввода регистрационной информации и др.
Атрибуты onMouseOver и onMouseOut - перемещение мыши
Нужно сказать очень популярные атрибуты. OnMouseOver позволяет активизировать JavaScript-операторы, когда курсор мыши находится на активной гиперсвязи, а атрибут onMouseOut - когда курсот отведен от гиперсвязи.
· <a href=". . . " onMouseOver="expr | function()"> . . . </a>
· <a href=". . . " onMouseOut="expr | function()"> . . . </a>
Атрибут onMouseOver операторы JavaScript, когда указатель мыши наведен на гиперсвязь, в которой задан этот атрибут. При обработке событий MouseOver можно изменять сообщения в строках состояния и текстовые поля. Кроме того, часто используются для динамической подмены рисунка в навигационной панели.
Атрибут onMouseOut предоставляет возможность активизировать операторы языка JavaScript при помощи курсора мыши за пределы области гиперсвязи. Обработку события MouseOut следует выполнять, когда необходимо отменить ранее заданные действия. Например, если при обработке события MouseOver произошла подмена рисунка из массива images, то при обработке события MouseOut могут быть востановлены исходные данные.
Для получения более подробной информации поместите указатель мыши на гиперссылку.
OnMouseOver OnMouseOut
Здесь приведено краткое описание атрибута
<script language ="JavaScript">
<!--
function clearf() {
document. forms[0].atr_text. value = "Здесь приведено краткое описание атрибута";
}
var atrText1=
"Атрибут OnMouseOver-помещение мыши на гиперсвязь\r\n\n"+
"Далее может находиться подробное описание этого\r\n"+
"атрибута обработчика событий";
var atrText2=
"Атрибут OnMouseOut-обработка события при перемещении\r\n"+
"мыши за пределы гиперсвязи\r\n\n"+
"Далее может находиться подробное описание этого\r\n"+
"атрибута обработчика событий";
//-->
</script>
Для получения более подробной информации поместите указатель мыши на гиперссылку.
<a href="#" onMouseOver="document. forms[0].atr_text. value=atrText1" onMouseOut=clearf()>OnMouseOver</a>
<a href="#" onMouseOver="document. forms[0].atr_text. value=atrText2"onMouseOut=clearf()>OnMouseOut</a>
<form>
<textarea rows=5 cols=60 name="atr_text" wrap="soft" >
Здесь приведено краткое описание атрибута
</textarea>
</form>
На основе этой программы можно создать другие документы и включить их в собственную обработку различных событий. В данном примере обращение к объекту form[0], хотя в данном документе это уже пятая по счету форма и я создал form[4]. Имейте в виду, что если в текущем документе имеется несколько форм, в массиве следует писать соответствующий индекс. В настоящее время имеется множество готовых программ с использованием этих атрибутов. На этой странице в частности они использованы для кнопок навигации. Тоесь это наиболее распространенные атрибуты.
Атрибут onSelect - выделение текста
Атрибут onSelect может быть использован со следующими тегами:
· <input. type="text" onSelect="expr | function()">
· <textarea onSelect="expr | function()"> . . . </textarea>
Этот атрибут запускает обработчик события, когда пользователь выделил фрагмент текста в поле ввода или области текста.
Для чего это может пригодиться? - Сложный вопрос. Наверное опять же для статистики, например копировал ли пользователь из формы HTML-текст сформированный специально для него. Например, если не копировал, то можно задействовать событие например UnLoad при попытке выйти из текущего документа и т. д.
Атрибут onSubmit - передача формы
Атрибут onSubmit можно использовать только с тегами, определяющими формы:
· <form onSubmit ="expr | function()"> . . . </form>
Событие Submit возникает при нажатии кнопки, заданной тегом <input type="submit">. Такая кнопка обычно присутствует во всех формах, данные из которых могут пересылаться на Web-сервер.
Поскольку все функции JavaScript выполняются на локальном компьютере, обработка событий Submit происходит без передачи каких-либо данных на сервер. Поэтому обработку событий, связанных с передачей данных формы, удобно выполнять в тех случаях, когда эти данные можно обработать локально, не пересылая их на сервер, либо когда перед передачей данных необходимо проверить правильность заполнения формы. Функция-обработчик событий Submit должна возвращать булево значение, что дает возможность остановить процесс передачи данных формы. Если на языке JavaScript не используется проверка правильности введенных данных в форму, то это проверяется на сервере при помощи скрипта CGI (Common Gateway Interface). Если провести проверку правильности ввода можно избежать отправки неполных или неправильных данных (зачастую это не делается, а проверяется уже на сервере - ведь это лишних 2 показа баннера в случае ошибки - ох уж эта реклама). Приведем пример, в котором всеже проверяются данные на локальном компьютере, скажем непустое поле:
Действующую модель примера приводить не буду в связи с тем, что здесь должен быть задействован еще и CGI скрипт, который должен помещаться на сервере.
<script language="JavaScript">
<!--
function formfre(f) {
if (f. value == "") {
alert ("Перед отправкой поле 'адрес' должно быть заполнено");
return false;
}
else {
return true;
}
}
//-->
</script>
<pre>
<form name="myForm"
method="post"
action="http://wdstudio. *****/cgi-bin/saveform. cgi"
onSubmit="formfre(myForm. ydate)">
Имя: <input type="text" size=30 name="yname"><br>
Адрес: <textarea name="ydate" rows=5
cols=50></textarea><p>
<input type="submit" value="Отправить">
</form>
</pre>
В приведенном примере функция, вызываемая посредством атрибута обработчика событий onSubmit, прекращает передачу данных текущей формы на Web-сервер до тех пор, пока область текста ydate остается пустой. Для того чтобы остановить пересылку данных, функция formfre() возвращает значение false. Когда область текста ydate заполнена, функция возвращает значение true, тем самым разрешая передачу формы.
Чтобы переслать данные HTML-формы на удаленный Web-сервер, нужна обработка данных на самом сервере при помощи CGI-скрипта. Технология CGI является всеобщим стандартом, который позволяет обрабатывать на сервере информацию, вводимую пользователем и обслуживать запросы пользователей, динамически формируя необходимые документы. Для создания CGI-программ можно использовать различные языки программирования, однако в настоящее время чаще всего применяют языки PERL(Practical Extraction and Report Language). В приведенном выше примере с помощью атрибута action тега <form> задается имя скрипта, который должен получить и обработать данные формы. Обработка может означать: поиск переданной информации в базе данных, внесение новой записи в базу, проверку правильности содержимого формы и т. д. Значение атрибута method задает метод передачи данных формы. Так, значение "post" определяет метод, при котором данные формы передаются скрипту, обрабатывающему их на сервере, как стандартный входной поток. Имя скрипта указывают в атрибуте action.
Приведем пример CGI-скрипта на языке Perl который будет читать данные приведенной выше формы из входного потока, открывать HTML-файл для добавления записи и помещать к имеющемуся тексту данные формы. При этом напишем проще, используя библиотеку "cgi-lib. pl" ставшую уже стандартной. Скрипт запишем в файл "saveform. cgi":
#! /usr/bin/perl
# путь к Perl-у на сервере
reguire "cgi-lib. pl"; # используемая библиотека
&ReadParse; # функция из модуля cgi-lib. pl
open (F, ">>logo. htm"); # открытие файла для добавления
$theName = $in {'yname'}; # Из массива переносим в переменные
$theYdate = $in {'ydate'};
print F "<hr><b>$theName</b><hr>"; # производим запись в файл
print F "<dl><dd>$theYdate</dl>";
close (F); # закрываем logo. htm
Читая данные формы из входного потока, скрипт записывает содержимое элементов формы в массив $in. Так, например элементу формы с именем ydate в Perl-программе соответствует элемент массива $in{'ydate'}. Затем скрипт дописывает новые данные в файл, используя запись вида ">>", поэтому объем файла будет увеличиваться с добавлением новых записей.
В языке JavaScript отсутствуют клиентские средства для записи на диск, главным образом по соображениям защиты информации.
Данные формы можно отсылать на сервер и по электронной почте, указав необходимый URL, начинающийся с mailto:. Ранее разбирался подобный пример, теперь будем говорить подробнее.
Связь с электронной почтой средствами языка JavaScript
Использование адресов URL, начинающихся с mailto:, предоставляют дополнительные возможности разработчикам JavaScript-программ. Известно, что с помощью атрибута action в теге <form>, можно заать арес URL, к которому будут передаваться данные формы. Используя обработчик события Submit и обратившись к свойству action объекта form, можно динамически изменить значение атрибута action.
Задавая в этом атрибуте адрес URL типа milto:. . ., анные формы можно посылать как сообщения электронной почты на почтовый сервер для доставки получателю. Разберем пример:
Ведите текст сообщения, укажите адрес и затем нажмите кнопку.
To: | |
Subject: | |
Text: |
Вот текст этой программы:
<script language="JavaScript">
<!--
function sendMail() {
if (document. forms[0].recipient. value == "") {
alert ("Не указан адресат!");
return false;
}
if (document. forms[0].message. value == "") {
alert ("Нет текста сообщени\я!");
return false;
}
if (document. forms[0].subject. value == "") {
document. forms[0].subject. value = "No subject";
}
document. forms[0].action = "mailto:"+
document. forms[0].recipient. value+ "?subject=" +
document. forms[0].subject. value;
return true
}
//-->
</script>
Ведите текст сообщения, укажите адрес и затем нажмите кнопку.<P>
<form method="post" enctype="text/plain">
<table border=0>
<tr>
<td aign="right"><B>To:</B></td>
<td><input type="text" name="recipient" size=60>
</td>
</tr>
<tr>
<td aign="right"><B>Subject:</B></td>
<td><input type="text" name="subject" size=60>
</td>
</tr>
<tr valign="top">
<td align="left"><B>Text:</B></td>
<td><textarea name="message" rows=4 cols=60></textarea>
</td></tr>
</table>
<hr>
<input type="submit" value="Отправить письмо" onClick="sendMail()">
</form>
Эта программа создает несколько полей ввода, предоставляя пользователю возможность задать адрес получателя (recipient), тему (subject) и текст сообщения электронной почтыe, данные передаются.
Динамическое назначение обработчика события
Кроме всего прочего, имеется возможность динамического назначения обработчиков событий для элементов ддокумента. Например, кнопка может быть создана с помощью тега, в котором атрибут обработчика события onClick не задан. Однако значение этого атрибута можно определить в дальнейшем, то есть динамически задать для этой кнопки функцию-обработчик Click. Кроме того, в процессе работы программы определенные ранее обработчики событий могут быть сброшены или переопределены.
Рассмотрим документ, содержащий кнопку, для которой при выборе гиперсвязей задается тот или иной обработчик событий. В данном случае для кнопки переопределяется обработчик события Click, который активизирует JavaScript-функцию для загрузки нового документа. Имя загружаемого документа указывают путем присваивания свойству location текущего окна имени соответствующего файла. Кнопка создается без обработчика события, поэтому перед ее активизацией следует выбрать соответствующий файл щелчком мыши на одной из гиперсвязей.
Задать загрузку файла 1 при нажатии кнопки
Задать загрузку файла 2 при нажатии кнопки
Задать загрузку файла 3 при нажатии кнопки
<script language="JavaScript">
<!--
function button1() {
location = "1.htm";
}
function button2() {
location = "2.htm";
}
function button3() {
location = "3.htm";
}
//-->
</script>
<form>
<input name="but1" type="button" value="Загрузить файл">
</form><p>
<a href="#" onClick="document. forms[0].but1.onClick=button1()">
Задать загрузку файла 1 при нажатии кнопки </a><BR>
<a href="#" onClick="document. forms[0].but1.onClick=button2()">
Задать загрузку файла 2 при нажатии кнопки </a><BR>
<a href="#" onClick="document. forms[0].but1.onClick=button3()">
Задать загрузку файла 3 при нажатии кнопки </a>
В этом примере я специально написал неработающие функции, чтобы не делать HTML файлы и вы никуда не ушли с этой страницы при нажатии кнопки. Для того, чтобы все работало нужно просто заменить например location = "1.htm"; на window. location. href = "1.htm"; и так со всеми функциями.
С помощью приема, показанного в примере, можно динамически задавать обработчики событий для других HTML-объектов при условии, что соответствующие атрибуты обработчиков событий для этих объектов могут быть определены. Если это условие нарушено, обработчик событий будет игнорироваться. Например, если в предыдущем примере записать: document. forms[0].but1.onloaad=button3, то функция-обработчик событий button3 все равно не будет вызываться при создании кнопки, поскольку Load для объектов button не возникает.
В языке JavaScript тип данных может с легкостью переопределяться, при этом вы можете и не заметить в каком месте, - вот в этом то и сложность. С другой стороны, если вы будете хорошо ориентироваться в принципах преобразований типов, знать все свойства переменных и массивов, эти возможности только принесут вам уверенность в написании программ.
Переменные языка JavaScript могут хранить значения различных типов:
· Строки - последовательность символов;
· Числовые значения - целые и действительные числа;
· Булевы значения - только два значения true или false;
· Массивы - множества однотипных переменных;
· Даты - значения даты и времени.
Время жизни переменной связано с окном, в котором они созданы и зависит от того, где они определены. JavaScript- программы содержатся в документах HTML, и при загрузке нового документа в браузер любые переменные, созданные в программе, будут удалены.
Чтобы сохранить какие-либо значения при загрузке нового документа в JavaScript имеются только 2 решения:
· путем создания переменных во фреймосодержащем документе верхнего уровня;
· путем использования "cookies";
Для сохранения переменных и функций с помощью фреймосодержащих документов эти переменные и функции неодходимо определить в документе верхнего уровня, а затем использовать свойства parent или top объекта window для обращения к ним из документов, загруженных в фреймы. ВАЖНО: такие переменные и функции нужно задавать в заголовке документа верхнего уровня между тегами <HEAD> . . . </HEAD>. Конечно, существует вероятность, что документ может быть загружен без фрейма и тогда обращение к неопределенному объекту вызовет ошибку, но можно предварительно проверить загружен ли документ в фрейм:
<script language="JavaScript">
<!--
if(self. parent. frames. length==0) {
document. writeln('Эта страница загружена в браузер без фрейма.');
}
//-->
</script>
Cookies позволяют сохранять небольшие фрагменты информации на локальном диске пользователя. Устанавливая значения cookies и прореряя их на последующих стадиях работы, иожно восстанавливать необходимые значения. Более подробно о cookies будем говорить позже.
Имена переменных, создание переменных
В языке JavaScript создать переменную гораздо проще, чем в других языках программирования. Например, при создании переменной нет необходимости указывать ее тип. Переменные определяют как с начальными значениями, так и без них. В процессе выполнения программы уже созданные переменные можно даже приводить к различным типам данных. Имена переменных могут начинаться с любой буквы (от a до z, или A-Z ) либо с символа подчеркивания (_), оставшаяся часть может содержать цифры, символы подчеркивания и буквы. Помните то, что в именах переменных различаются символы верхнего и нижнего регистра: например MyVariable - это не то же что myvariable.
Переменную можно создать одним из способов:
· при помощи оператора var и операции присваивания (=);
· при помощи операции присваивания (=).
Оператор Var используют не только для создания переменной, но и для ее инициализации. Операция присваивания (=) необходима, чтобы запомнить в переменной значение, и при работе с переменными, созданными без начального значения, ее использовать не обязательно. Например:
var MyVariable = 35
создает переменную с именем MyVariable, содержащую числовое значение 35. Переменная существует до тех пор, пока загружен текущий документ. Если вы создаете эту переменную во фреймосодержащем документе верхнего уровня, к ней следует обращаться с помощью выражения top. MyVariable, а еще лучше parent. MyVariable для подстраховки от вложенных фреймов.
В языке JavaScript переменные можно переопределять, даже задавая другой тип данных. Например после выполнения оператора
var MyVariable = "35"
переменная будет уже хранить строку "35". Подобные преобразования-то и приводят иногда к недоразумениям. Вот например:
<script language="JavaScript">
<!--
var a = 35, b = "5", c;
c = a + b;
c = c - a;
document. writeln("C=" + c);
//-->
</script>
как вы думаете какое значение примет переменная "c" после выполнения программы? Если вы не знакомы с правилами преобразования переменных в JavaScript - не угадаете. Значение переменной "c" после завершения блока будет равным числовому значению 320. О принципах преобразования типов переменных будем говорить позже. Переменную можно определить и не используя оператор "Var", а просто достаточно присвоить значение, причем каков тип данных будет присвоен, того типа и окажется переменная. Оператор "Var" используется по большей части для читабельности JS-программы. Переменная может быть задана и без начальных значений, например:
var MyVariable;
создана переменная с именем MyVariable, не имеющая определенного типа данных и начального значения. Переменные, создаваемые при помощи таких описаний, известны как неопределенные (null variable). Например сравнивая такую переменную со значением null, можно узнать, определена ли переменная. Однако нельзя путать разные вещи: ""- пустая строка это строковый тип и вовсе не null-значение.
Тип переменной может быть установлен в любом месте JS-программы в отличие от других языков программирования, что дает дополнительную гибкость, но и возможность запутаться - помните это. К переменной, которая не создана, обратиться невозможно. Если нужно создать временную переменную, например счетчик цикла, нужно записать перед ней префикс var:
for (var i=0; i<= document. links. length; i++) {
}
в данном примере инициализируется переменная i, и затем используется в качестве счетчика оператора for.
Переменные, определенные с помощью var, разделяются запятой. Для большей читабельности JS-программы каждую переменную записывают обычно с новой строки.
Строковые переменные
Строка представляет собой множество символов, заключенных в одинарные или двойные кавычки. Строки в JavaScript рассматриваются как объекты. Это практически самый распространенный вид объектов, поэтому в JavaScript имеется множество стандартных функций, предназначенных для управления строками. Создать объект String можно одним из нескольких способов:
· присваивание значения при помощи конструктора String();
· использование оператора Var и оператора присваивания для создания и инициализации строки;
· создание и инициализация строковой переменной в операторе присваивания;
· преобразование переменной числового типа путем сложения со строковым типом (10+"" ==> "10");
Самым простым и наиболее распространенным способом создания объекта String является использование таких операторов, как
var myVariable = "Хорошее пиво";
Приведенный оператор присваивает строку "Хорошее пиво" строковой переменной myVariable. Переменная myVariable рассматривается как строковый объект и может использовать любой из стандартных методов объекта String языка JavaScript. Оператор Var можно пропустить. Как и говорилось ранее, он нужен в основном для читабельности программы.
Для создания строковых объектов допускается использовать конструктор String() с оператором new. В действительности объект String не относится к языку JavaScript, а является встроенным объектом браузера главным образом потому, что строки создаются тогда, когда пользователь в них нуждается. Рассмотрим пример:
var myVariable = new String();
Этот оператор создает новый объект - пустую строку с именем myVariable. Изначально это пустая строка (""), а значение свойства myVariable. length равное 0.
Конструктор String() допускает передачу заданной строки в виде аргумента:
var myVariable = new String("Правильное пиво");
Строковый объект может содержать специальные символы, управляющие форматированием строк:
· \n - символ новой строки;
· \r - символ возврата каретки;
· \f - код перехода на новую страницу;
· \xnn - представление символа в виде шестнадцатиричного ASCII-кода nn;
· \b - код клавиши [Backspace].
эти символы будут правильно интерпретированы только в контейнерах <textarea> и в методах "Alert". Форматирование же для document. write() осуществяется другими методами или тегами HTML.
Объект String имеет только одно свойство - length, значением которого является количество символов в строке, содержащейся в объекте. Методы объекта String можно разделить на две категории:
· методы форматирования HTML-документа;
· методы обработки строк.
Методы форматирования документа применяются для вывода строк в документ, а методы управления строками - для проверки и изменения содержимого объекта String.
Приведем перечень методов: (буква Ф - методы форматирования, а буква У - управления строками)
|
Числовые переменные
Числовые значения могут быть либо целыми, либо числами с плавающей точкой. Числа с плавающей точкой называют действительными или вещественными. К числовым значениям применимы операции:
· умножения (*);
· деления (/);
· сложения (+);
· вычитания (-);
· увеличения (++);
· уменьшения (--);
Кроме того, используют операции умножения, деления, сложения и вычитания в сочетании с присваиванием (*=, /=, +=, -=), а также методы объекта Math.
Булевы переменные
Булевы, или логические, переменные содержат только литеральные значкения - true и false - и используются в логических выражениях и операторах.
Для проверки значения булевой переменной используют и операцию логического равенства:
booleanVar == true
хотя в данном случае такая операция проверки излишняя. Для проверки значений, которые не являются истинными, используют знак логического отрицания (!). Например, выражение! booleanVar возвратит значение true, если значение booleanVar равно false. Вместо слов "true" и "false" можно использовать числовые значения "1" и "2", поскольку именно такбулевы значения представлены в памяти компьютера: 1==true и 0==false.
Переменные-массивы
Переменные-массивы содержат упорядоченные наборы значений одного типа, для удобства представленные в виде одной переменной. Многие стандартные объекты-свойства документа в языке JavaScript, в частности гиперсвязи и метки, являются массивами. В языке JavaScript к элементу массива следует обращаться при помощи выражения:
arrayName[index]
где arrayName - имя массива, а index - числовая переменная или число, задающее позицию элемента в массиве. Например, arrayName[0] является первым элементом этого массива. Индексы элементов массива в языке JavaScript начинаются с нуля. Элементы массива могут быть любого типа, например строками или булевыми переменными. Кроме того, при определенных условиях массив может содержать элементы различных типов данных. В языке JavaScript массивы создаются при помощи:
· конструктора Array();
· конструктора Object();
· конструктора, определенного пользователем.
С помощью конструктора Array() не только создают объект array, но и присваивают начальные значения его элементам. Существует возможность добавлять элементы в массивдинамически - путем присваивания определенных значений элементам массива. Допускается также "пропускать" элементы массива и задавать их в любой последовательности. Для создания нового экземпляра объекта array конструктор Array() необходимо использовать с оператором new. Например, в седующем примере создается массив с именем arrayImg, содержащий два элемента, каждый из которых является объектом String
var path = "c:/images/" ,
arrayImg = new Array();
arrayImg[0] = path+"img1.gif";
arrayImg[1] = path+"img2.gif";
При использовании конструктора Array() значение свойства length устанавливается автоматически. Поэтому после инициализации элементов массива в приведенном примере выражение arrayImg. length возвращает значение 2. Элементы массива также могут быть заданы как параметры конструктора:
var path = "c:/images/" ,
arrayImg = new Array(path+"img1.gif", path+"img2.gif");
Данное выражение представляет собой сокращенную запись предыдущего примера.
В языке JavaScript можно создавать массив, это массив в котором элементы имеют различный тип данных:
var myArray = new Array(3.14, true, 85, date(), "word");
создает массив, элемент myArray[0] которого является числом с плавающей запятой, элемент myArray[1] - булевым значением, элемент myArray[3] - объектом Date.
Размер массива и, следовательно, значение свойства length объекта, создаваемого конструктором Array(), зависят от максимального значения индекса, который применялся для задания элемента массива. Например:
var myArray = new Array;
myArray[20] = "Это 21 элемент массива";
двадцать первому элементу массива присваивается строковое значение "Это 21 элемент массива", а значение свойства myArray. length равно 21 независимо от того имеют ли значения элементы массива с индексом меньше 20.
Значение свойства length объекта Array автоматически устанавливается при явном указании количества элементов в конструкторе Array():
myArray = new Array(10);
оператор создает массив из 10-ти элементов от 0 до 9. Значение свойства length массива нельзя установить путем присваивания, так как length является свойством только для чтения. Например, чтобы задать значение 10 для свойства length нужно только определить значение последнего, в данном случае 9-го элемента массива:
myArray = new Array();
myArray[9] = 0;
Кроме того, существует возможность задать значения элементов массива при его конструировании :
myArray = new Array(0,0,0,0,0,0);
Конструктор Object()
Понятия объект и массив равнозначны, хотя конструкторы Object() и Array() работают по-разному. Конструктору Object() невозможно передать несколько элементов массива, поэтому такое выражение
var myObj = new Object(value1, value2);
работать не будет. Массивы, создаваемые при помощи конструктора Object(), не имеют свойства length. Поэтому, создавая массив таким способом, следует либо организовывать обход этого массива посредством цикла for и подсчитать элементы массива, либо жестко задать длину массива как значение его первого элемента (обычно так поступают моделируя свойство length), а затем обращаться к нему по мере необходимости для проверки размера массива, увеличение значения при добавлении нового элемента, а также в качестве параметра цикла при циклическом считывании или изменения значений элементов. Такой объект часто бывает неприемлем для случаев, когда содержимое массива должно динамически изменяться, поэтому в большинстве случаев пользуются конструктором Array(). Значения индексов массивов, создаваемых в конструкторе Object(), также начинаются с нуля. Для создания массива при помощи конструктора Object() принято использовать запись вида:
var myObj = new Object();
myObj[0] = 2; // задаем размерность массива
myObj[1] = "Первый элемент";
myObj[2] = "Второй элемент";
Чтобы узнать размер массива, созданного подобным образом, необходимо обратиться к элементу myObj[0]. Значением свойства myObj. length является null, так, как значение не определено.
Преобразование строк и чисел
Наконец подошли к самой интересной теме. Дело в том, что в языке JavaScript в отличие от других языков нет функций типа Val() и Str(). Однажды я видел программку на языке JavaScript, автора не буду называть, где при помощи всевозможных преобразований типов данных была попытка запутать программу для "непродвинутых" пользователей. Так вот, нужно запомнить два правила:
· Преобразование числа в строку символов производится путем сложение числового аргумента со строковым, независимо от перестановки слагаемых. Например если переменная varI=123, то преобразовать переменную и следовательно ее значение в строку символов можно: varI = varI + "" или наоборот: varI = "" + varI. Если сложить не с пустой строкой: varI = varI + "456", то результатом значения переменной varI станет "123456". Это же справедливо и наоборот: varI = "456" + varI - результат: "456123";
· Преобразование строки в число производится путем вычитания одного операнда из другого и также независимо от их позиции. Например если переменная varI = "123", то преобразовать ее в число можно если вычесть из нее значения 0: varI = varI - 0, и соответственно значение переменной из строкового типа преобразуется в числовой: 123. При перестановки операндов соответственно знак числового значения поменяется на противоположный. В отличие от преобразования числа в строку в действиях вычитания нельзя применять буквенные значения. Так если "JavaScript" + 10 превратится в varI == "JavaScript10", то операция типа varI = "JavaScript" - 10 выдаст значение "NON" - тоесть такая операция не допустима. И еще, при вычитании строкового значения из строкового же также происходит преобразование: varI = "20" - "15", значением переменной varI станет число 5.
Объект window является объектом верхнего уровня в который загружается документ, являющийся дочерним объектом, именно поэтому из дочернего объекта мы не можем воздействовать на свойства и методы родительского окна. Это в случае, если объект document не создает новое окно. Если посредством программы JavaScript создается новое окно из объекта document, - новое окно становится уже дочерним объектом от document, следовательно мы уже можем им управлять. И документ, загруженный в новое окно также является потомком от объекта document окна верхнего уровня, следовательно из документа, загруженного в новое окно мы тоже можем управлять этим окном. То есть, окно, созданное из объекта document является потомком этого объекта и на него мы можем воздействовать. В виду того, что в любом случае существует основное родительское окно которое можно просто закрыть, тем самым лишить потомков родителя и тогда основным становится первое созданное окно, а если все созданы из одного документа, то о наследственности вообще речи быть не может - они станут разрозненны, следовательно массив windows - не существует и не может таковой существовать. Окнам можно задавать только имена и получать доступ только через имя. При исчезновении родителя исчезает и имя - окно становится "сиротой" - это предотвращает обращения к несуществующим объектам window. К чему я это тут распинаюсь? Часто задают вопросы: какими средствами JavaScript можно закрыть какое-либо окно, созданное другой программой? Ответ - нет таких средств. Нужно просто кликнуть на "крестик" в правом углу окна или воспользоваться меню.
Метод open() объекта window позволяет открывать новые окна, определяя различные их характеристики (размер, координаты, наличие панели инструментов, полосы скроллинга и др.). Кроме того, из JavaScript-программы можно управлять загруженным в окно документом, динамически изменяя его при помощи методов объекта document, как open(), write() и close().
Метод open() объекта window вызывается при помощи операторов:
window. open("URL", "windowName", ["windowFeatures, . . ."]);
где строка "URL" - адрес ресурса, загружаемого в новое окно. Если URL не указан, окно открывается, но загрузки документа не происходит. (Если не указывается URL, - оставляются кавычки и запятая). С помощью аргумента "windowName" задают имя окна, это имя не является его заголовком. Аргумент windowFeatures представляет собой список характеристик нового окна, которые задавать не обязательно. Эти характеристики представляют собой строку, в которой через запятую без пробелов перечисляются атрибуты: наличие меню, полос прокрутки, рамки, позволяющей изменять размер окна, данные о размерах окна и др. Вновь созданное окно получает фокус ввода, который можно при необходимости изменить методами: focus() и blur().
Каждая характеристика окна представляется в виде атрибута с уникальным именем и может быть включена или выключена при помощи установок yes/no или 1/0. Отразим в таблице список всех атрибутов окон:
Атрибут | Значения | Что определяет |
copyhistory | [=yes|no] | [=1|0] | Сохранение истории загрузки документов в данное окно |
directories | [=yes|no] | [=1|0] | Наличие в данном окне кнопок групп новостей |
height | =pixelheight | Высоту окна в пикселах |
location | [=yes|no] | [=1|0] | Наличие поля Lacation |
menubar | [=yes|no] | [=1|0] | Наличие меню |
resizable | [=yes|no] | [=1|0] | Наличие рамки окна, позволяющего менять его размеры |
scrollbars | [=yes|no] | [=1|0] | Наличие линеек прокрутки |
status | [=yes|no] | [=1|0] | Наличие строки состояния |
toolbar | [=yes|no] | [=1|0] | Наличие панели инструментов |
width | =pixelwidth | Ширину окна в пикселах |
По умолчанию атрибутам всегда присваивается значение yes, а размер нового окна (если он не задан) соответствует размеру предыдущего. Атрибуты можно указывать в произвольном порядке. В следующем примере создается новое окно размером 200х100 пикселов. Внимание, в программе нет проверки существования окна, не нажимайте кнопку "Закрыть окно" если окно еще не создано - это приведет к ошибке. Проверить существование окна можно, но об этом скажем позже. В загружаемом документе также существует кнопка закрытия окна, которая использует для объекта window псевдоним self:
Вот пример этой программы:
<script language="JavaScript">
<!--
function opWind() {
var myUrl = "http://wdstudio. *****/exewin. htm";
myWin=window. open(myUrl, "wind1", "width=200,height=100,resizable=no, scrollbars=no, menubar=no");
}
-->
</script>
<input type="button" value="Открыть окно" onClick="opWind()">
<input type="button" value="Закрыть окно" onClick="myWin. close()">
Мы видим, что управлять порожденным окном можно как из родительского окна, так и из документа внутри созданного окна.
А вот что в документе загружаемом в новое окно:
<HTML>
<HEAD>
<TITLE>Пример для нового окна</TITLE>
</HEAD>
<BODY><CENTER>
<FONT COLOR="#FF0000" SIZE="+2">Это вновь созданное окно.</FONT>
<input type="button" value="Закрыть окно" onClick="self. close()">
</CENTER>
</BODY>
</HTML>
Здесь myUrl - адрес ресурса, который загружается в новое окно, в данном случае это http://wdstudio. *****/exewin. htm, что позволяет при необходимости изменять эту строковую переменную и загружать различные ресурсы. Если бы строка "width=200,height=100,resizable=no, scrollbars=no, menubar=no" была бы пропущена, то новое окно унаследовало бы все характеристики родительского окна. Строку свойств окна можно задать также и в строковую переменную, а затем подставлять уже переменную, это даст возможность динамически управлять свойствами порожденного окна:
var proStr="width=200,height=100,resizable=no, scrollbars=no, menubar=no";
myWin=window. open(myUrl, "wind1", proStr);
Переменная myWin - становится объектом, через который можно воздействовать на окно из объекта document родительского окна. Именно через запись вида myWin. close() можно закрыть окно, как в приведенном примере, также можно управлять фокусом ввода и менять свойства.
Различия между фреймами и окнами
Для объекта window в языке JavaScript существует ряд синонимов, использование которых зависит от структуры HTML-документа. Кроме того, отдельное окно является новым окном браузера с собственными значениями свойств window, top и self и, может содержать другие объекты, например фреймы. Не путайте автономные окна с объектами window - это разные вещи.
Автономные окна также являются объектами, однако в отличие от фреймов в языке JavaScript отсутствует массив windows - в начале я распинался пытаясь подвести вас к тому, чем руководствовались разработчики языка, чтобы не допустить "куда-то исчезающие объекты", хотя и фреймы ненароком могут исчезать. Ссылка на вновь создаваемое окно может присваиваться переменной в качестве значения, но свойства этого объекта не соответствуют свойствам текущего документа. Объекты frame и window в языке JavaScript идентичны, однако различия между документом, загруженным в автономное окно, и фреймосодержащим документом существенны. Автономные окна в действительности являются клонами главного окна браузера. В них также могут быть порождены фреймы и загружены различные документы.
Метод open()
Для управления окнами и их содержимым необходимо запоминать ссылки на новые окна, создаваемые при помощи метода open(). Для этого в JavaScript-программах используются переменные, которые в последствии могут записываться как префиксы других JavaScript-выражений, обращающихся к определенным окнам, например выражения document. write() и т. п. Так с помощью одного оператора в языке JavaScript можно создать новое окно и запомнить ссылку на него в переменной например:
myWin = open("", "myWindow", "width=200, height=300");
При этом переменная myWin становится объектом window, и ее можно использовать, например, для динамической записи в это окно нового текста. Динамическое обновление содержимого документов удобно выполнять при возникновении каких-либо событий - активизации гиперсвязей, нажатии кнопок и т. п.
Динамическое изменение объектов в окне
С помощью программы, загруженной в родительское окно, можно динамически изменять объекты в порожденных окнах, записывая текст в HTML-формате в объект document нужного дочернего окна.
Рассмотрим пример программы, которая динамически создает новое окно и загружает в него документ, содержащий форму с полем ввода. В текущем документе определена кнопка, при активизации которой значение поля ввода в порожденном окне изменяется: Внимание, не нажимайте кнопку "Сменить значение" пока не создано окно
Пример окна"+ ""); win1.document. writeln("Нажмите кнопку в основном окне "+ "чтобы сменить значение пол\я"); win1.focus(); } function renWin() { win1.document. forms[0].aname. value='Новое значение'; win1.focus(); } //-->
Вот текст этой программы:
<script language="JavaScript">
<!--
var win1
function newWin() {
win1 = window. open("", "myWindow", "toolbar=0,width=300,height=100");
win1.document. open();
win1.document. writeln("<title>Пример окна</title><body bgcolor='#C0C0C0'>"+
"<form><input type='text' size=20 value='Текущее значение' name='aname'></form>");
win1.document. writeln("Нажмите кнопку в основном окне "+
"чтобы сменить значение пол\я");
win1.focus();
}
function renWin() {
win1.document. forms[0].aname. value='Новое значение';
win1.focus();
}
//-->
</script>
<form name="myForm">
<input type = "button" onClick="newWin()" value="Открыть окно">
<input type = "button" onClick= renWin() value="Сменить значение поля">
</form>
Обратите внимание, что имя порожденного окна win1 указывается как префикс при обращении к объекту document, причем она создана глобальной, в результате чего методы open(), writeln(), focus() применяются к этому окну из любой функции в текущем документе. Аналогично смены значения поля в форме можно динамически изменять и другие объекты окна, например картинки, только уже использовать нужно массив images, также можно изменять и текстовое содержимое не перезагружая документ полностью, например используя контейнеры <DIV> . . . </DIV>.
Заметьте, это видно из первого примера, что фокус ввода передается вновь созданному окну, и при щелчке мыши на любом другом окне переводит фокус в это окно. Однако назначить фокус можно и программным путем (не поддерживается в IE версии ниже 4-й) при помощи метода focus() - что продемонстрировано в предыдущем примере: в примере фокус возвращается на вновь созданное окно при нажати кнопок в родительском окне. Для удаления фокуса ввода используется соответственно метод blur(). Если фокус ввода будет назначен минимизированному окну - браузер его разворачивает.
Управление окнами. Свойство opener
Задача управления фокусом ввода усложняется тем, что для обращения к переменным и функциям, определенным в родительском окне браузера, нельзя использовать синоним родительского окна top, как при работе с фреймами. В случае, если окна открывались при помощи метода open(), значение top является ссылкой на текущее окно, потому что в этом случае окна браузера автономны. Иными словами, мы не можем обратиться к функциям документа в родительском окне и изменять там значения каких-либо переменных. Но разработчики предусмотрели такое, вероятно сами с проблемой столкнулись, а проблема надо сказать серьезная (была :-)) и быстренько придумали метод opener. Свойство opener содержит имя (или хотите, ссылку так, как одновременно несколько окон не могут породить одно окно) окна, которое вызвало метод open(), и необходимо для обращения к функциям и переменным, определенным в первом окне браузера. Рассмотрим пример программы, которая предоставляет возможность открыть окно и установить в нем фокус ввода. Данная программа использует свойство opener для обращения к первому окну браузера.
Вот текст программы
<script language="JavaScript">
<!--
var winToggle = false;
var wt;
function changeBut(n) {
if (n==0) {
winToggle = false;
document. forms[0].elements[0].value = "Открыть окно";
}
else {
winToggle = true;
wt = window. open("./js/book/win1.htm", "wf", "toolbar=0,width=300,height=100");
document. forms[0].elements[0].value = "Назначить фокус ввода";
}
}
function togWin() {
if ( !winToggle )
changeBut(1);
else
wt. focus();
}
//-->
</script>
<form>
<input type="button" value="Открыть окно" onClick="togWin()">
</form>
Файл win1.htm, загружаемый во вновь созданное окно wt, имеет вид:
<html>
<body bgcolor="#FFFF80">
<form>
<input type="button" value="Закрыть окно" onClick="window. opener. changeBut(0); self. close()">
</form>
</body>
</html>
Основной документ содержит кнопку формы, при нажатии на которую создается новое окно. Значение, возвращаемое методом open(), присваивается переменной wt, используемой в программе позже. Переменная winToggle применяется для определения состояния порожденного окна. (только если вы закрыли окно кнопкой. Если окно было закрыто кнопкой "Х" в верхнем правом углу - значение переменной winToggle останется неизменным, нажатие кнопки в основном окне приведет к ошибке. Как избавиться от такого недоразумения в IE не представляю, в NN можно например определить переменную в новом окне и проверять на значение NULL, но IE выдает ошибку при обращении к неопределенному объекту) При щелчке мыши на кнопке Открыть окно происходит активизация функции togWin(), которая проверяет значение переменной winToggle, определяя, открыто новое окно или нет. Если окно открыто, ему передается фокус ввода, в противном случае создается новое окно. Переменной winToggle по умолчанию присваивается значение false, поэтому после загрузки документа нажатие кнопки всегда приводит к открытию нового окна. При этом текст на кнопке заменяется текстом Назначить фокус ввода, после чего эта кнопка используется для передачи фокуса ввода, а не для открытия окна. Переменной winToggle теперь присваивается значение true, означающее, что окно открыто.
Кнопка в документе win1.htm, загружаемом в новое окно, используется для закрытия окна. При этом в документе, загруженном в родительское окно, вызывается функция changeBut() с аргументом 0, переменной winToggle снова присваивается значение false, а текст на кнопке заменяется текстом Открыть окно. Затем текущее окно закрывается.
Заметьте, что выражение window. opener или self. opener (что то же самое) указывается как префикс при вызове функции changeBut(). Если использовать выражение top. changeBut(), произойдет ошибка, потому что top обращается к текущему автономному окну. Свойство opener позволяет обратиться к окну, которое породило текущее и в котором первоначально определена функция changeBut(). Данное свойство можно рассматривать как эквивалент свойства parent для фреймов во фреймосодержащих документах. Нужно только добавить, что свойство opener добавлено только в версиях браузеров IE от 4 и NN от 3.
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 |
