No.11 Array


What is array?

When we have many data of the same kind, it is more convenient to number them than to name them. Using array, we can store multiple data (called elements of the array) inside a single variable. To specify one of the data, we use a number to index the elements.

Exercise 11-1(☆)

Execute the following with console.

  • var x = ['Alice', 'Bob', 'Carol'];
  • x[0]
  • x[2]
  • x[3]
  • x[2] = 'Charlie';
  • x[2]

Brackets [ ] are used in the following two manners.

  • To specify an array as a whole, a list of data is written in the bracket, punctuating with commas. In the first line of the example above, we create an array which consists of three strings 'Alice', 'Bob', and 'Carol'.
  • To specify an element of an array, we use an expression like x[0] where a variable x should store an array and a number 0 in the bracket is an index of the element. Note that the index of the first element is 0. Threfore, x[0] refers to 'Alice'.

Assignments also have two forms.

  • In the first line of the example above, the entire array is stored into a variable x. In this case, the left-hand side of the equal is a variable name without an index.
  • In the fifth line of the example above, x[2] = 'Charlie' means to replace 'Carol' (an element of index 2) with 'Charlie'. In this case, the left-hand side of the equal includes an index because it refers a single element specified by the index.

Iteration and Array

Arrays are useful because a lot of data can be processed in turn, by storing the index into a variable and changing its value with a loop.

Let’s make a calendar as an example. We can get dates easily incrementing one by one, but days of the week are difficult because they are different strings. So, an array is used to store strings “Sun”, “Mon”, “Tue”, … so that we can use a nubmer 0, 1, 2, … instead of the strings.

Exercise 11-2(☆☆☆)
  1. In the same way as Exercise 09-5, we will create items (li elements) “Date 1”, “Date 2”, “Date 3”, … in a list (ul elements). Make ex11-2.html and ex11-2.js and fill in the following.

  2. Which part of the program above corresponds to which part of the diagram below? How the value of the variable x will change as the loop repeats?
  3. Execute the following with console.
    • var day = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
    • var n = 1;
    • day[n]
    • n = n+1;
    • day[n]
    • n = n+1;
    • day[n]
  4. Rewrite ex11-2.js so that “Date 1 (Mon)”, “Date 2 (Tue)”, “Date 3 (Wed)” is shown. What happens after “Date 7”?
  5. To get a correct display after “Date 7”, we may write 31 elements of 'Sun', 'Mon', 'Tue', ... in the array, but there is a smarter method. We can use a division remainder (% operator) to specify the day of the week. Execute the following with console.
    • 7 % 7
    • 8 % 7
    • 9 % 7
    • 14 % 7
    • 15 % 7
    • 21 % 7
    • 22 % 7
  6. Rewrite the program so that the day of the week is shown correctly for every day until 31.

Let’s make the calendar more practical.

Exercise 11-3(☆☆☆☆☆)
  1. Create a new text field for “What month”. According to the number in it, days should be shown until 28, 30, or 31. (Hint: Use an array for numbers of days in months [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31])
  2. Create another new text field for “What year”, and make a correct calendar. (Hint: Use Zeller’s congruence.)
  3. Use a table instead of a list to show the calendar. (There is a sample, but only Japanese version is available, and some of its functions are beyond the scope of this course…)

Manipulating Multiple HTML Elements

document.getElementById() is used for specifying a HTML element. For example, document.getElementById().innerHTML reads/writes the content of an element, and document.getElementById().value gets data from a text field. document.getElementById() always refers to a single HTML element because each id="..." attribute has a unique name in one page.

In contrast, document.getElementsByTagName() refers to multiple HTML elements, where a tag name should be specified in the parentheses. Since there may be a lot of elements of the same tag name in one page, document.getElementsByTagName() refers to all of them. We usually store them into a variable as an array, and manipulate one of them with some operation such as innerHTML.

Exercise 11-4(☆)
  1. Open SFC-SFS Login Page with a browser.
  2. Display the source of the page, and look for li elements.
  3. Execute the following with console. Do you see the corresponding parts in the page?
    • var x = document.getElementsByTagName('li');
    • x[0].innerHTML
    • x[1].innerHTML
    • x[4].innerHTML
  4. The number of li elements in the page is equal to the number of elements in the array. Execute x.length with console where length is an operation to get the number of elements in the array.
  5. Open scratchpad, and execute the following in it. What happens to the page, and why?
  6. We can also manipulate input elements in the same way. Execute the following in scratchpad.

In fact, this page has 4 input elements. The fourth element has an attribute type="hidden", which is not shown on screen. The role of hidden input elements is to hold data that will be sent to a web server. To understand this, you must learn about communication between a web browser and a web server, which is covered by FUNDAMENTALS OF INFORMATION TECHNOLOGY 2.

Radio Button

Radio buttons are used for an input where we choose one among several alternatives.

  • To create a radio button, write an input element with an attribute type="radio".
  • Write a different input element for each alternative.
  • We need to specify which input elements make a group in which we can choose one. So, elements with tha same value for the name attribute make a group. For example, suppose we have alternatives ‘Policy Management’, ‘Environment and Information Studies’, ‘1st’, ‘2nd’, ‘3rd’ and ‘4th’, then we will give some value for the name attribute of ‘Policy Management’ and ‘Environment and Information Studies’, and another value for the name attribute of ‘1st’, ‘2nd’, ‘3rd’ and ‘4th’.

In a JavaScript program, in order to find which radio button is chosen, we first need to get radio buttons in the page. getElementByID can get only one button, and getElementsByTagName will get other input elements in addition to radio buttons. getElementsByName (where a value of the name attribute is specified in the parentheses) is used to get radio buttons in some group.

Exercise 11-5(☆☆☆)
  1. Make ex11-5.html and fill in the following.
  2. Display the file with a browser, and exexute the following with console.
    • var x = document.getElementsByName('faculty');
    • x[0]
    • x[0].value
    • x[1]
    • x[1].value
  3. The value of RadioButton.checked (true or false) indicates whether the button is chosen or not. First execute x[0].checked with console when no buttons are chosen, and then execute it again after choosing ‘Policy Management’ in the page.
  4. true or false can be used in if statement. First execute the following with console after choosing ‘Policy Management’ in the page, and then execute them again after choosing ‘Environment and Information Studies’.
    • var f = 'Unknown';
    • if (x[0].checked) { f = x[0].value; }
    • alert(f);
  5. Make ex11-5.js and fill in the following. Choose ‘Environment and Information Studies’ and click the button ‘Click here’. Explain the operation of the program.
  6. Rewrite the program so that the grade is displayed as well as the faculty.
Points to Check
  • What is an array?
  • What does x[0] mean?
  • What is the difference among getElementByID, getElementsByTagName, getElementsByName?