Unit-6 Menus, Navigation and Web Page Protection

UNIT 06 12 M
Menus , Navigation and

Web Page Protection
STATUS BAR
 A status bar is a horizontal bar at the bottom of a
parent window in which an application can display
various kinds of status information .
 The status bar is the area at the bottom of the
Prepared By Mrs.S.J.Patil
window that contains Help text and coordinate
information.
 Status bar displays information about a document
being edited or a program running. we can modify
status bar using JavaScript.
 For example ,it can be used to display information
about a link , when the user moves cursor of mouse
over that link. Also small amount of information
about page can be displayed in the status bar.
BUILD STATIC MESSAGE
 We can build a static message which will display on
status bar. as it is Static it will be present
permanently on status bar.
 to create a message in status bar we used ‘status’
property of window object i.e. window.status
 this property is not supported by the modern
browser. so it has no effect .we can create static
mesage in old browser and old operating system as
follows.
WAP TO DISPLAY STATIC MESSAGE ON
STATUS BAR IN JAVASCRIPT
<html>
<head>
<script>
window.status= “ This is a static message on
statusbar!";
</script>
</head>
<body>
<h2> program to display message in status bar</h2>
</body>
</html>
CHANGING THE MESSAGE USING
ROLLOVER
 We can change the message of status bar using

rollover. we are using onmouseover and
onmouseout properties to change the message of
status bar. on rollover we set new message to
‘window.status’.
WAP TO CHANGE MESSAGE ON STATUS BAR
IN JAVASCRIPT
<html>
<head>
<script>
window.status="original message";
</script>
</head>
<body>
<h2>changing message using rolllover</h2>
<input type="button" value="click"
onmouseover="window.status='message is changed on
mouseover'"
onmouseout="window.status='message is changed on
mouseout'">
</body>
</html>
MSBTE EXAM QUESTION-4 M
 Write a Java script to modify the status bar
using on MouseOver and on MouseOut with
links. When the user moves his mouse over the
links, it will display “MSBTE” in the status bar.
When the user moves his mouse away from the
link the status bar will display nothing.
<html>
<head>
<title>JavaScript Status Bar</title></head>
<body>
<a href=" https://msbte.org.in/"
onmouseover="window.status='MSBTE';return
true"
onmouseout="window.status='';return true">
MSBTE
</a>
</body>
</html>
MOVING MESSAGE IN STATUS BAR
 The method substring(x,y) acts on an object, in this
case the string myMsg, and returns part of the
string, starting with the character at x and
continuing for y characters.
WAP TO MOVE MESSAGE ON STATUS BAR IN
JAVASCRIPT
<html>
<head>
<title>status bar example </title>
<script>
var stsbarmsg="welcome to javascript....this is moving... ";
spacer=" ";
function scrollstatusmsg()
{
window.status=stsbarmsg;
stsbarmsg=stsbarmsg.substring(1,stsbarmsg.length)+spacer+stsbarmsg.
substring(0,1);
window.setTimeout("scrollstatusmsg()",150)
}
</script>
</head>
<body onload="scrollstatusmsg()">
</body>
</html>
BANNER
 Banner are generally used for display advertising.
the purpose of banner advertising is to promote
brand or to get visitors from the host website to got
to the advertiser website.
 Banner advertisements are image based in all the
websites.
 Banner can be placed anywhere in the webpage,
horizontally on top and bottom or vertically at right
and left side of the webpage.
 There are static and animated banners ; static ads
have one image with advertising text and animated
ads have moving elements and animation effects.
LOADING AND DISPLAYING THE BANNER
ADVERTISEMENT -
 The banner advertisement is the hallmark of every

commercial web page.
 To load and display the banner advertisement , we
placed an image on website, that image is
advertisement of particular advertiser.
 we can also provide the link to that image. when
image is clicked it will go to the advertiser’s
website.
PROGRAM TO CREATE BANNER
<html>
<head>
<title> Banner Advertisement </title></head>
<body>
<img src="pcp.jpg" width="900" height="900">
</body>
</html>
//PROGRAM TO CHANGE IMAGES IN BANNER
<html>
<head>
<script>
banners=new Array('digital.jpg','food.jpg');
count=0;
function rotate()
{
if(document.images)
{
count++;
if(count==banners.length)
{
count=0;
}
document.img1.src=banners[count];
setTimeout("rotate()",1000);
}
}
</script></head>
<body onload="rotate()">
<center>
<img src="apple.jpg" width="800" height="800" name="img1">
</center>
</body>
LINKING BANNER ADVERTISEMENT TO URL
 Banner is mainly used for advertisement purpose .
we need to provide the link to the banner.
 when user clicks the images of banner , the user
should navigate to the website of the advertiser.
PROGRAM TO LINK BANNER WITH URL IN
JAVASCRIPT
<html>
<head><title> linking with website </title></head>
<body>
<a href="https://www.pcpolytechnic.com">
<img src="pcp.jpg" width="900” height="900">
</a>
</body>
</html>
SLIDE SHOW
 A series of images as a presentation continuously
changing one after another on screen is known as
slide show.
 It contains multiple still images ,which change in a
sequential order after few seconds . we can create a
slide show by using array of image in JavaScript.
 Creating slide show:
 We can create slide show of images in javascript.to
create slide show ,we need to create an array of
locations. the path of is used to display the next
image on screen.
 In the following program we refer next image by
passing 1 as parameter to function and -1 for
previous image.
<html>
<head>
<script>
imgarr=new Array('wpd.jpg','gad.jpg','js.jpg');
img=0;
function dispimg(num)
{
img=img+num
if(img>imgarr.length-1)
{
img=0;
}
if(img<0)
{
img=imgarr.length-1;
}
document.img1.src=imgarr[img];
}
</script></head><body>
<img src="wpd.jpg" width="800" height="800" name="img1"></br>
<input type="button" value="previous" onclick="dispimg(-1)">
<input type="button" value="next" onclick="dispimg(1)">
</body>
</html>
MENUS
 The menu element represents a group of commands
that a user can perform or activate.
 menu may contain multiple choice to select . user can
choose one or more menu at a time depending upon
on type of menu.
CREATING PULL DOWN MENU
 A website is a collection of multiple WebPages. so there
should be a proper navigation to visit these pages. The
menu is used to navigate through the website.
 Menu contains various items which perform related
operations such as opening a new webpage,displaying
other related information etc.
 There are various types of menus are available,such as
pulldown menu,floating menu,chain select menu,tab
menu,sliding menu,pop up menu,scrollable menu etc.
 The pulldown menu can be created by using <select>tag
of html.
 The <option>tag is used to define the options of the
pulldown menu.
 The <option>tag written inside<select>tag.
<html>
<head>
<script>
function getselecteditem()
{
var ele=document.getElementById("menu");
var str=ele.options[ele.selectedIndex].value;
alert("the seleted value is:"+str);
}
</script></head>
<body>
<form name="frm1">
<select id="menu" >
<option value="WPD">WPD
<option value="GAD">GAD
<option value="CSS">CSS
</select>
<input type="button" value="selection" onclick="getselecteditem()">
</body>
</html>
MSBTE EXAM QUESTION:6 MARKS
 Write a JavaScript to create a pull-down menu
with three options [Google, MSBTE, Yahoo] once
the user will select one of the options then user
will be redirected to that site.
<html>
<head>
<title>HTML Form</title>
<script language="javascript" type="text/javascript">
function getPage(choice)
{
page=choice.options[choice.selectedIndex].value;
if(page!="")
{
window.location=page;
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
Select Your Favourite Website:
<select name="MenuChoice" onchange="getPage(this)">
<option value="select option">Select option</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.msbte.org.in">MSBTE</option>
<option value="https://www.yahoo.com">Yahoo</option>
</select>
</form>
</body>
</html>
DYNAMICALLY CHANGING THE MENU
 Rather than presenting the user some fix set of
options .It is always better to present some on the fly
content.
 We can change the set of options dynamically based
on choices made by visitor on the webpage because of
this one menu can be used to display different sets of
options hence reduce the need to show too many
menus on a web page.
<html>
<head>
<script>
compemp=new Array("Supriya","Poonam","Monika");
electemp=new Array("Pooja","Mayuri","Snehal");
function display(branch)
{
for(i=document.form1.Emps.options.length-1;i>=0;i--)
{
document.form1.Emps.options.remove(i);
}
dept=branch.options[branch.selectedIndex].value;
if(dept!="")
{
if(dept=='1')
{
for(i=1;i<=compemp.length;i++)
{
document.form1.Emps.options[i]=new Option(compemp[i-1]);
}
}
if(dept=='2')
{
for(i=1;i<=electemp.length;i++)
{
document.form1.Emps.options[i]=new Option(electemp[i-1]);
}
}
}
}
</script>
</head>
<body>
<form name="form1">
<select name="Dep" onchange="display(this)">
<option value="0">Departments</option>
<option value="1">Computer</option>
<option value="2">Electronics</option>
</select>
<select name="Emps">
<option value="0">Employees</option>
</select>
</body>
</html>
VALIDATING MENU SELECTION
 While filling information ,user can forget to select an
option in menu. In such case ,the incomplete
information should not be send to the server.
 To make fields compulsory to fill, we use field
validation. We can validate menu selection by using
javascript.Javascript is used for client side
validations.
<html>
<head>
<script>
function validatingmenu()
{
var sel=document.getElementById("sub").value;
if(sel=="select subject")
{
alert("please select subject");
}
else
{
document.getElementById("p1").innerHTML="you have selected subject as : "+sel;
}
}
</script></head><body>
<select id="sub">
<option value="select subject">select subject</option>
<option value="c">c</option>
<option value="c++">c++</option>
<option value="java">java</option>
<option value="vb.net">vb.net</option>
</select> <br>
<input type="button" value="VALIDATION" onclick="validatingmenu()">
<p id="p1"> </p>
</body>
</html>
FLOATING MENU:
 Sometimes the contents on WebPages are too long
that to read entire content visitor has to scroll up or
down many times because of that menu placed at top
or bottom of the page gets hide.
 When user scrolls the webpage, sometimes we need a
menu to stick to the screen for particular operation.
The menu which is fixed while scrolling the web page
is known as floating menu. A floating menu can be
created by setting the style position of that menu
fixed.
<html>
<head>
<title>menu</title>
</head>
<body>
<div style="position:fixed;
width:200px;height:50px;top:10px;right:10px;
background:blue">
Floating Menu.
</div>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
><br><br><br><br><br><br>
this is long web page...
<br>
hi...this is long web page
<br>
</body>
</html>
CHAIN SELECT MENU
 Chain of pull-down menus in which option selected
from the first pull-down menu determines the
options that are available in the second pull-down
menu.
 Likewise , the second pull-down menu selection
determines options that are shown in the third pull-
down menu.
 The purpose of chain select menu is dynamically
changing the list of options in the menu.
 we have already seen the example of dynamically
changing a menu.
CONTEXT MENU
 When we click the right mouse button on our
desktop, menu-like box appears and this box is called
context menu.
 It is also known as shortcut menu or pop-up menu is
a menu that appears when we right click.
 In JavaScript a contextmenu event runs when a user
tries to open a context menu. This can be done by
clicking the right mouse button.
<html>
<head>
<title>Context Menu Example</title>
<style>
.menu {
width: 150px;
border-style: solid;
border-width: 2px;
border-color: grey;
position: fixed;
display: none;
}
.menu-item {
height: 20px;
}
.menu-item:hover {
background-color: #6CB5FF;
cursor: pointer;
}
</style>
<script>
var menuDisplayed = false
var menuBox = null
window.addEventListener("contextmenu", showMenu, false)
window.addEventListener("click", hideMenu, false)
function showMenu()
{
var left = arguments[0].clientX
var top = arguments[0].clientY
menuBox = window.document.querySelector('.menu')
menuBox.style.left = left + 'px'
menuBox.style.top = top + 'px'
menuBox.style.display = 'block'
arguments[0].preventDefault()
menuDisplayed = true
}
function hideMenu()
{
if(menuDisplayed == true)
{
menuBox.style.display = 'none'
}
}
</script>
</head>
<body>
</h2>Right click mouse to view Context Menu</h2>
<div class="menu">
<div class="menu-item">Google</div>
<div class="menu-item">Facebook</div> <hr>
<div class="menu-item">MSN</div>
<div class="menu-item">Bing</div>
</div></body></html>
TAB MENU
 Tab menus display a one-or two word description of
menu option within a tab. A more complete
description is displayed below the tab bar as the
visitor moves the mouse cursor over the tab.
 There are following two ways of creating tabbed
area:
1. Using radio button
2. Using Target Selector

<html>
<head>
<style>
.tabs .tab
{ float:left;
}
.tabs .tab .content
{
position:absolute;
background-color:white;
left:0px;
width:60%;
border:1px black solid;
}
.checkboxtab
{
display:none;
}
.tab label
{
margin-right:15px;
}
.checkboxtab:checked~label
{
color:purple;
border:1px black solid;
}
.checkboxtab:checked~.content
{
z-index:1;
}
</style>
<body>
<div class="tabs">
<div class="tab">
<input name="checkbox-tabs-group" type="radio" id="checkbox1"
class="checkboxtab" checked>
<label for="checkbox1">Tab1</label>
<div class="content">this is the content of tab1</div>
</div>
<div class="tab">
class="checkboxtab">
<div class="content">this is the content of tab2 </div>
</div>
<div class="tab">
class="checkboxtab">
<div class="content">this is the content of tab3 </div>
</div>
</div>
</body>
OUTPUT
POP-UP MENU
 A pop-up menu displays several parent (top-level)
menu items.
 A pop-up menu appears as the visitor moves the
mouse cursor over a parent menu item.so it will
display child menu items.
 Items of menu can be activated either onmouseover
or onclick event.
<html>
<head>
<style>
.dropbtn{
backgroun-color:green;
color:white;
padding:16px;
font-size:16px;
border:none;
}
.dropdown{
position:relative;
display:inline-block;
}
.dropdown-content
{
display:none;
position:absolute;
background-color:white;
min-width:160px;
z-index:1;
}
.dropdown-content a{
color:black;
padding:12 px 16px;
text-decoration:none;
display:block;
}
.dropdown-content a:hover{background-color:grey;}
.dropdown:hover .dropdown-content{display:block;}
.dropdown:hover .dropbtn{background-color:blue;}
</style>
<body>
<h2> POP-UP Menu</h2>
<p> move mouse over the button to open the dropdown menu</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">link1</a>
</div>
</div>
</body>
</html>
HIGHLIGHTED MENU
 The highlighted menu can be created by mouse
over effect. as user moves the mouse to any menu
item, the menu will be highlighted by using
special effects such as background color change
or making the font style as bold etc.
 The highlighted menu is used to make a
confirmation that user is going to choose a proper
menu item.
FOLDING TREE MENU
 A menu which contains sub menu and the sub menu
contain the sub menu then the hierarchy like tree of
menu is created.
 the menu can be fold by hiding the sub menus and
unfold by displaying the submenu of a menu is
known as foldable tree menu.
SCROLLABLE MENU
Scrolling menu is the mechanism that allows user to
scroll through the menu. If the available space is too
small, arrows will appear on each end of the menu.
 If user moves the mouse over the arrows, the menu
will from left to right.
SIDE-BAR MENU
 In side bar menu ,the sub menu of a menu item will
be displayed on right side of the menu.
 When we click on the menu item, the sub menu item
of that menu will be displayed on right side of the
menu.
PROTECTING WEB PAGE
 Ways of protecting Web Page:
1)Hiding your source code
2)Disabling the right Mouse Button
3) Hiding JavaScript
4) Concealing E-mail address.
1)Hiding your source code:

First, you can disable use of the right mouse button
on your site so the visitor can't access the View
Source menu option on the context menu.
This hides both your HTML code and your JavaScript
from the visitor.
2)Disabling the right MouseButton:
 All the action occurs in the JavaScript that is defined
in the tag of the web page. The JavaScript begins by
defining the BreakInDetected() function.
 This function is called any time the visitor clicks the
right mouse button while the web page is displayed.
 It displays a security violation message in a dialog
box whenever a visitor clicks the right mouse button
The BreakInDetected() function is called if the
visitor clicks any button other than the left mouse
button.
WRITE A JAVASCRIPT PROGRAM TO DISABLE THE
RIGHT MOUSE CLICK.
<html>
<head>
<title> Mouse Example</title>
<script>
document.addEventListener("contextmenu",function(e)
{
e.preventDefault();
});
</script>
</head>
<body>
<h4>Disabling The Right Click Of Mouse Button</h4>
</body>
</html>
3) Hiding JavaScript
 You can hide your JavaScript from a visitor by
storing it in an external file on your web server.
 The external file should have the .js file extension.
The browser then calls the external file whenever the
browser encounters a JavaScript element in the web
page.
 If you look at the source code for the web page, you'll
see reference to the external .js file, but you won't see
the source code for the JavaScript.
4) Concealing E-mail address:
 Some spammers create programs called bots that
surf the Net looking for e-mail addresses that are
embedded into web pages, such as those placed there
by developers to enable visitors to contact them.
 The bots then strip these e-mail addresses from the
web page and store them for use in a spam attack.
This technique places developers between a rock and
a hard place.
 If they place their e-mail addresses on the web page,
they might get slammed by spammers.
 If they don't display their e-mail addresses, visitors
will not be able to get in touch with the developers.
The solution to this common problem is to conceal
your e-mail address in the source code of your web
page so that bots can't find it but so that it still
appears on the web page.
<html>
<head>
<title>Conceal Email Address</title>
<script>
function CreateEmailAddress()
{
var x = manish&gmail*c_o_m
var y = 'mai'
var z = 'lto'
var s = '?subject=Customer Inquiry'
x = x.replace('&','@')
x = x.replace('*','.')
x = x.replace('_','')
x = x.replace('_','')
var b = y + z +':'+ x + s
window.location=b
}
</script>
</head>
<body>
<input type="button" value="Help"
onclick="CreateEmailAddress()">
</body>
</html>
FRAMEWORKS OF JAVASCRIPT AND APPLICATION
 A JavaScript framework is a collection of
JavaScript code libraries that provide a web
developer with pre-written code for routine
programming tasks. Frameworks are structures with
a particular context and help you create web
applications within that context.
 It is completely possible to build strong web
applications without JavaScript frameworks, but
frameworks provide a template that handles common
programming patterns.
 JavaScript frameworks, like most other frameworks,
provide some rules and guidelines. Using these rules
and guidelines, any developer can make complex
applications faster and more efficiently than if they
decided to build from scratch.
POPULAR JAVASCRIPT FRAMEWORKS
1. ReactJS:
 React.js is an efficient and flexible JavaScript
library for building user interfaces created by
Facebook.
 It is used for handling the view layer for web and
mobile apps.
2. NodeJS:
 Node.js is an asynchronous event-driven JavaScript
runtime engine designed for building scalable
network applications.
 It is fast, lightweight and scalable development
environment.
3.VueJS:
 Vue.js is a progressive framework for building user
interfaces and one page applications.
 It is not just for web interfaces,Vue.js is also used
both for desktop and mobile app development with
Electron framework.
4.AngularJS:
 AngularJS is a popular enterprise-level JavaScript
framework used for developing large and complex
business applications.
 It is an open-source web framework created by
Google and supported by both Google and Microsoft.

Unit-6 Menus, Navigation and Web Page Protection

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit-6 Menus, Navigation and Web Page Protection

Uploaded by

Copyright:

Available Formats

UNIT 06 12 M

Menus , Navigation and

 We can change the message of status bar using

 The banner advertisement is the hallmark of every

2. Using Target Selector

1)Hiding your source code:

You might also like