Scribd
Upload
8 views

Javascript Programs

Java helps

Uploaded by

minhasm9633
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
8 views

Javascript Programs

Java helps

Uploaded by

minhasm9633
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/ 6

Javascript

Program 1- Area and circumference of a circle


<!Doctype html>
<html>
<head><title>find area and circumference of a circle</title></head>
<body>
<script language="JavaScript">
function CalculateA()
{
var r=parseInt(rad.value);
area.value=(3.14*r*r);
}
function CalculateC()
{
var r=parseInt(rad.value);
cir.value=(2*3.14*r);
}
</script>
<form name=form1>
<table>
<tr><td>
Enter the radius of the circle:</td><td>
<input type="text" name="txtRadius" size=10 id="rad"></td></tr>
<tr><td>
Area
</td><td>
<input type="text" name="txtArea" size=10 id="area"></td></tr>
<tr><td>
Circumference
</td><td>
<input type="text" name="txtCircum" size=10 id="cir"></td></tr>
</table>
<input type="button" value="Calculate Area" onClick="CalculateA()">
<input type="button" value="Calculate Circumference" onClick="CalculateC()">
</form>
</body>
</html>

Program 2- Perfect/Abundant/Deficient
<!Doctype html>
<html>
<head><title>Perfect/Abundant/Deficient</title></head>
<body>
<script language="JavaScript">
function Check()
{
var i,sum=0;
var num=parseInt(number.value);
alert(num);
for(i=1;i<=num/2;i++)
{
if(num%i==0)
sum=sum+i;
}
if(sum==num)
alert("It's a Perfect number");
else
if(sum>num)
alert("It's an Abundant number");
else
alert("It's a Deficient number");
}
</script>
<form name=form1>
<table>
<tr><td>
Enter the Number</td><td>
<input type="text" name="txtnum" size=10 id="number"></td></tr>
<tr><td colspan="2">
<input type="button" value="Check" onClick="Check()">
</td></tr></table>
</form>
</body>
</html>

Program 3-Multiplication table


<html>
<head>
<title>Multiplication Table </title>
<script>
function printTable()
{
alert("hai");
var input=num.value;
var l=parseInt(limit.value);
if(!isNaN(input))
{
var table="";
for(i=1;i<=l;i++)
{
number = input * i;
table += input + " * " + i + "=" + number + "<br/>";
}
document.getElementById("mul").innerHTML= table;
}
else
document.getElementById("mul").innerHTML= "please Enter a valid Number";
}
</script>
</head>
<body>
<form name="frm1">
Enter a limit
<input type="text" name="limit"
id="limit"><br>
Enter a Number
<input type="text" name="num"
id="num"
onchange="printTable()"><br>
<p id="mul">
</form>
</body>
</html>

Program 4-Arithmetic operations using output element


<!Doctype html>
<html>
<head><title>calculate two integers</title></head>
<body>
<form name=form1>
Number 1:
<input id="a" type="text" name="txtInt1"size=10>
<br>
Number 2:
<input id="b" type="text" name="txtInt2"size=10>
<br>
<br><br>
<button onclick="res.value=parseInt(a.value)+parseInt(b.value)">+</button>
<button onclick="res.value=parseInt(a.value)-parseInt(b.value)">-</button>
<button onclick="res.value=parseInt(a.value)/parseInt(b.value)">/</button>
<button onclick="res.value=parseInt(a.value)*parseInt(b.value)">*</button>
<br>
Result:
<output id="res" for="a b" name="res" size=10>
</form>
</body>
</html>

Program5-Change background of a document.form1


<!doctype html>
<html>
<head>
<title>
Change the background color of a document
</title>
</head>
<body>
<button onmouseover="changeBg(0)">Red</button>
<button onmouseover="changeBg(1)">Yellow</button>
<button onmouseover="changeBg(2)">Blue</button>
<button onmouseover="changeBg(3)">Green</button>
<button onmouseover="changeBg(4)">Orange</button>
<button onmouseover="changeBg(5)">Cyan</button>
<script language="javascript">
function changeBg(i)
{
const colors=["red","yellow","blue","Green","orange","cyan"];
document.body.style.background=colors[i];
}
</script>
</body>
</html>
Program 6- Strin Palindrome
<!doctype html>
<head>
<title>
String is palindrome or not
</title>
</head>
<body>
<script type="text/javascript">
function checkPalindrome(str)
{
const len = string.length;
for (let i = 0; i < len / 2; i++)
{
if (string[i] !== string[len - 1 - i])
{
return 'It is not a palindrome';
}
}
return 'It is a palindrome';
}
const string = prompt('Enter a string: ');
const value = checkPalindrome(string);
document.write(value);
</script>
</body>
</html>
Program 7 -Sum of elements of an Array
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Prompt and Alert Pop up box</title>
<script>
function sum()
{
var c=[];
var limit,sum=0;
limit=prompt("Enter number of elements of array");
for(var i=0;i<limit;i++)
{
c[i]=prompt("Enter number");
sum=sum+parseInt(c[i]);
}
alert("The sum of elements of array is"+sum);
}

</script></head>
<body>
<h1 id="heading">Prompt and Alert Dialogue Boxes</h1>
<p> Program to create an Array and read values using Prompt
popup box and display the sum of elements in an Alert Box</p>
<hr>
<div>
<button type="button" onclick="sum()">Sum of elements using array</button>
</div>
<br></body></html>
Program 8- Change backgroung color of a text box
<!Doctype html>
<html>
<head><title>Change backgroung color of a text box</title></head>
<body>
<script language="JavaScript">
function Addition(){
var c=parseInt(a.value)+parseInt(b.value);
document.form1.textResult.value=c;
}
</script>
<form name=form1 onClick=document.body.style.background="red">
<table>
<tr><td>
Enter number 1:
</td><td><input id="a" type="text" name="txtInt1" size=10 onfocus="this.style.color='Green'"
onblur="this.style.background='pink';" ></td></tr>
<br>
<tr><td>
Enter number 2:
</td><td><input id="b" type="text" name="txtInt2" size=10 onfocus="this.style.color='Green'"
onblur="this.style.background='pink';"></td></tr>
<br>
<tr><td>
Result:
<input id="c" type="text" name="textResult" size=10>
<br>
</td></tr>
<tr><td>
<input type="button" value="+" onClick="Addition();">
</td></tr>
</form>
</body>
</html>
Program 9- Display the capital
<html>
<head><title>To Display the Capital</title></head>
<body>
Select a country :
<select id="countries" onchange=getCapital()>
<option value="0">Australia</option>
<option value="1">Poland</option>
<option value="2">Mexico</option>
<option value="3">Germany</option>
<option value="4">India</option>
</select>
<br/><br/>
Capital: <input type="text" id="txtbox">
<script>
function getCapital() {
var capitals=["Canberra","Warsaw","Mexico City","Berlin","New Delhi"];
var i = document.getElementById("countries").selectedOptions[0].value;
document.getElementById("txtbox").value = capitals[i];
}
</script>
</body>
</html>
Program 10-Loginform validation
<html>
<body>
<script>
function validateform()
{
var name=n1.value;
var password=p1.value;
var cpass=c1.value;
if (name==null || name=="")
{
alert("Name can't be blank");
return false;
}
if(password.length<8)
{
alert("Password must be at least 8 characters long.");
return false;
}
if(password!=cpass)
{
alert("Both password and Confirm password must be same");
return false;
}
}
</script>
<body>
<form name="myform" method="post"
action="Confirm.html" onsubmit="return validateform()" >
<table>
<tr><td>Name:</td>
<td><input type="text" name="name" id="n1"></td></tr>
<tr><td>Password</td>
<td><input type="password" name="password" id="p1"></td></tr>
<tr><td>Confirm Password</td>
<td><input type="password" name="cpassword" id="c1"></td></tr>
<tr><td><input type="submit" value="register"></td></tr></table>
</form>
</body>
</html>

Confirm.html

<!doctype html>
<html>
<head>
<title>Confirmation page</title>
</head>
<body>
<H1> You are a valid user </H!>
</body>
</html>

You might also like