Scribd
Upload
11 views

css chapter 6

css chapter 6 diploma

Uploaded by

Vaishnavi Survase
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
11 views

css chapter 6

css chapter 6 diploma

Uploaded by

Vaishnavi Survase
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/ 13

Prath

Status Bar
Statis status bar

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>static status bar</title>
<script>
function newwindow(){
win = window.open("https://www.google.co.in/", "new window ", "height=200 ,
width=300")
win.status="hello world"
}
</script>
</head>
<body onload="newwindow()">

</body>
</html>

//link is reflecting in the status bar


Prath

Dynamic status bar

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dynamic Status Bar</title>
<script>
function newwindow(){
const win = window.open("https://www.google.co.in/", "new window",
"height=200,width=300");
win.status = "hello world";
win.document.write('<input type="button" name="btn1"
onmouseover="window.status=\'hello\'" value="click here">');
}
</script>
</head>
<body onload="newwindow()">
</body>
</html>

//as the status bar is blocked hare the msg is not showing
Prath

Moving status bar

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moving Status Bar</title>
<script>
function newwindow(){
const win = window.open("", "new window", "height=200,width=300");
win.document.write('<input type="button" name="btn1"
onmouseover="startMovingStatus()" value="click here">');

let msg = "Hello World! ";


let pos = 0;

function startMovingStatus() {
pos++;
if (pos > msg.length) {
pos = 0;
}
win.status = msg.substring(pos) + msg.substring(0, pos);
setTimeout(startMovingStatus, 150); // Adjust the speed of the moving
message here
}
}
</script>
</head>
<body onload="newwindow()">
</body>
</html>
Prath

Banner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner</title>
<script>
const Banner = ['java.jpeg', 'c.jpeg', 'python.jpeg'];
let count = 0;

function rotate() {
if (document.images) {
count++;
if (count === Banner.length) {
count = 0;
}
document.img1.src = Banner[count];
setTimeout(rotate, 1000);
}
}
</script>
</head>
<body onload="rotate()">
<center>
<img src="java.jpeg" name="img1" width="300" height="400">
</center>
</body>
</html>

working properly
Prath

Linking banner advertisement to urls


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
banner = ['java.jpeg', 'c.jpeg', 'python.jpeg'];
bannerlink = ['data.structure-using-c/', 'web-technology/', 'gui-application-
development-using-vb-net/'];
let count = 0;

function rotate() {
if (document.images) {
count++;
if (count == banner.length) {
count = 0;
}
document.img1.src = banner[count];
setTimeout(rotate, 1000);
}
}

function Linkbanner() {
document.location.href = "http://www.pragationonline.com/engineering/" +
bannerlink[count];
}
</script>
</head>
<body onload="rotate()">
<center>
<a href="javascript:Linkbanner()">
<img src="java.jpeg" name="img1" width="300" height="400">
</a>
</center>
</body>
</html>

Working properly.

Whenever user click on the banner ,he will get redirected to the another corresponding hypertext location
Prath

Slideshow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slideshow</title>
<script>

images = ['java.jpeg', 'c.jpeg', 'python.jpeg']


count = 0
function slideshow(status){
if(document.images){
count = count + status
if(count > images.length-1){
count = 0
}
if(count < 0){
count = images.length-1
}
document.img1.src = images[count]
}
}
</script>
</head>
<body>
<img src="java.jpeg" width="200" height="300" name="img1">
<input type="button" value="next" onclick="slideshow(1)">
<input type="button" value="previous" onclick="slideshow(-1)">

</body>
</html>

Working properly
Prath

Protecting webpages

Hiding source code

The provided HTML and JavaScript code is designed to deter users from accessing the page's
source code by disabling the right-click context menu. This is achieved through the
contextmenu event listener in JavaScript, which is attached to the document. When a user
tries to right-click on the webpage, the event's default behavior is prevented, thus
disabling the context menu that typically offers options like "View Page Source." This
method adds a layer of protection, making it slightly harder for casual users to access
the underlying HTML and JavaScript.
Prath

Hiding javascript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hiding javascript</title>
<script src="script.js">

</script>
</head>
<body>
write click on screen ,context menu is disabled
</body>
</html>

Js code

window.onload = function(){
document.addEventListener("contextmenu",function(e){
e.preventDefault();

},false);
}

Output : basically this code also disables the right click on the webpage
Prath

Pull-down menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pulldown</title>
<script>
function getPage(choice){
page = choice.options[choice.selectedIndex].value
if(page != "" ){
window.location = page
}
}
</script>
</head>
<body>
<form name="frm1">
Select Your fav Search Engine :
<select name="mychoice" onchange="getPage(this)">
<option value="https://www.google.co.in/">Google</option>
<option value="https://in.search.yahoo.com/?fr2=inr">Yahoo</option>
<option value="https://www.edge.co.in/">Edge</option>
</select>
</form>
</body>
</html>

JavaScript (getPage function):

Function Definition: function getPage(choice) is defined to handle the user's selection.

Retrieve Selection: page = choice.options[choice.selectedIndex].value gets the URL of the


selected option from the dropdown.

Conditional Redirect: if (page != "") { window.location = page; } checks if the selection


is not empty and then redirects the browser to the selected URL using window.location.
Prath

Dynamically – changing a menu


Prath

Validating menu selection


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validating</title>
<script>
function validateform(choice) {
const ch = choice.myfruite.selectedIndex;
if (choice.myfruite.options[ch].value === "") {
alert("no fruit selected\nSelect fruit");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="frm1" onsubmit="return validateform(this)">
Select your favorite fruit:
<select name="myfruite">
<option value="">Select fruit</option>
<option value="0">Apple</option>
<option value="1">Banana</option>
<option value="2">Strawberry</option>
<option value="3">Guava</option>
<option value="4">Orange</option>
</select>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

JavaScript Function:

validateform(choice): This function is called when the form is submitted.


const ch = choice.myfruite.selectedIndex;: Retrieves the index of the selected option in
the dropdown.
if (choice.myfruite.options[ch].value === "") { ... }: Checks if the selected option’s
value is an empty string.
alert("Select fruit");: Alerts the user to select a fruit if the value is empty.
return false;: Prevents the form from submitting if no fruit is selected.
Prath

Floating window
Prath

Pop up menu

You might also like