Scribd
Upload
684 views

JavaScript Lab Manual

Java

Uploaded by

mewapa5215
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
684 views

JavaScript Lab Manual

Java

Uploaded by

mewapa5215
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy