Unit - I
OrderedListDemo.html
<html>
<head>
<title>Demonstration of Ordered List</title>
</head>
<body>
<h3><u>Various Departments:</u></h3>
<ol>
<li>ECE</li>
<li>CSE</li>
<li>EEE</li>
<li>IT</li>
</ol>
<ol type="i">
<li>ECE</li>
<li>CSE</li>
<li>EEE</li>
<li>IT</li>
</ol>
</body>
</html>
UnorderedListDemo.html
<html>
<head>
<title>Demonstration of UnOrdered List</title>
</head>
<body>
<h3><u>Various Departments:</u></h3>
<ul>
<li>ECE</li>
<li>CSE</li>
<li>EEE</li>
<li>IT</li>
</ul>
<ul type="circle">
<li>ECE</li>
<li>CSE</li>
<li>EEE</li>
<li>IT</li>
</ul>
<ul type="square">
<li>ECE</li>
<li>CSE</li>
<li>EEE</li>
<li>IT</li>
</ul>
</body>
</html>
DefinitionListDemo.html
<html>
<head>
<title>Demonstration of Definition List</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>HTML stands for Hypertext Markup language...HTML provides some markup tags
to design the web documents...</dd>
<dt>DHTML</dt>
<dd>DHTML stands for Dynamic Hypertext Markup Language... DHTML helps to enhance
the functionality of web pages...</dd>
</dl>
</body>
</html>
TableDemo.html
<html>
<head><title>Table Demo</title></head>
<body>
<table border="1" cellpadding="5" ceellspacing="5">
<caption>Mark Statement</caption>
<thead><th>Subjects</th><th>Marks</th></thead>
<tfoot><th>Total</th><th>450</th></tfoot>
<tbody>
<tr><td>Web Technology</td><td>90</td></tr>
<tr><td>Artificial Intelligence</td><td>90</td></tr>
<tr><td>Unix Internals</td><td>90</td></tr>
<tr><td>OOAD</td><td>90</td></tr>
<tr><td>PCD</td><td>90</td></tr>
</tbody>
</table>
</body>
</html>
FrameDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<head>
<title>Frame Demo</title>
</head>
<html xmlns="http://www.w3.org/1999/xhtml">
<frameset cols="50%,50%">
<frameset rows="45%,*">
<frame src="OrderedListDemo.html" name="topLeft"/>
<frame src="UnorderedListDemo.html" name="bottomLeft"/>
</frameset>
<frameset rows="3*,2*">
<frame src="DefinitionListDemo.html" name="topRight"/>
<frame src="TableDemo.html" name="bottomRight"/>
</frameset>
</frameset>
<noframes>
<p>Browser doesnot support for frames</p>
</noframes>
</html>
NavigationFrameDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Navigation Frame Demo</title>
</head>
<frameset cols="20%,80%">
<frame src="left.html" name="Lframe"/>
<frame src="right.html" name="Rframe"/>
</frameset>
</html>
left.html
<html>
<body bgcolor="lightblue">
<a href="OrderedListDemo.html" target="Rframe">Ordered List Demo</a><br/>
<a href="UnorderedListDemo.html" target="Rframe">Unordered List Demo</a></br/>
<a href="DefinitionListDemo.html" target="Rframe">Definition List Demo</a><br/>
<a href="TableDemo.html" target="Rframe">Table Demo</a>
</body>
</html>
right.html
<html>
<body bgcolor="lightblue">
<h4>Click The Links are available in Left Frame</h4>
</body>
</html>
FormDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Online Registration Form</title></head>
<body>
<form action="" method="post">
<fieldset>
<legend><b>DEBIT CARD</b></legend>
<br/>*Please Enter the card holder's name.<br/><br/>
<table>
<tr>
<td>Name on Credit Card:</td>
<td><input type="text" size="30"/></td>
</tr>
<tr>
<td>Debit Card Type:</td>
<td><input type="radio" name="radiogroup"/><img src="master.gif">
<input type="radio" name="radiogroup"/><img src="visa.gif"></td>
</tr>
</table>
<br/>*Please Enter Your Debit Card Details.<br/><br/>
<table>
<tr>
<td>Debit Card Number:</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>PIN Number:</td>
<td><input type="text" size="10"></td>
</tr>
<tr>
<td>Expiration Date:</td>
<td>
<select>
<option>01</option><option>02</option><option>03</option>
<option>04</option><option>05</option><option>06</option>
<option>07</option><option>08</option><option>09</option>
<option>10</option><option>11</option><option>12</option>
</select>
Month
<select>
<option>2012</option><option>2013</option><option>2014</option>
<option>2015</option><option>2016</option><option>2017</option>
<option>2018</option><option>2019</option><option>2020</option>
</select>
Year
</td>
</tr>
</table>
<br/>
<input type="submit" value="SUBMIT"/>
<input type="reset" value="RESET"/>
</fieldset>
</form>
</body>
</html>
Unit - II
style1.css
body{background-color:violet}
h1{font-size:25pt}
h2{color:blue}
p{margin-left:100px;background-color:lime}
style2.css
body{background-color:tan}
h1{color:maroon;font-size:30pt}
hr{color:navy}
p{font-size:x-large;margin-left:25px;letter-spacing:1em}
a:link{color:red}
a:visited{color:yellow}
a:hover{color:black}
a:active{color:blue}
CSSDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Demo</title>
<link rel="stylesheet" type="text/css" href="style1.css" title="Style 1"/>
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="Style 2"/>
</head>
<body>
<h1>This header is 25 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 100 pixels</p>
<hr/>
<p>
<a href="http://sreebrothers.blogspot.com" target="_blank">Link to My Website</a>
</p>
</body>
</html>
SelectorString.css
body{background-image:url(wall.jpg)}
h1,h2,h3,h4,h5,h6{background-color:purple}
p{margin-left:20px}
*{font-weight:bold}
#id1,#id2{text-align:center}
.myclass{font-style:italic}
span.special{font-size:15pt}
ul span{font-variant:small-caps}
ul ol li{letter-spacing:0.5em}
a:link{color:black}
a:visited{color:yellow}
a:hover{color:green}
a:active{color:red}
SelectorStringDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Selector Strings Demo</title>
<link rel="stylesheet" type="text/css" href="SelectorString.css"/>
</head>
<body>
<h1 id="id1">sreebrothers.blogspot.com</h1>
<hr/>
<h2>ABOUT SreeBrothers</h2>
<p id="id2">
----------contents---------<br/>
----------contents---------<br/>
----------contents---------<br/>
----------contents---------
</p>
<h3>Why This Blog?</h3>
<ul>
<li><span class="special">abcdefg:</span></li>
<li><span class="special">stuvwxyz:</span>
<ol>
<li>--------------------------</li>
<li>--------------------------</li>
<li>--------------------------</li>
<li>--------------------------</li>
</ol>
</li>
<li><span class="special">AbcXyz</span></li>
<p>
<a href="http://sreebrothers.blogspot.com" target="_blank" class="myclass">For More Details</a>
</p>
</body>
</html>
TextPropertiesDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text Properties Demo</title>
<style type="text/css">
body{background-image:url(wall.jpg)}
h1{direction:rtl;text-transform:capitalize;font-style:oblique}
h2{text-decoration:overline underline line-through}
p{font-size:3ex;text-indent:100px;font-family:"Edwardian Script ITC","French Script MT",cursive}
.cls1{color:rgb(255,0,0)}
.cls2{color:#cc11bb}
</style>
</head>
<body>
<h1 style="font-family:'French Script MT'" class="cls2">sreebrothers.blogspot.com</h1>
<hr/>
<h2 class="cls2">ABOUT Sreebrothers.blogspot.com</h2>
<p style="line-height:10px" class="cls2">
----------contents---------<br/>
----------contents---------<br/>
----------contents---------<br/>
----------contents---------
</p>
<h3 class="cls2">ABCDEFGHIJKLM</h3>
<ul style="line-height:50px">
<li style="font-size:2em"><span class="cls2">abcdef:</span></li>
<li style="font-size:2em"><span class="cls2">tuvwxyz:</span>
<ol style="font-size:50%" class="cls2">
<li>-------------------------------------</li>
<li>-------------------------------------</li>
<li>-------------------------------------</li>
<li>-------------------------------------</li>
</ol>
</li>
<li style="font-size:2em"><span class="cls2">AASSK</span></li>
<p style="white-space:pre">
<a href="http://sreebrothers.blogspot.com" target="_blank" class="cls1">For More Details</a>
</p>
</body>
</html>
CSSBoxModelDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Box Model Demo</title>
<style type="text/css">
p{text-align:center}
.c1{padding:15px 20px 20px 15px;border-width:thick;margin:50px;border-color:violet;border-style:double}
.c2{padding:15px 20px 20px 15px;border-width:thin;margin:50px;border-color:violet;border-style:dashed}
.c3{padding:15px 20px 20px 15px;border-width:medium;margin:50px;border-color:violet;border-style:solid}
.c4{padding:15px 20px 20px 15px;border-width:0.5cm;margin:50px;border-color:violet;border-style:outset}
.c5{padding:15px 20px 20px 15px;border-width:5mm;margin:50px;border-color:violet;border-style:groove}
</style>
<body>
<p class="c1">
Paragraph with double border
</p>
<p class="c2">
Paragraph with dashed border
</p>
<p class="c3">
Paragraph with solid border
</p>
<p class="c4">
Paragraph with outset border
</p>
<p class="c5">
Paragraph with groove border
</p>
</body>
</html>
NormalFlowBoxDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Normal Flow Box Layout</title>
<style type="text/css">
html{border:solid red thick}
body{border:double blue medium;margin:15px;padding:10px}
div{border:solid green medium;margin:20px;padding:15px}
.c1{background-color:violet}
</style>
</head>
<body>
<div>
<div><div class="c1"></div></div>
<div class="c1"></div>
</div>
</body>
</html>
RelativePositioningDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Relative Positioning</title>
<style type="text/css">
.c1{position:relative;top:100px;left:50px}
</style>
</head>
<body>
<h2>Heading Level 2</h2>
<h2>Heading Level 2</h2>
<h2>Heading Level 2</h2>
<h1 class="c1">Relatively Positioned Element</h1>
<p>
This is Paragraph....This is Paragraph....
This is Paragraph....This is Paragraph....
</p>
</body>
</html>
AbsolutePositioningDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Absolute Positioning</title>
<style type="text/css">
.c1{position:absolute;top:100px;left:50px}
</style>
</head>
<body>
<h2>Heading Level 2</h2>
<h2>Heading Level 2</h2>
<h2>Heading Level 2</h2>
<h1 class="c1">Absolutely Positioned Element</h1>
<p>
This is Paragraph....This is Paragraph....
This is Paragraph....This is Paragraph....
</p>
</body>
</html>
FloatPositioningDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float Positioning</title>
<style type="text/css">
.c1{float:left}
</style>
</head>
<body>
<p>
<img class="c1" src="sree.jpg" width="50" height="57"/>
Click the link below for more information<br/>
<a href="http://www.sreebrothers.blogspot.com">
http://www.sreebrothers.blogspot.com</a>
</p>
</body>
</html>
JavaScriptDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="script1.js">
</script>
</head>
<body></body>
</html>
script1.js
document.writeln("<h3>This is my First Java Script Program...</h3>");
AlertDialogDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="alert.js">
</script>
</head>
<body></body>
</html>
alert.js
window.alert("Welcome To\n JavaScript\n Programming");
PromptDialogDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="prompt.js">
</script>
</head>
<body></body>
</html>
prompt.js
var ch;
ch=window.prompt("Enter Your Choice:\n1.red\t2.black\t3.violet","");
switch(ch)
{
case "1":
document.writeln("<body bgcolor='red'>");
break;
case "2":
document.writeln("<body bgcolor='black'>");
break;
case "3":
document.writeln("<body bgcolor='violet'>");
break;
default:
window.alert("Invalid choice!");
break;
}
FunctionDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="square.js">
</script>
</head>
<body></body>
</html>
square.js
function square(x)
{
return x*x;
}
document.writeln("<h3>Square Values From 1 to 10</h3>");
for(var i=1;i<=10;i++)
{
document.writeln("Square("+i+")="+square(i)+"<br/>");
}
RecursiveFunctionDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="fact.js">
</script>
</head>
<body></body>
</html>
fact.js
function fact(n)
{
if(n==1)
return 1;
else
return n*fact(n-1);
}
document.writeln("<h3>Factorials of 1 to 10</h3>");
for(var i=1;i<=10;i++)
{
document.writeln("Factorial("+i+")="+fact(i)+"<br/>");
}
ObjectCreationDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="ObjectCreationDemo.js">
</script>
</head>
<body></body>
</html>
ObjectCreationDemo.js
var personObj=new Object();
personObj.fname="Sreekandan";
personObj.lname="K";
personObj.age=25;
personObj.weight=55;
//accessing the properties of an Object
document.writeln("Name:"+personObj.fname+"."+personObj.lname+"<br/>");
document.writeln("Age:"+personObj.age+"<br/>");
document.writeln("Weight:"+personObj.weight+"<br/>");
delete personObj.weight;
document.writeln("Weight:"+personObj.weight);
ForInDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="ForInDemo.js">
</script>
</head>
<body></body>
</html>
ForInDemo.js
var personObj=new Object();
personObj.fname="Sreekandan";
personObj.lname="K";
personObj.age=25;
personObj.weight=55;
document.writeln("Properties of personObj are:<br/>");
for(var p in personObj)
{
document.writeln(p+"<br/>");
}
ArrayDynamicChange.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="ArrayDynamicChange.js">
</script>
</head>
<body></body>
</html>
ArrayDynamicChange.js
var name=["sree","kandan","aassk","abc"];
document.writeln("Array Values Before Change:<br/>");
document.writeln(name);
var len1=window.prompt("Enter a number of array elements to be added:");
var len2=parseInt(len1);
name.length=name.length+len2;
for(var i=4;i<name.length;i++)
{
name[i]=window.prompt("Enter the next array element to be inserted:","");
}
document.writeln("<br/>Array Values After Change:<br/>");
document.writeln(name);
ArrayMethodsDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="ArrayMethodsDemo.js">
</script>
</head>
<body></body>
</html>
ArrayMethodsDemo.js
var a=[3,1,2,4,6,7,10,9,5,8];
document.writeln("Array Elements Are:<br/>");
document.writeln(a+"<br/>");
document.writeln("Removing the last Element of an array using pop():<br/>");
a.pop();
document.writeln(a+"<br/>");
document.writeln("Adding new Element to the end an array using push():<br/>");
a.push(11);
document.writeln(a+"<br/>");
document.writeln("Removing first Element of an array using shift():<br/>");
a.shift();
document.writeln(a+"<br/>");
document.writeln("Inserting an Element to an array using splice():<br/>");
a.splice(2,0,500);
document.writeln(a+"<br/>");
document.writeln("Removing an Element from an array using splice():<br/>");
a.splice(3,2);
document.writeln(a+"<br/>");
document.writeln("Converting an array to sting using toString():<br/>");
a.toString();
document.writeln(a+"<br/>");
ArraySorting.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="ArraySorting.js">
</script>
</head>
<body></body>
</html>
ArraySorting.js
var a=[3,1,2,4,6,7,10,9,5,8];
var name=["xyz","cdg","bmm","abc"]
function compare1(first,second)
{
return first-second;
}
function compare2(first,second)
{
return second-first;
}
document.writeln("Sorting Numbers Ascending:<br/>");
document.write(a.sort(compare1));
document.writeln("<br/>Sorting Numbers Descending:<br/>");
document.write(a.sort(compare2));
document.writeln("<br/>Sorting Alphabets Ascending:<br/>");
document.write(name.sort());
StringObjectDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="StringObjectDemo.js">
</script>
</head>
<body></body>
</html>
StringObjectDemo.js
var str1="StringObjectDemo";
var str2="Hello";
document.writeln(str1.charAt(0)+"<br/>");//returns S
document.writeln(str1.concat(str2)+"<br/>");//returns StringObjectDemoHello
document.writeln(str1.indexOf("j")+"<br/>");//returns 8
document.writeln(str2.replace("o","a")+"<br/>");//returns Hella
document.writeln(str1.slice(6,12)+"<br/>");//returns Object
Unit - III
OrderedListDemo.html
<html>
<head>
<title>Demonstration of Ordered List</title>
</head>
<body>
<h3><u>Various Departments:</u></h3>
<ol>
<li>ECE</li>
<li>CSE</li>
<li>EEE</li>
<li>IT</li>
</ol>
<ol type="i">
<li>ECE</li>
<li>CSE</li>
<li>EEE</li>
<li>IT</li>
</ol>
</body>
</html>
UnorderedListDemo.html
<html>
<head>
<title>Demonstration of UnOrdered List</title>
</head>
<body>
<h3><u>Various Departments:</u></h3>
<ul>
<li>ECE</li>
<li>CSE</li>
<li>EEE</li>
<li>IT</li>
</ul>
<ul type="circle">
<li>ECE</li>
<li>CSE</li>
<li>EEE</li>
<li>IT</li>
</ul>
<ul type="square">
<li>ECE</li>
<li>CSE</li>
<li>EEE</li>
<li>IT</li>
</ul>
</body>
</html>
DefinitionListDemo.html
<html>
<head>
<title>Demonstration of Definition List</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>HTML stands for Hypertext Markup language...HTML provides some markup tags
to design the web documents...</dd>
<dt>DHTML</dt>
<dd>DHTML stands for Dynamic Hypertext Markup Language... DHTML helps to enhance
the functionality of web pages...</dd>
</dl>
</body>
</html>
TableDemo.html
<html>
<head><title>Table Demo</title></head>
<body>
<table border="1" cellpadding="5" ceellspacing="5">
<caption>Mark Statement</caption>
<thead><th>Subjects</th><th>Marks</th></thead>
<tfoot><th>Total</th><th>450</th></tfoot>
<tbody>
<tr><td>Web Technology</td><td>90</td></tr>
<tr><td>Artificial Intelligence</td><td>90</td></tr>
<tr><td>Unix Internals</td><td>90</td></tr>
<tr><td>OOAD</td><td>90</td></tr>
<tr><td>PCD</td><td>90</td></tr>
</tbody>
</table>
</body>
</html>
FrameDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<head>
<title>Frame Demo</title>
</head>
<html xmlns="http://www.w3.org/1999/xhtml">
<frameset cols="50%,50%">
<frameset rows="45%,*">
<frame src="OrderedListDemo.html" name="topLeft"/>
<frame src="UnorderedListDemo.html" name="bottomLeft"/>
</frameset>
<frameset rows="3*,2*">
<frame src="DefinitionListDemo.html" name="topRight"/>
<frame src="TableDemo.html" name="bottomRight"/>
</frameset>
</frameset>
<noframes>
<p>Browser doesnot support for frames</p>
</noframes>
</html>
NavigationFrameDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Navigation Frame Demo</title>
</head>
<frameset cols="20%,80%">
<frame src="left.html" name="Lframe"/>
<frame src="right.html" name="Rframe"/>
</frameset>
</html>
left.html
<html>
<body bgcolor="lightblue">
<a href="OrderedListDemo.html" target="Rframe">Ordered List Demo</a><br/>
<a href="UnorderedListDemo.html" target="Rframe">Unordered List Demo</a></br/>
<a href="DefinitionListDemo.html" target="Rframe">Definition List Demo</a><br/>
<a href="TableDemo.html" target="Rframe">Table Demo</a>
</body>
</html>
right.html
<html>
<body bgcolor="lightblue">
<h4>Click The Links are available in Left Frame</h4>
</body>
</html>
FormDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Online Registration Form</title></head>
<body>
<form action="" method="post">
<fieldset>
<legend><b>DEBIT CARD</b></legend>
<br/>*Please Enter the card holder's name.<br/><br/>
<table>
<tr>
<td>Name on Credit Card:</td>
<td><input type="text" size="30"/></td>
</tr>
<tr>
<td>Debit Card Type:</td>
<td><input type="radio" name="radiogroup"/><img src="master.gif">
<input type="radio" name="radiogroup"/><img src="visa.gif"></td>
</tr>
</table>
<br/>*Please Enter Your Debit Card Details.<br/><br/>
<table>
<tr>
<td>Debit Card Number:</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>PIN Number:</td>
<td><input type="text" size="10"></td>
</tr>
<tr>
<td>Expiration Date:</td>
<td>
<select>
<option>01</option><option>02</option><option>03</option>
<option>04</option><option>05</option><option>06</option>
<option>07</option><option>08</option><option>09</option>
<option>10</option><option>11</option><option>12</option>
</select>
Month
<select>
<option>2012</option><option>2013</option><option>2014</option>
<option>2015</option><option>2016</option><option>2017</option>
<option>2018</option><option>2019</option><option>2020</option>
</select>
Year
</td>
</tr>
</table>
<br/>
<input type="submit" value="SUBMIT"/>
<input type="reset" value="RESET"/>
</fieldset>
</form>
</body>
</html>
Unit - II
style1.css
body{background-color:violet}
h1{font-size:25pt}
h2{color:blue}
p{margin-left:100px;background-color:lime}
style2.css
body{background-color:tan}
h1{color:maroon;font-size:30pt}
hr{color:navy}
p{font-size:x-large;margin-left:25px;letter-spacing:1em}
a:link{color:red}
a:visited{color:yellow}
a:hover{color:black}
a:active{color:blue}
CSSDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Demo</title>
<link rel="stylesheet" type="text/css" href="style1.css" title="Style 1"/>
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="Style 2"/>
</head>
<body>
<h1>This header is 25 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 100 pixels</p>
<hr/>
<p>
<a href="http://sreebrothers.blogspot.com" target="_blank">Link to My Website</a>
</p>
</body>
</html>
SelectorString.css
body{background-image:url(wall.jpg)}
h1,h2,h3,h4,h5,h6{background-color:purple}
p{margin-left:20px}
*{font-weight:bold}
#id1,#id2{text-align:center}
.myclass{font-style:italic}
span.special{font-size:15pt}
ul span{font-variant:small-caps}
ul ol li{letter-spacing:0.5em}
a:link{color:black}
a:visited{color:yellow}
a:hover{color:green}
a:active{color:red}
SelectorStringDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Selector Strings Demo</title>
<link rel="stylesheet" type="text/css" href="SelectorString.css"/>
</head>
<body>
<h1 id="id1">sreebrothers.blogspot.com</h1>
<hr/>
<h2>ABOUT SreeBrothers</h2>
<p id="id2">
----------contents---------<br/>
----------contents---------<br/>
----------contents---------<br/>
----------contents---------
</p>
<h3>Why This Blog?</h3>
<ul>
<li><span class="special">abcdefg:</span></li>
<li><span class="special">stuvwxyz:</span>
<ol>
<li>--------------------------</li>
<li>--------------------------</li>
<li>--------------------------</li>
<li>--------------------------</li>
</ol>
</li>
<li><span class="special">AbcXyz</span></li>
<p>
<a href="http://sreebrothers.blogspot.com" target="_blank" class="myclass">For More Details</a>
</p>
</body>
</html>
TextPropertiesDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text Properties Demo</title>
<style type="text/css">
body{background-image:url(wall.jpg)}
h1{direction:rtl;text-transform:capitalize;font-style:oblique}
h2{text-decoration:overline underline line-through}
p{font-size:3ex;text-indent:100px;font-family:"Edwardian Script ITC","French Script MT",cursive}
.cls1{color:rgb(255,0,0)}
.cls2{color:#cc11bb}
</style>
</head>
<body>
<h1 style="font-family:'French Script MT'" class="cls2">sreebrothers.blogspot.com</h1>
<hr/>
<h2 class="cls2">ABOUT Sreebrothers.blogspot.com</h2>
<p style="line-height:10px" class="cls2">
----------contents---------<br/>
----------contents---------<br/>
----------contents---------<br/>
----------contents---------
</p>
<h3 class="cls2">ABCDEFGHIJKLM</h3>
<ul style="line-height:50px">
<li style="font-size:2em"><span class="cls2">abcdef:</span></li>
<li style="font-size:2em"><span class="cls2">tuvwxyz:</span>
<ol style="font-size:50%" class="cls2">
<li>-------------------------------------</li>
<li>-------------------------------------</li>
<li>-------------------------------------</li>
<li>-------------------------------------</li>
</ol>
</li>
<li style="font-size:2em"><span class="cls2">AASSK</span></li>
<p style="white-space:pre">
<a href="http://sreebrothers.blogspot.com" target="_blank" class="cls1">For More Details</a>
</p>
</body>
</html>
CSSBoxModelDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Box Model Demo</title>
<style type="text/css">
p{text-align:center}
.c1{padding:15px 20px 20px 15px;border-width:thick;margin:50px;border-color:violet;border-style:double}
.c2{padding:15px 20px 20px 15px;border-width:thin;margin:50px;border-color:violet;border-style:dashed}
.c3{padding:15px 20px 20px 15px;border-width:medium;margin:50px;border-color:violet;border-style:solid}
.c4{padding:15px 20px 20px 15px;border-width:0.5cm;margin:50px;border-color:violet;border-style:outset}
.c5{padding:15px 20px 20px 15px;border-width:5mm;margin:50px;border-color:violet;border-style:groove}
</style>
<body>
<p class="c1">
Paragraph with double border
</p>
<p class="c2">
Paragraph with dashed border
</p>
<p class="c3">
Paragraph with solid border
</p>
<p class="c4">
Paragraph with outset border
</p>
<p class="c5">
Paragraph with groove border
</p>
</body>
</html>
NormalFlowBoxDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Normal Flow Box Layout</title>
<style type="text/css">
html{border:solid red thick}
body{border:double blue medium;margin:15px;padding:10px}
div{border:solid green medium;margin:20px;padding:15px}
.c1{background-color:violet}
</style>
</head>
<body>
<div>
<div><div class="c1"></div></div>
<div class="c1"></div>
</div>
</body>
</html>
RelativePositioningDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Relative Positioning</title>
<style type="text/css">
.c1{position:relative;top:100px;left:50px}
</style>
</head>
<body>
<h2>Heading Level 2</h2>
<h2>Heading Level 2</h2>
<h2>Heading Level 2</h2>
<h1 class="c1">Relatively Positioned Element</h1>
<p>
This is Paragraph....This is Paragraph....
This is Paragraph....This is Paragraph....
</p>
</body>
</html>
AbsolutePositioningDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Absolute Positioning</title>
<style type="text/css">
.c1{position:absolute;top:100px;left:50px}
</style>
</head>
<body>
<h2>Heading Level 2</h2>
<h2>Heading Level 2</h2>
<h2>Heading Level 2</h2>
<h1 class="c1">Absolutely Positioned Element</h1>
<p>
This is Paragraph....This is Paragraph....
This is Paragraph....This is Paragraph....
</p>
</body>
</html>
FloatPositioningDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float Positioning</title>
<style type="text/css">
.c1{float:left}
</style>
</head>
<body>
<p>
<img class="c1" src="sree.jpg" width="50" height="57"/>
Click the link below for more information<br/>
<a href="http://www.sreebrothers.blogspot.com">
http://www.sreebrothers.blogspot.com</a>
</p>
</body>
</html>
JavaScriptDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="script1.js">
</script>
</head>
<body></body>
</html>
script1.js
document.writeln("<h3>This is my First Java Script Program...</h3>");
AlertDialogDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="alert.js">
</script>
</head>
<body></body>
</html>
alert.js
window.alert("Welcome To\n JavaScript\n Programming");
PromptDialogDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="prompt.js">
</script>
</head>
<body></body>
</html>
prompt.js
var ch;
ch=window.prompt("Enter Your Choice:\n1.red\t2.black\t3.violet","");
switch(ch)
{
case "1":
document.writeln("<body bgcolor='red'>");
break;
case "2":
document.writeln("<body bgcolor='black'>");
break;
case "3":
document.writeln("<body bgcolor='violet'>");
break;
default:
window.alert("Invalid choice!");
break;
}
FunctionDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="square.js">
</script>
</head>
<body></body>
</html>
square.js
function square(x)
{
return x*x;
}
document.writeln("<h3>Square Values From 1 to 10</h3>");
for(var i=1;i<=10;i++)
{
document.writeln("Square("+i+")="+square(i)+"<br/>");
}
RecursiveFunctionDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="fact.js">
</script>
</head>
<body></body>
</html>
fact.js
function fact(n)
{
if(n==1)
return 1;
else
return n*fact(n-1);
}
document.writeln("<h3>Factorials of 1 to 10</h3>");
for(var i=1;i<=10;i++)
{
document.writeln("Factorial("+i+")="+fact(i)+"<br/>");
}
ObjectCreationDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="ObjectCreationDemo.js">
</script>
</head>
<body></body>
</html>
ObjectCreationDemo.js
var personObj=new Object();
personObj.fname="Sreekandan";
personObj.lname="K";
personObj.age=25;
personObj.weight=55;
//accessing the properties of an Object
document.writeln("Name:"+personObj.fname+"."+personObj.lname+"<br/>");
document.writeln("Age:"+personObj.age+"<br/>");
document.writeln("Weight:"+personObj.weight+"<br/>");
delete personObj.weight;
document.writeln("Weight:"+personObj.weight);
ForInDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="ForInDemo.js">
</script>
</head>
<body></body>
</html>
ForInDemo.js
var personObj=new Object();
personObj.fname="Sreekandan";
personObj.lname="K";
personObj.age=25;
personObj.weight=55;
document.writeln("Properties of personObj are:<br/>");
for(var p in personObj)
{
document.writeln(p+"<br/>");
}
ArrayDynamicChange.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="ArrayDynamicChange.js">
</script>
</head>
<body></body>
</html>
ArrayDynamicChange.js
var name=["sree","kandan","aassk","abc"];
document.writeln("Array Values Before Change:<br/>");
document.writeln(name);
var len1=window.prompt("Enter a number of array elements to be added:");
var len2=parseInt(len1);
name.length=name.length+len2;
for(var i=4;i<name.length;i++)
{
name[i]=window.prompt("Enter the next array element to be inserted:","");
}
document.writeln("<br/>Array Values After Change:<br/>");
document.writeln(name);
ArrayMethodsDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="ArrayMethodsDemo.js">
</script>
</head>
<body></body>
</html>
ArrayMethodsDemo.js
var a=[3,1,2,4,6,7,10,9,5,8];
document.writeln("Array Elements Are:<br/>");
document.writeln(a+"<br/>");
document.writeln("Removing the last Element of an array using pop():<br/>");
a.pop();
document.writeln(a+"<br/>");
document.writeln("Adding new Element to the end an array using push():<br/>");
a.push(11);
document.writeln(a+"<br/>");
document.writeln("Removing first Element of an array using shift():<br/>");
a.shift();
document.writeln(a+"<br/>");
document.writeln("Inserting an Element to an array using splice():<br/>");
a.splice(2,0,500);
document.writeln(a+"<br/>");
document.writeln("Removing an Element from an array using splice():<br/>");
a.splice(3,2);
document.writeln(a+"<br/>");
document.writeln("Converting an array to sting using toString():<br/>");
a.toString();
document.writeln(a+"<br/>");
ArraySorting.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="ArraySorting.js">
</script>
</head>
<body></body>
</html>
ArraySorting.js
var a=[3,1,2,4,6,7,10,9,5,8];
var name=["xyz","cdg","bmm","abc"]
function compare1(first,second)
{
return first-second;
}
function compare2(first,second)
{
return second-first;
}
document.writeln("Sorting Numbers Ascending:<br/>");
document.write(a.sort(compare1));
document.writeln("<br/>Sorting Numbers Descending:<br/>");
document.write(a.sort(compare2));
document.writeln("<br/>Sorting Alphabets Ascending:<br/>");
document.write(name.sort());
StringObjectDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="StringObjectDemo.js">
</script>
</head>
<body></body>
</html>
StringObjectDemo.js
var str1="StringObjectDemo";
var str2="Hello";
document.writeln(str1.charAt(0)+"<br/>");//returns S
document.writeln(str1.concat(str2)+"<br/>");//returns StringObjectDemoHello
document.writeln(str1.indexOf("j")+"<br/>");//returns 8
document.writeln(str2.replace("o","a")+"<br/>");//returns Hella
document.writeln(str1.slice(6,12)+"<br/>");//returns Object
Unit - III
ImageChage.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="ImgChange.js">
</script>
</head>
<body>
<p>
<img id="img1" src="1.jpg" width="100" height="125" onclick="change()"/>
Click over the image To Change The Image
</p>
</body>
</html>
ImgChange.js
function change()
{
var elt=document.getElementById("img1");
elt.setAttribute("src","3.jpg");
}
TextChange.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="TextChange.js">
</script>
</head>
<body>
<p id="pid" onclick="change()">
Click Here To Change The Content
</p>
</body>
</html>
TextChange.js
function change()
{
var elt=document.getElementById("pid");
elt.innerText="Content Changed Dynamically";
}
RolloverDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="rollover.js">
</script>
</head>
<body>
<p id="pid">
<img id="img1" src="3.jpg" width="100" height="125"
onmouseover="show('img1','1.jpg')" onmouseout="show('img1','3.jpg')"/>
</p>
</body>
</html>
rollover.js
function show(imgId,imgURL)
{
var elt=window.document.getElementById(imgId);
elt.setAttribute("src",imgURL);
return;
}
EventsDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Onload Event....</title>
<script type="text/javascript">
function f1()
{
window.alert("Loaded Successfully...");
}
function f2()
{
window.alert("UnLoaded Successfully...");
}
function f3()
{
var elt=document.getElementById("id1");
elt.innerText="Email is in the format:abc@hotmail.com";
}
function f4()
{
var elt=document.getElementById("id1");
elt.innerText="";
}
function f5()
{
window.alert("Text Selected");
}
function f6()
{
window.event.returnValue=false;
if(confirm( "Are you sure you want to submit the form data to the server?"))
window.event.returnValue=true;
}
function f7()
{
window.event.returnValue=false;
if(confirm("Are you sure you want to Reset the form data?"))
window.event.returnValue=true;
}
</script>
</head>
<body onload="f1()" onunload="f2()">
<p>Event Demonstration...</p>
<form id="frm1" onsubmit="f6()" onreset="f7()">
Name:
<input type="text" name="name" value="Sreekandan.K" onselect="f5()"/><br/>
Enter E-mail:
<input type="text" name="mail" onfocus="f3()" onblur="f4()"/>
<span id="id1"></span>
<br/>
<input type="submit" value="SUBMIT"/>
<input type="reset" value="CLEAR"/>
</form>
</body>
</html>
onmousemoveDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Onload Event....</title>
<script type="text/javascript">
function f1()
{
document.getElementById("pid").innerText="("+event.clientX+
","+event.clientY+")";
document.getElementById("pid1").innerText="("+event.screenX+
","+event.screenY+")";
}
</script>
</head>
<body onmousemove="f1()">
<p id="pid">(0,0)</p>
<p id="pid1">(0,0)</p>
</body>
</html>
MouseEventProperties.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OnMouseMove Event....</title>
<script type="text/javascript">
//not supported in IE6
function start()
{
var pelt=document.getElementById("pid");
pelt.addEventListener("mousemove",f1);
function f1(event)
{
var imgelt=document.getElementById("imgId");
var x=event.clientX;
imgelt.style.left=x+"px";
var y=event.clientY;
imgelt.style.top=y+"px";
}
}
</script>
<style type="text/css">
img{position:absolute;top:100px;left:100px}
p{background-color:red}
</style>
</head>
<body onload="start()">
<p id="pid">
This is My Paragraph<br/>
This is My Paragraph<br/>
This is My Paragraph
</p>
<img id="imgId" src="3.jpg" width="100" height="125"/>
</body>
</html>
BrowserDetection.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function f1()
{
var browserName=navigator.appName;
if(browserName=="Microsoft Internet Explorer")
{
window.alert("You Are Using Internet Explorer");
document.body.style.backgroundColor="cyan";
}
else if(browserName=="Netscape")
{
window.alert("You are using Netscape Browser");
//var elt=document.getElementById("bid");
document.body.style.setProperty("background-color","cyan","");
}
else
{
window.alert("Other Browser");
}
}
</script>
</head>
<body onload="f1()" id="bid">
</body>
</html>
windowProperties.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Onload Event....</title>
<script type="text/javascript">
function f1()
{
window.confirm("Confirm...?");
}
function f2()
{
window.open("http://www.google.com");
}
function f3()
{
window.moveTo(100,100);
}
function f4()
{
window.moveBy(100,100);
}
function f5()
{
window.resizeTo(500,500);
}
function f6()
{
window.resizeBy(100,100);
}
function f7()
{
window.print();
}
function f8()
{
window.close();
}
</script>
</head>
<body>
<form>
<input type="button" value="Confirm" onclick="f1()"><br/>
<input type="button" value="open" onclick="f2()"><br/>
<input type="button" value="moveTo" onclick="f3()"><br/>
<input type="button" value="moveBy" onclick="f4()"><br/>
<input type="button" value="resizeTo" onclick="f5()"><br/>
<input type="button" value="resizeBy" onclick="f6()"><br/>
<input type="button" value="print" onclick="f7()"><br/>
<input type="button" value="close" onclick="f8()"><br/>
</form>
</body>
</html>
MyServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class MyServlet extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
//set the HTTP content type in response header
res.setContentType("text/html;charset=\"UTF-8\"");
//Obtain the PrintWriter object for creating the body of the response
PrintWriter out=res.getWriter();
//Create the body of the response
out.println("<h3>Hello World!</h3>");
out.close();
}
}
VisitCountServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class VisitCountServlet extends HttpServlet
{
private int visits=0;
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
//set the HTTP content type in response header
res.setContentType("text/html;charset=\"UTF-8\"");
//Obtain the PrintWriter object for creating the body of the response
PrintWriter out=res.getWriter();
visits++;
//Create the body of the response
out.println("<h3>"+visits+" times the servlet has been visited</h3>");
out.close();
}
}
ParameterData.html
<html>
<head>
<title>Invoking Servlet From HTML</title>
</head>
<body bgcolor="violet">
<form name="form1" method="get" action="http://localhost:8080/servlets-examples/servlet/ParameterDataServlet">
Enter E-mail:
<input type="text" name="LoginID" size="25"/><br/>
Enter Password:
<input type="password" name="Password" size="25">
<input type="submit" Value="SUBMIT">
</form>
</body>
</html>
ParameterDataServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.util.*;
public class ParameterDataServlet extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
//set the HTTP content type in response header
res.setContentType("text/html;charset=\"UTF-8\"");
//Obtain the PrintWriter object for creating the body of the response
PrintWriter out=res.getWriter();
//Create the body of the response
out.println("<h3>Parameter Data in the URL are:</h3>");
String query=req.getQueryString();
out.println("Query String(URL Encoded Form):"+query+"<br/>");
Enumeration e=req.getParameterNames();
while(e.hasMoreElements())
{
String pName=(String)e.nextElement();
String pValue=req.getParameter(pName);
out.println(pName+":"+pValue+"<br/>");
}
out.close();
}
}
SessionServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.util.*;
public class SessionServlet extends HttpServlet
{
private int visits=0;
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
HttpSession session=req.getSession(true);
res.setContentType("text/html");
PrintWriter out=res.getWriter();
visits++;
String heading;
if(session.isNew())
{
heading="Welcome, New User";
}
else
{
heading="Welcome Back";
}
out.println("<body bgcolor=\"cyan\"><h2>"+heading+"</h2>");
out.println("<h3>Information on Your Session:</h3>");
out.println("<table border=1><tr><th>Info Type<th>Value</th>");
out.println("<tr><td>Session ID</td><td>"+session.getId()+"</td></tr>");
out.println("<tr><td>Creation Time</td><td>"+new Date(session.getCreationTime())+"</td></tr>");
out.println("<tr><td>Time of Last Access</td><td>"+new Date(session.getLastAccessedTime())+"</td></tr>");
out.println("<tr><td>Number of Visits</td><td>"+visits+"</td></tr>");
out.println("</table>");
}
}
AddCookie.html
<html>
<body>
<form name="frm1" method="get" action="http://localhost:8080/servlets-examples/servlet/AddCookieServlet">
Password:
<input type="password" name="pwd"/><br/>
<input type="submit" value="Login"/>
</form>
</body>
</html>
AddCookieServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class AddCookieServlet extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
res.setContentType("text/html");
String password=req.getParameter("pwd");
Cookie cookie=new Cookie("MyCookie",password);
res.addCookie(cookie);
PrintWriter out=res.getWriter();
out.println("Cookie has been created successfully");
out.close();
}
}
GetCookiesServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class GetCookiesServlet extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
res.setContentType("text/html");
Cookie[] cookies=req.getCookies();
PrintWriter out=res.getWriter();
for(int i=0;i<cookies.length;i++)
{
String name=cookies[i].getName();
String value=cookies[i].getValue();
out.println("Cookie Name: "+name+"; Cookie Value: "+value+"<br/>");
}
out.close();
}
}
HttpServletRequestMethods.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class HttpServletRequestMethods extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
res.setContentType("text/html");
PrintWriter out=res.getWriter();
out.println("<h3>HttpServletRequest Methos</h3>");
out.println("<table border='1'>");
out.println("<tr><td>Client IP Address</td><td>"+req.getRemoteAddr()+"</td></tr>");
out.println("<tr><td>Client Host Name</td><td>"+req.getRemoteHost()+"</td></tr>");
out.println("<tr><td>Protocol</td><td>"+req.getProtocol()+"</td></tr>");
out.println("<tr><td>Secure Channel</td><td>"+req.isSecure()+"</td></tr>");
out.println("<tr><td>Request URL</td><td>"+req.getRequestURL()+"</td></tr>");
out.println("</table>");
out.close();
}
}
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="ImgChange.js">
</script>
</head>
<body>
<p>
<img id="img1" src="1.jpg" width="100" height="125" onclick="change()"/>
Click over the image To Change The Image
</p>
</body>
</html>
ImgChange.js
function change()
{
var elt=document.getElementById("img1");
elt.setAttribute("src","3.jpg");
}
TextChange.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="TextChange.js">
</script>
</head>
<body>
<p id="pid" onclick="change()">
Click Here To Change The Content
</p>
</body>
</html>
TextChange.js
function change()
{
var elt=document.getElementById("pid");
elt.innerText="Content Changed Dynamically";
}
RolloverDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimpleJavaScript</title>
<script type="text/javascript" src="rollover.js">
</script>
</head>
<body>
<p id="pid">
<img id="img1" src="3.jpg" width="100" height="125"
onmouseover="show('img1','1.jpg')" onmouseout="show('img1','3.jpg')"/>
</p>
</body>
</html>
rollover.js
function show(imgId,imgURL)
{
var elt=window.document.getElementById(imgId);
elt.setAttribute("src",imgURL);
return;
}
EventsDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Onload Event....</title>
<script type="text/javascript">
function f1()
{
window.alert("Loaded Successfully...");
}
function f2()
{
window.alert("UnLoaded Successfully...");
}
function f3()
{
var elt=document.getElementById("id1");
elt.innerText="Email is in the format:abc@hotmail.com";
}
function f4()
{
var elt=document.getElementById("id1");
elt.innerText="";
}
function f5()
{
window.alert("Text Selected");
}
function f6()
{
window.event.returnValue=false;
if(confirm( "Are you sure you want to submit the form data to the server?"))
window.event.returnValue=true;
}
function f7()
{
window.event.returnValue=false;
if(confirm("Are you sure you want to Reset the form data?"))
window.event.returnValue=true;
}
</script>
</head>
<body onload="f1()" onunload="f2()">
<p>Event Demonstration...</p>
<form id="frm1" onsubmit="f6()" onreset="f7()">
Name:
<input type="text" name="name" value="Sreekandan.K" onselect="f5()"/><br/>
Enter E-mail:
<input type="text" name="mail" onfocus="f3()" onblur="f4()"/>
<span id="id1"></span>
<br/>
<input type="submit" value="SUBMIT"/>
<input type="reset" value="CLEAR"/>
</form>
</body>
</html>
onmousemoveDemo.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Onload Event....</title>
<script type="text/javascript">
function f1()
{
document.getElementById("pid").innerText="("+event.clientX+
","+event.clientY+")";
document.getElementById("pid1").innerText="("+event.screenX+
","+event.screenY+")";
}
</script>
</head>
<body onmousemove="f1()">
<p id="pid">(0,0)</p>
<p id="pid1">(0,0)</p>
</body>
</html>
MouseEventProperties.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OnMouseMove Event....</title>
<script type="text/javascript">
//not supported in IE6
function start()
{
var pelt=document.getElementById("pid");
pelt.addEventListener("mousemove",f1);
function f1(event)
{
var imgelt=document.getElementById("imgId");
var x=event.clientX;
imgelt.style.left=x+"px";
var y=event.clientY;
imgelt.style.top=y+"px";
}
}
</script>
<style type="text/css">
img{position:absolute;top:100px;left:100px}
p{background-color:red}
</style>
</head>
<body onload="start()">
<p id="pid">
This is My Paragraph<br/>
This is My Paragraph<br/>
This is My Paragraph
</p>
<img id="imgId" src="3.jpg" width="100" height="125"/>
</body>
</html>
BrowserDetection.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function f1()
{
var browserName=navigator.appName;
if(browserName=="Microsoft Internet Explorer")
{
window.alert("You Are Using Internet Explorer");
document.body.style.backgroundColor="cyan";
}
else if(browserName=="Netscape")
{
window.alert("You are using Netscape Browser");
//var elt=document.getElementById("bid");
document.body.style.setProperty("background-color","cyan","");
}
else
{
window.alert("Other Browser");
}
}
</script>
</head>
<body onload="f1()" id="bid">
</body>
</html>
windowProperties.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Onload Event....</title>
<script type="text/javascript">
function f1()
{
window.confirm("Confirm...?");
}
function f2()
{
window.open("http://www.google.com");
}
function f3()
{
window.moveTo(100,100);
}
function f4()
{
window.moveBy(100,100);
}
function f5()
{
window.resizeTo(500,500);
}
function f6()
{
window.resizeBy(100,100);
}
function f7()
{
window.print();
}
function f8()
{
window.close();
}
</script>
</head>
<body>
<form>
<input type="button" value="Confirm" onclick="f1()"><br/>
<input type="button" value="open" onclick="f2()"><br/>
<input type="button" value="moveTo" onclick="f3()"><br/>
<input type="button" value="moveBy" onclick="f4()"><br/>
<input type="button" value="resizeTo" onclick="f5()"><br/>
<input type="button" value="resizeBy" onclick="f6()"><br/>
<input type="button" value="print" onclick="f7()"><br/>
<input type="button" value="close" onclick="f8()"><br/>
</form>
</body>
</html>
MyServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class MyServlet extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
//set the HTTP content type in response header
res.setContentType("text/html;charset=\"UTF-8\"");
//Obtain the PrintWriter object for creating the body of the response
PrintWriter out=res.getWriter();
//Create the body of the response
out.println("<h3>Hello World!</h3>");
out.close();
}
}
VisitCountServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class VisitCountServlet extends HttpServlet
{
private int visits=0;
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
//set the HTTP content type in response header
res.setContentType("text/html;charset=\"UTF-8\"");
//Obtain the PrintWriter object for creating the body of the response
PrintWriter out=res.getWriter();
visits++;
//Create the body of the response
out.println("<h3>"+visits+" times the servlet has been visited</h3>");
out.close();
}
}
ParameterData.html
<html>
<head>
<title>Invoking Servlet From HTML</title>
</head>
<body bgcolor="violet">
<form name="form1" method="get" action="http://localhost:8080/servlets-examples/servlet/ParameterDataServlet">
Enter E-mail:
<input type="text" name="LoginID" size="25"/><br/>
Enter Password:
<input type="password" name="Password" size="25">
<input type="submit" Value="SUBMIT">
</form>
</body>
</html>
ParameterDataServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.util.*;
public class ParameterDataServlet extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
//set the HTTP content type in response header
res.setContentType("text/html;charset=\"UTF-8\"");
//Obtain the PrintWriter object for creating the body of the response
PrintWriter out=res.getWriter();
//Create the body of the response
out.println("<h3>Parameter Data in the URL are:</h3>");
String query=req.getQueryString();
out.println("Query String(URL Encoded Form):"+query+"<br/>");
Enumeration e=req.getParameterNames();
while(e.hasMoreElements())
{
String pName=(String)e.nextElement();
String pValue=req.getParameter(pName);
out.println(pName+":"+pValue+"<br/>");
}
out.close();
}
}
SessionServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.util.*;
public class SessionServlet extends HttpServlet
{
private int visits=0;
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
HttpSession session=req.getSession(true);
res.setContentType("text/html");
PrintWriter out=res.getWriter();
visits++;
String heading;
if(session.isNew())
{
heading="Welcome, New User";
}
else
{
heading="Welcome Back";
}
out.println("<body bgcolor=\"cyan\"><h2>"+heading+"</h2>");
out.println("<h3>Information on Your Session:</h3>");
out.println("<table border=1><tr><th>Info Type<th>Value</th>");
out.println("<tr><td>Session ID</td><td>"+session.getId()+"</td></tr>");
out.println("<tr><td>Creation Time</td><td>"+new Date(session.getCreationTime())+"</td></tr>");
out.println("<tr><td>Time of Last Access</td><td>"+new Date(session.getLastAccessedTime())+"</td></tr>");
out.println("<tr><td>Number of Visits</td><td>"+visits+"</td></tr>");
out.println("</table>");
}
}
AddCookie.html
<html>
<body>
<form name="frm1" method="get" action="http://localhost:8080/servlets-examples/servlet/AddCookieServlet">
Password:
<input type="password" name="pwd"/><br/>
<input type="submit" value="Login"/>
</form>
</body>
</html>
AddCookieServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class AddCookieServlet extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
res.setContentType("text/html");
String password=req.getParameter("pwd");
Cookie cookie=new Cookie("MyCookie",password);
res.addCookie(cookie);
PrintWriter out=res.getWriter();
out.println("Cookie has been created successfully");
out.close();
}
}
GetCookiesServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class GetCookiesServlet extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
res.setContentType("text/html");
Cookie[] cookies=req.getCookies();
PrintWriter out=res.getWriter();
for(int i=0;i<cookies.length;i++)
{
String name=cookies[i].getName();
String value=cookies[i].getValue();
out.println("Cookie Name: "+name+"; Cookie Value: "+value+"<br/>");
}
out.close();
}
}
HttpServletRequestMethods.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class HttpServletRequestMethods extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
res.setContentType("text/html");
PrintWriter out=res.getWriter();
out.println("<h3>HttpServletRequest Methos</h3>");
out.println("<table border='1'>");
out.println("<tr><td>Client IP Address</td><td>"+req.getRemoteAddr()+"</td></tr>");
out.println("<tr><td>Client Host Name</td><td>"+req.getRemoteHost()+"</td></tr>");
out.println("<tr><td>Protocol</td><td>"+req.getProtocol()+"</td></tr>");
out.println("<tr><td>Secure Channel</td><td>"+req.isSecure()+"</td></tr>");
out.println("<tr><td>Request URL</td><td>"+req.getRequestURL()+"</td></tr>");
out.println("</table>");
out.close();
}
}
