joannasese/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Loops: while, for, for-in">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Loops: while, for, for-in</title>
</head>
<body>

<script id="jsbin-javascript">
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Loops: while, for, for-in">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Loops: while, for, for-in</title>
</head>
<body>

</body>
</html>
</script>


<script id="jsbin-source-javascript" type="text/javascript"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Loops: while, for, for-in">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Loops: while, for, for-in</title>
</head>
<body>

</body>
</html></script></body>
</html>

## jsbin.tixobos.js
/*
LOOPS: while, for, for-in

Loops allow us to execute a block of code as many times as needed, where we define how many times that is.
  We use for loops to loop through an array.
  We use for-in loops to loop through an object.
  We use while loops when we don't know how long the loop needs to run. They will stop once conditions become false.
  They can be a bit dangerous because if the condition is always true, the loop will go on perpetually and your code will crash.

A. For loops
Here's the syntax:
  for (initializer; exit-condition; final-expression) {
  // code to run
  }

It's important to know how to loop forward and how to loop backward through an array.
In practice, looping forward looks like this:
*/
var gems = ["diamond", "ruby", "emerald", "sapphire"];
for (i=0, i < gems.length, i++) {
  console.log (gems[i])
};
// prints ->
// "diamond"
// "ruby"
// "emerald"
// "sapphire"

/* i is the initializer, so starting it at 0 is sensible. gems.length indicates that the loop will go as long as the length of the array.
i++ indicates that the loop will add on 1 to the value of i after each loop.
*/
//loop starts with i=0.
// first loop: i=0 (less than 4), i = i + 1 (which is 1)
console.log (gems[0]); // prints -> diamond
// second loop: i=1 (less than 4), i = i + 1 (which is 2)
console.log (gems[1]); // prints -> ruby
// third loop: i=2 (less than 4), i = i + 1 (which is 3)
console.log (gems[2]); // prints -> emerald
// fourth loop: i=3 (less than 4), i = i + 1 (which is 4)
console.log (gems[3]); // prints -> sapphire
// fifth loop i=4 (not less than 4), loop stops.

//Now let's go backwards! We can go forward through a loop, but say we want to go from back to front. Let's flip it and reverse it.

var gems = ["diamond", "ruby", "emerald", "sapphire"];
for (i = gems.length-1; i > -1; i--) {
console.log(gems[i])
};
//prints
// "sapphire"
// "emerald"
// "ruby"
// "diamond"

// The loop starts with
i = gems.length-1 // where i will equal 3
// i = 3 (3 > -1, so loop continues), i = i - 1 (which is 2)
console.log(gems[3]); // prints "sapphire"
// i = 2 (2 > -1, so loop continues), i = i - 1 (which is 1)
console.log(gems[2]); // prints "emerald"
// i = 1 (1 > -1, so loop continues), i= i - 1 (which is 0)
console.log(gems[1]); // prints "ruby"
// i = 0 (0 > -1, so loop continues), i = i - 1 (which is -1)
console.log(gems[0]); // prints "diamond"
// i = -1 (-1 !> -1), so loop stops

/*
B. For-in loops
Recall that objects hold any number of key:value pairs. For-in loops pull the values from objects.
Here's the syntax for for-in loops going forward:
  for (var key in object) {
    console.log(object[key]);
    }

Key isn't fixed. It just makes sense to call it "key," though you can call it "property" or whatever you want.

Here's what it looks like when you apply it.
*/
var outfit = {top: "blouse", bottom: "slacks"};
for (var key in outfit) {
  console.log(outfit[key]);
}
// prints
// "blouse"
// "slacks"

/*
In the example above, top and bottom are keys, where blouse and slacks are values.

Of course, now we need to know how to go backward. In order to do so,
you need to create a function where the object is looped through like an array.

var myObject = {key1: "value1", key2: "value2"};
var values = Object.values(myObject).reverse();
for (var i=0; i < values.length; i++){
console.log(values[i]);

Here it is applied:
*/

var outfit = {top: "blouse", bottom: "slacks"};
var values = Object.values(outfit).reverse();
for(var i=0; i<values.length;i++){
  console.log(values[i]);
/*

C. While loops
While loops run a block of code as long as the condition = true. It could run forever, which would cause your code to crash.
Here's the syntax:
  while (condition) {
  code to be run
  };
Practical application:
*/
  var x = 4
  while (x < 13) {
    console.log (x++)
  };
  // prints -> 4 all the way through 12

  // BEWARE:
  var x = 4
  while (x < 13) {
    console.log (x--)
  };
  // will go on forever because x will always be less than 13 in this scenario.
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Loops: while, for, for-in">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Loops: while, for, for-in</title>
	</head>
	<body>

	<script id="jsbin-javascript">
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Loops: while, for, for-in">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Loops: while, for, for-in</title>
	</head>
	<body>

	</body>
	</html>
	</script>



	<script id="jsbin-source-javascript" type="text/javascript"><!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Loops: while, for, for-in">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Loops: while, for, for-in</title>
	</head>
	<body>

	</body>
	</html></script></body>
	</html>
	/*
	LOOPS: while, for, for-in

	Loops allow us to execute a block of code as many times as needed, where we define how many times that is.
	We use for loops to loop through an array.
	We use for-in loops to loop through an object.
	We use while loops when we don't know how long the loop needs to run. They will stop once conditions become false.
	They can be a bit dangerous because if the condition is always true, the loop will go on perpetually and your code will crash.

	A. For loops
	Here's the syntax:
	for (initializer; exit-condition; final-expression) {
	// code to run
	}

	It's important to know how to loop forward and how to loop backward through an array.
	In practice, looping forward looks like this:
	*/
	var gems = ["diamond", "ruby", "emerald", "sapphire"];
	for (i=0, i < gems.length, i++) {
	console.log (gems[i])
	};
	// prints ->
	// "diamond"
	// "ruby"
	// "emerald"
	// "sapphire"

	/* i is the initializer, so starting it at 0 is sensible. gems.length indicates that the loop will go as long as the length of the array.
	i++ indicates that the loop will add on 1 to the value of i after each loop.
	*/
	//loop starts with i=0.
	// first loop: i=0 (less than 4), i = i + 1 (which is 1)
	console.log (gems[0]); // prints -> diamond
	// second loop: i=1 (less than 4), i = i + 1 (which is 2)
	console.log (gems[1]); // prints -> ruby
	// third loop: i=2 (less than 4), i = i + 1 (which is 3)
	console.log (gems[2]); // prints -> emerald
	// fourth loop: i=3 (less than 4), i = i + 1 (which is 4)
	console.log (gems[3]); // prints -> sapphire
	// fifth loop i=4 (not less than 4), loop stops.

	//Now let's go backwards! We can go forward through a loop, but say we want to go from back to front. Let's flip it and reverse it.

	var gems = ["diamond", "ruby", "emerald", "sapphire"];
	for (i = gems.length-1; i > -1; i--) {
	console.log(gems[i])
	};
	//prints
	// "sapphire"
	// "emerald"
	// "ruby"
	// "diamond"

	// The loop starts with
	i = gems.length-1 // where i will equal 3
	// i = 3 (3 > -1, so loop continues), i = i - 1 (which is 2)
	console.log(gems[3]); // prints "sapphire"
	// i = 2 (2 > -1, so loop continues), i = i - 1 (which is 1)
	console.log(gems[2]); // prints "emerald"
	// i = 1 (1 > -1, so loop continues), i= i - 1 (which is 0)
	console.log(gems[1]); // prints "ruby"
	// i = 0 (0 > -1, so loop continues), i = i - 1 (which is -1)
	console.log(gems[0]); // prints "diamond"
	// i = -1 (-1 !> -1), so loop stops

	/*
	B. For-in loops
	Recall that objects hold any number of key:value pairs. For-in loops pull the values from objects.
	Here's the syntax for for-in loops going forward:
	for (var key in object) {
	console.log(object[key]);
	}

	Key isn't fixed. It just makes sense to call it "key," though you can call it "property" or whatever you want.

	Here's what it looks like when you apply it.
	*/
	var outfit = {top: "blouse", bottom: "slacks"};
	for (var key in outfit) {
	console.log(outfit[key]);
	}
	// prints
	// "blouse"
	// "slacks"

	/*
	In the example above, top and bottom are keys, where blouse and slacks are values.

	Of course, now we need to know how to go backward. In order to do so,
	you need to create a function where the object is looped through like an array.

	var myObject = {key1: "value1", key2: "value2"};
	var values = Object.values(myObject).reverse();
	for (var i=0; i < values.length; i++){
	console.log(values[i]);

	Here it is applied:
	*/

	var outfit = {top: "blouse", bottom: "slacks"};
	var values = Object.values(outfit).reverse();
	for(var i=0; i<values.length;i++){
	console.log(values[i]);
	/*

	C. While loops
	While loops run a block of code as long as the condition = true. It could run forever, which would cause your code to crash.
	Here's the syntax:
	while (condition) {
	code to be run
	};
	Practical application:
	*/
	var x = 4
	while (x < 13) {
	console.log (x++)
	};
	// prints -> 4 all the way through 12

	// BEWARE:
	var x = 4
	while (x < 13) {
	console.log (x--)
	};
	// will go on forever because x will always be less than 13 in this scenario.