1. BIT116: Scripting Lecture 11
Instructor: Craig Duckett
Tuesday, August 11th, 2015
Window Object

2. ASSIGNMENT ANNOUNCEMENTS
Assignment 1 GRADED AND RETURNED! Woot!
Assignment 1 Revision GRADED AND RETURNED! Woot! Woot!
Assignment 2 due on Lecture 11, TONIGHT Tuesday, August 11th, by midnight.
Assignment 2 Revision due on Lecture 13, Tuesday, August 18th , by midnight.
Assignment 3 due on Lecture 14, Thursday, August 20th , by midnight.
Assignment 3 Revison due on Lecture 16, Thursday, August 27th , by midnight.

3. The Window Object

4. The Window Object
The JavaScript window object gives us access to more properties and methods we can use in our scripts.
By using the window object, we will be able to do a number of new things, such as prompt the user for information, open new windows, confirm an action by a user, etc.

5. Introduction to the Window Object
The window object is created for each window that appears on the screen.
A window can be the main window, a frame set or individual frame, or even a new window created with JavaScript.
It differs from the document object in that the window object contains the document object (as well as many other objects, such as history, navigator, and so on).
This object makes available for use in your scripts a number of new properties and methods that are directly under the window object.
In previous lectures , we have used the alert() method of the window object within our scripts. As you will recall, the alert() method enables us to pop up a message for the viewer. We will now see a number of new methods of this object that do things such as confirm a viewer’s action or prompt the viewer for information, and this will enable us to add more interactivity to our scripts.

6. Properties of the Window Object

7. Properties of the Window Object
To begin our study of the window object, take a look at its properties that we can use, which are listed and described in the Table on the next slide.
NOTE: As in previous chapters, some of the properties and methods listed in this chapter are not cross-browser or only work in modern browsers. For more information and more complete listings, see:
and

9. The closed Property
The closed property is used to check whether or not a window has been closed by the viewer. The way it is normally used is with the name of a window, followed by the closed property, such as in the following example:
if (windowName.closed) {
//JavaScript Statements }
You would replace the windowName part with the name of the window that you wish to check. This is often a new window that you opened with JavaScript.
NOTE: You will see how to name a new window in the upcoming The open() Method slide.

10. The closed Property CONTINUED
You can also use the closed property inside a new window to check whether the window that opened it has been closed.
To do that, you would use closed after the opener property (discussed in the upcoming opener Property section), as in this example:
if (window.opener.closed) {
//JavaScript Statements }
This use of the closed property is really handy if you choose to create a new window that enables the viewer to navigate the main window through links in the new window.

11. The defaultStatus Property
The defaultStatus property sets the text string that is displayed by default in the status bar when nothing has been assigned to the window.status property.
A change of the window.status property overrides this setting, because it is only shown as the default.
The defaultStatus property is often set in the load event. This is used mainly to display a custom message by default when the viewer is not performing an action that would change the text in the status bar. It can be set at any time, though, so you could set this using other events besides the load event.
CAUTION: Most modern browsers, by default, do not display status bar text altered by JavaScript, to keep unscrupulous Web sites from deceiving users with false link destinations and so forth in the status bar. Thus, the defaultStatus and status properties often do not work unless browser settings are altered by the viewer. Since it is a security risk to change browser settings to allow altered status bar text, using these properties in your scripts is not recommended.

12. The frames Property (Array)
The frames property is an array that holds a value for each frame within a frame set.
It is often used to gain access to the properties of the various frames on a page.
You can find the number of frames in a window by using the window.frames.length property.
This is handy if you decide to use the array later to perform tasks on the frames of a page in sequence.

13. The innerHeight and innerWidth Properties
The innerWidth and innerHeight properties hold values for width and height of the area of the window in view, which means that these values do not include scroll bars, menu bars, toolbars, or other browser features. These properties work in all the major browsers.
If you wanted to obtain the width of the content area you have available to your script, you could use the following code:
var myWinWidth = window.innerWidth;

14. The innerHeight and innerWidth Properties CONTINUED
If you want to use different HTML code for the browser depending on the available innerWidth of the window, you could use the following code:
var myWinWidth = window.innerWidth;
var divWidth = (myWinWidth >= 800) ? "750px" : "400px";
document.write('<div style = "width:'+ divWidth +'; background-color:#CCC;">');
document.write('Some text for the new div element.');
document.write('</div>');
This will determine whether the viewer has 800 pixels of viewable width. If so, the width of the div element will be set to 750 pixels. Otherwise, the div element will have a safer width of 400 pixels. The background color should span the full width of the div element, allowing you to see the difference when the script is run with different browser widths.

15. The outerHeight and outerWidth Properties
The outerWidth and outerHeight properties hold values for width and height of the area of the window in view including scroll bars, menu bars, toolbars, or other browser features. These properties work in all the major browsers.
If you wanted to obtain the width of the content area you have available to your script, you could use the following code:
var myWinWidth = window.outerWidth;

16. The length Property
The length property tells you how many frames are in a window, just like the window.frames.length property. This just shortens it to window.length (which is often more convenient when you are writing code).

17. The location Property
The location property holds the current URL of the window. It is also its own object with its own properties and methods. You have used this property already to create button links. You can also use the location property to cause instant redirection of the browser to a new page (if your page has moved to a new location, for instance).
If a page has been moved and you want to redirect the viewer without any delay, you could just give the location property a new value with a script in the head section of the page, as shown in the following:
<head>
<title>Page has moved</title>
<script>
window.location="
</script>
</head>
<body>
Lacking JavaScript? Click the link below for the new page then!
<br>
<a href=" Page</a>
</body>

18. The name Property
The name property holds the name of the current window and also enables you to give a window a name. If you want to give the main window a name, you could assign to this property the name you want to use. If you want to test to see that it worked, you could write the value of the property to the page in the body section. The following code shows an example of assigning a name to a window and then writing the name into the body of the page:
<body>
<script>
window.name = "Groovy Window";
document.write("This window is named "+ window.name);
</script>
</body>
The script gives the window a name, and then writes that name into the document.

19. The opener Property
The opener property is used to reference the window that opened the current window.
This is often used in new windows opened using the open() method, which you will see later in the open() Method section.

20. The parent, self, and top Properties (Frames)
The parent property is only used when there are frames on a page. It enables you to access the parent frame set of the current frame. This is helpful when you wish to change a property in one frame from another frame.
The self property is another way of saying “the current window” in JavaScript. It is used like the window object and can access the properties of the current window just like the window object. The self property is useful if you have a lot of windows with names and want to be sure you are using a property of the current window and not one in another named window.
The top property is used to access the top window out of all the frame sets (which could be nested). This is a little different from the parent property, which only goes to the top of the current frame set. The top property instead goes all the way to the top window, even if the window contains nested frame sets.
NOTE: Discussion of JavaScript and Frames, a more advanced topic, is outside the scope of this class. The framset tag is no longer supported in HTML5, so detailed analysis of a deprecated element will have to be seen as a personal pet project.

21. The status Property
The status property sets the text in the status bar at the bottom of the browser, or returns the previously set text.
Note: Do not confuse this property with the defaultStatus property, which specifies the default text displayed in the status bar.
Caution: The status property does not work in the default configuration of IE, Firefox, Chrome, or Safari. Most modern browsers, by default, do not display status bar text altered by JavaScript, to keep unscrupulous web sites from deceiving users with false link destinations and so forth in the status bar. Thus, the defaultStatus and status properties often do not work unless browser settings are altered by the viewer. Since it is a security risk to change browser settings to allow altered status bar text, using these properties in your scripts is not recommended.
Note: In Firefox, to allow scripts to change the text of the status, the user must set the dom.disable_window_status_change preference to false in the about:config screen.

22. Methods of the Window Object

23. Methods of the Window Object
Now that you know how to use the properties of the window object, you can move on to using window methods.
The table on the next slide lists a number of the methods of the window object with a description of each.
Going forward, more common window methods will be described in greater detail.

25. The alert() Method
We have used the alert() method extensively so far throughout the course.
This pops up a message to the user, and the user has to click an OK button to continue. Recall that
the syntax is like the following alert:
window.alert("JavaScript is groovy!");
As noted when the alert() method was first introduced, this method is often shortened in scripts using syntax like the following:
alert("JavaScript is groovy!"):

26. The confirm() Method
The confirm() method can be used to give the user a chance to confirm or cancel an action. This method returns a Boolean value of true or false, so its result is often assigned to a variable when it is used.
The following is the syntax for assigning the value to a variable:
var varName = window.confirm("Message");
You would replace varname with a variable name that you wish to use. You would then replace the “Your Message” text with the text you wish to have in the dialog box that pops up. So, if you wanted to assign the result to a variable named isSure and ask the question “Are you sure?” you could use the following code:
var isSure = window.confirm("Are you sure you want to continue?");
If the user clicks OK, the method returns true. If the user clicks Cancel, the method returns false. You can’t change the value of the text in the buttons. You are stuck with OK and Cancel, at least while using the confirm method.

27. The find() Method
You can use the find() method to let the user find a certain bit of text on your page.
It tells the browser to use its built-in Find utility and enables the viewer to type in what to look for on the page.
For example, if you wanted to create a button for viewers to click when they want to find something on your page, you could use the following code:
<form>
<input type="button" value="Find Text" onclick="window.find();">
</form>
This pops up the Find dialog box in the browser and enables the viewer to search for text within the page. This functionality is useful if you have a really long page and want the viewer to be able to find things more quickly by searching the page.

28. The home() Method
The home() method is used to send the viewer to the home page the viewer has set in the Web browser settings.
For instance, you could use it to offer viewers a button that will take them to their selected home page when clicked, as in the following code (I tested and this method works in Firefox and Opera but does not work in Internet Explorer or Chrome):
<form>
<input type="button" value="Go Home!" onclick="window.home();">
</form>

29. The prompt() Method
The prompt() method, which we have also already been using, is used to prompt the viewer to enter information.
Using this method, you can do things based on what the viewer enters into the text box at the prompt.
First, you need to see the syntax for this method. As with the confirm() method, the result (what the viewer enters) is assigned to a variable for later use. The following is an example of the syntax:
var varName = window.prompt("Your Text","Default Entry");
You replace varName with a variable name, and replace “Your Text” with the message that you want to send to the viewer (usually a question). The second parameter, “Default Entry”, enables you to enter a default entry for the viewer. Often this is left as “ ”, which is a blank entry. However, you could set it to something if you would like to have a default answer ready for the viewer to use.

30. The open() Method

31. The open() Method
The open() method is the method that enables you to open a new window with JavaScript. This method takes three parameters, the third of which sets a number of options that the window may need.
The general syntax for using the open() method is shown in the following example:
window.open("URL","name","attribute1=value,attribute2=value");
The first parameter, “URL”, is replaced with the URL of the HTML document that is to be opened in the new window.
The second parameter, "name", is replaced with the name you wish to give to the window.
The third parameter enables you to add attributes for the new window.
These attributes are set by using “yes”, “no”, or a numeric value on the right side of the equal sign. Notice that each time an attribute is set with a value, there is a comma before the next one and no spaces in between. If you want to open a window with the features of the current window, you could do so by leaving off the last parameter with the attributes. Example:
window.open("newpage.html","my_window");

32. The open() Method CONTINUED
Standard Attributes
If you want to include window features, you need to learn some of the attributes that you can use with the windows. The table on the next slide lists the standard attributes that you can use as part of the last parameter in the open() method.

34. The open() Method CONTINUED
If you begin to use the attribute parameter, you should note that once you place something in the attribute parameter, any attribute not defined will now default to “no” instead of copying the main window.
So, if you want to open a basic new window with a width of 400 pixels and a height of 300 pixels, you could use the following code:
window.open("newpage.html","my_window","width=400,height=300");
The only feature this window will have is a title bar that shows the title of the document and the buttons on the top right for the viewer to close or minimize it.

35. The open() Method CONTINUED
To set the other attributes (which are all Boolean), you can assign them a value of “yes” or “no” depending on whether or not you want each feature.
NOTE: You may also use 1 for yes and 0 for no if you prefer, as they will have the same effect.
So, if you wanted to have a 300×200 pixel window with just a menu bar added (this adds the Forward, Back, Stop, and other similar buttons), you could use the following code:
window.open("newpage.html","cool","width=300,height=200,menubar=yes");
This gives you a new window with the contents of newpage.html, a name of “cool,” dimensions of 300×200 pixels, and a menu bar.
You can add as many of the attributes as you want inside the quote marks of the third parameter by separating each one with a comma. Remember that you should include no spaces between anything and that the entire command should be on one line in your text editor.

36. The open() Method CONTINUED
The following example opens a window with all the features mentioned in the table above.
NOTE: This takes up more than one line here, but when you enter it in your text editor, the code should go on a single line.
window.open("newpage.html","cool","width=300,height=200,directories=yes,location=yes,menubar=yes,resizable=yes,scrollbars=yes,status=yes,toolbar=yes");
This opens a 300×200 pixel window with all the standard features.

37. The open() Method CONTINUED
Extended Attributes
With newer browsers, you can use a number of new attributes for your new windows.
The only trouble is that they may not work cross-browser, so you have to be careful to test the code to ensure that the attributes you use work in the browsers in which you need them to work.
The table on the next slide lists a number of extended attributes for new windows.

38. The problem with the attributes listed above is that they may not work cross-browser.
For instance, to make the screen position work with Internet Explorer, Firefox, and Opera, you need to add all four of the attributes to the last parameter of the open() method.
Each browser will just ignore the attributes that it does not recognize.

39. The open() Method CONTINUED
The following code opens the newpage.html document in a new 300×200 pixel window in the top-left corner of the screen (0 pixels from the left, 0 pixels from the top) when the button is clicked:
var nwWin = document.getElementById("nwin");
nwWin.onclick = function() {
window.open("newpage.html","cool","width=400,height=300,status=yes,screenX=0,left=0,screenY=0,top=0");
return false; };
NOTE: This takes up more than one line here, but when you enter it in your text editor, the code should go on a single line.
In this version, you added the new attributes to set the new window at the coordinates (0,0) on the screen.

40. The close() Method

41. The close() Method
The close() method is used to close a window; however, unless your script has certain security rights, this can only be used to close a window that has been opened by you with JavaScript.
To use the close() method, you could modify your newpage.html code to provide a button at the end of the text that enables the viewer to close the window by clicking it.
So, you could change the code of newpage.html to look like the following code:
<body> I am a new window! I am newer than the window that opened me.
<form>
<input type="button" value="Close Window" onclick="window.close();">
</form>
</body>
When the button is clicked now, the window.close() method is invoked and closes the window just like the standard Close button at the top right of a window.

42. Other Methods of the Window Object

43. The moveBy() Method
The moveBy() method can be used to move a new window to a new location on the screen.
This moves a window by the number of pixels given as parameters in the method call.
The following is the syntax for using this method:
window.moveBy(x-pixels,y-pixels);
You replace x-pixels with the number of pixels you want to move the window from left to right. So, if you want the window to move to the right, you enter a positive number. If you want it to move to the left, you enter a negative number.
You replace y-pixels with the number of pixels you want to move the window from top to bottom, with positive numbers pushing the window down and negative numbers pulling the window up.

44. The moveBy() Method CONTINUED
For example, if you want to give the viewer the option to move the window by the number of pixels of your choice, you could add a button to make it do so when the viewer clicks the button. You could use the following code:
<body> I am a new window! I am newer than the window that opened me.
<form>
<input type="button" value="Move Window"
onclick="window.moveBy(100,100);"><br><br>
<input type="button" value="Close Window" onclick="window.close();">
</form>
</body>
This moves the window 100 pixels to the right and 100 pixels down when the button is clicked.

45. The moveTo() Method
The moveTo() method is used to move a window to a specific destination on the screen based on the parameters given in the method call. Once it is there it stays put.
The following is the general syntax for using this method:
window.moveTo(x-value,y-value);
This is different than the moveBy() method, because once it moves to its destination it can be moved again (by pressing the button).

46. The resizeBy() Method
The resizeBy() method is used to resize a window by the number of pixels given in the parameters sent in the method call.
The syntax and usage are the same as for the moveBy() method; resizeBy() just performs a resize instead.
To make the window larger, use positive numbers. To make it smaller, use negative numbers.

47. The resizeTo() Method
The resizeTo() method is used to resize a window to a specific dimension in pixels based on the parameters sent in the method call.
The syntax and usage are the same as for the moveTo() method; resizeTo() just performs a resize instead.
You input the new width and height in place of the coordinates used in the moveTo() method.

48. The scrollBy() and Scroll() Methods
The scrollBy() Method
The scrollBy() method is used to scroll a window by the number of pixels given in the parameters sent in the method call. The syntax and usage are the same as for the moveBy() method; scrollBy() just performs a scroll instead.
To make the window larger, use positive numbers. To make it smaller, use negative numbers.
The scrollTo() Method
The scrollTo() method is used to scroll a window to a specific destination in pixels based on the parameters sent in the method call.
The syntax and usage are the same as for the moveTo() method; scrollTo() just performs a scroll to the specified point instead.

49. The setInterval() Method
The setInterval() method is used to execute a JavaScript function repeatedly at a set interval.
The following is the general syntax for using this method:
window.setInterval("function()",time);
You replace function() with the name of the function you wish to repeat. You then replace time with the time (in milliseconds) you want to wait before each repetition of the function.
So, if you really wanted to annoy your users, you could use this method to pop up an alert every 5 seconds (5,000 milliseconds) once the page is viewed. You could do this by placing the following script directly inside the <body> of the HTML of a document:
<script>
function annoyAlert() {
window.alert("Am I bothering you yet?"); }
window.setInterval("annoyAlert()",5000); // Note quotes around method
</script>
CONTINUED NEXT PAGE

50. The setInterval() Method CONTINUED
Notice that this is a special case in which the function must be called inside quote marks.
Normally, a function must be called outside quote marks.
The reason for doing it this way here is to keep the function from executing immediately rather than at the set interval.
The function name is being sent as a string parameter to the setInterval() method, where it is then called after the correct time lapse.

51. The clearInterval() Method
To end the barrage of alerts from the previous script, you could use the clearInterval() method.
The following is the general syntax for using this method:
window.clearInterval(name);
You must replace name with a variable name that has been assigned to the setInterval() method call you want to clear.
The problem is, you didn’t set your setInterval() call to a variable name in the previous example.
In order to clear it, you need to adjust your code.
CONTINUED NEXT PAGE

52. The clearInterval() Method CONTINUED
The following code is updated and assigns the setInterval() call to a variable name:
<script>
function annoyAlert() {
window.alert("Am I bothering you yet?"); }
var madness = window.setInterval("annoyAlert()",5000);
</script>
You now have a way to use the clearInterval() method, by calling it with the madness variable as the parameter.
Offer the user a button that enables them to stop the madness. As long as it is clicked between intervals, it will stop the interval from running any further.

53. The setTimeout() Method
The setTimeout() method enables you to execute a JavaScript function after a certain amount of time has passed. It differs from the setInterval() method because it is only executed once (unless it is put inside a loop of some sort). The general syntax is the same as that of the setInterval() method.
If you want to have only a single alert pop up after ten seconds and not repeat, you could use the following code:
<script>
function annoyAlert() {
window.alert("I’m kinda annoying, but not much!"); }
window.setTimeout("annoyAlert()",5000);
</script>
This would send the viewer a single alert after five seconds.

54. The clearTimeout() Method
The clearTimeout() method enables you to cancel a setTimeout() call if you call the clearTimeout() method before the time expires from the setTimeout() call.
The general syntax is the same as that of the clearInterval() method: you use a variable name as a parameter so that it knows which setTimeout() call to cancel.
So, if you want to give viewers a chance to avoid getting an alert, you could add a button for them to click within five seconds. If it is clicked in time, the setTimeout() call is canceled and no alert pops up.

55. Lecture 11 Please begin working on the LECTURE 11 In-Class Exercises.
When you have completed your ICE, call the Instructor over to verify your work. If you have questions about your work, please call over the Instructor to clarify.
Once you have completed your ICEs, you are free to go for the day.
If you don't finish your ICEs by the end of class, you will still get full credit for actively doing the work, but it is greatly recommended you finish any outstanding ICEs outside of class.