CITS1231 Web Technologies

1
CITS1231 Web Technologies

• JavaScript and Document Object Model

2
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 objects 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

3
Whats 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 pages 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

4
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

5
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

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

7
Exploring the Document Object Model

• The document tree

8
Objects Names

• Each object is identified by an object name

9
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

10
Working with Object Collections

• Objects are organized into arrays called object
  collections

11
Using Collections

• The object collections are arrays of objects.
• document.links0 //the first
  link on the page.
• document.links1 //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 i0 iltdocument.links.length i)
• do something with document.linksi

12
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.allid
• document.all.id
• document.getElementById(id)
• id

13
Referencing Objects - Example

• lthtmlgt
• ltheadgt
• lt/headgt
• ltbodygt
• ltp id"myId"gtHellolt/pgt
• ltscript type"text/javascript"gt
•    var x1document.all"myId"
•    var x2document.all.myId
•    var x3document.getElementById("myId")
• var x4myId
• alert(x1.innerHTMLx2.innerHTMLx3.innerHTMLx
  4.innerHTML)
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

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

15
Working with Object Properties

• The syntax for setting the value of an object
  property is
• object.property expression
• Example
• document.title Avalon Books

16
Working with Object Properties
17
Working with Object Properties

• Some properties are read-only

18
Working with Object Properties

• Storing a Property in a Variable
• variable object.property
• Using Properties in a Conditional Expressions
• if(document.bgColorblack)
• document.fgColorwhite
• else
• document.fgColorblack

19
Working with Object Methods

• object.method(parameters)

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

21
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

ltp idmyId" style"colorred"gtblahlt/pgt ltscript
type"text/javascript"gt alert(myId.style.color
) lt/scriptgt
ltp idmyId" style"colorred"gtblahlt/pgt ltscript
type"text/javascript"gt alert(document.idsmyI
d'.color) lt/scriptgt
This works in IE, not in NN4
This works in NN4, not in IE
22
Cross-Browser Code - Example

• Following example uses navigator.appName and
  conditional statements to choose correct way to
  reference an elements style.
• Note navigator.appName returns Microsoft
  Internet Explorer for IE, and Netscape for
  NN4.

lthtmlgtltheadgtltscriptgt var Mfalse var
Nfalse appnavigator.appName.substring(0,1)
if (app'N') Ntrue else Mtrue function
go() if (M) alert(myId.style.color) if
(N) alert(document.idsmyId'.color)
lt/scriptgtlt/headgt ltbody onload"go()"gt ltp
idmyId" style"colorred"gtThis is
Redlt/pgtlt/bodygtlt/htmlgt
App M for IE App N for NN4
IE browser only
NN4 browser only
23
Working with the style Object

• The syntax for applying a style is
• object.style.attribute value

24
Working with the style Object

• Setting an Elements Position

25
Using Path Animation
By constantly resetting the position of an object
on a web page we can make simple animations.
26
Moving an element

• Following code from the reference book places an
  object at a specified location.
• function placeIt(id, x, y)
• objectdocument.getElementById(id)
• object.style.leftxpx
• object.style.topypx

27
Your own Objects

• This lecture we worked with JavaScripts
  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 wont 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