Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Basic jquery & Javascript presentation

klh
April 30, 2012

Basic jquery & Javascript presentation

A basic presentation used to teach and explorer javascript.
https://github.com/klh/Moon is the accompanying code

klh

April 30, 2012
Tweet

Other Decks in Education

Transcript

  1. Klaus Lynggaard Hougesen 15 years doing things with digital and

    traditional media Designer who hacks or the other way around Catch me a Copenhagen pechakucha, demodag, community days, twestival ,twedagsbar, openlectures (CIID) or any of the other shingdings in copenhagen. www.threads.dk www.bythreads.com www.carecord.com www.linkedin.com/khougesen Google me if you want more. mandag den 30. april 12
  2. What is jQuery? From the authors themselves: “jQuery is a

    fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” Basically what jQuery does is make it easier for you to write cross-browser code - and it takes alot of the pain out of basic DOM manipulation. mandag den 30. april 12
  3. We’ll look into the following Selectors & The Sizzle Engine

    Events & Triggers A short discussion about how we use it in the industry - and why Javascript is probably the best language to learn and be good at if you want to work in the industry. mandag den 30. april 12
  4. Powerful  Selector  Engine  (Sizzle) $(“.myTable”) // by css Class $(“#nameTextBox”)

    // by Id $(“ul”) // by tag name $(“ul li”) // element descendent $(“ul”).find(“li”) // more element descendent $(“li”, list) // also element descendent $(“ul > li”) // element child (direct descendent) $(“input:checkbox”) // filter $(“a[href=#Overview]”) // attributes $(“a[href$=.aspx]”) // attributes Ends With Lets try this out mandag den 30. april 12
  5. With  jQuery <a href=“#” class=“super”>click me</a> $(“a.super”).on(“click”,launch)   or $(“a.super”).on(“click”,funcBon(event){

         alert(“IRAN”); })   Jquery  Events tradiBonally  you  would  aNach  javascript  events  like  this <a href=“#” class=“super” onclick=“return launch(event);”>click me</a> or  similar... Lets try this out mandag den 30. april 12
  6. Powerful  Event  engine! It  can  do  so  much  more,  introducing

     trigger(): trigger  is  a  funcBon  in  Jquery  that  can  trigger  events-­‐  tradiBonal   ones  like  click,hover,mousedown,keypress  etc. or  your  own: $(document).trigger(“i.just.received.data.from.google”); which  you  can  bind  to  like  before: $(document).on(“i.just.received.data.from.google”,funcBon(event){      parseMyFileFromGoogle(event); });   mandag den 30. april 12
  7. jQuery  is  good  because  it  is  fast,  widely  supported,  has

     an   extensive  following  and  is  easy  to  use  and  extend. There  are  other  abstracBon  libraries  of  the  same  type  out  there,   but  generally  when  you  work  professionally  -­‐  you  go  with  the   proven  and  reliable  framework. The  trend  is  100%  moving  towards  Slim  backends  and  heavy   Frontends  /  Clientsides   jQuery  is  a  valuable  tool  here,  because  (as  you  saw  before)  you   can  manipulate  and  change  Clientside  data  /  ui  with  very  liNle   backend  integraBon. mandag den 30. april 12
  8. Most  projects  i  have  worked  with/on  are: serving  Bny  packages

     of  data  in  JSON  (a  very  slim  form  of  XML)   looks  like  this: myData:{          peter:”is  a  fun  person”,          james:”is  not” } To  a  smart  clientside  that  handles  all  or  most  rendering  of  the   pages  thereaber  =  no  refresh,  no  pageloading  and  waiBng  -­‐feels   much  more  like  an  applicaBon. (www.grooveshark.com  is  a  good  example  of  this) mandag den 30. april 12
  9. Why  is  javascript  /  jQuery  a  indispensable  tool? Once  you

     know  it  many  languages  sorta  look  the  same  too  you. but  more  importantly in  the  old  days: Browser (UI and links between pages) ------------------ HTTP ------------------- Application server (business logic etc) ------------- custom binary --------------- Persistence/db: MySQL, PostgreSQL, Oracle Now: Clientside    :  jQuery  (with  whatever  plugins  you  need  /  want) Backend  :  Nodejs.org  (complete  ultrafast,  event  based  webserver) DB  :  mongoDB(JSON),couchDB  (JSON)  etc.  etc. mandag den 30. april 12