'

Ненавязчивый “Unobtrusive” JavaScript

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

Поиск необходимого элемента getElementById getElementsByTagName button = document.getElementById('submitter'); links = document.getElementsByTagName('a');


Слайд 5

Поиск необходимого элемента <ul id="menu"> <li><a href="/about">О компании</a></li> <li><a href=“/products">Продукция</a></li> <li><a href="/contacts">Контакты</a></li> </ul> function getMenuLinks(){ var parentObj = document.getElementById('menu'); var menuLinks = parentObj.getElementsByTagName('a'); return menuLinks; }


Слайд 6

Поиск необходимого элемента <input class="required" name="email" /> <input class="required" name="phone" /> 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; }


Слайд 7

Дерево элементов


Слайд 8

Добавление обработчика Плохие способы <a href="#" onclick="login();"> <a href="javascript:login();"> <a href="javascript:void(0);" id="login"> document.getElementById('login').onclick = function(){ … }


Слайд 9

Добавление обработчика DOM event model: addEventListener removeEventListener MSIE: attachEvent detachEvent


Слайд 10

Добавление обработчика 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; } }


Слайд 11

Отмена исходного действия DOM event model: preventDefault stopPropagation MSIE: window.event.returnValue window.event.cancelBubble


Слайд 12

Отмена исходного действия function cancelDefault(e){ if ( e && e.preventDefault && e.stopPropagation() ){ e.stopPropagation(); e.preventDefault(); } if ( window.event ){ window.event.cancelBubble = true; window.event.returnValue = false; } }


Слайд 13

Источник события 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; }


Слайд 14

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


Слайд 15

Спасибо за внимание!


×

HTML:





Ссылка: