Getting Started with JavaScript

Overview

This assignment gets you started with the third language that this course covers: JavaScript. The focus this week is on working with an array and a loop to insert data into a new page on your site. Upcoming assignments will deal with data entered by the user and information retrieved from the Internet, but the data for this week will be static.

Preparation

It is important keep the JavaScript in separate external .js files. While it is possible to put JavaScript directly in an HTML file, doing so often leads to maintainability problems.

• On your desktop (or other location that you can find easily), create an empty folder named IT3240_Week_6. Copy your files from the Week 5 assignment (including images and the CSS file). Open this folder in Visual Studio Code.

Add a New Page

1. Add a fourth page to your website. The name and content of the page are up to you, but it needs to be a page where you will want to display a list of some sort (using either an ordered list <ol>...</ol> or an unordered list <ul>...</ul>. 
2. Add the HTML for the basic layout of your page (including the link to your .css file). Add other relevant elements such as images and text (besides the contents of the list). Be sure to document the HTML with comments.
3. Add opening and closing paragraph tags (<p> and <p>). Give the opening paragraph tag the id "list" so that the empty paragraph looks like this:

                  <p id="list"></p>

Adding the JavaScript

1. On the line before the closing </body> tag, add a script tag that looks like this (spelling and capitalization of the file name are important):              

                   <script src="week6.js"></script>

2. Add a file to your website named week6.js (again, the spelling and capitalization are important and must match the file name entered in the previous step). Keep in mind that all JavaScript should be kept in separate .js files and not inserted in the HTML itself). 

3. At the top of the JavaScript file, declare an array of strings. The values in the array should be relevant to the page on your site where the list will be displayed, so replace the colors in the following line with fitting strings for your page. 

                  let colors=["red", "green", "blue", "black", "white"];

4. In the JavaScript file, create a function with a meaningful name that uses a for loop to go through the array and process each item. The function should build a string through concatenation to join the HTML tags and literal text to create the code for the list and assign that string to a variable. Be sure to name the variable to indicate what its content is.

5. Use a statement like the following to insert the code for the list into the paragraph with the id list. Replace listCode with the name of the variable you have used in your JavaScript:

                 document.getElementById("list").innerHTML = listCode;

6. To trigger the function that builds the string, add this event handling code after the end of the function defined above. Change listColors() to match the name of your function in spelling and capitalization:

                 window.onload=function(){
listColors();  // Change this to the name of your function
                     }

7. Add at least three console.log() statements to your code to gain insights into the flow of data and the behavior of your function.

8. You are welcome to use the AI of your choice if you run into issues or have questions about the code. Do not copy and paste code or allow the AI to modify your code. Based on what you learn from the AI, type in any needed changes. Add JavaScript comments to document what you learn from the AI.

9. Document the JavaScript code with comments to identify key parts of the code.

Styling the List

10. Use CSS to style the list so that it fits into your page and has something to make it distinctively yours. You've already used CSS to style an unordered list into a navigation bar, but for this assignment you should style the list as a list. You are welcome to consult an AI for ideas and approaches to using CSS with a list, but you must not copy and paste code or allow the AI to modify your code directly. Type the code yourself.

Verifying Your Work

11. Check your new page in two browsers. In a Word document, state which browsers you tested the pages in.

12. Go to the Nu HTML Checker tool validator.nu to verify the HTML for the new page. Follow the procedure you've been using for checking the HTML. When the page passes, get a screenshot of the successful validation and put it in the Word document.

13. Validate the CSS file using CSS Validation Service as you have done in previous assignments. When the CSS passes the check, get a screenshot of the successful validation and put it in the Word document.

Submission Requirements

Add the Word document to the folder containing the four .html files, the .css file, and the image files.

• Compress the folder and submit the zip file as an attachment to your submission.

Competencies Measured

By successfully completing this assignment, you will demonstrate your proficiency in the following course competencies and rubric criteria:

• Competency 1: Author well-structured, standards-compliant HTML.
  • Add a 4th page to the website with starting and closing tags for an ordered list or an unordered list styled using CSS.
  • Test the page in 2 browsers and correct any issues encountered.
  • Validate the HTML and CSS.
• Competency 5: Create interactive web page behaviors using JavaScript.
  • Add a JavaScript file to the website and add a script tag to the 4th page for it.
  • Declare an array in JavaScript and populate it.
  • Use a JavaScript event handler to display the items in the list on the HTML page.