11.Programs on Java script client side scripting.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Background Color</title>
</head>
<body>
<h1>Click the Button to Change the Background Color</h1>
<button onclick="changeBackgroundColor()">Change Color</button>
<script>
function changeBackgroundColor() {
// Define an array of colors
const colors = ["#FF5733", "#33FF57", "#3357FF", "#F4FF33", "#FF33A1"];
// Get a random index from the colors array
const randomIndex = Math.floor(Math.random() * colors.length);
// Change the background color
document.body.style.backgroundColor = colors[randomIndex];
}
</script> Output:-
</body>
</html>
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
12. Programs on Java script Operators, Comparisons,
Statements, Loops, Events, Objects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Combined Example</title>
</head>
<body>
<h2>Welcome to the Age Checker</h2>
<label for="ageInput">Enter your age: </label>
<input type="number" id="ageInput" placeholder="Enter your age">
<button onclick="processAge()">Submit</button>
<p id="ageMessage"></p>
<p id="countdown"></p>
<script>
// Define an object to store user data
let user = {
name: "John Doe",
age: 0,
birthdayCountdown: 30, // Example countdown value (days)
// Method to set user's age
setAge: function(age) {
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
this.age = age;
},
// Method to get a greeting message
greet: function() {
return "Hello, " + this.name + "!";
}
};
// Function to process age input and show results
function processAge() {
// Get the age from the input
let ageInput = document.getElementById("ageInput").value;
// Check if the input is valid
if (ageInput === "" || isNaN(ageInput)) {
document.getElementById("ageMessage").innerHTML = "Please enter a valid age.";
return;
}
// Set the user's age
user.setAge(Number(ageInput));
// Comparison: Check if the user is an adult or minor
if (user.age >= 18) {
document.getElementById("ageMessage").innerHTML = "You are an adult!";
} else {
document.getElementById("ageMessage").innerHTML = "You are a minor.";
}
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
// Countdown: Using a loop to show days remaining until birthday
let countdownMessage = "Days until your birthday: ";
for (let i = user.birthdayCountdown; i >= 0; i--) {
setTimeout(function() {
document.getElementById("countdown").innerHTML = countdownMessage + i;
}, (user.birthdayCountdown - i) * 1000); // Delay each countdown by 1 second
}
}
// Greeting message from object
console.log(user.greet()); // Output: Hello, John Doe!
</script>
</body>
</html>
Output:-
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
13. Programs on Java script User defined functions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Combined Functions Example</title>
</head>
<body>
<h2>Welcome to the Interactive Calculator</h2>
<!-- User Name Input Section -->
<label for="nameInput">Enter your name: </label>
<input type="text" id="nameInput" placeholder="Enter your name">
<button onclick="greetUser()">Greet Me</button>
<p id="greetingMessage"></p>
<!-- Calculator Section -->
<h3>Calculator</h3>
<p>Enter two numbers for addition:</p>
<label for="num1">Number 1: </label>
<input type="number" id="num1">
<label for="num2">Number 2: </label>
<input type="number" id="num2">
<button onclick="calculateAddition()">Add</button>
<p id="additionResult"></p>
<!-- Factorial Calculator Section -->
<h3>Factorial Calculator</h3>
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
<p>Enter a number to calculate its factorial:</p>
<input type="number" id="factorialInput" min="0">
<button onclick="calculateFactorial()">Calculate Factorial</button>
<p id="factorialResult"></p>
<!-- Show User Details Section -->
<h3>Details</h3>
<button onclick="showUserDetails()">Show User Details</button>
<p id="userDetails"></p>
<script>
// 1. Basic Function: Greet User
function greetUser() {
const name = document.getElementById("nameInput").value;
if (name) {
document.getElementById("greetingMessage").innerHTML = "Hello, " + name + "!";
} else {
document.getElementById("greetingMessage").innerHTML = "Please enter your name.";
}
}
// 2. Arrow Function: Addition
const add = (a, b) => a + b;
// 3. Recursive Function: Factorial Calculation
function factorial(n) {
if (n <= 1) {
return 1;
}
return n * factorial(n - 1);
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
}
// 4. Callback Function: Process Addition
function calculateAddition() {
const num1 = parseFloat(document.getElementById("num1").value);
const num2 = parseFloat(document.getElementById("num2").value);
if (!isNaN(num1) && !isNaN(num2)) {
const result = add(num1, num2);
document.getElementById("additionResult").innerHTML = "The sum is: " + result;
} else {
document.getElementById("additionResult").innerHTML = "Please enter valid numbers
for addition.";
}
}
// 5. Function Returning Multiple Values: User Details
function getUserDetails() {
return {
name: "John Doe",
age: 30,
occupation: "Web Developer"
};
}
// Function to display user details
function showUserDetails() {
const user = getUserDetails();
document.getElementById("userDetails").innerHTML =
"Name: " + user.name + "<br>" +
"Age: " + user.age + "<br>" +
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
"Occupation: " + user.occupation;
}
// 6. Callback Function: Factorial Calculation
function calculateFactorial() {
const num = parseInt(document.getElementById("factorialInput").value);
if (!isNaN(num) && num >= 0) {
const result = factorial(num);
document.getElementById("factorialResult").innerHTML = "Factorial of " + num + " is: "
+ result;
} else {
document.getElementById("factorialResult").innerHTML = "Please enter a valid non-
negative number for factorial.";
} Output:-
}
</script>
</body>
</html>
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
14.Programs on Java script Validations using object
functions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Validations Using Object Functions</title>
</head>
<body>
<h2>User Registration Form</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="email">Email: </label>
<input type="text" id="email" placeholder="Enter your email">
<br><br>
<label for="password">Password: </label>
<input type="password" id="password" placeholder="Enter your password">
<br><br>
<label for="phone">Phone Number: </label>
<input type="text" id="phone" placeholder="Enter your phone number">
<br><br>
<button type="submit">Submit</button>
</form>
<p id="validationMessage"></p>
<script>
// Create an object to handle validations
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
let formValidator = {
// Validate email format
validateEmail: function(email) {
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
return emailPattern.test(email);
},
// Validate password (must be at least 8 characters long)
validatePassword: function(password) {
return password.length >= 8;
},
// Validate phone number (must be exactly 10 digits)
validatePhone: function(phone) {
const phonePattern = /^\d{10}$/;
return phonePattern.test(phone);
},
// Function to display validation message
displayMessage: function(message) {
document.getElementById("validationMessage").innerHTML = message;
}
};
// Function to validate the form
function validateForm() {
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const phone = document.getElementById("phone").value;
// Email validation
if (!formValidator.validateEmail(email)) {
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
formValidator.displayMessage("Please enter a valid email address.");
return false; // Prevent form submission
}
// Password validation
if (!formValidator.validatePassword(password)) {
formValidator.displayMessage("Password must be at least 8 characters long.");
return false; // Prevent form submission
}
// Phone validation
if (!formValidator.validatePhone(phone)) {
formValidator.displayMessage("Please enter a valid 10-digit phone number.");
return false; // Prevent form submission
}
// If all validations pass
formValidator.displayMessage("Form submitted successfully!");
return true; // Allow form submission
}
</script> Output:-
</body>
</html>
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
15.Programs on Java script Validations using regular
Expressions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation with Regular Expressions</title>
</head>
<body>
<h2>User Registration Form</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="emailInput">Email: </label>
<input type="text" id="emailInput" placeholder="Enter your email">
<br><br>
<label for="phoneInput">Phone Number: </label>
<input type="text" id="phoneInput" placeholder="Enter your phone number">
<br><br>
<label for="passwordInput">Password: </label>
<input type="password" id="passwordInput" placeholder="Enter your password">
<br><br>
<label for="zipCodeInput">Zip Code: </label>
<input type="text" id="zipCodeInput" placeholder="Enter your zip code">
<br><br>
<button type="submit">Submit</button>
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
</form>
<p id="validationMessage"></p>
<script>
// Validation object
let formValidator = {
// Email validation regex
validateEmail: function(email) {
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
return emailPattern.test(email);
},
// Phone number validation regex (exactly 10 digits)
validatePhone: function(phone) {
const phonePattern = /^\d{10}$/;
return phonePattern.test(phone);
},
// Password validation regex (at least 8 characters, must include letters and numbers)
validatePassword: function(password) {
const passwordPattern = /^(?=.*[a-zA-Z])(?=.*\d)[A-Za-z\d]{8,}$/;
return passwordPattern.test(password);
},
// Zip code validation regex (exactly 5 digits)
validateZipCode: function(zipCode) {
const zipCodePattern = /^\d{5}$/;
return zipCodePattern.test(zipCode);
},
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
// Display message function
displayMessage: function(message) {
document.getElementById("validationMessage").innerHTML = message;
};
// Function to validate all form inputs
function validateForm() {
const email = document.getElementById("emailInput").value;
const phone = document.getElementById("phoneInput").value;
const password = document.getElementById("passwordInput").value;
const zipCode = document.getElementById("zipCodeInput").value;
// Email validation
if (!formValidator.validateEmail(email)) {
formValidator.displayMessage("Please enter a valid email address.");
return false;
// Phone validation
if (!formValidator.validatePhone(phone)) {
formValidator.displayMessage("Please enter a valid 10-digit phone number.");
return false;
// Password validation
if (!formValidator.validatePassword(password)) {
formValidator.displayMessage("Password must be at least 8 characters long, and contain both
letters and numbers.");
return false;
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
}
// Zip code validation
if (!formValidator.validateZipCode(zipCode)) {
formValidator.displayMessage("Please enter a valid 5-digit zip code.");
return false;
// If all validations pass
formValidator.displayMessage("Form submitted successfully!");
return true;
</script>
</body>
</html>
Output:-
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
16. Programs on Java script JS document object model,
Popovers, Windows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript DOM, Popovers, and Window Example</title>
<style>
/* Style for popover */
.popover {
display: none;
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
z-index: 1;
max-width: 200px;
}
/* Style for the trigger button */
.trigger {
margin: 20px;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
<body>
<h2>DOM Manipulation, Popovers, and Window Example</h2>
<!-- DOM Manipulation Buttons -->
<button onclick="addElement()">Add Paragraph</button>
<button onclick="changeContent()">Change Paragraph Text</button>
<button onclick="removeElement()">Remove Paragraph</button>
<br><br>
<!-- Popover Trigger Button -->
<button class="trigger" id="popoverButton" onclick="showPopover(event)">Click me for
Popover</button>
<!-- Popover Content -->
<div class="popover" id="popover">
This is a popover! It provides more information when triggered.
</div>
<!-- Window Open Button -->
<button class="trigger" onclick="openWindow()">Open a New Window</button>
<!-- Container to dynamically add/remove content -->
<div id="container"></div>
<script>
// 1. DOM Manipulation Functions
// Function to add a new paragraph to the container
function addElement() {
let para = document.createElement("p"); // Create a new paragraph element
para.textContent = "This is a new paragraph added to the DOM."; // Add text content
document.getElementById("container").appendChild(para); // Append to container
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
}
// Function to change the text content of the first paragraph
function changeContent() {
let para = document.querySelector("p"); // Select the first paragraph
if (para) {
para.textContent = "The content of this paragraph has been changed!";
} else {
alert("No paragraph to change.");
}
}
// Function to remove the first paragraph
function removeElement() {
let para = document.querySelector("p"); // Select the first paragraph
if (para) {
para.remove(); // Remove the paragraph
} else {
alert("No paragraph to remove.");
}
}
// 2. Popover Function
function showPopover(event) {
const popover = document.getElementById("popover");
const button = event.target;
// Position the popover near the button
const buttonRect = button.getBoundingClientRect();
popover.style.left = `${buttonRect.left}px`;
popover.style.top = `${buttonRect.top + buttonRect.height + 5}px`;
popover.style.display = 'block'; // Show the popover
}
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
// Hide the popover when clicking elsewhere
window.onclick = function(event) {
const popover = document.getElementById("popover");
if (!event.target.matches('.trigger')) {
popover.style.display = 'none';
}
}
// 3. Window Function: Open a new window
function openWindow() {
const newWindow = window.open("", "newWindow", "width=400,height=300");
newWindow.document.write("<h3>This is a new window!</h3>");
newWindow.document.write("<p>You can write anything you want here.</p>");
}
</script>
</body>
</html>
Output:-
Name:-Gaurav Ravindra More
PRN NO:-23053651251019
