Scribd
Upload
4 views22 pages

html 8

The document contains practical examples of HTML and JavaScript demonstrating the use of various predefined functions in the window object, such as alert, prompt, confirm, and open. It also includes examples of changing the background color of a webpage using different events like click, mouseover, double-click, keydown, and onchange. Each program is accompanied by code snippets and outputs to illustrate the functionality.

Uploaded by

nautiyalgautam484
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
4 views22 pages

html 8

The document contains practical examples of HTML and JavaScript demonstrating the use of various predefined functions in the window object, such as alert, prompt, confirm, and open. It also includes examples of changing the background color of a webpage using different events like click, mouseover, double-click, keydown, and onchange. Each program is accompanied by code snippets and outputs to illustrate the functionality.

Uploaded by

nautiyalgautam484
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/ 22

PRACTICAL-8

Objective: To create an html page to explain the use of


various predefined functions in window object in java
script.
Code:
Program 1:
<!-- Understand and implement alert method -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Window Alert Example</title>
<script>
function showAlert() {
alert("This is an alert message!");
}
</script>
</head>
<body>
<button onclick="showAlert()">Click for Alert</button>
<h3>code by Gautam Nautiyal</h3>
</body>
</html>
Output 1:
Program 2:
<!-- Understand and implement prompt method -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Window Prompt Example</title>
<script>
function getPrompt() {
let name = prompt("Enter your name:");
if (name) {
document.getElementById("result").innerText = "Hello, " + name + "!";
} else {
document.getElementById("result").innerText = "No name entered!";
}
}
</script>
</head>
<body>
<button onclick="getPrompt()">Click for Prompt</button>
<p id="result"></p>
<h3>code by Gautam</h3>
</body>
</html>
Output 2:
Program 3:
<!-- Understand and implement confirm method -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Window Confirm Example</title>
<script>
function confirmAction() {
let result = confirm("Do you want to proceed?");
if (result) {
document.getElementById("message").innerText = "You clicked OK!";
} else {
document.getElementById("message").innerText = "You clicked Cancel!";
}
}
</script>
</head>
<body>
<button onclick="confirmAction()">Click for Confirm</button>
<p id="message"></p>
<h3>code by Gautam Nautiyal</h3>
</body>
</html>
Output 3:
Program 4:
<!-- Understand and implement open function -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Window Open Example</title>
<script>
function openWindow() {
window.open("https://www.example.com", "_blank",
"width=600,height=400");
}
</script>
</head>
<body>
<button onclick="openWindow()">Open New Window</button>
<h3>Code by Gautam Nautiyal</h3>
</body>
</html>
Output 4:
PRACTICAL-9
Objective: To create an html page to change the background color for
every click of a button using javascript. Write seperate code for different
events
Code:
Program 1:
<!-- Understand and implement onclick -->
<!DOCTYPE html>
<html>
<head>
<title>Click Event - Change Background</title>
</head>
<body>
<button onclick="changeColor()">Click Me</button>
<script>
const colors = ["lightblue", "lightgreen", "lavender", "peachpuff", "lightpink"];
let index = 0;
function changeColor() {
document.body.style.backgroundColor = colors[index];
index = (index + 1) % colors.length;
}
</script>
</body>
</html>
Output 1:
Program 2:
<!-- Understand and implement addEventListener('click') -->
<!DOCTYPE html>
<html>
<head>
<title>Event Listener - Change Background</title>
</head>
<body>
<button id="colorBtn">Click Me</button>

<script>
const colors = ["#ff9999", "#99ccff", "#ccffcc", "#ffff99", "#d9b3ff"];
let i = 0;

document.getElementById("colorBtn").addEventListener("click", function () {
document.body.style.backgroundColor = colors[i];
i = (i + 1) % colors.length;
});
</script>
</body>
</html>
Output 2:

Program 3:
<!-- Understand and implement onmouseover (hover event) -->
<!DOCTYPE html>
<html>
<head>
<title>Mouse Over - Change Background</title>
</head>
<body>
<button onmouseover="hoverColor()">Hover Over Me</button>
<script>
const hoverColors = ["#e6f7ff", "#ffe6e6", "#e6ffe6", "#fff0b3"];
let hIndex = 0;
function hoverColor() {
document.body.style.backgroundColor = hoverColors[hIndex];
hIndex = (hIndex + 1) % hoverColors.length;
}
</script>
</body>
</html>
Output 3:

Program 4:
<!-- Understand and implement ondblclick (double-click event) -->
<!DOCTYPE html>
<html>
<head>
<title>Double Click - Change Background</title>
</head>
<body>
<button ondblclick="dblColor()">Double Click Me</button>
<bold><p>code by Gautam Nautiyal</p></bold>
<script>
const dblColors = ["#f0f8ff", "#faebd7", "#ffe4e1", "#f5f5dc"];
let dIndex = 0;
function dblColor() {
document.body.style.backgroundColor = dblColors[dIndex];
dIndex = (dIndex + 1) % dblColors.length;
}
</script>
</body>
</html>
Output 4:
Program 5:
<!-- Understand and implement onkeydown (keyboard key press event -->
<!DOCTYPE html>
<html>
<head>
<title>Key Down - Change Background</title>
</head>
<body>
<h3>Press any key to change background color</h3>
<h4>code by Gautam Nautiyal</h4>
<script>
const keyColors = ["#ffe6cc", "#cce6ff", "#e6ccff", "#ccffe6"];
let kIndex = 0;

document.body.onkeydown = function () {
document.body.style.backgroundColor = keyColors[kIndex];
kIndex = (kIndex + 1) % keyColors.length;
};
</script>
</body>
</html>
Output 5:

Program 6:
<!-- Understand and implement onload (when the page finishes loading) -->
<!DOCTYPE html>
<html>
<head>
<title>Page Load - Change Background</title>
</head>
<body>
<h3>Background changes when page loads</h3>
<h4>code by Gautam Nautiyal</h4>
<script>
window.onload = function () {
document.body.style.backgroundColor = "#ccffcc"; // light green
};
</script>
</body>
</html>
Output 6:

Program 7:
<!-- Understand and implement onmousemove (mouse movement over the page) -->
<!DOCTYPE html>
<html>
<head>
<title>Mouse Move - Background</title>
</head>
<body>
<h3>Move your mouse around the page</h3>
<h4>code by Gautam Nautiyal</h4>
<script>
const moveColors = ["#e0ffff", "#f0fff0", "#fff0f5", "#ffffe0"];
let mIndex = 0;

document.body.onmousemove = function () {
document.body.style.backgroundColor = moveColors[mIndex];
mIndex = (mIndex + 1) % moveColors.length;
};
</script>
</body>
</html>
Output 7:

Program 8:
<!-- Understand and implement onchange (dropdown selection change) -->
<!DOCTYPE html>
<html>
<head>
<title>Change Event - Background Color</title>
</head>
<body>
<select onchange="changeColor(this)">
<option value="">-- Select Color --</option>
<option value="#ffc">Light Yellow</option>
<option value="#cff">Light Cyan</option>
<option value="#fcf">Light Magenta</option>
</select>
<h4>code by Gautam Nautiyal</h4>

<script>
function changeColor(selectObj) {
document.body.style.backgroundColor = selectObj.value;
}
</script>
</body>
</html>
Output 8:

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