chapter 4 the browser object model javascript, third edition

Chapter 4

The Browser Object Model

JavaScript, Third Edition

JavaScript, Third Edition 2

Objectives

• Study the browser object model

• Work with the Window object

• Study the History, Location, and Navigator objects

• Use JavaScript to refer to windows and frames


Understanding The Browser Object Model

• Also called client-side object model

• Is a hierarchy of objects

• Each object provides programmatic access to a different aspect of the Web browser window or the Web page


Understanding The Browser Object Model (Cont.)

• Window object:

– Top level object in browser object model

– Represents a Web browser window or an individual frame within a window

– Automatically created by Web browser

– Also called global object

– Contains Document object


Understanding The Browser Object Model (Cont.)


The Document Object

• Most important object in the browser object model

• Represents Web page displayed in a browser

• The write() and writeln() methods, refer to the Document object

• Contains all of the elements you create on a Web page


Referencing JavaScript Objects

• To refer to a JavaScript object in code:

– you must refer to all of the objects that contain it, with the object names, separated by periods


The Window Object

• Includes several properties that contain information about the Web browser window

• Contains methods that allow you to manipulate the Web browser window itself

• Use the self property to refer to the current Window object


The Window Object (Cont.)


Windows and Events

• Events are particularly important when it comes to working with the browser object model

• Allow you to:

– Execute the methods and change the properties of objects in the browser object model


The click and double-click Events

• Used with form controls

• Often used for the anchor element:

– Primary event associated with click and double-click Events


The click and double-click Events (Cont.)

• In order to override the automatic click event with your own code

– Add to the <a> element an onclick event handler that executes custom code

• The dblclick event works the same as the click event, except

– Users need to double-click the mouse instead of single-clicking it


The mouseover and mouseout Events

• Use to create rollover effects:

– Occur when your mouse moves over an element

• The mouseover event occurs when the mouse passes over an element

• The mouseout event occurs when the mouse moves off an element


The mousedown and mouseup Events

• The mousedown event occurs when you point to an element and hold the mouse button down

• The mouseup event occurs when you release the mouse button


Opening and Closing Windows

• Reasons for opening new Web Browser windows:

– To launch a new Web page in a separate window, allowing users to continue viewing current page in the current window

– To use an additional window to display information such as a picture or an order form


Opening and Closing Windows (Cont.)

• Whenever a new Web browser window is opened, a new Window object is created to represent the new window

• You can manually open a new Web browser window:

– in Netscape by selecting New Window from the File menu

– In Internet Explorer by selecting Window from the New submenu on the File menu


Opening a Window

• In order to open new windows in the strict DTD:

– You must use the open() method of the Window object

– Syntax for the open method is as follows:

window.open(url,ƒname,ƒoptions,ƒreplace);

• In order to make a window the active window

– Use the focus() method of the Window object


Opening a Window (Cont.)


Closing a Window

• The close() method:

– Closes a Web browser window

– Probably used the most with variables representing other Window objects

• To close the Web browser window represented by the OpenWin variable:

– Use the Statement OpenWin.close();


Working with Timeouts and Intervals

• Use the Window object’s timeout and interval methods to create code that executes automatically

• The setTimeout() method:

– Used in JavaScript to execute code after a specific amount of time has elapsed

– Code executed with the setTimeout() method executes only once


Working with Timeouts and Intervals (Cont.)

• Syntax for the setTimeout() method is

– var variable = setTimeout(“code”, milliseconds);

• ClearTimeout() method is used to cancel a setTimeout() method before its code executes

• ClearTimeout() method receives a single argument:

– Variable that represents a setTimeout() method call



• Two other JavaScript methods that create code and execute automatically are:

– setInterval() method

– clearInterval() method

• The setInterval() method:

– is similar to the setTimeout() method, EXCEPT

• it repeatedly executes the same code after being called only once



• The clearInterval() method:

– Used to clear a setInterval() method call in the same fashion that the clearTimeout() method clears a setTimeout() method call


The History Object

• Maintains an internal list (known as a history list) of all the documents that have been opened during the current Web browser session

• Each Web browser window and frame contains its own internal History object


The History Object (Cont.)

• You cannot view the URLs contained in the history list:

– BUT you can write a script that uses the history list to navigate to Web pages that have been opened during a Web browser session



• In Internet Explorer, you can use JavaScript code to navigate through a history list

– Only possible if the currently displayed Web page exists within the same domain as the Web page containing the JavaScript code attempting to move through the list


The Location Object

• Allows you to change to a new Web page from within JavaScript code

• One reason to change Web pages with JavaScript code is

– to redirect your Web site visitors to a different or updated URL

• When you use a method or property of the Location object, you

– must include a reference to the Location object itself


The Location Object (Cont.)


The Navigator Object

• Used to obtain information about current Web browser

• Netscape and Internet Explorer each contain unique methods and properties of the Navigator object that cannot be used with the other browser

• Most commonly used to determine which type of Web browser is running


The Navigator Object (Cont.)


Using the target and base Attributes

• Target attribute determines in which frame or Web browser window a document opens:

– Based on value assigned to an <a> element’s target attribute or the value assigned to a <frame> element’s name attribute


Using the target and base Attributes (Cont.)

• Use the target attribute with the <base> element

– to specify a default target for all links in a document

• Using the assigned name of a window or frame


The parent Property

• If a window contains no frames, then the frames[] array is empty

• To refer to a frame within the same frame set:

– Use the parent property of the Window object combined with the frame’s index number from the frames[] array


The top Property

• Refers to the topmost window on a Web page

• When working with frames, the top property refers to the window that constructed the frames

• When the top property is used on a Web page that does not contain frames

– refers to the window itself


Chapter Summary

• Browser object model (BOM):

– Hierarchy of objects, each of which provides programmatic access to a different aspect of the Web browser window or the Web page

• Window object:

– Top-level object in the browser object model


Chapter Summary (cont.)

• Document object:

– Arguably the most important object in the browser object model

– Represents the Web page displayed in a browser

• Location object:

– Allows you to change to a new Web page from

within JavaScript code



• Navigator object:

– Object is used to obtain information about the current Web browser

• target attribute:

– Determines in which frame or Web browser window a document opens, based on the value assigned to an <a> element’s target attribute OR the value assigned

to a <frame> element’s name attribute



• To refer to a frame within the same frameset:

– Use parent property of the Window object combined with the frame’s index number from the frames[] array

• Top property:

– Topmost window on a Web page

chapter 4 the browser object model javascript, third edition

Documents

browser object model

edition slide

document object

important object

level object

global object

object names

browser object model