JAVASCRIPTS AND HTML DOCUMENTS - · PDF fileDOM (Document Object Model) •Is an API that defines an interface between XHTML documents and application program developed by

JAVASCRIPTS AND HTML

DOCUMENTS

CHAPTER 7

JAVASCRIPT II

DOM (Document Object Model)• Is an API that defines an interface between XHTML

documents and application program developed by the World Wide Web Consortium (W3C),.

• a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML document

• It provides a structured, object-oriented representation of the individual elements and content in a page with methods for retrieving and setting the properties of those objects

DOM (Document Object Model)

• The DOM is most often used in conjunction with JavaScript. That is, the code is written in JavaScript, but it uses the DOM to access the web page and its elements. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API.

DOM (Document Object Model)

• DOM specification consist of collection of interface similar to java interfaces to define the object method and properties associated with their respective node types.

• With DOM users can write code to create document, change, add, delete elements and their content.

Status of the DOM• DOM Level1

– W3C recommendation, 1 Oct. 1998.

• DOM Level2– W3C recommendation, 13 Nov. 2000.

• DOM Level3– W3C candidate recommendation, 7 Nov. 2003

• There are many parts in the DOM (e.g. DOM Level2 contains DOM Level2 Core, DOM Level2 Event, etc.).

• Generally speaking, we use the term “DOM” for “DOM Core” if no specific indication.

The DOM structure model

• The DOM presents documents as a hierarchy of Node objects that also implement other, more specialized interfaces.– What is a node object?

• Element, attribute, etc.• We can say that “everything” in an XML document is a node

object.

• Some types of nodes may have child nodes of various types, and others are leaf nodes that cannot have anything below them in the document structure.

The DOM presents an HTML document as a tree-structure.

The node tree below shows the set of nodes, and the connections between them. The tree starts at the root node and branches out to the text nodes at the lowest level of the tree:

HTML DOM Properties and Methods

• The programming interface of the DOM is defined by standard properties and methods.

• Properties are often referred to as something that is (i.e. the name of a node).

• Methods are often referred to as something that is done (i.e. remove a node).

<html><body>

<p id="intro">Hello World!</p>

<script type="text/javascript">txt=document.getElementById("intro").innerHTML;document.write("<p>The text from the intro paragraph: " + txt + "</p>");</script>

</body></html>

getElementById is a method, while innerHTML is a property.

HTML DOM Access Nodes

You can access a node in three ways:

• By using the getElementById() method

• By using the getElementsByTagName() method

• By navigating the node tree, using the node relationships

getElementById() method

<html><body>

<p id="intro">Hello World!</p><p>This example demonstrates the <b>getElementById</b> method!</p>

<script type="text/javascript">x=document.getElementById("intro");document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>");</script>

</body></html>

getElementsByTagName()

• <html>• <body>

• <p>Hello World!</p>• <p>The DOM is very useful!</p>• <p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

• <script type="text/javascript">• x=document.getElementsByTagName("p");• document.write("Text of first paragraph: " + x[0].innerHTML);• </script>

• </body>• </html>

the node relationships

• <html>• <body>

• <p id="intro">Hello World!</p>

• <script type="text/javascript">• x=document.getElementById("intro");• document.write(x.firstChild.nodeValue);• </script>

• </body>• </html>

HTML DOM - Events

Every element on a web page has certain events which can trigger JavaScript functions. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML elements.

Examples of events:• A mouse click• A web page or an image loading• Mousing over a hot spot on the web page• Selecting an input box in an HTML form• Submitting an HTML form

EVENTS AND EVENT HANDLINGEvent Tag Attributeabort onAbort

blur onBlur

change onChange

click onClick

error onError

focus onFocus

load onLoad

mouseout onMouseOut

mouseover onMouseOver

reset onReset

resize onResize

select onSelect

submit onSubmit

unload onUnload

15

EVENTS AND EVENT HANDLING• The same attribute can appear in several different tags

– e.g., The onClick attribute can be in <a> and <input>

• A text element gets focus in three ways:1. When the user puts the mouse cursor over it and presses the left

button

2. When the user tabs to the element

3. By executing the focus method

• Event handlers can be specified in two ways:1. By assigning the event handler script to an event tag attribute

onClick = "alert('Mouse click!');“

onClick = "myHandler();“

• Example: the load event - triggered when the loading of a document is completed

16

EVENTS AND EVENT HANDLING

<html>

<head><title> The onLoad event handler></title>

<script type = "text/javascript">



</script>

</head>

<body onload="load_greeting();">

</body></html>

17

EVENTS AND EVENT HANDLING• Radio buttons

<input type = "radio" name = "button_group“ value = "blue" onClick = "handler()">

– The checked property of a radio button object is true if the button is pressed

– Can’t use the element’s name to identify it, because all buttons in the group have the same name

– Must use the DOM address of the element, e.g.,var radioElement = document.myForm.elements;

– Now we have the name of the array of elementsfor (var index = 0; index < radioElement.length; index++) {

if (radioElement[index].checked) {

element = radioElement[index].value;

break;

}

}

18

EVENTS AND EVENT HANDLING2. Event handlers can be specified by assigning them to

properties of the JavaScript objects associated with the HTML elements– The property names are lowercase versions of the attribute names

– If the event handler is a function, just assign its name to the property, as in

document.myForm.elements[0].onclick = myHandler;

– This sets the handler for the first element in the form

– This would need to follow both the handler function and the HTML form

– If this is done for a radio button group, each element of the array must be assigned

- The disadvantage of specifying handlers by assigning them to event properties is that there is no way to use parameters

19

EVENTS AND EVENT HANDLING– The advantage of specifying handlers by assigning them to event

properties are:1. It is good to keep HTML and JavaScript separate2. The handler could be changed during use

• Checking Form Input– A good use of JavaScript, because it finds errors in form input before it

is sent to the server for processing– Things that must be done:

1. Detect the error and produce an alert message2. Put the element in focus (the focus function)3. Select the element (the select function)

– The focus function puts the element in focus, which puts the cursor in the elementdocument.getElementById("phone").focus();

– The select function highlights the text in the element– To keep the form active after the event handler is finished, have it

return false

20

EVENTS AND EVENT HANDLING• Example – comparing passwords

– If a password will be used later, the user is asked to type it in twice

– The program must verify that the second typing of the password is the same as the first

– The form just has two password input boxes to get the passwords and Reset and Submit buttons

– The event handler is triggered by the Submit button

• Handler actions:1. If no password has been typed in the first box, focus on that box and

return false

2. If the two passwords are not the same, focus and select the first box and return false. if they are the same, return true

--> SHOW pswd_chk.html

21

• END HERE

Documents

JAVASCRIPTS AND HTML DOCUMENTS - · PDF fileDOM (Document Object Model) •Is an API that defines an interface between XHTML documents and application program developed by