1 dynamic html (dhtml) representation and management of data on the internet
Post on 15-Jan-2016
224 views
TRANSCRIPT
![Page 1: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/1.jpg)
1
Dynamic HTML (DHTML)Dynamic HTML (DHTML)
Representation and
Management of Data on the
Internet
![Page 2: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/2.jpg)
2
What is Dynamic HTMLWhat is Dynamic HTML
• Dynamic HTML (DHTML) is an all-in-one word for web pages that use – Hypertext Markup Language (HTML),
– Cascading Style Sheets (CSS), and
– Rely on JavaScript to make the web pages interactive
• DHTML describes the abstract concept of – breaking up a page into elements that can be
manipulated
– exposing those elements to a scripting language
– the script performs the manipulations
![Page 3: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/3.jpg)
3
Why Do We Need DHTML?Why Do We Need DHTML?
• HTML in its traditional form is not
powerful enough to create the interactive
and multimedia-rich documents
• Without DHTML, the browser must
download another page from the server to
change what the user sees on the screen
![Page 4: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/4.jpg)
4
JavaScript (+)JavaScript (+)
• JavaScript can: – Control document appearance and content
– Control the behavior of the browser
– Interact with document content
– Interact with the user
– Read and write client state with cookies
– Interact with applets
– Manipulate embedded images
![Page 5: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/5.jpg)
5
JavaScript (-)JavaScript (-)
• What JavaScript cannot do:
– No graphics capabilities
– No reading/writing of files on the client
side
– No multithreading
![Page 6: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/6.jpg)
6
We Will ShowWe Will Show
• Getting information on the browser
• Document manipulations– Content
– Style
• Events handling
• Forms validation
• Using cookies
![Page 7: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/7.jpg)
7
Dynamic HTML Object Dynamic HTML Object Model (DOM)Model (DOM)
• Gives access to all the elements on the Web page:– Frames
– Applets
– Images
– Forms
– StyleSheets
– etc.
• Scripts are used to dynamically change objects and thus, change the Web page
![Page 8: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/8.jpg)
8
The Object ModelThe Object Model
• Naming hierarchy used to access
individual elements of a HTML
document
• Easy to use if you name all entities:
– Forms, fields, images, etc.document.form[1].text[2].value
document.myform.book.value
![Page 9: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/9.jpg)
9
DOM ExampleDOM Example
<FORM NAME=“myform” ACTION=…>
Please enter Your age:
<INPUT TYPE=“TEXT” NAME=“age”><BR>
and the name of your favorite book:
<INPUT TYPE=“TEXT” NAME=“book”><BR>
</FORM>
• From JavaScript you can get the age input field as: document.myform.age.value
![Page 10: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/10.jpg)
10
In Netscape
![Page 11: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/11.jpg)
11
window
plugins
document
document
document
frames
history
navigator
location
event
screen
all
collections
anchors
applets
body
embeds
images
forms
filters
links
plugins
styleSheets
scripts
objects In IE
![Page 12: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/12.jpg)
12
Different BrowsersDifferent Browsers
Different browser Different JavaScript
Internet Explorer JavaScript
NetscapeJavaScript
![Page 13: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/13.jpg)
13
A Solution: Use JavaScript to A Solution: Use JavaScript to Detect the browserDetect the browser
• The document.layers object is specific to
Netscape 4.0, while the document.all
object is specific to IE 4.0 <SCRIPT LANGUAGE="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) doSomethingNetscape()
if (ie4) doSomeThingExplorer()
}
//-->
</SCRIPT>
![Page 14: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/14.jpg)
14
Collections Collections allall and and childrenchildren
• all is used to refer to all the descendents of an object
• children is used to access only direct children
for(var loop=0; loop<document.all.length; ++loop)
elements += “<BR>”+document.all[loop].tagName;
![Page 15: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/15.jpg)
15
Window ObjectWindow Object
![Page 16: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/16.jpg)
16
The Window ObjectThe Window Object
• Built-in object called window
• Many methods and properties for
useful features
– opening and closing other windows
– timers
– dialog boxes
– manipulating the status bar
![Page 17: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/17.jpg)
17
Opening and Closing Opening and Closing WindowsWindows
• To open a window, use the open method.
Gets:
– url to be opened
– name of new window
– window characteristics
• Returns a window variable
• To close a window, call "close" on the
window variable
![Page 18: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/18.jpg)
18
<html><head><title>Opening Windows</title></head><body><form><input type="button" value="Open Window"
onClick="awindow=window.open('HelloWorld.html','window2','resizable=nowidth=200,height=200')">
<P><input type="button" value="Close Window"
onClick="awindow.close()"></form><a href="ArrayColors.html" target="window2">
Load something else into window2</a></body></html>
RESULT
What is the difference between awindow and window2?
![Page 19: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/19.jpg)
19
Using TimersUsing Timers
• setInterval Evaluates an expression or calls a
function every time a specified number of
milliseconds elapses
• setTimeout Evaluates an expression or calls a
function once after a specified number of
milliseconds has elapsed
• clearInterval Cancels a timeout that was set with
the setInterval method
• clearTimeout Cancels a timeout that was set with
the setTimeout method
![Page 20: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/20.jpg)
20
<html><head><title>OnLoad Example></title><script language="JavaScript">var seconds=0
function startTimer() { window.setInterval("updateTime()", 1000);}
function updateTime() { a = document.getElementById("soFar"); soFar.innerText=++seconds}</script></head><body onload="startTimer()">Seconds that you have spent looking at this page:<a id="soFar" style="font-weight: bold">0</a></body></html>
RESULT
![Page 21: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/21.jpg)
21
Window Dialog BoxesWindow Dialog Boxes
alert:
confirm: returns true or false
prompt:returns value entered ornull if no value was entered
![Page 22: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/22.jpg)
22
<HTML><HEAD> <TITLE>Dialogs Example</TITLE></HEAD><BODY> <FONT SIZE = '5'> <P>Hello, this page will help you to install viruses in your computer.<SCRIPT LANGUAGE = "JavaScript">num = prompt("Enter the number of viruses to install", 10);document.write("You have asked to install " + num + " viruses.");</SCRIPT><P>First, you should confirm the installation.<P><SCRIPT LANGUAGE = "JavaScript">if (confirm("Are you ready for the virus installation?")) { alert("Starting the virus installation.") document.write("Thank you for installing our viruses in" + " your computer.")}</SCRIPT></FONT></BODY></HTML> RESULT
![Page 23: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/23.jpg)
23
Status BarStatus Bar
• change window.status to change the
status bar value
• change window.defaultStatus to
change the default value of the status
bar
• recall fibonacci example from last
week
![Page 24: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/24.jpg)
24
Information about the Information about the BrowserBrowser
• The Window object contains references
to three objects that contain
information about the browser or the
browser window itself:
– the Navigator object
– the Location object
– the History object
![Page 25: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/25.jpg)
25
Location and HistoryLocation and History
• location:
– properties: hostname
– methods: reload(url), replace(url)
• history: (an array of urls)
– properties: current, next, previous
– methods: go(int)
![Page 26: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/26.jpg)
26
<html> <head><title>Navigator Properties</title><script language="JavaScript">document.write("<h1>Properties</h1>")for (prop in navigator) document.write(prop + " = " + navigator[prop] + "<br>")document.write("<h1>Properties</h1>")for (i=0; i < navigator.plugins.length; i++) document.write(navigator.plugins[i].name + "<br>")
document.write("<h1>Mime Types</h1>")for (i=0; i < navigator.mimeTypes.length; i++) document.write(navigator.mimeTypes[i].type + "<br>")
</script></head><body></body> </html>
RESULT
![Page 27: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/27.jpg)
27
![Page 28: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/28.jpg)
28
More System InfoMore System Info
• Some other navigator properties:
– navigator.appVersion
– navigator.appName
<html> <head><title>Navigator Properties</title>
<script language="JavaScript">
with (navigator) {
document.write("<p>AppName=", appName);
document.write("<p>Version=", appVersion);
}</script></head><body></body> </html> RESULT
![Page 29: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/29.jpg)
29
Changing the Content of a Changing the Content of a PagePage
![Page 30: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/30.jpg)
30
Manipulating ObjectsManipulating Objects
• We saw that you can replace text
(recall the timer example)
• Here is an expanding list, using this
idea
RESULT
![Page 31: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/31.jpg)
31
<HTML><HEAD><TITLE>An Hello World Example</TITLE><SCRIPT LANGUAGE = "JavaScript">var expanded = -1var unexpandedText=[ "<a onclick='expand(0)'>+</a> Item 1 of the Menu", " <a onclick='expand(1)'>+</a> Item 2 of the Menu", " <a onclick='expand(2)'>+</a> Item 3 of the Menu"]var expandedText=[ "<a onclick='expand(0)'>=</a> Item 1 of the Menu<ul> " + "<li> SubItem 1 </li> <li> SubItem 2 </li> </ul>", "<a onclick='expand(1)'>=</a> Item 2 of the Menu<ul> " + "<li> SubItem 1b </li></ul>", "<a onclick='expand(2)'>=</a> Item 3 of the Menu<ul> " + "<li> SubItem 2b </li> </ul>"]
![Page 32: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/32.jpg)
32
function expand(num) { if (expanded != -1) { var a = document.getElementById("item" + expanded); a.innerHTML = unexpandedText[expanded] } if (expanded == num) expanded = -1 else expanded = num if (expanded != -1) { var b = document.getElementById("item" + num); b.innerHTML = expandedText[num] }}</SCRIPT><STYLE> ul {list-style-type:none} a {color:red}</STYLE></HEAD>
![Page 33: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/33.jpg)
33
<BODY><ul> <li id = "item0">
<a onclick="expand(0)">+</a> Item 1 of the Menu </li> <li id = "item1">
<a onclick="expand(1)">+</a> Item 2 of the Menu </li> <li id = "item2">
<a onclick="expand(2)">+</a> Item 3 of the Menu </li></ul> </BODY></HTML>
RESULT
![Page 34: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/34.jpg)
34
ProblemProblem
• In the previous example, when the
mouse was over the + and =, the
mouse was not a “hand”.
• To make the normal hand, the a
element must be a link. Where to?
![Page 35: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/35.jpg)
35
Solution: JavaScript Solution: JavaScript ProtocolProtocol
• You can href to something of the form javascript:code
• Then, the code is performed. If the code does not return a value, nothing more is done
• If the code returns a value, the value is considered a new URL which will be loaded.
• Example:– <A HREF="javascript:alert('Hello World'); return
‘HelloWorld.html’">Hello World</A>
– <A HREF=“javascript:void(0)”> … </A>
• The keyword void makes sure that nothing is returned
![Page 36: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/36.jpg)
36
Solution: JavaScript Solution: JavaScript ProtocolProtocol
• To fix our example: add href to
javascript:void(0) to each link
• Add additional style declarations,
– a:link {TEXT-DECORATION:none; COLOR: red}
– a:visited {TEXT-DECORATION:none; COLOR: red}
– a:active {TEXT-DECORATION:none; COLOR: red}
– a:hover {TEXT-DECORATION:none; COLOR: red}
RESULT
![Page 37: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/37.jpg)
37
Manipulating ObjectsManipulating Objects
• You can also replace images in the
page dynamically by setting their
source
![Page 38: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/38.jpg)
38
<HTML><HEAD><TITLE>Images Example</TITLE><SCRIPT LANGUAGE = "JavaScript">pageImages = new Array('dino.gif', 'monkey.gif', 'witch.gif');imgNo = 0 ;
function replaceImage() {imgNo = (imgNo + 1) % pageImages.length;document.image.src = pageImages[imgNo];
}</SCRIPT></HEAD><BODY><FONT SIZE = '5'> This is a picture:<IMG SRC="dino.gif" name="image"><BR><FORM NAME="replacePicture"><INPUT TYPE="button" VALUE="Replace the Picture"
onClick="replaceImage()"></FORM></FONT></BODY></HTML>
RESULT
![Page 39: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/39.jpg)
39
Changing the StyleSheetChanging the StyleSheet
• You have seen that you can define the
style of a page in an external CSS page
• How can we allow the user to change
the style, i.e., change the CSS used?
• Why would we want this?
![Page 40: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/40.jpg)
40
Changing the StyleSheetChanging the StyleSheet
• Define the stylesheets in your document:
– <LINK REL="stylesheet" ID HREF="js_oud.css"
DISABLED>
– <LINK REL="stylesheet" HREF="js.css">
• For some browsers, this will disable the first
style sheet. For it to work on netscape, add:if (document.getElementsByTagName)
document.getElementsByTagName('link')[0].disabled =
true;
![Page 41: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/41.jpg)
41
Changing the StyleSheetChanging the StyleSheetfunction changeCSS(nr) {
if (document.getElementsByTagName)
x = document.getElementsByTagName('link');
else if (document.all) x = document.all.tags('link');
else {
alert('This script does not work in your browser');
return;
}
nr--;
for (var i=0;i<x.length;i++) {
dis = !(i == nr);
x[i].disabled = dis;
} }RESULT
![Page 42: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/42.jpg)
42
QuestionQuestion
• How would you create a banner ad that
changes automatically every 5 seconds?
• How would create banner ads that were also
a hyperlink to a site that change
automatically every 5 seconds?
• How would you create a picture that
changes when your mouse is over it? (i.e., a
rollover image)
![Page 43: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/43.jpg)
43
Event ModelEvent Model
![Page 44: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/44.jpg)
44
Javascript EventsJavascript Events
• JavaScript supports an event handling system– You can tell the browser to execute JavaScript
commands when some event occurs
• Events usually occur due to users actions, for example, – clicking a button,
– changing a text field
– moving the mouse over a link
– …
![Page 45: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/45.jpg)
45
Events on TAGSEvents on TAGS
• If an event applies to an HTML tag, then you
can define an event handler for it
• The name of an event handler is the name of
the event, preceded by "on“
• For example, the event handler for the focus
event is onFocus
• The general syntax is
<TAG eventHandler="JavaScript Code">
![Page 46: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/46.jpg)
46
<HEAD><SCRIPT>function compute(f) { if (confirm("Are you sure?")) f.result.value = eval(f.expr.value) else alert("Please come back again.")}</SCRIPT></HEAD><BODY><FORM>Enter an expression:<INPUT TYPE="text" NAME="expr" SIZE=15 ><INPUT TYPE="button" VALUE="Calculate"
onClick="compute(this.form)"><BR>Result:<INPUT TYPE="text" NAME="result" SIZE=15 ></FORM></BODY>
![Page 47: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/47.jpg)
47
<SCRIPT LANGUAGE="JavaScript">function fun1() { ...}function fun2() { ...}</SCRIPT><FORM NAME="myForm"><INPUT TYPE="button" NAME="myButton" onClick="fun1()"></FORM><SCRIPT>document.myForm.myButton.onclick=fun2</SCRIPT>
Resetting the eventHandler
![Page 48: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/48.jpg)
48
Event HandlersEvent Handlers
onAbort, onBlur, onChange, onClick, onDragDrop, onError, onFocus, onKeyDown,
onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseMove, onMouseUp,
onMouseOver, onMove, onResize, onSelect, onSelect, onSubmit, onUnload
![Page 49: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/49.jpg)
49
Events Related to DOM Events Related to DOM ObjectsObjects
onUnLoad
onLoad
onClick
onMouseUp
onMouseDown
onClick
onMouseOver
Window events
Button events
Link events
![Page 50: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/50.jpg)
50
Event ObjectEvent Object
• Each event has an event object associated with it
• The event object provides information about the event, such as – the type of event, the location of the cursor at
the time of the event
• When an event occurs, and if an event handler has been written to handle the event, the event object is sent as an argument to the event handler
![Page 51: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/51.jpg)
51
The Event Object The Event Object PropertiesProperties
• Events have many properties, and these
differ according to the browser.
• Most Interesting:
– What is the type of event?
– Which HTML element is the target of the event?
– Which key was pressed during the event?
– Which mouse button was pressed during the
event?
– What was the mouse position during the event?
![Page 52: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/52.jpg)
52
Type of EventType of Event
function eventType(e) {
if (!e) var e = window.event;
alert(e.type);
}
![Page 53: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/53.jpg)
53
Target of the EventTarget of the Event
W3C/Netscape: target, Explorer:srcElement
function eventTarget(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement; alert(targ);
}
![Page 54: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/54.jpg)
54
Key PressedKey Pressed
Function eventKey(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code); alert('Character was ' + character);
}
![Page 55: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/55.jpg)
55
Mouse Button PressedMouse Button Pressed
function eventMouse(e) {
var rightclick;
if (!e) var e = window.event;
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);
alert('Rightclick: ' + rightclick); // true or false
}
Button values (W3C): left=0, middle=1, right=2
Button values (Microsoft): left=1 middle=4 right=2
![Page 56: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/56.jpg)
56
Mouse PositionMouse Position
A complete mess. Combination of the values:
1. clientX,clientY
2. layerX,layerY
3. offsetX,offsetY
4. pageX,pageY
5. screenX,screenY
6. x,y
![Page 57: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/57.jpg)
57
Order of Event HandlingOrder of Event Handling
• Suppose that Element 1 and Element 2
both have onClick handlers and we
click in Element 2. Which handler is
called?
Element 2
Element 1
![Page 58: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/58.jpg)
58
Order of Event HandlingOrder of Event Handling
• Events are first "captured" from most
general to least general
• Events are then "bubbled" from most
specific to least specific
Element 2
Element 1
![Page 59: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/59.jpg)
59
Order of Event HandlingOrder of Event Handling
• Registering event handlers for capturing
phase is complex
• Default registration is for bubbling phase
• So, event handler of element 2 will be
called, and then the event handler of
element 1
• How do we stop an event from bubbling up?
![Page 60: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/60.jpg)
60
Order of Event HandlingOrder of Event Handling
• To stop the bubbling:
function stopEvent(e) {
if (!e) var e = window.event;
e.cancelBubble = true; // Microsoft
if (e.stopPropagation) e.stopPropagation();
//W3C
}
![Page 61: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/61.jpg)
61
<html> <head><title>Bubble Example</title><script language="JavaScript">function f1() { alert("In f1")}function f2() { alert("In f2")}function f3(e) { alert("In f3") if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); } </script></head>
![Page 62: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/62.jpg)
62
<body onClick="f1()"><p onClick="f2()"> Bubbling continues in this paragraph</p><p onClick="f3()"> Bubbling stops in this paragraph</p></body> </html>
RESULT
![Page 63: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/63.jpg)
63
Form ValidationForm Validation
![Page 64: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/64.jpg)
64
Form ValidationForm Validation
• You can have JavaScript code that
makes sure the user enters valid
information
• When the submit button is pressed the
script checks the values of all fields
• If values are illegal, you can prevent
the form information from being sent
![Page 65: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/65.jpg)
65
<script language="JavaScript">
function validate(form) {
var error = "";
if (form.text.value = = "") { error += "Please fill in the text.\n"; }
if (error != "") { alert(error); return (false); } else { return (true); }
</script>
![Page 66: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/66.jpg)
66
Checking FieldsChecking Fields
function checkform() {
if (document.myform.age.value == "") {
alert("You need to specify an age");
return(false);
} else {
return(true);
}
} Does not have to get the form as a parameter
![Page 67: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/67.jpg)
67
The FormThe Form
<FORM METHOD=‘GET’
ACTION=‘myFormServlet’ NAME=‘myform’
onSubmit="return(checkform())">
AGE: <INPUT TYPE=“TEXT” NAME=“Age”>
<INPUT TYPE=“SUBMIT”>
</FORM>
![Page 68: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/68.jpg)
68
Important Note about Important Note about Form ValidationForm Validation
• It's a good idea to make sure the user fills
out the form before submitting
• However, users can bypass your form – they
can create requests manually (or their own
forms)
• Your server programs cannot rely (solely) on
Client-Side JavaScript to validate form fields!
![Page 69: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/69.jpg)
69
CookiesCookies
![Page 70: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/70.jpg)
70
CookiesCookies
• Allow to store persistent data in a text file
• Provide a way to maintain information
between client requests (sessions)
• A cookie is added in the format
name=value;expires=expDate;path=pathValue
• If expires is missing, the cookie lasts for the
current session only (i.e., until you close the
browser)
![Page 71: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/71.jpg)
71
Limitation on CookiesLimitation on Cookies
• Cookies have these limitations:
– 300 total cookies in the cookie file
– 4 Kbytes per cookie, (for the sum of
both the cookie's name and value)
– 20 cookies per server or domain
![Page 72: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/72.jpg)
72
Setting CookiesSetting Cookies
function setCookie(name, value, expires) {
document.cookie = name + "=" + escape(value) +
"; path=/"+ ((expires == null) ? " " ; "expires=" +
expires.toGMTString());
}
var exp = new Date ();
exp.setTime(exp.getTime() + (1000 * 60 * 60 * 24 * 365));
setCookie(“myname”, “myvalue”, exp);
![Page 73: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/73.jpg)
73
Retrieving CookiesRetrieving Cookiesfunction getCookie(name) {var cname = name + “=“;var dc = document.cookie;if (dc.length > 0) { begin = dc.indexOf(cname); if (begin != -1) {
begin += cname.length;end = dc.indexOf(“;”, begin);if (end == -1) end = dc.length return unescape(dc.substring(begin, end));}
}return null;}
![Page 74: 1 Dynamic HTML (DHTML) Representation and Management of Data on the Internet](https://reader035.vdocument.in/reader035/viewer/2022062309/56649d595503460f94a3958a/html5/thumbnails/74.jpg)
74
Erasing CookiesErasing Cookies
function eraseCookie(name) {var exp = new Date();exp.setTime(exp.getTime() – (1000 * 60 * 60 * 24))setCookie(name, " ", exp)
}