1) Create A Form Having Number of Elements (Textboxes, Radio Buttons, Checkboxes, and So On) - Write A Javascript Code To Count The Number of Elements in A Form

PART A
1)Create a form having number of elements(Textboxes,Radio Buttons,Checkboxes,and so on).

Write a javascript code to count the number of elements in a form
<html>
<head>
<title>Count Elements</title>
<script type="text/javascript">
function countele()
{
alert("The number of form elements are:"+document.myForm.length);
}
</script>
</head>
<body>
<form name="myForm">
Name:<input type="text"/><br/><br/>
Password:<input type="password"/><br/><br/>
Gender:<input type="radio" name="gender"/>Male
<input type="radio" name="gender"/>FeMale<br /><br />
Newsletter:<input type="checkbox" checked="checked"/>FeMale<br /><br />
<input type="button" value="Send Message" onclick="countele()"/>

</form>
</body>
</html>
O/P:
2)Create a HTML form that has number of textboxes.When the form runs in the Browser fill the
textboxes with data. Write Javascript code that verifies that all textboxes has been filled.If a
textboxes has been left empty,popup an alert indicating which textbox has been left empty.
<html>
<head>
<title>Validate Text Boxes</title>
function validate()
{
var myarray=new Array();
for(var i=0;i<document.myform.length;i++)
{
if(document.myform.elements[i].value.length==0)
{
myarray.push(document.myform.elements[i].name);
}
}
if(myarray.length!=0)
{
alert("the following text boxes are empty:\n"+myarray);
}
}
</script>
</head>
<body>
<form name="myform" onsubmit="validate()">
Name:<input type="text" name="Name"/><br /><br />

Age:<input type="text" name="Age"/><br /><br />
Class:<input type="text" name="Class"/><br /><br />
<input type="submit" value="Send Message"/><br /><br />
</form>
</body>
</html>
O/P:
3)Develop a HTML form,which accepts any Mathematical expession.Write Javascript code to

Evaluates the expression and displays the result.
<html>
<head>
<title>Expression Evaluation</title>
function feval()
{
var enteredExpr=document.getElementById("expr").value;
document.getElementById("result").value=eval(enteredExpr);
}
</script>
</head>
<body>
<form name="myForm">
Enter any valid expression:<input type="text" id="expr"/><br/><br/>
<input type="button" value="Evaluate"onclick="feval()"/><br/><br/>
Result of the Expression:<input type="text" id="result"/><br/><br/>
</form>
</body>
</html>
o/p:
4)Create a page with dynamic effects.Write the code to include layers and basic animation.
<html>
<head>
<title>Basic Animation</title>
<style>
#layer1{position:absolute;top:50px;left:50px;}
</style>
function moveImage(layer)
{
var top=window.prompt("enter top value");
var left=window.prompt("enter left value");
document.getElementById(layer).style.top=top+'px';
document.getElementById(layer).style.left=left+'px';
}
</script>
</head>
<body>
<div id="layer1"><img src="fl.Jpg" onclick="moveImage('layer1')" alt="My image."/></div>
</body>
</form>
</body>
</html>
o/p:
5)Write a javascript code to find the sum of N natural Numbers(Use user defined function)
<html>
<head>
<title>Sum of Natural Numbers</title>
function sum()
{
var num=window.prompt("enter the value of N");
var n=parseInt(num);
var sum=(n*(n+1))/2;
window.alert("Sum of First "+n+" Natural Numbers is:"+sum);
}
</script>
</head>
<body>
<form>
<input type="button" value="Find Sum of Natural Numbers" onclick="sum()"/>
</form>
</body>
</html>
O/P
6)Write a javascript code block using arrays and generate the current date in words,this
should include the day,month and year.
<html>
<head>
<title>Date Display</title>
// create Array for month and day.
var month = new

Array("January","February","March","April","May","June","July","August","September","October","
November","December");
var day =new
Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var d=new Date(); // creates a date object and stores todays date by default
//getDate() -> returns the date (1-31)

//getDay() -> returns the weekday(1-7)
//getMonth()-> returns the month (1-12)
//getFullYear() -> returns the year (in 4 digits)
document.write("Today is - "+ d.getDate() + " - " + day[d.getDay()]+" - " + month[d.getMonth()] + "

- " + d.getFullYear());
</script>
</head>
</html>
o/p
7)Create a form for student information.write Javascript code to find Total,Average,Result and
Grade.
<html>
<head>
<title>Student information </title>
function calc()
{
form=document.getElementById("form1");
sub1=form.sub1.value;
// Find the total -- TypeCast the values of the textboxes to integer.
total=parseInt(sub1)+parseInt(sub2)+parseInt(sub3)+parseInt(sub4);
form.total.value= total; // display the total into textbox.
form.avg.value= parseInt(total)/4; // typecast.
// if any one sub is <35 then result is "Fail".

if(sub1<35||sub2<35||sub3<35||sub4<35)
{
form.result.value="Fail";}
else {form.result.value="Pass";}
// Grading system.
if(form.avg.value>90)
{
form.grade.value="A";}
else if (form.avg.value>80 && form.avg.value<90)
{
form.grade.value="B";}
{
form.grade.value="C";}
{
form.grade.value="D";}
else if (form.avg.value>=35 && form.avg.value<60)
{
form.grade.value="E";}
}
</script>
</head>
<body>
<form id="form1">
Enter the Name : <input type="text" size="20" name="name"/><br />
Marks in sub1 : <input type="text" size="20" name="sub1"/><br />

Marks in sub4 : <input type="text" size="20" name="sub4"/><br /><br />
<input type="button" name="btn" value="Calculate" onclick="calc()"/><br /><br />

Total :<input type="text" size="20" name="total"/><br />
Average :<input type="text" size="20" name="avg"/><br />
Result :<input type="text" size="20" name="result"/><br />
Grade :<input type="text" size="20" name="grade"/><br /><br />
<input type="reset" name="Btn2" value="Reset"/>
</form>
</body>
</html>
o/p:
8)Create a form for Employee information.Write Javascript code to find DA,HRA,PF,TAX,Gross
pay,Deduction and Net pay.
<html>
<head>
<title>Student information </title>
function calc()
{
form=document.getElementById("form1");
sal=form.sal.value;
sal=parseFloat(sal);
form.da.value=(sal*0.5);
form.hra.value=(sal*0.15);
form.pf.value=(sal*8/100);
form.pd.value=(sal*8/100);
d=parseFloat(form.da.value);
h=parseFloat(form.hra.value);
p=parseFloat(form.pf.value);
gs=parseFloat(sal+d+h+p);
form.gsal.value=parseFloat(gs);
form.tax.value=(gs*0.1);
t=parseFloat(form.tax.value);
form.ns.value=parseFloat(gs-(t+p));
}
</script>
</head>
<body>
<form id="form1">
<pre>
Enter the Name :<input type="text" size="20" name="name"/><br />

Department :<input type="text" size="20" name="dept"/><br />
Basic Salary :<input type="text" size="20" name="sal"/><br />
DA :<input type="text" size="20" name="da" readonly="readonly" /><br />
HRA :<input type="text" size="20" name="hra" readonly="readonly" /><br />
PF :<input type="text" size="20" name="pf" readonly="readonly" /><br />
Gross Salary :<input type="text" size="20" name="gsal" readonly="readonly" /><br />
<b>Deductions :</b ><br />

TAX :<input type="text" size="20" name="tax" readonly="readonly" /><br />
PF :<input type ="text" size="20" name="pd" readonly="readonly" /> <br />
<b><i>Net Salary :</b></i> <input type="text" size="20" name="ns" readonly="readonly" /> <br />
<input type="button" name="btn" value="Calculate" onclick="calc()"/><br />
<input type="reset" name="Btn2" value="Reset"/>
</pre>
</form>
</body>
</html>
o/p:
9)Create a form consists of a two Multiple choice lists and one single choice list,
1) The first multiple choice list,displays the Major dishes available.
2)The second multiple choice list,displays the Starters available.
3)The single choice list,displays the Soft drinks available.
The selected items from all the lists should be captured and displayed in a Text Area along with
their respective costs.
On clicking the 'Total Cost' button,the total cost of all the selected items is calculated and
displayed at the end in the
Text Area.A 'Clear' button is provided to clear the Text Area.
<html>
<head>
<title>MENU DRIVEN PROGRAM</title>
function findCost()
{
var major=document.getElementById("major");
var starter=document.getElementById("starters");
var soft=document.getElementById("soft");
var selectedItems="Item\t\t\tPrice\n................\n";
var totalcost=0;
for(var i=0;i<major.options.length;i++)
{
var option=major.options[i];
if(option.selected==true)
{
var price=parseInt(option.value);
totalcost=totalcost+price;
selectedItems=selectedItems+option.text+"\t\t"+price+"\n";
}
}
for(var i=0;i<starter.options.length;i++)
{
var option=starter.options[i];
if(option.selected==true)
{
var price=parseInt(option.value);
selectedItems=selectedItems+option.text+"\t\t"+price+"\n";
}
}
var softdrinkIndex=soft.selectedIndex;
if(softdrinkIndex!=-1)
{
var selectedSoftdrink=soft.options[soft.selectedIndex].text;
var price=parseInt(soft.options[soft.selectedIndex].value);
selectedItems=selectedItems+selectedSoftdrink+"\t\t"+price+"\n";
}
selectedItems=selectedItems+"\n\nTotal Cost\t\t"+totalcost;
document.getElementById("ordereditems").value=selectedItems;
}
</script>
</head>
<body>
<form name="menuForm">
<table border="10">
<tr>
<th colspan="2" align="center">
<h2> restaurant Menu Details</h2>
</th>
</tr>
<tr>
<td>Major Dishes:</td>
<td><select id="major"size="2" multiple="multiple">
<option value="100">Veg Pulav</option>
<option value="150"> gobi</option>
</select>
</td>
</tr>
<tr>
<td>Starters:</td>
<td><select id="starters"size="2" multiple="multiple">
<option value="120">Fried chicken</option>
<option value="140"> gobi chilli</option>
</select>
</td>
</tr>
<tr>
<td>Soft drinks:</td>
<td><select id="soft" size="2">
<option value="120">Pepsi</option>
<option value="140"> lime soda</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<textarea id="ordereditems" rows="10" cols="40">
</textarea></td>
</tr>
<tr>
<td><input type="button" value="Total Cost" onclick="findCost()"/></td>
<td><input type="reset" value="Clear"/></td>
</tr>
</table>
</form>
</body>
</html>
o/p
10)Create a web page using two image files,which switch between one another as the mouse
pointer moves over the iamages.Use the onMouseOver and onMouseOut event handlers.
<html>
<head>
<title>Mouse Over and Mouse Out</title>
<style type="text/css">
#image1{position:absolute;top:50x;left:50x;border:thin;visibility:visible;}
#image2{position:absolute;top:50x;left:50x;border:thin;visibility:hidden;}
</style>
function changeImage()
{
var imageOne=document.getElementById("image1").style;
var imageTwo=document.getElementById("image2").style;
if(imageOne.visibility=="visible")
{
imageOne.visibility="hidden";
imageTwo.visibility="visible";
}
else
{
imageOne.visibility="visible";
imageTwo.visibility="hidden";
}
}
</script>
</head>
<body>
<form>
<img src="AAA.jpg" alt="Zooo image" id="image1" onmouseover="changeImage()"
onmouseout="changeImage()"></img>
<img src="airplane.jpg" alt="Zooo image2" id="image2" onmouseover="changeImage()"
onmouseout="changeImage()"></img>
</form>
</body>
</html>
O/P
PART B
1)Display information about yourself:

a)Use unordered list to display your hobbies.
b)Use definition list to display certain events.
c)Use ordered list to display your subjects of interest.
<html>
<head>
<title>Lists in Html</title>
</head>
<body bgcolor="yellow" text="black">

<h3>UNORDERED LIST</h3>
<h4>HOBBIES</h4>
<ul type="circle">
<li>SINGING</li>
<li>PAINTING</li>
<li>GARDENING</li>
</ul>
<h3>ORDERED LIST</h3>
<h4>FAVOURITE FOOD</h4>
<ol type="i">
<li>Pulao</li>
<li>Roti</li>
<li>Veg Biriyani</li>
</ol>
<h3>DEFINITION LIST</h3>
<h4><b>EVENTS</b></h4>
<dl>
<dt>DANCE</dt>
<dd>Dance is the art of movement of the body......</dd>
<dt>MUSIC</dt>
<dd>Music is an art........</dd>
</dl>
</body>
</html>
O/P:
2)Create a HTML document to display the coursses available in ypur college.Each course should be
linked to another HTML document,which provides information about the course.
<html>
<head>
<title>HYPERLINKS DEMO</title>
</head>
<body bgcolor="lightgrey">
<center><h3>RNS COLLEGE</h3>
<h4>Channasandra,Bangalore-98</h4>
</center>
<h3>COURSES</h3>
<ul>
<li><a href="bba.html">BBA</a>
<li><a href="bca.html">BCA</a>
</ul>
</body>
</html>
**********************************************************************************
****
###############bba.html file###################
<html>
<head>
<title>BBA</title>
</head>
<body bgcolor="blue" text="white">

<center><h3>RNS First Grade College</h3></center>
<h3><b>BBA<b></h3>
<p>The duration of the course is 3 years consisting of 6 semesters.<br />
The subjects offered are CA,BM,ICHR,CAB,MB,CDS.......</p>
</body>
</html>
###############bca.html file###################
<html>
<head>
<title>BCA</title>
</head>
<body bgcolor="blue" text="white">

<center><h3>RNS First Grade College</h3></center>
<h3><b>BCA<b></h3>
<p>The duration of the course is 3 years consisting of 6 semesters.<br />
The subjects offered are C,C++,DS,ES,MATHS,JAVA,DE,WP,DCN,CA,MP.......</p>
</body>
</html>
O/P:
3)Create a table to display your class timetable.Use your choice of background color,table color
etc.Use appropriate cell spacing,cell pading and cell width.
<html>
<head>
<title>time table</title>
</head>
<body bgcolor="skyblue">
<center><h1><font color="darkcyan">COLLEGE TIMETABLE</FONT></h1></center>
<table border="3" cellspacing="3" cellpadding="5" align="center" bgcolor="white">
<tr border="2">
<th>8:30-9:30</th>
<th>9:30-10:30</th>
<th>10:3-11:30</th>
<th>11:30-12:30</th>
<th>12:30-2:00</th>
<th>2:00-3:00</th>
<th>3:00-4:00</th>
<th>4:00-5:00</th>
</tr>
<tr>
<th>MONDAY</th>
<td>SUB1</td>
<td>SUB2</td>
<td>SUB3</td>
<td rowspan="6"align="center">L<br>U<br>N<br>C<br>H</td>
<td>SUB4</td>
<td>SUB5</td>
<td align="center">Counselling Class</td>
</tr>
<tr>
<th>TUESDAY</th>
<td>SUB1</td>
<td>SUB2</td>
<td>SUB3</td>
<td>---</td>
<td>SUB4</td>
<td>SUB5</td>
</tr>
<tr>
<th>WEDNESDAY</th>
<td>SUB1</td>
<td>SUB2</td>
<td>SUB4</td>
<td>---</td>
<td>Lab</td>
</tr>
<tr>
<th>THURSDAY</th>
<td>SUB1</td>
<td>SUB2</td>
<td>SUB3</td>
<td>---</td>
<td>SUB4</td>
<td>SUB5</td>
</tr>
<tr>
<th>FRIDAY</th>
<td>SUB1</td>
<td>SUB2</td>
<td>SUB3</td>
<td>---</td>
<td>SUB4</td>
<td>SUB5</td>
</tr>
<tr>
<th>SATURDAY</th>
<td>SUB1</td>
<td colspan="2">Seminar</td>
</tr>
</body>
</html>
O/P:
4)HTML code to demonstrate form elements and their tags.
<html>
<head>
<title> FORM DEMO</title>
</head>
<body>
<center><h2>RNS TUTORIAL admission form</h2></center>
<h3>Please fill the following</h3>
<form>
<fieldset>
<legend>Personal Information</legend>
<font size=4>First Name:<input type="text" name="firstname"><br />
Last Name:<input type="text" name="lastname"></font><br />
</fieldset>
<p> <font=4>BATCH:
<input type="radio" name="batch" value="morning" checked="checked" />Morning
<input type="radio" name="batch" value="evening" />Evening </p>
<font size=4>Choose Course:</font>

<select name="courses">
<option>B.Com</option>
<option>BBA</option>
<option>BCA</option>
</select>
<p><h3>Please tick the appropriate choice for coaching:</h3>

<label><input type="checkbox" name ="choice" value="regular exam" />Regular Exam</label>
<label><input type="checkbox" name ="choice" value="aptitude test" />Aptitude Test</label>
</p>
<p><h3>Please provide your Aspiration</h3></p>
<form action="handler">
<textarea name="Aspiration" rows="3" cols="50">Brief and concise</textarea><br />
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
O/P:
5)Write Javascript code to convert text entered in a text box to uppercase.
<html>
<head>
<title>To convert text to uppercase</title>
function change_case()
{
document.form1.text1.value=document.form1.text1.value.toUpperCase();
}
</script>
</head>
<body onload="form1.type.focus():">
<center><h1>To convert text to Uppercase</h1></center>
<form name="form1" method="post">
Enter User Id<input type="text" name="text1" value="">
<input type="button" value="Change to Uppercase" onclick="change_case();"></form>
</body>
</html>
O/P:
6)Write a Javascript code to find factorial of a number.
<html>
<head>
<title>Recursive Factorial Function</title>
var number,n;
num=window.prompt("Enter the number to find the factorial","0");
n=parseInt(num);
document.write("<h1><center>Factorial of "+n+" is ");
for(var i=0;i<=n;i++)
var f=fact(n);
document.write("<i>"+f+"</i></center></h1>");
function fact(n)
{
if(n==1)
return 1;
else
return n*fact(n-1);
}
</script>
</head><body bgcolor="powderblue"></body>
</html>
O/P:
7)To demonstrate the use of constructors in javascript.
<html>
<body>
<p>Demo of Constructors</p>
<script>
function car(new_make,new_model,new_year)
{
this.make=new_make;
this.model=new_model;
this.year=new_year;
}
my_car=new car("ford","fusion","2005");
function display_car()
{
document.write("car make:",this.make,"<br />");
document.write("car model:",this.model,"<br />");
document.write("car year:",this.year,"<br />");
}
document.write("Details of my car object"+"<br />");
my_car.display();
function car(new_make,new_model,new_year)
{
this.make=new_make;
this.model=new_model;
this.year=new_year;
this.display=display_car;
}
new_car=new car("Toyota","Innova","2010");
document.write("Details of new_car object"+"<br />");
new_car.display();
</script>
</body>
</html>
O/P:
8)Write Javascript code to illustrate how to create a CANVAS element and draw on it.
<html>
<head>
<style>
canvas
{
border:1px solid green;
}
</style>
</head>
<body>
<button onclick="myFunction()">Create Canvas and draw green rectangle</button>
<p>Click the button to create a CANVAS element,with a green rectangle</p>
<script>
function myFunction()
{
var x=document.createElement("CANVAS");
var ctx=x.getContext("2d");
ctx.fillStyle="#00ff00";
ctx.fillRect(20,20,150,100);
document.body.appendChild(x);
}
</script>
</body>
</html>
O/P:
9)Write Javascript code to display the browser name and version number using Navigator object.
<html>
<head>
<title>Navigator</title>
<script type="text/javascript" src="navigate.js">
</script>
</head>
<body onload="navProperties()">
</body>
</html>
#############navigate.js##############
function navProperties()
{
alert("The browser is :"+navigator.appName+"\n"+"The version number
is:"+navigator.appVersion+"\n");
}
O/P:
10)Use CSS to set margins and include background images in a HTML document.
<html>
<head>
<title>background images</title>
<style type="text/css">
body{background-image:url(Bang.jpg);background-size:375px 300px;}
p{margin-left:30px;margin-right:30px;margin-top:50px;font-size:1.1em; color:white}
</style>
</head>
<body>
<p>
Bengaluru is the capital and the largest city of the Indian state of Karnataka. It is India's third largest
city and fifth largest metropolitan area. Modern Bengaluru was founded in 1537 CE by Kempe
Gowda, a vassal of the Vijayanagara Empire. Kempe Gowda built a mud fort in the vicinity of modern
Bengaluru. By 1831, the city was incorporated into the British Raj with the establishment of the
Bangalore Cantonment.The British returned dominion of the city to the King of Mysore, choosing
however, to retain jurisdiction over the cantonment.Therefore, Bengaluru essentially became a twin
city, with civic and infrastructural developments of the cantonment conforming to European styles
of planning. For most of the period after Indian independence in 1947, Bengaluru was a B-1 status
city, and was not considered to be one of India's "4 major metropolitan cities".The growth of
Information Technology in the city, which is the largest contributor to India's software exports, has
led to a decadal growth that is second to only that of India's capital New Delhi. The city's roads,
however, were not designed to accommodate the vehicular traffic, growing at an average of 8%
annually, that prevails in Bengaluru. This leads to heavy slow traffic and traffic jams in Bengaluru
Bangalore continues to fall behind in this area, and foreign visitors are often shocked to see the
state of infrastructure, but now things are improving thanks to heavy investment of the Karnataka
Government in infra projects. This is the main problem from migration of people from other
states.Early city planning
</p>
</body>
</html>
O/P:
600*600

1) Create A Form Having Number of Elements (Textboxes, Radio Buttons, Checkboxes, and So On) - Write A Javascript Code To Count The Number of Elements in A Form

Uploaded by

Copyright:

Available Formats

1) Create A Form Having Number of Elements (Textboxes, Radio Buttons, Checkboxes, and So On) - Write A Javascript Code To Count The Number of Elements in A Form

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1) Create A Form Having Number of Elements (Textboxes, Radio Buttons, Checkboxes, and So On) - Write A Javascript Code To Count The Number of Elements in A Form

Uploaded by

Copyright:

Available Formats

PART A

1)Create a form having number of elements(Textboxes,Radio Buttons,Checkboxes,and so on).

Gender:<input type="radio" name="gender"/>Male

<input type="radio" name="gender"/>FeMale<br /><br />

Newsletter:<input type="checkbox" checked="checked"/>FeMale<br /><br />

<input type="button" value="Send Message" onclick="countele()"/>

<form name="myform" onsubmit="validate()">

Name:<input type="text" name="Name"/><br /><br />

3)Develop a HTML form,which accepts any Mathematical expession.Write Javascript code to

// create Array for month and day.

var month = new

//getDate() -> returns the date (1-31)

document.write("Today is - "+ d.getDate() + " - " + day[d.getDay()]+" - " + month[d.getMonth()] + "

// Find the total -- TypeCast the values of the textboxes to integer.

form.avg.value= parseInt(total)/4; // typecast.

// if any one sub is <35 then result is "Fail".

Enter the Name : <input type="text" size="20" name="name"/><br />

Marks in sub1 : <input type="text" size="20" name="sub1"/><br />

Marks in sub2 : <input type="text" size="20" name="sub2"/><br />

Marks in sub3 : <input type="text" size="20" name="sub3"/><br />

<input type="button" name="btn" value="Calculate" onclick="calc()"/><br /><br />

Enter the Name :<input type="text" size="20" name="name"/><br />

<b>Deductions :</b ><br />

1)Display information about yourself:

<body bgcolor="yellow" text="black">

<body bgcolor="blue" text="white">

<body bgcolor="blue" text="white">

<font size=4>Choose Course:</font>

<p><h3>Please tick the appropriate choice for coaching:</h3>

5)Write Javascript code to convert text entered in a text box to uppercase.

7)To demonstrate the use of constructors in javascript.

You might also like