Scribd
Upload
19 views20 pages

ET22BTEC010 - Diya Patel - Practical 8 - Javascript DOM and Validation

Uploaded by

0611diyapatel
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
19 views20 pages

ET22BTEC010 - Diya Patel - Practical 8 - Javascript DOM and Validation

Uploaded by

0611diyapatel
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/ 20

Subject Code:-BTCO15504

Subject Name:- Web Technology Concepts


Name :- Diya Patel
Enrollment Number:- ET22BTEC010
Practical 8: Javascript DOM and validation
7. Write a javascript function to find factorial of a given number and return the answer.
Program:-
<!DOCTYPE html>
<html>
<head>
<title>Factorial Calculator</title>
</head>
<body>
<h2>Factorial Calculator</h2>
<input type="number" id="number" placeholder="Enter a number">
<button onclick="calculateFactorial()">Calculate Factorial</button>
<p id="result"></p>

<script>
function calculateFactorial() {
let num = document.getElementById('number').value;
let result = factorial(num);
document.getElementById('result').innerText = `Factorial of ${num} is ${result}`;
}

function factorial(n) {
if (n === 0) {
return 1;
}
return n * factorial(n - 1);
}
</script>
</body>
</html>
Output:-

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 86
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010
8. Create different variables of Array and string objects. And use all the functions related to that.
Program:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array and String Operations</title>
</head>
<body>
<h1>JavaScript Array and String Operations</h1>

<h2>Array Operations</h2>
<div id="array-demo"></div>

<h2>String Operations</h2>
<div id="string-demo"></div>

<script>
// Array Creation
const fruits = ["Apple", "Banana", "Cherry"];
const numbers = [1, 2, 3, 4, 5];
const mixedArray = ["Text", 42, true, null];

// Array Methods
fruits.push("Orange"); // Add an element
numbers.pop(); // Remove the last element
const sortedFruits = fruits.sort(); // Sort the array
const fruitString = fruits.join(", "); // Convert array to string

// Display Array Results


document.getElementById("array-demo").innerHTML = `
<p>Original Fruits: ${fruitString}</p>
<p>Sorted Fruits: ${sortedFruits.join(", ")}</p>
<p>Mixed Array: ${mixedArray.join(", ")}</p>
<p>Length of Numbers Array: ${numbers.length}</p>
`;

// String Creation and Manipulation


const greeting = "Hello, World!";
const upperCaseGreeting = greeting.toUpperCase(); // Convert to uppercase
const substringGreeting = greeting.substring(0, 5); // Get substring

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 87
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010
// Display String Results
document.getElementById("string-demo").innerHTML = `
<p>Original Greeting: ${greeting}</p>
<p>Uppercase Greeting: ${upperCaseGreeting}</p>
<p>Substring of Greeting: ${substringGreeting}</p>
<p>Length of Greeting: ${greeting.length}</p>
`;
</script>
</body>
</html>
Output:-

9. Create javascript that scroll some message in Status window of browser.


Program:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrolling Message Example</title>
<style>
body {
font-family: Arial, sans-serif;

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 88
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010
margin: 0;
padding: 0;
overflow-x: hidden; /* Prevent horizontal scroll */
}
.scrolling-message {
position: fixed;
top: 0;
left: 100%; /* Start off-screen to the right */
white-space: nowrap; /* Prevent line breaks */
font-size: 24px; /* Font size of the message */
animation: scroll 10s linear infinite; /* Animation for scrolling */
}

@keyframes scroll {
0% {
transform: translateX(0); /* Start position */
}
100% {
transform: translateX(-100%); /* End position */
}
}
</style>
</head>
<body>

<div class="scrolling-message" id="scrollMessage">


This is a scrolling message across the top of the page!
</div>

<div style="padding-top: 50px;">


<h1>Welcome to My Page</h1>
<p>This is an example page demonstrating a scrolling message at the top.</p>
<p>Scroll down to see more content!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</p>
<p>More content here...</p>
<p>More content here...</p>
<p>More content here...</p>
</div>

</body>
</html>

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 89
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010
Output:-

10. Write a javascript program to change the background color of web page repeatedly.
Program:-
<!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>
<style>
body {
transition: background-color 0.5s; /* Smooth transition for color change */
}
</style>
</head>
<body>

<h1>Background Color Changer</h1>


<p>The background color of this page will change every 2 seconds.</p>

<script>
// Array of colors to choose from
const colors = ["#FF5733", "#33FF57", "#3357FF", "#F1C40F", "#8E44AD", "#E74C3C", "#3498DB",
"#2ECC71"];

let currentIndex = 0; // To keep track of the current color index

// Function to change the background color


function changeBackgroundColor() {
document.body.style.backgroundColor = colors[currentIndex]; // Change the background color
currentIndex = (currentIndex + 1) % colors.length; // Update index to loop through colors
}

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 90
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010
// Change background color every 2000 milliseconds (2 seconds)
setInterval(changeBackgroundColor, 2000);
</script>

</body>
</html>
Output:-

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 91
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010

11. Create a webpage containing one button. clicking on this button change the size of the window
& position.
Program:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resize and Move Window</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>

<button id="resizeButton">Resize and Move Window</button>

<script>
document.getElementById('resizeButton').onclick = function() {
// Set new width and height

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 92
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010
const newWidth = 800; // Desired width in pixels
const newHeight = 600; // Desired height in pixels

// Set new position (x, y)


const newX = 100; // New horizontal position
const newY = 100; // New vertical position

// Resize the window


window.resizeTo(newWidth, newHeight);

// Move the window to a new position


window.moveTo(newX, newY);
};
</script>

</body>
</html>

Output:-

12. Put three button “OPEN NEW WINDOW”,”CLOSE CHILD WINDOW”,”CLOSE MAIN WINDOW” in
main HTML page, on click of first button, execute some JavaScript code that will open one child
window. Clicking on second button child window will close and third button main html page will
close.
Program:-
<!DOCTYPE html>
<html lang="en">
<head>

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 93
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Control Example</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>

<button id="openButton">OPEN NEW WINDOW</button>


<button id="closeChildButton">CLOSE CHILD WINDOW</button>
<button id="closeMainButton">CLOSE MAIN WINDOW</button>

<script>
let childWindow; // Variable to hold the reference to the child window

// Function to open a new child window


document.getElementById('openButton').onclick = function() {
// Open a new window and store its reference
childWindow = window.open("", "childWindow", "width=400,height=300,left=100,top=100");
// Write some content in the child window
childWindow.document.write("<h1>This is the Child Window</h1>");
childWindow.document.write("<p>Click anywhere to close this window.</p>");

// Optional: Add an event listener to close the child window on click


childWindow.onclick = function() {
childWindow.close();
};
};

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 94
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010
// Function to close the child window
document.getElementById('closeChildButton').onclick = function() {
if (childWindow && !childWindow.closed) {
childWindow.close(); // Close the child window if it is open
alert("Child window closed.");
} else {
alert("No child window is open.");
}
};

// Function to close the main window


document.getElementById('closeMainButton').onclick = function() {
if (confirm("Are you sure you want to close this window?")) {
window.close(); // Close the main window
}
};
</script>

</body>
</html>

Output:-

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 95
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010

13. Write a javascript to get details from visitors browser.


Program:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visitor Browser Details</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.info {
margin-bottom: 10px;
}
</style>
</head>
<body>

<h1>Visitor Browser Details</h1>

<div class="info" id="userAgent"></div>


<div class="info" id="language"></div>
<div class="info" id="platform"></div>
<div class="info" id="referrer"></div>
<div class="info" id="geoLocation"></div>

<script>

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 96
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010
// Get user agent
document.getElementById('userAgent').innerText = "User Agent: " + navigator.userAgent;

// Get browser language


document.getElementById('language').innerText = "Language: " + navigator.language;

// Get platform information


document.getElementById('platform').innerText = "Platform: " + navigator.platform;

// Get referrer URL


document.getElementById('referrer').innerText = "Referrer URL: " + document.referrer;

// Check for geolocation support and get location


if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
document.getElementById('geoLocation').innerText =
"Geolocation: Latitude: " + lat + ", Longitude: " + lng;
}, function(error) {
document.getElementById('geoLocation').innerText =
"Geolocation error: " + error.message;
});
} else {
document.getElementById('geoLocation').innerText =
"Geolocation is not supported by this browser.";
}
</script>

</body>
</html>

Output:-

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 97
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010

14. Write a javascript program to rotate images.


Program:-
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Rotate Image</title>
<style>
#rotated {
transition: transform 0.5s ease; /* Smooth transition for rotation */
display: block; /* Ensure the image is displayed */
margin: 20px auto; /* Center the image */
}
#container {
text-align: center; /* Center the button */
}
</style>
</head>
<body>
<div id="container">
<button id="rotate" onclick="rotateImage()">Rotate Image</button>
<img id="rotated" src="earth.jpg" width="300" alt="Image to rotate"/>
</div>
<script src="index.js"></script>
</body>
</html>

Output:-

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 98
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010

15. Write a javascript program to zoom out the image. use mouseover event for the same.
Program:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Zoom Out on Mouseover</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="image-container">
<img id="zoomImage" src="earth.jpg" alt="Zoomable Image">
</div>

<script src="script.js"></script>
</body>
</html>

Output:-

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 99
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010

16. Create a page that includes a select object to change the background color of the current page.
The property that needs to be set is bgColor,Similar things for foreground color.
Program:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Color Changer</title>
</head>
<body>
<h1>Background Color Changer</h1>

<label for="colorSelect">Select a background color:</label>


<select id="colorSelect">
<option value="white">White</option>
<option value="lightblue">Light Blue</option>
<option value="lightgreen">Light Green</option>
<option value="lightpink">Light Pink</option>
<option value="lightyellow">Light Yellow</option>
</select>

<script src="script.js"></script>
</body>
</html>

Output:-

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 100
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010

17. A document contains two forms, named form1 and form2. In the form1 is a field named
acc1(type=text) and form2 contains field select(type=text). Write a program that will copy
values of acc1 to select .
Program:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copy Values Between Forms</title>
</head>
<body>
<h1>Copy Values Between Forms</h1>

<form id="form1">
<label for="acc1">Account Name:</label>
<input type="text" id="acc1" name="acc1">
<button type="button" onclick="copyValue()">Copy Value to Form 2</button>
</form>

<form id="form2">
<label for="selectField">Select Account:</label>
<select id="selectField" name="selectField">
<option value="">Select...</option>
<!-- Options will be added here -->
</select>
</form>

<script src="script.js"></script>
</body>
</html>

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 101
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010

Output:-

18. Create a webpage contains two textbox as userid and password and one submit button. Check
for validation for userid as mobile number and password should contains minimum 8 character,
with special symbol and one upper case letter.
Program:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User ID and Password Validation</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.error {
color: red;
font-size: 0.9em;
}
</style>
</head>
<body>
<h1>User ID and Password Validation</h1>

<form id="loginForm" onsubmit="return validateForm()">

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 102
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010
<div>
<label for="userid">User ID (Mobile Number):</label>
<input type="text" id="userid" name="userid" required>
<div id="useridError" class="error"></div>
</div>

<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<div id="passwordError" class="error"></div>
</div>

<button type="submit">Submit</button>
</form>

<script src="script.js"></script>
</body>
</html>

Output:-

19. Perform javascript validation for HTML Practical-4: Question No:5


Program:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page</title>
<style>

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 103
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010
tr {
background-color: #D6EEEE;
}
.error {
color: red;
font-size: 0.9em;
}
</style>
</head>
<body>
<h1>Registration Page</h1>
<form id="registrationForm" action="/action_page.php" onsubmit="return validateForm()">
<table border="1" cellpadding="5" cellspacing="3">
<tr>
<td colspan="2" align="center" style="width:400px">
<h2>Registration Page</h2>
</td>
</tr>
<tr>
<td style="width:150px">Registration ID:</td>
<td style="width:250px">
<input type="text" id="registrationID" name="registrationID">
<div id="registrationIDError" class="error"></div>
</td>
</tr>
<tr>
<td style="width:150px">Password:</td>
<td style="width:250px">
<input type="password" id="password" name="password">
<div id="passwordError" class="error"></div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">Register</button>
</td>
</tr>
</table>
</form>

<script src="script.js"></script>

<script>

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 104
Subject Code:-BTCO15504
Subject Name:- Web Technology Concepts
Name :- Diya Patel
Enrollment Number:- ET22BTEC010
function validateForm() {
// Clear previous error messages
document.getElementById('registrationIDError').textContent = '';

Output:-

SCET/EC/2024-25/ODD/BTech/Sem-V Pg no 105

You might also like