280 likes | 413 Views
Web Application Development. Client Side Programming ( Events & DOM). Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College. Event Driven Paradigm. Action Event Handling ( Also called as handler ) Function. Functions. function anyFunction () { alert(“Inside anyFunction”); }
E N D
Web Application Development Client Side Programming(Events & DOM) Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College
Event Driven Paradigm • Action • Event • Handling (Also called as handler) • Function
Functions functionanyFunction(){ alert(“Inside anyFunction”); } functionsum(num1, num2){ return num1 + num2; }
Functions ~Parameter Passing functioncalculateGrade(marks){ if (marks >= 90 && marks <= 100){ return “A”; } else if (marks >= 80){ return “B”; } else if (marks >= 70){ return “Pass”; } }
Document Object Model • API (Application Programming Interface) • For how JavaScript Programs can access and manipulate the HTML Document • DOM Standardization
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
Mouse Events source: wikipedia
Keyboard Events source: wikipedia
Form source: wikipedia
WindowObject source: wikipedia
History Object source: w3schools
Location Object source: w3schools
WindowObject source: w3schools
Cont.. source: w3schools
Navigator Object • Detecting Browser Version • navigator.appName • navigator.appVersion • navigator.userAgent
HTML - DOM <html> <head> <title>My Title</title> </head> <body> <a href="someFile.html">My link</a> <h1>My header</h1> </body> </html>
HTML - DOM Source: w3schools.com
Accessing Nodes in DOM • getElementByTagId • getElementsByTagName • Traverse the DOM Tree
Adding an Element Dynamically • function addElement() { var newdiv = document.createElement(“div”); newdiv.setAttribute(“id”,”myDiv”); newdiv.innerHTML = “Element added!”; }
Removing an Element Dynamically function removeElement(divToRemove) { var parentDiv =document.getElementById('myDiv'); parentDiv.removeChild(divToRemove); }
AddEventListener var button = window.getElementById(“msgButton”); button.addEventListener(“click”, sayHello, false); function sayHello() { window.alert(“Hello”); }
RemoveEventListener • removeEventListener • The event listener will no longer exist!
Useful Links for DOM • 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]
Timer • Sets the timeout for the function • var tid =setTimeout("timedCount()", 1000); • Clears the timout • clearTimeout(tid);
Debugging • Aptana Debugger • Firebug • Extension for Firefox
Debugging • Breakpoints • Call Stack • Watch & Inspect • Step-into, Step-over, Step-out
The End! It’s NOT !