Created
June 27, 2016 01:16
-
-
Save anonymous/6e700387d03c33138958cdbd1dfd47eb to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/padivar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<script id="jsbin-javascript"> | |
/* | |
===== | |
LOOPS | |
===== | |
Loops, like if-else blocks, also alter the control flow of our program. A loop is a section of code that will repeat until certain conditions are met. This can be for many reasons - to cycle through elements in an array, to halt the program until a condition is true, et cetera. | |
In javascript there are two primary loops. One is a 'for' loop, and in general it is used to loop through a finite number of elements. Another widely used loop is a 'while' loop, which will continue looping until a certain condition is met. Loops are powerful, and dangerous - as an infinte loop will crash the program. | |
For Loops | |
--------- | |
To make a for loop, we use the keyword 'for' followed by a parenthesis that takes three arguments. First, initializing the counter variable, then the condition to keep looping, then the increment at which to count. A simple for loop looks like this: | |
*/ | |
for(var i = 1; i < 5; i++) { | |
console.log(i); | |
} | |
// > 1 | |
// 2 | |
// 3 | |
// 4 | |
/* | |
As you can see, this loop counts to 4. Variable i starts at 1, then increments by one until the condition (i < 5) is false. Let's try backwards! | |
*/ | |
for(var i = 4; i > 0; i--) { | |
console.log(i); | |
} | |
// > 4 | |
// 3 | |
// 2 | |
// 1 | |
/* | |
We can use loops to cycle through elements in an array quickly, rather than calling upon each element individually with bracket notation. | |
*/ | |
var groceryList = ['milk', 'eggs', 'bread', 'tequila']; | |
for(var i = 0; i < groceryList.length; i++) { | |
console.log(groceryList[i]); | |
} | |
// > "milk" | |
// "eggs" | |
// "bread" | |
// "tequila" | |
/* | |
When dealing with objects, we cannot use the for loop this way since the elements are not indexed. Instead we use the keyword 'in' to refer to the object's keys. | |
*/ | |
var datingProfile = { | |
Name: 'Nathan Donolli', | |
Weight: 220, | |
Occupation: 'Professional Wrestler' | |
}; | |
for(var key in datingProfile) { | |
console.log(key + ': ' + datingProfile[key]); | |
} | |
// > "Name: Nathan Donolli" | |
// "Weight: 220" | |
// "Occupation: Professional Wrestler" | |
// Looping through an object in reverse is a bit tougher, since there is no built in way to do so. One solution is to use multiple for loops: | |
var array = []; | |
for(var key in datingProfile) { | |
array.push((key + ': ' + datingProfile[key])); | |
} | |
for(var i = array.length - 1; i > -1; i--) { | |
console.log(array[i]); | |
} | |
// > "Occupation: Professional Wrestler" | |
// "Weight: 220" | |
// "Name: Nathan Donolli" | |
/* | |
While loops | |
----------- | |
While loops use the keyword 'while' and are followed by an expression. So long as the expression is false, the program will execute the bracketed section of the loop. | |
*/ | |
var count = 1; | |
while (count < 4) { | |
console.log(count); | |
count++; | |
} | |
// > 1 | |
// 2 | |
// 3 | |
// While loops can be useful in programs for creating conditional gateways as well. | |
var sleeping = true; | |
while (sleeping) { | |
console.log('Waking up'); | |
sleeping = false; | |
} | |
// > "Waking up" | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">/* | |
===== | |
LOOPS | |
===== | |
Loops, like if-else blocks, also alter the control flow of our program. A loop is a section of code that will repeat until certain conditions are met. This can be for many reasons - to cycle through elements in an array, to halt the program until a condition is true, et cetera. | |
In javascript there are two primary loops. One is a 'for' loop, and in general it is used to loop through a finite number of elements. Another widely used loop is a 'while' loop, which will continue looping until a certain condition is met. Loops are powerful, and dangerous - as an infinte loop will crash the program. | |
For Loops | |
--------- | |
To make a for loop, we use the keyword 'for' followed by a parenthesis that takes three arguments. First, initializing the counter variable, then the condition to keep looping, then the increment at which to count. A simple for loop looks like this: | |
*/ | |
for(var i = 1; i < 5; i++) { | |
console.log(i); | |
} | |
// > 1 | |
// 2 | |
// 3 | |
// 4 | |
/* | |
As you can see, this loop counts to 4. Variable i starts at 1, then increments by one until the condition (i < 5) is false. Let's try backwards! | |
*/ | |
for(var i = 4; i > 0; i--) { | |
console.log(i); | |
} | |
// > 4 | |
// 3 | |
// 2 | |
// 1 | |
/* | |
We can use loops to cycle through elements in an array quickly, rather than calling upon each element individually with bracket notation. | |
*/ | |
var groceryList = ['milk', 'eggs', 'bread', 'tequila']; | |
for(var i = 0; i < groceryList.length; i++) { | |
console.log(groceryList[i]); | |
} | |
// > "milk" | |
// "eggs" | |
// "bread" | |
// "tequila" | |
/* | |
When dealing with objects, we cannot use the for loop this way since the elements are not indexed. Instead we use the keyword 'in' to refer to the object's keys. | |
*/ | |
var datingProfile = { | |
Name: 'Nathan Donolli', | |
Weight: 220, | |
Occupation: 'Professional Wrestler' | |
}; | |
for(var key in datingProfile) { | |
console.log(key + ': ' + datingProfile[key]); | |
} | |
// > "Name: Nathan Donolli" | |
// "Weight: 220" | |
// "Occupation: Professional Wrestler" | |
// Looping through an object in reverse is a bit tougher, since there is no built in way to do so. One solution is to use multiple for loops: | |
var array = []; | |
for(var key in datingProfile) { | |
array.push((key + ': ' + datingProfile[key])); | |
} | |
for(var i = array.length - 1; i > -1; i--) { | |
console.log(array[i]); | |
} | |
// > "Occupation: Professional Wrestler" | |
// "Weight: 220" | |
// "Name: Nathan Donolli" | |
/* | |
While loops | |
----------- | |
While loops use the keyword 'while' and are followed by an expression. So long as the expression is false, the program will execute the bracketed section of the loop. | |
*/ | |
var count = 1; | |
while (count < 4) { | |
console.log(count); | |
count++; | |
} | |
// > 1 | |
// 2 | |
// 3 | |
// While loops can be useful in programs for creating conditional gateways as well. | |
var sleeping = true; | |
while (sleeping) { | |
console.log('Waking up'); | |
sleeping = false; | |
} | |
// > "Waking up" | |
</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
===== | |
LOOPS | |
===== | |
Loops, like if-else blocks, also alter the control flow of our program. A loop is a section of code that will repeat until certain conditions are met. This can be for many reasons - to cycle through elements in an array, to halt the program until a condition is true, et cetera. | |
In javascript there are two primary loops. One is a 'for' loop, and in general it is used to loop through a finite number of elements. Another widely used loop is a 'while' loop, which will continue looping until a certain condition is met. Loops are powerful, and dangerous - as an infinte loop will crash the program. | |
For Loops | |
--------- | |
To make a for loop, we use the keyword 'for' followed by a parenthesis that takes three arguments. First, initializing the counter variable, then the condition to keep looping, then the increment at which to count. A simple for loop looks like this: | |
*/ | |
for(var i = 1; i < 5; i++) { | |
console.log(i); | |
} | |
// > 1 | |
// 2 | |
// 3 | |
// 4 | |
/* | |
As you can see, this loop counts to 4. Variable i starts at 1, then increments by one until the condition (i < 5) is false. Let's try backwards! | |
*/ | |
for(var i = 4; i > 0; i--) { | |
console.log(i); | |
} | |
// > 4 | |
// 3 | |
// 2 | |
// 1 | |
/* | |
We can use loops to cycle through elements in an array quickly, rather than calling upon each element individually with bracket notation. | |
*/ | |
var groceryList = ['milk', 'eggs', 'bread', 'tequila']; | |
for(var i = 0; i < groceryList.length; i++) { | |
console.log(groceryList[i]); | |
} | |
// > "milk" | |
// "eggs" | |
// "bread" | |
// "tequila" | |
/* | |
When dealing with objects, we cannot use the for loop this way since the elements are not indexed. Instead we use the keyword 'in' to refer to the object's keys. | |
*/ | |
var datingProfile = { | |
Name: 'Nathan Donolli', | |
Weight: 220, | |
Occupation: 'Professional Wrestler' | |
}; | |
for(var key in datingProfile) { | |
console.log(key + ': ' + datingProfile[key]); | |
} | |
// > "Name: Nathan Donolli" | |
// "Weight: 220" | |
// "Occupation: Professional Wrestler" | |
// Looping through an object in reverse is a bit tougher, since there is no built in way to do so. One solution is to use multiple for loops: | |
var array = []; | |
for(var key in datingProfile) { | |
array.push((key + ': ' + datingProfile[key])); | |
} | |
for(var i = array.length - 1; i > -1; i--) { | |
console.log(array[i]); | |
} | |
// > "Occupation: Professional Wrestler" | |
// "Weight: 220" | |
// "Name: Nathan Donolli" | |
/* | |
While loops | |
----------- | |
While loops use the keyword 'while' and are followed by an expression. So long as the expression is false, the program will execute the bracketed section of the loop. | |
*/ | |
var count = 1; | |
while (count < 4) { | |
console.log(count); | |
count++; | |
} | |
// > 1 | |
// 2 | |
// 3 | |
// While loops can be useful in programs for creating conditional gateways as well. | |
var sleeping = true; | |
while (sleeping) { | |
console.log('Waking up'); | |
sleeping = false; | |
} | |
// > "Waking up" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment