Welcome to JS102

  • {Objects}
  • [Arrays]
  • And Function(s){...}

Slides: http://bit.ly/JS102

Arrays



						var coolTeachers = ["Pamela", "Bianca", "Brenda", "Aysegul"];

Access and Assignment



var classes = [];

classes[0] = 'HTML 101';						
classes[1] = 'JS 101';

classes.push('JS 102');
classes.pop();

					


var i = 0;
classes[i]; // ??

classes[1];

classes.pop(); //??

classes.length;

Iteration



var classes = ['HTML 101', 'JS 101', 'JS 102'];

for(var i = 0; i < classes.length; i++){
						
	console.log(i); //??
						
}

Exercise Time

Objects

{}

Assignment



var angelTheCat = {};

angelTheCat.furColor = "orange";

//OR

var angelTheCat = {"furColor" : "orange"};

Access w/dots



var angelTheCat = {};
						
angelTheCat.furColor = "orange";
						
var furVariable = angelTheCat.furColor;

furVariable; //??

angelTheCat.furColor = "grey";

furVariable; //??

Brackets



angelTheCat["fur color"] = "orange";


var facebookFriends = {};
facebookFriends[12323] = angelTheCat;

Variables


var angelTheCat = {};
						
angelTheCat["furColor"] = "orange";
						
						
var keyVariable = "furColor";
						
angelTheCat[keyVariable]; //??

Object Literals



var angelTheCat = { 
	age: 5, 
	furColor: "orange"
};

Values



var angelTheCat = { 
	age: 5, 
	furColor: "orange", 
	isAngelic: true, 
	likes: ["catnip", "milk"], 
	birthday: {"month": 7, "day": 17, "year": 2009} 
};

Exercise Time

Arrays of Objects



var cuteCats = [

		{ name: "Angel", age: 18, furColor: "grey" },
		{ name: "Evil", age: 14, furColor: "red" },
		{ name: "Meh", age: 12, "Fur Color": "white" }

	]

					


cuteCats[0].name = ;//?

cuteCats[1]furColor;//?

cuteCats[2]["Fur Color"] = ;//?

Iterating Objects



var zoo = {
	birds : 3,
	bears: 5,
	cats: 12,
}

for(var key in zoo) {
	console.log(zoo[key] + ' ' + key);
}

Exercise Time

A Useful Link

Nested Objects

nested 


var doll = { "innerDoll" : {} };

					


var doll = {
	size: "large",
	innerDoll: { size: "medium"}
};

doll.innerDoll.innerDoll = {size: "small"};

console.log(doll);

Exercise Time

Functions



var add = function(a, b) {
	return a + b;
};

add(5, 4);

Definition



var nameImprover = function (name, adj) {

	return 'Col ' + name + ' Mc' + adj + ' pants';

};

Definition vs. Call-time



var nameImprover = function (name, adj) {
	return 'Col ' + name + ' Mc' + adj + ' pants';
};	

nameImprover("Pamela", "fancy");

Naming Arguments



var nameImprover = function (name, adj) {
	return 'Col ' + name + ' Mc' + adj + ' pants';
};	

nameImprover("Pamela", "shiny");
nameImprover("Aysegul", "fancy");

Return/Side Effects



var nameImprover = function (name, adj) {
	return 'Col ' + name + ' Mc' + adj + ' pants';
};	

var nameLogger = function (name, adj) {
	var newName = 'Col ' + name + ' Mc' + adj + ' pants';
	console.log(newName); 
};

arguments Keyword



var addTwo = function(a, b) {
	console.log(arguments); // logs [3,10]
	return a + b; 
};

addTwo(3, 10); // 13

arguments Keyword



var addMany = function() {
	console.log(arguments);
	var sum = 0;
	for (var i = 0; i < arguments.length; i++) {
		sum += i;
	}
	return sum;
};

addMany(3, 10, 57, 24);
addMany(3, 10, 57, 24, 200, 300);

Defaulting Arguments



var nameLogger = function(name, adj) {
	if(adj === undefined) adj = "Fancy";
	var newName = 'Col ' + name + ' Mc' + adj + ' pants';
	console.log(newName); 
};

Exercise Time

Scope

Local Scope



var func = function() {
  var local = true;
  console.log(local);
};

console.log(local);

Global Scope



var global = "I'm available everywhere.";

var func = function() {
  var local = "I'm available inside this function.";
  console.log("I'm available inside the function ", global);
};

console.log(global);

					


var global = "I'm available everywhere.";

var func = function() {
  local = "I'm available everywhere too";
};

console.log(local);

Precedence



var g = "global";

function go() { 
  var l = "local";
  var g = "in here!";
  alert(g + " inside go");
}

go();
alert(g + " outside go");

Questions