JavaScript
Key Points <ul><li>Client Side </li></ul><ul><li>Not all browsers support it </li></ul><ul><li>Different browser implement...
Progressive Enhancement (PE)  <ul><li>Not: Graceful Degradation (GD)   </li></ul><ul><li>Strengths </li></ul><ul><ul><li>S...
What’s Out There <ul><li>What you write </li></ul><ul><li>What others have written </li></ul><ul><li>Libraries </li></ul>
What You Write <ul><li>You need to know the DOM (Document Object Model) and how it varies from browser to browser </li></u...
What Others Have Written <ul><li>How old is it? </li></ul><ul><li>Is it maintained? (What’s your level of understanding fo...
Libraries <ul><li>Various ones out there (Mootools, Yahoo, jQuery, Google) </li></ul><ul><li>Depending on the library ther...
Why jQuery  <ul><li>Started with Mootools </li></ul><ul><li>Discovered jQuery </li></ul><ul><li>Exceptions </li></ul><ul><...
jQuery Basics <ul><li>$().ready(function() {  code  });   </li></ul><ul><li>$() – selector </li></ul><ul><ul><li>$( #id ) ...
Tutorial 1 – Step 1 <ul><li>Open ‘ tutorial_1.htm ’ and add: </li></ul><ul><ul><li><link rel=&quot;stylesheet&quot; href=&...
Tutorial 1 – Step 2 <ul><li>Create ‘ javascript/tutorial_1.js ’ </li></ul><ul><ul><li>Add the following: </li></ul></ul><u...
Tutorial 2 – Step 1 <ul><li>Open ‘ tutorial_2.htm ’ and add: </li></ul><ul><ul><li><link rel=&quot;stylesheet&quot; href=&...
Tutorial 2 – Step 2 <ul><li>Create ‘ javascript/tutorial_2.js ’ </li></ul><ul><ul><li>Add the following: </li></ul></ul><u...
Tutorial 2 – Step 3 <ul><li>Add: </li></ul><ul><ul><li>// The setBodyClass() function changes the page style. </li></ul></...
Tutorial 2 – Step 4 <ul><li>Add: </li></ul><ul><ul><li>// Invoke setBodyClass() when a button is clicked. </li></ul></ul><...
Tutorial 2 – Step 5 <ul><li>Add: </li></ul><ul><ul><li>// Invoke setBodyClass() when a key is pressed. </li></ul></ul><ul>...
Tutorial 2 – Step 6 <ul><li>Back to ‘ tutorial_2.htm ’ </li></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=...
Resources  <ul><li>Books </li></ul><ul><ul><li>Learning jQuery: Better Interaction Design and Web Development with Simple ...
Upcoming SlideShare
Loading in...5
×

Javascript

471

Published on

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

  • Be the first to like this

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

No notes for slide

Transcript of "Javascript"

  1. 1. JavaScript
  2. 2. Key Points <ul><li>Client Side </li></ul><ul><li>Not all browsers support it </li></ul><ul><li>Different browser implementations </li></ul><ul><li>Users can turn it off! </li></ul>
  3. 3. Progressive Enhancement (PE) <ul><li>Not: Graceful Degradation (GD) </li></ul><ul><li>Strengths </li></ul><ul><ul><li>Starts with basic web technologies </li></ul></ul><ul><ul><li>Release early, release often </li></ul></ul><ul><ul><li>Easier to maintain </li></ul></ul><ul><li>The layers </li></ul><ul><ul><li>Clean, validated, semantic XHTML </li></ul></ul><ul><ul><li>Valid CSS2 </li></ul></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><li>http:// webteam.thurrock.gov.uk/blog/?p =439 </li></ul></ul>
  4. 4. What’s Out There <ul><li>What you write </li></ul><ul><li>What others have written </li></ul><ul><li>Libraries </li></ul>
  5. 5. What You Write <ul><li>You need to know the DOM (Document Object Model) and how it varies from browser to browser </li></ul><ul><li>You need to include feature sensing (for cross browser support) </li></ul><ul><li>What you write is determined by your level of understanding </li></ul>
  6. 6. What Others Have Written <ul><li>How old is it? </li></ul><ul><li>Is it maintained? (What’s your level of understanding for upkeep) </li></ul><ul><li>What type of licence does it have? </li></ul><ul><li>How easy is it to understand (Obfuscated)/expand? </li></ul>
  7. 7. Libraries <ul><li>Various ones out there (Mootools, Yahoo, jQuery, Google) </li></ul><ul><li>Depending on the library there are benefits. </li></ul><ul><ul><li>Cross browser support </li></ul></ul><ul><ul><li>Feature sensing </li></ul></ul><ul><ul><li>Plug-ins/extendibility </li></ul></ul><ul><ul><li>Automatic version updates </li></ul></ul>
  8. 8. Why jQuery <ul><li>Started with Mootools </li></ul><ul><li>Discovered jQuery </li></ul><ul><li>Exceptions </li></ul><ul><ul><li>Google mapping (Combination of Google & jQuery) </li></ul></ul><ul><ul><li>There could be use for Yahoo (One to keep in mind) </li></ul></ul>
  9. 9. jQuery Basics <ul><li>$().ready(function() { code }); </li></ul><ul><li>$() – selector </li></ul><ul><ul><li>$( #id ) - $(“#divid”) </li></ul></ul><ul><ul><li>$( element ) - $(“p”) </li></ul></ul><ul><ul><li>$( .class ), $( .class.class ) - $(“.class1”), $(“.class1.class2”) </li></ul></ul><ul><ul><li>$( * ) - Everything! </li></ul></ul><ul><ul><li>$( selector1, selector2, selectorN ) - $(“#divid, span, p.myClass&quot;) </li></ul></ul>
  10. 10. Tutorial 1 – Step 1 <ul><li>Open ‘ tutorial_1.htm ’ and add: </li></ul><ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;stylesheet/tutorial_1.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /> </li></ul></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;javascript/jquery/jquery-latest.js&quot;></script> </li></ul></ul>
  11. 11. Tutorial 1 – Step 2 <ul><li>Create ‘ javascript/tutorial_1.js ’ </li></ul><ul><ul><li>Add the following: </li></ul></ul><ul><ul><ul><li>$(document).ready(function() { </li></ul></ul></ul><ul><ul><ul><li>$('.poem-stanza').addClass('emphasized'); </li></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul><ul><li>Back to ‘ tutorial_1.htm ’ </li></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;javascript/tutorial_1.js&quot;></script> </li></ul></ul>
  12. 12. Tutorial 2 – Step 1 <ul><li>Open ‘ tutorial_2.htm ’ and add: </li></ul><ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;stylesheet/tutorial_2.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /> </li></ul></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;javascript/jquery/jquery-latest.js&quot;></script> </li></ul></ul><ul><ul><li><div id=&quot;switcher&quot;> </li></ul></ul><ul><ul><li><h3>Style Switcher</h3> </li></ul></ul><ul><ul><li><div class=&quot;button selected&quot; id=&quot;switcher-default&quot;>Default</div> </li></ul></ul><ul><ul><li><div class=&quot;button&quot; id=&quot;switcher-narrow&quot;>Narrow Column</div> </li></ul></ul><ul><ul><li><div class=&quot;button&quot; id=&quot;switcher-large&quot;>Large Print</div> </li></ul></ul><ul><ul><li></div> </li></ul></ul>
  13. 13. Tutorial 2 – Step 2 <ul><li>Create ‘ javascript/tutorial_2.js ’ </li></ul><ul><ul><li>Add the following: </li></ul></ul><ul><ul><ul><li>$(document).ready(function() { </li></ul></ul></ul><ul><ul><ul><ul><li>// Enable hover effect on the style switcher buttons. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>$('#switcher .button').hover(function() { </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>$(this).addClass('hover'); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>}, function() { </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>$(this).removeClass('hover'); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>}); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>// Allow the style switcher to expand and collapse. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>var toggleStyleSwitcher = function(event) { </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>if (!$(event.target).is('.button')) { </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>$('#switcher .button').toggleClass('hidden'); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>}; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>$('#switcher').click(toggleStyleSwitcher); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>// Simulate a click so we start in a collaped state. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>$('#switcher').click(); </li></ul></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul>
  14. 14. Tutorial 2 – Step 3 <ul><li>Add: </li></ul><ul><ul><li>// The setBodyClass() function changes the page style. </li></ul></ul><ul><ul><li>// The style switcher state is also updated. </li></ul></ul><ul><ul><li>var setBodyClass = function(className) { </li></ul></ul><ul><ul><ul><li>$('body').removeClass(); </li></ul></ul></ul><ul><ul><ul><li>$('body').addClass(className); </li></ul></ul></ul><ul><ul><ul><li>$('#switcher .button').removeClass('selected'); </li></ul></ul></ul><ul><ul><ul><li>$('#switcher-' + className).addClass('selected'); </li></ul></ul></ul><ul><ul><ul><li>if (className == 'default') { </li></ul></ul></ul><ul><ul><ul><li>$('#switcher').click(toggleStyleSwitcher); </li></ul></ul></ul><ul><ul><ul><li>}else { </li></ul></ul></ul><ul><ul><ul><li>$('#switcher').unbind('click', toggleStyleSwitcher); </li></ul></ul></ul><ul><ul><ul><li>$('#switcher .button').removeClass('hidden'); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><li>}; </li></ul></ul>
  15. 15. Tutorial 2 – Step 4 <ul><li>Add: </li></ul><ul><ul><li>// Invoke setBodyClass() when a button is clicked. </li></ul></ul><ul><ul><li>$('#switcher').click(function(event) { </li></ul></ul><ul><ul><ul><li>if ($(event.target).is('.button')) { </li></ul></ul></ul><ul><ul><ul><ul><li>if (event.target.id == 'switcher-default') { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>setBodyClass('default'); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>if (event.target.id == 'switcher-narrow') { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>setBodyClass('narrow'); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>else if (event.target.id == 'switcher-large') { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>setBodyClass('large'); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><li>}); </li></ul></ul>
  16. 16. Tutorial 2 – Step 5 <ul><li>Add: </li></ul><ul><ul><li>// Invoke setBodyClass() when a key is pressed. </li></ul></ul><ul><ul><li>$(document).keyup(function(event) { </li></ul></ul><ul><ul><ul><li>switch (String.fromCharCode(event.keyCode)) { </li></ul></ul></ul><ul><ul><ul><li>case 'D': </li></ul></ul></ul><ul><ul><ul><li>setBodyClass('default'); </li></ul></ul></ul><ul><ul><ul><li>break; </li></ul></ul></ul><ul><ul><ul><li>case 'N': </li></ul></ul></ul><ul><ul><ul><li>setBodyClass('narrow'); </li></ul></ul></ul><ul><ul><ul><li>break; </li></ul></ul></ul><ul><ul><ul><li>case 'L': </li></ul></ul></ul><ul><ul><ul><li>setBodyClass('large'); </li></ul></ul></ul><ul><ul><ul><li>break; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><li>}); </li></ul></ul>
  17. 17. Tutorial 2 – Step 6 <ul><li>Back to ‘ tutorial_2.htm ’ </li></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;javascript/tutorial_2.js&quot;></script> </li></ul></ul>
  18. 18. Resources <ul><li>Books </li></ul><ul><ul><li>Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques by Karl Swedberg; Jonathan Chaffer (ISBN-10:  1-84719-250-5 ) </li></ul></ul><ul><li>Web </li></ul><ul><ul><li>http://jquery.com/ </li></ul></ul><ul><ul><li>http://docs.jquery.com/Main_Page </li></ul></ul><ul><ul><li>http://code.google.com/more/ </li></ul></ul>

×