Java Script Programming
Department of Computer Science 1
Program No:1
Write a javascript program to find the area and circumference of a
circle
Program Code:
<html>
<head>
<title>find the area and circumference of a circle</title>
</head>
<body>
<script>
function CalculateArea()
{
var radius=[Link];
[Link]("<p>The area of the circle is"+(radius * radius * [Link])+"</p>");
[Link]("<p>The circumference of the circle is"+(2 * radius * [Link])+"</p>");
}
</script>
<form name="form1">
<h1 style="text-align:center">create a circle!</h1>
<br>
<div style="text-align:center">
Enter the radius of circle:
<input type="text" name="txtRadius" size="10">
<br><br>
<input type="button" value="Calculate" onClick='CalculateArea();'>
</form>
</body>
</html>
Output
Department of Computer Science 2
Program No:2
Write a javascript program to check whether a given number is
perfect,abundant or deficient.
Program Code:
<html>
<head>
<script>
function perfectNumber()
{
var flag,number,remainder,addition=0,i;
number=Number([Link]("N").value);
flag=number;
for(i=0;i<number;i++)
Department of Computer Science 3
{
remainder=number%i;
if(remainder==0)
{
addition +=i;
}
}
if(addition==flag)
{
[Link]("-The inputed number is perfect");
}
else if(addition>flag)
{
[Link]("-The inputed number is abundant");
}
else
{
[Link]("-The inputed number is deficient");
}
}
</script>
</head>
<body>
<br>
<h1>Wheather a number is Perfect,Abundant or Deficient</h1>
Enter the Number:<input type="text"name="n"id="N"/>
<br><br>
<button onClick="perfectNumber()">CHECK</button>
</body>
</html>
Output
Department of Computer Science 4
Program No:3
Design a javascript program to display the multiplication tableby
accepting the number and the limit
Program Code:
<html>
<head>
<body bgcolor="#F4F4F4">
</head>
<body>
<table border="1" style="margin: 0 auto; width:500px">
<tr>
<td colspan="2"><h2>Print Multiplication Table using JavaScript</h2></td>
</tr>
<tr>
<td width="28%">Enter a Number : </td>
<td><input type="number" onchange="printTable(this)"></td>
</tr>
<tr>
<td colspan="2"><span id="mul"></span></td>
</tr>
</table>
<script>
function printTable(num)
{
var input = [Link];
if(!isNaN(input))
{
var table="";
var number="";
for(i=1;i<=10;i++)
{
number = input * i;
table += input + " * " + i + " = " + number + "<br/>";
}
[Link]("mul").innerHTML = table;
}
else
{
[Link]("mul").innerHTML = "Please Enter a valid Number";
}
}
</script>
Department of Computer Science 5
</body>
</html>
Output
Program No:4
Design a form that accepts two integers .Provide 4 buttons for
Add,Subtract,Multiply,[Link] Javascript program to
addd,subtract,multiply and devide the given numbers when these
buttons are [Link] output elements to display the results.
Program Code:
<html>
<head>
<title>JavaScript program to calculate Arithmetic Operations of two numbers </title>
</head>
<body bgcolor="#F4F4F4">
<h1>Arithmetic Operations of two numbers</h1>
<form>
<table border="1">
<tr>
<td>1st Number :</td><td> <input type="text" id="firstNumber" /></td>
Department of Computer Science 6
</tr>
<tr>
<td>2nd Number: </td><td><input type="text" id="secondNumber" /></td>
</tr>
<tr>
<td>Result: </td><td><input type="text" id="result" /></td>
</tr>
<tr><td>
<input type="button" onClick="add()" Value="Addition" />
<input type="button" onClick="sub()" Value="Substraction" />
<input type="button" onClick="multiplyBy()" Value="Multiply" />
<input type="button" onClick="divideBy()" Value="Divide" />
</td></tr>
</table>
</form>
<script>
function add()
{
var num1 = parseInt([Link]("firstNumber").value);
var num2 =
parseInt([Link]("secondNumber").value); var ansD =
[Link]("result");
[Link] = num1 + num2;
}
function sub()
{
var num1 = parseInt([Link]("firstNumber").value);
var num2 = parseInt([Link]("secondNumber").value);
var ansD = [Link]("result");
[Link] = num1 - num2;
}
function multiplyBy()
{
var num1 = parseInt([Link]("firstNumber").value);
var num2 = parseInt([Link]("secondNumber").value);
var ansD = [Link]("result");
[Link] = num1 * num2;
}
function divideBy()
{
var num1 = parseInt([Link]("firstNumber").value);
var num2 = parseInt([Link]("secondNumber").value);
var ansD = [Link]("result");
[Link] = num1 / num2;
}
</script>
</body>
</html>
Department of Computer Science 7
Output
Program No:5
Write a java script program to store different colours in an array
and change the background color of the page using these array
elements.
Program Code:
<html>
<body>
<center>
<script>
function myArray(n)
{
var backcolor=["#00f00","#ff0000","#0000ff","#cce"];
[Link]=backcolor[n];
}
</script>
<a href="#" onmouseover="myArray(1)">Red</a>
<a href="#" onmouseover="myArray(2)">Blue</a>
<a href="#" onmouseover="myArray(4)">Green</a>
<a href="#" onmouseover="myArray(3)">Ash</a>
<h1>Changing background color</h1>
</center>
</body>
</html>
Department of Computer Science 8
Output
Program No:6
Write a javascript program to check whether a given string is
palindrome or not.
Program Code:
<html>
<head>
<title>Program 6</title>
<script type="text/Javascript">
function palindrome(str)
{
var len=[Link];
for(let i=0; i<len/2; i++)
{
if(str[i]!=str[len-i-1])
{
alert("Not palindrome");
return;
}
}
alert("Palindrome");
return;
Department of Computer Science 9
}
</script>
</head>
<body>
<h3>Check Palindrome or not</h3>
<form>
Enter string:
<input type="text" id="myinput">
<input type="submit" value="Check" onClick="palindrome([Link])"/>
</form>
</body>
</html>
Output
Department of Computer Science 10
Program No:7
Write a javascript program to create an array and read values using
prompt popup box and display the the sum of the elements in an
AlertBox
Program Code:
<html>
<head>
<title>Program 7</title>
</head>
<body>
<script type="text/Javascript">
function arraycreate()
{
var l=prompt("Enter number of elements");
var arr=[];
var sum=0;
[Link]("Inputted array elements are: <br>");
for(let i=0;i<l;i++)
{
[Link](prompt("Enter array value "+(i+1)+": "));
[Link](arr[i]+"<br>");
sum=sum+parseInt(arr[i]);
}
[Link]("<input type='button' id='find' value='Sum'>");
[Link]("find").onclick=function(){alert("Sum = "+sum)};
}
arraycreate();
</script>
</body>
</html>
Department of Computer Science 11
Output
Department of Computer Science 12
Program No:8
Change the textcolour and back colour of a TextBox using onfocus
and onBlur event
Program Code:
<html>
<head>
<title>Program 8</title>
<script type="text/Javascript">
function focusfunction()
{
[Link]("myinput").[Link]="yellow";
[Link]("myinput").[Link]="red";
}
function blurfunction()
{
[Link]("myinput").[Link]="white";
[Link]("myinput").[Link]="black";
}
</script>
</head>
<body>
<h3>Change text color and background color of a textbox</h3>
Enter your name:
<input type="text" id="myinput" onfocus="focusfunction()" onblur="blurfunction()">
</body>
</html>
Output
Department of Computer Science 13
Program No:9
Write a Javascript program to display Capital of a country using
onchange [Link] country is selected from a select box and
capital is displayed on a TextBox.
Program Code
<html>
<head>
<title>Program 9</title>
</head>
<script type="text/Javascript">
function Capital()
{
var c=[Link]("mysel").value;
if(c=="India")
[Link]("demo").value="New Delhi";
else if(c=="China")
[Link]("demo").value="Beijing";
else if(c=="England")
[Link]("demo").value="London";
else if(c=="France")
[Link]("demo").value="Paris";
else if(c=="Italy")
[Link]("demo").value="Rome";
else if(c=="Pakistan")
[Link]("demo").value="Islamabad";
}
</script>
<body>
<p>Select a Country to view it's Capital from the list.</p>
<select id="mysel" onChange="Capital()">
<option value="India">India</option>
<option value="China">China</option>
<option value="England">England</option>
<option value="France">France</option>
<option value="Italy">Italy</option>
<option value="Pakistan">Pakistan</option>
</select>
<input type ="text" id="demo" value="New Delhi">
</body>
</html>
Department of Computer Science 14
Output
Program No:10
Write a javascript program for password validation based on the
following condition .
Password and confirm password must be same
Length of password must be greater than 8 characters.
Program Code
<html>
<head>
<script type="text/javascript">
function validation()
{
var email=[Link];
var psw=[Link];
var confpsw=[Link];
var length=[Link];
if(email=="")
{
alert("Please Enter Your Email ID");
[Link]();
return false;
}
Department of Computer Science 15
else if(psw=="")
{
alert("Please Enter Your Password");
[Link]();
return false;
}
else if(psw!=confpsw)
{
alert("Password must be same");
[Link]();
return false;
}
else if([Link]<=8)
{
alert("Password must have more than 8 characters");
[Link]();
return false;
}
else if([Link])
{
alert("Password validated Successfully")
return false;
}
}
</script>
</head>
<body bgcolor="40,20,30" text="#ffffff">
<form name="form" onsubmit="validation()">
<h1>Register</h1>
<table>
<tr>
<td><label for="email">Email ID:</label></td>
<td><input type="text" name="email" id="email"><br></td>
</tr>
<tr>
<td><label for="psw">Password:</label></td>
<td><input type="password" name="psw" id="psw"><br></td>
</tr>
<tr>
<td><label for="psw">Confirm password:</label></td>
<td><input type="password" name="psw1" id="psw1"><br></td>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
Department of Computer Science 16
Output
Department of Computer Science 17