SUMMARY

DISCUSSION

JavaScript is an object-oriented language.  An object is a "container" or "programming construct" that can hold data (properties), perform actions (methods), and respond to events .  We have already learned about events. 

One object in JavaScript is the Window object.  This object has a number of methods.  A method is like a verb; it is in an action that the object can do.  One such method is open .  The open method will open a new window. 

Methods accept parameters.  A parameter is information that the method needs to perform its action.  For example, before opening a new window, the open method needs to know information such as what web page to put in the window and how big the window should be.  The open method is flexible and can accept just a few parameters or many parameters.  The format for the open method and the parameters are listed below:

• winName can be used to reference the window from the existing page
• url is the page to open
• name  is the name of the window 
• features can be used to control the characteristics 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)

As will be demonstrated in the examples, the parameters are optional.

Line 4 demonstrates the most simple use of the open method.  When the <div> is clicked, a new window is opened.  Since no url is passed into the method, the window opens with nothing in it.

In line 5 a filename is passed into the open method so that the web page example5.htm is displayed in the window.  The file example5.htm is in the same folder as this page. 

In lines 6 and 7 a window called winX is opened and the document.write method is used to write the word "hi" to it.  Notice that the onclick event for the <div> in Lines 6 and 7 does two things. First it opens the window and then it writes to it.  When events do more than one action, the actions are separated by a semicolon.

In line 8 the window opened in line 6 is closed when the user clicks on the <div>. 

In lines 9 to 11 a window is opened and a page from a site is displayed.  Some of the window features such as width, height, left, and top are specified. Notice how they are separated by commas.

EXAMPLE - Opening Windows

PRACTICE

1. Modify line 4 so that this page (lesson5.htm) appears in the new window.
2. Modify line 5 so that google opens in the window.
3. Modify line 6 so that the width of the window is 200 and the height is 100.  Hint - since there is no url or name specified, use a pair of empty single quotes to hold their places.
4. Modify line 7 so that the word "hello" is written to the window.
5. Modify lines 10 and 11 so that the status bar and toolbar are displayed.
6. Modify lines 10 and 11 so that the window is resizable.

GAME DEVELOPMENT

1. Create a new .htm page with the word "hello" on it.  Save this page as "game.htm" in the same folder as your home page. This page will be transformed into your game in later lessons.
2. Modify your home page to open a new window when the Start Game <div> is clicked.  Ensure that:

• The game.htm page is displayed in the new window.
• The width of the new window is 600 and the height is 500. 
• The window is not resizable.
• The toolbar is not displayed.
• The status bar is not displayed.