🗊Презентация Обработка событий в 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-го потока Груздо Ирина Владимировна
Описание слайда:
Гипертекст и гипермедиа ведуший лектор 1-го потока Ерохин Андрей Леонидович лектор 2-го потока Груздо Ирина Владимировна

Слайд 2


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

Слайд 3


Название программы-обработчика события обычно состоит из названия собственно события, которому предшествует префикс “on” Название программы-обработчика события обычно состоит из названия собственно события, которому предшествует префикс “on” Типичный синтаксис: <ТЭГ обработчик_ события = " Имя_ программы-обработчика (аргументы) "> Пример: <html> <head> <script type=‘text/javascript’> function myobr(f) { if (confirm(‘Вы уверены?’)) f.result.value=eval(f.expr.value) else alert(‘Повторите снова’) } </script> </head>
Описание слайда:
Название программы-обработчика события обычно состоит из названия собственно события, которому предшествует префикс “on” Название программы-обработчика события обычно состоит из названия собственно события, которому предшествует префикс “on” Типичный синтаксис: <ТЭГ обработчик_ события = " Имя_ программы-обработчика (аргументы) "> Пример: <html> <head> <script type=‘text/javascript’> function myobr(f) { if (confirm(‘Вы уверены?’)) f.result.value=eval(f.expr.value) else alert(‘Повторите снова’) } </script> </head>

Слайд 4


<body> <body> <form style='background:silver' name='f'> Введите выражение: <input type='text' name='expr' size='15' > <input type ='button' value='Переместить' onClick='myobr(this.form)'> Результат: <input type='text' name='result' size='15'> </form> </body> просмотр примера
Описание слайда:
<body> <body> <form style='background:silver' name='f'> Введите выражение: <input type='text' name='expr' size='15' > <input type ='button' value='Переместить' onClick='myobr(this.form)'> Результат: <input type='text' name='result' size='15'> </form> </body> просмотр примера

Слайд 5


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

Слайд 6


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

Слайд 7


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

Слайд 8


Пример: Пример: Получить информацию о событиях для всего документа <html><head> <script type=‘text/javascript'> function InfoEvent() { //event.srcElement придумали в IE. В других браузерах и новых IE это event.target. var st=event.srcElement.tagName; alert(‘Источник события - тег: ' + st); } </script> </head> <body onClick='InfoEvent()'> <div> Первый div</div> <img src='#' alt=‘Рисунок' width='100‘ height='120' border='3'> <div> Второй div</div> </body> </html>
Описание слайда:
Пример: Пример: Получить информацию о событиях для всего документа <html><head> <script type=‘text/javascript'> function InfoEvent() { //event.srcElement придумали в IE. В других браузерах и новых IE это event.target. var st=event.srcElement.tagName; alert(‘Источник события - тег: ' + st); } </script> </head> <body onClick='InfoEvent()'> <div> Первый div</div> <img src='#' alt=‘Рисунок' width='100‘ height='120' border='3'> <div> Второй div</div> </body> </html>

Слайд 9


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

Слайд 10


Пример Пример <script for=‘document’ event=‘onmousemove()’ type=‘text/javascript’> alert(‘Мышка движется’) </script> Атрибут FOR – имя или идентификатор ID элемента, для которого создан обработчик события
Описание слайда:
Пример Пример <script for=‘document’ event=‘onmousemove()’ type=‘text/javascript’> alert(‘Мышка движется’) </script> Атрибут FOR – имя или идентификатор ID элемента, для которого создан обработчик события

Слайд 11


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

Слайд 12


Графический индикатор загрузки <html><head> <script type=‘text/javascript'> function progress_load() { if (document.images['bar'].width < 150) { document.images['bar'].width+=5; document.images['bar'].height=15; } else { clearInterval(loadprogress); } } var loadprogress; //Событие onload на window срабатывает, когда загружается вся страница, включая //ресурсы на ней – стили, картинки, ифреймы и т.п. window.onload=function(){ loadprogress = setInterval('progress_load();', 400); } </script></head> <body> <img src='bar.gif' name='bar'/> </body></html>
Описание слайда:
Графический индикатор загрузки <html><head> <script type=‘text/javascript'> function progress_load() { if (document.images['bar'].width < 150) { document.images['bar'].width+=5; document.images['bar'].height=15; } else { clearInterval(loadprogress); } } var loadprogress; //Событие onload на window срабатывает, когда загружается вся страница, включая //ресурсы на ней – стили, картинки, ифреймы и т.п. window.onload=function(){ loadprogress = setInterval('progress_load();', 400); } </script></head> <body> <img src='bar.gif' name='bar'/> </body></html>

Слайд 13


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

Слайд 14


Изменение изображений по циклу <html><head><title> Изменение изображений </title> <script type='text/javascript'> var i=1; function changepic() { var x=document.getElementById('mypic'); if (i<=4)     {if (i==1) {x.src='1.gif'; i++} else if (i==2) {x.src='2.gif'; i++} else if (i==3) {x.src='3.gif'; i++} else if (i==4) {x.src='4.gif'; i=1} setTimeout('changepic()',1000)}} </script></head> <body><div style='margin:10'> Изменение изображений по циклу</div> <div style='margin:20' onmouseover='changepic()'> <img src='1.gif' id='mypic' width='150' height='150' border='2'> </div></body></html> просмотр примера
Описание слайда:
Изменение изображений по циклу <html><head><title> Изменение изображений </title> <script type='text/javascript'> var i=1; function changepic() { var x=document.getElementById('mypic'); if (i<=4)     {if (i==1) {x.src='1.gif'; i++} else if (i==2) {x.src='2.gif'; i++} else if (i==3) {x.src='3.gif'; i++} else if (i==4) {x.src='4.gif'; i=1} setTimeout('changepic()',1000)}} </script></head> <body><div style='margin:10'> Изменение изображений по циклу</div> <div style='margin:20' onmouseover='changepic()'> <img src='1.gif' id='mypic' width='150' height='150' border='2'> </div></body></html> просмотр примера

Слайд 15


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

Слайд 16


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

Слайд 17


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

Слайд 18


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

Слайд 19


Изменение изображений в соответствии с событиями, которые инициированы пользователем Изменение изображений в соответствии с событиями, которые инициированы пользователем <html> <head><title>Изменение изображений </title></head> <body> <a href='#' onMouseOver="document.myImage2.src='1.jpg' " onMouseOut="document.myImage2.src='6.gif'"> <img src="1.jpg" name="myImage2" width='120' height='120' border='0'></a> </body> </html> просмотр примера
Описание слайда:
Изменение изображений в соответствии с событиями, которые инициированы пользователем Изменение изображений в соответствии с событиями, которые инициированы пользователем <html> <head><title>Изменение изображений </title></head> <body> <a href='#' onMouseOver="document.myImage2.src='1.jpg' " onMouseOut="document.myImage2.src='6.gif'"> <img src="1.jpg" name="myImage2" width='120' height='120' border='0'></a> </body> </html> просмотр примера

Слайд 20


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

Слайд 21


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

Слайд 22


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

Слайд 23


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

Слайд 24


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

Слайд 25


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

Слайд 26


Пример ( из w3schools.com) Задача: запросить имя пользователя, сохранить его в виде информационного элемента. При последующих посещениях отображать в виде приветствия <html><head> <script type="text/javascript"> 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()); }
Описание слайда:
Пример ( из w3schools.com) Задача: запросить имя пользователя, сохранить его в виде информационного элемента. При последующих посещениях отображать в виде приветствия <html><head> <script type="text/javascript"> 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


function checkCookie() // функция проверки информационного элемента function checkCookie() // функция проверки информационного элемента { username=getCookie('username'); if (username!=null && username!="") { alert(‘Здравствуйте, '+username+‘рады Вас видеть на нашей странице!'); } else { username=prompt(‘Пожалуйста, представьтесь: ',""); if (username!=null && username!="") { setCookie('username',username,365); } } } </script> </head> <body onLoad="checkCookie()"> </body> </html>
Описание слайда:
function checkCookie() // функция проверки информационного элемента function checkCookie() // функция проверки информационного элемента { username=getCookie('username'); if (username!=null && username!="") { alert(‘Здравствуйте, '+username+‘рады Вас видеть на нашей странице!'); } else { username=prompt(‘Пожалуйста, представьтесь: ',""); if (username!=null && username!="") { setCookie('username',username,365); } } } </script> </head> <body onLoad="checkCookie()"> </body> </html>

Слайд 28


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

Слайд 29


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

Слайд 30


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

Слайд 31


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

Слайд 32


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

Слайд 33


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

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию