Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<head>
<script>
// Example of a Script in the head section
function showPlaces()
  {
    // Create and array of places
    var PlaceArray = new Array("a pie","the sky","a cup","the truck");  
    // var Place = PlaceArray[interatingCounter]: this line for discussion purposes
    // PlaceArray.length is a property. No processing is done to determine its value
    for (var i = 0; i < PlaceArray.length; i = i+1)
      {
        var Place = PlaceArray[i]
        document.write(Place);
        document.write("<br />") // breaking new line
      }
  }
</script>
</head>
<body>
<h1>Introduction</h1>
 Examples of interation with JavaScript. These are for discussion purposes and do NOT illustrate best practices. Instead we are using document.write() as an easy way to display outcomes, and executing JavaScript inline with the HTML.
<h1>JavaScript Iterating Over Arrays</h1>
<h2>Display Fruit in an array.</h2>
<script>
// Create an array of Fruit
var FruitArray= new Array("Apples","Peaches","Watermelons","Pomegranates");
for (x in FruitArray) 
  {
    document.write(FruitArray[x]);
    document.write("<br />"); // breaking new line 
  }
</script>
 
<h2>Display places you might find fruit.</h2>
<script>
  // this time use a function in the head section of the html page
  showPlaces()
</script>
 
<h2>Fruit in various places</h2>
<script>
//  Create the arrays of Fruit and Toppings
var FruitArray= new Array("Apples","Peaches","Watermelons","Pomegranates");
var PlaceArray = new Array("a pie","the sky","a cup","the truck"); 
var Counter = 0 ;
//var Place = PlaceArray[Counter] : this line for discussion purposes
//  Looping through fruit with toppings
for (x in FruitArray) 
  {
    Place = PlaceArray[Counter]
    document.write("I like " + FruitArray[x]  + " in " + Place);
    document.write("<br />"); // breaking new line 
    Counter +=1; // increment the counter for the next destination
  }
</script>
​
<h2>Fruit in various places done a different way.</h2>
<script>
// function to allow insertion of parameters in a string
String.prototype.format = function() 
  {
    var s = this;
    for (var i = 0; i < arguments.length; i++) 
    {       
        var reg = new RegExp("\\{" + i + "\\}", "gm");
        s = s.replace(reg, arguments[i]);
    }
    return s;
}
 
// function to display the fruit (uses .format above)
function showFruit(element)
{
   place = PlaceArray[Counter];
   document.write(("I like {0} in {1} <br />").format(element,place));
// line above replaces: document.write("I like " + element + " in " + place)
// this is no longer required:  document.write("<br />"); // breaking new line 
   Counter +=1; // increment the counter for the next destination
}
 
//  Create the arrays of Fruit and Toppings
var FruitArray= new Array("Apples","Peaches","Watermelons","Pomegranates");
var PlaceArray = new Array("a pie","the sky","a cup","the truck"); 
var Counter = 0 ;
var Place = PlaceArray[Counter] // this line for discussion purposes
// use forEach method to iterate over the array of Fruit 
// calling the showFruit function
FruitArray.forEach(showFruit);
/* line above replaces:
{
    Place = PlaceArray[Counter]
    document.write("I like " + FruitItem + " in " + Place)
    document.write("<br />"); // breaking new line 
 
    Counter +=1 // increment the counter for the next destination
}
*/       
</script>
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
jonsansonpro
0viewers