Week 6 java script loops

Speaking in Code

Intro to JavaScript
Loops!

Brian Lee

Professor Liel Leibovitz

Speaking in Code

Review – Functions

• Easy way to reuse code

• Define a set of statements through one variable

var divideByThree = function (number) {
var val = number / 3;
console.log(val);
};

Speaking in Code

Review – Functions: Name

• The name of the function that will execute
var divideByThree = function (number) {
var val = number / 3;
console.log(val);
};

• Run the function by calling its name
divideByThree(9);

Speaking in Code

Review – Functions: Parameters

• Parameters are passed in for the function to use

• Similar to a variable in math
f(x) = x2 + 2

• Calling function with x = 3

f(3) = 32 + 2
>> 11

Speaking in Code

Review – Functions: Parameters

• In JavaScript passing in 3: myFunc(3);

var myFunc = function (number) {
var val = Math.pow(number, 2) + 2;
console.log(val);
};

var myFunc = function (3) {
var val = Math.pow(3, 2) + 2;
console.log(val);
};

Speaking in Code

Review – Functions: Return Values

• What good are functions if all you do is print

• A functions return value is similar to a variable

var addThree = function (number) {
return number + 3;
};

var count = addThree(4);
console.log(count)
>> 7

Speaking in Code

Review – Functions: Return Values

• You can assign to a variable or use it right away

if(addThree(4) > 10) {
console.log(“We’re over 10!”);
} else {
console.log(addThree(4) + “ is not over 10”);
}
>> “7 is not over 10”

Speaking in Code

Review – Functions: Scope (Local)

• Where you define your variables matter

• Variables defined inside a function ONLY exist there

var multiplyThree = function (number) {
var multiplier = 3;
return multiplier * number;
};

console.log(multiplier)
>> multiplier is not defined

Speaking in Code

Review – Functions: Scope (Global)

• Where you define your variables matter

• Variables defined outside a function exist globally
var multiplier = 3;
var multiplyThree = function (number) {
return multiplier * number;
};

console.log(multiplier)
>> 3

Speaking in Code

Functions in other languages

• JavaScript
var square = function (number) {
return number * number;
};

• Ruby (method)
def square(number)
return number * number
end

Speaking in Code

Intro: Loops

• Execute same line(s) of code over and over

• Fundamental concept in programming

• Can be trickier with JavaScript

Speaking in Code

Intro: For Loops
• Basic Syntax
for(var i = 0; i < 10; i++) {
console.log(i);
}

• Initialization: define variable useful to loop
• Conditional: keep looping while this is true
– is “i” currently less than 10?

• Increment: executed at the end of the loop

Speaking in Code

Intro: Loop Mechanics
• In what order does this loop think?
for(var i = 0; i < 10; i++) {
console.log(i);
}

1. Initialization
2. Check Conditional: Stop loop if false
3. Run Code
4. Run Increment: i++ i=i+1
5. Step 2

Speaking in Code

Infinite Loops
• Loops with no exit strategy

• Will continue to execute until crashing

Speaking in Code

Infinite Loops

• Why would this loop not work?

for(var i = 0; i < 10; i--) {
console.log(i);
}`

Speaking in Code

Infinite Loops

• Why would this loop not work?

for(var i = 0; i < 10; i--) {
console.log(i);
}`

>> -1
>> -2
>> -3
>> -4
…
>> -467389146129

Speaking in Code

Arrays

• Collection of items

• Like a box (even looks like it)
[]

• Each item has a designated spot

var doughnuts= [ , , , ]

Speaking in Code

Arrays: Accessing Elements

• Elements: items in arrays

• Index: location of element in array
– Starts from 0 not 1

var doughnuts= *‘Boston Creme’, ‘Glazed’, ‘Old Fashioned’ +

• How to access the value “Boston Creme”

Speaking in Code

Arrays: Accessing Elements

• Elements: items in arrays

• Index: location of element in array
– Starts from 0 not 1

var doughnuts= *‘Boston Creme’, ‘Glazed’, ‘Old Fashioned’ +
0 1 2
• How to access the value “Boston Creme”
doughnuts[0]

Speaking in Code

Loops and Arrays

• Use loops to write less code
var doughnuts = *‘Boston Creme’, ‘Glazed’, ‘Old Fashioned’ ]
for(var i = 0; i < doughnuts.length; i++) {
console.log(“This box has “ + doughnuts*i])
}

>> “This box has Boston Crème”
>> “This box has Glazed”
>> “This box has Old Fashioned”

Speaking in Code

Try it yourself! 

http://bit.ly/jsloops

http://jsbin.com

Speaking in Code

Real World Example

• Facebook:
– Ever wanted to select all friends when sending out invites?

var elms = document.getElementsByName("checkableitems[]");
for (i = 0; i < elms.length; i++) {
if (elms[i].type === "checkbox”) ,
elms[i].click();
}
}

Week 6 java script loops

More Related Content

What's hot

Similar to Week 6 java script loops

Week 6 java script loops

Editor's Notes