client side programming ( events & dom)

Web Application Development

Muhammad AliVersonic Pte

Asher ImtiazForman Christian College

Action

Event

Handling (Also called as handler) Function

function anyFunction() {alert(“Inside anyFunction”);

}

function sum(num1, num2) {return num1 + num2;

}

function calculateGrade(marks) {

if (marks >= 90 && marks <= 100) {return “A”;

} else if (marks >= 80) {

return “B”;}

else if (marks >= 70) {return “Pass”;

}}

API (Application Programming Interface) For how JavaScript Programs can access

and manipulate the HTML Document

DOM Standardization

▪ DOM – 1 (1998)▪ Complete model for an entire HTML or XML document,

including means to change any portion of the document.

▪ DOM-2 (late 2000)▪ getElementById▪ Event model▪ CSS

▪ DOM-3▪ Xpath▪ Keyboard Event Handling

source: wikipedia

source: w3schools

Detecting Browser Version

navigator.appName

navigator.appVersion navigator.userAgent

<html><head>

<title>My Title</title></head><body>

<a href="someFile.html">My link</a>

<h1>My header</h1></body>

</html>

Source: w3schools.com

getElementByTagId

getElementsByTagName

Traverse the DOM Tree

function addElement() { var newdiv = document.createElement(“div”);

newdiv.setAttribute(“id”,”myDiv”); newdiv.innerHTML = “Element added!”;

}

function removeElement(divToRemove) {

var parentDiv = document.getElementById('myDiv');

parentDiv.removeChild(divToRemove); }

var button = window.getElementById(“msgButton”);

button.addEventListener(“click”, sayHello, false);

function sayHello() {window.alert(“Hello”);

}

removeEventListener The event listener will no longer exist!

Quirksmode - DOM Traversal[http://www.quirksmode.org/dom/intro.html ]

w3schools - DOM Tutorials [http://www.w3schools.com/HTMLDOM/dom_examples.asp]

MREDKJ - DOM Tutorials[http://www.mredkj.com/tutorials/htmljs.html]

Sets the timeout for the function var tid = setTimeout("timedCount()",

1000);

Clears the timout clearTimeout(tid);

Aptana Debugger

Firebug Extension for Firefox

Breakpoints

Call Stack

Watch & Inspect

Step-into, Step-over, Step-out

client side programming ( events & dom)

Documents