web application development muhammad ali versonic pte asher imtiaz forman christian college
TRANSCRIPT
![Page 1: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/1.jpg)
Web Application Development
Muhammad AliVersonic Pte
Asher ImtiazForman Christian College
![Page 2: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/2.jpg)
Action
Event
Handling (Also called as handler) Function
![Page 3: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/3.jpg)
function anyFunction() {alert(“Inside anyFunction”);
}
function sum(num1, num2) {return num1 + num2;
}
![Page 4: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/4.jpg)
function calculateGrade(marks) {
if (marks >= 90 && marks <= 100) {return “A”;
} else if (marks >= 80) {
return “B”;}
else if (marks >= 70) {return “Pass”;
}}
![Page 5: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/5.jpg)
API (Application Programming Interface) For how JavaScript Programs can access
and manipulate the HTML Document
DOM Standardization
![Page 6: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/6.jpg)
▪ 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
![Page 7: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/7.jpg)
source: wikipedia
![Page 8: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/8.jpg)
source: wikipedia
![Page 9: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/9.jpg)
![Page 10: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/10.jpg)
source: wikipedia
![Page 11: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/11.jpg)
source: wikipedia
![Page 12: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/12.jpg)
source: w3schools
![Page 13: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/13.jpg)
source: w3schools
![Page 14: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/14.jpg)
source: w3schools
![Page 15: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/15.jpg)
source: w3schools
![Page 16: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/16.jpg)
Detecting Browser Version
navigator.appName
navigator.appVersion navigator.userAgent
![Page 17: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/17.jpg)
<html><head>
<title>My Title</title></head><body>
<a href="someFile.html">My link</a>
<h1>My header</h1></body>
</html>
![Page 18: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/18.jpg)
Source: w3schools.com
![Page 19: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/19.jpg)
getElementByTagId
getElementsByTagName
Traverse the DOM Tree
![Page 20: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/20.jpg)
function addElement() { var newdiv = document.createElement(“div”);
newdiv.setAttribute(“id”,”myDiv”); newdiv.innerHTML = “Element added!”;
}
![Page 21: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/21.jpg)
function removeElement(divToRemove) {
var parentDiv = document.getElementById('myDiv');
parentDiv.removeChild(divToRemove); }
![Page 22: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/22.jpg)
var button = window.getElementById(“msgButton”);
button.addEventListener(“click”, sayHello, false);
function sayHello() {window.alert(“Hello”);
}
![Page 23: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/23.jpg)
removeEventListener The event listener will no longer exist!
![Page 24: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/24.jpg)
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]
![Page 25: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/25.jpg)
Sets the timeout for the function var tid = setTimeout("timedCount()",
1000);
Clears the timout clearTimeout(tid);
![Page 26: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/26.jpg)
Aptana Debugger
Firebug Extension for Firefox
![Page 27: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/27.jpg)
Breakpoints
Call Stack
Watch & Inspect
Step-into, Step-over, Step-out
![Page 28: Web Application Development Muhammad Ali Versonic Pte Asher Imtiaz Forman Christian College](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649dab5503460f94a9a390/html5/thumbnails/28.jpg)