A Web page without JavaScript is static. That is, the displayed content does not change once the browser loads the Web page. By using JavaScript, Web pages can be dynamic and interactive and can respond to user actions, such as mouse clicks and keystrokes.

In this Application, you will create a dynamic Web page that responds to an event, specifically, the user clicking a check box. Your event handler will change the content that is displayed in one section of the page, depending on whether the check box is selected or not.

use the JavaScript DHTML Playground to write a JavaScript function that performs the following tasks:

 
 When the user selects the check box "Check me," read the selected item from the select box "Wonder" and display its value in the page footer

· When the user clears the check box "Check me," display the selected item from the select box "Category"

· Assign the JavaScript function as the onclick event handler for the check box "Check me"

Hint: Each select box has a selectedIndex property that gives the index of the item selected in that box. Each select box also has an options property, which is an array of the option items displayed in that box. The text property of the option item provides the text the user sees in the select box. For example, if the Wonder select box has selectedIndex = 2, the following statement will obtain the text for the second element:

wonder.options[2].text

Test the JavaScript code by clicking the Run button. Submit a Microsoft Word document that contains your JavaScript code. Include screenshots that show the output, both when the check box "Check me" is selected and when it is cleared.