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

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

WDMD 170 – UW Stevens Point 3 Tutorial 5A Topics 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 4 The JavaScript Object Model 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

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

WDMD 170 – UW Stevens Point 6 The JavaScript Object Model: Window object 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

WDMD 170 – UW Stevens Point 7 The JavaScript Object Model: Document object 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

WDMD 170 – UW Stevens Point 8 The JavaScript Object Model: Referencing objects 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

WDMD 170 – UW Stevens Point 9 The Window Object 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

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

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

WDMD 170 – UW Stevens Point 12 Opening and Closing Windows 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.Google

WDMD 170 – UW Stevens Point 13 Opening and Closing Windows 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(“ opens the browser window shown on the next slide openWindowNoOptions.htm

WDMD 170 – UW Stevens Point 14

WDMD 170 – UW Stevens Point 15

WDMD 170 – UW Stevens Point 16 Opening and Closing Windows 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

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

WDMD 170 – UW Stevens Point 18 window.open( "Course", "height=300, width=600");

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

WDMD 170 – UW Stevens Point 20 Referencing a window 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( " " );

WDMD 170 – UW Stevens Point 21 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.openWindowManyOptions.htm Open the UWSP home page in the window. Save your file as openWindowAlmostAllOptions.htm in your in your Tutorial05 folder. eTask 1

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

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

WDMD 170 – UW Stevens Point 24 Working with Timeouts clearTimeout() Used to cancel a setTimeout() method Syntax: clearTimeout( ); 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);

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

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

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

WDMD 170 – UW Stevens Point 28 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. eTask 4

WDMD 170 – UW Stevens Point 29 Assignment Complete exercises #1-4 on page 250 (Gosselin, Tutorial 05A). Here is a helpful hint for Exercise #2: openWindowShowVariable.htm 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.

WDMD 170 – UW Stevens Point 30 Exercise #4 page 251- output

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