Long description

The H T M L code that consists of seven lines of code is shown at the top right of the figure. Line 1: Open angle bracket u l i d equals open double quotes menu close double quotes close angle bracket. Line 2: Open angle bracket l i close angle bracket Home open angle bracket forward slash l i close angle bracket. Line 3: Open angle bracket l i close angle bracket About open angle bracket forward slash l i close angle bracket. Line 4: Open angle bracket l i close angle bracket Products open angle bracket forward slash l i close angle bracket. Line 5: Open angle bracket l i close angle bracket Orders open angle bracket forward slash l i close angle bracket. Line 6: Open angle bracket l i close angle bracket Contact open angle bracket forward slash l i close angle bracket. Line 7: Open angle bracket forward slash u l close angle bracket. The output of the code is at the left of the code. The output shows a small window with the list: Home, About, Products, Orders, and Contact placed one below the other. An arrow that points from the code to the left indicates that the contents in the small window is the output of the code.

The first set of JavaScript is placed below the H T M L code and consists of 11 lines of code. Line 1: const menu equals document dot querySelectorAll open parenthesis open double quotes hashtag menu l i close double quotes close parenthesis semicolon. Line 2: StartCommand for EndCommand open parenthesis StartCommand let EndCommand item of menu close parenthesis open curly brace. Line 3: item dot addEventListener open parenthesis open double quotes click close double quotes comma menuHandler close parenthesis semicolon. Line 4: Close curly brace. Line 5: function menuHandler open parenthesis e close parenthesis open curly brace. An arrow labeled By receiving the event object as a parameter and using it to reference the clicked item, the menuHandler open parenthesis close parenthesis function will work no matter where it is located points from menuHandler in line 3 to menuHandler open parenthesis e close parenthesis in line 5. Line 6: const x equals e dot client X semicolon. Line 7: const y equals e dot client Y semicolon. Lines 6 and 7 are labeled Click events include the on-screen pixel location of the mouse cursor. Line 8: displayArrow open parenthesis x comma y close parenthesis semicolon. Line 9: e dot target dot classList dot toggle open parenthesis open double quotes selected close double quotes close parenthesis semicolon. Line 10: performMenuAction open parenthesis e dot target dot inner H T M L close parenthesis semicolon. e dot target in line 10 is labeled object in this case is referencing the clicked open angle bracket l i close angle bracket item. Line 11: Close curly brace. Line 12: The e dot target.

The second set of JavaScript is placed below set 1 and consists of six lines of code. Line 1: StartCommand for EndCommand open parenthesis StartCommand let EndCommand item of menu close parenthesis open curly brace. Line 2: item dot addEventListener open parenthesis open double quotes click close double quotes comma function open parenthesis close parenthesis open curly brace. Line 3: item dot classList dot toggle open parenthesis open double quotes selected close double quotes close parenthesis semicolon. The keyword item in line 3 is labeled This alternative also works, since item is in lexical scope. Line 4: performMenuAction open parenthesis item dot innerHTML close parenthesis semicolon. Line 5: Close curly brace close parenthesis semicolon. Line 6: Close curly brace.

The third set of JavaScript is placed at the right of set 2 and consists of six lines of code. Line 1: StartCommand for EndCommand open parenthesis StartCommand let EndCommand item of menu close parenthesis open curly brace. Line 2: item dot addEventListener open parenthesis open double quotes click close double quotes comma function open parenthesis close parenthesis open curly brace. Line 3: this dot classList dot toggle open parenthesis open double quotes selected close double quotes close parenthesis semicolon. The keyword this in line 3 is labeled This alternative also works, since this keyword here refers to item. Line 4: performMenuAction open parenthesis this dot innerHTML close parenthesis semicolon. Line 5: Close curly brace close parenthesis semicolon. Line 6: Close curly brace.

The fourth set of JavaScript is placed below set 2 and consists of nine lines of code. Line 1: StartCommand for EndCommand open parenthesis StartCommand let EndCommand item of menu close parenthesis open curly brace. Line 2: item dot addEventListener open parenthesis open double quotes click close double quotes comma function open parenthesis close parenthesis open curly brace. Line 3: menuHandler open parenthesis close parenthesis semicolon. Line 4: Close curly brace close parenthesis semicolon. Line 5: Close curly brace. Line 6: function menuHandler open parenthesis close parenthesis open curly brace. Line 7: item dot classList dot toggle open parenthesis open double quotes selected close double quotes close parenthesis semicolon. Line 8: performMenuAction open parenthesis item dot innerHTML close parenthesis semicolon. The keyword item in line 8 is labeled This alternative doesn’t work, since item is no longer in lexical scope. Line 9: Close curly brace.

The fifth set of JavaScript is placed at the right of set 4 and consists of nine lines of code. Line 1: StartCommand for EndCommand open parenthesis StartCommand let EndCommand item of menu close parenthesis open curly brace. Line 2: item dot addEventListener open parenthesis open double quotes click close double quotes comma function open parenthesis close parenthesis open curly brace. Line 3: menuHandler open parenthesis close parenthesis semicolon. Line 4: Close curly brace close parenthesis semicolon. Line 5: Close curly brace. Line 6: function menuHandler open parenthesis close parenthesis open curly brace. Line 7: this dot classList dot toggle open parenthesis open double quotes selected close double quotes close parenthesis semicolon. Line 8: performMenuAction open parenthesis this dot innerHTML close parenthesis semicolon. The keyword this in line 8 is labeled This alternative doesn’t work, since this keyword here refers to global scope. Line 9: Close curly brace.

The sixth set of JavaScript is placed below set 4 and consists of seven lines of code. Line 1: StartCommand for EndCommand open parenthesis StartCommand let EndCommand item of menu close parenthesis open curly brace. Line 2: item dot addEventListener open parenthesis open double quotes click close double quotes comma menuHandler close parenthesis semicolon. Line 3: Close curly brace. Line 4: function menuHandler open parenthesis close parenthesis open curly brace. Line 5: item dot classList dot toggle open parenthesis open double quotes selected close double quotes close parenthesis semicolon. Line 6: performMenuAction open parenthesis item dot innerHTML close parenthesis semicolon. The keyword item in line 6 is labeled This alternative doesn’t work, since item is no longer in lexical scope. Line 7: Close curly brace.

The seventh set of JavaScript is placed at the right of set 6 and consists of seven lines of code. Line 1: StartCommand for EndCommand open parenthesis StartCommand let EndCommand item of menu close parenthesis open curly brace. Line 2: item dot addEventListener open parenthesis open double quotes click close double quotes comma menuHandler close parenthesis semicolon. Line 3: Close curly brace. Line 4: function menuHandler open parenthesis close parenthesis open curly brace. Line 5: this dot classList dot toggle open parenthesis open double quotes selected close double quotes close parenthesis semicolon. Line 6: performMenuAction open parenthesis this dot innerHTML close parenthesis semicolon. The keyword this in line 6 is labeled This alternative works, since the this keyword here refers to item. Line 7: Close curly brace.