Part 1: Opening a New Window Using JavaScript

Use the window.open() method to open up a new window from a web page. It expects 3 parameters:

• A string representing the URL of the page to be displayed in the window
• A string representing the name of the window (omit this part for now)
• A string representing the set of attributes of the window (omit this part for now)

1. Leave it blank, to create a blank window (this will be useful if we want to use document.write on the new window - see below)
   You can do this either by leaving out the parameter (i.e., by not passing any parameters), or by passing in the empty string ("" - 2 double-quotes, right next to each other, with nothing in between)
2. Create a local web page and pass in its name
3. Use else the URL of a common web site such as "http://www.yahoo.com".

window.open() returns a reference to the window object that represents the new window. You can use it to control the new window from the original page. Simply assign the return value of the call to window.open() to a variable inside the script.

Here is an example call:

        var newWin = window.open("dummyPage.html");

The new window should display the contents of the web page passed as the first parameter.

Part 2: Closing a New Window Using JavaScript

Alter your solution to Part 1 by placing a button onto the page. Code the onClick event handler so that is uses the newWin variable to close the new window that is opened when the page is loaded.

Part 3: Setting Different Attributes for a New Window

        window.open("dummyPage.html","dummy","attribute1=value1,attribute2=value2");

If the third parameter is omitted or is an empty string, the new window will have all of the features of the window that opened it, as happened in parts 1 and 2. This isn't always desirable. However, if the third parameter contains at least one attribute/value pair, then every feature will have to explicitly be set in the string in order to appear in the new window. Because of this, it is a 'best practice' to either not specify the third parameter, or else to specify every feature that you want set (in order to ensure that the user has a consistent experience, no matter which browser (and which version of the browser) the user is using).

For example, change the call to window.open() in Part 1 to look like this:

        window.open("dummyPage.html","","height=200,width=300");

The new window that appears will have the dimensions specified in the third parameter (the values represent pixels), but will not have any other features.

You can specify that the new window also has a menu bar by changing the call to look like this:

        window.open("dummyPage.html","","height=200,width=300,menubar=yes");

Take a look at the list of features to see what options are available.

Part 4: Writing html to a New Window

Revisiting Part I, change the call to window.open() to look like this:

        newWin = window.open("","","height=300,width=400");

This will open a new window containing a blank page and no extra features, such as a menu bar or address bar.

Use the document object of the new window to output html content to the new page. For example,

        newWin.document.write("<h1>My New Page</h1>");

will output a heading to the new document using the reference to the new window, newWin.

After displaying the content of the new page, close the new document (but not the new window), using the document.close() method:

        newWin.document.close();

Part 5: Review: Basic Function With Parameter(s) And A Return Value

Part 6: Review: The Movie Class

Create a class to model a movie.  The Movie class should include a constructor function with a parameter for a title, and a second parameter for the year the movie was released (you can name this field yearReleased).

Create a stand-alone function, named MovieAlertUser, and then use that function to give the Movie class an 'alertUser' method.  The method should lists the movie's info (it's title, and the year it was released).

Finally, create three Movie objects, and call alertUser on each one. 

Remember that in most programming languages, there is a clear distinction between the class (which consists of all the declarations/definitions - things like the constructor function, and all the methods)(in this case, the overall, generic Movie definitions), and objects (also known as instances of a class)(objects are the individual copies - in this case, the particular movies that you've created).  Make sure that you are able to identify the JavaScript code that defines the class, and the JavaScript code that creates the particular objects.

Part 7: Review: Basic Object in an external file

Building on the prior exercise, move all the code for the Movie class into a separate .JS file.  Keep the code that creates the Movies (and calls alertUser) in the .HTML page that you've been working in.

Part 8: Review: Objects, Arrays

Create a new HTML page, and have it include the external .JS file that defines your Movie class.  Within your .HTML page, create three student objects, and put them in an array.  Put a form on the HTML page, and when the user clicks on a button, have the event handler call a function, which uses a loop to iterate through the array, and call alertUser on the movie objects.

Part 9: Review: Window, Forms & Event Handlers, Functions, Objects, and Arrays, Oh My!

Create a new web (HTML) page, that has a form on it, and that includes the external .JS file.  Within your HTML page, put on clearly labeled text fields so that the user can fill in a movie's name, and the year that it was released.  Put a button on the form, and have that button's event handler call a function.  The function should take the information that's on the form, and use that information to create a new Movie object.  This new object should then be stored at the end of an array of Movie objects.  The function should then close down the extra window (if it's open), and then open the window up again (so it gets a new, blank window), and it should then write out everything that's in the Movie object array.  It should do this by iterating (using a loop) through the array of Movie objects, and at each stage, getting the title of the movie, calling the makeBold function on that string, and using the new window's document.write command to print out (into an unordered list) that title, plus the year the movie was released.