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

JavaScript Basics

Edd S
April 18, 2012

JavaScript Basics

Slides for an internal talk I gave while at MintDigital

Edd S

April 18, 2012
Tweet

More Decks by Edd S

Other Decks in Programming

Transcript

  1. JavaScript
    at Mint
    and Beyond

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. function sit(seat){
    sitting = ‘sitting in the ’+seat+‘ seat’;
    alert(sitting);
    }
    sit(‘front’);
    alert(sitting);
    sitting was set globally

    View full-size slide

  5. function parting(chant){
    var location = ‘Back Seat’,
    mood = ‘happy’,
    over;
    }
    multiple variable declaration

    View full-size slide

  6. (we == “so so so excited”)
    // true

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Everything
    is an
    Object

    View full-size slide

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

    View full-size slide

  13. var weekDays = [ ‘monday’, ‘tuesday’ ... ];
    var weekDays = new Array(‘monday’, ‘tuesday’ ... );
    creating arrays

    View full-size slide

  14. var seat = { position: ‘front’,
    activity: ‘kicking’ };
    var seat = new Object();
    seat.position = ‘front’;
    seat.activity = ‘kicking’;
    creating objects

    View full-size slide

  15. var App = {
    inlineSearch: function(){
    ...
    },
    ajaxPannels: function(){
    ...
    }
    };
    namespacing

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. var friday = {};
    if( friday.now ) {
    //
    }
    undefined attributes don’t

    View full-size slide

  20. function friday(){
    return ‘party’;
    }
    method

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. (function($){
    // code that uses jQuery $ here
    }(jQuery));
    pass through variables into anonymous
    functions

    View full-size slide

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

    View full-size slide

  25. $(‘div.car p.front-seat’);
    css selectors

    View full-size slide

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

    View full-size slide

  27. var $car = $(‘div.car’),
    $frontSeat = $(‘p.front-seat’, $car);
    or
    $frontSeat = $car.children(‘p.front-seat’);
    scoped selectors

    View full-size slide

  28. $(function(){
    // execute on DOMReady
    });
    DOMReady Loader

    View full-size slide

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

    View full-size slide

  30. $(‘partying
    div>’);
    create nodes

    View full-size slide

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

    View full-size slide

  32. $(‘div.seat’);
    // [ node1, node2, node3 ... ]
    jQuery object is an array of matched nodes

    View full-size slide

  33. $(‘div.seat’).css(‘background’);
    get css value

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide




  38. Search!




    a search page

    View full-size slide

  39. BB.bodyID(‘search-index’, function(){
    var $form = $(‘form#search’);
    BB.submitInline($form, {
    success: function(){
    // success code here
    }
    }
    });

    View full-size slide

  40. {
    results: [
    { title: ‘fun’, url: ‘/fun’ },
    { title: ‘excited’, url: ‘/excited’ },
    ...
    ]
    }
    json response

    View full-size slide




  41. Search!




    recap search page

    View full-size slide

  42. 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(‘+‘”>’+data.title+‘’);
    });
    }
    }
    });

    View full-size slide

  43. Browser
    Development

    View full-size slide

  44. 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”;
    }

    View full-size slide