Tutorial 5 Windows and Frames Section A - Working with Windows

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

Objects Objects are special variables that representprograms Objects contain two categories of information: Variables (called properties) Functions (called methods)

Working with Windows 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

Working with Windows 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

Working with Windows 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

Working with Windows 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) It is not necessary to explicitly refer to the Window object, it is assumed by the browser In some browser versions, it is not necessary to explicitly refer to the Document object

Working with Windows The Window Object Includes several properties that contain information about the Web browser window e.g., status property Contains information displayed in a Web browsers status bar

Working with Windows 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);

Working with Windows Opening and Closing Windows window.open(URL, name, options); URL: the address of the content of the window Name: use this as the value of a target in HTML tags. If a window with this name already exists, open does not create a new window, rather returns a reference to the already opened window. This name cannot be used in javascript code to reference the window (must use a variable) This name does not appear in the title.

Working with Windows Opening and Closing Windows window.open(URL, name, options); URL: the address of the content of the window if the URL is empty, the new window will have no content (i.e., it is blank). Otherwise, the content at the given URL is loaded into the new browser window.

Opening new windows AboutExercise.html. AboutExercise.html. <INPUT TYPE="button" VALUE="About this JavaScript Program" onClick="window.open('About.html', 'About', 'height=100,width=300')"> Note that all options are in a single string.

Working with Windows 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, then all desired options must be specified. See example later.

Working with Windows Example. Options specified by listing. Below example will have no toolbars, menubars, directory buttons, or location bar. var myWin = Window.open(Chili.html, Chili, height=350, width=400,scrollbars, resizable, status); Or var myWin = Window.open(Chili.html, Chili, height=350, width=400,scrollbars=yes, resizable=yes, status=yes);

Working with Windows Opening and Closing Windows Referencing a window A Window objects name property can only be used to specify a target window, and cannot be used in JavaScript code To reference a window in code, the new Window object reference must be assigned to a variable var newWindow = window.open(

Working with Windows Opening and Closing Windows Examples About.html Chili.html AnchorTargets.html (opens a new window) Links.html (open links in a new window) PolarBearMain.html (opens a new window, not all options used) Recipies.html (opens new window with some options)

Working with Windows Working with Timeouts and Intervals setTimeout() Used to execute code after a specific amount of time has elapsed Executes only once Syntax: var variable setTimeout(code, milleseconds); clearTimeout() Used to cancel a setTimeout() method

Working with Windows Working with Timeouts and Intervals 1000 millisecond = 1 second

Working with Timeouts See examples: guessNumber.html (setTimeOut in a game) Redirect.html (redirect a page after a timeout)

Working with Windows Working with Intervals setInterval() Similar to setTimeout() except it repeatedly executes the same code after being called once Syntax: var variable setInterval(code, milleseconds); clearInterval() Used to cancel a setInterval() method

Working with Timeouts See examples: flashGreeting.html (for status bar)

Working with forms Different ways to access elements in an html page. Here we just talk about forms The form and every element in it must be named Refer to elements using the dot notation To access the number/string stored or displayed in an element such as a text box use the value property.

Working with forms See examples: GuessNumber.html GrossPay.html Exercise1A.html Exercise2A.html Exercise3A.html

Random Numbers Javascript has a built-in function to obtain a random number: var theNum = Math.random(); This gets a random number between 0.0 and 1.0 and stores it in the variable theNum

Random numbers function getRand(){ var theNum = Math.random(); // now make the number between 1 and 99 theNum = theNum * 100; // get rid of the decimal part theNum = Math.round(theNum); // use the mod operator to turn the number between 0 and 9. // add 1 to make the number between 1 and 10 theNum = (theNum % 10) + 1; alert("Your random number is " + theNum); } <input type="button" value= "Random Number onClick="getRand();" style="background-color:darkred;color:blue">