Tweet
Tweet

Slide 1

Slide 1 text

JavaScript at Mint and Beyond

Slide 2

Slide 2 text

var we = “so so so excited”; Variables

Slide 3

Slide 3 text

we = “so so so excited”; Global Variable

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Everything is an Object

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

function (){ return ‘party’; } anonymous

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

jQuery

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

$(‘
partying div>’); create nodes

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Search!
a search page

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Search!
recap search page

Slide 45

Slide 45 text

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+‘’); }); } } });

Slide 46

Slide 46 text

Browser Development

Slide 47

Slide 47 text

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