Embed Size (px)
Citation preview
UnobtrusiveJavaScript
DaveVerwerhttp://daveverwer.com
http://shinydevelopment.com
WhatisUJS?
Didithavefullfunctionality? No
Wasitasquick? No
Wasitaspretty? No
Wasitasusable? No
Diditbasicallywork? Yes
Whyshouldyoucare?
Accessibility
MobileBrowsing
SEO
ValidHTML4.01orXHTML1.0CSSandsemanticHTMLandseparationofstructureandpresentationProgressiveenhancementTheW3CDOM(insteadoftheoldMicrosoftdocument.all)MeaningfulvaluesofclassandidMeaningfulaltattributesonallimagesScriptsthatworkonlinksshouldextendthebasiclinkfunctionality(thinkaccessiblepopups)Ifalinkmakesnosensewithoutascript,itshouldn'tbeintheHTML(butbegeneratedbyJavaScript)UseofformsorscriptsastheonlymeansofgettingcertaininformationisprohibitedRemovingthefocusrectangleonlinksisprohibitedInformationofferedinaclosedformat(thinkWord)shouldalsobeofferedinanopenformatThesemanticsofmanyHTMLelementsareexplicitlydefined
Asof1stSeptember2005,everywebsitebuiltforadutchgovernment
agencyisrequiredbylawtoconformto:
Point3:
ProgressiveEnhancement.
Point7:
Scriptsthatworkonlinksshouldextendthebasiclinkfunctionality.
Point8:
Ifanelementmakesnosensewithoutascript,itshouldn'tbeintheHTML.
Point9:
Useofformsorscriptsastheonlymeansofgettingcertaininformationisprohibited.
SoJavaScriptisevil,right?
GoodJavaScript
BadJavaScript
TheDarkAgesoftheWeb
Seperatingcontentfromdesign
<b><font size="5"><font color="#0000FF">THIS SITE IS UNDER CONSTRUCTION!!</font></font></b>
<style> p.construction { color: #00f; font-size: 1.5em; font-weight: bold; }</style>
<p class="construction"> THIS SITE IS UNDER CONSTRUCTION!!</p>
Seperatingcontentfromdesign
andbehaviour
target=“_blank”demo
Prototype&LowPro
<a class=“external”>
Event.addBehavior({ "a.external:click": function(event) { window.open(this.href, "ext"); return false; }});
Settingaclassbecomesanindicatorofbehaviour
notjuststyle
Makesurenothingbreaks
StartminimalandshowUIor
StartbigandhideUI
JSSpecificUIdemo
UJSpluginforRailsdemo
Summary
Doesitreallyneedit?
Dolinksstillwork?
Doesthisbreakthebackbutton?
Don’trelyonalert()forconfirmations
Scriptshiddenawaywhenpossible?
EnhancingAccessibilitywithJavaScript?!?
