1 Бурибаев Бахыт Бурибаевич
2 ВОПРОСЫ: 1. Принцип программного управления 2. Блок 2.1. Посылка формы по 3. Кнопки. Элемент 3.1. Экранные кнопки 3.2. Строка ввода 4. Формы (флажки, радиокнопки) 4.1. Флажки 4.2. Радиокнопки
3 1. Принцип программного управления Для каждого тега внутри гипертекстовой страницы браузер создает объект. Доступ к этому объекту программист получает при помощи имени, которое задается атрибутом name. Таким образом, появляется возможность программного управления тегами. Пусть, например, в HTML-коде задан тег для вывода на экран картинки: <IMG src=./pic/ris1. gif border=0 alt="" name=pic> Браузер строит для этого тега экземпляр стандартного объекта image с именем pic.
4 Через этот тег можно получить доступ экземпляру стандартного объекта image с именем pic при помощи эквивалентных конструкций: window.document.images["pic"] window.document.images.pic или внутри текущего окна: document.images["pic"] document.images.pic Известно, например, что у объекта image есть свойс-тво src, содержащее указание на файл с картинкой. Можно в программе прочитать это свойство, записав обращение: document.images.pic.src Можно, не только прочитать, но и изменить значение этого свойства: document.images.pic.src = "./pic/ris2.gif" и картинка на экране изменится соответствующим образом на другую.
5 2. Блок Работая с гипертекстовыми документами, мы не раз имели возможность вводить текст в поле ввода, выбирать пункт меню, отмечать флажком правильный ответ, нажимать кнопку. При этом мы всегда ожидали от документа осмысленной реакции. Все эти интерфейсные элементы выводятся на экран браузера при помощи команды- контейнера..., а кнопки, поля ввода, флажки и меню задаются внутри этого блока отдельными тегами. Блок... называется формой. В открывающем теге можно записывать следующие атрибуты.
6 action - задает адрес для отправки формы по сети.Мож-но послать форму на сервер, где она будет обработана программой (CGI-скриптом),а можно указать в качестве значения атрибута адрес электронной почты,и форма будет послана по e- mail. Например, можно написать так: enctype - задает кодирование передаваемых по сети дан-ных. Здесь мы не рассматриваем серверных программ, ко-торые принимают и автоматически обрабатывают полученные из формы данные. Но легко можно устроить так,что брау-зер пошлет форму, заполненную пользователем, по вашему электронному адресу. Вы эти данные изучите сами или направите на обработку в собственную программу. Все будет хорошо работать,если задать значение атрибута enctype так:
7 method - задает способ передачи формы. Атрибут имеет два значения: get и post. Метод post более универсаль-ный. Не вникая в детали работы этих двух методов, пред-лагаем запись, которая заставит браузер послать форму по указанному адресу <FORM enctype="text/plain" method="post"> name - задает имя формы. Его можно использовать в скриптах для доступа к полям формы. Если форму посылать никуда не надо,то из всех атрибутов потребуется только один name: Теперь в JavaScript-коде можно обратиться к этой форме так: document.anketa. Если форма содержит строковое поле с именем work, то можно присвоить содержимое этого поля переменной: var str = document.anketa.work.value; Можно изменить значение этого поля: document.anketa.work.value = "веб-мастер"; И экранное отображение поля после этого присваивания соответственно изменится.
Посылка формы по Приведенный ниже пример можно использовать как образец кодирования посылки формы по электронной почте. <FORM action = enctype = "text/plain" method="post"> Нажмите “сброс” и заполните заказ. Ваше имя: <INPUT type=text size=33 name=name value="Горбунков Семен Семенович"> Ваш адрес: <INPUT type=text size=33 name= Прислать: <INPUT type=text size=33 name=obj value="Программный соковыжиматель">
9 отсылает форму, а поручает эту работу почтовой программе, установленной по умолчанию в операционной системе компьютера (например, Outlook). Письмо посылается в виде: Subject: Форма отправлена из Microsoft Internet Explorer name = Горбунков Семен Семенович = obj = Программный соковыжиматель Если поместить этот код в HTML-программу, то на гипер-текстовой страничке возникнет картинка, подобная той, что изображена на рис. Пользователь нажимает кнопку сброс, и поля принимают значения, установленные по умолчанию. Форма заполняется, и по нажатию кнопки послать заказ отправляется по адресу Обычно браузер не сам
10 3. Кнопки. Элемент С помощью тега в форме можно задать разные элементы ввода и управления. Атрибут nате Каждый тег может содержать атрибут name. Значение этого атрибута можно использовать как имя объекта, который браузер создает для этого тега. Пусть, например, задана форма с единственной строкой ввода (ее вид на экране показан на рис.): <INPUT type=text value=кpoшкocшивaтeль name=obj>
11 В программе на JavaScript можно использовать конст-рукцию document.anketa.obj.value для доступа к свойству value объекта, построенного для тега. Эта запись «расшифровывается» так: document – объект document (родитель объект window); document.anketa – объект anketa (родитель объект document); document.anketa.obj – объект obj (родитель объект anketa); document.anketa.obj.value – свойство value объекта obj, оно соответствует атрибуту value тега с именем obj. Можно прочитать значение свойства value: var str = document.anketa.obj.value; Можно и изменить значение этого свойства: document.anketa.obj.value = "пыле истребитель" Такое присваивание приведет к мгновенной перерисовке экрана. Текст «крошкосшиватель» в поле ввода заменится на «пыле истребитель». Значение атрибута name как имя переменной, поэтому нельзя использовать в имени русские буквы и цифру в качестве первого символа.
Экранные кнопки Конкретный вид интерфейсного элемента задается атрибутом type. Рассмотрим значения этого атрибута, задающие экранные кнопки: reset - задает кнопку, нажатие на которую автоматически возвращает форму в исходное состояние (все поля ввода формы принимают значения, установленные в HTML -коде). Атрибут value задает надпись на кнопке submit - задает кнопку, нажатие на которую отправляет форму в сеть. Атрибут value задает надпись на кнопке button - задает обычную кнопку
13 Программное управление Объект, построенный браузером для тега (или тегов, ) имеет свойство value, которое соответствует одноименному атрибуту тега. Ниже приводится пример, демонстрирующий работу с этим свойством. Загрузите в браузер приведенный ниже текст. Поработайте с экранными кнопками и разбери-тесь в алгоритме работы программы.
14 Умная кнопка <!-- var num=0; var name0="число нажатий:0"; //--> Умная кнопка <INPUT type=button value=сброс onclick="document.count.key.value=name0; num=0;"> <INPUT type=button name=key value=" число нажатий: 0 " onclick="document.count.key.value='число нажатий:'+(++num);">
15 Можно упростить обращение к полям формы, если использовать указание this ссылку на текущий экземпляр объекта и указание this.form - ссылку на объект, построенный для текущей формы: <INPUT type=button value=c6poc onclick="this.form.key.value=name0; num=0;"> <INPUT type=button name=key value="чиcлo нажатий: 0" onclick="this.value='число нажатий:'+(++num);"> Как видите, в этом коде не потребовалось имя для формы. Синонимом имени внутри формы оказалась конструкция this.form. А внутри второго тега не потребовалось имя этого тега, вместо него использован синоним this.
Строка ввода Значения text и password для атрибута type тега задает строку ввода: text - обычная строка ввода. Дополнительные атрибуты: · Атрибут value задает значение поля ввода по умолча-нию (именно это значение восстанавливается, когда пользователь нажимает кнопку ); · Атрибут size задает размер поля в символах. Если атрибут опущен, размер поля определяется длиной строки, заданной как значение атрибута value; · Атрибут maxlength задает максимальную длину строки, которую можно вписать в поле ввода.Если атрибут пропущен, длина не ограничена; · Атрибут readonly определяет строку «только для чтения».Такую строку пользователь не может редактировать. <INPUT type=text value="Варвара" size=10 maxlength=30>
17 password - строка для «секретного» ввода. От значе-ния text отличается только тем, что символы на экране при вводе отображаются звездочками. Секретная строка не копируется в буфер обмена. <INPUT type=password value="" size=10 maxlength=10 > Программное управление Объект, построенный браузером для тега (или ) имеет следующие свойства: value – текущее содержание строки ввода; defaultValue значение атрибута value в соответствующем теге. Чтобы лучше понять смысл свойств value и defaultValue, загрузим в браузер программу испытатель (в папке Студент) и поработаем с ним. Поработаем также на другом испытателе в той же папке и по коду испытателя разберемся, как он устроен.
18 4. Формы (флажки, радиокнопки) Теперь рассмотрим пару интерфейсных элементов, которые часто используются на интерактивных страницах: флажки и радиокнопки Флажки Флажки, или, как говорят, кнопки с независимой фиксацией хорошо знакомый элемент компьютерного интерфейса Флажки не зависят один от другого. Их можно устанавливать и сбрасывать в любой комбинации. Флажок задается тегом.
19 Дополнительные атрибуты тега для флажков: name - имя используется в скриптах для доступа к объекту, созданному для тега checked - логический атрибут; для него не указывается значения. Присутствие атрибута означает, что флажок установлен по умолчанию. Программное управление Объект, построенный браузером для тега имеет свойство checked. Это свойство принимает значение true, когда флажок установлен, и false в противном случае. Рассмотрим следующую программу, затем попробуем вывести ее результат через браузер.
20 Программное управление флажком Программное управление флажком <INPUT type=button value=Прoвepить onclick="if(this.form.flag.checked) alert('Флажок установлен'); else alert ('Флажок не установлен');"> <INPUT type=button value=Изменить onclick="this.form.flag.checked = !this.form.flag.checked;"> Теперь п роделаем следующие опыты.
21
22 1. Нажмите кнопку Проверить. Появится сообщение «Флажок не установлен». Флажок пока не установлен, ведь он задан кодом, в котором отсутствует атрибут checked: Свойство checked объекта, построенного для тега, имеет значение false как и выражение this.form.flag.checked в команде if. 2. Нажмите кнопку Изменить. Сработает код: this.form.flag.checked=!this.form.flag.checked; Свойство checked изменит свое значение с false на true. На экране в поле флажка появляется отметка (хотя мы ее там не ставили, а устроили ее появление на экране при помощи программного кода). 3. Нажмите кнопку Проверить. На экран выводится сообщение «Флажок установлен». Теперь выражение this.form.flag.checked имеет значение true. Как видите, свойство checked можно не только читать, но и менять, устанавливая или сбрасывая флажок программным путем.
23 Здесь свойство checked объекта имеет совсем другой смысл, чем одноименный атрибут тега. Атрибут указывает, что флажок установлен по умолчанию, а свойство хранит текущее состояние флажка, которое может меняться пользователем или программой. Программы, которые «страдают склерозом», могут легко проверить, был ли установлен атрибут checked в теге, если обратятся к свойству defaultChecked соответствующего объекта. Загрузим в браузер следующий код, затем посмотрим его результат на странице.
24 checked и defaultChecked checked и defaultChecked <INPUT type=button value=checked onclick="alert(this.form.flag.checked);"> <INPUT type=button value=defaultChecked onclick="alert( this.form.flag.defaultChecked );">
25 Проделаем следующие опыты: 1. Нажмем последовательно кнопки checked и defaultChecked. Получим сообщения «true» и «true». Это означает, что флажок установлен и отметка установлена по умолчанию. 2. Снимем отметку с флажка и снова нажмите кнопки checked и defaultChecked. Получим сообщения «false» и «true». Это означает, что флажок не установлен, но он был установлен по умолчанию. 3. Уберем из тега атрибут checked и снова нажмем кнопки checked и defaultChecked. Получим сообщения «false» и «false». Это означает, что флажок сейчас не установлен и не был установлен по умолчанию. 4. Отметим флажок и нажмите кнопки checked и defaultChecked. Получим сообщения «true» и «false». Это означает, что флажок установлен, но он не был установлен по умолчанию.
Радиокнопки Радиокнопки (селекторные кнопки, переключатель) предназначены для выбора одного варианта из нескольких альтернативных. Подобно кнопочному переключателю диапазона волн в радиоприемнике, выбор одной кнопки автоматически снимает отметку с другой (рис.). Радиокнопка задается тегом Дополнительные атрибуты приведены на следующей странице:
27 name - имя; используется в скриптах для доступа к объек-ту, созданному для тега. Кнопки, входящие в одну взаимосвязанную группу, должны иметь одинаковое имя. Именно по этому критерию (одинаковое имя) браузер распознает переключатель и организует снятие отметки с кнопки, когда выбрана другая в этой же группе. Доступ к отдельной кнопке в группе выполняется так же как к элем-ентам массива при помощи индекса. Кнопки в группе нумеруются в порядке их следования в HTML - коде, нумерация начинается с нуля. checked - логический атрибут; для него не указывается значение. Присутствие атрибута означает, что отметка на кнопке установлена по умолчанию. Программное управление. Объект, построенный браузером для тега, имеет свойство checked. Это свойство принимает значение true, когда кнопка выбрана,и false в противном случае. Рассмотрим следующую программу и ее результат.
28 Программное управление радиокнопкой Программное управление радиокнопкой <INPUT type=button value=Проверить oncliok="if(this.form.tst[0].checked) alert('Отметка на 1-ой кнопке установлена') else alert('Отметка на 1-ой кнопке не установлена');"> <INPUT type=button value=Изменить onclick="var x = this.form.tst[0].checked; this.form.tst[0].checked=this.form.tst[1].checked; this.form.tst[1].checked=x;">
29 Проделайте следующие опыты. 1. Нажмите кнопку Проверить. Появится сообщение «Отметка на 1-й кнопке не установлена». Радиокнопка и в самом деле выключена, ведь она задана кодом, в котором отсутствует атрибут checked. Это означает, что свойс- тво checked объекта, построенного для этой радиокнопки, имеет значение false, как и выражение this.form.tst[0].checked в команде if. 2. Нажмите кнопку Изменить. Выполнится код: onclick="var x = this.form.tst[0].checked; this.form.tst[0].checked=this.form.tst[l].checked; this.form, test[1].checked=x;" Этот код перебросит отметку со второй кнопки на первую. 3. Нажмите кнопку Проверить. Последует сообщение «Отметка на 1-й кнопке установлена». Это означает, что теперь выражение this.form.tst[0].checked имеет значение true.
30 Свойство checked объекта не совпадает с одноименным атрибу- том тега. Атрибут checked устанавливает отметку на кнопке по умолчанию, а свойство checked отражает текущее состояние кнопки. Как и в случае с флажками, атрибуту checked соответствует свойство defaultChecked. Изменяя активность одной кнопки перек- лючателя, программист берет на себя от- ветственность правильно изменить свойс- тво checked у всех его остальных кнопок (отмечена может быть только одна кноп- ка в группе). Пример. Умножитель, программа кото- рого представлен ниже, отображается на экране так, как показано на рис.
31 Умножитель Умножитель <TABLE border=1 bgcolor=#F0F0F0 cellspacing=0 cellpadding=5> <TABLE border=0 cellspacing=0 cellpadding=5> <INPUT type=reset value=Сброс> <INPUT type=radio checked name=op1>10 <INPUT type=radio checked name=op2>2
32 20 *
33 <INPUT type=button value=Ответ onclick="var op1=new Array(10,20,30,40); var op2 = new Array(2,3,4,5); var len = 4; var ind1; var ind2; for(var i=len; --i>=0;) { if(this.form.op1[i].checked) ind1=i; if(this.form.op2[i].checked) ind2=i; } this.form.result.value= op1[ind1]*op2[ind2];"> <INPUT type=text size=10 name=result value="" readonly>
34