Scribd
Upload
479 views9 pages

JavaScript Lab Manual

Java

Uploaded by

mewapa5215
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
479 views9 pages

JavaScript Lab Manual

Java

Uploaded by

mewapa5215
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 9

JavaScript

1. Write a JavaScript program to perform find the area and circumference of a circle
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<script>
function Calculate(r) {
var area=Math.PI * r * r;
var circum=2*Math.PI*r;
document.write("Area of Circle = ", area);
document.write("<br />"+"Circumference of Circle = ",circum);
}
var r=parseInt(prompt("Enter the radius"));
Calculate(r);

</script>
</body>
</html>
2. Write a JavaScript program to check whether a given number is perfect, abundant or
deficient. Use alert box to display the output.
<!DOCTYPE html>
<html>
<head>
<title>Find a perfect number</title>
</head>
<body>
<script>
function is_perfect(number)
{
var temp = 0;
for(var i=1;i<=number/2;i++)
{
if(number%i === 0)
{
temp += i;
}
}

if(temp === number && temp !== 0)


{
document.write("It is a perfect number.");
}
else if (temp>number)
{
document.write("It is an abundant number.");
}
else
{
document.write("It is a deficient number.");
}
}
var num=parseInt(prompt("Enter the number"));
is_perfect(num);
</script>
</body>
</html>

3. Design a JavaScript program to display the multiplication table by accepting the


number and the limit.
</html>
<!--JavaScript - Function to Display Table of an entered Number.-->
<html>
<head>
<title>JavaScript - Function to Display Table of an entered
Number.</title>

</head>

<body style="text-align: center;">


<script type="text/javascript">
function printTable(num,limit){
document.writeln("<b>"+"MULTIPLICATION TABLE" + "<br/>" )
for(var i=1; i<=limit; i++){
document.writeln((num*i) + "<br/>" )
}
}
var num=parseInt(prompt("Enter the number"));
var limit=parseInt(prompt("Enter the limit"));

printTable(num,limit);
</script>

</body>

</html>

4. Design a form that accepts two integers. Provide 4 buttons for Add, Subtract,
Multiply, Divide. Add JavaScript program to add, subtract, multiply and divide the
given numbers when these buttons are clicked. Use output element to display the
results.
<html>
<head>
<title>Calculator</title>
<script>
function showresult(choice)
{
var n1=parseFloat(document.getElementById('num1').value);
var n2=parseFloat(document.getElementById('num2').value);
var r;
var c=choice;
switch(c)
{
case '1':
r=n1+n2;
break;
case '2':
r=n1-n2;
break;
case '3':
r=n1*n2;
break;
case '4':
r=n1/n2;
break;
case '5':
r=n2*100/n1;
break;
default:
break;

}
document.getElementById('result').value=r;
}
</script>
</head>
<body>
<h1>My calculator</h1>
<table border="1" cellpadding="5" cellspacing="5" width="600">
<tr align="center">
<td>First number</td>
<td>Second Number</td>
<td>Result</td>
</tr>
<tr align="center">
<td><input name="number1" type="text" size=10 id='num1'/></td>
<td><input name="number2" type="text" size=10 id='num2'/></td>
<td> <input type="text" id='result'></td>
</tr>
<tr>
<td colspan="3">
<button onClick="showresult('1')">+</button>
<button onclick="showresult('2')">-</button>
<button onclick="showresult('3')">*</button>
<button onclick="showresult('4')">/</button>
<button onclick="showresult('5')">%</button>
</td>
</tr>
</table>
</body>
</html>
5. Write a JavaScript program to store different colors in an array and change the
background color of the page using these array elements
<html>
<head>
<style>
table{
height:50px;
width:100%;
}
</style>
</head>
<body>
<table >
<tr>
<td bgcolor="red" onMouseOver="changebackgr(1)"
onMouseOut="changebackgr(0)"></td>
<td bgcolor="green" onMouseOver="changebackgr(2)"
onMouseOut="changebackgr(0)"></td>
<td bgcolor="blue" onMouseOver="changebackgr(3)"
onMouseOut="changebackgr(0)"></td>
<td bgcolor="yellow" onMouseOver="changebackgr(4)"
onMouseOut="changebackgr(0)"></td>
<td bgcolor="black" onMouseOver="changebackgr(5)"
onMouseOut="changebackgr(0)"></td>
<td bgcolor="#00CCFF" onMouseOver="changebackgr(6)"
onMouseOut="changebackgr(0)"></td></tr>
</table>
<script language="javascript" type="text/javascript">
var bcolor=new Array();
bcolor[0]="white";
bcolor[1]="red";
bcolor[2]="green";
bcolor[3]="blue";
bcolor[4]="yellow";
bcolor[5]="black";
bcolor[6]="#00CCFF";
function changebackgr(whichcolor)
{
document.body.style.backgroundColor=bcolor[whichcolor];
}
</script>
</body>
</html>
6. Write a JavaScript program to check whether a given string is palindrome or not
</html>
<!--JavaScript - Function to Display Table of an entered Number.-->
<html>
<head>
<title>JavaScript - Function to check palindrome.</title>
</head>
<body style="text-align: center;">
<script type="text/javascript">
function palindrome(str) {

var len = str.length;


var mid = Math.floor(len/2);

for ( var i = 0; i < mid; i++ ) {


if (str[i] !== str[len - 1 - i]) {
return false;
}
}

return true;
}
var str=prompt("Enter the string");
var bool=palindrome(str);
if(bool==0)
document.write("<b>"+"Not a Palindrome");
else
document.write("<b>"+"Palindrome");

</script>

</body>
</html>

7. Write a JavaScript Program to create an Array and read values using Prompt popup
box and display the sum of elements in an Alert Box
<!DOCTYPE html>
<html>
<body>
<font color="green">
<h1 align="center">Displaying array sum</h1>
</font>
<script>
function getMyArray(num) {
var userInputArray=[];
for(let i=0;i<num;i++)
{
userInputArray.push(prompt("enter array index "+(i+1)+" value"));
}
var sum=0;
for(let i=0;i<num;i++)
{
sum=sum+parseInt(userInputArray[i]);
}
alert("Sum="+sum);
}
var num=parseInt(prompt("Enter the array limit"));

getMyArray(num);
</script>
</body>
</html>
8. Change the textcolour andback colour of a TextBox using onfocus and onBlur event
<html>
<head>
<script>

function txt_onblur(txt) {
txt.style.color=txt.value;
}

function txt_onfocus(txt) {
txt.style.backgroundColor = "yellow";
}

</script>
</head>
<body>
<input type='text' size='15'onfocus='txt_onfocus(this)'
onBlur='txt_onblur(this)'></input>

</body>
</html>
9. Write a JavaScript program to display Capital of a country using onchange event. The
county is selected from a select box and capital is displayed on a TextBox
<!DOCTYPE html>
<html>
<body>

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction()">


<option value="Thiruvananthapuram">Thiruvananthapuram
<option value="Itanagar">Itanagar
<option value="Patna">Patna
<option value="Panaji">Panaji
</select>
You selected: <input type="text" id="demo">

<p>When you select a new capital, a function is triggered which outputs the value of
the selected capital in caps inside the textbox.</p>

<p id="demo"></p>

<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").value=x.toUpperCase();
}
</script>

</body>
</html>

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
<html>
<body>
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>
Password:
</td>
<td>
<input type="password" id="txtPassword" />
</td>
</tr>
<tr>
<td>
Confirm Password:
</td>
<td>
<input type="password" id="txtConfirmPassword" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" id="btnSubmit" value="Submit" onclick="return Validate()" />
</td>
</tr>
</table>
<script type="text/javascript">
function Validate() {
var password = document.getElementById("txtPassword").value;
var confirmPassword = document.getElementById("txtConfirmPassword").value;
if (password != confirmPassword) {
alert("Passwords do not match.");
return false;
}
else {
alert("Password is correct");
}
}
</script>
</body>
</html>

You might also like