Lab 15: JavaScript window and document Objects

In this lab, you will work with the JavaScript window and document objects.

Objectives:

• To work with the window and document objects

Part 1: The window Object

Steps:

1. Use File - Close All to close all open editing windows.

2. In RAD, create a new Dynamic Web Project named Lab15Web associated with Lab15EAR.

3. In the WebContent folder, create a new HTML File, countdown.html, that contains a form with a submit button and a <div> or <p>. When the user clicks the button:

   1. Update the div or p to display an initial count (say 5).
   2. Start a timer that elapses every second.
   3. Disable the button.

   When the timer fires:

   1. Decrement the count.
   2. Update div or p with new count.
   3. If count is zero, stop the timer, re-enable the button and reset the count back to its initial value.

   Hint: To enable/disable the button, set its disabled property to true or false:

   document.getElementById("submit").disabled = true;        
           

4. Create a new HTML File, myurl.html with a JavaScript that displays the page's URL in a <div> or <p>.

   Hint: Put your code inside of a function that runs during the window.onload event.

5. Create a new HTML File, target.html. Put something interesting within its body.

   Create another HTML File, navigate.html. The file should contain a form with a submit button. When the user clicks the submit button, change the browser's URL to target.html.

6. Create a new HTML file, showbrowserinfo.html, that writes the appName, appVersion, userAgent, platform, availWidth and availHeight strings to separate div elements on the page.

Part 2: More Practice

Steps:

1. Create a new HTML file, showsecondary.html with a form. When the user submits the form, open target.html in another browser window using all defaults.

   After you get that to work, modify the code so opens target.html in yet another window with width="300" and height="200".

2. Create a new HTML File, testdom.html. Here are the specs:

   1. In the body, write a <p> element that contains strong, emphasized, and both strong and emphasized text using the <strong> and <em> tags.

   2. Write a form with two input widgets of type button (not submit). Attach onclick handlers to each that invoke different JavaScript functions.

   3. Write two <div> elements with unique IDs to which your scripts will write.

   4. Write the first Javascript function referenced by one of the onclick handlers:

      • Display an alert with the <p> element's innerHTML.
      • Set the first <div> element's innerHTML to "Hello, world" with "world" strong (use the <strong> tag).

   5. Write the second Javascript function referenced by the other onclick handler:

      • Display an alert with the <p> element's innerText.
      • Set the second <div> element's innerText to "Hello, world" with "world" in strong.

   6. Run and test and ensure that you understand the behavior and the difference between innerHTML and innerText.

3. Create a new HTML file, dynamic-add-delete.html with a form that has two buttons (not submit buttons): one labeled "Add", the other "Remove". The page should also have an empty unordered list using the <ul> element.

   When the user clicks the "Add" button, add a new <li> element with text of your choice to the <ul>.

   When the user clicks the "Remove" button, remove the last <li>.

   For extra credit, the list items should contain a number, e.g. "list item #1", "list item #2" and that number should reflect the item's position in the list.

4. Create a new HTML page, rentcar.html. This page should have a form with the following:

   • Text input widget with label "Renting city:".
   • Checkbox with label "Return to a different location".
   • Submit button (doesn't do anything at this point).

   Write JavaScript so that if the user puts a checkmark in the different-location checkbox, the form also displays a text input widget with label "Return city:". If the user unchecks the box, remove the new text input and label.