Scribd
Upload
11 views

Unit 6

Uploaded by

arshshaikh1617
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

Unit 6

Uploaded by

arshshaikh1617
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 52

Menus,

Navigation and
Web Page
Protection
Content

• Status Bar
• Banner
• Slide Show
• Menus
• Protecting Web Page
• Frameworks of JavaScript
Status Bar

• Status bar is the message bar at the bottom of your window.


• It normally displays the current status of the document being loaded.
• When we move our mouse over an HTML link, the URL appears in the
status bar.
• To display some text on status bar, we can create a child window inside
main window for implementation of showing static text or moving text etc.
• The status property belongs to window object.
<html>
<head>
<title>Builds a Static Message</title>
<script>
window.status="Client Side Scripting Language"
</script>
</head>
<body>
</body>
</html>
Changing the Message using Rollover

• In previous program we had set the static status message whenever the new
child window will be loaded. We can also change the message of status bar
on any specific event like onclick, onmouseover event.
<html>
<head>
<title>Builds a Static Message</title>
<a onmouseover="window.status='Client Side Scripting Language'";return true
onmouseout="window.status='Hello'";return true>
CSS</a>
</head>
<body>
</body>
</html>
Moving the Message along the Status Bar

• We can show any message on the status bar by displaying letters


individually and giving the message a movement. To give a movement to
message need to use window.setTimeout() method where we can set the
time after which individual letter should appear on scrollbar.
• The message then appears to ripple across the status bar continuously while
the visitor looks around the web page. Movement of the message doesn't
stop even during rollovers.
<html>
<head>
<title>Javascript ScrollText</title>
<script language="javascript">
msg="This is an example of scrolling message";
spacer="............ .............";
pos=0;
function ScrollMessage()
{
window.status=msg.substring(pos,msg.length)+spacer+msg.substring(0,pos);
pos++;
if(pos>msg.length)
pos=0;
window.setTimeout("ScrollMessage()",100);
}
ScrollMessage();
</script>
</head>
<body>
<p>Scrolling Message Example</p>
<p>Look at the status line at the bottom of the page</p>
</body>
</html>
function scrollOut
{
WinObj.status=Message.substring(place,Message.length);
if(place>=Message.length)
{
place=1;
window.setTimeout("scrollIn()",100);
}
else
{
place++;
window.setTimeout("scrollOut()",50);
}
}
</script>
</body>
</html>
Banner
• Banner are generally used for display advertising. The purpose of banner
advertising is to promote a brand.
• Banner advertisements are image based rather than text based and are popular
form of website advertising. The purpose of banner advertising is to promote a
brand and to get visitors from the host website to advertiser's website.
• All banner advertisements are in a file format such as a GIF, JPG, TIFF, or other
common graphic file formats.
• Animated GIFs, which is a series of images contained in one fi le that rotate
automatically on the screen.
• Banner ads can be static or animated, depending on technology used to make
them. They are placed near the top of the web page.
Loading and Displaying Banner Advertisements

• To include a banner advertisement in a web page, you need to follow given


steps:
1. Create several banner advertisements using a graphics tool such as
Photoshop. You'll want to make more than one advertisement so you
can rotate them on your web page using a JavaScript.
2. Create an <img> element in your web page with the height and width
necessary to display the banner advertisement.
3. Build a JavaScript that loads and displays the banner advertisements
in conjunction with the <img> element.
<html>
<head>
<script language="Javascript">
MyBanners=new Array('CSS.jpg','CSS1.jpg','OSY.jpg','STE.jpg')
banner=0
function ShowBanners()
{
if (document.images)
{
banner++
if (banner==MyBanners.length)
{
banner=0}
document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<img src="banner1.jpg" width="400" height="800" name="ChangeBanner"/>
</center>
</body>
</html>
Linking Banner Advertisements to URLs
• You can link a banner advertisement to a web page by inserting a hyperlink into
your web page that calls a JavaScript function rather than the URL of a web
page.
• The JavaScript then determines the URL that is associated with the current
banner and loads the web page that is associated with the URL.
• We are extending the previous example where <img> tag is used inside <a> tag
which creates image as hyperlink.
<html>
<head>
<title> Banner Ads </title>
<script language="Javascript">
Banners=new Array('CSS.jpg','CSS1.jpg','OSY.jpg','STE.jpg')
count=0
BannerLink=new Array(‘Client-Side-Scripting/’,’Client-Side-Scripting/’,’Operating-System/’,’Software-Testing/’,)
function LinkBanner()
{
document.location.href=“http://msbte-org.in”+BannerLink[count]
}
function rotate()
{
if (document.images)
{
count++
if (count==Banners.length)
{
count=0
}
document.img1.src=Banners[count]
setTimeout(“rotate()",3000)
}
}
</script>
<body onload=“rotate()">
<center>
<a href =“javascript: LinkBanner()“>
<img src=“CSS.jpg” width="400" height="800" name=“img1"/>
</a>
</center>
</body>
</html>
SlideShow

• A slideshow is similar to a banner advertisement in which multiple images


rotates a <img> element on the web page.
• A slideshow gives the visitor the ability to change the image that's
displayed: the visitor can click the Forward button to see the next image
and the Back button to see the previous image.
• Create a<img> tag and two buttons for navigation between images.
• Create a javascript function with on parameter to display previous and
next images.
<html>
<head>
<title> Slide Show </title>
<script language="Javascript">
pics=new Array('CSS.jpg','CSS1.jpg','OSY.jpg','STE.jpg')
count=0
function SlideShow(status)
{
if (document.images)
{
count=count+status
if (count>(pics.length-1)
{
count=0
}
if(count<0)
{
count=pics.length-1
}
document.img1.src=pics[count]
}
}
</script>
</head>
<body>
<img src=“CSS.jpg” width="400“ alt=“” height="800" name=“img1"/>
<br>
<input type=“button” value=“Next” onclick=“SlideShow(1)”>
<input type=“button” value=“Back” onclick=“SlideShow(-1)”>
</body>
</html>
Menus

• A menu consist of a set of options which are presented to the user of a


computer to help the user find information or execute a program function.
• Menus are common in Graphical User Interfaces (GUIs) such as Windows or
the Mac OS.
• Simplify navigation by using menus to organize web pages so visitors can
easily explore their site with a few clicks of the mouse.
• Use menus in a form to collect information from visitors by prompting visitors
to choose items from a list of options.
Creating Pull-Down Menu
• Group web pages into a pull-down menu. The menu can reflect a common
theme among web pages, and each menu option can identify a web page.
<html >
<head>
<title>Pull Down Menu</title>
<script language="Javascript" type="text/javascript">
<!--
function DisplayPage(Choice)
{
Page = Choice.options[Choice.selectedIndex].value
if (Page != "")
{
window.location = Page
}
}
-->
</script>
</head>
<body onload="document.Form1.MenuChoice.selectedIndex=0">
<form action="" name="Form1">
<select name="MenuChoice"
onchange="DisplayPage(this)">
<option>Websites</option>
<option value=“https://www.google.co.in">Google</option>
<option value="https://msbte.org.in">Msbte</option>
<option value=“https://www.yaoo.co.in”>Yahoo</option>
</select>
</form>
</body>
</html>
Dynamically Changing a Menu
• The set of options dynamically change based on choices the visitor makes on
the page.
• In this way, one menu can be used to display different sets of options, reducing
the need to show too many menus on a web page.
<html>
<head>
<title>Dynamically Changing Menu Options</title>
<script language="Javascript" type="text/javascript">
<!--
compemp = new Array('Atul','Ashish','Arun')
mechemp = new Array('Mahesh','Vaibhav', 'Omkar')
function GetEmp(branch)
{
// clear out the current options
for(i=document.Form1.Employees.options.length-1;i>0; i--)
{
document.Form1.Employees.options.remove(i)
}
Dept = branch.options[branch.selectedIndex].value
if (Dept != "") {
if (Dept == '1'){
for (i=1; i<=compemp.length;i++) {
document.Form1.Employees.options[i] =
new Option(compemp[i-1])
}
}
if (Dept == '2'){
for (i=1; i<=mechemp.length;i++) {
document.Form1.Employees.options[i] =
new Option(mechemp[i-1])
}
}
}
}
-->
</script>
</head>
<body onload="document.Form1.DeptList.selectedIndex=0">
<form action="" name="Form1">
<select name="branch" onchange="GetEmp(this)">
<option value="0">Department</option>
<option value="1">Computer</option>
<option value="2">Mechanical</option>
</select>
<select name="Employees">
<option value="0">Employees</option>
</select>
<br>
<p>
<input type="submit" value="Submit" />
<input type="reset" />
</p>
</form>
</body>
</html>
Validating Menu Selections

• A common problem when using a menu to collect information from a visitor is


that the visitor doesn't select an item from the menu before submitting the form.
• Solve this problem by using a JavaScript to determine whether the required
menu option was selected after the visitor clicks the Submit button and before
the form is submitted to the server.
• Need to know whether the form can be submitted to the server when the visitor
clicks the Submit button. You determine this by defining a JavaScript function
that validates the submission.
<html><head>
<title>Validate A Menu Selection</title>
<script language="Javascript" type="text/javascript">
<!--
function ValidateForm(choice)
{
ch = choice.Fruits.selectedIndex
if (choice.Fruits.options[ch].value == "")
{
alert('Please select a Fruit.')
return false
}
return true
}
-->
</script></head>
<body>
<form onsubmit="return ValidateForm(this)" action="" name="Form1">
<select name="Fruits">
<option value="">Fruits Name</option>
<option value="0">Apple</option>
<option value="1">Banana</option>
<option value="2">Orange</option>
<option value="3">Mango</option>
<option value="4">Papaya</option>
</select>
<br>
<p>
<input type="submit" value="Submit" />
<input type="reset" />
</p>
</form>
</body>
</html>
Floating Menu

• Some of the show-stopping menus that you've seen on top commercial web sites
are built using Dynamic HTML (DHTML). DHTML is a combination of HTML,
cascading style sheets (CSS), and JavaScript that together enable you to build
classy menus.
• 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.
• The javascript allows us to create dynamic menus which move along with the
scrolling called floating menus. They are always visible on the screen.
• The operative code is position ‘fixed’.
<html><head>
<title>Menu</title>
</head>
<body>
<div style="position:fixed; width:80px; height:20px; top:10px; right:30px; background:blue; z-index:100">
<select name="Fruits">
<option value="">Fruits Name</option>
<option value="0">Apple</option>
<option value="1">Banana</option>
<option value="2">Orange</option>
<option value="3">Mango</option>
<option value="4">Papaya</option>
</select>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br>
This is a long web page
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br>
This is a long web page
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br>
</body>
</html>
Chain Select Menu
• Xin Yang developed a chain of pull-down menus in which the 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.
<html>
<head>
<title>Dynamically Changing Menu Options</title>
<script language="Javascript" type="text/javascript">
<!--
compemp = new Array('Atul','Ashish','Arun')
mechemp = new Array('Mahesh','Vaibhav', 'Omkar')
function GetEmp(branch)
{
// clear out the current options
for(i=document.Form1.Employees.options.length-1;i>0; i--)
{
document.Form1.Employees.options.remove(i)
}
Dept = branch.options[branch.selectedIndex].value
if (Dept != "") {
if (Dept == '1'){
for (i=1; i<=compemp.length;i++) {
document.Form1.Employees.options[i] =
new Option(compemp[i-1])
}
}
if (Dept == '2'){
for (i=1; i<=mechemp.length;i++) {
document.Form1.Employees.options[i] =
new Option(mechemp[i-1])
}
}
}
}
-->
</script>
</head>
<body onload="document.Form1.DeptList.selectedIndex=0">
<form action="" name="Form1">
<select name="branch" onchange="GetEmp(this)">
<option value="0">Department</option>
<option value="1">Computer</option>
<option value="2">Mechanical</option>
</select>
<select name="Employees">
<option value="0">Employees</option>
</select>
<br>
<p>
<input type="submit" value="Submit" />
<input type="reset" />
</p>
</form>
</body>
</html>
Tab Menu
• Tab menus display a one- or two-word description of the 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.
• E.g. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs
Popup Menu
• A popup menu displays several top-level menu items. A popup menu appears as
the visitor moves the mouse cursor over a top-level menu item. The popup
menu contains lower-level menu items that are associated with the top-level
menu item.
• E.g. https://www.w3schools.com/howto/tryit.asp?
filename=tryhow_css_js_dropdown
Sliding Menu
• The Slide-in menu appears as a vertical block that floats on the left side of the
web page. It seems to come alive when the visitor moves the mouse cursor over
the block or on a specific control over the page.
• These menus are basically off-screen elements that slide into view when you
click or tap on something that looks like an arrow, a hamburger icon, or
something else that indicates a menu will appear.
• E.g. https://www.kirupa.com/html5/creating_a_smooth_sliding_menu.htm
https://www.w3schools.com/howto/tryit.asp?
filename=tryhow_js_navbar_slide
Highlighted Menu

• When we move mouse of a specific element then we could not able to figure out which
element is triggering a specific function.
• To solve this problem highlighting the menu items when they get selected.
• When the visitor moves the cursor over a menu item, the browser displays a box around
the item with a shadow at the bottom of the box.
• The visitor selects the item, the highlight shadow appears at the top of the box rather than
at the bottom of the box. The highlighted menu is ideal to use to identify a menu option.
E.g. http://www.dynamicdrive.com/dynamicindex1/highlightmenu2.htm
Folding Tree Menu

• The folding tree menu also called as cascading tree which look likes as a classic
menu.
• The Folding tree menu looks like a tree consists of one or more closed folders,
each of which appears alongside the folder's name. You can include as many
folders as your web site requires.
• The tree expands when the visitor clicks a closed folder, showing one or more
menu options that are associated with the folder.
E.g. http://www.dynamicdrive.com/dynamicindex1/navigate1.htm
Context Menu

• The context menu pops up on the web page when the visitor clicks the right
mouse button.
• The location of the context menu on the screen is determined by the position of
the mouse cursor. The mouse cursor sets the position of the upper-left corner of
the context menu.
• The context menu is hidden from the screen by clicking the mouse cursor away
from the menu.
E.g. http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm
Scrollable Menu

• Sometimes you want to present many options to the visitors but the space on webpage
is limited.
• In such situation, the scrollable menu is the solution to your problem.
• Scrollbar provide two arrowheads that two arrowheads appear at both ends of the
visible list of menu items. Visitors can simply move the mouse cursor over one of the
arrowheads and the browser automatically scrolls the menu in the direction of the
arrowhead.
E.g. http://www.dynamicdrive.com/dynamicindex1/scrollerlink.htm
Side Bar Menu

• The side bar menu displays a menu on the side of the web page. Options on this
menu can be linked to other web pages or to other menu options.
• 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.
E.g. http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm
Protecting Your Web Page

• Anyone with a little computer knowledge can use a few mouse clicks to display
your HTML code, including your JavaScript, on the screen.
• Although you cannot entirely prevent prying eyes from looking inside your web
page, you can take a few steps to stop all but the best computer wizards from
gaining access to your JavaScript.
• It is necessary to know how to hide your JavaScript and make it difficult for
malicious hackers to extract e-mail addresses from your web page.
Hiding Your Source Code
• Every developer has to admit that, on occasion, they've peeked at the code of a web page or two by right-
clicking and choosing View Source from the context menu.
• You cannot hide your HTML code and JavaScript from prying eyes, because a clever developer can
easily write a program that pretends to be a browser and calls your web page from your web server,
saving the web page to disk, where it can then be opened using an editor.
• 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.
• you can store your JavaScript on your web server instead of building it into your web page. The browser
calls the JavaScript from the web server when it is needed by your web page. Using this method, the
JavaScript isn't visible to the visitor, even if the visitor views the source code for the web page.
Disabling the Right Mouse Button

• The following example shows you how to disable the visitor's right mouse button
while the browser displays your web page. All the action occurs in the JavaScript
that is defined in the <head> tag of the web page.
• The JavaScript begins by defining the 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.
<html>
<head>
<script>
window.onload=function(){

document.addEventListener("contextmenu",function(e){ e.preventDefault();}, false);


}
</script>
<body>
<h3> Right click on screen, Context Menu is disabled</h3>
</body>
</html>
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.
• First you must tell the browser that the content of the JavaScript is located in an external
file on the web server rather than built into the web page. You do this by assigning the
file name that contains the JavaScripts to the src attribute of the <script> tag.
Webpage1.html:
<html>
<head>
<script src="code.js" language="Javascript" type="text/javascript">
</script>
<body>
<h3> Right click on screen, Context Menu is disabled</h3>
</body>
</html>

Code.js:
window.onload=function()
{
document.addEventListener("contextmenu",function(e){ e.preventDefault();}, false);
}
Concealing E-mail Address

• We all receive spam mail in our inbox and we think that such mails are sent by merchants but
how did they get our e-mail address. The reason behind this is our email addresses are
captured by Spam-Crawlers and Spam-Bots.
• 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.
• If visitors 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. Typically,
bots identify e-mail addresses in two ways:
• By the mailto: attribute that tells the browser the e-mail address to use when the visitor wants
to respond to the web page.
• By the @ sign that is required of all e-mail addresses.
• Your job is to confuse the bots by using a JavaScript to generate the e-mail address
dynamically. However, you'll still need to conceal the e-mail address in your JavaScript, unless
the JavaScript is contained in an external JavaScript file, because a bot can easily recognize
the mailto: attribute and the @ sign in a JavaScript.
• Bots can also easily recognize when an external file is referenced.
• To conceal an e-mail address, you need to create strings that contain part of the e-mail address
and then build a JavaScript that assembles those strings into the e-mail address, which is then
written to the web page.
<html>
<head>
<script language="Javascript" type="text/javascript">
Function makelink()
{
var str=‘mailto:’;
str=str+String.fromCharCode(109,97,105,108,116,111,58);
str=str+String.fromCharCode(109,101);
str=str+String.fromCharCode(64);
str=str+String.fromCharCode(109,121,100,111,109,97,105,110,46,99,111,109);
window.location.href=str;
</script>
</head>
<body>
<input type=“button” value=“send” onclick=“makelink()”>
</body>
</html>

https://www.w3resource.com/javascript-exercises/javascript-string-exercise-6.php
Frameworks of Javascript and Its Application
• A software framework is an abstraction in which software providing generic functionality can be selectively
changed by additional user-written code.
• JavaScript framework is an application framework written in JavaScript where the programmers can
manipulate the functions and use them for their convenience.
• JavaScript is a multi-paradigm language that supports event-driven, functional, and imperative (including
object-oriented and prototype-based) programming styles. JavaScript was initially used only for the client-
side. Now, JavaScript is used as a server-side programming language as well.
• JavaScript frameworks are a type of tool that makes working with JavaScript easier and smoother.
• Frameworks are more adaptable for the designing of websites, and hence, most website developers prefer
them.
• https://hackr.io/blog/best-javascript-frameworks
AngularJS

• One of the most powerful, efficient, and open-source JavaScript frameworks is Angular. Google
operates this framework and is implemented to use for developing a Single Page Application (SPA).
It extends the HTML into the application and interprets the attributes to perform data binding.
• Features
 Cross-Platform
 Speed and Performance
 Productivity
 Full Development Story
ReactJS

• Created by Facebook, the React framework has earned popularity within a short period. It is used to
develop and operate the dynamic User Interface of the web pages with high incoming traffic. It makes the
use of a virtual DOM, and hence, the integration of the same with any application is more straightforward.
• Features
 Declarative
 Virtual DOM
 Event handling
 JSX
 Performance
 React Native
 Component-Based
MeteorJS

• Meteor's application area (aka Meteor.js or MeteorJS) serves the name itself since it is varied as it covers
almost the significant portion of the software development. Uses of this framework include significant
areas like back-end development, management of the database, business logic, and rendering of the front-
end.
• Features
 Full-Stack Solution
 Development Ecosystem
 Isomorphic JavaScript Code
 Front-end Solution
 Database Integration
NodeJS

• Node.js is a server-side JavaScript run-time environment, which works on cross platforms and is open-source. The
framework is capable of driving asynchronous I/O with its event-driven architecture. It works in the JavaScript
Runtime environment and shows JAVA's similar properties like threading, packaging, o forming loops.
• Features
 It is swift
 I/O is asynchronous and Event-Driven
 Single-threaded
 Highly scalable
 No buffering
 Open source
 License
BackboneJS

• It is one of the most popular JavaScript frameworks. It is effortless to understand and learn. It can be used to create Single
Page Applications. The development of this framework involves the idea that all the server-side functions must flow
through an API, which would help achieve complex functionalities by writing less code.
• Features
 BackboneJS uses JavaScript functions, making the development of applications and the frontend in a much
easier.
 Building blocks such as models, views, events, routers, and collections are provided for assembling the client-
side web applications.
 It is a simple library that helps in separating business and user interface logic.
 It is a free and open-source library and contains over 100 available extensions.
 It is a backbone for any project and helps in the organization of the code.
 BackboneJS has a soft dependency on jQuery and a hard dependency on Underscore.js.
 It allows us to create client-side web applications or mobile applications in a well-structured and organized
format.

You might also like