Java Script is an interpreted, object-based scripting language, developed by Sun Micro systems and Netscape. JavaScript makes it easier to create interactive Web Pages. Common Gateway Interface was considered as the standard for processing the forms. It was time consuming process because form validation used to take place on the server side. JavaScript made the entire work easier by validating the form at the client side.
List of Javascript programs are given below with output screenshots as well and you need to copy the code as an individual program and paste in Notepad then save with .html (exa: mywebpage.html) file extension and see output in the browser.
1. Javascript Program to display DIGITAL CALCULATOR
<html>
<head>
<script language="javascript">
function calc(ch)
{
if(ch=="=")
{
document.f1.t1.value=eval(document.f1.t1.value)
}
else
{
if(ch=="C")
{
document.f1.t1.value=""
}
else
{
document.f1.t1.value+=ch
}
}
}
</script>
</head>
<body>
<h2> DIGITAL CALCULATOR </h2>
<form name=f1>
<input type=text name=t1 size=24> <br>
<table border=2 cellspacing=6 cellpadding=6>
<tr>
<td> <input type=button value="7" onClick="calc('7')">
<td> <input type=button value="8" onClick="calc('8')">
<td> <input type=button value="9" onClick="calc('9')">
<td> <input type=button value="*" onClick="calc('*')">
</tr>
<tr>
<td> <input type=button value="4" onClick="calc('4')">
<td> <input type=button value="5" onClick="calc('5')">
<td> <input type=button value="6" onClick="calc('6')">
<td> <input type=button value="/" onClick="calc('/')">
</tr>
<tr>
<td> <input type=button value="1" onClick="calc('1')">
<td> <input type=button value="2" onClick="calc('2')">
<td> <input type=button value="3" onClick="calc('3')">
<td> <input type=button value="-" onClick="calc('-')">
</tr>
<tr>
<td> <input type=button value="0" onClick="calc('0')">
<td> <input type=button value="C" onClick="calc('C')">
<td> <input type=button value="=" onClick="calc('=')">
<td> <input type=button value="+" onClick="calc('+')">
</tr>
</table>
</form>
<h3> by MIT India </h3>
</body>
</html>
2. Automatic Background Color Change using[timer method] Javascript.
<html>
<head>
<script language="javascript">
colours=new Array("red", "green", "blue", "yellow", "pink", "cyan")
index=0
function func()
{
if(index>5)
{
index=0
document.bgColor=colours[index]
index++
}
else
{
document.bgColor=colours[index]
index++
}
}
function startbk()
{
ref=setInterval('func()', 1000)
}
function stopbk()
{
clearInterval(ref)
}
</script>
</head>
<body>
<marquee><h1> Text Effect </h1> </marquee>
<input type=button name=b1 value="Start" onClick='startbk()'>
<input type=button name=b2 value="Stop" onClick='stopbk()'>
</body>
</html>
3. Digital CLOCK program using Javascript
<html>
<head>
<script language="javascript">
function disp()
{
dt=new Date()
h=dt.getHours() % 12 || 12;
m=dt.getMinutes()
s=dt.getSeconds()
document.f1.t1.value=h
document.f1.t2.value=m
document.f1.t3.value=s
}
</script>
</head>
<body>
<script language="javascript">
setInterval('disp()', 1000)
</script>
<form name=f1>
<input type=text name=t1 size=2>
<input type=text name=t2 size=2>
<input type=text name=t3 size=2>
</form>
</body>
</html>
4. File Open method using Javascript
<html>
<head>
<script language="javascript">
function f5()
{
var op
op=open("dht.html")
}
function f2()
{
var op
op=open("js2.html")
}
function f3()
{
var op
op=open("js.html")
}
</script>
</head>
<body>
<h1> File Open Method </h1>
<form name=f1>
<input type=button name=b1 value="File1" onClick='f5()'>
<input type=button name=b2 value="File2" onClick='f2()'>
<input type=button name=b3 value="File3" onClick='f3()'>
</form>
</body>
</html>
5. Email and Phone number Validation using Javascript
<html>
<head>
<script language="javascript">
function val()
{
var str, str2
str=document.f1.t1.value
str2=document.f1.t2.value
if (str2=="")
{
alert("Enter Phone number")
}
len=str.length
for(i=2; i<len; i++)
{
if(str.charAt(i)=='@')
{ return true}
}
alert("Invalid EmailId")
return false
}
</script>
</head>
<body>
<h1> Email and Phone Number Validation </h1>
<form name=f1>
Enter Email ID <input type=text name=t1> <br>
Enter Phone: <input type=text name=t2> <br>
<input type=button name=b1 value="Check" onClick='val()'>
</form>
</body>
</html>
6. All arithmetic operation program using javascript
<html>
<head>
<title> Using loop </title>
<script language="javascript">
function add()
{
document.f1.t3.value=parseInt(document.f1.t1.value)+parseI
nt(document.f1.t2.value)
}
function sub()
{
document.f1.t3.value=parseInt(document.f1.t1.value)-parseIn
t(document.f1.t2.value)
}
function mul()
{
document.f1.t3.value=parseInt(document.f1.t1.value)*parseIn
t(document.f1.t2.value)
}
function div()
{
document.f1.t3.value=parseInt(document.f1.t1.value)/parseIn
t(document.f1.t2.value)
}
</script>
</head>
<body>
<h1 align="center"> Simple Form </h1> <hr>
<form name=f1>
<table>
<tr> <td>Enter Num1: </td> <td><input type=text
name=t1></td> </tr>
<tr><td>Enter Num2: </td> <td><input type=text
name=t2> </td> </tr>
<tr> <td>Result: </td> <td><input type=text name=t3>
</td> </tr>
<tr> <td> <input type=button name=b1 value="Add"
onClick='add()'>
<input type=button name=b2 value="Subtract"
onClick='sub()'> </td>
<td>
<input type=button name=b3 value="Multiplication"
onClick='mul()'>
<input type=button name=b4 value="Division"
onClick='div()'>
<input type=reset name=b5 value="Reset"> </td> </tr>
</table>
</form>
</body>
</html>
7. Radio button and check box demo program
<html> <body> <h1 align=center> Using Checkbox and Radio Buttons </h1> <hr> <h4> Hobbies </h4> <form name=f1> <input type=checkbox name=c1 value=music> Music <br> <input type=checkbox name=c2 value=read> Reading <br> <input type=checkbox name=c3 value=watchtv> Watching TV <br> <hr> <h4> Mode of Payment </h4> <input type=radio name=r1 value=mop> Cash <br> <input type=radio name=r1 value=mop> Credit <br> <hr> <input type=button name=b1 value="Submit"> <input type=button name=b2 value="Cancel"> </form> </body> </html>
8. A Web Program on DHTML Effects
<html> <head> <title> Using DHTML </title> </head> <body> <h1>Using DHTML </h1> <p> <marquee behavior=scroll direction=right scrollamount=3> This is sample DHTML text effect </marquee> </p> <hr> <p> <marquee behavior=scroll direction=up scrollamount=3> This is sample DHTML text effect </marquee> </p> <hr> <p> <marquee behavior=scroll direction=down scrollamount=3> This is sample DHTML text effect </marquee> </p> <h1 onMouseOver='this.style.color="red"'> Place here mouse cursor here </h1> <h1 onClick='this.style.color="blue"'> Place here mouse cursor here </h1> <h1 onDblClick='this.style.color="Green"'> Place here mouse cursor here </h1> </body> </html>
9. Find length of the entered STRING
<html>
<body>
<script language="javascript">
var len, str
str=prompt("Enter any string")
len=str.length
document.write("total no of characters in the string:"+len)
</script>
</body>
</html>
10. String Functions program on Javascript
<html>
<body>
<script language="javascript">
var str,str2,str3
str=prompt("Enter any string")
str2=str.toUpperCase()
document.write("<h1>"+"String Functions"+"</h1>")
document.write("Upper case string is :"+ str2)
document.write("<br>")
str3=str.toLowerCase()
document.write("Lower case string is :"+ str3)
document.write("<br>")
arr=new Array(1,2,3,4,5)
document.write("Reverse array is :"+arr.reverse())
document.write("<br>")
arr2=new Array(1,5,2,3,4)
document.write("Sorted array is :"+arr2.sort())
document.write("<br>")
arr3=new Array(1,5,2,3,4)
document.write("separator is :"+arr3.join('*'))
document.write("<br>")
</script>
</body>
</html>
Hi there to all, the contents existing at this web site are genuinely remarkable for people experience, well,keep up the good work fellows.