jQuery: Nuts, Bolts and Bling

Transcript

1. View Slide

2. dougneiner
   [email protected]
   dcneiner
   Doug Neiner
   Doug Neiner
   

   View Slide

3. Crystal
   Ruby, Olivia, Cody
   Not pictured:
   Ditto the cat
   My Family
   

   View Slide

4. I

   View Slide

5. A N D
   Audience
   This presentation was crafted specifically for delivery at the Front End Design
   Conference in St. Petersburg, FL. The audience consisted of designers who have
   never used jQuery through developers who use jQuery regularly.
   The slide portion of this presentation has a lot of getting started information, as
   well as some tricks you may or may not know. The live coding portion (available on
   Github) contains some more advanced techniques.
   If you have any questions after watching this presentation and looking at the code,
   please let me know: [email protected] (Be sure to reference this presentation
   when emailing!)
   

   View Slide

6. View Slide

7. A N D
   Ugly, working code always trumps pretty, broken code
   Write working code
   

   View Slide

8. A N D
   basics
   

   View Slide

9. A N D
   Writing the name
   A. Jquery C. jquery
   D. jQuery
   B. JQuery
   *

   View Slide

10. A N D
    adding scripts
     I  am  Dan  
    <br/>#dan  {  display:  none;  }<br/>
     I  am  Cherrie  
    <br/>#cherrie  {  background:  red;  }<br/>
    You

    View Slide

11. A N D
    adding scripts
     I  am  Dan  
    <br/>$(  "#dan"  ).hide();<br/>
     I  am  Cherrie  
    <br/>$(  "#cherrie"  ).hide().fadeIn(  500  );<br/>
    So

    View Slide

12. A N D
    adding scripts
         I  am  Dan  
         I  am  Cherrie  
       libs/jquery/1.6.2/jquery.min.js">
       
    

    View Slide

13. A N D
    adding scripts
    
    
         ...
         <br/>            document.documentElement.className  =  <br/>                  document.documentElement.className.replace(  "no-­‐js",  "js"  );<br/>      
         
    Now

    View Slide

14. A N D
    adding scripts
         I  am  Dan  
         I  am  Cherrie  
       libs/jquery/1.6.2/jquery.min.js">
       
    

    View Slide

15. A N D
    Adding scripts
    • Use at least one external script file for your site, not tons of in-page script
    blocks spread throughout your app.
    • Include references to jQuery and your script just before the closing body tag
    • Primarily on web sites (on JS-required apps inside may be ok)
    • Use no-js and js classes to provide styling until the script loads
    

    View Slide

16. A N D
    File layout
    jQuery(  document  ).ready(  function  ()  {
       jQuery(  "div"  ).each(  function  ()  {
           jQuery(  this  ).hide();
       });
       jQuery.getJSON(  "...",  function  (  data  )  {
           jQuery.each(  data,  function  ()  {  ...  });
       });
    });
    Too…⋯

    View Slide

17. A N D
    File layout
    (function  (  $  )  {
    var  sample  =  {  sample:  true  };
    //  DOM  may  not  be  complete
    $(  document  ).ready(  function  ()  {
       //  DOM  is  ready.  Come  and  get  it!
    });
    }(  jQuery  ));
    JS
    

    View Slide

18. A N D
    File layout
    (function  (  $  )  {
    var  sample  =  {  sample:  true  };
    //  DOM  may  not  be  complete
    $(  document  ).ready(  function  ()  {
       //  DOM  is  ready.  Come  and  get  it!
    });
    }(  jQuery  ));
    This

    View Slide

19. A N D
    File layout (Alt)
    jQuery(  document  ).ready(  function  (  $  )  {
       //  DOM  is  ready.  Come  and  get  it!
    });
    You

    View Slide

20. A N D
    CONCEPTS
    

    View Slide

21. A N D
    Iteration
    //  Explicit,  you  realize  this  is  looping  over  items
    $(  "div"  ).each(function  ()  {  ...  });
    //  Implicit,  you  may  not  realize  each  call  is  looping
    $(  "div"  )
       .attr(  "data-­‐group",  "doug"  )
       .addClass(  "dougsGroup"  )
       .hide();
    JS
    

    View Slide

22. A N D
    CSS vs. Class
    $(  "div"  ).css({
         width:  20,
         height:  500
    });
    //  Or:
    $(  "div"  ).addClass(  "tall"  );
    .tall  {  width:  20px;  height:  500px;  }
    Use

    View Slide

23. A N D
    Toggle Methods
    var  div  =  $(  "div"  );
    if  (  div.hasClass(  "frontendrocks"  )  {
       div.addClass(  "frontendrocks"  );
    }  else  {
       div.removeClass(  "frontendrocks"  );
    }
    //  A  better  way  to  write  it
    div.toggleClass(  "frontendrocks"  );
    JS
    

    View Slide

24. A N D
    Toggle Methods
    //  If  you  need  it  to  match  up  to  a  variable
    var  something  =  true,  div  =  $(  "div"  );
    //  This  forces  the  class  on  or  off  based  on  `something`
    div.toggleClass(  "frontendrocks",  something  );
    //  Other  methods  support  this  too,  check  the  API
    div.slideToggle(  200,  something  );
    div.toggle(  something  );
    JS
    

    View Slide

25. A N D
    updating values
    var  div  =  $(  "div"  );
    //  Setting  a  single  key/value
    div.attr(  "key",  "value"  );
    //  Setting  more  than  one  key/value  at  once
    div.attr(  {  "key":    "value",  "key2":  "value2"  });
    //  Setting  the  value  using  a  callback  function
    div.attr(  "key"  ,  function  (i,  oldValue  )  {
       return  "newvalue";
    });
    

    View Slide

26. A N D
    updating values
    //  Other  methods  support  it  too,  check  the  API
    div.addClass(  function  (i,  val)  {
       //  This  returns  an  incremental  class  to  add  for  each
       //  item  in  the  result  set
       return  "awesome-­‐"  +  i;
    });
    

    View Slide

27. A N D
    Asynchronous code
    var  loaded  =  false;
    $.get(  "http://url.com",  function  (  data  )  {
         loaded  =  true;
    });
    if  (  loaded  ===  true  )  {
       //  Never  runs
    }
    This

    View Slide

28. A N D
    Asynchronous code
    var  loaded  =  false;
    $.get(  "http://url.com",  function  (  data  )  {
         loaded  =  data.loaded;
         if  (  loaded  ===  true  )  {
             //  This  runs  when  loaded  is  true
         }
    });
    Put

    View Slide

29. A N D
    Lets Code!
    Code is available here:
    https://github.com/dcneiner/jquery-bling
    

    View Slide

30. A N D
    Links
    • jQuery Tmpl
    https://github.com/jquery/jquery-tmpl
    • jQuery MockJax
    http://code.appendto.com/plugins/jquery-mockjax
    • jQuery doTimeout
    http://benalman.com/projects/jquery-dotimeout-plugin/
    • Alternate jQuery API
    http://jqapi.com/
    

    View Slide

31. dougneiner
    [email protected]
    dcneiner
    Doug Neiner
    Doug Neiner
    

    View Slide