Презентация на тему: Web- технологии

Web- технологии
JavaScript
Объектная модель JavaScript
Размещение кода на HTML- странице
URL- схема JavaScript
Обработчики событий
Подстановки (entity)
Вставка (контейнер SCRIPT)
Иерархия классов
Объект location
Свойства location
Методы location
Управление окнами
Управление окнами
Тег FORM
Свойства и методы объекта Form
События объекта Form
Поля ввода данных (Объект Text )
Защита поля ввода
Изменение значения поля ввода
1/20
Средняя оценка: 4.2/5 (всего оценок: 56)
Код скопирован в буфер обмена
Скачать (279 Кб)
1

Первый слайд презентации: Web- технологии

Лекция Язык JavaScript

Изображение слайда
2

Слайд 2: JavaScript

это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента Цель - возможность изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем

Изображение слайда
3

Слайд 3: Объектная модель JavaScript

HTML- контейнер - объект, который характеризуется тройкой: - свойства - методы - события Объекты с одинаковым набором свойств, методов и событий объединяются в классы однотипных объектов.

Изображение слайда
4

Слайд 4: Размещение кода на HTML- странице

гипертекстовая ссылка (схема URL); обработчик события (в атрибутах, отвечающих событиям); подстановка (entity); вставка (контейнер <SCRIPT> )

Изображение слайда
5

Слайд 5: URL- схема JavaScript

URL указывают в атрибуте HREF контейнера A, в атрибуте SRC контейнера IMG, в атрибуте ACTION контейнера FORM и т.п. Схема URL – JavaScript : <A HREF="JavaScript:JavaScript_ код">...</ A> <IMG SRC="JavaScript:JavaScript_ код">

Изображение слайда
6

Слайд 6: Обработчики событий

<FORM> <INPUT TYPE=button VALUE=" Кнопка " onClick =" window.alert (' Вы нажали кнопку ');"> </FORM>

Изображение слайда
7

Слайд 7: Подстановки (entity)

Подстановки используются в качестве значений атрибутов HTML-контейнеров. Подстановки имеют формат: &{код_программы};

Изображение слайда
8

Слайд 8: Вставка (контейнер SCRIPT)

Способы использования: 1. Внутри HTML- кода: <SCRIPT> a = 5; </SCRIPT> 2. Вынести код JavaScript в отдельный файл: <SCRIPT SRC="myscript.js"></SCRIPT>

Изображение слайда
9

Слайд 9: Иерархия классов

Класс объектов Window — это самый старший класс в иерархии объектов JavaScript. К нему относятся объект Window и объект Frame. Объект Window ассоциируется с окном программы-браузера, а объект Frame — с окнами внутри окна браузера, которые порождаются последним при использовании автором HTML-страниц контейнеров FRAMESET и FRAME.

Изображение слайда
10

Слайд 10: Объект location

входит как подкласс и в класс Window, и в класс Document характеризуется свойствами и методами, не имеет событий наследует все свойства URL, что позволяет получить доступ к любой части схемы URL

Изображение слайда
11

Слайд 11: Свойства location

window.location.href = http://intuit.ru:80/r/dir/page?search#mark window.location.protocol = http; window.location.hostname = intuit.ru; window.location.host = intuit.ru:80; window.location.port = 80 window.location.pathname = /r/dir/; window.location.search = search; window.location.hash = mark;

Изображение слайда
12

Слайд 12: Методы location

предназначены для управления загрузкой (replace) и перезагрузкой страницы (reload) window.location.reload(true); window.location.replace('#top');

Изображение слайда
13

Слайд 13: Управление окнами

window.alert(‘ Внимание! ’) – выдает окно с предупреждением window.confirm() - позволяет задать пользователю вопрос, на который тот может ответить либо положительно, либо отрицательно window.prompt() - позволяет принять от пользователя короткую строку текста,которая набирается в поле ввода информационного окна window.open() – создание новых окон Синтаксис: open("URL","window_name","param,param,...", replace); window.close() – закрывает окно

Изображение слайда
14

Слайд 14: Управление окнами

window.setTimeout() создание нового потока вычислений, исполнение которого откладывается на время (ms), указанное вторым аргументом: idt = setTimeout("JavaScript_ код", Time); window.clearTimeout - позволяет уничтожить поток, вызванный методом setTimeout()

Изображение слайда
15

Слайд 15: Тег FORM

<FORM NAME=f_name METHOD=get ACTION="javascript:void(0);"> <INPUT NAME=i_name SIZE=30 MAXLENGTH=30> </FORM> В программах на JavaScript к полям формы обращаются по имени: window.document.f_name.i_name.value=" Текстовое поле"; Альтернативный метод: window.document.forms[0].elements[0].value=" Текстовое поле";

Изображение слайда
16

Слайд 16: Свойства и методы объекта Form

action – отвечает за вызов скрипта с указанным URL elements[] – массив полей формы reset() – позволяет установить значения полей формы по умолчанию submit() – позволяет передать данные формы на сервер

Изображение слайда
17

Слайд 17: События объекта Form

onReset – возникает при нажатии кнопки типа reset или выполнении метода reset() onSubmit - возникает при нажатии на кнопку типа Submit, графическую кнопку (тип image) или при вызове метода submit()

Изображение слайда
18

Слайд 18: Поля ввода данных (Объект Text )

Основные задачи: Защита поля от ввода данных пользователем Реакция на изменение значения поля ввода.

Изображение слайда
19

Слайд 19: Защита поля ввода

Для защиты поля от ввода в него символов применяют метод blur() в сочетании с обработчиком события onFocus: <FORM> <INPUT SIZE=10 VALUE="1-е значение" onFocus="document.forms[0].elements[0].blur();"> <INPUT TYPE=button VALUE=Change onClick="document.forms[0].elements[0].value= '2-е значение';"> <INPUT TYPE=reset VALUE=Reset> </FORM>

Изображение слайда
20

Последний слайд презентации: Web- технологии: Изменение значения поля ввода

Реакция на изменение значения поля ввода обрабатывается посредством программы, указанной в атрибуте onChange: <FORM METHOD="post" onSubmit="return false;"> <INPUT SIZE="15" MAXLENGHT="15" VALUE="Тест" onChange="window.alert(document.forms[0].elements[0]. value);"> <INPUT TYPE="button" VALUE="Изменить" onClick="document.forms[0].elements[0].value='Change';"> </FORM>

Изображение слайда