Work Hours
Everyday: 北京时间8:00 - 23:59
SYSC 4504: Fundamentals of Web Development Programming Assignment 2: JavaScript and DOM Due: November 3, noon Assignment Description Assignment 2 is based on another of the running end-of-chapter projects, the CRM Admin case study. An initial set of files is provided as ZIP archive on Brightspace, containing assignment2.html and a number of subdirectories with (hopefully) obvious names and purpose. When you open assignment2.html in a web browser, it should look as follows (here using Microsoft Edge): In this assignment, you need to write JavaScript code that recursively iterates the DOM and visually identifies the tag names of all elements on the page. More specifically: 1. Examine assignment2.html in the browser and an editor. You will add event handlers to the two buttons at the bottom of the page. You will not need to make any changes to the supplied markup or CSS. All of your event handlers must execute only after the page has loaded. 2. The handler for the Highlight Nodes button should navigate every element in the DOM, and for each element within the body, determine whether it is an element node (nodeType == 1) element. 3. If it is an element node, add a new child node to it. This child node should be a element with class=hoverNode as attribute. Its innerText should be equal to its parent’s tag name. 4. Add an event listener for this child node so that when the user clicks on the new span, an alert popup displays the following information about its parent node: id, tag name, class name, and innerHTML. 5. The Highlight Nodes button should hide when the user clicks on it. The Hide Highlight button should then be displayed. When the page is first displayed, the Hide Highlight button should be hidden. 6. When the user clicks the Hide Highlight button, all the elements with class=hoverNode should be removed. The Hide Highlight button should then be hidden and the Highlight Node button should be displayed. So once you implemented your solution, you should be able to do/see the following. Initially, when loaded, the page will look as follows: After clicking on Highlight Nodes, the page will look as follows: Once the user clicks on the BUTTON element (next to Hide Highlight), the following alert box will pop up: Once the user clicks on Hide Highlight, we are back to the page we saw when assignment2.html was first loaded. Submission Requirements Submit your assignment using Brightspace, under Assignment 2 Submission for the course. You only need to submit your assignment2.js file, as this is the only file where you made changes. The TAs will combine this file with the remaining files given to you, using the directory structure in the initial ZIP file, and test your submission. Marks will be based on: • Completeness of your submission • Correct solution to the problem, including the proper use of recursion • Adhering to the submission requirements The due date is based on the time of the Brightspace server and will be strictly enforced. If you are concerned about missing the deadline: multiple submissions are allowed. So you can always submit a (partial) solution early, and resubmit an improved solution later. This way, you will reduce the risk of running late, for whatever reason (slow computers/networks, unsynchronized clocks, failure of the Internet connection at home, etc.).
