Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

Javascript Record Progrms

Uploaded by

aaronpinheiro84
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

Javascript Record Progrms

Uploaded by

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

1.

Write a JavaScript program to find the area and circumference of a circle (use
form)

<!doctype html>
<html>
<head>
<script>
function area_crf()
{
var radius, area, circumference;
radius= parseInt(document.getElementById("rad").value);
area=3.14*radius*radius;
circumference=2*3.14*radius;
document.getElementById("answer").value = area;
document.getElementById("answer1").value = circumference;
}
</script>
</head>
<body>
<p>Enter the Radius: <input id="rad"></p>
<button onclick="area_crf()">AREA-CIRCUMFERENCE-CIRCLE</button>
<p>Area = <input id="answer"></p>
<p>Circumference= <input id="answer1"></p>
</body>
</html>

2.Write a JavaScript program using 3 dialog boxes(alert, prompt, confirm)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Dialog Box Example</title>
</head>
<body>

<script>
// First dialog box: Ask for the user's favorite color
let favoriteColor = prompt("What is your favorite color?");

// Second dialog box: Ask for confirmation to proceed with the color choice
let isConfirmed = confirm("You entered: " + favoriteColor + ". Do you want to
continue?");

// Third dialog box: Display the result based on user's confirmation


if (isConfirmed) {
alert("Great choice! Your favorite color is " + favoriteColor + ".");
} else {
alert("You chose not to proceed.");
}
</script>

</body>
</html>
3. Write a JavaScript program to create a color palette and change the background
color (using
mouseover event).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Palette</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.palette {
display: inline-block;
margin: 0 auto;
}
.color-box {
width: 100px;
height: 100px;
display: inline-block;
margin: 10px;
cursor: pointer;
border: 2px solid #333;
}
</style>
</head>
<body>

<h1>Hover over the boxes to change background color!</h1>


<div class="palette">
<div class="color-box" style="background-color: red;"></div>
<div class="color-box" style="background-color: blue;"></div>
<div class="color-box" style="background-color: green;"></div>
<div class="color-box" style="background-color: yellow;"></div>
<div class="color-box" style="background-color: purple;"></div>
</div>

<script>
// Get all the color boxes
const colorBoxes = document.querySelectorAll('.color-box');

// Add event listeners to each color box


colorBoxes.forEach(box => {
box.addEventListener('mouseover', function() {
// Change the background color of the body when hovered over
document.body.style.backgroundColor = this.style.backgroundColor;
});

// Optional: Reset background color when mouse leaves the box


box.addEventListener('mouseout', function() {
document.body.style.backgroundColor = 'white'; // or any default color
});
});
</script>

</body>
</html>

4. Write a JavaScript program to change the background color of the document using
an arrayof colors.
(Array)

<!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 {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>

<h1>Click the button to change the background color!</h1>


<button id="changeColorButton">Change Color</button>

<script>
// Array of colors
const colors = ["red", "blue", "green", "yellow", "purple", "orange", "pink",
"teal"];

// Variable to keep track of the current color index


let colorIndex = 0;

// Function to change the background color


function changeBackgroundColor() {
// Set the background color to the current color in the array
document.body.style.backgroundColor = colors[colorIndex];

// Increment the color index, and reset it to 0 if it exceeds the array length
colorIndex = (colorIndex + 1) % colors.length;
}

// Get the button and add a click event listener


document.getElementById('changeColorButton').addEventListener('click',
changeBackgroundColor);
</script>

</body>
</html>

5. Browser detection and Browser compatibility checking for website.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Browser Detection</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.compatible {
color: green;
}
.incompatible {
color: red;
}
</style>
</head>
<body>

<h1>Browser Detection and Compatibility Check</h1>


<p id="browser-info"></p>
<p id="compatibility-message"></p>

<script>
// Function to detect the browser
function detectBrowser() {
const userAgent = navigator.userAgent;

if (userAgent.includes("Chrome")) {
return "Chrome";
} else if (userAgent.includes("Firefox")) {
return "Firefox";
} else if (userAgent.includes("Safari") && !userAgent.includes("Chrome")) {
return "Safari";
} else if (userAgent.includes("Edg")) {
return "Edge";
} else if (userAgent.includes("MSIE") || userAgent.includes("Trident")) {
return "Internet Explorer";
} else {
return "Unknown";
}
}
// Function to check browser compatibility
function isCompatible(browser) {
const compatibleBrowsers = ["Chrome", "Firefox", "Edge", "Safari"];
return compatibleBrowsers.includes(browser);
}

// Main logic to display browser info and compatibility


const browser = detectBrowser();
document.getElementById('browser-info').textContent = `You are using: ${browser}`;

if (isCompatible(browser)) {
document.getElementById('compatibility-message').textContent = "Your browser is
compatible!";
document.getElementById('compatibility-message').classList.add("compatible");
} else {
document.getElementById('compatibility-message').textContent = "Your browser is
not compatible. Please update or use a different browser.";
document.getElementById('compatibility-message').classList.add("incompatible");
}
</script>

</body>
</html>

You might also like