Sue Wills July 2009

Objects The JavaScript language is completely centered around objects, and because of this, it is known as an Object Oriented Programming Language.

What is an object? An object is a thing. For example a number is an object. An array is an object. Your browser window is an object. A form in your document is an object. There are lots more, and you can create your own objects in JavaScript.

JavaScript object In the context of a web page, a JavaScript object is any scriptable HTML element - that is any HTML element within a document that may be accessed through the JavaScript language. Scriptable HTML elements are associated with the Document Object Model, also known as the DOM. The browser window is not an HTML element, but it is a scriptable object.

Objects Objects can contain objects. For example, your document can have a form in it. This form is a 'child object' of the document. Therefore the document is the 'parent object' of the form. To reference the child object, we have to go through the parent object, eg. document.myForm

Document Object Model The Document Object Model defines the logical structure of documents and the way a document is accessed and manipulated. Document Object Model allows programmers to build documents, navigate their structure, and add, modify, or delete elements and content. Elements in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions (in xml) JavaScript can completely rewrite a page.

W3C DOM Specification The objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications. The DOM is designed to be used with any programming language.

Object Properties Objects have properties, which you can think of as characteristics of an object. Eg href (url string in the browser that determines the page your browser loads) bgColor (background color of the document) value (the text - or lack thereof - in a form text field) src (path and filename of an image)

Object methods Methods are actions that can be applied directly to objects. alert() causes an alert dialog box to appear over the page that launched it (window). write() writes content to a page (document). focus() causes the mouse cursor to be inserted into a form element (text field on form).

Dot syntax Remember that with JavaScript has to do with objects. Even the JavaScript syntax has to do with objects. To access an object, property, or method, its reference must include every object that contains it, separated by a dot. This is called the "dot syntax".

Hierarchy The complete path to an object must be included in a reference to a JavaScript object. This path is referred to as the "containment hierarchy". With HTML the path to a file uses slashes. With JavaScript objects, properties and methods you use "dots" or periods. eg document.formName.textFieldName.value

Methods And The Dot Syntax Methods are also physically attached to their objects via the dot syntax. To use a method of an object you must first include the complete path to the object (separated by dots of course) the a dot prior to the method. Eg document.formName.TextFieldName.focus() focus() is a method

Referring To Objects HTML Names Eg So the JavaScript will look like this: document.frog.legs.focus()

JavaScript Variables JavaScript variables are used to hold values or expressions. A variable can have a short name, like x, or a more descriptive name, like carname. Rules for JavaScript variable names: Variable names are case sensitive (y and Y are two different variables) Variable names must begin with a letter or the underscore character Note: Because JavaScript is case-sensitive, variable names are case-sensitive.

JavaScript data types Integers Floating point - Examples are 3.14, -3.14, 314e-2 Boolean values (true or false). String values - May be enclosed by single ' or double " quotes. The \' or \"sequence of characters will insert a quote character into a string. Arrays of any of the above types. Objects.

Functions A function contains code that will be executed by an event or by a call to the function. You may call a function from anywhere within a page (or even from other pages if the function is embedded in an external.js file). Functions can be defined both in the and in the section of a document. However, to assure that a function is read/loaded by the browser before it is called, it could be wise to put functions in the section.

End