0% found this document useful (0 votes)
4 views16 pages

Javascript Lab Programs

The document contains multiple JavaScript programs that perform various tasks such as checking if a number is perfect, abundant, or deficient, generating multiplication tables, changing background colors, handling textbox events, displaying current date and time, calculating squares and cubes, validating a student registration form, creating a simple calculator, calculating factorials, and validating IP addresses. Each program is presented in HTML format with corresponding JavaScript functions. The outputs of these programs are intended to be displayed in a web browser.

Uploaded by

gandusagar0854
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
0% found this document useful (0 votes)
4 views16 pages

Javascript Lab Programs

The document contains multiple JavaScript programs that perform various tasks such as checking if a number is perfect, abundant, or deficient, generating multiplication tables, changing background colors, handling textbox events, displaying current date and time, calculating squares and cubes, validating a student registration form, creating a simple calculator, calculating factorials, and validating IP addresses. Each program is presented in HTML format with corresponding JavaScript functions. The outputs of these programs are intended to be displayed in a web browser.

Uploaded by

gandusagar0854
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

Write a JavaScript program to check whether the given number is perfect, abundant,

or deficient. Use alert box to display the output.

<!DOCTYPE html>
<html>
<head>
<title>Number Type Checker</title>
</head>
<body>

<h2>Check Perfect / Abundant / Deficient</h2>


<button onclick="checkNumber()">Check Number</button>

<script>
function checkNumber() {
let num = parseInt(prompt("Enter a positive number:"));

if (isNaN(num) || num <= 0) {


alert("Please enter a valid positive number.");
return;
}

let sum = 0;

for (let i = 1; i <= num / 2; i++) {


if (num % i === 0) {
sum += i;
}
}

if (sum === num) {


alert(num + " is a PERFECT number.");
} else if (sum > num) {
alert(num + " is an ABUNDANT number.");
} else {
alert(num + " is a DEFICIENT number.");
}
}
</script>

</body>
</html>
OUTPUT :
Design a JavaScript program to display the multiplication table by accepting the
number and limit.

<!DOCTYPE html>
<html>
<head>
<title>Multiplication Table</title>
</head>
<body>

<h2>Multiplication Table Generator</h2>

Number: <input type="number" id="num"><br><br>


Limit: <input type="number" id="limit"><br><br>

<button onclick="generateTable()">Generate</button>

<div id="output"></div>

<script>
function generateTable() {
let number = parseInt([Link]("num").value);
let limit = parseInt([Link]("limit").value);
let result = "";

if (isNaN(number) || isNaN(limit)) {
[Link]("output").innerHTML = "Enter valid inputs.";
return;
}

for (let i = 1; i <= limit; i++) {


result += number + " × " + i + " = " + (number * i) + "<br>";
}

[Link]("output").innerHTML = result;
}
</script>

</body>
</html>
OUTPUT :
Write a Java Script program to store different colors in an array and change the
background color of the page using these array elements.

<!DOCTYPE html>
<html>
<head>
<title>Background Color Changer</title>
</head>
<body>

<h2>Background Color Changer</h2>


<button onclick="changeColor()">Change Color</button>

<script>
let colors = ["red", "green", "blue", "orange", "purple", "yellow"];
let index = 0;

function changeColor() {
[Link] = colors[index];
index = (index + 1) % [Link];
}
</script>

</body>
</html>

OUTPUT :
Write a Java Script program to change the text color and back color of a Textbox
using on focus and On Blur event.

<!DOCTYPE html>
<html>
<head>
<title>Textbox Events</title>
</head>
<body>

<h2>Focus and Blur Example</h2>

<input type="text" id="myBox"


onfocus="onFocusFunc()"
onblur="onBlurFunc()"
placeholder="Click inside me">

<script>
function onFocusFunc() {
let box = [Link]("myBox");
[Link] = "white";
[Link] = "green";
}

function onBlurFunc() {
let box = [Link]("myBox");
[Link] = "black";
[Link] = "lightgray";
}
</script>

</body>
</html>

OUTPUT :
Write a Java Script function to display current date and time.

<!DOCTYPE html>
<html>
<head>
<title>Date and Time</title>
</head>
<body>

<h2>Current Date & Time</h2>


<button onclick="showDateTime()">Show Date & Time</button>

<p id="time"></p>

<script>
function showDateTime() {
let now = new Date();
[Link]("time").innerHTML =
"Current Date & Time: " + [Link]();
}
</script>

</body>
</html>

OUTPUT :
Write a Java Script program that calculates the squares and cubes of the numbers 0
to 10 and outputs HTML texts that displays the resulting values in a HTML table
format.

<!DOCTYPE html>
<html>
<head>
<title>Squares and Cubes</title>
</head>
<body>

<h2>Squares and Cubes (0 to 10)</h2>


<button onclick="generateTable()">Generate Table</button>

<div id="tableOutput"></div>

<script>
function generateTable() {
let html = "<table border='1' cellpadding='8'>";
html += "<tr><th>Number</th><th>Square</th><th>Cube</th></tr>";

for (let i = 0; i <= 10; i++) {


html += "<tr>";
html += "<td>" + i + "</td>";
html += "<td>" + (i * i) + "</td>";
html += "<td>" + (i * i * i) + "</td>";
html += "</tr>";
}

html += "</table>";

[Link]("tableOutput").innerHTML = html;
}
</script>

</body>
</html>
OUTPUT :
Design a student registration form and apply validation on it by using external Java
Script.

<!DOCTYPE html>
<html>
<head>
<title>Student Registration</title>
<script src="[Link]"></script>
</head>
<body>

<h2>Student Registration Form</h2>

<form onsubmit="return validateForm()">


Name: <input type="text" id="name"><br><br>
Email: <input type="text" id="email"><br><br>
Phone: <input type="text" id="phone"><br><br>
<input type="submit" value="Register">
</form>

<p id="msg"></p>

</body>
</html>

OUTPUT :
Design a simple calculator by using html, css and Java script.

<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
body { font-family: Arial; text-align: center; }
input { width: 120px; padding: 5px; }
button { padding: 8px 12px; margin: 5px; }
</style>
</head>
<body>

<h2>Simple Calculator</h2>

<input type="number" id="n1">


<input type="number" id="n2"><br><br>

<button onclick="calc('+')">Add</button>
<button onclick="calc('-')">Subtract</button>
<button onclick="calc('*')">Multiply</button>
<button onclick="calc('/')">Divide</button>

<h3 id="result"></h3>

<script>
function calc(op) {
let a = parseFloat([Link]("n1").value);
let b = parseFloat([Link]("n2").value);
let res;

if (isNaN(a) || isNaN(b)) {
[Link]("result").innerHTML = "Enter valid numbers";
return;
}
switch(op) {
case '+': res = a + b; break;
case '-': res = a - b; break;
case '*': res = a * b; break;
case '/': res = (b !== 0) ? a / b : "Cannot divide by zero";
}
[Link]("result").innerHTML = "Result: " + res;
}
</script>

</body>
</html>
OUTPUT :
Write a Java Script program to calculate factorial of any number by using html.

<!DOCTYPE html>
<html>
<head>
<title>Factorial Calculator</title>
</head>
<body>

<h2>Factorial Finder</h2>

Enter Number: <input type="number" id="factNum">


<button onclick="findFactorial()">Calculate</button>

<p id="factResult"></p>

<script>
function findFactorial() {
let n = parseInt([Link]("factNum").value);

if (isNaN(n) || n < 0) {
[Link]("factResult").innerHTML =
"Enter a valid non-negative number.";
return;
}

let fact = 1;
for (let i = 1; i <= n; i++) {
fact *= i;
}

[Link]("factResult").innerHTML =
"Factorial of " + n + " is " + fact;
}
</script>

</body>
</html>
OUTPUT :
Write a JavaScript function to check whether a given value is IP value or not

<!DOCTYPE html>
<html>
<head>
<title>IP Validator</title>
</head>
<body>

<h2>IP Address Checker</h2>

Enter IP: <input type="text" id="ip">


<button onclick="checkIP()">Validate</button>

<p id="ipResult"></p>

<script>
function checkIP() {
let ip = [Link]("ip").[Link]();

let pattern =
/^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]
?\d)\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)$/;

if ([Link](ip)) {
[Link]("ipResult").innerHTML = "Valid IP address.";
} else {
[Link]("ipResult").innerHTML = "Invalid IP address.";
}
}
</script>

</body>
</html>
OUTPUT 1 :

OUTPUT 2 :

You might also like