Untitled

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="loops">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
/* 1. Loops:
*     Loops are a way of iterating over data and repeating yourself. They help us pull out
*     individual elements and work with them one by one. Let's look at for loops,
*     while loops, and for-in loops.
*/

var bird = "Eagle";

for(var i = 0; i < bird.length; i++) {
  console.log(bird[i]);
}
/* Prints "E", "a", "g", "'l", "e". It iterates over the entire string, and returns
*  the element at each position.
*/

//Let's go backwards!
for (var i = bird.length-1; i > -1; i--) {
  console.log(bird[i]);
}
/* Prints "e", "l", "g", "a", "E". The loop iterates backward over the string and
*  returns the elements as it encounter them.
*/

//While loops are similar to for loops, but syntactically different.

var ducks = 1;
while(ducks < 10) {
  console.log(ducks);
  ducks++;
}
// Prints the numbers 1-9 as it iterates over the loop.

/* We can also loop over arrays and objects.
*/

var uhRay = ["duck", "tuck", "goose"];
for (var i = 0; i < uhRay.length; i++) {
  console.log(uhRay[i]);
}
//This logs "duck", "tuck", and "goose".

//backwards!!!!
var rayUh = ["it's", "a", "trap"];

for (var i = rayUh.length-1; i > -1; i--) {
  console.log(rayUh[i]);
}
//Prints our elements in reverse order.

//for-in loops allow us to iterate through an object.

var skyrimSoldier ={
  knee: "Arrow",
  fear: "That Dragons have returned!"
};

for (var key in skyrimSoldier) {
  console.log(skyrimSoldier[key]);
}
//This prints out the values but what about printing the keys?

var jar = {
  pickles: "green",
  eggs: "gross"
};

for (var key in jar) {
  console.log(key);
}

//This prints the key values.
</script>


<script id="jsbin-source-javascript" type="text/javascript">/* 1. Loops:
*     Loops are a way of iterating over data and repeating yourself. They help us pull out
*     individual elements and work with them one by one. Let's look at for loops,
*     while loops, and for-in loops.
*/

var bird = "Eagle";

for(var i = 0; i < bird.length; i++) {
  console.log(bird[i]);
}
/* Prints "E", "a", "g", "'l", "e". It iterates over the entire string, and returns
*  the element at each position.
*/

//Let's go backwards!
for (var i = bird.length-1; i > -1; i--) {
  console.log(bird[i]);
}
/* Prints "e", "l", "g", "a", "E". The loop iterates backward over the string and
*  returns the elements as it encounter them.
*/

//While loops are similar to for loops, but syntactically different.

var ducks = 1;
while(ducks < 10) {
  console.log(ducks);
  ducks++;
}
// Prints the numbers 1-9 as it iterates over the loop.

/* We can also loop over arrays and objects.
*/

var uhRay = ["duck", "tuck", "goose"];
for (var i = 0; i < uhRay.length; i++) {
  console.log(uhRay[i]);
}
//This logs "duck", "tuck", and "goose".

//backwards!!!!
var rayUh = ["it's", "a", "trap"];

for (var i = rayUh.length-1; i > -1; i--) {
  console.log(rayUh[i]);
}
//Prints our elements in reverse order.

//for-in loops allow us to iterate through an object.

var skyrimSoldier ={
  knee: "Arrow",
  fear: "That Dragons have returned!"
};

for (var key in skyrimSoldier) {
  console.log(skyrimSoldier[key]);
}
//This prints out the values but what about printing the keys?

var jar = {
  pickles: "green",
  eggs: "gross"
};

for (var key in jar) {
  console.log(key);
}

//This prints the key values.</script></body>
</html>