Welcome to JS102



Welcome to JS102

2 0


JS102

GDI JS102 Slides

On Github Yonet / JS102

Welcome to JS102

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

Slides: bit.ly/JS102

Arrays

var coolTeachers = ["Pamela", "Bianca", "Brenda", "Aysegul"];
q: How long is it? What is the index of this one? What is at the 0th index? When would you use an array? How do we find out the length?

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'];
//I took HTML 101...
for(initial counter; condition to stop; counter++){
						
	console.log(counter); //??
						
}

Iteration

var classes = ['HTML 101', 'JS 101', 'JS 102'];
<!-- initial counter; condition to stop; counter++ -->
for(var i = 0; i < classes.length; i++){

	console.log('I took ' + classes[i]); 
						
}

Exercise Time

Objects

{}

Assignment

var angelTheCat = {};

angelTheCat.furColor = "orange";

//OR

var angelTheCat = {"furColor" : "orange"};
q:How many keys are in the object? What is the key name? What is the value?

Access w/dots

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

furVariable; //??

angelTheCat.furColor = "grey";

furVariable; //??
q: What is the new value after changing it?

Brackets

angelTheCat["fur color"] = "orange";
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

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);
Declaration/definition Parameters Function name/body Invocation/Calltime Parameters

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 += arguments[i];
	}
	return sum;
};

addMany(3, 10, 57,...);

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

The context in which values and expressions are "visible," or can be referenced.

Local Scope

var mySecretFunction = function() {
  var meLoveChocolate = true;
  console.log(meLoveChocolate);
};

console.log(meLoveChocolate);

Global Scope

<!-- I'm available everywhere. -->
var momsCandies = ["Milky Way", "Cadbury eggs", "Twix"];

var keepMyCandy = function() {
  var myCandies = ["Kit-Kat", "Hershey Bar", "M&Ms", "Snickers"];
  console.log("I'm available inside the function ", momsCandies);
};

console.log(myCandies);
<!-- I'm available everywhere. -->
var momsCandies = ["Milky Way", "Cadbury eggs", "Twix"];

var shareMyCandies = function() {
  myCandies = ["Kit-Kat", "Hershey Bar", "M&Ms", "Snickers"];
};

console.log(myCandies);

Precedence

var g = "global";

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

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

Questions

Welcome to JS102 {Objects} [Arrays] And Function(s){...} Slides: bit.ly/JS102