1.17 Skill builder: Tae Kwon Do

Storing sequential data

Let's say that you need to store some sequential data, say Isaac Newton's colours of the rainbow. From what you know already, you can store the colours like this:

	// INIT: initialize colour variables
			
	var colour1	="Red";				
	var colour2	="Orange";				
	var colour3	="Yellow";				
	var colour4	="Green";				
	var colour5	="Blue";	// About indigo: Newton thought that seven was a more "natural" number, 
	var colour6	="Indigo";	// like the number of non-stellar objects in the solar system (as he knew it then). 
	var colour7	="Violet";	// Really, there are thousands of colours. Indigo is rarely used.
			

This works, but it is a little cumbersome. And what if you want to use the colours in a loop? There are ways to do it, but they are graceless.

Introducing arrays

Arrays are a way of storing data in sequence. Our colours, for example, could be handled like this instead:

	// INIT: initialize colour array
	var colour	=[]; // declare this variable as an array. Note the '[]'
	
	colour[0]	="Red";		// Note that the first array is in cell 0		
	colour[1]	="Orange";				
	colour[2]	="Yellow";				
	colour[3]	="Green";				
	colour[4]	="Blue";	
	colour[5]	="Indigo";	
	colour[6]	="Violet";	
			

Or, it could be shown even simpler:

	// INIT: initialize colour array
	
	var colour	=["Red", "Orange", "Yellow", "Green", "Blue", "Indigo", "Violet"];
			

Think of the colour variable as having seven cells that can be accessed individually, like this:

The index of an array is the number that points at the specific data cell in the array.

Earning your black belt in arrays

I started my teaching career teaching English in South Korea. The martial art of Tae Kwon Do originated in South Korea, and it is more popular that It was terribly humbling to be teaching 10 year old students with black belts.

Let's say that I wanted to be able to generate a table about the belt levels in Tae Kwon Do:

Initializing the belt info into arrays

The first thing you need to do is get the table data into arrays. In today's lesson, you are going to initialize your belt information three different ways in order to expand your skills:

Assigning arrays directly by cell index

For the belt rank names, we are going to assign each piece of data directly by specifying the index of the array cell, like so:

Assigning arrays with a list

For the colour descriptions of the belt, we are are going to put all the data entries in a list separated by commas and enclosed by square brackets ([]).

Note that the list items are on different lines: this is not necessary, but it makes the code easier to read and edit.

Assigning arrays by splitting a string

Sometimes you get bored typing in a million quotation marks and commas.

The .split() function can make you a happy programmer! For example:

var colour ="Red,Orange,Yellow,Green,Blue,Indigo,Violet".split(",");
...will create the same thing as the colour array at the beginning of this lesson.

var name ="Joséphine|Eléonore|Marie|Pauline|de Galard|de Brassacede|Béarn,|princesse de Broglie".split("|");
...will create will split the all the princess de Broglie's names into list, using "|" as a divider.

We can use .split() strings to assign the colour names to the illustrations in the chart: one array for the belt, .split() on commas, and one array for the belt, which is .split() on the space character " ". If there is no stripe, we will use a stripe of the same colour as the belt:

Array friendly HTML code

If you want to use javascript arrays to be able to act on your HTML code, you have to make sure that your HTML has id='s that are in sequence, like this:

Notice how the id='s all start with the same thing - beltID.

Also notice how there is an id= number for each index of the data arrays, starting with index zero.

This block of HTML is just begging have the table cell (<td>) information inserted inside the rows (<tr>). So let's do that!

Processing the data into a new data into the outputCells

In this example, mainProcedure() triggers two further subroutines:

1. One function, createOutputCellStrings(), to process the array data and compose the table rows, storing it inside a new array, outputCells.
2. And another function, insertOutputCellStrings(), to insert the outputCells inside the table rows with the correct id='s.

createOutputCellStrings() sets up a loop that goes from 0→18.

Inside that loop, it creates HTML code to create table cells (<td>) for:

1. The name of the belt level,
2. The description of the belt,
3. And an illustration of the belt colours and stripes, using color: and background-color: style codes and ▬ to create "▬" symbols for the stripe

Then it combines the three sets of cell codes and stores it in outputCells.

Outputting the outputCells into the table rows

insertOutputCellStrings() sets up a loop that goes from 0→18.

Inside the loop, it inserts the outputCells HTML data inside the table row with the id= of the correct index number.

Show me an example!

Try here!

Saving your work

Download the template and rename it to your last name, such as "1.17S-TaeKwonDo-LastName.html".

The assignment

In this assignment you modify the template to initialize arrays, and use array data to create a table of information.

The template that you have been given is full of bugs and typos. I have specially crafted the bugs and typos so that they will draw attention to what you have learned about arrays. Some of the bugs will not show up as errors when you run the code.

Use the console log to troubleshoot the code, make changes, and then hand in normally.