• Save
Javascript
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
591
On Slideshare
509
From Embeds
82
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 82

http://webteam.thurrock.gov.uk 82

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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