Introduction to DHTML · too, is an event. Another example of events is like pressing any key, closing window, resizing window etc. Developers can use these events to execute JavaScript

Web Application Development UNIT-4160705 DHTML

Prepared By:Ankita ChauhanCE DEPT.-MBICT

New VVnagar

Introduction to DHTMLHTML is based on thinking of a web page like a printed page: a document that is rendered once and that is static once rendered.

The idea behind Dynamic HTML (DHTML), however, is to make every element of a page interactively controllable, before, during, and after the page is rendered.

This means you can make things move, appear and disappear, overlap, change styles, and interact with the user to your heart's content.

Through DHTML, users get a more engaging and interactive web experience without constant calls to a web server or the overhead of loading new pages, plug-ins, or large applets.

DHTML is not a language itself, but rather a combination of:

HTML 4.0 (or XHTML 1.0) JavaScript -- the Web's standard scripting language Cascading Style Sheets (CSS) -- styles dictated outside a document's content Document Object Model (DOM) -- a means of accessing a document's

individual elements

Dynamic HTML presents richly formatted pages and lets you interact with the content on those pages without having to download additional content from the server. This means that a page can respond immediately to user actions, such as a mouse click, without having to retrieve an entire new page from the server.

We begin by discussing the three main components of Dynamic HTML authoring:Positioning - precisely placing blocks of content on the page and, if desired, moving these blocks around (strictly speaking, a subset of style modifications).

Style modifications - altering the look and display of content on the page.

Event handling - how to relate user events to changes in positioning or other style modifications.



New VVnagar

Animation:

The idea behind Javascript-based animation is fairly simple; a number of DOM elements (<img />, <div> or otherwise) are moved around the page according to some sort of pattern determined by a logical equation or function.

To achieve the effect of animation, elements must be moved at a given interval or frame rate; from a programming perspective, the simplest way to do this is to set up an animation loop with a delay.

With JavaScript, it is possible to execute some code at specified time-intervals. This is called timing events.

It's very easy to time events in JavaScript. The two key methods that are used are:

setInterval() - executes a function, over and over again, at specified time intervals

setTimeout() - executes a function, once, after waiting a specified number of milliseconds

Syntax

window.setInterval("javascript function", milliseconds);

Below is an example that will display the current time. The setInterval() method is used to execute the function once every 1 second, just like a digital watch.

for ex.

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<script>

Var myVar=setInterval(myTimer,1000);

functionmyTimer() {

var d = new Date();



New VVnagar

document.getElementById("demo").innerHTML = d.toLocaleTimeString();

}

</script>

The setTimeout() Method

Syntax

window.setTimeout("javascript function", milliseconds);

Basic Animation:

Let's say that we have an object called foo which refers to a <div> element; we are going to move this with a function that is called every 20 msec via setTimeout().

This object is within a function called doMove.

functiondoMove()

{foo.style.left = (foo.style.left+10)+'px'; // pseudo-property code: Move right by 10px}

doMove(); // animate the object

This will move foo 10 pixels to the right of its current position. Not bad, but this is only one frame.

You may think a for loop would work for animation, to call this function 100times for example, expecting to see foo to slowly move 1000px to the right - in fact, you would see two "frames" here: the before (at 0px), and after (1000px) because the browser is able to skip the display of items during the loop (presumably for efficiency, or because it cannot keep up with that rate.) Therefore,



New VVnagar

you need a delay. A recursive function works well here. "Move the object, and then call this function again 20 msec from now.":

functiondoMove() {foo.style.left = (foo.style.left+10)+'px'; // pseudo-property code: Move right by 10pxsetTimeout(doMove,20); // call doMove() in 20 msec

for ex.

<script type="text/javascript">

var foo = null; // object

function doMove() {

foo.style.left = parseInt(foo.style.left)+1+'px';

setTimeout(doMove,20); // call doMove in 20msec

}

functioninit()

{

foo = document.getElementById('fooObject'); // get the "foo" object

foo.style.left = '0px'; // set its initial position to 0px

doMove(); // start animating

}

window.onload = init;

</script>



New VVnagar

</head>

<body>

<h1>Javascript animation: Demo 1</h1>

<h2>Recursive setTimeout-based animation</h2>

<div id="fooObject" style="left: 698px;">

I am foo.

</div>

</body>

The Image() objectThe Image object represents an HTML <img> element.

Creating an Image object is as simple as creating any other object in JavaScript:

varvariableName = new Image([unsigned long width, unsigned long height]);

note: width & height both are optional.

The following statement preloads the desired image:

variableName.src = "imageURL.gif";

Notice the use of the src property in the preceding statement. It enables you to associate an actual image with an instance of the Image object.

Images on the page are represented by the Image object in JavaScript. They can be accessed using the syntax:



New VVnagar

document.images.name //access image by its namedocument.images[i] //access image by its position within arraydocument.images.length //returns total number of images

Example:

Var myImage = new Image(100, 200);

myImage.src = 'picture.jpg';

console.log(myImage);

Result:

<img width="100" height="200" src="picture.jpg">

Loading multiple images with arrays

In practice, you will probably need to preload more than just one image; for example, in a menu bar containing multiple image rollovers, or if you're trying to create a smooth animation effect. This is not difficult; all you need to do is make use of JavaScript's arrays, as in the example below:

<script language="JavaScript">function preloader() {

// counter vari = 0;

// create object imageObj = new Image();



New VVnagar

// set image list images = new Array(); images[0]="image1.jpg" images[1]="image2.jpg" images[2]="image3.jpg" images[3]="image4.jpg"

// start preloading for(i=0; i<=3; i++) { imageObj.src=images[i]; }} </script>

In the above example, you define a variable i and an Image() object cleverly namedimageObj. You then define a new array called images[], where each array element stores the source of the image to be preloaded. Finally, you create a for() loop to cycle through the array and assign each one of them to the Image() object, thus preloading it into the cache.

In the below example we display 4 images alternatively using image array.

For ex.

<script>

varanims=new Array(4);

var frame=0;

vartimeout_states=null;

vartimerid;

functionimageload()

{

for(i=0;i<=3;i++)

{



New VVnagar

anims[i]=new Image();

anims[i].src=i+".jpg";

}

}

function animate()

{

document.ani.src=anims[frame].src;

frame++;

if(frame>3)

{

frame=0;

}

timerid=setTimeout(animate,300);

}

functioncheckButton()

{

if(document.animateform.run.value=="start")

{

document.animateform.run.value="stop";

animate();

}

else

{

document.animateform.run.value="start";



New VVnagar

clearTimeout(timerid);

}

}

</script>

</head>

<body onLoad="imageload()" >

<imgsrc="0.jpg" name ="ani" height="300" width="300"/>

<form name="animateform">

<input type="button" value="start" name="run" onClick="checkButton()">

</form>

</body>

Output:

What is an Event ?

Events are things that happen, usually user actions, that are associated with

an object.



New VVnagar

JavaScript's interaction with HTML is handled through events that occur when

the user or browser manipulates a page.

When the page loads, that is an event. When the user clicks a button, that click,

too, is an event. Another example of events is like pressing any key, closing

window, resizing window etc.

Developers can use these events to execute JavaScript coded responses, which

cause buttons to close windows, messages to be displayed to users, data to be

validated, and virtually any other type of response imaginable to occur.

Events are a part of the Document Object Model (DOM) Level 3 and every

HTML element have a certain set of events which can trigger JavaScript Code.

Examples of events

> click-A mouse click

> load-A web page or an image loading

> mouseover- Mousing over a hot spot on the web page

> select- Selecting an input box in an HTML form

> submit- Submitting an HTML form

> A keystroke

event handler:

The "event handler" is a command that is used to specify actions in response to

an event.

We can write our event handlers in Javascript of vbscript and can specify these

event handlers as a value of event tag attribute.

An event handler executes a segment of a code based on certain events

occurring within the application, such as onLoad, onClick.

JavaScript event handlers can be divided into two parts:



New VVnagar

interactive event handlers

non-interactive event handlers

An interactive event handler is the one that depends on the user interactivity

with the form or the document. For example, onMouseOver is an interactive

event handler because it depends on the users action with the mouse.

On the other hand non-interactive event handler would be onLoad, because

this event handler would automatically execute JavaScript code without the

user's interactivity.

Event handlers are embedded in documents as attributes of html tag to which

you assign JavaScript code. The syntax is:

<htmltag eventhandler=”JavaScript code”>

For ex.

<body onLoad="hello()">

Here are all the event handlers available in JavaScript:

Event Handler

USED IN Description

onabort image Loading of an image is interrupted

onload windows, image Script runs when a HTML document loads

onunload Window,Document body

Script runs when a HTML document unloads.User Exits the page.

onchange Select lists, text, textarea

Script runs when user changes the value of element.

onsubmit form Script runs when the form is submitted

onreset form Script runs when the form is reset

onselect text, textarea Script runs when the form’s element is selected

onblur Window & all form Script runs when the form’s element loses focus



New VVnagar

elements

onfocus Window & all form elements

Script runs when the form’s element gets focus

onkeydown Documents, images, links, text areas

Script runs when key is pressed

onkeypress Documents, images, links, text areas

Script runs when key is pressed and released

onkeyup Documents, images, links, textareas

Script runs when key is released

onclick Button, radio button, checkbox, submit button, reset button, link

Script runs when a user click form element or link

ondblclick Button, radio button, checkbox, submit button, reset button, link

Script runs when a user double-click mouse

onmousedown Documents, buttons, links

Script runs when mouse button is pressed

onmousemove Script runs when mouse pointer moves

onmouseout Area, link Script runs when mouse pointer moves out of an form’s element

onmouseover link Script runs when mouse pointer moves over an element

onmouseup Documents, buttons, links

Script runs when mouse button is released

Error Images, windows The loading of a document or image causes an error.

onAbort:

An onAbort event handler executes JavaScript code when the user aborts loading

an image.

See Example:

<HTML>

<TITLE>Example of onAbort Event Handler</TITLE>

<HEAD>

</HEAD>



New VVnagar

<BODY>

<H3>Example of onAbort Event Handler</H3>

<b>Stop the loading of this image and see what happens:</b><p>

<IMG SRC="reaz.gif" onAbort="alert('You stopped the loading the

image!')">

</BODY>

</HTML>

Here, an alert() method is called using the onAbort event handler when the user

aborts loading the image.

onBlur:

An onBlur event handler executes JavaScript code when input focus leaves the

field of a text, textarea, or a select option. For windows, frames and framesets the

event handler executes JavaScript code when the window loses focus. In windows

you need to specify the event handler in the <BODY> attribute.

For example:

<BODY BGCOLOR='#ffffff' onBlur="document.bgcolor='#000000'">

Note: On a Windows platform, the onBlur event does not work

with <FRAMESET>.

Event chromeIE (older version)

Firefox Safari Opera

onabort Not supported Yes Not supported Not supported Not supported



New VVnagar

See Example:

<html>

<head>

<script type="text/javascript">

function upperCase() {

var x=document.getElementById("fname").value

document.getElementById("fname").value=x.toUpperCase()

}

</script>

</head>

<body>

Enter your name:

<input type="text" id="fname" onblur="upperCase()">

</body>

</html>

onFocus:

The onfocus event occurs when an element gets focus.

The onfocus event is most often used with <input>, <select>, and <a>.

In windows you need to specify the event handler in the <BODY> attribute.

For example:

<BODY BGCOLOR="#ffffff" onFocus="document.bgcolor='#000000'">

See Example:

<HTML>

<TITLE>Example of onFocus Event Handler</TITLE>

<HEAD></HEAD>



New VVnagar

<BODY>

<H3>Example of onFocus Event Handler</H3>

Click your mouse in the text box:<br>

<form name="myform">

<input type="text" name="data" value="" size=10 onFocus='alert("You

focused the textbox!!")'>

</form>

</BODY>

</HTML>

In the above example, when you put your mouse on the text box, an alert()

message displays a message.

Onchange:

The onchange event occurs when the value of an element has been changed.

For radiobuttons and checkboxes, the onchange event occurs when the checked

state has been changed.

See Example:

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction() {

var x = document.getElementById("fname");

x.value = x.value.toUpperCase();

}



New VVnagar

</script>

</head>

<body>

Enter your name: <input type="text" id="fname"

onchange="myFunction()">

<p>When you leave the input field, a function is triggered which

transforms the input text to upper case.</p>

</body>

</html>

onClick:

The onclick event occurs when the user clicks on an element.

The onClick event handler is activated by a click on a form element. This can

mean a radio or check button, but also submit, reset, or a user-defined button. In

our example, if you click on a form element, a message should appear that tells

you which element you clicked. Here is the source code:

<html>

<head>

<title>Title of the Page</title>

<script language="JavaScript">

function message(element)

{

alert("You clicked the " + element + " element!")

}

</script>



New VVnagar

</head>

<body>

<form>

<input type="radio" name="Radio" onClick="message('Radio Button 1')">Option

1<br>

<input type="radio" name="Radio" onClick="message('Radio Button 2')">Option

2<br>

<input type="checkbox" onClick="message('Checkbutton')">Check

Button<br>

<input type="submit" value="Send" onClick="message('Send Button')">

<input type="reset" value="Reset" onClick="message('Reset Button')">

<input type="button" value="Mine" onClick="message('My very own Button')">

</form>

</body>

</html>

onLoad:

An onLoad event occurs when a window or image finishes loading. For windows,

this event handler is specified in the BODY attribute of the window. In an image,

the event handler will execute handler text when the image is loaded.

For example:

<IMG NAME="myimage" SRC="http://rhoque.com/ad_rh.jpg" onLoad="alert('You

loaded myimage')">

See Example:

<HTML>

<TITLE>Example of onLoad Event Handler</TITLE>

<HEAD>



New VVnagar

<SCRIPT LANGUGE="JavaScript">

function hello()

{

alert("Hello there...\nThis is an example of onLoad.");

}

</SCRIPT>

</HEAD>

<BODY onLoad="hello()">

<H3>Example of onLoad Event Handler</H3>

</BODY>

</HTML>

The example shows how the function hello() is called by using the onLoad event

handler.

onmouseover and onmouseout:

These two event types will help you to create nice effects with images or even with

text as well. The onmouseover event occurs when you bring your mouse over any

element and the onmouseout occurs when you take your mouse out from that

element.

onMouseOver and onMouseOut are often used to create "animated" buttons.

See Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<script language="JavaScript">



New VVnagar

picture1=new Image

picture1.src="picture1.png"

picture2=new Image

picture2.src="picture2.png"

</script>

</head>

<body>

<a onMouseOver="document.picture.src=picture2.src"

onMouseOut="document.picture.src=picture1.src">

<img name="picture" src="picture1.png" width="146" height="73"></a>

</body>

</html>

onReset:

A onReset event handler executes JavaScript code when the user resets a form by

clicking on the reset button.

See Example:

<HTML>

<TITLE>Example of onReset Event Handler</TITLE>

<HEAD></HEAD>

<BODY>

<H3> Example of onReset Event Handler </H3>

Please type something in the text box and press the reset button:<br>

<form name="myform" onReset="alert('This will reset the form!')">

<input type="text" name="data" value="" size="20">

<input type="reset" Value="Reset Form" name="myreset">



New VVnagar

</form>

</BODY>

</HTML>

In the above example, when you push the button, "Reset Form" after typing

something, the alert method displays the message, "This will reset the form!"

onSelect:

A onSelect event handler executes JavaScript code when the user selects some of

the text within a text or textarea field.

See Example:

<HTML>

<TITLE>Example of onSelect Event Handler</TITLE>

<HEAD></HEAD>

<BODY>

<H3>Example of onSelect Event Handler</H3>

Select the text from the text box:<br>

<form name="myform">

<input type="text" name="data" value="Select This" size=20

onSelect="alert('This is an example of onSelect!!')">

</form>

</BODY>

</HTML>

In the above example, when you try to select the text or part of the text, the alert

method displays the message, "This is an example of onSelect!!".

Onsubmit:



New VVnagar

Another most important event type is onsubmit. This event occurs when you try to

submit a form. So you can put your form validation against this event type.

Here is simple example showing its usage. Here we are calling a validate()

function before submitting a form data to the webserver.

If validate() function returns true the form will be submitted otherwise it will not

submit the data.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head>

</head><body><form method="POST" name="myForm" action="mouse_over_out.html" onsubmit="return validate()">.......<br/><input type="text" name="uname"/> <br/><input type="submit" value="Submit" /></form><script language="javascript" type="text/javascript">

function validate(){

var x = document.forms["myForm"]["uname"].value; if (x == null || x == "")

{alert("Name must be filled out");return false;

}}</script></body>



New VVnagar

</html>

Onkeypress:

Execute a JavaScript when a user presses a key:

<input type="text" onkeypress="myFunction()">

The onkeypress event occurs when the user presses a key (on the keyboard).

<!DOCTYPE html><html><body>

<p>A function is triggered when the user is pressing a key in the input field.</p>

<input type="text" onkeypress="myFunction()">

<script>function myFunction() { alert("You pressed a key inside the input field");}</script>

</body></html>

onkeydown Event:

Execute a JavaScript when a user is pressing a key:

<input type="text" onkeydown="myFunction()">

For ex.


<p>A function is triggered when the user is pressing a key in the input field.</p>

<input type="text" onkeydown="myFunction()">

<script>



New VVnagar

function myFunction() { alert("You pressed a key inside the input field");}</script>

</body></html>

onkeyup Event:

Execute a JavaScript when a user releases a key:

<input type="text" onkeyup="myFunction()">

The onkeyup event occurs when the user releases a key (on the keyboard).


<p>A function is triggered when the user releases a key in the input field. The function transforms the character to upper case.</p>Enter your name: <input type="text" id="fname" onkeyup="myFunction()">

<script>function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase();}</script>

</body></html>