form

Учебный курс
Введение
в JavaScript и CGI
Лекция 3
Программирование
форм и графики
кандидат технических наук
Павел Брониславович Храмцов
paul@kiae.su
1
Программируем формы
<form name=f_name method=get action="javascript:void(0);">
<input name=i_name size=30 maxlength=30>
</form>
window.document.f_name.i_name.value="Текстовое поле";
window.document.forms[0].elements[0].value="Текстовое поле";
2
Свойства, методы, события
Свойств
action
method
target
elements[]
encoding
Методы
reset()
submit()
События
onReset
onSubmit
3
Свойство action
<form method=post
action="javascript:window.alert('We use JavaScript-code as
an URL'); void(0);">
<input type=submit
value="Продемонстрировать JavaScript в action">
</form>
4
Свойство method
<form name=m
action="javascript:window.alert('We use JavaScript-code as an
URL');void(0);">
<script>
document.write("<font color=navy>По умолчанию установлен
метод>/font>"+document.m.method+".");
</script>
<input type=button
onClick="window.document.main.document.m.method='post'
;" value="Метод POST">
<input type=button
onClick="window.document.main.document.m.method='get';"
value="Метод GET">
<input type=submit value="Продемонстрировать JavaScript в
action">
</form>
5
Свойство target
for(i=1;i<id.frames.length;i++) {
if(id.frames[i].name==
id.frames[0].document.f0.s0.options[id.frames[0].document.f0.s0.
selectedIndex].text) {
id.frames[i].document.open();
id.frames[i].document.write("<center>Выбрали этот
фрейм</center>");
id.frames[i].document.close();
else {
id.frames[i].document.open();
id.frames[i].document.write("<center>Этот фрейм не
выбрали</center>");
id.frames[i].document.close(); }
}
6
Свойство target
7
Свойство elements[]
<form name=fe>
<input name=fe1 size=30 maxlength=30>
<input type=button value="Ввести текст по имени"
onClick="document.fe.fe1.value='Ввести текст по имени';">
<input type=button value="Ввести текст по индексу"
onClick="document.fe.elements[0].value='Ввести текст по
индексу';">
<input type=reset value="Очистить">
</form
8
Метод reset()
<form name=r>
<input value="Значение по умолчанию" size=30 maxlength=30>
<input type=button value="Изменим текст в поле ввода"
onClick="document.r.elements[0].value='Изменили текст';">
</form>
<a href="javascript:document.r.reset();void(0);">Выставили
значение умолчания</a>
9
Метод submit()
<form name=s method=post action="javascript:window.alert('Data
submited');void(0);">
Введите цифру или букву:<input size=1 maxlength=1>
</form>
<a href="javascript:document.s.submit();">Отослать данные</a>
10
Событие onReset
<form onReset="javascript:window.alert('Event Reset');return
false;">
<input value="Значение по умолчанию">
<input type=reset value="Восстановить">
</form>
11
Событие onSubmit
function test() {
if(parseInt(document.sub.digit.value).toString()=="NaN") {
window.alert("Incorrect data into form field.");
return false; }
else {
return true; }
}
...
<form name=sub onSubmit="return test();" method=post
action="javascript:window.alert('Data submited');void(0);">
<input name=digit size=1 maxlength=1><input type=submit
value="Send">
</form>
12
Текст в полях ввода
<form>Число гипертекстовых ссылок:
<input size=10 maxlenght=10
value="&{document.links.length};">
до момента обработки формы.
<input type=button value="Число всех гипертекстовых ссылок
в документе“
onClick="window.document.forms[0].elements[0].value=
document.links.length;">
<input type=reset value="Установить по умолчанию">
</form>
13
Свойства, методы, события
Свойств
defaulValue
form
name
type
value
Методы
blur()
focus()
select()
События
onBlur
onChange
onFocus
14
Защита поля ввода
<form>
<input size=10 value="First Value"
onFocus="document.forms[1].elements[0].blur();">
<input type=button value=Change
onClick="document.forms[1].elements[0].value='Second
value';">
<input type=reset value=Reset>
</form>
15
Изменение значения поля ввода
<form method=post onSubmit="return false;">
<input size=15 maxlength=15 value=kuku onChange=
"window.alert(document.forms[2].elements[0].value);">
</form>
16
Свойства, методы, события
Объект Select
Свойств
form
length
name
options[]
selectedIndex
type
Методы
blur()
click()
select()
События
onBlur
onChange
onFocus
Объект Option
defautlValue
form
name
type
value
нет
нет
17
Объект option
opt = new Option( [ text, [ value, [ defaultSelected, [ selected ] ] ] ]);
text - строка текста, которая размещается в контейнере LI (<li>text)
value - значение, которое передается серверу при выборе
альтернативы, связанной с объектом OPTION
defaultSelected - альтернатива выбрана по умолчанию(true/false)
selected - альтернатива выбрана(true/false)
18
Коллекция options[ ]
<form name=f0>
<select name=s0>
<option>Первая альтернатива
<option>Вторая альтернатива
<option>Третья альтернатива
</select>
<input type=button value="Delete last option" onClick=
"document.f0.s0.options[document.f0.s0.length-1]=null;">
<input type=reset value=Reset>
</form>
19
Коллекция options[ ]
function def_f1() {
document.f1.s1.options[0] = new Option("альтернатива
Один","",true,true);
document.f1.s1.options[1] = new Option("альтернатива Два");
document.f1.s1.options[2] = new Option("альтернатива Три");
return false; }
...
<form name=f1 onReset="def_f1();">
<select name=s1>
<option>альтернатива Один
<option>альтернатива Два
<option>альтернатива Три
</select>
<input type=button value="Delete last option"
onClick="document.f1.s1.options[document.f1.s1.length-1]=null;">
<input type=reset value=Reset>
</form>
20
Свойство length
<form name=f3>
Число предложенных моделей: <nput name=i0 size=1
maxlength=1 onFocus="out();">
</form>
<script>
document.f3.i0.value=document.f2.s1.length;
</script>
21
Свойство selectedIndex
<form>
Автозавод:
<select name=s0
onChange="form.elements[1].value=selectedIndex;">
<option>ГАЗ
<option>ВАЗ
</select>
Выбрали индекс:
<input size=1 maxlength=1>
</form>
22
Событие onChange
<form>
Набор канцелярских товаров:
<select onChange="form.elements[1].value='';
for(i=0;i if(form.elements[0].options[i].selected==true)
form.elements[1].value = form.elements[1].value+i;" multiple>
<option>Карандаши
<option>Авторучки
<option>Линейки
<option>Тетради
<option>Стерки
<option>Кнопки
<option>Скрепки
</select>
Выбраны позиции:
<input name=s1 size=7 maxlength=7
onFocus="form.elements[1].blur();">
</form>
23
Свойство selected
if(form.elements[0].options[i].selected==true)
24
Свойство text
<select
onChange="form.elements[2].value=
form.elements[0].options
[form.elements[0].selectedIndex].text;">
...
</select>
25
Кнопки
<form>
<input type=button value="Окно предупреждения"
onClick="window.alert('Открыли окно');">
</form>
26
Кнопки-картинки
<form>
onSubmit="return false">
Активная кнопка:
<input type=image src=../images/jsi/home.gif
border=0>
</form>
27
Управление обменом
 нажата кнопка Submit
 нажата графическая кнопка
 нажата клавиша Enter в форме из одного поля
 вызван метод Submit
28
Перехват события Submit
<form>
<input type=submit value=Submit onClick="return false;“>
</form>
function my_submit() {
if(window.confirm("Do you wona to reload page?")) return true;
else return false;
}
...
<form>
<input type=submit value=Submit onClick="return my_submit();">
</form>
29
Единственное поле в форме и Submit()
<form onSubmit="window.alert('Data submited');return false;">
<input size=10 maxlength=10>
</form>
<form onSubmit="window.alert('Data submited');return false;">
<input size=10 maxlength=10>
<select onChange="form.submit();">
<option>Нужно что-то делать
<option>Ничего не надо делать
</select>
</form>
30
Cookies
<form>
<input type=button value="Показать Cookies"
onClick="window.alert(window.document.cookie);">
</form>
31
Cookies
function asign()
{
document.cookie="n1=3";
window.alert(document.cookie);
}
...
<form>
<input type=button value="Изменить n1" onClick="asign()">
</form>
32
Cookies
<form>
<input type=button value="Показать Cookies"
onClick="window.alert(window.document.cookie);">
</form>
function change_cookies() {
a = new Array();
c = new Date();
a = document.cookie.split(';');
document.cookie=a[0]+"; expires="+c.toGMTString()+";"
window.alert(document.cookie);
}
...
<form>
<input type=button value="Чтобы не хранить этот хлам
вечно" onClick="change_cookies()">
</form>
33
Объект Image
Свойства
•border
•complete
•height
•hspace
•lowsrc
Методы
•name
•src
•vspace
•width
События
•onAbort
•onError
•onLoad
нет
34
Объект Image
<a href="javascript:void(0);"
onClick="window.alert('Image name:'+document.mamonts.name)">
<img name=mamonts src=../images/jsi/i1.gif border=0>
</a>
35
Программируем графику
Объект Image
javascript:document.i2.src='../images/jsi/i1.gif';void(0);
javascript:document.i2.src='../images/jsi/i2.gif';void(0)
javascript:document.i2.src='../images/jsi/i3.gif';void(0);
javascript:document.i2.src='../images/jsi/i4.gif';void(0);
36
Программируем графику в таблицах
<table>
...
<td>
<a href="javascript:void(0);"
onMouseover="document.m0.src=color[0].s
rc;return true;"
onMouseout="document.m0.src=mono[0].s
rc;return true;" >
<img name=m0
src=../images/jsi/mapb000.gif border=0>
</a>
</td> </table>
07.05.2016
37
Мультипликация
function movie()
{
eval("document.images[0].src='../images/jsi/clock"+i+".gif';");
i++;if(i>6) i=0;
setTimeout("movie();",500);
}
...
<body onLoad="movie();">
38
Мультипликация
var flag1=0;
var id1;
function movie()
{
eval("document.images[0].src='../images/jsi/clock"+i+".gif';");
i++;if(i>6) i=0;
id1 = setTimeout("movie();",500);
}…
<body onLoad="movie();">…
<form>
<input type=button value="Start/Stop"
onClick="if(flag1==0) { id1=setTimeout('movie();',500); flag1=1;}
else {clearTimeout(id1); flag1=0;};">
</form>
39