SH1804

Different Ways to Combine Arrays

Arrays

Objectives:
At the end of the exercise, the students should be able to:

 Write simple programming output in JS that incorporates arrays and other JS programming
concepts and/or techniques.

Materials:

 Flash drive
 Desktop computer
 Basic text editor application (Notepad, Notepad++, or equivalent)
 Web browser (Chrome, Firefox, or equivalent)
 Internet connection (if applicable)

Procedures:

Activity 1 Creating an Internal JS Script

1. Open your basic text editing program and write a simple HTML document containing a
<SCRIPT> tag pair. This will serve as the code body for internal JS script.

2. Save your program as LabExer6-XXX.html (replace XXX with your initials, for example
LabExer6-ABC) in order for the file to be recognized as an HTML document. Give special
attention to the file extension (.html).
3. Create a copy of this file for use on the succeeding activities. When you’re finished, have
your instructor check your copies before you proceed to the next activity.

06 Laboratory Exercise 1 *Property of STI

Page 1 of 3
 SH1804

Activity 2 The toString() Method

1. Using a copy of the HTML file from the previous activity, declare within the
<SCRIPT> tag pair an array named myColor. You may declare as many string
elements as you like.

For example:

<SCRIPT>
myColor = ["Red", "Green", "White", "Black"];
</SCRIPT>

2. After the array has been declared, write a document.write() method containing the
myColor array with the toString() method as its object method:

<SCRIPT>
myColor = ["Red", "Green", "White", "Black"];
document.write(myColor.toString() + "<br>");
</SCRIPT>

The toString() method will concatenate all elements in an array. This will allow the
document.write() method to display the entire array due to its elements being converted
into a single string.

3. Have your instructor check your work for this activity. You may save a copy of this
activity for your own reference and study. The output for this activity is also important
for the next activity, so DO NOT proceed with the next activity without having this
activity checked. Skipping this activity may result in getting fewer points for the
exercise.

Activity 3 The join() Method

1. Using the HTML file from the previous activity, write another document.write()
method containing the myColor array with the join() method as its object method.

The completed code block for the script should look like this:

<SCRIPT>
myColor = ["Red", "Green", "White", "Black"];
document.write(myColor.toString() + "<br>");
document.write(myColor.join() + "<br>");
</SCRIPT>

Notice the HTML line break tags at the end of each write method; without them, the
displayed output will not be moved to the next line.

The join() method works in a similar manner to the toString() method, except you can
specify the symbol that can be used for the separators.

06 Laboratory Exercise 1 *Property of STI

Page 2 of 3
 SH1804

2. Demonstrate the other use for the join() method by copying the second
document.write() method containing the join() method, but adding a symbol
separator as its argument:

<SCRIPT>
myColor = ["Red", "Green", "White", "Black"];
document.write(myColor.toString() + "<br>");
document.write(myColor.join() + "<br>");
document.write(myColor.join('+') + "<br>");
</SCRIPT>

JS will use the separator instead of the usual commas to separate each array element
displayed.

4. Open the HTML file for this activity and have your instructor check your work. You
may save a copy of this activity for your own reference and study.

06 Laboratory Exercise 1 *Property of STI

Page 3 of 3