Transcript CITS1231 Web Technologies - University of Western Australia
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 • 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 HelloReferencing Objects
Referencing Objects - Example
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 IE21
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 onlyThis 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