CITS1231 Web Technologies

JavaScript and Document Object Model

Objectives

• Define DHTML and describe its uses • Understand objects, properties, methods, and the document object model • Work with object references and object collections • Modify an object’s properties • Apply a method to an object • Work with the style object to change the styles associated with an object • Work with the properties of the display window • Create customized objects, properties, and methods

2

What’s DHTML

• After HTML, developers began to look for ways to create dynamic pages • New approach, in which the HTML code itself supported dynamic elements • Known collectively as dynamic HTML, or DHTML • Interaction of three aspects – A page’s HTML/XHTML code – A style sheet that defines the styles used in the page – A script to control the behavior of elements on the page

3

DHTML/client-side programming

• Some uses – Animated text – Pop-up menus – Rollovers – Web pages that retrieve their content from external data sources – Elements that can be dragged and dropped – Simple and quick checks on user filling in form

4

Understanding JavaScript Objects

• JavaScript is an object-based language • An object is any item associated with a Web page or Web browser • Each object has – Properties (or attributes) – Methods (or behaviours) which can change the values of properties, or have other effects

5

Document Object Model

• The organized structure of objects and events is called the document object model, or DOM • Every object related to documents or to browsers should be part of the document object model • In practice, browsers differ in the objects that their document object models support – Code should be compatible with • Netscape 4 • Internet Explorer 5 • W3C DOM Level 1 and 2 – See compatibility matrix .

6

Exploring the Document Object Model

• The document tree

7

Objects Names

• Each object is identified by an object name

8

Referencing Objects

• General form is object1.object2.object3… • For the body, you would use

document.body

• To reference the history you would use the form

window.history

• Special case: window object is the root object and you can leave out the name window. So in previous example, you can use the form

history 9

Working with Object Collections

• Objects are organized into arrays called object collections

10

Using Collections

• The object collections are arrays of objects.

document.links[0] document.links[1] //the first link on the page.

//the second link • The length property gives you the number in the collection.

• Eg, document.links.length

is the number of links For example, } { for( var i=0; i

11

Referencing Objects

• Using document.all and document.getElementById

– Not all elements are associated with an object collection – Can reference these objects using their id values

document.all[ “ id ” ] document.all.id

document.getElementById( “ id ” ) id 12

Referencing Objects - Example

Hello

13

Referencing Objects

• Referencing Tags (eg p, img, table) – Internet Explorer DOM

document.all.tags(tag) document.all.tags(p)[0]

– W3C DOMs

document.getElementsbyTagName(tag) document.getElementsbyTagName( “ p ” )[0]

– See compatibility matrix .

14

Working with Object Properties

• The syntax for setting the value of an object property is

object.property = expression

• Example

document.title = “ Avalon Books ” 15

Working with Object Properties

16

Working with Object Properties

• Some properties are read-only

17

Working with Object Properties

• Storing a Property in a Variable

variable = object.property

• Using Properties in a Conditional Expressions

if(document.bgColor== “ black ” ) { document.fgColor= “ white ” } else { document.fgColor= “ black ” } 18

Working with Object Methods

object.method(parameters) 19

Cross-Browser Web Sites

• Different browsers support different DOMs.

• In the real world (not 1231) you may need to accommodate such differences • You can create this kind of code, known as cross-browser code, using three different approaches: 1) Using Browser Detection your code determines which browser (and browser version) a user is running.

navigator.appName

gives name but exact version is hard to get. 2) Object detection means determining which DOM is used by testing which object references are recognized.

3) Common third approach is to use an API which the web browser asks for a page to be constructed from your data.

20

Cross-Browser Code - Example

• A typical example is CSS for Internet Explorer (IE) and Netscape Navigator 4 (NN4).

• IE and NN4 reference element styles differently:

blah

blah

This works in IE, not in NN4 This works in NN4, not in IE

21

Cross-Browser Code - Example

• Following example uses

navigator.appName

and conditional statements to choose correct way to reference an element’s style.

• Note

navigator.appName

and “Netscape” for NN4. returns “Microsoft Internet Explorer” for IE, App = “M” for IE App = “N” for NN4 IE browser only NN4 browser only

This is Red

22

Working with the style Object

• The syntax for applying a style is

object.style.attribute = value 23

Working with the style Object

• Setting an Element’s Position

24

Using Path Animation

By constantly resetting the position of an object on a web page we can make simple animations.

25

Moving an element

• Following code from the reference book places an object at a specified location.

function placeIt(id, x, y){ object=document.getElementById(id); object.style.left=x+ ” px ” ; object.style.top=y+ ” px ” ; }

26

Your own Objects

• This lecture: we worked with JavaScript’s built-in objects.

• Be aware that as in other Object-oriented programming languages, you can create your own classes of objects as well ( but we won’t expect you to do this in CITS1231 ).

• The programmer has to define (via “function”) what properties and methods the objects in your new class have.

• S/he can then create many instances of such Objects.

• Eg, collections of data, arrangements of screen items

27