DHTML
&
JSON
Outline
DHTML
4 Events
JSON
Example
XML vs. JSON
Object
Array
Comments
2
DHTML
DHTML is NOT a language.
DHTML is a TERM describing the art of making
dynamic and interactive web pages.
DHTML combines HTML, JavaScript, the HTML
DOM, and CSS.
According to the World Wide Web Consortium
(W3C):
"Dynamic HTML is a term used by some vendors to
describe the combination of HTML, style sheets and
scripts that allows documents to be animated."
3
Events & Buttons
Events are the actions that the user
performs when they visit your page.
They may, for example move the mouse
around or click on buttons.
When an event happens it triggers objects
that are associated with that kind of event.
Event Handlers catch these events and
execute code in response.
4
Events can be classified into 4 categories
for ease of understanding:
◦ 1. Window Events
◦ 2. Mouse Events
◦ 3. Keyboard Events
◦ 4. Form Events
5
Window Events
The Window itself has its own events,
which trigger when a new page is starting
up (onLoad), shutting down
(onUnload),being resized (onResize),
moved (onMove), canceled (onAbort) or
when an error occurs (onError).
There is also an event triggered when the
window moves to foreground (onFocus)
or changes to background (onBlur).
6
Mouse Events
The mouse has a few events associated with it
when a button is pressed (onMousedown) on top
of an element and when it is released
(onMouseup);
When the mouse moves and the pointer is already
over an element (onMousemove) and when it
moves away from the element (onMouseout).
Events are triggered also when the pointer is over
an element (onMouseover) and when it is clicked
once (onClick) or twice (onDblclick).
7
Keyboard Events
Events can be triggered when the key is
pressed down (onKeydown) and when it
is released (onKeyup).
The complete key sequence, down press
and up release, triggers another event
(onKeypress).
8
Form Events
Events can be triggered when the reset
button on the form is clicked (onReset) or
when the submit button is clicked
(onSubmit).
Even when a content is selected on a page
(onSelect) event is generated.
9
Events
10
11
Using a Mouse click & Button for events
This script uses the button to trigger a function that will output "Hello
World" in a p element with id=“demo’.
<html>
<body>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
12
13
Using Mouse over and Mouse out
The event of mouse passing into and out
of an element is captured.
14
<!DOCTYPE html>
<html>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif"
alt="Smiley" width="32" height="32">
<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image.</p>
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</body>
</html>
15
16
Using Keyboard events
A function is triggered when the user is pressing a key in the
input field.
<html>
<body>
<input type="text" onkeypress="myFunction()">
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</body>
</html>
17
18
JSON
19
What is JSON?
JSON stands for JavaScript Object
Notation.
JSON is easy to read and write than
XML.
JSON supports array, object, string,
number and values
20
JSON Example
The JSON file must be save with .json extension.
Let's see a simple JSON example.
File: first.json
{"employees":
[
{"name":"Sonoo",
"email":"[email protected]"},
{"name":"Rahul", "email":"[email protected]"},
{"name":"John", "email":"[email protected]"}
]}
21
XML Example
<employees>
<employee>
<name>Vimal</name>
<email>[email protected]</email>
</employee>
<employee>
<name>Rahul</name>
<email>[email protected]</email>
</employee>
<employee>
<name>Jai</name>
<email>[email protected]</email>
</employee>
</employees>
22
JSON Example
JSON example can be created by object and
array. Each object can have different data such
as text, number, boolean etc.
JSON Object Example
A JSON object contains data in the form of
key/value pair. The keys are strings and the
values are the JSON types. Keys and values are
separated by colon. Each entry (key/value pair)
is separated by comma.
The { (curly brace) represents the JSON object.
23
