The JavaScript Object Model Objectives Describe the JavaScript object model. Use the window object.

Manipulate properties and methods of the document object. Use the with statement. Deploy the image object. Use the history object. Evaluate and change URL information with the location object. Use the navigator object. JavaScript = Web JavaScript was made for the web. To take advantage features and capabilities provided by a browser, special browser objects have been built into the JavaScript language. The JavaScript object model divides these objects into three groups. Three General Groups of Objects in JavaScript Object Model: browser objects language objects form field objects All three of these groups of objects provide properties and methods to create complex JavaScript programs. Remember: Objects are things that model the characteristics of real objects (Such as a button, a window, etc.) Properties are descriptive characteristics of an object, such as height or color. Methods are actions performed by objects.

Exactly what is this JavaScript Object Model? It is simply a way to divide and organize all of the objects in the browser (and their associated methods and properties) that JavaScript can take advantage of. What is containership? To understand containership, you should examine the JavaScript object model for yourself, shown on the next slide.

What is containership? Containership relates to the principle that some objects cannot be used or referenced without a reference to the container object.

Example: You cannot reference the checkbox of a form without first referencing the form.

You cant get a Tupperware bowl out of another one without first accessing the one that its contained in. Window Object highest level in the JavaScript hierarchy default object represents the frame of the browser and the things associated with it, such as scroll bars, navigation bars, menu bars, etc. What do we mean, default object? The alert method is part of the window object. When we write the alert method, we can write it as either: alert(Welcome!); or as window.alert(Welcome!); The window is optional, since window is the default object. If it wasnt, wed have to

write it. One thing you can do with the window object is open content in new windows. Now, we can do that in html by doing this: Opening Windows <a href=http://www.midsouthcc.edu target=_blank>link goes here</a> But you dont have any control over the window! By using JavaScript, you can control that window! You can control: where the window opens on the screen the size of the window whether or not the window contains scroll bars, or a menu bar whether or not the window can be resized and more! Dot Notation Remember a few slides back when you read this? When we write the alert method, we can write it as either: alert(Welcome!); or as window.alert(Welcome!); This is an example of dot notation. When you think about dot notation, think about containership and hierarchy, and most importantly, the JavaScript object model! Document Object subordinate to the window object, you must include the document in the dot notation, like this: document.write(Hello.); You can work with everything within the current document. text anchors forms links page title current location and URL current background and foreground colors. With Statement If you are going to use several properties and/or methods with a single object, you can

use the with statement. Syntax: with(objectname) { //statement(s) referencing objectname }

Image Object resides beneath the document object in the hierarchy. You can use the image object to create button rollovers. The image object is accessible as an array of the document object. An array is a group of objects or values with the same name, but accessed individually with an index number. History Object You can access previous pages visited without hitting BACK button on browser. <FORM> <INPUT TYPE=button VALUE=Back onClick = history.back();> </FORM>

Length Forward Location Object You can use the location object to change URL information. Example: <INPUT TYPE=button VALUE=Visit CIW onClick=location.href = http://www.ciwcertified.com;> Reflects information about the browser being used. var userBrowser = navigator.appName;