Resources

• //INIT: Creating arrays


• //PROCESS: Using arrays
• //PROCESS: for loops


• //PROCESS: Using arrays of objects to create a table


• //OUTPUT: Adding elements directly

Saving your work

Use Save as... to save the empty template as "3.09H-MakeATableWithArraysOfObjects-LastName.html" in your Computer Programming directory.

As well, you might want to use some of Drapak's Finger-Savers® in order to help save you some time in typing up repetitive code.

The assignment

Use arrays and for...in loops to create a table. You may choose your own level of difficulty. Solve more problems to get a higher mark

Problem Solving

Remember that a table is composed of the following code:

<table>
	<thead>
		<tr>
			<th>Heading 1</th>
			<th>Heading 2</th>
			<th>Heading 3</th>
		</tr>
	</thead>
	<tbody id="outputID">
	
		<tr>
			<td>item 1a</td>
			<td>item 2a</td>
			<td>item 3a</td>
		</tr>
		
		<tr>
			<td>item 1b</td>
			<td>item 2b</td>
			<td>item 3b</td>
		</tr>
		
	</tbody>
</table>

...makes this:

Make it your own!

If you create your own table of information it does not have to be as large. Create your own, smaller, arrays of information you can display!

Hints

1. Create a <div> with id="outputId" in the body of your code
2. Create a button that will trigger mainProcedure()
3. Create an output function that will insert a result into outputId
4. Create a process function to create a table
5. 1. Add the <table> and <thead> and <tbody>first
   2. Use for...in loops to create the rows:
   3. Add the <tr>, <th>s and the information
   4. Add the </tbody> and </table>
6. Create a mainProcedure function that will pass multiple arrays to your process function, and then pass the results to your output function

Evaluation

• ___/10 INIT: include ALL of:
  1. link to jQuery in the head of your document
  2. create an array of objects
  3. add a new object to the array inside the square brackets: []
  4. separate your array of objects into it's own function that returns the completed array
  Independent challenge:
  5. push an object onto the end of your array
• ___/10 HTML-CSS: include ALL of:
  inside the CSS <style> block:
  1. create a different font style or weight for the headings and cells
  2. create a different background for the headings and cells
  3. add a border to at least one part of the table
  table components::
  4. create a table with headings <th> inside <thead>
  5. create a table with data cells <td> inside <tbody>
• ___/10 PROCESS: include ALL of:
  1. create a function that accepts an array of objects as arguments/parameters
  2. create a separate function to //PROCESS the table code
  3. use string addition or createElementto create the HTML for the table
  4. use for loops to create a table row for each object in the array
• ___/10 OUTPUT: include ALL FIVE of:
  1. create a separate function to //OUTPUT the table code
  2. make that function accept the table code as a parameter/argument
  3. use innerHTML or appendChild to display the working table using Javascript
  Independent challenges:
  4. output images in your table using your array of objects
  5. animate a graph using your array of objects
• ___/10 STYLE: include ALL of:
  1. honour all previous //STYLE sections
  2. break up functions into separate ones for input, processing, and output
  3. use descriptive comments to identify and describe each function, and each loop:
     //loop through each element of the loop to create the rows