Working Object DHTML

Beginning DHTML:Working with Browser Objects : 

Beginning DHTML:Working with Browser Objects

Goals : 

Goals By the end of this lecture you should … Understand the differences among DHTML, BOM & DOM. Understand the basic hierarchy of JavaScript objects. Understand how to program using methods & attributes of the window, history, navigator and screen objects.

Alphabet Soup: DHTML, BOM, DOM : 

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 W3C standard for programming in a web page (the document). It ignores non-standard browser objects.

Standard Browser Objects : 

Standard Browser Objects

The window Object : 

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().

The defaultStatus Attribute : 

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). General Form:window.defaultStatus = new string;

Slide 7: 

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

The setInterval() Method : 

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)

The Date Object : 

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 getDate(), getDay(), getFullYear(), getMonth(), getHours(), getMinutes() & getSeconds()

Slide 10: 

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

The history Object : 

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.

Slide 12: 

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

The location Object : 

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.

Slide 14: 

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

The navigator Object : 

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. Useful for writing browser-detection scripts, when you need customized DHTML scripts for various browsers.

Slide 16: 

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

The screen Object : 

The screen Object The screen object includes a group of useful attributes:window.screen.widthwindow.screen.heightwindow.screen.colorDepth

Slide 18: 

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

The event Object : 

The event Object The event object allows us to build custom event handlers. Two specific attributes that we'll consider are:event.clientXevent.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 …

Slide 20: 

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

The document Object : 

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.

Summary : 

Summary 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. continued ...

Summary : 

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

Summary : 

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.