1 / 28

Client Side Programming ( Events & DOM)

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”); }

salaam
Download Presentation

Client Side Programming ( Events & DOM)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Application Development Client Side Programming(Events & DOM) Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College

  2. Event Driven Paradigm • Action • Event • Handling (Also called as handler) • Function

  3. Functions functionanyFunction(){ alert(“Inside anyFunction”); } functionsum(num1, num2){ return num1 + num2; }

  4. Functions ~Parameter Passing functioncalculateGrade(marks){ if (marks >= 90 && marks <= 100){ return “A”; } else if (marks >= 80){ return “B”; } else if (marks >= 70){ return “Pass”; } }

  5. Document Object Model • API (Application Programming Interface) • For how JavaScript Programs can access and manipulate the HTML Document • DOM Standardization

  6. 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

  7. Mouse Events source: wikipedia

  8. Keyboard Events source: wikipedia

  9. Form source: wikipedia

  10. WindowObject source: wikipedia

  11. History Object source: w3schools

  12. Location Object source: w3schools

  13. WindowObject source: w3schools

  14. Cont.. source: w3schools

  15. Navigator Object • Detecting Browser Version • navigator.appName • navigator.appVersion • navigator.userAgent

  16. HTML - DOM <html> <head> <title>My Title</title> </head> <body> <a href="someFile.html">My link</a> <h1>My header</h1> </body> </html>

  17. HTML - DOM Source: w3schools.com

  18. Accessing Nodes in DOM • getElementByTagId • getElementsByTagName • Traverse the DOM Tree

  19. Adding an Element Dynamically • function addElement() { var newdiv = document.createElement(“div”); newdiv.setAttribute(“id”,”myDiv”); newdiv.innerHTML = “Element added!”; }

  20. Removing an Element Dynamically function removeElement(divToRemove) { var parentDiv =document.getElementById('myDiv'); parentDiv.removeChild(divToRemove); }

  21. AddEventListener var button = window.getElementById(“msgButton”); button.addEventListener(“click”, sayHello, false); function sayHello() { window.alert(“Hello”); }

  22. RemoveEventListener • removeEventListener • The event listener will no longer exist!

  23. 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]

  24. Timer • Sets the timeout for the function • var tid =setTimeout("timedCount()", 1000); • Clears the timout • clearTimeout(tid);

  25. Debugging • Aptana Debugger • Firebug • Extension for Firefox

  26. Debugging • Breakpoints • Call Stack • Watch & Inspect • Step-into, Step-over, Step-out

  27. The End! It’s NOT !

More Related