1. Copyright ©2005  Department of Computer & Information Science Beginning DHTML: Working with Browser Objects

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

3. 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.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.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 W3C standard for programming in a web page (the document). It ignores non-standard browser objects.DOM, the Document Object Model, refers to a W3C standard for programming in a web page (the document). It ignores non-standard browser objects.

4. Copyright ©2005  Department of Computer & Information Science Standard Browser Objects window object locationobjecthistoryobjectdocumentobject formsobjectimagesobjectlinksobject navigatorobjectscreenobject

5. 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.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().We’ve already used three window methods extensively: window.alert(), window.prompt() & window.confirm().

6. Copyright ©2005  Department of Computer & Information Science The defaultStatus Attribute We can update the window.defaultStatus 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 JavaScript access to the status bar are temporarily turned off).We can update the window.defaultStatus 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 JavaScript access to the status bar are temporarily turned off). General Form: window.defaultStatus = new string;General Form: window.defaultStatus = new string;

7. Copyright ©2005  Department of Computer & Information Science Take the next few minutes to examine the file called DHTMLBrowserObjects_01. html.

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

9. 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.Although not central to the BOM, the Date object is useful for things like last modified date, calendars, clocks, etc. Useful Date methods include getDate(), getDay(), getFullYear(), getMonth(), getHours(), getMinutes() & getSeconds()Useful Date methods include getDate(), getDay(), getFullYear(), getMonth(), getHours(), getMinutes() & getSeconds()

10. Copyright ©2005  Department of Computer & Information Science Take the next few minutes to examine the file called DHTMLBrowserObjects_02. html.

11. Copyright ©2005  Department of Computer & Information Science 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.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.

12. Copyright ©2005  Department of Computer & Information Science Take the next few minutes to examine the file called DHTMLBrowserObjects_03. html.

13. Copyright ©2005  Department of Computer & Information Science 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.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.

14. Copyright ©2005  Department of Computer & Information Science Take the next few minutes to examine the file called DHTMLBrowserObjects_04. html.

15. Copyright ©2005  Department of Computer & Information Science 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.appName ) and version and the OS ( navigator.userAgent ) name and version.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.appName ) and version and the OS ( navigator.userAgent ) name and version. Useful for writing browser-detection scripts, when you need customized DHTML scripts for various browsers.Useful for writing browser-detection scripts, when you need customized DHTML scripts for various browsers.

16. Copyright ©2005  Department of Computer & Information Science Take the next few minutes to examine the file called DHTMLBrowserObjects_05. html.

17. Copyright ©2005  Department of Computer & Information Science The screen Object The screen object includes a group of useful attributes: window.screen.width window.screen.height window.screen.colorDepthThe screen object includes a group of useful attributes: window.screen.width window.screen.height window.screen.colorDepth

18. Copyright ©2005  Department of Computer & Information Science Take the next few minutes to examine the file called DHTMLBrowserObjects_06. html.

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

20. Copyright ©2005  Department of Computer & Information Science Take the next few minutes to examine the file called DHTMLBrowserObjects_07. html.

21. Copyright ©2005  Department of Computer & Information Science The document Object The document object represents the current page in a web browser’s window or frame.The document object represents the current page in a web browser’s window or frame. Central to the idea of DOM programming.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.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.We’ll cover DOM extensively in the future.

22. Copyright ©2005  Department of Computer & Information Science Summary The window object is at the top of JavaScript's object hierarchy. It includes useful attributes like defaultStatus.The window object is at the top of JavaScript's object hierarchy. It includes useful attributes like defaultStatus. We can use the setInterval() and clearInterval() methods to program automatically repetitive functions.We can use the setInterval() and clearInterval() methods to program automatically repetitive functions. continued...

23. Copyright ©2005  Department of Computer & Information Science Summary The history object allows us tor program code that navigates a user's browser history.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.The location object gives us the ability to read and/or modify the URL of the user's browser window. continued...

24. 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 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 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.The event object allows us to write customized event handlers.