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

JavaScript Basics

5ce91fa49a613cbc3e20d5f96856473f?s=47 Edd S
April 18, 2012

JavaScript Basics

Slides for an internal talk I gave while at MintDigital

5ce91fa49a613cbc3e20d5f96856473f?s=128

Edd S

April 18, 2012
Tweet

Transcript

  1. JavaScript at Mint and Beyond

  2. var we = “so so so excited”; Variables

  3. we = “so so so excited”; Global Variable

  4. function sit(seat){ sitting = ‘sitting in the ’+seat+‘ seat’; alert(sitting);

    } sit(‘front’); alert(sitting); sitting was set globally
  5. function parting(chant){ var location = ‘Back Seat’, mood = ‘happy’,

    over; } multiple variable declaration
  6. (we == “so so so excited”) // true

  7. (we === “so so so excited”) // more true

  8. for(var i=0; i < 10; i++){ // ... }

  9. while ( true ) { // for ever and ever

    }
  10. for(var node in object){ // ... }

  11. Everything is an Object

  12. function Car(seats){ // code } Car.prototype.mood = function(){ return ‘exciting’;

    } var partyVenue = new Car();
  13. var weekDays = [ ‘monday’, ‘tuesday’ ... ]; var weekDays

    = new Array(‘monday’, ‘tuesday’ ... ); creating arrays
  14. var seat = { position: ‘front’, activity: ‘kicking’ }; var

    seat = new Object(); seat.position = ‘front’; seat.activity = ‘kicking’; creating objects
  15. var App = { inlineSearch: function(){ ... }, ajaxPannels: function(){

    ... } }; namespacing
  16. for(var node in object){ // ... }

  17. typeof friday === “undefined” // true BB.isDef(friday) existence

  18. if( thursday ){ // } undefined variables cause exceptions

  19. var friday = {}; if( friday.now ) { // }

    undefined attributes don’t
  20. function friday(){ return ‘party’; } method

  21. function (){ return ‘party’; } anonymous

  22. (function (){ return ‘party’; }()); self executing anonymous

  23. (function($){ // code that uses jQuery $ here }(jQuery)); pass

    through variables into anonymous functions
  24. elm.addEventListener(‘click’, function(e){ // event code }, false); native events

  25. jQuery

  26. None
  27. None
  28. $(‘div.car p.front-seat’); css selectors

  29. $(‘div.car p[rel=“empty”]’); advanced selectors

  30. var $car = $(‘div.car’), $frontSeat = $(‘p.front-seat’, $car); or $frontSeat

    = $car.children(‘p.front-seat’); scoped selectors
  31. $(function(){ // execute on DOMReady }); DOMReady Loader

  32. $.each( ... ); object with methods

  33. $(‘<div id=“friday”>partying</ div>’); create nodes

  34. var $seats = $(‘div.seat’); use a $variable name for jQuery

    objects
  35. $(‘div.seat’); // [ node1, node2, node3 ... ] jQuery object

    is an array of matched nodes
  36. $(‘div.seat’).css(‘background’); get css value

  37. $(‘div.seat’) .css(‘background’, ‘#bada55’); set value

  38. $(‘div.seat’) .css(‘color’, ‘#bada55’) .addClass(‘party’) modifiers return a jQuery object

  39. $friday.bind(‘click’, function(e){ e.preventDefault(); // parting }); jQuery events

  40. BB.bodyID(‘users-index’, function(){ ... }); BB.bodyClass(‘users’, function(){ ... }); restricting execution

  41. <body id=“search-index”> <form method=“get” action=“” id=“search”> <input type=“text” name=“q”> <button

    type=“submit”>Search!</button> </form> <div id=“results”> </div> </body> a search page
  42. BB.bodyID(‘search-index’, function(){ var $form = $(‘form#search’); BB.submitInline($form, { success: function(){

    // success code here } } });
  43. { results: [ { title: ‘fun’, url: ‘/fun’ }, {

    title: ‘excited’, url: ‘/excited’ }, ... ] } json response
  44. <body id=“search-index”> <form method=“get” action=“” id=“search”> <input type=“text” name=“q”> <button

    type=“submit”>Search!</button> </form> <div id=“results”> </div> </body> recap search page
  45. BB.bodyID(‘search-index’, function(){ var $form = $(‘form#search’), $results = $(‘div#results’); BB.submitInline($form,

    { success: function(json){ $.each(json.results, function(i, data){ $results.append(‘<a href=“’+data.url +‘”>’+data.title+‘</a>’); }); } } });
  46. Browser Development

  47. function whichSeatShouldITake(){ var seats = [ ‘Front Left’, ‘Front Right’,

    ‘Back Left’, ‘Back Right’, ‘Back Middle’], random = Math.round(Math.random()*seats.length)); return “Just sit in the ” + seats[random] + “ seat and shut up”; }