Scribd
Upload
8 views6 pages

Unit6 Mynotes

The document contains multiple HTML examples demonstrating various JavaScript functionalities, including a rotating banner, a slideshow program, pull-down menus, dynamic menu changes, validation of selections, a floating menu, password protection for a webpage, and concealing email addresses. Each section provides code snippets illustrating how to implement these features in web development. The examples aim to enhance user interaction and security on web pages.

Uploaded by

gauchavan23
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
8 views6 pages

Unit6 Mynotes

The document contains multiple HTML examples demonstrating various JavaScript functionalities, including a rotating banner, a slideshow program, pull-down menus, dynamic menu changes, validation of selections, a floating menu, password protection for a webpage, and concealing email addresses. Each section provides code snippets illustrating how to implement these features in web development. The examples aim to enhance user interaction and security on web pages.

Uploaded by

gauchavan23
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/ 6

Unit 6

 Rotating Banner with URLs


<html>
<head>
<title>JavaScript Status Bar</title>
</head>
<body onload="setInterval(startShow,2000)">
<center>
<h4>It's Banner Show</h4>
<a href="https://in.puma.com" id="link"
><img src="https://1000logos.net/wp-content/uploads/2017/05/PUMA-Logo-
2003.png" width="500px" heigth="500px" id="image"></a>
</center>
<script>
var bannerNo = 1;
function startShow() {
var bannerArr = [
{
image:
"https://1000logos.net/wp-content/uploads/2017/05/PUMA-Logo-2003.png",
url: "https://in.puma.com",
},
{
image:
"https://thumbs.dreamstime.com/b/gucci-logo-editorial-illustrative-white-
background-eps-download-vector-jpeg-banner-gucci-logo-editorial-illustrative-white-
208329393.jpg",
url: "https://www.gucci.com",
},
{
image:
"https://www.hm.com/entrance/assets/bundle/img/HM-Share-Image.jpg",
url: "https://www2.hm.com",
},
];
document.getElementById("image").src = bannerArr[bannerNo].image;
document.getElementById("link").href = bannerArr[bannerNo].url;

bannerNo = (bannerNo + 1) % bannerArr.length;


}
</script>
</body>
</html>
 Slide Show Program
<html>
<head>
<title>JavaScript Status Bar</title>
</head>
<body>
<center>
<h4>It's Banner Show</h4>
<img
src="https://1000logos.net/wp-content/uploads/2017/05/PUMA-Logo-
2003.png"
style="width: 500px; height: 500px"
id="image"
/><br />

<button
type="button"
id="previous"
value="previous"
onclick="previousImage()"
>
Previous
</button>
<button type="button" id="next" value="next" onclick="nextImage()">
Next
</button>
</center>
<script>
var imgNo = 0;
var imgArr = [
"https://1000logos.net/wp-content/uploads/2017/05/PUMA-Logo-
2003.png",
"https://thumbs.dreamstime.com/b/gucci-logo-editorial-illustrative-
white-background-eps-download-vector-jpeg-banner-gucci-logo-editorial-
illustrative-white-208329393.jpg",
"https://www.hm.com/entrance/assets/bundle/img/HM-Share-
Image.jpg",
];
function nextImage() {
imgNo = (imgNo + 1) % imgArr.length;
document.getElementById("image").src = imgArr[imgNo];
}
function previousImage() {
imgNo = (imgNo + 2) % imgArr.length;
document.getElementById("image").src = imgArr[imgNo];
}
</script>
</body>
</html>

 Menu PullDown Menu


<!DOCTYPE html>
<html>
<head>
<title>Pull Down Menu</title>
</head>
<body>
<form>
<select id="menu" onchange="redirect()">
<option disabled selected>Products</option>
<option value="computers.html">Computers</option>
<option value="monitors.html">Monitors</option>
</select>
</form>

<script>
function redirect() {
const menu = document.getElementById("menu");
const page = menu.value; // Get the selected option's value
if (page) {
window.location = page; // Redirect to the selected URL
}
}
</script>
</body>
</html>

 Dynamically Changing a Menu


<!DOCTYPE html>
<html>
<head>
<title>Dynamically Changing Menu Options</title>
<script>
const SalesStaff = ['Bob Smith', 'Mark Jones', 'Sue Rogers'];
const MarketingStaff = ['Amber Thomas', 'Joanne Johnson', 'Sandy Russell'];

function GetEmployees(Department) {
const employeesDropdown = document.getElementById("Employees");
// Clear existing options
employeesDropdown.innerHTML = '<option value="0">Employees</option>';
const deptValue = Department.value;
let staffList = [];
if (deptValue === '1') staffList = SalesStaff;
else if (deptValue === '2') staffList = MarketingStaff;
// Add new options using for-in loop
for (const i in staffList) {
const option = new Option(staffList[i], parseInt(i) + 1);
employeesDropdown.add(option);
}
}
</script>
</head>
<body>
<form action="MyCGI.cgi" name="Form1">
<select id="DeptList" name="DeptList" onchange="GetEmployees(this)">
<option value="0">Department</option>
<option value="1">Sales</option>
<option value="2">Marketing</option>
</select>
<select id="Employees" name="Employees">
<option value="0">Employees</option>
</select>
<br />
<p>
<input type="submit" value="Submit" />
<input type="reset" value="reset"/>
</p>
</form>
</body>
</html>

 Validating a Menu
<!DOCTYPE html>
<html>
<head>
<script>
function validate() {
const cityDropdown = document.getElementById("city");
const selectedValue = cityDropdown.value;

if (selectedValue === "Select") {


alert("Please select a city!");
return false;
}
alert("You have selected: " + selectedValue);
return true;
}
</script>
</head>
<body>
<form onsubmit="return validate()">
<center>
<h3>Select your City</h3>
<select id="city" name="city">
<option value="Select">Select</option>
<option value="Mumbai">Mumbai</option>
<option value="Nashik">Nashik</option>
<option value="Delhi">Delhi</option>
<option value="Bangalore">Bangalore</option>
<option value="Pune">Pune</option>
</select>
<br><br>
<input type="submit" value="Submit">
</center>
</form>
</body>
</html>

 Floating menu
<!DOCTYPE html>
<title>Example</title>
<style>
body {
margin-bottom: 200%;
}
.floating-menu {
background: brown;
padding: 10px;;
width: 130px;
position: fixed;
}
.floating-menu a,
.floating-menu h3 {
display: block;
margin: 5px;
color: white;
}
</style>
<body>
<p>Scroll down and watch the menu remain fixed in the same position, as
though it was floating.</p>
<nav class="floating-menu">
<h3>Floating Menu</h3>
<a href="/css/">CSS</a>
<a href="/html/">HTML</a>
<a href="/coldfusion/">ColdFusion</a>
<a href="/database/">Database</a>
</nav>
</body>

Protecting a Web page


<!DOCTYPE html>
<html>
<head>
<script>
function passWord() {
var pass1 = prompt('Please Enter Your Password', '');

if (pass1.toLowerCase() === "css") {


window.open('https://www.google.com');
} else {
alert('Access Denied - Incorrect Password!');
}
}
</script>
</head>
<body>
<center>
<button onclick="passWord()">Enter Protected Area</button>
</center>
</body>
</html>

 Concealing Email Address


<!DOCTYPE html>
<html>
<head>
<title>Disable right click on my web page</title>
</head>
<script>
function protect_email(user_email) {
const [part1, part2] = user_email.split("@");
const visiblePart = part1.substring(0, part1.length - Math.floor(part1.length /
2));
return `${visiblePart}...@${part2}`;
}
alert(protect_email("[email protected]"));
</script>
</html>

You might also like