CITS 1231 Web Technologies Java Script and Document
CITS 1231 Web Technologies Java. Script 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 Java. Script Objects • Java. Script 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 • W 3 C DOM Level 1 and 2 6 – See compatibility matrix.
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 object 1. object 2. object 3… • 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]](http://slidetodoc.com/presentation_image_h2/73108fc137f762d8290a5d9adc6985b8/image-11.jpg "Using Collections • The object collections are arrays of objects. document. links[0] document. links[1]")
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<document. links. length; i++) { do something with document. links[i]; } 11
Referencing Objects • Using document. all and document. get. Element. By. Id – Not all elements are associated with an object collection – Can reference these objects using their id values document. all[“id”] document. all. id document. get. Element. By. Id(“id”) id 12
Referencing Objects - Example <html> <head> </head> <body> <p id="my. Id">Hello</p> <script type="text/javascript"> var x 1=document. all["my. Id"]; var x 2=document. all. my. Id; var x 3=document. get. Element. By. Id("my. Id"); var x 4=my. Id; alert(x 1. inner. HTML+x 2. inner. HTML+x 3. inner. HTML+x 4. inner. HTML); </script> </body> </html> 13
Referencing Objects • Referencing Tags (eg p, img, table) – Internet Explorer DOM document. all. tags(tag) document. all. tags(p)[0] – W 3 C DOMs document. get. Elementsby. Tag. Name(tag) document. get. Elementsby. Tag. Name(“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. bg. Color==“black”) { document. fg. Color=“white” } else { document. fg. Color=“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. app. Name 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 (NN 4). • IE and NN 4 reference element styles differently: <p id=“my. Id" style="color: red">blah</p> <script type="text/javascript"> alert(my. Id. style. color); </script> This works in IE, not in NN 4 21 alert(document. ids[my. Id']. color); </script> This works in NN 4, not in IE
Cross-Browser Code - Example • Following example uses navigator. app. Name and conditional statements to choose correct way to reference an element’s style. • Note navigator. app. Name returns “Microsoft Internet Explorer” for IE, and “Netscape” for NN 4. <html> <head> <script> var M=false; var N=false; app=navigator. app. Name. substring(0, 1); if (app=='N') N=true; else M=true; function go() { if (M) alert(my. Id. style. color); if (N) alert(document. ids[‘my. Id']. color); } </script> </head> <body onload="go(); "> <p id=“my. Id" style="color: red">This is Red</p> </body> </html> 22 App = “M” for IE App = “N” for NN 4 IE browser only NN 4 browser only
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 place. It(id, x, y){ object=document. get. Element. By. Id(id); object. style. left=x+”px”; object. style. top=y+”px”; } 26
Your own Objects • This lecture: we worked with Java. Script’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 CITS 1231). • 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
- Slides: 27
