Unobtrusive JavaScript

1
????????????UnobtrusiveJavaScript
??????? ??????? ???????? ???-?????????? ase_at_open
webtech.ru
2
Progressive Enhancement

• ??? ?????????? ????? ???????? ? ????? ????????
• ??? ???????????????? ???????? ? ????? ????????
• ????????????? ???????
• ????????????? ???????? ?? ?????????? ?? ????
  ???????? CSS
• ????????? ???????? ?? ?????????? ?? ????
  Unobtrusive JavaScript

3
???????????? JavaScript

• ??????? ????????
• ???? JS-??? ????????? ?? ??????? ?????
• ??????????? ??????? ??????????? ????? ????????
  ???????? ? ??????? ??????????? ???????
• ????? ??????????? ?? ???? ????????? class ? id, ?
  ?? ?? ???? ??????? ???????? ???????? ??????
  JavaScript-???????

4
?????? ??????????

• ??????? ?? ??????,
• ?????????
• ???????????

5
????? ???????????? ????????

• getElementById
• getElementsByTagName

button document.getElementById('submitter')
links document.getElementsByTagName('a')
6
????? ???????????? ????????
ltul id"menu"gt ltligtlta href"/about"gt?
????????lt/agtlt/ligt ltligtlta href/products"gt??????
???lt/agtlt/ligt ltligtlta href"/contacts"gt????????lt/a
gtlt/ligt lt/ulgt function getMenuLinks() var
parentObj document.getElementById('menu')
var menuLinks parentObj.getElementsByTagName('a'
) return menuLinks
7
????? ???????????? ????????
ltinput class"required" name"email" /gt ltinput
class"required" name"phone" /gt function
getRequired() var inputs document.getElements
ByTagName('input') var requiredInputs new
Array for ( var i 0 i lt inputs.length i
) if ( inputsi.className.match('required)
) requiredInputs.push(inputsi)
return requiredInputs
8
?????? ?????????
9
?????????? ???????????

• ?????? ???????
• lta href"" onclick"login()"gt
• lta href"javascriptlogin()"gt
• lta href"javascriptvoid(0)" id"login"gt
• 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.cancelBubbl
e 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
15
AJAX

• ??????? ??-AJAX ??????
• ???????? ??????????? ???????, ??????? ??????
  ?????? ? ?????? ????? ?????????? ?????? ?? ??????
  ????? XMLHttpRequest
• ?????????? ???????? href ? action
• ??? ???????? ??????????? AHAH (Asynchronous HTML
  and HTTP)

16
??????? ?? ????????!