Unobtrusive Javascript with jQuery<br />PresentationbyAngel Ruiz Calvo<br />
Summary<br />Javascript frameworks<br />jQuery introduction<br />Unobtrusive Javascript<br />Lessons learned<br />Working ...
Why areJavascript frameworks needed?<br />
Why areJavascript frameworks needed?<br />Because this is how Javascript is seen by the browser:<br />
Javascript frameworks<br />Their main aim is to present a solid and usable API on top of Javascript  while at the same tim...
Javascript frameworks<br />Their main aim is to present a solid and usable API on top of Javascript  while at the same tim...
jQuerysuccess<br />is about ...<br />
jQuerysuccess<br />is about ...<br />Plugins<br />
jQuerysuccess<br />is about ...<br />Plugins<br />Big community<br />
jQuerysuccess<br />is about ...<br />Plugins<br />Big community<br />Industry support<br />...<br />
jQuerysuccess<br />is about ...<br />Plugins<br />Big community<br />Industry support<br />...<br />Lightweight<br />
jQuerysuccess<br />is about ...<br />Plugins<br />Big community<br />Industry support<br />...<br />Lightweight<br />Speed...
jQuerysuccess<br />is about ...<br />Plugins<br />Big community<br />Industry support<br />...<br />Lightweight<br />Speed...
jQuerysuccess<br />is about ...<br />Plugins<br />Big community<br />Industry support<br />...<br />Lightweight<br />Speed...
jQuerysuccess<br />is about ...<br />Plugins<br />Big community<br />Industry support<br />...<br />Lightweight<br />Speed...
jQuery core philosophy<br />Simplify iteration between HTML and Javascript<br />Find HTML<br />
jQuery core philosophy<br />Simplify iteration between HTML and Javascript<br />Find HTML<br />Do something to it<br />
jQuery core philosophy<br />Simplify iteration between HTML and Javascript<br />Find HTML<br />Do something to it<br /><ul...
jQuery core philosophy<br />Simplify iteration between HTML and Javascript<br />Find HTML<br />Do something to it<br /><ul...
jQuery core philosophy<br />Simplify iteration between HTML and Javascript<br />Find HTML<br />Do something to it<br /><ul...
jQuery factory method $()<br />Its argument is always a CSS selector (CSS3 support for 1.4+ versions).<br />Examples:<br /...
jQuery factory method $()<br />Its argument is always a CSS selector (CSS3 support for 1.4+ versions).<br />Examples:<br /...
jQuery factory method $()<br />Its argument is always a CSS selector (CSS3 support for 1.4+ versions).<br />Examples:<br /...
jQuery factory method $()<br />Its argument is always a CSS selector (CSS3 support for 1.4+ versions).<br />Examples:<br /...
jQuery factory method $()<br />Its argument is always a CSS selector (CSS3 support for 1.4+ versions).<br />Examples:<br /...
jQuery API groups<br />Moving elements<br />before(), after(), appendTo(), append(), ...<br />
jQuery API groups<br />Moving elements<br />before(), after(), appendTo(), append(), ...<br />Attributes<br />css(), attr(...
jQuery API groups<br />Moving elements<br />before(), after(), appendTo(), append(), ...<br />Attributes<br />css(), attr(...
jQuery API groups<br />Moving elements<br />before(), after(), appendTo(), append(), ...<br />Attributes<br />css(), attr(...
jQuery API groups<br />Moving elements<br />before(), after(), appendTo(), append(), ...<br />Attributes<br />css(), attr(...
jQuery API groups<br />Moving elements<br />before(), after(), appendTo(), append(), ...<br />Attributes<br />css(), attr(...
jQuery API groups<br />Moving elements<br />before(), after(), appendTo(), append(), ...<br />Attributes<br />css(), attr(...
jQuery Plug-ins<br />Here you can find everything you need:<br />http://plugins.jquery.com/<br />
jQuery Plug-ins<br />Here you can find everything you need:<br />http://plugins.jquery.com/<br />Well known plug-in librar...
jQuery references<br />The main documentation site is the best reference:<br />http://docs.jquery.com<br />
jQuery references<br />The main documentation site is the best reference:<br />http://docs.jquery.com<br />To get up to sp...
Unobtrusive Javascript<br />It is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose...
Unobtrusive Javascript<br />It is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose...
Unobtrusive Javascript<br />It is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose...
Unobtrusive Javascript<br />It is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose...
Separate behaviour from structure (mark-up).<br />Before:<br /><HTML><br /><BODY><br />	<INPUT type=“button” onclick=“aler...
Separate behaviour from structure (mark-up).<br />Before:<br />After:<br /><HTML><br /><BODY><br />	<INPUT type=“button” o...
Separate behaviour from structure (mark-up).<br />Before:<br />After:<br /><HTML><br /><BODY><br />	<INPUT type=“button” o...
Follow best practises to avoid each browser particularaties.<br />Basically use jQuery for your javascript.<br />
Follow best practises to avoid each browser particularaties.<br />Basically use jQuery for your javascript.<br />But do no...
Follow best practises to avoid each browser particularaties.<br />Basically use jQuery for your javascript.<br />But do no...
Follow best practises to avoid each browser particularaties.<br />Basically use jQuery for your javascript.<br />But do no...
Follow best practises to avoid each browser particularaties.<br />Basically use jQuery for your javascript.<br />But do no...
“Graceful Degradation”<br />e.g. Date Picker<br />Renders both input field and button<br />If javascript is disabled<br />...
“Progressive Enhancement”<br />e.g. Date Picker<br />Renders both input field and hides button<br />If javascript is enabl...
Lessons learned<br />Css at the top.<br />
Lessons learned<br />Css at the top.<br />Javascript at the bottom (not always, e.g. jQuery import).<br />
Lessons learned<br />Css at the top.<br />Javascript at the bottom (not always, e.g. jQuery import).<br />Or remember:<br ...
Lessons learned<br />Css at the top.<br />Javascript at the bottom (not always, e.g. jQuery import).<br />Or remember:<br ...
Lessons learned<br />Css at the top.<br />Javascript at the bottom (not always, e.g. jQuery import).<br />Or remember:<br ...
Lessons learned<br />Css at the top.<br />Javascript at the bottom (not always, e.g. jQuery import).<br />Or remember:<br ...
Lessons learned<br />Css at the top.<br />Javascript at the bottom (not always, e.g. jQuery import).<br />Or remember:<br ...
Any questions before showing working examples?<br />
Thanks for listening<br />The author<br /><ul><li>Angel Ruiz is an IT Senior Consultant at SRA IT (Australia)</li></ul>Ack...
Upcoming SlideShare
Loading in …5
×

Unobtrusive javascript with jQuery

2,019
-1

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,019
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Unobtrusive javascript with jQuery

  1. 1. Unobtrusive Javascript with jQuery<br />PresentationbyAngel Ruiz Calvo<br />
  2. 2. Summary<br />Javascript frameworks<br />jQuery introduction<br />Unobtrusive Javascript<br />Lessons learned<br />Working examples<br />Thanks & Acknowledgements. <br />
  3. 3. Why areJavascript frameworks needed?<br />
  4. 4. Why areJavascript frameworks needed?<br />Because this is how Javascript is seen by the browser:<br />
  5. 5. Javascript frameworks<br />Their 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.<br />Essential to make “cross-browser” web applications.<br />Makes programming Javascript easier and simpler.<br />There are a few available.<br />
  6. 6. Javascript frameworks<br />Their 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.<br />Essential to make “cross-browser” web applications.<br />Makes programming Javascript easier and simpler.<br />There are a few available.<br />
  7. 7. jQuerysuccess<br />is about ...<br />
  8. 8. jQuerysuccess<br />is about ...<br />Plugins<br />
  9. 9. jQuerysuccess<br />is about ...<br />Plugins<br />Big community<br />
  10. 10. jQuerysuccess<br />is about ...<br />Plugins<br />Big community<br />Industry support<br />...<br />
  11. 11. jQuerysuccess<br />is about ...<br />Plugins<br />Big community<br />Industry support<br />...<br />Lightweight<br />
  12. 12. jQuerysuccess<br />is about ...<br />Plugins<br />Big community<br />Industry support<br />...<br />Lightweight<br />Speed<br />
  13. 13. jQuerysuccess<br />is about ...<br />Plugins<br />Big community<br />Industry support<br />...<br />Lightweight<br />Speed<br />Well documented<br />
  14. 14. jQuerysuccess<br />is about ...<br />Plugins<br />Big community<br />Industry support<br />...<br />Lightweight<br />Speed<br />Well documented<br />Support<br />
  15. 15. jQuerysuccess<br />is about ...<br />Plugins<br />Big community<br />Industry support<br />...<br />Lightweight<br />Speed<br />Well documented<br />Support<br />Open/Free license<br />
  16. 16. jQuery core philosophy<br />Simplify iteration between HTML and Javascript<br />Find HTML<br />
  17. 17. jQuery core philosophy<br />Simplify iteration between HTML and Javascript<br />Find HTML<br />Do something to it<br />
  18. 18. jQuery core philosophy<br />Simplify iteration between HTML and Javascript<br />Find HTML<br />Do something to it<br /><ul><li>Example</li></ul><HTML><br /><BODY><br /> <DIV>This is</DIV><br /> <DIV>and example</DIV><br /></BODY> <br /></HTML><br />
  19. 19. jQuery core philosophy<br />Simplify iteration between HTML and Javascript<br />Find HTML<br />Do something to it<br /><ul><li>Example</li></ul>Find all divs<br />$(“DIV”);<br /><HTML><br /><BODY><br /><DIV>This is</DIV><br /><DIV>and example</DIV><br /></BODY> <br /></HTML><br />
  20. 20. jQuery core philosophy<br />Simplify iteration between HTML and Javascript<br />Find HTML<br />Do something to it<br /><ul><li>Example</li></ul>Find all divs<br />Add class “foo” to all of them<br />$(“DIV”).addClass(“foo”);<br /><HTML><br /><BODY><br /><DIV class=“foo”>This is</DIV><br /> <DIV class=“foo”>and example</DIV><br /></BODY> <br /></HTML><br />
  21. 21. jQuery factory method $()<br />Its argument is always a CSS selector (CSS3 support for 1.4+ versions).<br />Examples:<br />$(“#myID”);// get element with id=“myID”<br />$(“.myClass”);// get elements with class name=“myClass”<br />
  22. 22. jQuery factory method $()<br />Its argument is always a CSS selector (CSS3 support for 1.4+ versions).<br />Examples:<br />$(“#myID”);// get element with id=“myID”<br />$(“.myClass”);// get elements with class name=“myClass”<br />$(“li:first”);// get first list item<br />$(“tr:odd”);// get odd table rows<br />
  23. 23. jQuery factory method $()<br />Its argument is always a CSS selector (CSS3 support for 1.4+ versions).<br />Examples:<br />$(“#myID”);// get element with id=“myID”<br />$(“.myClass”);// get elements with class name=“myClass”<br />$(“li:first”);// get first list item<br />$(“tr:odd”);// get odd table rows<br />$(“a[target=_blank]”);// get all links whose target is “_blank”<br />$(“form[id^=step]”);// get all forms whose id begins with // “step”<br />
  24. 24. jQuery factory method $()<br />Its argument is always a CSS selector (CSS3 support for 1.4+ versions).<br />Examples:<br />$(“#myID”);// get element with id=“myID”<br />$(“.myClass”);// get elements with class name=“myClass”<br />$(“li:first”);// get first list item<br />$(“tr:odd”);// get odd table rows<br />$(“a[target=_blank]”);// get all links whose target is “_blank”<br />$(“form[id^=step]”);// get all forms whose id begins with // “step”<br />Or you can combine them:<br />$(“#myID, .myClass, table”);<br />
  25. 25. jQuery factory method $()<br />Its argument is always a CSS selector (CSS3 support for 1.4+ versions).<br />Examples:<br />$(“#myID”);// get element with id=“myID”<br />$(“.myClass”);// get elements with class name=“myClass”<br />$(“li:first”);// get first list item<br />$(“tr:odd”);// get odd table rows<br />$(“a[target=_blank]”);// get all links whose target is “_blank”<br />$(“form[id^=step]”);// get all forms whose id begins with // “step”<br />Or you can combine them:<br />$(“#myID, .myClass, table”);<br />More examples:<br />http://codylindley.com/jqueryselectors/<br />
  26. 26. jQuery API groups<br />Moving elements<br />before(), after(), appendTo(), append(), ...<br />
  27. 27. jQuery API groups<br />Moving elements<br />before(), after(), appendTo(), append(), ...<br />Attributes<br />css(), attr(), html(), val(), addClass(), ...<br />
  28. 28. jQuery API groups<br />Moving elements<br />before(), after(), appendTo(), append(), ...<br />Attributes<br />css(), attr(), html(), val(), addClass(), ...<br />Events<br />bind(), trigger(), unbind(), live(), click(), ...<br />
  29. 29. jQuery API groups<br />Moving elements<br />before(), after(), appendTo(), append(), ...<br />Attributes<br />css(), attr(), html(), val(), addClass(), ...<br />Events<br />bind(), trigger(), unbind(), live(), click(), ...<br />Effects<br />show(), fadeOut(), toogle(), animate(), ...<br />
  30. 30. jQuery API groups<br />Moving elements<br />before(), after(), appendTo(), append(), ...<br />Attributes<br />css(), attr(), html(), val(), addClass(), ...<br />Events<br />bind(), trigger(), unbind(), live(), click(), ...<br />Effects<br />show(), fadeOut(), toogle(), animate(), ...<br />Traversing<br />find(), is(), prevAll(), next(), hasClass(), ...<br />
  31. 31. jQuery API groups<br />Moving elements<br />before(), after(), appendTo(), append(), ...<br />Attributes<br />css(), attr(), html(), val(), addClass(), ...<br />Events<br />bind(), trigger(), unbind(), live(), click(), ...<br />Effects<br />show(), fadeOut(), toogle(), animate(), ...<br />Traversing<br />find(), is(), prevAll(), next(), hasClass(), ...<br />Ajax<br />get(), getJSON(), post(), ajax(), load(), ...<br />
  32. 32. jQuery API groups<br />Moving elements<br />before(), after(), appendTo(), append(), ...<br />Attributes<br />css(), attr(), html(), val(), addClass(), ...<br />Events<br />bind(), trigger(), unbind(), live(), click(), ...<br />Effects<br />show(), fadeOut(), toogle(), animate(), ...<br />Traversing<br />find(), is(), prevAll(), next(), hasClass(), ...<br />Ajax<br />get(), getJSON(), post(), ajax(), load(), ...<br />More...<br />
  33. 33. jQuery Plug-ins<br />Here you can find everything you need:<br />http://plugins.jquery.com/<br />
  34. 34. jQuery Plug-ins<br />Here you can find everything you need:<br />http://plugins.jquery.com/<br />Well known plug-in libraries:<br />http://flowplayer.org/tools/index.html<br />http://jqueryui.com/<br />
  35. 35. jQuery references<br />The main documentation site is the best reference:<br />http://docs.jquery.com<br />
  36. 36. jQuery references<br />The main documentation site is the best reference:<br />http://docs.jquery.com<br />To get up to speed we have purchased this book:<br />
  37. 37. Unobtrusive Javascript<br />It is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose basic principles are:<br />
  38. 38. Unobtrusive Javascript<br />It is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose basic principles are:<br />Separate behaviour from structure (mark-up).<br />
  39. 39. Unobtrusive Javascript<br />It is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose basic principles are:<br />Separate behaviour from structure (mark-up).<br />Follow best practises to avoid each browser particular issues.<br />
  40. 40. Unobtrusive Javascript<br />It is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose basic principles are:<br />Separate behaviour from structure (mark-up).<br />Follow best practises to avoid each browser particular issues.<br />“Progressive Enhancement” instead of “Graceful degradation”.<br />
  41. 41. Separate behaviour from structure (mark-up).<br />Before:<br /><HTML><br /><BODY><br /> <INPUT type=“button” onclick=“alert(‘Hello World’);”><br /></BODY> <br /></HTML><br />
  42. 42. Separate behaviour from structure (mark-up).<br />Before:<br />After:<br /><HTML><br /><BODY><br /> <INPUT type=“button” onclick=“alert(‘Hello World’);”><br /></BODY> <br /></HTML><br /><HTML><br /><BODY><br /> <INPUT type=“button”><br /></BODY><br /><script type=“text/javascript”><br /> $(“INPUT”).click(function(){alert(‘Hello World’);});<br /></script><br /></HTML><br />
  43. 43. Separate behaviour from structure (mark-up).<br />Before:<br />After:<br /><HTML><br /><BODY><br /> <INPUT type=“button” onclick=“alert(‘Hello World’);”><br /></BODY> <br /></HTML><br />Don’t worry!!<br />Experience will show you that <br />IT GETS BETTER THAN THAT!!!<br /><HTML><br /><BODY><br /> <INPUT type=“button”><br /></BODY><br /><script type=“text/javascript”><br /> $(“INPUT”).click(function(){alert(‘Hello World’);});<br /></script><br /></HTML><br />
  44. 44. Follow best practises to avoid each browser particularaties.<br />Basically use jQuery for your javascript.<br />
  45. 45. Follow best practises to avoid each browser particularaties.<br />Basically use jQuery for your javascript.<br />But do not forget about CSS frameworks!!!<br />
  46. 46. Follow best practises to avoid each browser particularaties.<br />Basically use jQuery for your javascript.<br />But do not forget about CSS frameworks!!!<br />Why?<br />
  47. 47. Follow best practises to avoid each browser particularaties.<br />Basically use jQuery for your javascript.<br />But do not forget about CSS frameworks!!!<br />Why?<br />
  48. 48. Follow best practises to avoid each browser particularaties.<br />Basically use jQuery for your javascript.<br />But do not forget about CSS frameworks!!!<br />Why?<br />Good examples of CSS frameworks:<br />YAML:http://www.yaml.de/en/<br />Blueprint: http://www.blueprintcss.org/<br />
  49. 49. “Graceful Degradation”<br />e.g. Date Picker<br />Renders both input field and button<br />If javascript is disabled<br />the button will not work<br />
  50. 50. “Progressive Enhancement”<br />e.g. Date Picker<br />Renders both input field and hides button<br />If javascript is enabled<br />the button will be shown<br />
  51. 51. Lessons learned<br />Css at the top.<br />
  52. 52. Lessons learned<br />Css at the top.<br />Javascript at the bottom (not always, e.g. jQuery import).<br />
  53. 53. Lessons learned<br />Css at the top.<br />Javascript at the bottom (not always, e.g. jQuery import).<br />Or remember:<br />$(function (){<br /> //code will execute after page load<br />}),<br />
  54. 54. Lessons learned<br />Css at the top.<br />Javascript at the bottom (not always, e.g. jQuery import).<br />Or remember:<br />which is equivalent to:<br />$(function (){<br /> //code will execute after page load<br />}),<br />$(document).ready(function (){});<br />
  55. 55. Lessons learned<br />Css at the top.<br />Javascript at the bottom (not always, e.g. jQuery import).<br />Or remember:<br />which is equivalent to:<br />, , your “best friend”.<br />$(function (){<br /> //code will execute after page load<br />}),<br />$(document).ready(function (){});<br />
  56. 56. Lessons learned<br />Css at the top.<br />Javascript at the bottom (not always, e.g. jQuery import).<br />Or remember:<br />which is equivalent to:<br />, , your “best friend”.<br />Group, minify and gzip these static resources:<br />$(function (){<br /> //code will execute after page load<br />}),<br />$(document).ready(function (){});<br />
  57. 57. Lessons learned<br />Css at the top.<br />Javascript at the bottom (not always, e.g. jQuery import).<br />Or remember:<br />which is equivalent to:<br />, , your “best friend”.<br />Group, minify and gzip these static resources:<br />Asses your page using Yslow<br />You do not need to score 100.<br />Try to follow the suggested best practices as much as possible.<br />$(function (){<br /> //code will execute after page load<br />}),<br />$(document).ready(function (){});<br />
  58. 58. Any questions before showing working examples?<br />
  59. 59. Thanks for listening<br />The author<br /><ul><li>Angel Ruiz is an IT Senior Consultant at SRA IT (Australia)</li></ul>Acknowledgments<br /><ul><li>Ignacio Coloma from ExtremaSistemas (Spain) </li>

×