CITS1231 Web Technologies - University of Western Australia
Download
Report
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
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 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<document.links.length; i++)
{
do something with document.links[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
<html>
<head>
</head>
<body>
<p id="myId">Hello</p>
<script type="text/javascript">
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);
</script>
</body>
</html>
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:
<p id=“myId"
style="color:red">blah</p>
<p id=“myId"
style="color:red">blah</p>
<script type="text/javascript">
<script type="text/javascript">
alert(myId.style.color);
</script>
This works in IE, not in NN4
21
alert(document.ids[myId'].color);
</script>
This works in NN4, not in IE
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.
<html>
<head>
<script>
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);
}
</script>
</head>
<body onload="go();">
<p id=“myId" style="color:red">This is Red</p>
</body>
</html>
22
App = “M” for IE
App = “N” for NN4
IE browser only
NN4 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 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