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

Copyright Copyright ©2005 ©2005 Department of Computer & Information Department of Computer & Information ScienceScience

Beginning DHTML:Beginning DHTML:Working with Browser Working with Browser ObjectsObjects


GoalsGoals

By the end of this lecture you should …By the end of this lecture you should …• Understand the differences among Understand the differences among

DHTML, BOM & DOM.DHTML, BOM & DOM.• Understand the basic hierarchy of Understand the basic hierarchy of

JavaScript objects.JavaScript objects.• Understand how to program using Understand how to program using

methods & attributes of the methods & attributes of the windowwindow, , historyhistory, , navigatornavigator and and screenscreen objects.objects.


Alphabet Soup: DHTML, BOM, Alphabet Soup: DHTML, BOM, DOMDOM

• DHTML refers to the idea of generating DHTML refers to the idea of generating Web content dynamically. It relies very Web content dynamically. It relies very heavily on user input.heavily on user input.

• BOM, the Browser Object Model, describes BOM, the Browser Object Model, describes the way in which we program the different the way in which we program the different objects made available to use in a browser.objects made available to use in a browser.

• DOM, the Document Object Model, refers DOM, the Document Object Model, refers to a W3C standard for programming in a to a W3C standard for programming in a web page (the document). It ignores non-web page (the document). It ignores non-standard browser objects.standard browser objects.


Standard Browser ObjectsStandard Browser Objects

windowwindowobjectobject

locationlocationobjectobject

historyhistoryobjectobject

documentdocumentobjectobject

navigatornavigatorobjectobject

screenscreenobjectobject

formsformsobjectobject

imagesimagesobjectobject

linkslinksobjectobject


The The windowwindow ObjectObject

• The The windowwindow object is the frame or object is the frame or window that contains a web page. In window that contains a web page. In addition, it represents the browser addition, it represents the browser itself.itself.

• We’ve already used three window We’ve already used three window methods extensively: methods extensively: window.alert()window.alert(), , window.prompt() window.prompt() & & window.confirm()window.confirm()..


The The defaultStatusdefaultStatus AttributeAttribute

• We can update the We can update the window.defaultStatuswindow.defaultStatus attribute to attribute to change the text of a browser window’s change the text of a browser window’s status bar status bar ((IMPORTANT NOTEIMPORTANT NOTE: : Be certain that Be certain that status bar is viewable and that Security status bar is viewable and that Security Features that disable JavaScript access to Features that disable JavaScript access to the status bar are temporarily turned offthe status bar are temporarily turned off).).

• General Form:General Form:window.defaultStatus = window.defaultStatus = new stringnew string;;


Take the next few minutes to examine the file called DHTMLBrowserObjects_01.html.


The The setInterval()setInterval() Method Method

• Allows us to automatically repeat a Allows us to automatically repeat a function call at a specified number of function call at a specified number of milliseconds. Returns an “interval” milliseconds. Returns an “interval” object, which the object, which the window.clearInterval() method needs to window.clearInterval() method needs to stop the repetition:stop the repetition:object = object = setInterval(“setInterval(“function()function()”,”,millisecond delaymillisecond delay))


The The Date Date ObjectObject

• Although not central to the BOM, the Although not central to the BOM, the Date object is useful for things like last Date object is useful for things like last modified date, calendars, clocks, etc.modified date, calendars, clocks, etc.

• Useful Date methods include Useful Date methods include getDate()getDate(), , getDay()getDay(), , getFullYear()getFullYear(), , getMonth()getMonth(), , getHours()getHours(), , getMinutes()getMinutes() & & getSeconds()getSeconds()




The The historyhistory Object Object

• The The historyhistory object allows programmers object allows programmers to write code that navigates a web to write code that navigates a web browser’s history. Includes the browser’s history. Includes the history.go()history.go() method, which takes an method, which takes an integer value to indicate whether to go integer value to indicate whether to go back (a negative value) or forward (a back (a negative value) or forward (a positive value). Also, positive value). Also, history.back()history.back() and and history.forward()history.forward() allow us to allow us to program code to navigate incrementally.program code to navigate incrementally.




The The locationlocation Object Object

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




The The navigatornavigator Object Object

• The The navigatornavigator object allows programmers object allows programmers to detect important information about the to detect important information about the application the user runs to view a web application the user runs to view a web page. Attributes page. Attributes navigatornavigator of can return of can return information about the browser name information about the browser name ((navigator.appNamenavigator.appName) and version and the ) and version and the OS (OS (navigator.userAgentnavigator.userAgent) name and ) name and version.version.

• Useful for writing browser-detection Useful for writing browser-detection scripts, when you need customized DHTML scripts, when you need customized DHTML scripts for various browsers.scripts for various browsers.




The The screenscreen Object Object

• The The screenscreen object includes a object includes a group of useful attributes:group of useful attributes:window.screen.widthwindow.screen.widthwindow.screen.heightwindow.screen.heightwindow.screen.colorDepthwindow.screen.colorDepth




The The eventevent Object Object

• The The eventevent object allows us to build object allows us to build custom event handlers. Two specific custom event handlers. Two specific attributes that we'll consider are:attributes that we'll consider are:event.clientXevent.clientXevent.clientYevent.clientY

• The two attributes above trap the X The two attributes above trap the X and Y positions of a mouse for mouse and Y positions of a mouse for mouse events like events like onClickonClick. See the next . See the next slide for an example … slide for an example …




The The documentdocument Object Object

• The The documentdocument object represents the object represents the current page in a web browser’s window or current page in a web browser’s window or frame. frame.

• Central to the idea of DOM programming.Central to the idea of DOM programming.• Includes a number of useful attributes in Includes a number of useful attributes in

the form of built-in arrays: the form of built-in arrays: window.document.formswindow.document.forms, , window.document.linkswindow.document.links, & , & window.document.imageswindow.document.images..

• We’ll cover DOM extensively in the future.We’ll cover DOM extensively in the future.


SummarySummary

• The The windowwindow object is at the top of object is at the top of JavaScript's object hierarchy. It includes JavaScript's object hierarchy. It includes useful attributes like useful attributes like defaultStatusdefaultStatus..

• We can use the We can use the setInterval()setInterval() and and clearInterval()clearInterval() methods to program methods to program automatically repetitive functions.automatically repetitive functions.

continued ...continued ...


SummarySummary

• The The historyhistory object allows us tor object allows us tor program code that navigates a program code that navigates a user's browser history. user's browser history.

• The The locationlocation object gives us the object gives us the ability to read and/or modify the ability to read and/or modify the URL of the user's browser URL of the user's browser window.window.

continued ...continued ...


SummarySummary

• The The navigatornavigator object gives us the object gives us the ability to track technical information ability to track technical information about the user's browser. about the user's browser.

• The The screenscreen object enables us to view object enables us to view technical information about the technical information about the user's available visible space and user's available visible space and color depth.color depth.

• The The eventevent object allows us to write object allows us to write customized event handlers. customized event handlers.

Documents

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