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

3 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

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.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.links[0] //the first link on the page. document.links[1] //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<document.links.length; i++) { do something with document.links[i]; }

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.all[ “ id ” ] document.all.id document.getElementById( “ id ” ) id

13 Referencing Objects - Example Hello var x1=document.all["myId"]; var x2=document.all.myId; var x3=document.getElementById("myId"); var x4=myId; alert(x1.innerHTML+x2.innerHTML+x3.innerHTML+x4.innerHTML);

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.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.bgColor== “ black ” ) { document.fgColor= “ white ” } else { document.fgColor= “ black ” }

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: blah alert(myId.style.color); blah alert(document.ids[myId'].color); This works in IE, not in NN4This 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 element’s style. Note navigator.appName returns “Microsoft Internet Explorer” for IE, and “Netscape” for NN4. var M=false; var N=false; app=navigator.appName.substring(0,1); if (app=='N') N=true; else M=true; function go() { if (M) alert(myId.style.color); if (N) alert(document.ids[‘myId'].color); } This is Red 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 Element’s 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){ object=document.getElementById(id); object.style.left=x+ ” px ” ; object.style.top=y+ ” px ” ; }

27 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