Scribd
Upload
9 views23 pages

FSD Lab

The document contains multiple HTML and JavaScript programs demonstrating various programming concepts. These include email validation using regex, user-defined objects, number comparison, weekday display using switch case, loops for printing numbers, object data printing, Armstrong number checking, and bank denomination calculation. Each program is structured with HTML elements and JavaScript functions to handle user input and display results.

Uploaded by

Ratna Kumari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views23 pages

FSD Lab

The document contains multiple HTML and JavaScript programs demonstrating various programming concepts. These include email validation using regex, user-defined objects, number comparison, weekday display using switch case, loops for printing numbers, object data printing, Armstrong number checking, and bank denomination calculation. Each program is structured with HTML elements and JavaScript functions to handle user input and display results.

Uploaded by

Ratna Kumari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 23

7f) write a program using regex object properties and methods.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Regex Example in HTML</title>

<script>

// Function to validate email using regex

function validateEmail() {

// Get user input from the text box

var emailInput = document.getElementById("email").value;

// Regular expression to match a valid email format

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

// Create a RegExp object

var regex = new RegExp(emailPattern);

// Use the test() method to check if the input matches the pattern

if (regex.test(emailInput)) {

document.getElementById("result").innerHTML = "Valid email address!";


document.getElementById("result").style.color = "green";

} else {

document.getElementById("result").innerHTML = "Invalid email address!";

document.getElementById("result").style.color = "red";

</script>

</head>

<body>

<h2>Email Validation Using Regex</h2>

<!-- Input form for email -->

<label for="email">Enter your email: </label>

<input type="text" id="email" placeholder="[email protected]">

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

<!-- Result Display -->

<p id="result"></p>

</body>

</html>
7h)Write a program to explain user-defined object by using properties, methods,
accessors,constructors and display.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>User-defined Object Example</title>

</head>

<body>

<h1>Understanding User-Defined Objects in JavaScript</h1>

<div>

<button onclick="createCar()">Create Car Object</button>

<p id="carDetails"></p>

</div>

<script>

// Constructor function for a Car object

function Car(make, model, year) {

this.make = make; // Property


this.model = model; // Property

this.year = year; // Property

// Method to display car details

this.displayCarDetails = function() {

return ${this.year} ${this.make} ${this.model};

};

// Getter and Setter methods (Accessors)

this.getYear = function() {

return this.year;

};

this.setYear = function(newYear) {

this.year = newYear;

};

// Function to create a car object and display its details

function createCar() {

// Creating an object using the constructor

var myCar = new Car('Toyota', 'Corolla', 2020);


// Using a method of the object

var carDetails = myCar.displayCarDetails();

// Accessing the properties via accessors (Getters and Setters)

var carYear = myCar.getYear();

// Displaying the details on the web page

document.getElementById('carDetails').innerHTML = `

Car Created: <strong>${carDetails}</strong><br>

Year from Getter: <strong>${carYear}</strong><br>

Modify Year: <button onclick="myCar.setYear(2025);


document.getElementById('carDetails').innerHTML = 'Car Updated: ' +
myCar.displayCarDetails();">Change Year to 2025</button>

`;

</script>

</body>

</html>

8 a)write a program which asks the user to enter three integers, obtains the numbers from the
user and outputs HTML text that displays the larger number following by the words "LARGER
NUMBER" Iin an information message dialog. If the numbers are equal ,output HTML text as
"EQUAL NUMBERS".
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Number Comparison</title>

<script type="text/javascript">

function compareNumbers() {

// Obtain the values from the input fields

var num1 = parseInt(document.getElementById("num1").value);

var num2 = parseInt(document.getElementById("num2").value);

var num3 = parseInt(document.getElementById("num3").value);

// Compare the numbers

if (num1 === num2 && num2 === num3) {

// If all numbers are equal

alert("EQUAL NUMBERS");

} else {

// Find the largest number

var largest = Math.max(num1, num2, num3);

alert(largest + " LARGER NUMBER");

</script>

</head>

<body>
<h2>Enter Three Numbers</h2>

<label for="num1">Enter first number:</label>

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

<label for="num2">Enter second number:</label>

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

<label for="num3">Enter third number:</label>

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

<button onclick="compareNumbers()">Compare Numbers</button>

</body>

</html>

Enter Three Numbers:-

Enter first number: 7

Enter second number: 7

Enter third number: 7

Compare Numbers

Equal numbers

8b). Write a program to display week days using switch case.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Display Weekday</title>

<script>

function displayWeekday() {

let dayNumber = parseInt(document.getElementById("dayNumber").value);

let day;

switch(dayNumber) {

case 1:

day = "Sunday";

break;

case 2:

day = "Monday";

break;

case 3:

day = "Tuesday";

break;

case 4:

day = "Wednesday";

break;

case 5:

day = "Thursday";

break;

case 6:

day = "Friday";

break;

case 7:
day = "Saturday";

break;

default:

day = "Invalid input! Please enter a number between 1 and 7.";

document.getElementById("result").innerHTML = "The day is: " + day;

</script>

</head>

<body>

<h2>Find the Weekday</h2>

<p>Enter a number (1-7) to display the corresponding weekday:</p>

<input type="number" id="dayNumber" placeholder="Enter a number" min="1" max="7">

<button onclick="displayWeekday()">Show Weekday</button>

<p id="result"></p>

</body>

</html>

Output:-

Find the Weekday

Enter a number (1-7) to display the corresponding weekday:

Show Weekday

The day is: Saturday

8c)Write a program to print 1 to 10 numbers using for, while and do-while loops.

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Print Numbers using Loops</title>

<script>

function printNumbers() {

let forLoopOutput = "";

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

forLoopOutput += i + " ";

document.getElementById("forLoop").innerHTML = "For Loop: " + forLoopOutput;

let whileLoopOutput = "";

let j = 1;

while (j <= 10) {

whileLoopOutput += j + " ";

j++;

document.getElementById("whileLoop").innerHTML = "While Loop: " + whileLoopOutput;

let doWhileLoopOutput = "";

let k = 1;

do {

doWhileLoopOutput += k + " ";

k++;

} while (k <= 10);

document.getElementById("doWhileLoop").innerHTML = "Do-While Loop: " +


doWhileLoopOutput;

</script>

</head>

<body onload="printNumbers()">

<h2>Printing Numbers from 1 to 10 using Loops</h2>

<p id="forLoop"></p>

<p id="whileLoop"></p>

<p id="doWhileLoop"></p>

</body>

</html>

Output:-

Printing Numbers from 1 to 10 using Loops

For Loop: 1 2 3 4 5 6 7 8 9 10

While Loop: 1 2 3 4 5 6 7 8 9 10

Do-While Loop: 1 2 3 4 5 6 7 8 9 10

8d)write a program to print data in object using for-in,for-each and for-of loops.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Object Looping Examples</title>

</head>

<body>
<h2>Using for-in Loop</h2>

<ul id="for-in-loop"></ul>

<h2>Using forEach Method (Array)</h2>

<ul id="for-each-loop"></ul>

<h2>Using for-of Loop (Array)</h2>

<ul id="for-of-loop"></ul>

<script>

// Sample object

const user = {

name: "John",

age: 30,

job: "Developer"

};

// Using for-in loop to loop through object keys

const forInLoop = document.getElementById("for-in-loop");

for (let key in user) {

let li = document.createElement("li");

li.textContent = `${key}: ${user[key]}`;

forInLoop.appendChild(li);

}
// Using forEach method (requires array conversion)

const forEachLoop = document.getElementById("for-each-loop");

Object.entries(user).forEach(([key, value]) => {

let li = document.createElement("li");

li.textContent = `${key}: ${value}`;

forEachLoop.appendChild(li);

});

// Using for-of loop with Object entries (Array of [key, value] pairs)

const forOfLoop = document.getElementById("for-of-loop");

for (let [key, value] of Object.entries(user)) {

let li = document.createElement("li");

li.textContent = `${key}: ${value}`;

forOfLoop.appendChild(li);

</script>

</body>

</html>

Output:-

Using for-in Loop

 name: John

 age: 30

 job: Developer

Using forEach Method (Array)

 name: John
 age: 30

 job: Developer

Using for-of Loop (Array)

 name: John

 age: 30

 job: Developer

8e)DEVELOP a program to determine whether a given number is an ‘ARMSTRONG


NUMBER’OR NOT.[Eg: 153 is an ARMSTRONG number,since sum of the cube of the digits is
equal to the number i.e.,13+53+33=153]

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Armstrong Number Check</title>

</head>

<body>

<h2>Check Armstrong Number</h2>

<label for="numInput">Enter a number:</label>

<input type="number" id="numInput" placeholder="Enter a number">

<button onclick="checkArmstrong()">Check</button>

<p id="result"></p>
<script>

function checkArmstrong() {

// Get the input value

const num = parseInt(document.getElementById("numInput").value);

// Convert the number to a string to easily get its digits

const numStr = num.toString();

const numDigits = numStr.length;

let sum = 0;

// Calculate the sum of the powers of the digits

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

const digit = parseInt(numStr[i]);

sum += Math.pow(digit, numDigits);

// Check if the sum is equal to the original number

const resultMessage = (sum === num)

? `${num} is an Armstrong number!`

: `${num} is not an Armstrong number.`;

// Display the result

document.getElementById("result").textContent = resultMessage;

</script>
</body>

</html>

Output:-

Check Armstrong Number

Enter a number:5 Check

5 is an Armstrong number!

8f)write a program to display the denomination of the amount deposited in the bank in
terms of 100’s,50’s,20’s,10’s,5’s,2’s&1’s.(eg: if deposited amount is rs.163, the putput should
be 1-100’s,1-50’s,1-10’s,1-2’s &1-1’s)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Denomination Calculator</title>

<script>

function calculateDenominations() {

// Get the amount entered by the user

var amount = parseInt(document.getElementById("amount").value);

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

alert("Please enter a valid amount greater than 0");

return;

// Initialize the denomination values


var denominations = [100, 50, 20, 10, 5, 2, 1];

var results = "";

// Loop through each denomination to calculate the count

for (var i = 0; i < denominations.length; i++) {

var count = Math.floor(amount / denominations[i]);

if (count > 0) {

results += count + " - " + denominations[i] + "'s<br>";

amount -= count * denominations[i]; // Reduce the amount

// Display the result

document.getElementById("result").innerHTML = results;

</script>

</head>

<body>

<h2>Denomination Calculator</h2>

<p>Enter the amount to calculate the denominations:</p>

<input type="number" id="amount" placeholder="Enter amount" />

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

<h3>Denominations:</h3>

<div id="result"></div>
</body>

</html>

Output:-

Denomination Calculator

Enter the amount to calculate the denominations:100 Calculate

Denominations:

1 - 100's

9.javascript fuctions and eventws

Design a appropriate function should be called to display

i. Factorial of that number

i. Fibonacci series up to that number

iii. Prime numbers up to that number

iv. Is it palindrome or not

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Number Operations</title>

<script>

function factorial(num) {

if (num === 0 || num === 1) return 1;

let fact = 1;

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

fact *= i;

}
return fact;

function fibonacci(num) {

let fibSeries = [0, 1];

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

fibSeries.push(fibSeries[i - 1] + fibSeries[i - 2]);

return fibSeries.slice(0, num).join(', ');

function isPrime(num) {

if (num < 2) return false;

for (let i = 2; i <= Math.sqrt(num); i++) {

if (num % i === 0) return false;

return true;

function primeNumbers(num) {

let primes = [];

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

if (isPrime(i)) primes.push(i);

return primes.join(', ');

}
function isPalindrome(num) {

let str = num.toString();

return str === str.split('').reverse().join('');

function displayResults() {

let num = parseInt(document.getElementById("number").value);

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

document.getElementById("results").innerHTML = "Please enter a valid positive

number.";

return;

Prepared by CH. Kiran Babu (Asst Professor)

document.getElementById("results").innerHTML = `

<p>Factorial: ${factorial(num)}</p>

<p>Fibonacci Series: ${fibonacci(num)}</p>

<p>Prime Numbers: ${primeNumbers(num)}</p>

<p>Palindrome: ${isPalindrome(num) ? 'Yes' : 'No'}</p>

`;

</script>

</head>

<body>

<h2>Number Operations</h2>
<p>Enter a number to perform operations:</p>

<input type="number" id="number" placeholder="Enter a number">

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

<div id="results"></div>

</body>

</html>

Output:- Number Operations

Enter a number to perform operations:5

Calculate

9c) Write a program to validate the following fields in a registration page i. Name ii. Mobile iii. E-
mail

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Registration Form Validation</title>

<script>

function validateForm() {

let name = document.getElementById("name").value;

let mobile = document.getElementById("mobile").value;

let email = document.getElementById("email").value;

let namePattern = /^[A-Za-z ]{3,}$/;

let mobilePattern = /^[0-9]{10}$/;

let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

let errors = [];


if (!namePattern.test(name)) {

errors.push("Invalid Name: Must contain only letters and be at least 3 characters


long.");

if (!mobilePattern.test(mobile)) {

errors.push("Invalid Mobile: Must be a 10-digit number.");

if (!emailPattern.test(email)) {

errors.push("Invalid Email: Must follow a standard email format.");

if (errors.length > 0) {

document.getElementById("errorMessages").innerHTML = errors.join("<br>");

return false;

} else {

alert("Registration Successful!");

return true;

</script>

</head>

<body>

<h2>Registration Form</h2>

<form onsubmit="return validateForm()">

<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<label for="mobile">Mobile:</label>

<input type="text" id="mobile" name="mobile" required><br><br>

<label for="email">Email:</label>

<input type="text" id="email" name="email" required><br><br>

<button type="submit">Register</button>

</form>

<p id="errorMessages" style="color: red;"></p>

</body>

</html>

output:-Registration Form

Name:

Mobile:

Email:

Register

You might also like