Scribd
Upload
109 views

Topic 6 CSS

The document discusses using JavaScript to add functionality to web pages, including: 1) Changing the message in the status bar by using onmouseover and onmouseout events on hyperlinks. 2) Creating a scrolling message in the status bar by incrementing the position of text in a loop. 3) Displaying banner advertisements by loading images from an array and switching between them periodically using setTimeout. 4) Linking banner ads to URLs so that clicking an ad goes to its associated website. 5) Creating a slideshow by loading images from an array and automatically changing between them over time.

Uploaded by

Pratiksha Jadhav
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
109 views

Topic 6 CSS

The document discusses using JavaScript to add functionality to web pages, including: 1) Changing the message in the status bar by using onmouseover and onmouseout events on hyperlinks. 2) Creating a scrolling message in the status bar by incrementing the position of text in a loop. 3) Displaying banner advertisements by loading images from an array and switching between them periodically using setTimeout. 4) Linking banner ads to URLs so that clicking an ad goes to its associated website. 5) Creating a slideshow by loading images from an array and automatically changing between them over time.

Uploaded by

Pratiksha Jadhav
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/ 14


Client Side Scripting Language 6-1 Menus, Navigation and Web Page Protection

Menus, Navigation
and Web Page Protection

6.1 Status Bar 6.1.2 Changing the Message using Rollover

Status bar is present at the bottom of browser window. We will use onMouseOver and onMouseOut events of
It enhances the readability of the text present on the a hyper link to display or manage the messages.
web page, when user scrolls over it. We can use window.status on OnMouseOver event to
change the status in the status bar. You can display a
6.1.1 Build Static Message
javascript status bar message whenever your users hover
We can build a static message which is displayed on
over your hyperlinks.
the status bar. This message remains permanently
present in the status bar. Java Script
<html>
Java Script <head>
<!DOCTYPE html> <title>JavaScript Status Bar</title></head>
<html> <body>
<body> <a href="../"
<script> onMouseOver="window.status='Welcome';return true"
window.status = "Welcome!! This is information onMouseOut="window.status='';return true">
in displayed in your status bar!!"; Hello, Click here and check the statusbar
</script> </a>
</body> </body>
</html> </html>
Output Output

(6 - 1)
Client Side Scripting Language 6-2 Menus, Navigation and Web Page Protection
Output
6.1.3 Moving the Message along the Status Bar
For moving the message in the status bar we need to
increment the current position of the text one character
ahead in a loop. This will give us the effect of moving
the text. This will be displayed by using the setInterval
function, which displays the moved text after some
milliseconds.
Following javascript illustrates this idea

Java Script
<html>
<head>
<title>Scrolling Text</title>
<script language="JavaScript">

6.2 Banner
var currentPosition = 0
6.2.1 Loading and Displaying Banner Advertisement
var targetPos = 100
var blanks = ""  It is a typically rectangular advertisement placed on

function scroll_function(msg, milliseconds) { a Web site either above, below or on the sides of the
Web site's main content and is linked to the
window.setInterval("display('"+msg+"')", milliseconds)
advertiser's own Web site.
}
 It is also referred as banner ad.

 The banner may contain text or graphics images.


function display(msg)
{  Following is a simple JavaScript that displays the

window.defaultStatus = blanks + msg banners in which it slides from one banner to another.
++currentPosition Prerequisite : In our example,
blanks += " "
(1) we have created four images and we named them as
if(currentPosition > targetPos)
banner1.jpg, banner2.jpg, banner3.jpg, and
{
banner4.jpg.
currentPosition = 0
blanks = "" (2) Save the images in the same folder as the HTML file
} which will be used to show the banners. These
} images can be created by using some graphics tools
</script> or image files can be downloaded from Internet.
</head>
<body onload="scroll_function
('This text is moving', 100)">
<p>Watch the text scroll at the
bottom of this window!</p>
</body></html>
Client Side Scripting Language 6-3 Menus, Navigation and Web Page Protection

JavaScript Document
<html>
<head>
<script language="Javascript">
MyBanners=new Array('banner1.jpg','banner2.jpg',
'banner3.jpg','banner4.jpg');
banner_count=0;
function DisplayBanners()
{
if (document.images)
{
banner_count++;
if (banner_count==MyBanners.length)
{
banner_count=0;
}
document.BannerChange.src=MyBanners[banner_count];
setTimeout("DisplayBanners()",2000);
}
}
</script>
<body onload="DisplayBanners()">
<center>
<h1> Displaying Banner </h1>
<img src="banner1.jpg" width="900" height="120" name="BannerChange"/>
</center>
</body>
</html>
Output
Client Side Scripting Language 6-4 Menus, Navigation and Web Page Protection

Script Explanation : In above JavaScript,


(1) We have created an array of four image files. Each image is considered as one banner.
(2) In the function DisplayBanners() , the images are displayed continuously one by one with some
time interval.
(3) The time interval can be set using the built in function setTimeout, by calling the function
DisplayBanner repeatedly.

6.2.2 Linking a Banner Advertisement to URL


In any web site the banner appear mainly for advertising purpose. Hence it is essential to link those
banners with their corresponding web site. For example – suppose you are going through some web site
and if some banner flashes on your web page that makes an advertisement about online mobile store,
then it can tempt you to go through such online mobile store. In such case, this flashing banner must be
linked up with the corresponding web site.
Following is a simple example – in which I have created four banners of four famous web sites of Google,
Gmail, Facebook and Wikipedia. If user clicks on the banner of ‘Google’ then the Google’s web page must
be displayed.

JavaScript Document
<html>
<head>
<script language="Javascript">
MyBanners=new Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg');
MyBannerLinks=new Array('www.google.com/','www.gmail.com/','www.facebook.com/','www.wikipedia.com/')
banner_count=0;
function DisplayLinks()
{
document.location.href="http://"+MyBannerLinks[banner_count];
}
function DisplayBanners()
{
if (document.images)
{
banner_count++;
if (banner_count==MyBanners.length)
{
banner_count=0;
}
document.BannerChange.src=MyBanners[banner_count];
setTimeout("DisplayBanners()",2000);
}
}
</script>
<body onload="DisplayBanners()">
<center>
<h1> Displaying Banner </h1>
<a href="javascript: DisplayLinks()">
Client Side Scripting Language 6-5 Menus, Navigation and Web Page Protection

<img src="banner1.jpg" width="900" height="120" name="BannerChange"/></a>


</center>
</body>
</html>
Output

If we click on above image then the following output can be obtained

6.3 Slide Show


A slide show is a presentation of a series of still images on a projection screen or electronic display
device, typically in a prearranged sequence.
In JavaScript we can create a slide show by using the Array of images. Let us discuss how to create a
slide show with simple JavaScript

6.3.1 Creating a Slide Show


For creation of slide show we need to have some image files. These images can be created using some
Graphics tool or some photographs.
In the following JavaScript the slide show is created and the transition from one slide to another can be
possible using the Back and Forward button.
Client Side Scripting Language 6-6 Menus, Navigation and Web Page Protection

JavaScript Document
<!DOCTYPE html>
<head>
<script language="Javascript">
MySlides=new Array('slide1.jpg','slide2.jpg','slide3.jpg','slide4.jpg')
i=0
function DisplaySlides(SlideNumber)
{
i=i+SlideNumber;
if (i>MySlides.length-1)
{
i=0;
}
if (i<0)
{
i=MySlides.length-1;
}
document.SlideID.src=MySlides[i];
}
</script>
</head>
<body>
<img src="slide1.jpg" name="SlideID" width="200" height="200" />
<br/><br/>
<input type="button" value="Back" onclick="DisplaySlides(-1)">
<input type="button" value="Forward" onclick="DisplaySlides(1)">
</body>
</html>
Output
Client Side Scripting Language 6-7 Menus, Navigation and Web Page Protection
selectedIndex=0">
Script Explanation : In above JavaScript <form action="" name="Form1">
(1) An array named MySlides is created in which the <select name="MyMenu" onchange="Display(this)">
four image files act as four slides. <option>Books</option>
<option
(2) In <body> section, the image tag is used to place the value="Fiction.html">Fiction</option>
first slide. <option value="NonFiction.html">
Non Fiction</option>
(3) Then two buttons are placed – one for moving back
</select>
in slide show and anther is for moving forward in
</form>
slide show. For each transition(either forward or </body>
back the function DisplaySlides will be called by </html>
passing initial –1 or +1 value. Output
(4) DisplaySlides is a simple function in which the
index i of slide is incremented by one. When the
slide show reaches to maximum slide number it is
reset and the slide show is possible from beginning.

6.4 Menus

6.4.1 Creating Pulldown Menu


 A web site is normally a collection of various web
pages. A visitor to this site navigates from one page
to another. If a menu of these web pages is created
then it becomes easy for a visitor to select
appropriate web page.
 The <select> element is used to create a pulldown
menu
 The <option> tags inside the <select> element define
the available options in the list.

JavaScript Document
On clicking any of the choice in above document, you
<!DOCTYPE>
<html>
will be directed to corresponding HTML page.
<head>
6.4.2 Dynamically Changing the Menu
<title>Pull Down Menu</title>
<script language="Javascript"> Dynamically changing menu means the items present in
function Display(Ch) the menu are changing automatically. Following is a
{ Javascript example in which two menus are created –
MyPage = Ch.options[Ch.selectedIndex].value
one for category of students in the Class and other menu
if (MyPage != "")
{ is for displaying names of boys students or
window.location = MyPage names of girl students based on the selection. Thus

}
} other menu displaying appropriate names of students
</script> is a dynamic menu.
</head>
<body onload="document.Form1.MyMenu.
Client Side Scripting Language 6-8 Menus, Navigation and Web Page Protection

JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Dynamically Changing Menu Options</title>
<script language="Javascript">
BoysList = new Array('Sunil','Aditya','Siddharth')
GirlsList = new Array('Archana','Sharda', 'Swati')
function DisplayStudents(Class)
{
// clearing current options
for(i=document.Form1.Students.options.length-1;i>0; i--)
{
document.Form1.Students.options.remove(i)
}
Category = Class.options[Class.selectedIndex].value
if (Category != "") //somethig is selected
{
if (Category == '1')
{
for (i=1; i<=BoysList.length;i++)
{
//displaying names of boys
document.Form1.Students.options[i] =new Option(BoysList[i-1])
}
}
if (Category == '2')
{
for (i=1; i<=GirlsList.length;i++)
{
//displaying names of girls
document.Form1.Students.options[i] = new Option(GirlsList[i-1])
}
}
}
}
</script>
</head>

<body onload="document.Form1.ClassList.selectedIndex=0">
<h2> Dynamically Changing Menu</h2>
<form name="Form1">
<select name="ClassList" onchange="DisplayStudents(this)">
<option value="0">Class</option>
<option value="1">Boys</option>
<option value="2">Girls</option>
</select>
<select name="Students">
Client Side Scripting Language 6-9 Menus, Navigation and Web Page Protection

<option value="0">Students</option>
</select>
</form>
</body>
</html>
Output

Just Select the category of students from ‘Class’ menu and dynamically the ‘Students’ menu will change.
For instance-just refer following screenshot

6.4.3 Validating Menu Selection


The common problem that user normally creates is – he/she forgets to select particular item from the
menu and if such item is required for processing further then it creates severe problem.
This problem can be solved in JavaScript by checking whether the items are selected from the menu or
not.
Client Side Scripting Language 6 - 10 Menus, Navigation and Web Page Protection

Script Explanation : In above JavaScript,


JavaScript Document
<!DOCTYPE html> (1) We have defined a pulldown menu in <body> tag.
<html> This menu is having a name MyMenu.
<head>
(2) Next we need a Submit button to submit the form
<title>Validation Demo of PullDown Menu</title>
<script language="Javascript">
to the server.
function ValidateForm(formvalue) (3) When user clicks the Submit button, it is expected
{ that he/she should have selected some item from the
item = formvalue.MyMenu.selectedIndex;
Menu. Validation is a process by which we check if
if(formvalue.MyMenu.options[item].value=="")
{ user selects some item or not. For that purpose we
alert("Plese Select some item from Menu!!!"); have written a function named ValidateForm. This
return false; function is called on onsubmit attribute.
}
(4) The ValidateForm function is defined in <head>
}
</script> tag.
</head> (5) In the ValidateForm function we pass the form
<body> object. Using the form object in variable formvalue
<form action="" name="Form1"
onsubmit="return ValidateForm(this)">
we can get the value of Selected Index. If user does
<select name="MyMenu"> not select any item then string
<option value="">Select Item</option> formvalue.MyMenu.options[item].value is blank
<option value="1">Desktop</option> or null and if it is so then using alert window pops
<option value="2">Laptop</option>
up and display the message suggesting user to select
<option value="3">Server</option>
<option value="1">Monitor</option> some item.
<option value="1">iPad</option>
6.4.4 Floating Menu
</select>
<p> The JavaScript allows to create dynamic menus which
<input type="submit" value="Submit" /> move along with scrolling. Such floating menu will be
<input type="reset" />
always visible on screen.
</p>
</form> They appear to "float" on top of the page as you scroll.
</body> For example –
</html>
Output
Client Side Scripting Language 6 - 11 Menus, Navigation and Web Page Protection

6.4.5 Chain Select Menu


Chain Select Menu is a kind of menu in which there
are more than one set of menus and options selected
from the first pulldown menu determines the options
for second pulldown menu and options of second
pulldown menu determines the options for third
pulldown menu.

In above case if we select the country as India,the


various states of India will dislayed. If we select
This menu is also called as context menu.
Maharashtra as state then in the third menu only Cities
in Maharashtra state will be displayed. 6.4.8 Sliding Menu
These menus are basically off-screen elements that slide
6.4.6 Tab Menu
into view when you click or tap on something that looks
Tab menus display a one- or two-word description of
like an arrow, a hamburger icon, or something else that
the menu option within a tab.
indicates a menu will appear. For example - When you
A more complete description is displayed below the decide to bring up the menu (clicking/tapping on the
tab bar as the visitor moves the mouse cursor over the circle as is the case in our example), the menu magically
tab. Following fig. represents the tabbed menu. slides into view :

6.4.9 Highlighted Menu


When the visitor moves the cursor over a menu item,
6.4.7 Popup Menu the browser displays a box around the item with a
The popup menu contains lower-level menu items that shadow at the bottom of the box. If the visitor selects
are associated with the top-level menu item. The popup the item, the highlight shadow appears at the top of
menu appears as you move mouse over each menu item. the box rather than at the bottom of the box. The
For example – highlighted menu is ideal to use to identify a menu
option before the visitor actually makes a selection.
Client Side Scripting Language 6 - 12 Menus, Navigation and Web Page Protection

6.4.10 Folding a Tree Menu

It is a classic menu used in desktop applications. This


menu helps to navigate file folders. This tree consists of
one or more closed folders each of which appears
alongside the folder’s name

6.4.12 Scrollable Menu


Sometimes there is limited space on the web page for
displaying all the menu options. Then in such a case,
only limited menu options are displayed and
remaining options can be accessed by scrolling left or
right. Following is a sample scrollable menu.

6.4.13 Side Bar Menu


The tree expands when user clicks a closed folder.
The side bar menu displays a menu on the side of the
6.4.11 Context Menu
web page. Options on this menu can be linked to other
The context menu is a menu that pops up when user web pages or to other menu options.
clicks right mouse button. The location of the context
menu is determined by the position of mouse.
For example –

Visitors can link to other menus by moving the mouse


cursor over a menu item. The menu that is associated
with that item pops onto the screen.
Moving the cursor away from the menu item closes the
popup menu, and the side bar menu remains on the
screen.
Client Side Scripting Language 6 - 13 Menus, Navigation and Web Page Protection

6.5 Protecting Web Page


 It is possible to view the source code of some developed web site using the right clicking and choosing
View Source Code option. This way many new developers get the ideas of writing HTML and
JavaScript.
 However, this is not an appropriate practice as it leads to the tendency of borrowing the work of
someone else without permission. Thus it is essential to protect your web page.
 There are two ways of protecting your web page –
(1) Disabling the right mouse button
(2) Storing the JavaScript on Web server.
Ex. 6.5.1 : Write a JavaScript that disables the right click button and displays the message ‘Right click button is
disabled’
Sol. :
<!DOCTYPE html>
<html>
<head>
<title>Locking the Right Mouse Button</title>
<script language=JavaScript>
function RightClickDisable()
{
alert('Not allowed to right click');
return false;
}
function InternetExploreBrowser()
{
if (event.button==2)
{
RightClickDisable();
return false
}
}
document.oncontextmenu=new Function("RightClickDisable();return false")
</script>
</head>
<body>
<h1> This is a sample web page</h1>
<h4> Test disability of right click button by clicking right button</h4>
</body>
</html>
Output
Note that if we right click on the web page, then the message about the disability of right click button is
represented.

6.6 Frameworks of JavaScript and its Application


 A JavaScript framework is an application framework written in JavaScript.
 It differs from a JavaScript library in its control flow:a library offers functions to be called by its
parent code, whereas a framework defines the entire application design.
 A developer does not call a framework; instead it is the framework that will call and use the code in
some particular way.
 For examples : AngularJS, Ember.js, Meteor.js.

You might also like