Unobtrusive javascript with jQuery

Unobtrusive Javascript with jQueryPresentationbyAngel Ruiz Calvo

SummaryJavascript frameworksjQuery introductionUnobtrusive JavascriptLessons learnedWorking examplesThanks & Acknowledgements.

Why areJavascript frameworks needed?

Why areJavascript frameworks needed?Because this is how Javascript is seen by the browser:

Javascript frameworksTheir main aim is to present a solid and usable API on top of Javascript while at the same time it hides painful browser particularities and incompatibilities.Essential to make “cross-browser” web applications.Makes programming Javascript easier and simpler.There are a few available.

jQuerysuccessis about ...Plugins

jQuerysuccessis about ...PluginsBig community

jQuerysuccessis about ...PluginsBig communityIndustry support...

jQuerysuccessis about ...PluginsBig communityIndustry support...Lightweight

jQuerysuccessis about ...PluginsBig communityIndustry support...LightweightSpeed

jQuerysuccessis about ...PluginsBig communityIndustry support...LightweightSpeedWell documented

jQuerysuccessis about ...PluginsBig communityIndustry support...LightweightSpeedWell documentedSupport

jQuerysuccessis about ...PluginsBig communityIndustry support...LightweightSpeedWell documentedSupportOpen/Free license

jQuery core philosophySimplify iteration between HTML and JavascriptFind HTML

jQuery core philosophySimplify iteration between HTML and JavascriptFind HTMLDo something to it

jQuery core philosophySimplify iteration between HTML and JavascriptFind HTMLDo something to itExample<HTML><BODY> <DIV>This is</DIV> <DIV>and example</DIV></BODY> </HTML>

jQuery core philosophySimplify iteration between HTML and JavascriptFind HTMLDo something to itExampleFind all divs$(“DIV”);<HTML><BODY><DIV>This is</DIV><DIV>and example</DIV></BODY> </HTML>

jQuery core philosophySimplify iteration between HTML and JavascriptFind HTMLDo something to itExampleFind all divsAdd class “foo” to all of them$(“DIV”).addClass(“foo”);<HTML><BODY><DIV class=“foo”>This is</DIV> <DIV class=“foo”>and example</DIV></BODY> </HTML>

jQuery factory method $()Its argument is always a CSS selector (CSS3 support for 1.4+ versions).Examples:$(“#myID”);// get element with id=“myID”$(“.myClass”);// get elements with class name=“myClass”

jQuery factory method $()Its argument is always a CSS selector (CSS3 support for 1.4+ versions).Examples:$(“#myID”);// get element with id=“myID”$(“.myClass”);// get elements with class name=“myClass”$(“li:first”);// get first list item$(“tr:odd”);// get odd table rows

jQuery factory method $()Its argument is always a CSS selector (CSS3 support for 1.4+ versions).Examples:$(“#myID”);// get element with id=“myID”$(“.myClass”);// get elements with class name=“myClass”$(“li:first”);// get first list item$(“tr:odd”);// get odd table rows$(“a[target=_blank]”);// get all links whose target is “_blank”$(“form[id^=step]”);// get all forms whose id begins with // “step”

jQuery factory method $()Its argument is always a CSS selector (CSS3 support for 1.4+ versions).Examples:$(“#myID”);// get element with id=“myID”$(“.myClass”);// get elements with class name=“myClass”$(“li:first”);// get first list item$(“tr:odd”);// get odd table rows$(“a[target=_blank]”);// get all links whose target is “_blank”$(“form[id^=step]”);// get all forms whose id begins with // “step”Or you can combine them:$(“#myID, .myClass, table”);

jQuery factory method $()Its argument is always a CSS selector (CSS3 support for 1.4+ versions).Examples:$(“#myID”);// get element with id=“myID”$(“.myClass”);// get elements with class name=“myClass”$(“li:first”);// get first list item$(“tr:odd”);// get odd table rows$(“a[target=_blank]”);// get all links whose target is “_blank”$(“form[id^=step]”);// get all forms whose id begins with // “step”Or you can combine them:$(“#myID, .myClass, table”);More examples:http://codylindley.com/jqueryselectors/

jQuery API groupsMoving elementsbefore(), after(), appendTo(), append(), ...

jQuery API groupsMoving elementsbefore(), after(), appendTo(), append(), ...Attributescss(), attr(), html(), val(), addClass(), ...

jQuery API groupsMoving elementsbefore(), after(), appendTo(), append(), ...Attributescss(), attr(), html(), val(), addClass(), ...Eventsbind(), trigger(), unbind(), live(), click(), ...

jQuery API groupsMoving elementsbefore(), after(), appendTo(), append(), ...Attributescss(), attr(), html(), val(), addClass(), ...Eventsbind(), trigger(), unbind(), live(), click(), ...Effectsshow(), fadeOut(), toogle(), animate(), ...

jQuery API groupsMoving elementsbefore(), after(), appendTo(), append(), ...Attributescss(), attr(), html(), val(), addClass(), ...Eventsbind(), trigger(), unbind(), live(), click(), ...Effectsshow(), fadeOut(), toogle(), animate(), ...Traversingfind(), is(), prevAll(), next(), hasClass(), ...

jQuery API groupsMoving elementsbefore(), after(), appendTo(), append(), ...Attributescss(), attr(), html(), val(), addClass(), ...Eventsbind(), trigger(), unbind(), live(), click(), ...Effectsshow(), fadeOut(), toogle(), animate(), ...Traversingfind(), is(), prevAll(), next(), hasClass(), ...Ajaxget(), getJSON(), post(), ajax(), load(), ...

jQuery API groupsMoving elementsbefore(), after(), appendTo(), append(), ...Attributescss(), attr(), html(), val(), addClass(), ...Eventsbind(), trigger(), unbind(), live(), click(), ...Effectsshow(), fadeOut(), toogle(), animate(), ...Traversingfind(), is(), prevAll(), next(), hasClass(), ...Ajaxget(), getJSON(), post(), ajax(), load(), ...More...

jQuery Plug-insHere you can find everything you need:http://plugins.jquery.com/

jQuery Plug-insHere you can find everything you need:http://plugins.jquery.com/Well known plug-in libraries:http://flowplayer.org/tools/index.htmlhttp://jqueryui.com/

jQuery referencesThe main documentation site is the best reference:http://docs.jquery.com

jQuery referencesThe main documentation site is the best reference:http://docs.jquery.comTo get up to speed we have purchased this book:

Unobtrusive JavascriptIt is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose basic principles are:

Unobtrusive JavascriptIt is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose basic principles are:Separate behaviour from structure (mark-up).

Unobtrusive JavascriptIt is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose basic principles are:Separate behaviour from structure (mark-up).Follow best practises to avoid each browser particular issues.

Unobtrusive JavascriptIt is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose basic principles are:Separate behaviour from structure (mark-up).Follow best practises to avoid each browser particular issues.“Progressive Enhancement” instead of “Graceful degradation”.

Separate behaviour from structure (mark-up).Before:<HTML><BODY> <INPUT type=“button” onclick=“alert(‘Hello World’);”></BODY> </HTML>

Separate behaviour from structure (mark-up).Before:After:<HTML><BODY> <INPUT type=“button” onclick=“alert(‘Hello World’);”></BODY> </HTML><HTML><BODY> <INPUT type=“button”></BODY><script type=“text/javascript”> $(“INPUT”).click(function(){alert(‘Hello World’);});</script></HTML>

Separate behaviour from structure (mark-up).Before:After:<HTML><BODY> <INPUT type=“button” onclick=“alert(‘Hello World’);”></BODY> </HTML>Don’t worry!!Experience will show you that IT GETS BETTER THAN THAT!!!<HTML><BODY> <INPUT type=“button”></BODY><script type=“text/javascript”> $(“INPUT”).click(function(){alert(‘Hello World’);});</script></HTML>

Follow best practises to avoid each browser particularaties.Basically use jQuery for your javascript.

Follow best practises to avoid each browser particularaties.Basically use jQuery for your javascript.But do not forget about CSS frameworks!!!

Follow best practises to avoid each browser particularaties.Basically use jQuery for your javascript.But do not forget about CSS frameworks!!!Why?

Follow best practises to avoid each browser particularaties.Basically use jQuery for your javascript.But do not forget about CSS frameworks!!!Why?Good examples of CSS frameworks:YAML:http://www.yaml.de/en/Blueprint: http://www.blueprintcss.org/

“Graceful Degradation”e.g. Date PickerRenders both input field and buttonIf javascript is disabledthe button will not work

“Progressive Enhancement”e.g. Date PickerRenders both input field and hides buttonIf javascript is enabledthe button will be shown

Lessons learnedCss at the top.

Lessons learnedCss at the top.Javascript at the bottom (not always, e.g. jQuery import).

Lessons learnedCss at the top.Javascript at the bottom (not always, e.g. jQuery import).Or remember:$(function (){ //code will execute after page load}),

Lessons learnedCss at the top.Javascript at the bottom (not always, e.g. jQuery import).Or remember:which is equivalent to:$(function (){ //code will execute after page load}),$(document).ready(function (){});

Lessons learnedCss at the top.Javascript at the bottom (not always, e.g. jQuery import).Or remember:which is equivalent to:, , your “best friend”.$(function (){ //code will execute after page load}),$(document).ready(function (){});

Lessons learnedCss at the top.Javascript at the bottom (not always, e.g. jQuery import).Or remember:which is equivalent to:, , your “best friend”.Group, minify and gzip these static resources:$(function (){ //code will execute after page load}),$(document).ready(function (){});

Lessons learnedCss at the top.Javascript at the bottom (not always, e.g. jQuery import).Or remember:which is equivalent to:, , your “best friend”.Group, minify and gzip these static resources:Asses your page using YslowYou do not need to score 100.Try to follow the suggested best practices as much as possible.$(function (){ //code will execute after page load}),$(document).ready(function (){});

Any questions before showing working examples?

Thanks for listeningThe authorAngel Ruiz is an IT Senior Consultant at SRA IT (Australia)AcknowledgmentsIgnacio Coloma from ExtremaSistemas (Spain)

Unobtrusive javascript with jQuery

Recommended

More Related Content

What's hot (20)

Similar to Unobtrusive javascript with jQuery (20)

Recently uploaded (20)

Unobtrusive javascript with jQuery