No.11 Array

Array

What is an array?

When we have a set of data of a single type, it is more convenient to number each data than naming them one by one. An array can be used to store multiple values (called elements of the array) in a single variable. In order refer to a specific element in an array, it is required to refer to its own index number.

Exercise 11-1(☆)

Execute the following with console.

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

Square brackets “[ ]” are used in the following two manners.

  • To specify an array as a whole – a set of data is written inside a pair of square brackets using commas as separators. The first line of Exercise 11-1 is declaring an array that consists of three strings 'Alice', 'Bob', and 'Carol'.
  • To specify an element of an array, we use an expression like x[0] where variable x is an array and the number 0 inside the bracket is the index of the element. Note that the index of the first element is 0. Therefore, x[0] refers to 'Alice'.

Assignments also have two forms.

  • The first line of Exercise 11-1 stores the entire data into a variable x.
  • In the fifth line of Exercise 11-1, x[2] = 'Charlie' replaces 'Carol' (an element of index 2) to 'Charlie'. In this case, the index has to be referred to specify a particular element inside the array.

Iteration and Array

Arrays are useful because a number of data can be processed in turn, by setting the index as a variable and changing its value using a loop.

Let’s make a calendar as a practice. Dates can be easily modified using increments, but days of week are difficult as they are strings. Therefore, an array can be used to store the days (“Sun”, “Mon”, “Tue”, …) so that we can use the index 0, 1, 2, … instead of the strings directly.

Exercise 11-2(☆☆☆)
  1. Similar to Exercise 09-5, we will create items (li elements) with “Date 1”, “Date 2”, “Date 3”, … in a list (ul elements). Create ex11-2.html and ex11-2.js and fill in the following code.
  2. How does the diagram below correspond to the code above? How does the value of the variable x change as it loops?
  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. Modify ex11-2.js to print “Date 1 (Mon)”, “Date 2 (Tue)”, “Date 3 (Wed)”. What happens after “Date 7”?
  5. To make it work you can write all 31 elements, 'Sun', 'Mon', 'Tue', ... inside one array. Alternatively, 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 using a % operator.

Let’s make the calendar more practical.

Exercise 11-3(☆☆☆☆☆)
  1. Create a new text field for “What month”. Corresponding to the input, 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. (Click here for a sample, but some of its functions are beyond the scope of this course…)

Manipulating Multiple HTML Elements

document.getElementById() is used for specifying a single 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 holds a unique name.

In contrast, document.getElementsByTagName() can refer to multiple HTML elements, where the tag name should be indicated in the parentheses. Since there may be multiple elements using the same tag name, document.getElementsByTagName() can be used when it is required to refer 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 in console to understand how document.getElementsByTagName() works.
    • 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 in console – length is a property that returns the number of elements in an array.
  5. Open scratchpad from the Firefox browser, and execute the following program 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 useful when representing a selection of one item from a list of items.

  • An input element with an attribute type="radio" creates a radio button.
  • Each item in the list will require an input element.
  • The name attribute inside each element groups the radio buttons. For example, suppose we have items such as ‘Policy Management’, ‘Environment and Information Studies’, ‘1st grade’, ‘2nd grade’, ‘3rd grade’ and ‘4th grade’. In order to distinguish those items into two different groups, it is essential to keep the values of the name attributes of ‘Policy Management’ and ‘Environment and Information Studies’ the same, and ‘1st grade’, ‘2nd grade’, ‘3rd grade’ and ‘4th grade’ the same.

In JavaScript, it is required to get the radio buttons in order to check the selected radio button. getElementByID gets only one button and getElementsByTagName will get all input elements that are not radio buttons. Instead, getElementsByName (where the value of the a name attribute is specified in the parentheses) is used to get a group of radio buttons.

Exercise 11-5(☆☆☆)
  1. Create ex11-5.html and fill in the following.

  2. Display the file with a browser, and execute the following in 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 has been selected or not. First execute x[0].checked in console when none of them are selected, and then execute it again after selecting ‘Policy Management’.
  4. true or false can be used in if statement. Execute the following program in console after selecting ‘Policy Management’, 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. Create ex11-5.js and fill in the following code. Choose ‘Environment and Information Studies’ and click the button ‘Click here’. Explain the operation of the program.
  6. Rewrite the program so that the faculty is displayed with the student year(1st, 2nd, 3rd or 4th year), e.g., “PM 1st”.
Points to Check
  • What is an array?
  • What does x[0] mean?
  • What is the difference among getElementByID, getElementsByTagName, getElementsByName?