Tutorial 5 Windows and Frames Section A - Working with Windows.

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 represent“programs”

• 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


• 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


• 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


• 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


• 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


• 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);


• 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.


• 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 windowsAboutExercise.html.

<HTML><BODY><FORM><INPUT TYPE="button" VALUE="About this

JavaScript Program"onClick="window.open('About.html', 'About', 'height=100,width=300')">

</FORM></BODY></HTML>

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.


• 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”);Orvar myWin = Window.open(”Chili.html”, ”Chili”, ”height=350,

width=400,scrollbars=yes, resizable=yes, status=yes”);


• Opening and Closing Windows• Referencing a window

• A Window object’s 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(“http://course.com”);


• 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 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 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 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 numbersfunction getRand(){

var theNum = Math.random();// now make the number between 1 and 99 theNum = theNum * 100;// get rid of the decimal parttheNum = Math.round(theNum);// use the mod operator to turn the number between 0 and 9.// add 1 to make the number between 1 and 10theNum = (theNum % 10) + 1;alert("Your random number is " + theNum);

}

<input type="button" value= "Random Number“ onClick="getRand();" style="background-color:darkred;color:blue">

Tutorial 5 Windows and Frames Section A - Working with Windows.

Documents

Transcript of Tutorial 5 Windows and Frames Section A - Working with Windows.