Kids

Can

JavaScript

<-----Back        Next --->

Arrays and For loops

Arrays are going to save you a lot of trouble!
If you have to do the same thing to a lot of objects, Arrays and for(){...} loops are the solution

example1:


Fill out the labels choosing from the following : leaf, stem, shoot, flower, root, fruit, seed


Before we explain this code, you need to know about Arrays and For-loops.
For Loops

A For loop will do a certain action a number of times.

 for ( 
 i = 0  
 ; 
 i < 4 
 ; 
 i++ 
 ) 
 { 


 .......excecute some code 
 } 

In this example from 0 to 3 = 4x



example2:

click for the echo

Who is there?


For loop ......... .... "TryoutPanel1"
<script> echoFunction=function(){ for(i=0;i<3;i++){ // for loop: runs from 0 to 3 var question=document.getElementById("question"); question.innerHTML += "..there...\n"; // add "there" onto the rest } } </script> <h1 id="question" style=" color:orange " onclick=" echoFunction() ">Who is there? </h1> <ul><li>Click on who is there. Can you make the echo <u>longer</u>?(5)</li></ul>


Look here to get more details on how the For-loop works

Create an Array

An Aray object holds a number of items.
It can hold String (text), Numbers, Boolean, Objects even Arrays.
The items can then be accessed with an index number.

example1:

my Class:


Let's make make an Array of our classmates:

 var  
 classArray 
 = 
 [ 
 "Bob" 
 , 
 "Ben" 
 , 
 "Jemma" 
 , 
 "Lisa" 
 , 
 "Bella" 
 , 
 "Sione" 
 ] 
 ; 

Arrays have Square brackets around them and commas between the items.


You can access the elements in the Array with their index

 var 
 name 
 = 
 classArray 
 [ 
 1 
 ] 

To show all items in the Array we use a for loop
that runs from index i=0 (first element) to index i=array.length -1 (last element).

 for ( 
 i = 0  
 ; 
 i < classArray.length 
 ; 
 i++ 
 ) 
 { 


  classHeader.innerHTML += classArray[i] 
 } 

Look here for more ways to construct an Array

1: Regular:
var myCars=new Array();
myCars[0] = "Saab";
myCars[1] = "Volvo";
myCars[2] = "BMW";
2: Condensed:
var myCars = new Array ("Saab" , "Volvo" , "BMW" );
3: Literal:
var myCars=[ "Saab" , "Volvo" , "BMW" ];


Play with Arrays......... .... "TryoutPanel2"
<script> // 3 ways to construct an Array: var classArray=["Bob","Ben","Jemma","Lisa","Bella","Sione"]; // Literal var numberArray=new Array(6,4,100,7,88,1001); // Condensed var ridesArray=new Array(); // Regular ridesArray[0]='bike'; ridesArray[1]='tricycle'; ridesArray[2]='helicopter'; //.... make your own Array ////////////// SHOW INDEX ////////////////////////////// function showIndex(){ // shows a particular index alert(classArray[1] ); //... change the index and array } //////////// SHOW ALL ////////////////////////////// function showALL(){ // writes all the Arrays' elements to alert var list=''; // empty String for(var i=0;i<classArray.length;i++){ //....change the for loop so it does not show all elements list += classArray[i] +', '; // add the element at index:i } alert(list); } </script> <p> Push the buttons to see the Arrays.</p> <button onclick=" showALL() ">show all</button> <button onclick=" showIndex() ">show index</button> <br> <p> <ul> <li>Show a different <b>index</b> and array with showIndex().(21)</li> <li>Make a <b>new Array</b> and show it with showAll()(14,31).</li> <li>Change <b>for-loop</b> to show a different number of elements(31)</li> </ul>





Array Object Methods

The Array Object has a lot of very handy methods.
Look below at the array Toggle and try them out.

Array1 = [

" " ," " ," " ," " ," "

]

Array2 = [

" " ," " ," " ," " ," "

]

These are the Array Object Methods. Click on the Methods below to enter them in the tryout Panel.
Enter the necesary parameters. Then click the = button to show the result.
The Array values can be changed.
Click on the Array you want to manipulate to ender it in the tryout panel


Array1.

method


info

indexOf( item )

lastIndexOf( item )

concat( otherArray )

join( )

pop( )

shift( )

unshift( item )

push( ( item )

reverse( )

splice( int , int )

slice( int , int )

sort()

sort( function(a,b){return a - b } )

toString( )

valueOf( )


In the Tryout panel below try this:
*How can you display the names 2 to 4?
*Forwards and Backwards?
*Can you display the class into 2 groups?
* Delete some names and add some


Arrays Methods......... .... "TryoutPanel3"
<script> var classArray=["Bob","Ben","Jimmy","Jemma","Lisa","Bella","Sione"]; // create Array //////////// SHOW ALL ////////////////////////////// function showALL(){ // writes all the Arrays' elements to the h1-tag var classHeader=document.getElementById('classHeader'); // get h1-tag classHeader.innerHTML="My Class = " // refresh for(var i=0;i<classArray.length;i++){ // for loop runs from index = 0 to classHeader.innerHTML += classArray[i] +', '; // to array.length -1. the last element } } ////////////// SHOW INDEX ////////////////////////////// function showIndex(){ // shows a particular index var index=prompt("enter index"); // a prompt fetches the user's desired index var classHeader=document.getElementById('classHeader'); classHeader.innerHTML= classArray[index] ; // show array's element at that index } //////////////// NEW PERSON //////////////////////////////////////// function newPerson(){ // adds new Person to the Array var person=prompt("enter name of a new Person"); // fetches a new name classArray.push(person); // add new element to Array at the end var classHeader=document.getElementById('classHeader'); classHeader.innerHTML="My Class = " // refresh the h1-tag for(var i=0;i<classArray.length;i++){ // for loops runs through all elements in the Array classHeader.innerHTML += classArray[i] +', '; // add this element to the innerHTML } } //.....write more functions(Read Array Object Methods first) // don't forget to give them buttons(47) </script> <p> Here is the classArray with some Array Functions.</p> <h1 id="classHeader" > my Class:</h1> <button onclick=" showALL() ">show all</button> <button onclick=" showIndex() ">show index</button> <button onclick=" newPerson() ">put new person</button> <br> <p> Look at the Array Object Methods below and write more functions to try and do the following things: <ul> <li>Sort the Names <b>Alphabetically</b></li> <li><b>Delete</b> some names, <b>Replace</b> some names</li> <li>Find someone's <b>position</b> in the class</li> </ul></p>



Make a Label Game

The Label Game from example 1 has a checkAnswers() function . It uses the lableArray with all input id-s to access the inputs. Then it compares the input.value(user's answer) with the input-id, (correct answer).

example1:


Fill out the labels choosing from the following : leaf, stem, shoot, flower, root, fruit, seed



......... .... "TryoutPanel"





<-----Back        Next --->

This username already exists.

This username already exists.

Login or register to save your work.

User name field is empty.

Your username needs to be at least 7 characters long.

Your username can not contain any of the following characters: ",', <, > , < and whitespaces.

Please enter a correct email addresss .

This email address is not found in our database .

Your password needs to be at least 7 characters long.

login
username
password
forgot password
email
register
username
password
email