Scribd
Upload
17 views

Web Application 1-12 Program & Output

Uploaded by

Sagayapriya k.S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

Web Application 1-12 Program & Output

Uploaded by

Sagayapriya k.S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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