OBJECTIVE

• Use methods of the Window object.  

DISCUSSION

Window Object 

• Includes many properties (use the property viewer) and methods
• window.open() opens new window
• window.close() closes a window
• window.print() prints a window 

window.open("url", "name", "parameters")

• url is the page to open
• name can be used to reference the window 
• parameters can be used to control the features of the window
  • width = ###
  • height = ###
  • toolbar = yes or no
  • status = yes or no
  • resizable = yes or no
  • top = ###
  • left = ###
  • location = yes or no
  • fullscreen = yes or no (A fullscreen window w/o title, status, or scrollbars)
• Example: using the following statement:

winX = window.open("myfile.htm", "myfile", "width = 300, height = 200, left = 50, top = 100, toolbar = no") 

  

window.close() 

• Can close window using self.close()
• Can close other window by using assigned name. Example for above myfile example:

winX.close() 

Writing to a New Window

winX = window.open("myfile.htm", "myfile", "width = 300, height = 200, left = 50, top = 100, toolbar = no")

winX.document.write("Text written...") 

  

window.event

• Many event properties
• Visit Property Viewer in Lesson 6.2 or Purvish JavaScript Explorer
• Example to determine where a user clicked:  

EXERCISES

1.  List 5 window.event properties and what they do.

2. Create a page with 5 buttons.  When the user clicks each button a window should open.  Make sure that each window has different features.

3. Add a button to the window that is opened in #2 that permits the user to close the window.

4. Add a button to your main page that closes all 5 windows.

5.  Create a page that enables the user to determine the distance between any two points on the page. The user should be able to determine the distance between two points by holding the mouse down on one point, moving the mouse to a second point, and then releasing the mouse.  The distance should be displayed in an alert.  You should add a div with known dimensions so that the user can verify the results.  The distance between two points is determined using: r = sqrt((dx*dx) + (dy*dy)) where dx = x2 - x1 and dy = y2 - y1.

6.  Create a page that sets the size of the font to the x location of the mouse as the user moves the mouse.

LINKS AND HELP