Scribd
Upload
23 views

java practical 11-16 final ronak

Uploaded by

citydondaicha
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
23 views

java practical 11-16 final ronak

Uploaded by

citydondaicha
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
You are on page 1/ 19

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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
// 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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
<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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
}

// 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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
"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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
</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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
// 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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
}

// 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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
<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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
}

// 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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020
// 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:-Ronak Satyanarayan Pandiya


PRN NO:-23053651251020

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