WDMD 170
Internet Languages
Working with Windows
(No audio component)
© Dr. David C. Gibbs
2003-04
WDMD 170 – UW Stevens Point
1

Section A - Working with Windows
WDMD 170 – UW Stevens Point
2

• Section A - Working with Windows
– About the browser object model
– About the window object
– How to open and close windows
– How to work with timeouts and intervals
WDMD 170 – UW Stevens Point
3

• Browser object model
– A hierarchy of objects, each of which provides programmatic access to a different aspect of the HTML page or the Web browser window
– Created automatically when a Web browser opens an HTML document
4
WDMD 170 – UW Stevens Point

WDMD 170 – UW Stevens Point
5 del
Mo ect
Obj ript aS
Jav
The c

• Represents a Web browser window or an individual frame within a window
• Top-level object in the browser object model
• Its properties and methods can be used to control the Web browser window
6
WDMD 170 – UW Stevens Point

• Represents an HTML document displayed in a window
• Descended from a Window object
• Ancestor (parent) for all elements contained on an HTML page
– e.g., all HTML elements descend from the
Document object
7
WDMD 170 – UW Stevens Point

• To refer to a JavaScript object in code, you must list all of its ancestors as a series of properties separated by periods (the dot operator) window.document.writeln(“text message”);
• It is not necessary to explicitly refer to the
Window object, it is assumed by the browser document.writeln(“text message”);
• In some browser versions, it is not necessary to explicitly refer to the Document object
8
WDMD 170 – UW Stevens Point

• Includes several properties that contain information about the Web browser window
• e.g., status property
– Contains information displayed in a Web browser’s status bar window.status = "This changes the status bar!"; statusBarChanged.htm
9
WDMD 170 – UW Stevens Point

WDMD 170 – UW Stevens Point
10
O bj o w
Th e
Wi nd ec t

WDMD 170 – UW Stevens Point
11
Wind ow
Objec t
Meth ods

• Ever wonder how browser windows just
“pop-up?”
• You’re about to see how!
NOTE: if you have a pop-up blocker installed on your browser ( Google has one) you’ll need to disable it to test your code.
12
WDMD 170 – UW Stevens Point

• Netscape and Internet Explorer both allow the opening of new Web Browser windows
– Creates a new window object
– Use open() method of the Window object
– Syntax:
• window.open(“URL”, “name”, options); window.open(“ http://www.course.com
”); opens the browser window shown on the next slide openWindowNoOptions.htm
13
WDMD 170 – UW Stevens Point

WDMD 170 – UW Stevens Point
14

WDMD 170 – UW Stevens Point
15

• When opening a new window, it can be customized using the options argument of the open() method
– Multiple items in the options string must be separated by commas
– Defaults are provided if no options are specified
– If any option is specified, than all desired options must be specified
16
WDMD 170 – UW Stevens Point

WDMD 170 – UW Stevens Point
17
Comm on open() method options

window.open( http://www.course.com
, "Course", "height=300, width=600");
WDMD 170 – UW Stevens Point
18

window.open( http://www.course.com
, "Course",
"height=300, width=600, toolbar=yes, scrollbars=yes"); openWindowManyOptions.htm
WDMD 170 – UW Stevens Point
19

• A Window object’s name property can only be used to specify a target window with links or forms, and cannot be used in
JavaScript code
• To reference a window in JS code, the new Window object reference must be assigned to a variable var newWindow = window.open(
" http://course.com
"
);
20
WDMD 170 – UW Stevens Point

• Use the file openWindowManyOptions.htm
as an example and create a document that opens another window using as many of the window.open options shown in Figure 5-8 as you can.
• Open the UWSP home page in the window.
• Save your file as openWindowAlmostAllOptions.htm in your in your Tutorial05 folder.
21
WDMD 170 – UW Stevens Point

Refer to the instructions on pages 241-4
(Gosselin).
• Create the files PolarBearMain.htm and PolarBear.htm and save them in your Tutorial05 folder.
• Preview the files.
22
WDMD 170 – UW Stevens Point

• setTimeout()
– Used to execute code after a specific amount of time has elapsed
– Executes only once
– Syntax: variable=setTimeout(“<code>",milliseconds);
NOTE: <code> above can be a function call for example: polarBearOpened=setTimeout('confirmPolarBear()',10000);
After 10 seconds, the confirmPolarBear() function is called.
23
WDMD 170 – UW Stevens Point

• clearTimeout()
Used to cancel a setTimeout() method
Syntax: clearTimeout(<variable>); where the variable was assigned the return value of the setTimeout() method.
for example, if the time out was set with polarBearOpened=setTimeout('confirmPolarBear()',10000); it can be cleared with clearTimeout(polarBearOpened);
24
WDMD 170 – UW Stevens Point

• setInterval()
– Similar to setTimeout() except it repeatedly executes the same code after being called once
– Syntax: var variable=setInterval("<code>", milliseconds);
NOTE: <code> can be a function call
25
WDMD 170 – UW Stevens Point

• clearInterval()
– Used to cancel a setInterval() method
WDMD 170 – UW Stevens Point
26

• Type in the program shown in Figure 5-
12 on page 245 of Gosselin.
• Save the file as useSetClearTimeout.htm in your
Tutorial05 folder.
• Preview the file.
27
WDMD 170 – UW Stevens Point

Refer to the instructions on page 246
(Gosselin). You will modify the Polar
Bear program adding a setTimeout() method.
• Modify PolarBearMain.htm, saving the new file as PolarBearMainTimeout.htm and save it in your Tutorial05 folder.
• Preview the files.
28
WDMD 170 – UW Stevens Point

• Complete exercises #1-4 on page 250 (Gosselin, Tutorial 05A).
• Here is a helpful hint for Exercise #2: openWindowShowVariable.htm
• There is a screen shot of output of Exercise #4 on the next slide.
• Post your solutions to your Tutorial05 folder CISSRV3 server.
• Provide links to exercises 3 & 4 in a post to your eReview discussion group.
• Describe any difficulties and ask any questions you might have in completing those exercises.
• You may also post any questions (and the exercise file) to the eReview group – for discussion purposes.
29
WDMD 170 – UW Stevens Point

WDMD 170 – UW Stevens Point
30

• Jump to the Beginning of this eLesson
• WDMD 170 Course Schedule
• D2L Courseware Site
WDMD 170 – UW Stevens Point
31