Long description

The browser window has a tab titled Chapter 9 - Project 3. The address bar reads, file colon forward slash forward slash forward slash G colon forward slash web development textbook forward slash second edition forward slash teaching material forward slash instructor resources forward slash end hyphen of hyphen chapter hyphen projects forward slash done forward slash cha.

The browser window is divided into four sections The first section is a horizontal section titled Meeting Details. A textbox labeled Client Name colon with a placeholder value Enter name is at the bottom of the section. A horizontal navigation bar, where the Debugger tab is selected is shown below the first section. The rest of the sections are placed side-by-side below the navigation bar. The second section, which is at the left shows the source file that is running in the browser. The source file reads, chapter 09 project 03 dot j s. A preview of the line of code that is debugging is shown below the source file and reads, 30 for open parenthesis var i equals 0 semicolon I less than firstTier dot length semicolon i increment ellipsis.

The third section shows the complete debugging program that reads as follows. Line 1: removeElementsByClass open parenthesis double open quotes hoverNode close double quotes close parenthesis semicolon at indentation level 1. Line 2: close curly brace close parenthesis semicolon at indentation level 0. Line 3: forward slash forward slash high level function to go through all nodes and build the extra nodes at indentation level 0. Line 4: function showHoverNodes open parenthesis close parenthesis at indentation level 0. Line 5: open curly brace at indentation level 0. Line 6: var rootElement equals document dot documentElement semicolon at indentation level 1. Line 7: var firstTier equals rootElement dot childNodes semicolon at indentation level 1. Line 8: forward slash forward slash firstTier is the NodeList of the direct children of the root element at indentation level 1. Line 9: for open parenthesis var i equals 0 semicolon i less than firstTier dot length semicolon i increment close parenthesis open curly brace at indentation level 1. Line 10: if open parenthesis firstTier open square bracket i close square bracket dot tagName equals open double quotes BODY close double quotes close parenthesis open curly brace at indentation level 2. Line 11: bodyNodes equals firstTier open square bracket i close square bracket dot childNodes semicolon at indentation level 3. Line 12: for open parenthesis var j equals 0 semicolon j less than bodyNodes dot length semicolon j increment close parenthesis open curly brace at indentation level 3. Line 13: highlightRecursive open parenthesis bodyNodes open square bracket j close square bracket close parenthesis semicolon at indentation level 4. Line 9 in the above block of code corresponds to line 30 in the debugging program.

The fourth section shows the list of variables and events used in the debugging program.