Beginning DHTML Working with Browser Objects Copyright 2005

Goals By the end of this lecture you should … • Understand the differences among DHTML, BOM & DOM. • Understand the basic hierarchy of Java. Script objects. • Understand how to program using methods & attributes of the window, history, navigator and screen objects. Copyright © 2005 Department of Computer & Information Science

Alphabet Soup: DHTML, BOM, DOM • DHTML refers to the idea of generating Web content dynamically. It relies very heavily on user input. • BOM, the Browser Object Model, describes the way in which we program the different objects made available to use in a browser. • DOM, the Document Object Model, refers to a W 3 C standard for programming in a web page (the document). It ignores non-standard browser objects. Copyright © 2005 Department of Computer & Information Science

Standard Browser Objects window object location object history object forms object document navigator object images object screen object links object Copyright © 2005 Department of Computer & Information Science

The window Object • The window object is the frame or window that contains a web page. In addition, it represents the browser itself. • We’ve already used three window methods extensively: window. alert(), window. prompt() & window. confirm(). Copyright © 2005 Department of Computer & Information Science

The default. Status Attribute • We can update the window. default. Status attribute to change the text of a browser window’s status bar (IMPORTANT NOTE: Be certain that status bar is viewable and that Security Features that disable Java. Script access to the status bar are temporarily turned off). • General Form: window. default. Status = new string; Copyright © 2005 Department of Computer & Information Science

Take the next few minutes to examine the file called DHTMLBrowser. Objects_01. html. Copyright

The set. Interval() Method • Allows us to automatically repeat a function call at a specified number of milliseconds. Returns an “interval” object, which the window. clear. Interval() method needs to stop the repetition: object = set. Interval(“function()”, millisecond delay) Copyright © 2005 Department of Computer & Information Science

The Date Object • Although not central to the BOM, the Date object is useful for things like last modified date, calendars, clocks, etc. • Useful Date methods include get. Date(), get. Day(), get. Full. Year(), get. Month(), get. Hours(), get. Minutes() & get. Seconds() Copyright © 2005 Department of Computer & Information Science

Take the next few minutes to examine the file called DHTMLBrowser. Objects_02. html. Copyright

The history Object • The history object allows programmers to write code that navigates a web browser’s history. Includes the history. go() method, which takes an integer value to indicate whether to go back (a negative value) or forward (a positive value). Also, history. back() and history. forward() allow us to program code to navigate incrementally. Copyright © 2005 Department of Computer & Information Science

Take the next few minutes to examine the file called DHTMLBrowser. Objects_03. html. Copyright

The location Object • The location object allows programmers to write code to change the URL of the current page, effectively navigating to a different web page. We can do this one of two ways: updating the window. location. href attribute or by invoking the window. location. replace() method. The latter will also replace the previous page in the browser’s history. Copyright © 2005 Department of Computer & Information Science

Take the next few minutes to examine the file called DHTMLBrowser. Objects_04. html. Copyright

The navigator Object • The navigator object allows programmers to detect important information about the application the user runs to view a web page. Attributes navigator of can return information about the browser name (navigator. app. Name) and version and the OS (navigator. user. Agent) name and version. • Useful for writing browser-detection scripts, when you need customized DHTML scripts for various browsers. Copyright © 2005 Department of Computer & Information Science

Take the next few minutes to examine the file called DHTMLBrowser. Objects_05. html. Copyright

The screen Object • The screen object includes a group of useful attributes: window. screen. width window. screen. height window. screen. color. Depth Copyright © 2005 Department of Computer & Information Science

Take the next few minutes to examine the file called DHTMLBrowser. Objects_06. html. Copyright

The event Object • The event object allows us to build custom event handlers. Two specific attributes that we'll consider are: event. client. X event. client. Y • The two attributes above trap the X and Y positions of a mouse for mouse events like on. Click. See the next slide for an example … Copyright © 2005 Department of Computer & Information Science

Take the next few minutes to examine the file called DHTMLBrowser. Objects_07. html. Copyright

The document Object • The document object represents the current page in a web browser’s window or frame. • Central to the idea of DOM programming. • Includes a number of useful attributes in the form of built-in arrays: window. document. forms, window. document. links, & window. document. images. • We’ll cover DOM extensively in the future. Copyright © 2005 Department of Computer & Information Science

Summary • The window object is at the top of Java. Script's object hierarchy. It includes useful attributes like default. Status. • We can use the set. Interval() and clear. Interval() methods to program automatically repetitive functions. continued. . . Copyright © 2005 Department of Computer & Information Science

Summary • The history object allows us tor program code that navigates a user's browser history. • The location object gives us the ability to read and/or modify the URL of the user's browser window. continued. . . Copyright © 2005 Department of Computer & Information Science

Summary • The navigator object gives us the ability to track technical information about the user's browser. • The screen object enables us to view technical information about the user's available visible space and color depth. • The event object allows us to write customized event handlers. Copyright © 2005 Department of Computer & Information Science