<script src="yourscript.js"></script>
  

var names = ["Al", "Joe", "Sally"];
for (var i = 0; i < names.length; i++ ) {
  console.log(name + " is here!");
}
  

var printAddress = function(address, street, city, state, zip) {
  str = "";
  str += address + " " + street;
  str += "<br>";
  str += city + ", " + state + " " + zip;
  return str;
}
        

printAddress(address, street, city, state, zip);
//=> "20 Cooper Sq.<br>New York, NY 10003"
              

var address = 10;
printAddress(address, street, city, state, zip);
//=> "10 Cooper Sq.<br>New York, NY 10003"
          

var students = ["Amy", "Joe", "Sally", "Harry"];

var i;
for (i = 0; i < students.length; i += 1) {
  console.log(students[i] + " is in class today");
}
//=>
Amy is in class today
Joe is in class today
Sally is in class today
Harry is in class today

var even_numbers = [2, 4, 6, 8, 10];
var odd_numbers  = [];
// how can we programmatically 
// fill up this array with odd numbers

var i = 0;
for (i = 0; i < even_numbers.length; i+= 1) {
  odd_numbers.push(even_numbers[i] + 1);
}
console.log(odd_numbers);
//=> [3, 5, 7, 9, 11]

// Who's in class today?
var attendance = {
  "Amy"   : true,
  "Joe"   : true,
  "Sally" : false,
  "Harry" : true
};
var isInClass = function(student) {
  if (attendance[student]) {
    console.log("Here");
  } else {
    console.log("Absent");
  }
};

// Try it
isInClass("Sally");
//=> Absent
isInClass("Joe");
//=> Here

// the DOM
// scripting the elements on a web page
var target = document.getElementById("target");

jQuerify your browser
so you get jQuery in your console

http://www.learningjquery.com/2006/12/jquerify-bookmarklet

<div id="target"></div>
<div id="result"></div>

$("#target").click(function() {
  $("#result").html("You clicked!");
});

//=> <div id="result">You clicked!</div>

OR

<div id="target"></div>
<div id="result"></div>

var showClickText = function() {
  $("#result").html("You Clicked");
}

$("#target").click(showClickText);

There are <span class="slidect"></span> slides in this deck.

$(".slidect").html($("div").length)

<style>
  .box {
    width:200px;
    height:200px;
  }
  .redbox {
    background:#ff0000;
  }
  .blackbox {
    background:#000;
  }
</style>

<div class="box redbox"></div>


$(".box.redbox").addClass("blackbox");
$(".box.redbox").removeClass("redbox");

<div class="goaway"></div>

$(".goaway").remove();

// turn redbox into purplebox
$(".box.redbox").css("background", "purple");

$(".target").click( /* do something */ );

// Pass a "callback" function
$(".target").click(function() {
  console.log("You clicked the target");
});

// Example
var doSomething(cb) {
  doTask();
  if (cb) { cb() }; //callback is invoked
}

// Calling the function
doSomething(function() {
  //do something else;
})
// You don't have to invoke the callback function,
// the parent function invokes it.

// turn all links red
$("a").each(function() {
  $(this).css("color", "red");
})

// set up the room
var Animal = function(kind, sound) {
  this.kind  = kind;
  this.sound = sound;
}
Animal.prototype.speak = function() {
  console.log(this.sound);
}

// instantiate it
var cat = new Animal("cat", "meow")

// make it speak
cat.speak()
//=> meow

// instantiate it
var bear = new Animal("bear", "grrrr")

// make it speak
bear.speak()
//=> grrr

// add a new method on the fly
Animal.prototype.sayMyName = function() {
  console.log(this.kind);
}

cat.sayMyName();
//=> "cat";

// Let's have the speak method 
// bind to a click handler. So whenever we click a link
// it'll meow in the console

// WARNING, this will not work.
Animal.prototype.speak = function() {
  $("a").click(function() {
    console.log(this.sound);
  });
}

// JavaScript has functional scope.
// `this` will no longer be in scope within
// a child function.

// How do we get around that?

Animal.prototype.speak = function() {
  var that = this;
  $("a").click(function() {
    console.log(that.sound);
  });
}

cat.speak(); //=> binds to links

// $(this) creates a jQuery object
// for the element that moves into scope
// on each iteration.


$("a").each(function() {
  $(this).css("color", "red");
})

$(".box.redbox").click(function() {
  $(this).addClass("purplebox");
});

// we use var to maintain scope.
// variables without the `var` keyword are global

var myFunction = function() {
  var val = 10;
}
myFunction();

console.log(val);

//=> ReferenceError: val is not defined

// we use var to maintain scope.
// variables without the `var` keyword are global

var myFunction = function() {
  // no var keyword!
  // We created a global variable.
  // Avoid doing this!
  val = 10;
}
myFunction();

console.log(val);

//=> 10

// However,
// Inner functions always get access to
// outer function variables.
// This is called "closure"
// Because the outer function "closes over"
// the inner function

var outer = function() {
  var val = 10;
  var inner = function() {
    console.log(val);
  }
  inner();
}

outer();
//=> 10;

// we'll "close over" the kind variable,
// when creating a new calculator
// so it will always do that operation, even
// after that variable is gone forever!
var createCalculator = function(kind) {
  var operation = kind;
  return function(val1, val2) {
    if (operation === "add") {
      return val1 + val2;
    }
    if (operation === "subtract") {
      return val1 - val2;
    }
  }
}

var adder = createCalculator("add")
adder(1, 2)
//=> 3

var $ = function(selector) {
  // get selector
  var els = document.querySelectorAll(selector);
  var methods = {
    click : function(cb) {
      for (var i = 0; i < els.length; i++) {
        els[i].addEventListener("click", cb, false);
      }
      return this;
    },
    hide : function() {
      for (var i = 0; i < els.length; i++) {
        els[i].style.display = "none";
      }
      return this;  
    },
    show : function() {
      for (var i = 0; i < els.length; i++) {
        els[i].style.display = "block";
      }
      return this;
    }
  }
  return methods;
}

http://graph.facebook.com/ashaw

{
   "id": "2902652",
   "name": "Al Shaw",
   "first_name": "Al",
   "last_name": "Shaw",
   "link": "https://www.facebook.com/ashaw",
   "username": "ashaw",
   "gender": "male",
   "locale": "en_US"
}

// JSON is just JavaScript Objects

$.getJSON(url, callback)

// Notice we're not creating a jQuery object,
// we're using a jQuery "class method."

// Remember prototypes
var myElement = $("#target");

myElement.hide(); // these are "instance methods"
myElement.show(); // We have "instantiated" a new jQuery object,
                  // much like our Animal class, we're operating
                  // on one instance of that class.

// `getJSON` is a class method, meaning it's part of jQuery, but
// not a jQuery object. So we call it with $.getJSON.

var profile;

$.getJSON("http://graph.facebook.com/ashaw?callback=?", function(resp) {
  profile = resp;
});

console.log(profile.first_name);
//=> Al

// The Markup

<h1></h1>
<a href="#">Click here to see my profile</a>

// Let's stick real data in that HTML

$(document).ready(function() {
  var url = "http://graph.facebook.com/ashaw"
  $.getJSON(url + "?callback=?", function(resp) {
    $("h1").html(resp.first_name);
    $("a").attr("href", resp.link)
  });
});

<h1>Al</h1>
<a href="https://www.facebook.com/ashaw">Click here to see my profile</a>

<input type="text" id="username" />
<input type="submit" id="submit" />
<p id="fullname"></p>

$(document).ready(function() {
  $("#submit").click(function() {
    var username = $("#username").val();
    $.getJSON("http://graph.facebook.com/" + 
               username + "?callback=?", function(resp) {
      $("#fullname").html(resp.first_name + " " + resp.last_name);
    });
  });
});

$(document).ready(function() {
  $("#submit").click(function() {
    var username = $("#username").val();
    $.getJSON("http://graph.facebook.com/" + 
               username + "?callback=?", function(resp) {
      if (resp.error) {
        $("#fullname").html("That username doesn't exist");
      } else {
        $("#fullname").html(resp.first_name + " " + resp.last_name);
      }
    });
  });
});

<!-- facebook needs this on the page -->
<div id="fb-root"></div>

// Load the SDK (English)
<script src="//connect.facebook.net/en_US/all.js"></script>

// Spanish/Latin America
<script src="//connect.facebook.net/es_LA/all.js"></script>
  

// put this in a script tag
FB.init({
  appId      : '429491807092112', // test app we're using for HHBA
  status     : true,
  cookie     : true,
  xfbml      : true
});

// in your code folder, on Mac or Linux
$ python -m SimpleHTTPServer