Обработка событий в JavaScript. Лекция № 9 - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Обработка событий в JavaScript. Лекция № 9, слайд №1

Обработка событий в JavaScript. Лекция № 9, слайд №2

Обработка событий в JavaScript. Лекция № 9, слайд №3

Обработка событий в JavaScript. Лекция № 9, слайд №4

Обработка событий в JavaScript. Лекция № 9, слайд №5

Обработка событий в JavaScript. Лекция № 9, слайд №6

Обработка событий в JavaScript. Лекция № 9, слайд №7

Обработка событий в JavaScript. Лекция № 9, слайд №8

Обработка событий в JavaScript. Лекция № 9, слайд №9

Обработка событий в JavaScript. Лекция № 9, слайд №10

Обработка событий в JavaScript. Лекция № 9, слайд №11

Обработка событий в JavaScript. Лекция № 9, слайд №12

Обработка событий в JavaScript. Лекция № 9, слайд №13

Обработка событий в JavaScript. Лекция № 9, слайд №14

Обработка событий в JavaScript. Лекция № 9, слайд №15

Обработка событий в JavaScript. Лекция № 9, слайд №16

Обработка событий в JavaScript. Лекция № 9, слайд №17

Обработка событий в JavaScript. Лекция № 9, слайд №18

Обработка событий в JavaScript. Лекция № 9, слайд №19

Обработка событий в JavaScript. Лекция № 9, слайд №20

Обработка событий в JavaScript. Лекция № 9, слайд №21

Обработка событий в JavaScript. Лекция № 9, слайд №22

Обработка событий в JavaScript. Лекция № 9, слайд №23

Обработка событий в JavaScript. Лекция № 9, слайд №24

Обработка событий в JavaScript. Лекция № 9, слайд №25

Обработка событий в JavaScript. Лекция № 9, слайд №26

Обработка событий в JavaScript. Лекция № 9, слайд №27

Обработка событий в JavaScript. Лекция № 9, слайд №28

Обработка событий в JavaScript. Лекция № 9, слайд №29

Обработка событий в JavaScript. Лекция № 9, слайд №30

Обработка событий в JavaScript. Лекция № 9, слайд №31

Обработка событий в JavaScript. Лекция № 9, слайд №32

Обработка событий в JavaScript. Лекция № 9, слайд №33

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Обработка событий в JavaScript. Лекция № 9. Доклад-сообщение содержит 33 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Гипертекст и гипермедиа ведуший лектор 1-го потока Ерохин Андрей Леонидович лектор 2-го потока Груздо Ирина Владимировна

Слайд 2

Описание слайда:

Лекция №9 Обработка событий в JavaScript

Слайд 3

Описание слайда:

Название программы-обработчика события обычно состоит из названия собственно события, которому предшествует префикс “on” Название программы-обработчика события обычно состоит из названия собственно события, которому предшествует префикс “on” Типичный синтаксис: Пример: function myobr(f) { if (confirm(‘Вы уверены?’)) f.result.value=eval(f.expr.value) else alert(‘Повторите снова’) }

Слайд 4

Описание слайда:

Введите выражение: Результат: просмотр примера

Слайд 5

Описание слайда:

JavaScript выполняется в едином потоке. Современные браузеры позволяют порождать подпроцессы Web Workers, они выполняются параллельно и могут отправлять/принимать сообщения, но не имеют доступа к DOM. JavaScript выполняется в едином потоке. Современные браузеры позволяют порождать подпроцессы Web Workers, они выполняются параллельно и могут отправлять/принимать сообщения, но не имеют доступа к DOM. Обычно события становятся в очередь и обрабатываются в порядке поступления, асинхронно, независимо друг от друга. Синхронными являются вложенные события, инициированные из кода. Чтобы сделать событие гарантированно асинхронным, используется вызов через setTimeout(func, 0). Отложенный вызов через setTimeout(func, 0) используется не только в событиях, а вообще – всегда, когда мы хотим, чтобы некая функция func сработала после того, как текущий скрипт завершится.

Слайд 6

Описание слайда:

Объект Event Объект Event позволяет скриптовой программе получить подробную информацию о возникшем событии Особенности : Объект Event доступен только во время самого события Обращаться к Event можно только с обработчиков событий или функций

Слайд 7

Описание слайда:

Слайд 8

Описание слайда:

Пример: Пример: Получить информацию о событиях для всего документа

Слайд 9

Описание слайда:

Классификация способов обработки событий Задание кода функции и вызов этой функции с использованием схемы присоединения события к обработчику onИмясобытия = Имя_функции 2) Использование методов captureEvents(імя) – захват события handleEvent(імя) – передает событие соответствующему обработчику routeEvent(імя) –передает захваченное событие следующему обработчику 3) Использование схемы задания функции-обработчика function Имя_обьекта.имя_события ( ) { код обработчика события } 4) Поддержка общих событий с использованием атрибутов FOR и EVENT

Слайд 10

Описание слайда:

Пример Пример alert(‘Мышка движется’) Атрибут FOR – имя или идентификатор ID элемента, для которого создан обработчик события

Слайд 11

Описание слайда:

Слайд 12

Описание слайда:

Графический индикатор загрузки

Слайд 13

Описание слайда:

Слайд 14

Описание слайда:

Изменение изображений по циклу Изменение изображений var i=1; function changepic() { var x=document.getElementById('mypic'); if (i

Слайд 15

Описание слайда:

Слайд 16

Описание слайда:

Недостаток такого подхода: Недостаток такого подхода: после записи в src нового адреса начинается процесс загрузки соответствующего изображения Решение: упреждающая загрузка изображений

Слайд 17

Описание слайда:

hiddenImg= new Image(); hiddenImg= new Image(); //создается новый объект Image hiddenImg.src= "img3.gif"; // адрес изображения, которое далее представлено с //помощью объекта hiddenImg Запись нового адреса в атрибуте src заставляет браузер загружать изображения с указанного адреса

Слайд 18

Описание слайда:

Слайд 19

Описание слайда:

Изменение изображений в соответствии с событиями, которые инициированы пользователем Изменение изображений в соответствии с событиями, которые инициированы пользователем Изменение изображений просмотр примера

Слайд 20

Описание слайда:

Использование Cookies Cookie является решением одной из проблем HTTP протокола - непостоянство соединение между клиентом и сервером: - для каждого документа (или файла) при передаче по HTTP протоколу посылается отдельный запрос) транзакция завершается после того, как браузер выполнил запрос, а сервер вернул соответствующий ответ сразу после этого сервер "забывает" о пользователе и каждый раз следующий запрос этого же пользователя считает новым пользователем

Слайд 21

Описание слайда:

Использование Cookies Куки обычно используют в следующих целях: Авторизация пользователя; Хранения настроек пользователя; Ведения статистики о пользователях. Как правило, реклама отображаемая на сайтах использует ваши куки для определения того, какой контент вам показывать.

Слайд 22

Описание слайда:

Слайд 23

Описание слайда:

Используя cookie, можно эмулировать сессию по HTTP протоколу Используя cookie, можно эмулировать сессию по HTTP протоколу принцип эмуляция сессии: при первом запросе выдается соответствующее значение cookie при каждом следующем запросе это значение считывается с переменной окружения HTTP_COOKIE и соответствующим образом обрабатывается document.cookie. Однако, оно представляет собой не объект, а строку в специальном формате, для удобной манипуляций с которой нужны дополнительные функции.

Слайд 24

$Для пользователя технология cookie это Для пользователя технология cookie это - несколько файлов в папке %WINDOWS%\Cookies (Internet Explorer) - или...$

Описание слайда:

Для пользователя технология cookie это Для пользователя технология cookie это - несколько файлов в папке %WINDOWS%\Cookies (Internet Explorer) - или один файл cookie.txt (другие браузеры)) Спецификации Cookie: всего Cookies может быть не более 300 каждый Cookie не может быть больше 4kb с одного домена второго уровня (плюс подуровни) не может быть получено более 20 Cookies информация по Cookie одного домена второго уровня (плюс подуровни) не может быть прочитана другими доменами если документ кэшируется, то информация о cookie не кэшируется информация Cookie может передаваться с помощью протокола SSL если лимит исчерпывается (4kb), то первые записи удаляются

Слайд 25

Описание слайда:

Слайд 26

Описание слайда:

Пример ( из w3schools.com) Задача: запросить имя пользователя, сохранить его в виде информационного элемента. При последующих посещениях отображать в виде приветствия function getCookie(c_name) // функция чтения информационного элемента { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1 ; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)); } } return "" } function setCookie(c_name,value,expiredays) { // функция установки информационного элемента var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : "; expires="+exdate.toGMTString()); }

Слайд 27

Описание слайда:

Слайд 28

Описание слайда:

Ппроблема небезопасности Пример: Пользователь зашел на почтовый сайт, заполнил форму с login`ом и паролем, которые записались в cookie (даже через SSL). Злоумышленник написал письмо пользователю в формате HTML с параметрами чтения cookie с паролями. Прочитав cookie, HTML-файл запрашивает у пользователя разрешение отослать информацию злоумышленнику, login и пароль будут высланы злоумышленнику. Злоумышленник также может добавить 0-й фрейм, где будет временно содержаться информация из cookie, которая при ответе на письмо будет добавляться в конец письма.

Слайд 29

Описание слайда:

Использование local storage (html 5) при создании сайта удобно использовать локальную базу данных, которая расположена на стороне пользователя одна из серьезных проблем HTTP - это отсутствие статичности относительно состояния приложений классический способ сохранить состояние приложения для конкретного пользователя – это cookies

Слайд 30

Описание слайда:

Использование local storage (html 5) Имеется два варианта хранения данных, допустимые HTML5 спецификацией: Локальное хранение: позволяет сохранять информацию без ограничений по срокам хранения. Именно этот вариант желательно использовать, когда нужно хранить постоянно данные. Использование сеансов: обеспечивает сохранность данных лишь на период одного сеанса, то есть после закрытия пользователем вкладки приложения и повторного ее открытия вся необходимая для дальнейшей работы приложения информация будет удалена.

Слайд 31

Описание слайда:

Недостатки cookies подвешивается при загрузке каждого документа, открытого на домене максимальный объем данных для хранения – 4 Кб cookies можно незаконно использовать для слежения за поведением пользователя в сети, поэтому пользователи часто отключают cookies (или включают опцию запроса каждый раз, когда сайт пытается поставить cookies) неточная идентификация, возможность похищения или подмены, нестабильность между клиентом и сервером

Слайд 32

Описание слайда:

Использование локального хранилища в браузерах, совместимых с HTML5

Слайд 33

Описание слайда:

localStorage вместо localStorage можно использовать sessionStorage, если необходимо хранить данные только во время одной сессии (пока пользователь не закроет браузер) Проблема «Strings Only» Особенность local storage – можно использовать в ключах только переменные типа string