Fire-House 58

Arrays

 intro

a-1
JavaScript:
firehouse58.com arrays are storage databases. They can be horizontal, vertical, or artificially manufactured to hold rows of data indexed by columns.

 

Hard Reload
To See Menu

Storing data... 

The Array object is an effective way to store and access data. They are ideal for small databases, without requiring a server request, and essential for interactive image work. These are the basics.

Arrays are specified within your script using the syntax:   

var name = new Array(n)  or

function  newArray(n) {
this.length = n
return this }
var name = new newArray(n)

It is important to capitalize the A in Array. n is the length, or number of entries the Array contains. The second entry above is the old method, and is backward compatible with Moses era browsers.

Once the Array is established, it must be populated. This can be done vertically or horizontally. The vertical method yields one column of data, indexed by row numbers. This makes vertical arrays prime candidates for searches by loops. A horizontal method defines separate properties of the array in a row. The syntax for both methods is provided below:

vertically horizontally

name[0] = "data1"
name[1] = "data2"
name[2] = "data3"

name.propertyone = "data1"
name.propertytwo = "data2"
name.propertythree = "data3"
vertical array example            var testone = new Array(3)
testone[0] =



testone[1] =
testone[2] =

<script language="JavaScript">
<!--

 simple array

var testone = new Array(3)

testone[0] = "stringx";
testone[1] = "stringy";
testone[2] = "stringz";

 This is the array testone. It is populated with three rows of data, testone[0] = "stringx";, etc. The length property is (3).    

function outputter(num) {
i = num
document.forms[0].elements[3].value = testone[i] }
//-->
</script>

 This function outputs the selected row of testone to the textarea.  

<form>
<input type="radio" value="none" checked name="R1" onClick="outputter(0)">
<input type="radio" name="R1" value="none" onClick="outputter(1)">
<input type="radio" name="R1" value="none" onClick="outputter(2)">
<textarea rows="4" name="outputs" cols="30"></textarea>
</form>

 The three radio buttons call the outputter function and passes a value (0), which corresponds to its position in the array.

use a for loop to search the array

for loop example                   var testtwo = new Array(7)
enter a color

 

<script language="JavaScript">
<!--

 looping an array

var testtwo = new Array(7)

testtwo[0] = "red"
testtwo[1] = "orange"
testtwo[2] = "yellow"
testtwo[3] = "green"
testtwo[4] = "blue"
testtwo[5] = "indigo"
testtwo[6] = "violet"

 The array testtwo is populated by the primary colors. The length property is (7). Each data is entered in lowercase characters.

Accessing data stored in a larger array is requires a more efficient method than listing the elements within the form.

function outputtertwo(form) {
var searchfor = form.test.value

for ( var i = 0 ; i < testtwo.length ; i++ ) {
if (searchfor.toLowerCase() == testtwo[i] ) {

result = ("testtwo[" + i + "] contains " + testtwo[i]);
document.forms[1].elements[2].value = result }}}

//-->
</script>

 outputtertwo uses a for loop to cycle through the array testtwo attempting to match the value inputted to the text object  form.test.value. The value is converted toLowerCase() to match the character case in the array.      

<form>
<input type="text" name="test" size="10">
<input type="button" value="For Loop" onClick="outputtertwo(this.form)">

<textarea rows="4" name="outputs" cols="30">
</form>

 The form button object calls outputtertwo with instructions to perform its function on (this.form).   
[back]   [home]   [next]