Ненавязчивый“Unobtrusive”JavaScript презентация

Progressive Enhancement Всё содержание сайта доступно в любом браузере Вся функциональность доступна в любом браузере Семантическая верстка Представление отделено от содержания за счёт внешнего CSS Поведение отделено от содержания за

Слайд 1Ненавязчивый “Unobtrusive” JavaScript
Сергеев Алексей
«Открытые Веб-Технологии»
ase@openwebtech.ru


Слайд 2Progressive Enhancement
Всё содержание сайта доступно в любом браузере
Вся функциональность доступна

в любом браузере
Семантическая верстка
Представление отделено от содержания за счёт внешнего CSS
Поведение отделено от содержания за счёт «Unobtrusive» JavaScript




Слайд 3Ненавязчивый JavaScript
Главные принципы:
весь JS-код находится во внешнем файле
обработчики событий

добавляются после загрузки страницы с помощью специальных функций
стили добавляются за счёт атрибутов class и id, а не за счёт прямого указания значений внутри JavaScript-функций



Слайд 4Пример реализации
Переход по ссылке,
требующей
авторизацию



Слайд 5Поиск необходимого элемента
getElementById



getElementsByTagName


button = document.getElementById('submitter');
links = document.getElementsByTagName('a');


Слайд 6Поиск необходимого элемента



О компании

href="/contacts">Контакты



function getMenuLinks(){
var parentObj = document.getElementById('menu');
var menuLinks = parentObj.getElementsByTagName('a');
return menuLinks;
}

Слайд 7Поиск необходимого элемента







function getRequired(){

var inputs = document.getElementsByTagName('input');
var requiredInputs = new Array;
for ( var i = 0; i < inputs.length; i++ ) {
if ( inputs[i].className.match('required‘) )
requiredInputs.push(inputs[i]);
}
return requiredInputs;
}

Слайд 8Дерево элементов


Слайд 9Добавление обработчика
Плохие способы






document.getElementById('login').onclick = function(){


}


Слайд 10Добавление обработчика
DOM event model:
addEventListener
removeEventListener

MSIE:
attachEvent
detachEvent



Слайд 11Добавление обработчика


function addEvent(obj, evType, func, useCapture){
if (obj.addEventListener){
obj.addEventListener(evType,

func, useCapture);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent('on'+evType, func);
return r;
} else {
obj['on'+evType] = func;
}
}

Слайд 12Отмена исходного действия
DOM event model:
preventDefault
stopPropagation

MSIE:
window.event.returnValue
window.event.cancelBubble



Слайд 13Отмена исходного действия


function cancelDefault(e){
if ( e && e.preventDefault &&

e.stopPropagation() ){
e.stopPropagation();
e.preventDefault();
}
if ( window.event ){
window.event.cancelBubble = true;
window.event.returnValue = false;
}
}

Слайд 14Источник события
DOM Event Model
e.target
MSIE
window.event.srcElement


if ( window.event && window.event.srcElement ){
elem =

window.event.srcElement;
} else if ( e && e.target ) {
elem = e.target;
} else {
return;
}

Слайд 15AJAX
Сначала не-AJAX версия
Добавьте обработчики событий, которые вместо ссылок и кнопок

будут пересылать данные на сервер через XMLHttpRequest
Используте атрибуты href и action
Для простоты используйте AHAH (Asynchronous HTML and HTTP)




Слайд 16Спасибо за внимание!


Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.


Для правообладателей

Яндекс.Метрика