Exercise 10
Popup Windows Using JavaScript
Resources for this exercise:
- See the Course Schedule for due date. Exercises are due before the beginning of class on the due date.
- See the Homework Frequently Asked Questions (FAQ) page for answers to questions about homework exercises.
- See the JavaScript section of the Resources page.
In this exercise you will use a free, online JavaScript popup window generator to write code that you can copy and paste into your Web page that will allow a popup window to appear.
1) Create a new Web page for exercise 10.
2) This page must contain the XHTML 1.0 Strict DocType, as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)
4) This page must display your name.and say "Exercise 10."
5) This page's <title> must indicate that this is your
exercise 10 page, so it should say something like "John Sky's DM160C Exercise
10".
6) This page must contain a relative link to your home page.
7) Go to the Hypergurl online popup window generator at:
http://www.hypergurl.com/newwindow.html
8) Fill out the fields on this page to your liking, and create your popup window code.
9) Follow the directions on this page, and copy the appropriate code into
the <head> section and <body> section
of your exercise 9 page.
Because we are validating to XHTML 1.0 Strict, you can use JavaScript to open a new window in the following ways:
- Using a standard link
- Using a form button
- Using an image as a link
Note that a Strict standard does not allow you to open a new window when a page loads or unloads (the "target" attribute is deprecated); for this you must use JavaScript.
If you are making a popup appear when a page loads or unloads, the generator will instruct you to "Insert the following into the body tag." This code must be inserted directly into the body tag itself (as it is an attribute), and not into the body section of the document. For example:
<body onload="NewWindow('http://teacherjohn.com/','TeacherJohn','200','200','no','center');">
(Note that the "onLoad" attribute must be all lowercase to validate to XHTML, as in "onload".)
10) The generator's code is generally good, but does not conform to XHTML Strict, so you will need to make some changes to the code that it generates:
- In the code that you will paste into the
<head>section, you will need to remove thelanguageattribute. - If you chose to have the window open with a standard link, you will need
to place your anchor tag within a container, such as a
<p>or a<div>. - If you chose to have the window open with a form button, the form tag it writes is missing a required attribute. See the "Required attributes (that are sometimes forgotten)" section of How to Use the W3C HTML and CSS Validators for details on how to fix this.
- If you chose to have the window open with an image as a link, you will
need to
- Place your anchor tag within a container, such as a
<p>or a<div>. - End the
<img>tag by placing a space and a slash at the end of the<img>tag. - Add an alt attribute.
- Remove the border attribute from the
<img>tag, and use CSS to stop a border from displaying (if you don't wish to have the border display).
- Place your anchor tag within a container, such as a
11) Save this page as "exercise10.html".
12) Upload this page to your folder on the server.
13) Test your popup window! We're talking about JavaScript here, so test it in as many browsers as you can. If the popup does not appear, check to see that your browser preferences are not set to block popups!
14) Make sure the HTML on this page validates (using the XHTML 1.0 Strict DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.
15) If you have used any CSS, make sure the CSS used with this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.
16) If there are any errors, fix them, re-upload the page, and validate it again.
17) Make sure your home page has a working link to all your completed exercises, including this exercise, and that the HTML and CSS on your home page validates.
18) Submit the feedback form. To receive credit for this exercise you must submit thi feedback form before it expires. This exercise is due on 5/5/08. Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 05/07/08.