Accessing Arrays

Information stored in an array can be accessed by iterating the array elements; it also can be accessed in response to user requests. In the following example, the 24 upper- and lower-case letters of the Greek alphabet are displayed. Buttons are provided to move forward or backward through the alphabet, or the user can enter a position number to find the associated letter.

The alphabet is created as array greek and contains the 24 upper- and lower-case letters along with their names. This array needs to be created as a global variable to make it accessible by the different functions that access it. It also is created and is available for access when the page first loads by calling function buildArray() through the window object's onload event handler.

var greek = new Array();
var index = 0;

function buildArray()
{
	greek[0] = "Α/α - alpha";
	greek[1] = "Β/β - beta";
	greek[2] = "Γ/γ - gamma";
	greek[3] = "Δ/δ - delta";
	greek[4] = "Ε/ε - epsilon";
	greek[5] = "Ζ/ζ - zeta";
	greek[6] = "Η/η - eta";
	greek[7] = "Θ/θ - theta";
	greek[8] = "Ι/ι - iota";
	greek[9] = "Κ/κ - kappa";
	greek[10] = "Λ/λ - lambda";
	greek[11] = "Μ/μ - mu";
	greek[12] = "Ν/ν - nu";
	greek[13] = "Ξ/ξ - xi";
	greek[14] = "Ο/ο - omicron";
	greek[15] = "Π/π - pi";
	greek[16] = "Ρ/ρ - rho";
	greek[17] = "Σ/σ - sigma";
	greek[18] = "Τ/τ - tau";
	greek[19] = "Υ/υ - upsilon";
	greek[20] = "Φ/φ - phi";
	greek[21] = "Χ/χ - chi";
	greek[22] = "Ψ/ψ - psi";
	greek[23] = "Ω/ω - omega";

	document.getElementById("letterNo").innerText = index + 1;
	document.getElementById("letterOut").innerHTML = greek[index];
}

....

function init()
{
    buildArray(); 
  
    var goPrevBtn = document.getElementById("goPrevBtn");
    goPrevBtn.onclick=goPrev;
  
    var goNextBtn = document.getElementById("goNextBtn");
    goNextBtn.onclick=goNext;
  
    var findBtn = document.getElementById("findBtn");
    findBtn.onclick=find;
}

window.onload=init;


...
Greek letter at position
<span id="letterNo"></span> is 
<span id="letterOut" style="font-size:14pt; font-weight:bold"></span>
<br/><br/>
<input type="button" value="Prev" id="goPrevBtn">
<input type="button" value="Next" id="goNextBtn"> or at position 
<input id="position" type="text" style="width:25px; text-align:right"/>
<input type="button" value="Find" id="findBtn"/>

Listing 6-2. Code to build global array greek when the page loads.

Array greek and its index variable are declared outside any functions in order for them to be globally accessible by all functions. The index is initialized to 0 to point to the first element of the array. Array elements are loaded with strings containing the upper- and lower-case alphabetic symbols along with the letter name. Note the special character codes for the symbols. For example, the characters codes "Α" and "α" are the codes for the upper- and lower-case Α and α (alpha) letters.

After the array is loaded, the first letter of the alphabet is displayed. The string in element greek[0] is assigned to the letterOut.innerHTML property of the output span, where the character codes are rendered as Greek letters. The letter's position in the alphabet, which is 1 greater than the index, is assigned to the letterNo.innerText property of its output span.

Moving forward and backward through the alphabet is handled by two functions, goNext() and goPrev(), called on button clicks. Their appearance in the script is shown below.

...

function goNext()
{
    index += 1;
    if (index == greek.length) {
    index = 0;
    }
    document.getElementById("letterNo").innerText = index + 1;
    document.getElementById("letterOut").innerHTML = greek[index];
}

function goPrev()
{
    index -= 1;
    if (index < 0) {
    index = greek.length - 1;
    }
    document.getElementById("letterNo").innerText = index + 1;
    document.getElementById("letterOut").innerHTML = greek[index];
}
...

Listing 6-3. Code to move forward and backward through the greek array.

To move forward through the alphabet, the global index is incremented by 1 to point to the next array element. If the index is incremented past the upper boundary of the array, it is reset to 0 to continue at the start of the alphabet. The letter number and content of the array element are assigned to the output areas.

To move backward through the alphabet, index is decremented by -1 to point to the previous array element. If the index is decremented past the lower boundary of the array, it is reset to the last element of the array to continue at the end of the alphabet. Again, the letter number and content of the array element are assigned to the output areas.

The user can enter a letter number into the textbox and click the "Find" button to reveal that particular letter. This search is handled by function find(), whose appearance in the script is shown below.

...

function find()
{
    var position = parseInt(document.getElementById("position").value);
    if (position > 0 && position <= greek.length) {
    index = position - 1;
    document.getElementById("letterNo").innerText = index + 1;
    document.getElementById("letterOut").innerHTML = greek[index];
    }
}

Listing 6-4. Code to locate a letter in the greek array.

The entered position number is taken from the textbox as integer variable position. A test is made that the entered number is within range of the array elements. Then the letter in this array element is displayed.

TOP | NEXT: Corresponding Arrays