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

Презентация:



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

Типовые расчёты Растворы

JavaScript Объекты документа Объект History Свойства: current next previous length.
Формы в HTML. Элемент FORM Элемент уровня «блок» Управляющие элементы Просто текст Атрибуты: action – url обработчика method – post или get enctype –
Ребусы Свириденковой Лизы Ученицы 6 класса «А». 10.
Школьная форма Презентация для родительского собрания.
Урок повторения по теме: «Сила». Задание 1 Задание 2.
Объектная модель DOM javascript. Иерархия классов.
Michael Jackson
Маршрутный лист «Числа до 100» ? ? ?

Язык JavaScript Скриптовый язык для выполнения на html-страницах.
1 Трудные случаи таблицы умножения и деления 2 Приношу свои извинения, но придётся начать заново!
Ефимова Е.Н. школа 840 Шестнадцатеричная система счисления Урок 3.
Введение в JavaScript. Общие сведения Web, как гипертекстовую систему, можно рассматривать с двух точек зрения. Во-первых, как совокупность отображаемых.
Учебный курс Объектно-ориентированный анализ и программирование Лекция 7 Методы как средство реализации операций Лекции читает кандидат технических наук.
О СИТУАЦИИ НА РЫНКЕ ТРУДА И РЕАЛИЗАЦИИ РЕГИОНАЛЬНЫХ ПРОГРАММ ПО СНИЖЕНИЮ НАПРЯЖЕННОСТИ НА РЫНКЕ ТРУДА СУБЪЕКТОВ СЕВЕРО-КАВКАЗСКОГО ФЕДЕРАЛЬНОГО ОКРУГА.
1. Определить последовательность проезда перекрестка

Транксрипт:

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

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

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

4 Свойство action

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

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

7 Свойство target

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

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

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

11 Событие onReset

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 Текст в полях ввода Число гипертекстовых ссылок: до момента обработки формы.

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

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

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

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

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

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

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 Свойство length Число предложенных моделей: document.f3.i0.value=document.f2.s1.length;

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

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

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

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

26 Кнопки

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

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

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

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

31 Cookies

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

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 Объект Image СвойстваМетодыСобытия border complete height hspace lowsrc name src vspace width нет onAbort onError onLoad

35 Объект Image

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);

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

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

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); }… …