• Like
Short intro to JQuery and Modernizr
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Short intro to JQuery and Modernizr

  • 8,234 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,234
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
39
Comments
0
Likes
1

Embeds 0

No embeds

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. Short  into  to  JQuery  and   Modernizr   Jussi  Pohjolainen  Tampere  University  of  Applied  Sciences  
  • 2. JQuery?  •  Mo?va?on   –  Simple  things  may  require  lot  of  coding   –  Common  browsers  are  different  and   implementa?on  varies  •  Solu?on,  use  a  framework   –  jQuery  is  a  fast  and  concise  JavaScript  Library  that   simplifies  HTML  document  traversing,  event   handling,  anima?ng,  and  Ajax  interac?ons  for   rapid  web  development.      
  • 3. How?  •  Download  JQuery  file  (hOp://jquery.com/)   –  hOp://code.jquery.com/jquery-­‐1.7.1.min.js  •  Make  your  xhtml  page  and  reference  to  the   file  in  script  block  •  Make  your  code  and  use  JQuery  func?ons!  
  • 4. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ // When document is ready to be manipulated jQuery(document).ready( pageReadyToBeManipulated ); function pageReadyToBeManipulated() { // If link is clicked jQuery("a").click( linkClick ); } function linkClick(event) { alert("Thanks for visiting!"); // Prevent the default action event.preventDefault(); } //]]> </script>
  • 5. Some  Basic  Syntax  •  JQuery  can  be  used  in  two  ways:   –  JQuery()   –  Or   –  $()  •  $  is  an  alias  to  JQuery()!  $  more  commonly   used  
  • 6. <script type="text/javascript" src="jquery.js"></script><script type="text/javascript">//<![CDATA[ // When document is ready to be manipulated $(document).ready( pageReadyToBeManipulated ); function pageReadyToBeManipulated() { // If link is clicked $("a").click( linkClick ); } function linkClick(event) { alert("Thanks for visiting!"); // Prevent the default action event.preventDefault(); } //]]></script>
  • 7. // USING ANONYMOUS FUNCTIONS<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); event.preventDefault(); }); }); //]]> </script>
  • 8. // EVEN SHORTER SYNTAX, FORGET THE DOCUMENT PARAMETER<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $().ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); event.preventDefault(); }); }); //]]> </script>
  • 9. GeOers  in  the  Tradi?onal  Way  •  getElementsById•  getElementsByTagName•  getAttribute
  • 10. JQuery  and  Selectors  •  Select  all  h1  elements   –  $(“h1”)  •  Select  the  first  one   –  $(“h1”)[0]  •  Add  contents   –  $(“h1”)[0].innerHTML  =  “hello!”;  •  Lot  of  different  selectors   –  hOp://api.jquery.com/category/selectors/  
  • 11. Crea?ng  Elements  in  Tradi?onal  Way  •  createElement•  createTextNode•  setAttribute•  appendChild•  removeChild
  • 12. JQuery  Insert  $().ready(function(){ $("a").click(function(event){ // Insert the new element after element with id here $("<p>New Element</p>").insertAfter("#here"); event.preventDefault(); }); });
  • 13. Manipula?on  Func?ons  •  .addClass()  •  .afer()  •  .append()  •  .css()  •  …  •  See:  hOp://api.jquery.com/category/ manipula?on/  
  • 14. Some  Effects:  Lot  of  Anim  Func?ons  $(#clickme).click(function() { $(#book).slideUp(slow, function() { // Animation complete. });});
  • 15. MODERNIZR  
  • 16. Modernizr  •  Small  JS  library  for  detec?ng  browser  features  •  Replaces  highly  unreliable  user  agent  sniffing  •  Feature  detec?on  for  each  browser  what  the   browser  can  or  cannot  do  •  Tests  over  40  features   –  Creates  Modernizr  object  containing  the  results  
  • 17. How  •  Download  and  install  modernizr.js  •  Add   –  <html  class=“no-­‐js”>  •  Modernizr  replaces  this   –  <html  class=“canvas  canvastext  geoloca?on..”>  •  Classes  for  every  feature  it  detects!  
  • 18. Adding  CSS  
  • 19. Result  
  • 20. HTML5  and  Video  
  • 21. Solu?on