web application development muhammad ali versonic pte asher imtiaz forman christian college

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

web application development muhammad ali versonic pte asher imtiaz forman christian college

Documents