Northcentral Technical College Introduction To Programming
10-152-310
Introduction to Programming with JavaScript NTC 10-152-310

Learning Plan 6 6.1 Lab 1

# 6.1 Lab 1

#### File: /Learning Plan 6/6.1lab1.html

### Student

- Name:
- Section:
- Email:

### Lab Steps

1. Open this file in Firefox and Microsoft Visual Studio.
2. Add your name, section, and email
3. Open the file /Learning Plan 6/jsFiles/6.1lab1.js in Microsoft Visual Studio.
4. Open the HTML file for this lab (`/Learning Plan 6/6.1lab1.html`) and find the spot where there is an HTML comment that says, "Your HTML code after this!"
5. Add some HTML below the comment but above the `<script>` tag.
   1. Add an HTML table with an id attribute.
   2. Add a header row with a couple of `<th>` tags.
   3. Don't forget the `</table>`!
   4. You won't need to add any rows here, we'll be doing that with JavaScript.
6. Now switch to the JavaScript file, `/Learning Plan 6/jsFiles/6.1lab1.js`.
7. Remove the `document.write()` call from the function.
8. Add the following to the function.
   1. A variable that will hold the table element.
   2. A variable that will hold some rows to add to the table.
9. Get the table element and assign it to the variable. Use the `getElementById()` function for this.
10. Build up the string variable with some HTML rows and cells. You will need to include the tags and the data in the the strings. Make 4 or five rows.
11. Append the string variable with the rows to the `innerHTML` attribute of the table. (How do you append to an existing string?)
12. Refresh the page.

### Your Output: