5. Javascript frameworks 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. Essential to make “cross-browser” web applications. Makes programming Javascript easier and simpler. There are a few available.
6. Javascript frameworks 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. Essential to make “cross-browser” web applications. Makes programming Javascript easier and simpler. There are a few available.
17. jQuery core philosophy Simplify iteration between HTML and Javascript Find HTML Do something to it
18.
19.
20.
21. 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”
22. 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
23. 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”
24. 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”);
25. 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/
26. jQuery API groups Moving elements before(), after(), appendTo(), append(), ...
27. jQuery API groups Moving elements before(), after(), appendTo(), append(), ... Attributes css(), attr(), html(), val(), addClass(), ...
28. jQuery API groups Moving elements before(), after(), appendTo(), append(), ... Attributes css(), attr(), html(), val(), addClass(), ... Events bind(), trigger(), unbind(), live(), click(), ...
33. jQuery Plug-ins Here you can find everything you need: http://plugins.jquery.com/
34. jQuery Plug-ins Here you can find everything you need: http://plugins.jquery.com/ Well known plug-in libraries: http://flowplayer.org/tools/index.html http://jqueryui.com/
35. jQuery references The main documentation site is the best reference: http://docs.jquery.com
36. jQuery references The main documentation site is the best reference: http://docs.jquery.com To get up to speed we have purchased this book:
37. Unobtrusive Javascript It is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose basic principles are:
38. Unobtrusive Javascript It is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose basic principles are: Separate behaviour from structure (mark-up).
39. Unobtrusive Javascript It 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.
40. Unobtrusive Javascript It 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”.
41. Separate behaviour from structure (mark-up). Before: <HTML> <BODY> <INPUT type=“button” onclick=“alert(‘Hello World’);”> </BODY> </HTML>
43. 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>
44. Follow best practises to avoid each browser particularaties. Basically use jQuery for your javascript.
45. Follow best practises to avoid each browser particularaties. Basically use jQuery for your javascript. But do not forget about CSS frameworks!!!
46. Follow best practises to avoid each browser particularaties. Basically use jQuery for your javascript. But do not forget about CSS frameworks!!! Why?
47. Follow best practises to avoid each browser particularaties. Basically use jQuery for your javascript. But do not forget about CSS frameworks!!! Why?
48. 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/
49. “Graceful Degradation” e.g. Date Picker Renders both input field and button If javascript is disabled the button will not work
50. “Progressive Enhancement” e.g. Date Picker Renders both input field and hides button If javascript is enabled the button will be shown
52. Lessons learned Css at the top. Javascript at the bottom (not always, e.g. jQuery import).
53. Lessons learned Css at the top. Javascript at the bottom (not always, e.g. jQuery import). Or remember: $(function (){ //code will execute after page load }),
54. Lessons learned Css 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 (){});
55. Lessons learned Css 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 (){});
56. Lessons learned Css 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 (){});
57. Lessons learned Css 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 Yslow You 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 (){});
