Unit II
Object model and collections
In the dynamic html, html elements can be treated as objects and its attributes can be
treated as properties of that objects
Object referencing
The simplest way to refer object (element) is by using its id attribute. i.e using id
attribute we can refer an element.
Ex:
<html>
<head>
<script language="javascript">
function start()
[Link]([Link]);
[Link]="bye";
</script>
</head>
<body onload="start()">
<p id="abc">
this is a paragraph
</p>
</body>
</html>
Collection all and children
Collections are nothing but arrays of related objects on the page. The DHTML object
model includes specified collections called all and children
all collection
the all collection is collection of all the HTML elements in the document in the order in
which they appeared. This provides an easy way of referencing to specific element ,
especially if it does not have an id.
Children collection
The children collection of any element contains only the element which are direct
children elements of that element. For example HTML element has only two children
they are head and body elements.
Ex:
<Html>
<head>
<title> collections </title>
<script language="javascript">
function start()
var a=" ";
var b=" ";
for(i=0;i<[Link];i++)
a+=" "+[Link][i].tagName;
for(i=0;i<[Link][0].[Link];i++)
b+=" " +[Link][0].children[i].tagName;
[Link]+=a;
[Link]+=b;
</script>
</head>
<body onLoad="start()">
<font color="red" > all and children </font>
<p id="abc"> the elements in this page are </p>
<p id="xyz"> the child elements of html are </p>
</body>
</html>
Frames collection
DHTML provides a collection called frames using that we can make the frames to communicate with in
the browser window.
Example Program for frames collection
[Link]
<html>
<head>
<script language="javascript">
function start()
var name=prompt("entur ur name");
[Link]("f2").[Link]("hello "+name);
</script>
</head>
<body onLoad="start()">
<h1> frames colletion </h1>
</body>
</html>
<html>
<frameset rows=”50%,50%”>
<frame src=”[Link]”>
<frame id=”f2”>
</frameset>
</html>
Navigator (browser )object
This object contain the information about the browser like browser name,version. This
allow web author to determine which browser the user has. This is especially important
when the page uses browser specific features
Ex:
<html>
<head>
<script language="javascript">
function abc()
[Link]("browser internal name is "+[Link]);
[Link]("<br>browser public name is"+[Link]);
[Link]("<br> browser version is"+[Link]);
[Link]("<br> "+[Link]);
[Link]("<br> pluginas are"+[Link]);
abc();
</script>
</head>
</html>
Example program for dynamic styles
<html>
<head>
<script language="javascript">
var i=10,j=0;
var color=["red","blue","green","yellow","pink","cyan"];
function start()
[Link]("run()",500);
function run()
[Link]=i;
[Link]=i;
[Link]=i;
[Link]=color[j];
j++;
if(j==6)
j=0;
i=i+2;
if(i==100)
i=10;
}
</script>
</head>
<body onLoad="start()">
<p id="abc" style="position:absolute; left:0; top:0">
welcome
</p>
</body>
</html>
Event model
The change in the state of an object is known as an Event. In html, there are various
events which represents that some activity is performed by the user or by the browser.
When javascript code is included in HTML, js react over these events and allow the
execution. This process of reacting over the events is called Event Handling. Thus, js
handles the HTML events via Event Handlers.
Some of the HTML events and their event handlers are:
Mouse events:
Event Performed Event Handler Description
click onclick When mouse click on an element
mouseover onmouseover When the cursor of the mouse comes over the element
mouseout onmouseout When the cursor of the mouse leaves an element
mousedown onmousedown When the mouse button is pressed over the element
mouseup onmouseup When the mouse button is released over the element
mousemove onmousemove When the mouse movement takes place.
Keyboard events:
Event Performed Event Handler Description
Keydown&Keyup onkeydown&onkeyup When the user press and then release the key
Form events:
Event Event Description
Performed Handler
focus onfocus When the user focuses on an element
submit onsubmit When the user submits the form
blur onblur When the focus is away from a form element
change onchange When the user modifies or changes the value of a form element
Window/Document events
Event Event Description
Performed Handler
load onload When the browser finishes the loading of the page
unload onunload When the visitor leaves the current webpage, the browser unloads it
resize onresize When the visitor resizes the window of the browser
onClick
one of the most common events is onClick. When the user click the mouse button then
the mouse click event fires. Using the javascript we can handle that.
Example program for onclick
<html>
<head>
<script language="javascript">
function abc()
alert("welcome to event handling");
}
</script>
</head>
<body>
<input type="button" value="click" onClick="abc()">
</body>
</html>
Example 2
<html>
<head>
<script language="javascript">
function abc()
[Link]="red";
function xyz()
[Link]="blue";
}
</script>
<body>
<input type="button" value="red" onClick="abc()">
<input type="button" value="blue" onClick="xyz()">
</body>
</html>
onLoad
the onLoad event fires whenever an element loading successfully . it is often used in the
body tag to intiate scripts as soon as the page has been loaded
<html>
<head>
<script language="javascript">
var seconds=0;
function start()
[Link]("updatetime()",1000);
function updatetime()
{
seconds++;
[Link]=seconds;
</script>
</head>
<body onload="start()">
<p> seconds you spend viewing this page so far "</p>
<span id="a"> 0 </span
</body>
</html>
onFocus, onBlur events
these events are particularly useful whenever dealing with the form. The onFocus event
fires when the element gains the focus i.e when the user click on the form field or when
the user press the tab key to highlight an element. onBlur event fires when the element
oost the focus.
Example program for onfocus
<html>
<head>
<script language="javascript">
function sum()
a=parseInt([Link]);
b=parseInt([Link]);
c=a+b;
[Link]=c;
</script>
</head>
<body>
<form id="f1">
first no<input type="text" id="t1"><br>
second no<input type="text" id="t2"><br>
sum<input type="text" id="t3" onFocus=”sum()”>
</body>
</html>
Mosue events
onMouseMove event
this event fires constantly whenever the mouse is in motion. If you want to perform any
action whenever mouse is moving this event is useful
ex:
<html>
<head>
<script language="javascript">
function abc()
[Link]=[Link];
</script>
</head>
<body onMouseMove="abc()">
<span id="a"> (0,0)
</span>
<img src="[Link]">
<p>
this is paragraph
</p>
<font color="red">welcome </font>
<br>
<ol>
<li>mca
<li>mba
<li>msc
</ol>
</body>
</html>
Example program for mouseover and mouseout events
<html>
<head>
<script language="Javascript">
function a( )
[Link]="red";
[Link]="dhtml";
function b( )
[Link]="blue";
[Link]="javascript";
</script>
</head>
<body>
<input type="text" id="t1" value="html" onMouseover="a( )" onMouseout="b( )">
</body>
</html>
Onsubmit and onreset events
These two events are usuful to dealing with the forms. These events are fired when the
form is submitted and reset respectively
Ex:
<html>
<head>
<script language="javascript">
function sub()
[Link]=false;
if(confirm("are u sure want to submit the form"))
[Link]=true;
function res()
[Link]=false;
if(confirm("are u sure want to reset the form"))
[Link]=true;
</script>
</head>
<body>
<form id="f1" onSubmit="sub()" onReset="res()">
name <input type="textbox"> <br>
password <input type="password"> <br>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
</body>
</html>
Dynamic HTML
Filters and transitions
Filters and transitions do not add content to your webpages rather they present in the
existing content to hold the users attention. Each of the visible effect achievable with
filters and transitions is programable so these effects may be adjusted dynamically by
programs.
Filters and transitions are included with the css filter property using filter and transitions
we can do following things
Make pages or portion of the pages fade in and fade out
Make pages randomly dissolve into next pages
Make portion of pages transparent or semi transparent so that we can see what is
behind them
Make elements glow for emphasis
Create drop shadows on elements to give 3D effects
We can give some kinds of graphics capabilities like getting using powerpoint
Following are some of the filters
Flip filters (fliph, filpv)
Mask filter
Shadow
Glow
Blur
Wave
Image filters( invert, gray,xray)
Drop shadow
Transitions included with internet explorer 5 to give many of the powerpoint effects
There are two types of transitions
blendTrans (fade in and fade out effects)
revealTrans( professional style transitions from box out to random disove 24 effects)
Program for filters
<html>
<body>
<h1 style="position:absolute;filter:glow">glow filter</h1><br><br>
<h1 style="position:absolute;filter:glow(color=blue)">glow filter with
color</h1><br><br>
<h1 style="position:absolute;filter:shadow">shadow filter</h1><br><br>
<h1 style="position:absolute;filter:shadow(color=green,direction=45">shadow with
color</h1><br><br>
<h1 style="position:absolute;filter:dropshadow">drop shadow</h1><br><br>
<h1 style="position:absolute;filter:dropshadow(color=green)">drop shadow with
green</h1><br><br>
<h1 style="position:absolute;filter:wave">wave filter</h1><br><br>
</body>
</html>
Program for image filters
<html>
<head>
<title> image filters </title>
</head>
<body>
<h2> different image filters </h2>
<table border>
<tr><th> normal </th><th>gray </th><th>xray</th><th>invert</th></tr>
<tr>
<td><imgsrc="[Link]" widht=200 height=200></td>
<td><imgsrc="[Link]" widht=200 height=200 style="filter:gray"></td>
<td><imgsrc="[Link]" widht=200 height=200 style="filter:xray"></td>
<td><imgsrc="[Link]" widht=200 height=200 style="filter:invert"></td>
</tr>
</body>
</html>
Program for transitions
<html>
<head>
<script language="javascript">
function abc()
[Link]("revealTrans").apply();
[Link]="hidden";
[Link]("revealTrans").play();
</script>
</head>
<body>
<h1> blend Trans transition </h1>
<imgsrc="[Link]" width=500 height=500 id="i1"
style="position:absolute;left:100;top:100;filter:revealTrans(duration=5)"
onClick="abc()">
</body>
</html>
Data binding with Tabular data control
Tabular Data Control (TDC) is a Microsoft ActiveX control that comes pre-installed with
all versions of IE4+. This useful control allows you to access, display, and even sort ASCII
information stored on the server end, such as a .txt file. In other words, it creates a
simple "database" function without the need for server side scripting such as PHP and
mySQL. A client side language such as JavaScript handles the more sophisticated
features of Tabular Data Control.
As mentioned, the tabular data control is available in IE 4 and upwards. Netscape
requires a plug-in for the same function to work.
Implementation:
The ActiveX control is initialized using the <OBJECT> tag. The CLASSID (unique
identifier) for the tabular data control is
CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83
Any object, like applet, has a number of parameters. Parameters of the object are
specified using the <PARAM> tag. The tabular data control has around 8 parameters.
Here, I'll discuss only the more important ones :
DataURL: The path of the file that contains the data. For eg "[Link]".
UseHeader: Specifies whether the first line of the data file should be used as reference
names for their respective fields below. If specified to false, use "Column1", "Column2"
etc instead. The default value is false.
TextQualifier: Specifies the optional character that surrounds a field.
FieldDelim: Specifies the character that is used to separate each field in the data file.
The default character is the comma (,). For eg, consider a data file where we have the
fields data: *SomeName*|*SomeAge*|*SomeSex*. Here, the field delimiter used is '|' and
'*' is the text qualifier.
RowDelim: Specifies the character used to mark the end of each row of data. The
default character is the newline (NL) character.
The parameter names are not case sensitive. The TextQualifier parameter is purely
optional, though can be useful in helping you more easily distinguish between each
data entry.
example
[Link]
rollno|name|marks
~1~|~raju~|~90~
~2~|~srinu~|~67~
~3~|~madhu~|~69~
~4~|~abc~|~84~
~5~|~xyz~|~79~
html file
<html>
<body>
<OBJECT ID="abc" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="[Link]">
<PARAM NAME="UseHeader" VALUE="TRUE">
<PARAM NAME="TextQualifier" VALUE="~">
<PARAM NAME="FieldDelim" VALUE="|">
</OBJECT>
<TABLE DATASRC="#abc" BORDER="2">
<THEAD>
<TH>rollno :</TH>
<TH>name :</TH>
<TH>marks :</TH>
</THEAD>
<TR>
<TD><SPAN DATAFLD="rollno"></SPAN></TD>
<TD><SPAN DATAFLD="name"></SPAN></TD>
<TD><SPAN DATAFLD="marks"></SPAN></TD>
</TR>
</TABLE>
</body>
</html>
JavaScript Forms Validation
Forms validation is important things otherwise user input wrong data, so we need to
validate given data by user before submit it on server.
The JavaScript provides the facility to validate the form on the client side so processing
will be fast than server-side validation. So, most of the web developers prefer client-side
form validation using JavaScript.
<html>
<head>
<script>
function form_validation(){
var name=[Link];
//var name=[Link];
if (name==null || name==""){
alert("Name can't be blank");
return false;
}
</script>
</head>
<body>
<form name="myform" onsubmit="form_validation()">
Name: <input type="text" name="t1">
<input type="submit" value="submit">
</form>
</body>
</html>
Email validation
We can validate the email with the help of JavaScript. Here we check the condition
related to any email id, like email if must have "@" and "." sign and also email id must
be at least 10 character.
There are many criteria that need to be follow to validate the email id such as:
email id must contain the @ and . character
There must be at least one character before and after the @.
There must be at least two characters after . (dot).
Example
<html>
<head>
<script>
function email_validation()
var x=[Link];
var atposition=[Link]("@");
var dotposition=[Link](".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=[Link]){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n
dotposition:"+dotposition);
return false;
</script>
</script>
</head>
<body>
<form name="myform" onsubmit="email_validation();">
Email: <input type="text" name="email"><br/>
<input type="submit" value="register">
</form></body>
</html>
JavaScript Password Validation
Here i will show you how to validate any password field like password field can not be
blank and length of password is minimum 8 character.
Example
<html>
<head>
<script>
function pass_validation()
var password=[Link];
if (password==null || password=="")
alert("password can't be blank");
return false;
else if([Link]<8)
alert("Password must be at least 8 characters long.");
return false;
</script>
</head>
<body>
<form name="myform" >
Password: <input type="password" name="password">
<input type="submit" value="submit" onClick="pass_validation()">
</form>
</body>
</html>
Re-type Password Validation
Example
<html>
<head>
<script>
function pass_validation()
var fp=[Link];
var sp=[Link];
if(fp==sp){
return true;
else{
alert("password one and two must be same!");
return false;
</script>
</head>
<body>
<form name="f1">
Password:<input type="password" name="p1" /><br/>
Re-enter Password:<input type="password" name="p2"/><br/>
<input type="submit" value="submit" onClick="pass_validation()">
</form>
</body>
</html>
<!-- validation checking name should starts with capital letter and age should have 2
digits -->
<!—program for regular expressions -- >
<html>
<head>
<script language="javascript">
function validate()
{
var name=[Link];
var age=[Link];
var name_re=/^[A-Z]/; <!-- starts with capital letter -->
var age_re=/^\d{2}$/; <!-- age should be two digits -->
if([Link](name_re) && [Link](age_re))
alert("valid data");
else
alert("in valid data");
</script>
</head>
<body>
<form name="f1">
enter ur name<input type="text" name="t1"><br>
your age <input type="text" name="t2"><br>
<input type="button" value="submit" onClick="validate()">
</form>
<body>
</html>
Random number
<html><head>
<script language="javascript">
var n;
n=[Link]()*6;
[Link]([Link](n)+1);
[Link]("<br>" + [Link]());
</script></head></html>
