client side programming ( events & dom)
Post on 10-Jan-2016
39 Views
Preview:
DESCRIPTION
TRANSCRIPT
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: wikipedia
source: wikipedia
source: wikipedia
source: w3schools
source: w3schools
source: w3schools
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
top related