UNIT-III-Chapter 6 [Autosaved].pptx

UNIT –III
Chapter 6
Dynamic Documents With
JavaScript

Topics to be Discussed
1. Introduction
2. Positioning Elements
3. Moving Elements
4. Element Visibility
5. Changing Color and Fonts
6. Dynamic Content
7. Stacking Elements
8. Locating the Mouse Cursor
9. Reacting to a Mouse Click
10. Slow Movement of Elements
11. Dragging and Dropping Elements

Introduction
Dynamic HTML document is an HTML document
that in some way can be changed while it is
being displayed by browser
Changes to the document can occur
• When they are explicitly requested by user
interaction
• At regular timed intervals
• Browser event occurs

Changes that can be applied to document
• Positioning of HTML element
• Elements can be made to disappear and reappear
• The color of the document both background and
foreground of element can be changed
• The font, font size, and font style of displayed text
can be changed

Contd..
• Content of element can be changed
• Overlapping elements can be positioned in a
stacking order
• Determine the position of the mouse cursor
• Elements can be made to move around the
display screen
• Allow the user to drag and drop them anywhere
in the display window

Contd..
By writing client side JavaScript code we can apply
all these effects. JavaScript manipulates the
objects of the Document Object Model(DOM)
displayed document

Dynamic HTML
It is not a new markup language
It is collection of technologies that allows dynamic
changes to documents defined with HTML.
Dynamic HTML document is an HTML document whose
tag attribute, tag contents, or element style properties
can be changed by user interaction or the occurrences
of a browser event
JavaScript code embedded in html can make such
changes by manipulating the DOM objects associated
with HTML document.

Positioning Elements
Cascading Style Sheets-Positioning (CSS-P) was
released in 1997.
CSS-P is completely supported by IE8,IE9,FX3 and
C12.
JavaScript can change the positioning style
properties to place the element anywhere in the
display of a document and also to move an element
to new position in the display dynamically.

position property
Position property of CSS has three possible values
absolute
relative
static
Absolute positioning
The absolute position is specified when the
element is to be placed at a specific location in the
document display without regard to the position
of another element.

Example
Write an HTML document to display a
paragraph of text to appear 100 pixels from the
left edge and 200 pixels from the top of the
display window.
left, right, top and bottom are used to set the
distance from respective edge of the display
window.

HTML CODE
<html>
<head>
<title>Validate Input</title>
</head>
<body >
<p style="position: absolute;left:100px;top:200px;">
This course is an introduction to the basic concepts of programming
languages,
with a strong emphasis on functional programming. The course uses
the languages ML, Racket, and Ruby as vehicles for teaching the concepts,
but the real intent is to teach enough about how any language “fits
together” to make
you more effective programming in any language -- and in learning
new ones.
</p>
</body>
</html>

Contd..
Using absolute positioning we can superimpose
special text over a paragraph of ordinary text to
create an effect like a watermark on paper.
Write an HTML document to illustrate that
implements the watermark property.

HTML CODE
<html>
<head>
<style type="text/css">
.normal{font-family:Times;font-size:1.2em;width:600px;color:green;}
.w{font-family:Times;font-size:1.9em;font-style:italic;letter-spacing:0.5em;
position:absolute;top:25px;left:10px;color:red;width:500px;}
</style>
</head>
<body >
<p class="normal">
This course is an introduction to the basic concepts of programming languages,
with a strong emphasis on functional programming. The course uses the languages ML, Racket, and Ruby as
vehicles for teaching the concepts,
but the real intent is to teach enough about how any language “fits together” to make
you more effective programming in any language -- and in learning new ones.
<span class="w">HASKELL Programming</span>
</p>
</body>
</html>

Placement of nested elements
When an element is absolutely positioned
inside another positional element the top and
left property values are measured from the
enclosing element rather than browser
window.

HTML Code
<html>
<head>
.normal{position: absolute;top:100px;left:100px;font-family:Times;font-size:1.2em;width:600px;color:green;}
.w{font-family:Times;font-size:1.9em;font-style:italic;letter-spacing:0.5em;
position:absolute;top:15px;left:30px;color:red;width:500px;}
</style>
</head>
<body >
<p class="normal">
This course is an introduction to the basic concepts of programming languages,
with a strong emphasis on functional programming. The course uses the languages ML, Racket, and Ruby as
vehicles for teaching the concepts,
but the real intent is to teach enough about how any language “fits together” to make
you more effective programming in any language -- and in learning new ones.
<span class="w">HASKELL Programming</span>
</p>
</body>
</html>

Relative Positioning
An element with relative position is positioned
relative to its normal position. Normal position
is the default position when the position
property is not set, or position property set to
relative but left and top properties are not set.
Negative values for top and left in both
absolute and relative positioning property
displaces the element upward and to the left
respectively.

Example on relative position
<html>
<head>
</head>
<body >
<p style="position:relative;top:100px;">
languages,
together” to make
new ones.
</p>
</body>
</html>

Uses of Relative Position
Used to create superscripts and subscripts
Placing the values to be raised or lowered in
<span> tag and displacing them from regular
position.
Displaying text with bigger size
A word embedded in a line can be displayed
with bigger size bcz its font size property is
applied twice through outer and inner style
property.

Example
<html>
<head>
<title>Uses of relative position</title>
h1{font:2em Times}
#sp{font:2em Times; color:red;position:relative;top:15px;}
</style>
</head>
<body >
<h1>a<span style="position:relative;top:-5px;">2</h1>
<h1>b<span style="position:relative;top:10px;">2</h1>
<h1 >Apple is<span id="sp">Good</span>for Health</h1>
</body>
</html>

Static Positioning
The default value for the position is static. It is
equivalent position property set to relative but
with no values for top or left given. Statically
placed element initially cannot be displaced
from its normal position and cannot be moved
from that position later.

Example
<html>
<head>
<title>Static position</title>
</head>
<body >
<p style="position:static;top:100px;">
languages,
together” to make
new ones.
</p>
</body>
</html>

Moving Elements
HTML element whose position property is set
to either absolute or relative can be moved by
changing the top and left property values.
If its position is set to absolute the elements
moves to new values of top and left.
If its position is set to relative it moves from its
original position by distances given by the new
values for top and left.

Example
Write, test, validate the HTML document to
display an absolutely positioned image. HTML
document must include two text boxes labeled
x coordinate and y coordinate, respectively.
The user can enter new values for the top and
left properties of the image in these boxes.
When MoveIt button is pressed the image must
be displayed at new position. Write a JavaScript
file which changes the position values and store
it in separate file.

HTML Code
<html>
<head>
<title>Moving Elements</title>
<script type="text/javascript" src="a.js"></script>
</head>
<body >
<form action="">
<label>
X coordinator
<input type="text" id="1" size="3"/>
</label><br/>
<label>
y coordinator
<input type="text" id="2" size="3"/>
</label><br/>
<input type="button" value="MoveIt"
onclick="movit()"/>
</form>
<img style="position:absolute;top:100px;left:0;height:150px;width:150px;" id="f" alt="sorry"
src="flower_1.jpg"/>
</body>
</html>

JavaScript Code
//Event handler to move the picture
function movit()
{
d=document.getElementById("f").style;
newleft=document.getElementById(“1").value;
newtop=document.getElementById(“2").value;
d.top=newtop+"px";
d.left=newleft+"px";
}

Element Visibility
• Document elements can be made visible or hidden
with the value of visibility property.
• Two possible values for visibility are visible and
hidden
• The appearance and disappearance of an element can
be controlled by the user through a widget

Example
Write a HTML document to display an image.
Onclick event initiated by the user must cause
the image disappear and reappear in the
document display. Write a event handler in
separate JavaScript file.

HTML Code
<html>
<head>
<title>Moving Elements</title>
</head>
<body >
<img style="position:relative;visibility: visible; width:200px;height:
200px;" id="f" alt="sorry" src="flower_1.jpg"/>
<br/>
<form >
<input type="button" value="Toggle the image"
onclick="flip();"/>
</form>
</body>
</html>

JS Code
//Event handler to toggle the image
function flip()
{
d=document.getElementById("f").style;
// document.write(d);
if(d.visibility==='visible')
d.visibility='hidden';
else
d.visibility='visible';
}

Changing Colors and Fonts
Changing Colors:
The background and foreground colors of the
document display can be changed dynamically.

Example
Design a HTML document that display a heading
change background and foreground color of a
document and two textboxes to accept color
specification for background in first box and for
foreground color in second box. onblur event of
the first textbox must trigger the event handler1
that apply color entered by user to background
and onblur event of second textbox must trigger
the event handler2 that apply color entered by
user to foreground. Write a two event handler in
separate javascript file.

HTML Code
<html>
<head>
<title>Change Colors</title>
<script type="text/javascript" src="a1.js"></script>
</head>
<body >
<h1 id="13" style="color:black;">Change Background and
Foreground Color of a Document</h1>
<form >
<label>Background color:<input type="text" id="11" size="20"
onblur="change_color1();"/></label></br></br>
<label>Foreground color:<input id="12" type="text" size="20"
onblur="change_color2();"/></label></br>
</form>
</body>
</html>

JS Code
//Event handlers to change the color
function change_color1()
{
n=document.getElementById("11").value;
document.body.style.backgroundColor=n;
}
function change_color2()
{
n=document.getElementById("12").value;
document.getElementById("13").style.color=n;
}

Modify1
Modify the above program by writing one event
handler for both the event of textbox.
Modify2
Modify the above exercise by adding menu to
select options for color and radio button for
selection of foreground and background.

Modify1
<html>
<head>
<title>Change Colors</title>
<script type="text/javascript" src="a1.js"></script>
</head>
<body >
<h1 id="13" style="color:black;">Change Background and Foreground
Color of a Document</h1>
<form >
<label>Background color:<input type="text" id="11" size="20"
onblur="change_color('background',this.value);"/></label></br></br>
<label>Foreground color:<input id="12" type="text" size="20"
onblur="change_color('foreground',this.value);"/></label></br>
</form>
</body>
</html>

//Event handler to change the color
function change_color(s,p)
{
if(s==='background')
document.body.style.backgroundColor=p;
else
document.getElementById("13").style.color=p;
}

Changing Fonts
Using mouseover event we can change any CSS
property of any element in the document
including font.
When mouse is placed over the displayed text
mouserover event occurs and can be used to
trigger the event handler that changes the font
properties or color property.
mouseout is similar to mouseover and occurs
when mouse is moved a way from the element

Example
Design a HTML document that display a paragraph
of text. Using mouseover event change the font
properties of text. using mouseout event display
the text in its original style.
Note:CSS property names without hyphen are
same in javascript but CSS property with hypen are
associated in Javascript without hypen and letter
following hypen is captialized. For example font-
size is referred as fontSize in Javascript.

HTML Code
<html>
<head>
<title>Changing Font property</title>
<script type="text/javascript" src="a.js">
</script>
</head>
<body >
<p id="3" style="font:1.2em Times;color:blue;"
onmouseover="newstlye()" onmouseout="oldstyle()">
This course is an introduction to the basic concepts of
programming languages.
</p>
</body>
</html>

JS Code
//Event handler to change the font property
var d,f,f1,f2;
function newstlye()
{
d=document.getElementById("3").style;
f=d.fontSize;
f1=d.fontStyle;
f2=d.color;
d.fontSize='2.3em';
d.fontStyle='italic';
d.color='red';
}
function oldstyle()
{
d.fontSize=f;
d.fontFamily=f1;
d.color=f2;
}

Dynamic Content
Write a HTML document to display your
currently located city name on a button. On
bringing the mouseover the button displayed
city name must be changed to your native city
name.

Example
<html>
<head>
<title>Changing Font property</title>
</head>
<body >
<input type="button" value="bagalkot"
onmouseover="this.value='Belagum';"/>
</body>
</html>

Exercise
Design a HTML document to input customer
information through the form that contains two
textbox to enter Name and Email id. Provide
help box to help the user in filling the form.
Help box must appear when user brings the
mouse cursor on the textboxes and help box
must contain information which tell the user
how to fill the filed. Provide help box using text
area.

HTML Code
<html>
<head>
<title>Dynamic Content</title>
</script>
</head>
<body style="background-color:green">
<textarea id="h" style="position:absolute;left:320px;">
PLZ fill the form according to the instruction</textarea>
<form>
<h1><b>Custmer Information</b></h1>
<label>Name:<input type="text" onmouseover="message(0)" onmouseout="message(2)" />
</label></br>
<label>Email id:<input type="text" onmouseover="message(1)" onmouseout="message(2)"/>
</label></br></br>
<input type="submit" value="Submit"/>
<input type="reset" value="clear"/>
</form>
</body>
</html>

JS Code
//Event handler
var a=["Firstname,LastName,Middilename
initial.n",
"user@domain","PLZ fill the form according to
the instruction"];
function message(k)
{
document.getElementById("h").value=a[k];
}

Stacking of elements
• The top and left property allow the placement of an
element in 2D
• It is also possible to place element in 3D by using the
concept of stacked element.
• Placement of element in 3D is controlled by z-index
attribute of element.
• An element whose z-index is greater than that of an
element in the same space will be displayed over
other element in the same space.

Example
Design a HTML document to display three images
in an overlapped fashion. Each image include
onclick attribute to trigger the event handler which
defines the DOM addresses for the last top
element and the new top element. Then function
sets the zIndex value for old top has 0 and for new
as 10. The script keeps track of which image is
currently on top with the global variable which is
changed every time when new element is moved
to the top with Btop function.

HTML Code
<html>
<head>
<title>Dynamic Stacking of Images</title>
</head>
<body>
<img style="position:absolute;top:0px;left:0px;z-index:10;
width:200px;height:200px;" id="f" alt="sorry" src="flower_1.jpg"
onclick="Btop('f')"/>
<img style="position:absolute;top:50px;left:80px;z-index: 0;
width:200px;height: 200px;" id="f1" alt="sorry" src="new.jpg"
onclick="Btop('f1')"/>
<img style="position:absolute;top:100px;left:150px;z-index:0;
width:200px;height: 200px;" id="f2" alt="sorry" src="ph1.jpg"
onclick="Btop('f2')"/>
</body>
</html>

JS Code
//event handler function to illustrate stacking
images
var ot="f";
function Btop(nt)
{
dot=document.getElementById(ot).style;
dnt=document.getElementById(nt).style;
dot.zIndex="0";
dnt.zIndex="10";
ot=nt;
}

Locating the Mouse Cursor
When mouse is clicked on browser window a event
object is created. This event object is associated
with two pairs of geometric coordinates of the
mouse position.
1.clientX and clientY gives the coordinates of the
mouse cursor relative to the upper left corner of
browser window
2. screenX and screenY gives the coordinates of
the mouse cursor relative to the upper left corner
of computer window

HTML Code
<html>
<head>
<title>Mouse cursor position</title>
</script>
</head>
<body onclick="find(event)"></body>
<h3>Relative to upper left corner of Browser window</h3>
<label>X coordiante<input type="text"
id="1"/></label><br/>
<label>Y coordinate
<input type="text" id="2"/></label><br/>
</html>

JS Code
function find(k)
{
var x=k.clientX;//horizontal (left)
var y=k.clientY;//vertical (top)
document.getElementById("1").value=x;
document.getElementById("2").value=y;
}

Reacting to a Mouse click
Write and test HTML document to display a
message ‘welcome to Bec’. Using onmouseover
event move the message to current mouse
location.

HTML Code
<html>
<head>
<title>Move any where</title>
</script>
</head>
<body onmouseover="find(event)" >
<h1 id="3" style="position:absolute;top:0px;left:0px;
color:red;">Welcome to Bec</h1>
</html>

JS Code
function find(k)
{
var x=k.clientX;
var y=k.clientY;
d.left=x +"px";
d.top=y +"px";
}

Slow Movement of Elements
So far elements are moved through user interaction by
changing the top and left property.
To move an element slowly is to move it by small
amounts of delay repeatedly by changing the top and
left value.
window object has two methods to set the time
setTimeout and setInterval
setTimeout executes the function after specified delay
only once where as setInterval executes the function
repatadley after the specified delay.
Syntax for setTimeout and setInterval
setTimeout(functionname,delaytime,parameters)

Program to illustrate setTimeout and
setInterval
<html>
<head>
<title></title>
</head>
<body onload="setTimeout(message,1000);" >

<script type="text/javascript">
function message()
{
document.write("hi");
}
</script>
</body>
</html>

Program on slow movement
Design a HTML document to display a image.
Using setInterval/setTimeout move the
displayed image from its original position to
given position by delay of 1secs.

HTML Code
<html>
<head>
<title>Move any where</title>
</script>
</head>
<body onload="find1()">
<img id="3"
style="position:absolute;top:0px;left:0px;width:100px;height
:100px;" src="flower_1.jpg"/>
</body>
</html>

JS Code
var fx=50,fy=50,x,y;
function moveit()
{
if(x!==fx || y!==fy)
{
d1=document.getElementById("3").style;
x++;
y++;
d1.left=x+"px";
d1.top=y+"px";
}
}
function find1()
{
x=d.left;
y=d.top;
x=x.match(/d+/);
y=y.match(/d+/);
setInterval(moveit,1000);
}

Dragging and Dropping Elements
One of the powerful dynamic change is to allow
the user to drag and drop the elements around
the display window.
There are two important steps:
1.Make an object draggable
draggable attribute to set true in the element
to be dragged

Contd..
2.Dropping the object
ondragover event specifies where the dragged
data can be dropped. By default elements can
not be dropped in other elements to allow
dropping we must call event.preventDefault();
ondrop event performs the actual drop to be
performed
These attributes are used in the element where
has to be dropped.

HTML Code
<html>
<head>
</script>
</head>
<body>
<h3>Drag the image into the rectangle:</h3>
<div id="3" style="width: 250px;
height: 200px;
padding: 10px;
border: 1px solid red"
ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
<br/>
<img id="4"
src="flower_1.jpg"
draggable="true"
width="100"
height="100">
</body>
</html>

JS Code
function drop(even) {
even.target.appendChild(document.getElement
ById("4"));
}

Example
1. Design dynamic web page to display the
names of fruits. Drag and drop the your
favorite fruits into a box
2. Design dynamic web page to move your
name from position (10,10) to (200,200)
with a delay of 3sec and in each move
change the font color and size.

UNIT-III-Chapter 6 [Autosaved].pptx

UNIT-III-Chapter 6 [Autosaved].pptx

Recommended

Recommended

More Related Content

Similar to UNIT-III-Chapter 6 [Autosaved].pptx

Similar to UNIT-III-Chapter 6 [Autosaved].pptx (20)

Recently uploaded

Recently uploaded (20)

UNIT-III-Chapter 6 [Autosaved].pptx