Short	  into	  to	  JQuery	  and	            Modernizr	              Jussi	  Pohjolainen	  Tampere	  University	  of	  App...
JQuery?	  •  Mo?va?on	     –  Simple	  things	  may	  require	  lot	  of	  coding	     –  Common	  browsers	  are	  differe...
How?	  •  Download	  JQuery	  file	  (hOp://jquery.com/)	      –  hOp://code.jquery.com/jquery-­‐1.7.1.min.js	  •  Make	  y...
<script type="text/javascript" src="jquery.js"></script>   <script type="text/javascript">   //<![CDATA[    // When docume...
Some	  Basic	  Syntax	  •  JQuery	  can	  be	  used	  in	  two	  ways:	      –  JQuery()	      –  Or	      –  $()	  •  $	 ...
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">//<![CDATA[ // When document is rea...
// USING ANONYMOUS FUNCTIONS<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![...
// EVEN SHORTER SYNTAX, FORGET THE DOCUMENT PARAMETER<script type="text/javascript" src="jquery.js"></script> <script type...
GeOers	  in	  the	  Tradi?onal	  Way	  •  getElementsById•  getElementsByTagName•  getAttribute
JQuery	  and	  Selectors	  •  Select	  all	  h1	  elements	      –  $(“h1”)	  •  Select	  the	  first	  one	      –  $(“h1”...
Crea?ng	  Elements	  in	  Tradi?onal	  Way	  •    createElement•    createTextNode•    setAttribute•    appendChild•    re...
JQuery	  Insert	  $().ready(function(){       $("a").click(function(event){               // Insert the new element after ...
Manipula?on	  Func?ons	  •    .addClass()	  •    .afer()	  •    .append()	  •    .css()	  •    …	  •    See:	  hOp://api.j...
Some	  Effects:	  Lot	  of	  Anim	  Func?ons	  $(#clickme).click(function() {  $(#book).slideUp(slow, function() {    // An...
MODERNIZR	  
Modernizr	  •  Small	  JS	  library	  for	  detec?ng	  browser	  features	  •  Replaces	  highly	  unreliable	  user	  age...
How	  •  Download	  and	  install	  modernizr.js	  •  Add	      –  <html	  class=“no-­‐js”>	  •  Modernizr	  replaces	  th...
Adding	  CSS	  
Result	  
HTML5	  and	  Video	  
Solu?on	  
Short intro to JQuery and Modernizr
Upcoming SlideShare
Loading in …5
×

Short intro to JQuery and Modernizr

9,397 views

Published on

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

No Downloads
Views
Total views
9,397
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Short intro to JQuery and Modernizr

  1. 1. Short  into  to  JQuery  and   Modernizr   Jussi  Pohjolainen  Tampere  University  of  Applied  Sciences  
  2. 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. 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. 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. 5. Some  Basic  Syntax  •  JQuery  can  be  used  in  two  ways:   –  JQuery()   –  Or   –  $()  •  $  is  an  alias  to  JQuery()!  $  more  commonly   used  
  6. 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. 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. 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. 9. GeOers  in  the  Tradi?onal  Way  •  getElementsById•  getElementsByTagName•  getAttribute
  10. 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. 11. Crea?ng  Elements  in  Tradi?onal  Way  •  createElement•  createTextNode•  setAttribute•  appendChild•  removeChild
  12. 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. 13. Manipula?on  Func?ons  •  .addClass()  •  .afer()  •  .append()  •  .css()  •  …  •  See:  hOp://api.jquery.com/category/ manipula?on/  
  14. 14. Some  Effects:  Lot  of  Anim  Func?ons  $(#clickme).click(function() { $(#book).slideUp(slow, function() { // Animation complete. });});
  15. 15. MODERNIZR  
  16. 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. 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. 18. Adding  CSS  
  19. 19. Result  
  20. 20. HTML5  and  Video  
  21. 21. Solu?on  

×