Scribd
Upload
13 views

Web Application 1-12 Program & Output

Uploaded by

Sagayapriya k.S
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

Web Application 1-12 Program & Output

Uploaded by

Sagayapriya k.S
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

1.

SQUARE, SQUARE ROOT, CUBE AND COMPLEMENTS


Program Coding:
<html>
<body>
<script language="javascript">
var i;
var inp=parseInt(prompt("enter the end range value","3"));
document.write("no"+"&nbsp&nbsp&nbsp"+"square"+"&nbsp&nbsp&nbsp"+"squareroot"+"&nbsp&nbsp&nbsp"+
"cube"+"&nbsp&nbsp&nbsp"+"complement "+"<br>");
for(i=1;i<=inp;i++){
var sq=i*i;
var srt=Math.round(Math.sqrt(i));
var cu=i*i*i;
var comp=(-i);
document.writeln(i+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+sq+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp"+srt+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&
nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+cu+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nb
sp&nbsp&nbsp"+comp+"<br>");
}
</script>
</body>
</html>
Output:
2. CALCULATOR
Program Coding:
<html>
<head>
<title> JavaScript Calculator </title>
<style>
h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}
#clear{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: red;
}
.formstyle
{
width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}

input
{
width: 20px;
background-color: green;
color: white;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
font-size: 15px;
}

#calc{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<h1> Calculator Program in JavaScript </h1>
<div class= "formstyle">
<form name = "form1">
<!-- This input box shows the button pressed by the user in calculator. -->
<input id = "calc" type ="text" name = "answer"> <br> <br>
<!-- Display the calculator button on the screen. -->
<!-- onclick() function display the number prsses by the user. -->
<input type = "button" value = "1" onclick = "form1.answer.value += '1' ">
<input type = "button" value = "2" onclick = "form1.answer.value += '2' ">
<input type = "button" value = "3" onclick = "form1.answer.value += '3' ">
<input type = "button" value = "+" onclick = "form1.answer.value += '+' ">
<br> <br>
<input type = "button" value = "4" onclick = "form1.answer.value += '4' ">
<input type = "button" value = "5" onclick = "form1.answer.value += '5' ">
<input type = "button" value = "6" onclick = "form1.answer.value += '6' ">
<input type = "button" value = "-" onclick = "form1.answer.value += '-' ">
<br> <br>
<input type = "button" value = "7" onclick = "form1.answer.value += '7' ">
<input type = "button" value = "8" onclick = "form1.answer.value += '8' ">
<input type = "button" value = "9" onclick = "form1.answer.value += '9' ">
<input type = "button" value = "*" onclick = "form1.answer.value += '*' ">
<br> <br>
<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">
<input type = "button" value = "0" onclick = "form1.answer.value += '0' ">
<input type = "button" value = "." onclick = "form1.answer.value += '.' ">
<!-- When we click on the '=' button, the onclick() shows the sum results on the calculator screen. -->
<input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer.value) ">
<br>
<!-- Display the Cancel button and erase all data entered by the user. -->
<input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "clear" >
<br>
</form>
</div>
</body>
</html>
Output:
3. SORT NUMBER AND STRING

Program Coding:
Number:
<html>
<body>
<script>
// Declare and initialize original array
var marks = [12, 25, 31, 23, 75, 81, 10];
// Print Before Sorting Array
document.write("Original Array</br>");
document.write(marks);
document.write("</br>");
// Call sort function
marks.sort();
document.write("</br>After Sorting in Ascending Order</br>");
// Print Sorted Numeric Array
document.write(marks);
</script>
</body>
</html>
String:
<html>
<head>
<body>
<h2>Sort strings using for loop in JavaScript</h2>
<script>
function sortString(strArray) {
var i = 0;
var j;
while (i < strArray.length) {
j = i + 1;
while (j < strArray.length) {
if (strArray[j] < strArray[i]) {
var tempStr = strArray[i];
strArray[i] = strArray[j];
strArray[j] = tempStr;
}
j++;
}
i++;
}
}
var sortArray = ['Karthik', 'Saideep', 'Balu', 'Shweta', 'Divya', 'Bhanu'];
document.write("Original Array of strings</br>");
document.write(sortArray);
document.write("</br>");
sortString(sortArray);
document.write("</br>Array of strings After sorting</br>");
document.write(sortArray);
</script>
</body>
</html>
Output:
Number:

String:
4. HIT COUNTER
Program Coding:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>
<p>The number of visitors is : <span id="cntr">0</span></p>
</div>
<script>
function counter_fn() {
var counter = document.getElementById("cntr");
var count = 0;
count = parseInt(counter.innerHTML);
count = count + 1;
counter.innerHTML = count;
}
window.onload = counter_fn;
</script>
</body>
</html>
Output:
5. EMAIL ID VALIDATION
Program Coding:
Email.html
<html>
<body onload="document.form1.text1.focus()">
<div class="mail">
<center><h2>Input an email address</h2></center>
<form name="form1" action="#">
<center><input type="text" name="text1" /></center>
&nbsp;
<class="validate">
<center> <input type="submit" name="validate" value="Validate"
onclick="ValidateEmail(document.form1.text1)"
/></center>
&nbsp;
</form>
</div>
<script src="email.js"></script>
</body>
</html>

Email.js
function ValidateEmail(inputText)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
alert("Valid email address!");
document.form1.text1.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.form1.text1.focus();
return false;
}
}
Output:
6. SCROLL TEXT ON STATUS BAR
Program Coding:
<html>
<head>
<center>SCROLL TEXT ON STATUS BAR</center>
<script language="JavaScript">
var count=0;
var delay=250;
var text="WELCOME TO CHENNAI";
function scroll()
{
window.status=text.substring(count,text.length)+text.substring(0,count)
if(count<text.length)
count ++;
else
count=0;
setTimeout("scroll()",delay);
}
</script>
</head>
<body onload="scroll()";>
</body>
</html>
Output:
7. CHOICE LIST
Program Coding:
<html>
<head>
<title>McDonalds</title>
<script language="JavaScript">
var m;
function pick(F1)
{
var z=" ";
for(j=0;j<3;j++)
{
for(i=0;i<F1.elements[j].length;i++)
{
if(F1.elements[j][i].selected)
{
var y=F1.elements[j].options[i].value;
z=z+"\n"+y;
F1.elements[3].value=z;
}
}
}
m=z;
}
function clr(F1)
{
F1.elements[3].value=" ";
}
</script>
</head>

<body bgcolor="#00ffff">
<h2><font color="blue" size="20"><center>Welcome to the world Famous Fast Food center
</font><br>
<font coulor="red" size="10">Mc Donalds!</center></font></h2>
<form name="F1">
<form size="+2">
Select the menu items of ur choice:</font><br><br>
<table>
<tr valign =top><td>
<font size="+1">
Major dishes:</font><br>
<select name="s1" MULTIPLE onBlur="pick(this.form)">
<option value="Mc burger->Rs.80" selected>mc burger
<option value="fish fullets->Rs.70" >fish fullets
<option value=" burger->Rs.60" > burger
<option value="veg burger->Rs.50" >veg burger
</select>
<br><br>
</td><td>
<font size="+1">
Miscellaneous:</font><br>
</b></td>
</tr></table>
<font size="+1">
Stock:</font><br>
<select name="s2"MULTIPLE onBlur="pick(this.form)">
<option value="Dining Table & Chairs->500"selected>Dining Table & Chairs
<option value="Tissues->1000">Tissues
<option value="Menu Cards->30">Menu Cards
<option value="Tool Bowl->50">Tool Bowl
</select>
<br><br></td>
</table>
<select name="s3" onBlur="pick(this.form)">
<option value="Milkshakes->Rs.35"selected>Milkshakes
<option value="Soft drinks->Rs.20">Soft drinks
<option value="Softy->Rs.30">Softy
</select>
<br><br></td><td>
<th><font size="6">The items selected form the menu are:</font></th>
<table>
<tr valign=top><td>
<textarea name="TAI" rows=10 cols=50>
</textarea ><br><br></td>
<td><br>
<br><br>
<b>
<input type="button" value="submit">
<input type="button" value="clear" onclick="clr(this.form)">
</form>
</body>
</html>
Output:
8. DIGITAL CLOCK
Program Coding:
<html>
<head>
<title>DIGITAL CLOCK</title>
<script language="JavaScript">
function nextone()
{
now=new Date();
hours=now.getHours();
mins=now.getMinutes();
sec=now.getSeconds();
if(mins<10)
time=" "+hours+ ":0"+mins;
else
time=" "+hours+":"+mins;
if(sec<10)
time+=":0"+sec;
else
time+=":"+sec;
document.timeform.timeclock.value=time;
setTimeout("nextone();4",100);
}
setTimeout("nextone();",100);
</script>
</head>
<body bgcolor="#00fff">
<font size="25"><center>
Digital clock</font>
<form name="timeform">
<font size=8>
current time=<input type="text" name="timeclock" size="10">
</font>
</form>
</body>
</html>
Output:
9. MOUSE EVENTS
Program Coding:
<html>
<head>
<script language="Javascript">
function bigImg(x)
{
x.style.height="120px";
x.style.width="120px";
}
function normalImg(x)
{
x.style.height="32px";
x.style.width="32px";
}
</script>
</head>
<body>
<img src=" C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg" onmouseover="bigImg(this)"
onmouseout="normalImg(this)" border="0" width="32" height="32">
</body>
</html>
Output:
Onmouseover

Onmouseout
10. BUTTON WITH IMAGE
Program Coding:
<html>
<head>
<style>
#image
{
display: none;
}
#image1
{
display: none;
}
#image2
{
display: none;
}
</style>
</head>
<body background="E:\Picture\960x0.jpg">
<div><img id="image" src="E:\Picture\images (1).jfif"/></div>
<button type="button"onclick="show()" id="btnID">Show Image1</button>
<div><img id="image1" src="E:\Picture\images.png"/></div>
<button type="button"onclick="show1()" id="btnID1">Show Image2</button>
<div><img id="image2" src="E:\Picture\download1.jfif"/></div>
<button type="button"onclick="show2()" id="btnID2">Show Image3</button>
<script>
function show()
{
document.getElementById('image').style.display = "block";
document.getElementById('btnID').style.display = "none";
}
function show1()
{
document.getElementById('image1').style.display = "block";
document.getElementById('btnID1').style.display = "none";
}
function show2()
{
document.getElementById('image2').style.display = "block";
document.getElementById('btnID2').style.display = "none";
}
</script>
</body>
</html>
Output:
11. FRAMES WITH SEARCH ENGINE
Program Coding:
Frame.html
<html>
<head>
<title>VB Script frames</title>
</head>
<frameset cols="30%,70%">
<frame src="first.html" name="one">
<frame src="second.html" name="two">
</frameset>
</html>

first.html
<html>
<head>
<title>vbscript</title>
</head>
<script language="vbscript">
function result(A)
if A=1 then
window.top.two.location.href="yahoo.html"
end if
if A=2 then
window.top.two.location.href="alta.html"
end if
if A=3 then
window.top.two.location.href="infoseek.html"
end if
end function
</script>
<body BGCOLOR="#00ffff">
<form>
<div align="center">
<input type="radio" name=choice onclick="result(1)">Yahoo<br>
<input type="radio" name=choice onclick="result(2)">Altavista<br>
<input type="radio" name=choice onclick="result(3)">Infoseek<br>
</div>
</form>
</body>
</html>

second.html
<html>
<head>
<title>Hi</title>
</head>
<body bgcolor="blue">
<h1><center>Welcome You All!!!!!</center></h1>
</body>
</html>

yahoo.html
<html>
<head>
<title>yahoo</title>
</head>
<body bgcolor="yellow">
<h1><center><a href="http://www.yahoo.com">yahoo page</a></center></h1>
</body>
</html>

alta.html
<html>
<head>
<title>yahoo</title>
</head>
<body bgcolor="green">
<h1><center><a href="https://digital.com/altavista/">Altavista</a></center></h1>
</body>
</html>

infoseek.html
<html>
<head>
<title>yahoo</title>
</head>
<body bgcolor="pink">
<h1><center><a href="http://www.infoseek.com">Infoseek</a></center></h1>
</body>
</html>
Output:
12. FORM VALIDATION
Program Coding:
<html>
<head>
<title>Registration Form</title>
<script type="text/javascript">
function validate_form() {
if (document.emp.emp_name.value == "")
{
alert("Please fill in the 'Your Employee Name' box.");
return false;
}
if (document.emp.num.value == "") {
alert("Enter Employee Number");
return false;
}
alert("sucessfully Submitted");
if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/).test(document.emp.email_id.value)) {
alert("You have entered an invalid email address!")
return (false)
}
}

function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 &&
(charCode < 48 || charCode > 57)) {
alert("Enter Number");
return false;
}
return true;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="emp" action="" onsubmit="return validate_form();" method="post">
<table align="center" width=40% width="100%" cellspacing="2" cellpadding="2" border="5">
<tr>
<td colspan="2" align="center"><b>Employee Registration Form.</b></td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Employee Name<span style="color:red">*</span></td>
<td width="57%"><input type="text" value="" name="emp_name" size="24"></td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Employee Number<span style="color:red">*</span></td>
<td width="57%">
<input type="text" value="" name="num" onkeypress="return isNumberKey(event)" size="24"></td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Address</td>
<td width="57%"><textarea rows="4" maxlen="200" name="S2" cols="20"></textarea></td>
</tr <tr>
<td align="left" valign="top" width="41%">Contact Number</td>
<td width="57%">
<input type="text" value="" onkeypress="return isNumberKey(event)" name="txtFName1" size="24"></td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Job Location</td>
<td width="57%"><select name="mydropdown">
<option value="Default">Default</option>
<option value="Chennai">Chennai</option>
<option value="Bangalore">Bangalore</option>
<option value="Chennai">Pune</option>
<option value="Bangalore">Mysore</option>
<option value="Chennai">Chandigarh</option>
</select></td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Designation</td>
<td width="57%">
<select name="mydropdown">
<option value="Default">Default</option>
<option value="Systems Engineer">Systems Engineer</option>
<option value="Senior Systems Engineer">Senior Systems Engineer</option>
<option value="Technology Analyst">Technology Analyst</option>
<option value="Technology Lead">Technology Lead</option>
<option value="Project Manager">Project Manager</option>
</select></td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Email<span style="color:red">*</span></td>
<td width="57%">
<input type="text" value="" name="email_id" size="24"></td>
</tr>
<tr>
<td colspan="2">
<p align="center">
<input type="submit" value=" Submit"
name="B4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;
<input type="reset" value=" Reset All " name="B5"></td>
</tr>
</table>
</form>
</body>
</html>
Output:

You might also like