1 Учебный курс Введение в JavaScript и CGI Лекция 3 Программирование форм и графики кандидат технических наук Павел Брониславович Храмцов paul@kiae.su. - презентация

1 1 Учебный курс Введение в JavaScript и CGI Лекция 3 Программирование форм и графики кандидат технических наук Павел Брониславович Храмцов

2 2 Программируем формы window.document.f_name.i_name.value="Текстовое поле"; window.document.forms[0].elements[0].value="Текстовое поле";

3 3 Свойства, методы, события Свойств action method target elements[] encoding Методы reset() submit() События onReset onSubmit

4 4 Свойство action

5 5 Свойство method document.write(" По умолчанию установлен метод>/font>"+document.m.method+"."); /font>"+document.m.method+".");">

6 6 Свойство target for(i=1;i

7 7 Свойство target

8 8 Свойство elements[]

9 9 Метод reset() Выставили значение умолчания

10 10 Метод submit() Введите цифру или букву: Отослать данные

11 11 Событие onReset

12 12 Событие onSubmit function test() { if(parseInt(document.sub.digit.value).toString()=="NaN") { window.alert("Incorrect data into form field."); return false; } else { return true; } }...

13 13 Текст в полях ввода Число гипертекстовых ссылок: до момента обработки формы.

14 14 Свойства, методы, события Свойств defaulValue form name type value Методы blur() focus() select() События onBlur onChange onFocus

15 15 Защита поля ввода

16 16 Изменение значения поля ввода

17 17 Свойства, методы, события Свойств form length name options[] selectedIndex type Методы blur() click() select() События onBlur onChange onFocus Объект Select defautlValue form name type value нет Объект Option

18 18 Объект option opt = new Option( [ text, [ value, [ defaultSelected, [ selected ] ] ] ]); text - строка текста, которая размещается в контейнере LI ( text) value - значение, которое передается серверу при выборе альтернативы, связанной с объектом OPTION defaultSelected - альтернатива выбрана по умолчанию(true/false) selected - альтернатива выбрана(true/false)

19 19 Коллекция options[ ] Первая альтернатива Вторая альтернатива Третья альтернатива

20 20 Коллекция 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; }... альтернатива Один альтернатива Два альтернатива Три

21 21 Свойство length Число предложенных моделей: document.f3.i0.value=document.f2.s1.length;

22 22 Свойство selectedIndex Автозавод: ГАЗ ВАЗ Выбрали индекс:

23 23 Событие onChange Набор канцелярских товаров: Карандаши Авторучки Линейки Тетради Стерки Кнопки Скрепки Выбраны позиции:

24 24 Свойство selected if(form.elements[0].options[i].selected==true)

25 25 Свойство text...

26 26 Кнопки

27 27 Кнопки-картинки onSubmit="return false"> Активная кнопка: Активная кнопка:">

28 28 Управление обменом нажата кнопка Submit нажата графическая кнопка нажата клавиша Enter в форме из одного поля вызван метод Submit

29 29 Перехват события Submit function my_submit() { if(window.confirm("Do you wona to reload page?")) return true; else return false; }...

30 30 Единственное поле в форме и Submit() Нужно что-то делать Ничего не надо делать

31 31 Cookies

32 32 Cookies function asign() { document.cookie="n1=3"; window.alert(document.cookie); }...

33 33 Cookies function change_cookies() { a = new Array(); c = new Date(); a = document.cookie.split(';'); document.cookie=a[0]+"; expires="+c.toGMTString()+";" window.alert(document.cookie); }...

34 34 Объект Image СвойстваМетодыСобытия border complete height hspace lowsrc name src vspace width нет onAbort onError onLoad

35 35 Объект Image

36 36 Программируем графику Объект 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);

37 Программируем графику в таблицах...

38 38 Мультипликация function movie() { eval ("document.images[0].src='../images/jsi/clock"+i+".gif';"); i++;if(i>6) i=0; setTimeout("movie();",500); }... 6) i=0; setTimeout("movie();",500); }...">

39 39 Мультипликация 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); }… … 6) i=0; id1 = setTimeout("movie();",500); }… … ">