Msbte polytechnic 22519 CSS Ch 6 By Syed Ateeq.pdf

Chapter 6
Menus, Navigation And Web
Page Protection
Presented by
Syed Ateeq

STATUS BAR
3
 The status bar is found at the bottom of the window. It
normally displays the current status of the document
being loaded.
 JavaScript can be used to display messages in the status
bar. Status bar is the message bar at the bottom of your
window.
 When you move your mouse over an HTML link, the
URL .appears in the status bar. You may have seen
pages that use JavaScript to turn this status bar into a
scrolling marquee.
 The status property belongs to window object and this
property does not work in default, configuration of IE
(Internet Explorer), Firefox, Chrome, Safari or Opera
15+. Presented By: Syed Ateeq

STATUS BAR
4
 Most (newer) major browsers disable status bar
messages by default. If your status bar doesn't change
when you hover over the link, it's probably because of
default settings.
 To display some text on status bar, we can create a child
window inside main window for implementation of
showing static text, showing moving text etc.
 Builds a Static Message:
 Status Bar is located at the bottom of the browser and is
used to display a short message to visitors of web page.
 To display message on status bar, you will need to
assign the message to the status property of window
object.
window.status=“Hello”; Presented By: Syed Ateeq

STATUS BAR
5
 As we are creating child window inside main window
so set the status property of child window as:
winObj.status=“Hello”;
 Example:
<html>
<head>
<script>
function showStatus()
{
winObj=window.open("HelloJs.html","WindowName",
"toolbar=0, status=1, menubar=1,innerHeight=100,
innerWidth=100");
winObj.status="Hello";
} Presented By: Syed Ateeq

STATUS BAR
6
</script>
</head>
<body onLoad="showStatus()">
</body>
</html>
Presented By: Syed Ateeq

Changing the Message using Rollover
7
 As 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.
 In following example, we have create a child window
with one button and when user will move mouse over
the button then the status message of window get
changed.
<html>
<body>
<script>
WinObj=window.open("HelloJs.html","WindowName",
"toolbar=0, status=l, menubar=l,width=100,
height=100"); Presented By: Syed Ateeq

Changing the Message using Rollover
8
WinObj.status="hello";
WinObj.document.write('<input type="button"
name="aButton" value="Click Me"
onMouseOver="WinObj.status="hi";return true;" />');
</script>
</body>
</html>

Moving the Message along Status Bar
9
 You 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 looks to ripple across the status bar
continuously when the visitor looks around web page.
Movement of the message doesn't stop even during
rollovers.

BANNER
10
 Banners are generally used for display advertising. The
purpose is to promote brand.
 Banner advertisements are image based rather than text
based and are popular form of website advertising. It
will redirect user to advertiser’s website.
 Most of banners are in GIF, JPG or TIF. GIF may
consist of series of images in one file rotating
continuously.
 Some advertisements may use flash but it needs flash
plugins in that browser.
 Banner adds can be static or animated Banners are
mostly placed at top to catch attention of visitors.

BANNER
11
 Loading And Displaying Banner Advertisements:
 Steps to include Banner Advertisement are:
 Step 1: Create several banner advertisements using
graphics tool such as Photoshop.
 Step 2: Create an <img> element in your web page with
height and width necessary to display banner
advertisement.
 Step 3: Build a javascript that loads and display banner
advertisements in conjunction with <img> element.
<html>
<head>
<title>Banner Ads</title>
<script language="Javascript" type="text/javascript">
Banners=new Array('first.jpg' , 'second.jpg', 'third.jpg');

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

BANNER
13
</script>
</head>
<body onload="rotate()">
<center>
<img src="first.jpg" width="300" height="400"
name="img1"/>
</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.

SLIDESHOW
14
 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 A Slide Show:
 We can create a slide show of images in JavaScript.
 To create slide show, we need to create an array of
image locations.
 Path of image from array is used to display next image
on screen.
 We can change path of image on specific time interval.

Creating A Slide Show
15
<html>
<head>
<script>
img_array=new Array('banner1.jpg', 'banner2.jpg',
'banner3.jpg', 'banner4.jpg');
img=0;
function display(num)
{
img=img+num;
if(img>img_array.length-1)
{
img=0;
}

16
if(img<0)
{
img=img_array.length-1;
}
document.Slide.src=img_array[img];
}
</script>
</head>
<body>
<img src="banner1.jpg" width="400" height="420"
name="Slide"/>
</br></br>
<input type="button" value="Previous"
onclick="display(-1)"> Presented By: Syed Ateeq

17
<input type="button" value="Next“
onclick="display(1)“ >
</body>
</html>

MENUS
18
 Menu element represents group of commands that a
user can perform or activate.
 Menu may contain multiple choices to select. User can
choose one or more menu at a time depending on type
of menu.
 Creating a Pull Down Menu:
 Website is a collection of multiple web pages. So there
should be a proper navigation between pages.
 Menu is used to navigate through website.
 Menu contains various items which perform related
operations such as opening a new webpage, displaying
related information, etc.
 There are many types of menus available like pulldown

MENUS
19
 menu, floating menu, chain select menu, tab menu,
sliding menu, pop up menu, scrollable menu, etc.
 Pulldown menu can be created by using <select> tag of
HTML.
 The <option> tag is used to define options of pulldown
menu. <option> tag is written inside <select> tag.
<html>
<script>
function getSelectedItem()
{
var ele = document.getElementById("select");
var str = ele.options[ele.selectedIndex].value;
alert("The selected value is: " + str);

MENUS
20
</script>
<body>
<select id="select">
<option value="C"> C </option>
<option value="C++"> C++ </option>
<option value="Java"> Java </option>
<option value="JavaScript"> JavaScript </option>
</select>
<button onclick="getSelectedItem();"> Get Selected
Item </button>
</body>
</html>

Dynamically Changing Menu
21
 Item of menu can be changed dynamically depending
on any action taken place.
 One contains class name and other contains subject.
 So on selection of first menu, other menu item is
changed.
<html>
<head>
<script>
sy_sub=new Array("OOP","CGR","DSU","DMS","DTE");
ty_sub=new Array("EST","OSY","STE","AJP","CSS");
function myFun(sub)
{
var select=document.getElementById("student");

22
var s = select.options.length;
for(i=s;i>=0;i--)
{
select.options.remove(i);
}
var x = document.getElementById("mySelect").value;
if(x=="syco")
{
for(i=0;i<sy_sub.length;i++)
{
opt=document.createElement("option");
opt.value=sy_sub[i];
opt.textContent=sy_sub[i];

23
select.appendChild(opt);
}
}
else if(x=="tyco")
{
for(i=0;i<ty_sub.length;i++)
{
opt.value=ty_sub[i];
opt.textContent=ty_sub[i];
}
}

24
else if(x=="class")
{
opt.value="class";
opt.textContent="Subjects";
}
}
</script>
</head>
<body>
<select id="mySelect" onchange="myFun(this)">
<option value="class"> Class </option>

25
<option value="syco"> SYCO </option>
<option value="tyco"> TYCO </option>
</select>
<select id="student" name="student">
<option value="0"> Subjects </option>
</select>
</body>
</html>

Validating Menu Selection
26
 Purpose of menu is to present set of options to visitor
and most of time dropdown menus are used in
registration form.
 Before submitting any form to server, it is necessary to
validate whether user have provided necessary
information on registration form or not.
 This necessary information on registration can be in the
form of text or menu item selection.
<html>
<head>
<script>
function myfun()
{

27
var x = document.getElementById("myselect").value;
if(x=="Select Subject")
{
alert("Please select a subject");
}
else
{
document.getElementById("demo").innerHTML="You
selected:"+x;
}
}
</script>
</head>

28
<body>
<select id="myselect">
<option value="Select Subject">Select
Subject</option>
<option value="OOP">OOP</option>
<option value="CGR">CGR</option>
<option value="DMS">DMS</option>
<option value="DSU">DSU</option>
<option value="DTE">DTE</option>
</select>
<br>
<input type="button" value="Submit"
onclick="myfun()">
<br> Presented By: Syed Ateeq

29
<p id="demo"></p>
</body>
</html>

Floating Menu
30
 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 hidden.
 The javascript allows us to create dynamic menus which
move along with scrolling. Such floating menu will be
always visible on screen.
 Creating a floating menu is very simple and quite
painless.
 The operative code is position 'fixed'. The effect is
achieved by moving an absolutely-positioned or
relatively-positioned <div> container which containing
the menu.

Floating Menu
31
 Following example creates a floating menu where the
menu stays fixed in same position on the web page
while visitor scroll down the page.
 The style is applied on <div> container where the
position, width, height, background and z-index
property are specified.
 An element with greater z-index is always placed in
front of another element with lower z-index.
 A floating navigation menu, sometimes called a sticky
navigation menu, is a menu that stays visible on the
page even as you scroll down
<html>
<head>
<title> Menu </title> Presented By: Syed Ateeq

Floating Menu
32
</head>
<body>
<div style="position:fixed;width:200px;height:50px;
top:10px; right:10px;
background:blue;
z-index:100">
Floating Menu.
</div>
<br><br><br><br><br><br><br><br><br><br><br><b
r><br><br>
This is a long web page
r><br><br>
This is a long web page Presented By: Syed Ateeq

Floating Menu
33
r><br><br>
r><br><br>
</body>
</html>

Chain Select Menu
34
 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.
 Chained Selects lets you "chain" multiple form select
lists together so that the selection in a "parent“ list can
tailor the options available in a "child" list.
 Chained Selects supports unlimited number of form
select lists in a chain. Presented By: Syed Ateeq

Tab Menu
35
 Tab Menu 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.
 There are 2 following ways of creating tabbed area.
1) Using Radio Button: Only one radio button can be
selected from same group of radio buttons. We can take
same idea and create tabbed area using radio buttons as
tabs. Using this method we can avoid javascript
completely.
2) Using Target Selector: This is the most preferred way
of creating tabbed area. In this method we have to make
use of JavaScript code for better user experience.

Tab Menu
36
<html>
<style>
.tabs .tab
{
float:left;
margin-right:10px;
}
.content
{
position:absolute;
background-color:white;
width:100%;
left:0px;

Tab Menu
37
.tabs .tab .content
{
z-index:1;
}
.tab:target a
{
font-weight:bold;
}
.tab:target .content
{
z-index:1;
}
</style>
<body> Presented By: Syed Ateeq

Tab Menu
38
<div class="tabs">
<div class="tab" id="tab1">
<a href="#tab1">Tab 1</a>
<div class="content">
Content of Tab 1
</div>
</div>
<div class="tab" id="tab2">
Content of Tab 2
</div>
</div>
<div class="tab" id="tab3"> Presented By: Syed Ateeq

Tab Menu
39
Content of Tab 3
</div>
</div>
</div>
</body>
</html>

POP UP MENU
40
 A popup menu displays several parent (top level) menu
items.
 A popup menu appears as the visitor moves the mouse
cursor over a parent menu item.
 The popup menu contains child menu Items that are
associated with the parent menu item.
 An item in menu can be activated either onmouseover
or onclick event. This is an extremely versatile drop
down menu script for ordinary links on your page.
 Popup menu allows you to associate a dynamic menu
with regular links on your page including image links.
As the mouse moves over the specified link. a menu
pops up containing "sub links".

POP UP MENU
41
 We are using a container element (<div>) which consist
of a button and when user will perform onmouseover
event on the button then a popup menu appears.
 One can use any element to open the dropdown menu,
for example. a <button>, <a > or <p > element.

Pop Up Menu
42
<html>
<head>
<style>
.dropbtn
{
background-color:Green;
color:white;
padding:16px ;
font-size:16px;
border:none;
}
.dropdown
{

Pop Up Menu
43
position:relative;
display:inline-block;
}
.dropdown-content
{
display:none;
position:absolute;
background-color:white;
min-width:160px;
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
z-index:l; }
.dropdown-content a
{

Pop Up Menu
44
color:black;
padeling:12px 16px;
text-decoration:none;
display:block;
}
.dropaown-content a:hover{background-color:gray;}
.dropdown:hover .dropdown-content{display:block;}
.dropdown:hover .dropbtn{background-color:Blue;}
</style> </head>
<body>
<h2>Pop up Menu</h2>
<p>Move the mouse over the button to open the
dropdown menu.</p>

Pop Up Menu
45
<div class="dropdown">
<button class="dropbtn">Dropdown<button>
<div class="dropdown-content">
<a href="#">Link l</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>

Sliding Menu
46
 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.
 Here, the block pulls to the right, dragging along with it
the hidden menu, when the user clicks on a menu toggle
button on right side of page.
 The hidden menu can contain menu names and options.
 Menu names describe a group of menu options. Menu
options are selectable by the visitor.
 The block pulls to the left, closing the menu, whenever
user again click on menu toggle button on right side of
page.

Sliding Menu
47
<html>
<head>
<title> Sliding Menu </title>
<Style>
*{padding:0; margin:0;}
body{font-family:sans-serif;}
a{text-decoration:none; color:black;}
li{list-style-type:none;}
nav{width:100%;text-align:center;}
nav a{
display:block;
padding:15px 0;
border-bottom:1px solid #C3AA6E;
color:#F0EADC; } Presented By: Syed Ateeq

Sliding Menu
48
nav a:hover{background:blue;color:black;}
nav li:last-child a{border-bottom:none;}
.menu
{
width:240px;
height:100%;
position:absolute;
background:Blue;
left:-240px;
}
.menu-icon
{
padding:10px 20px;
background:blue; Presented By: Syed Ateeq

Sliding Menu
49
color:black;
cursor:pointer;
float:right;
margin:6px 6px 0 0;
border-radius:5px;
}
#menuToggle{display:none;}
#menuToggle:checked ~ .menu
{position:absolute; left:0;}
</style>
</head>
<body>
<input type="checkbox" id="menuToggle">

Sliding Menu
50
<label for="menuToggle" class="menu-
icon">☰</label>
<nav class="menu">
<ul>
<li><a href="#">FILE</a></li>
<li><a href="#">EDIT</a></li>
<li><a href="#">VIEW</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</nav>
</body>
</html>

Highlighted Menu
51
 Sometimes when we move mouse on specific element
then we could not able to figure out which element is
triggering a specific function we can solve this problem
by highlighting the menu items when they get selected.
 We can highlight menu items by following two ways:
 1. When the visitor perform onmouseover() event over a
menu item, the browser displays a box around the item
with a shadow at the bottom of the box.
 2 When the visitor performs on Onclick() event on the
menu item, highlighted shadow appears at the top of the
box rather than at the bottom of the box.

Highlighted Menu
52
<html>
<head>
<style>
.link{
padding:10 px 16px;
background-color:gray;
font-size:18px;
}
.active, .link:hover{
background-color:red;
color:white;
}
</style> Presented By: Syed Ateeq

Highlighted Menu
53
</head>
<body>
<hl>Highlighted Menu</hl>
<p>Move the mouse over the menu items.</p>
<div id="myDIV">
<a href="#file" class="link">File</a>
<a href="#edit" class="link">Edit</a>
<a href="#view" class="link">View</a>
<a href="#about" class="link">About</a>
</div>
</body>
</html>

Folding Tree Menu
54
 The folding tree menu also called as cascading tree
which look likes as a classic menu.
 Most of us have seen such type of menu in desktop
applications which help us to navigate file folders.
 The folding tree menu looks like a tree which consists of
one or more closed folders, each of these folders further
consist of some menu items.
 The tree expands when the visitor clicks on a closed
folder, showing one or more menu options that are
associated with the folder.

Folding Tree Menu
55
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=l">
<style>
ul, #myUL{
list-style-type:none;
}
#myUL{
margin:0;
padding:0;
}

Folding Tree Menu
56
.caret{
cursor:pointer;
user-select:none;
}
.caret::before{
content:"25B6";
color:black;
display:inline-block;
margin-right:6px;
}
.caret-down::before{
transform:rotate(90deg);
}

Folding Tree Menu
57
.nested{
display:none;
}
.active{
display:block;
}
</style>
</head>
<body>
<h2>Tree Menu</h2>
<ul id="myUL">
<li><span class="caret">Topics</span>
<ul class="nested">
<li>Topicl</li> Presented By: Syed Ateeq

Folding Tree Menu
58
<li>Topic2</li>
<li><span class="caret">Topic3</span>
<ul class="nested">
<li>Topic3.l</li>
<li>Topic3.2</li>
<li><span
class="caret">Topic3.3</span>
<ul class="nested">
<li>Topic3.3.1</li>
<li>Topic3.3.2</li>
<li>Topic3.3.3</li>
<li>Topic3.3.4</li>
</ul>
</li> Presented By: Syed Ateeq

Folding Tree Menu
59
</ul> </li>
</ul> </li>
</ul>
<script>
var
toggler=document.getElementsByClassName("caret");
var i;
for(i=0;i<toggler.length;i++){
toggler[i].addEventListener("click",function(){
this.parentElement.querySelector(".nested").classList.tog
gle("active");
this.classList.toggle("caret-down");
}); }
</script> </body> </html> Presented By: Syed Ateeq

Context Menu
60
 The context menu appears on the web page when the
visitor clicks the right mouse button on anywhere on the
screen.
 The location of the context menu on the screen is
determined by the position where visitor has performed
the right click operation on the screen.
 The mouse cursor sets the position of the upper-left
corner of the context menu. Once the visitor takes the
cursor away from the context menu, it becomes hidden.

Context Menu
61
<html>
<head>
<script>
var menuDisplayed=false;
var menuBox=null;
window.addEventListener("contextmenu",show,false);
window.addEventListener("click",hide,false);
function show()
{
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"; Presented By: Syed Ateeq

Context Menu
62
menuBox.style.display="block";
arguments[0].preventDefault();
menuDisplayed=true;
}
function hide()
{
if(menuDisplayed==true)
{
menuBox.style.display="none";
}
}
</script>
<style> Presented By: Syed Ateeq

Context Menu
63
.menu
{
width:150px;
border-style:solid;
border-width:1px;
border-color:grey;
position:fixed;
display:none;
}
.menu-item
{
height:20px;
}

Context Menu
64
.menu-item:hover{
background-color:#6CB5FF;
cursor:pointer;}
</style> </head>
<body>
<h3>Right click on screen to view Context Menu</h3>
<div class="menu">
<div class="menu-item">Facebook</div>
<div class="menu-item">Twitter</div> <hr>
<div class="menu-item">Google</div>
<div class="menu-item">Bing</div>
</div>
</body>
</html> Presented By: Syed Ateeq

Scrollable Menu
65
 Sometimes you want to present many options to the
visitors but the space on webpage is limited in such
situation one can make use of scrollable menu.
 Scrollbar is different from other menu as it provides two
arrowheads which appear at top-right and bottom-right
ends of the visible menu.
 Initially, the scrollable menu displays a limited number
of menu item across the web page but by using two
arrowheads which appears on right side of dropdown
menu we can select an appropriate menu item.

Scrollable Menu
66
<html>
<head>
<style>
div.scrollmenu
{
background-color:yellow;
white-space:nowrap;
div.scrollmenu a
{
display:inline-block; /*display horizontal*/
text-align:center;
</style>
</head> Presented By: Syed Ateeq

Scrollable Menu
67
<body>
<div class="scrollmenu">
<a href="#file">File</a>
<a href="#edit">Edit</a>
<a href="#view">View</a>
<a href="#about">About</a>
<a href="#navigator">Navigate</a>
<a href="#source">Sourcec</a>
<a href="#refactor">Refactor</a>
<a href="#run">Run</a>
<a href="#debug">Debug</a>
<a href="#profile">Profile</a>
<a href="#team">Team</a>
<a href="tools">Tools</a> Presented By: Syed Ateeq

Scrollable Menu
68
<a href="#windows">Windows</a>
<a href="#help">Help</a>
</div>
<h2>horizontal Scrollable Menu<h2>
<p>Resize the browser window to see the effect.</p>
</body>
</html>

Side Bar Menu
69
 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.
 Side menu is different from other menus as the side bar
menu remains on the screen while moving the cursor
away from the menu item closes the popup menu and
context menu.
 In following example body of html page is divided into
two <div> containers where first container consists of
side bar menu and second container consists of text.
 On first container, styling is applied on:
 1. sidebar where height, width, position and background
color are specified.

Side Bar Menu
70
 2. <a>tag styled with no underline below the hyperlink,
fontsize and color and direction.
 3. what will be color when mouse will hover over the
<a> tag is also specified.
 On second container, left margin is specified which is
equal to the width of the sidebar menu.

Side Bar Menu
71
<html>
<head>
<style>
.sidebar
{
height:100%;
width:160px;
position:fixed;
background-color:black;
padding-top:16px;
}
.sidebar a
{
text-decoration:none; Presented By: Syed Ateeq

Side Bar Menu
72
font-size:20px;
color:blue;
display:block; /* Display Vertical */
}
.sidebar a:hover{
color:white;
}
.main {
float:right;
margin-left:l60px; /*same as the width of the
sidebar*/
padding:0px 10px;
}
</style> Presented By: Syed Ateeq

Side Bar Menu
73
</head>
<body>
<div class="sidebar">
<a href="#home">Home</a>
<a href="#departments">Departments</a>
<a href="#achievements">Achievements</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h2>Sidebar Menu</h2>
</div>
</body>
</html>

PROTECTING WEB PAGE
74
 As already we have seen security concerns of JavaScript
and we are aware that anyone with a little computer
knowledge can use a few mouse clicks to display your
HTML code , including your JavaScript code on the
screen.
 Although you cannot entirely prevent intruders to view
our web page, but can take a few steps to stop all but the
best computer wizards from gaining access to your
JavaScript.
 Hiding Your Source Code
 Every developer has to admit that, on occasion , they
have peeked at the code of a web page by using right-
clicking on webpage and choosing "View Source" option
from the context menu. Presented By: Syed Ateeq

PROTECTING WEB PAGE
75
 Hiding Your Source Code
<html>
<body>
<h3>Right click on screen, Context Menu is Enabled
</h3>
<br>
<h3>You can view Source of Webpage </h3>
</body>
</html>
 Hiding JavaScript
 Here we have used JavaScript code internally in html file
but this approach hampers the security of a web page
then he/she would also be able to view the source code

PROTECTING WEB PAGE
76
 Lets consider by any mean if intruder is able to view the
source of web page then he/she would also be able to
view JavaScript code which is embedded inside the page
also.
 So 1t is always recommended to write JavaScript code
inside external file in your webpage. In this case if he is
able to see source code but he would not be able to see
JavaScript Code.

<html>
<head>
<script type="text/javascript" language="Javascript"
src="mycode.js">
</script> Presented By: Syed Ateeq

PROTECTING WEB PAGE
77
<body>
<h3>Right click on screen, Context Menu is
disabled</h3>
</body>
</html>
// mycode.js
window.onload = function()
{
document.addEventListener("contextmenu",function(e)
{
e.preventDefault();
}, false);

Concealing E-mail Address
78
 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 spam-bots or
spam-crawler that surf the internet and look for email
addresses which are embedded inside the webpages.
 Your web site might be contributing in how much junk
mail you receive, especially if you include an email
address on your pages so we ourselves are the culprit
who invites the spammer to steal our email address from
webpages.

79
 The majority of spam bots crawl the net in search of e-
mail addresses in plain text such as:
me@mydomain.com
 During surfing over the internet such bot or crawler look
for two things:
 1. mailto: attribute that tells the browser the e-mail
address to u se when the visitor wants to respond to the
web page.
 2. the@ sign that is required for all e-mail addresses.
 One way of making it more difficult for a spam bot to
find your email address is to conceal your email address
within your page. This is where JavaScript comes in
useful; being a client side scripting language your scripts

80
 are sent to the client and left to their web browser to
execute. It is possible to write a script that gets the
browser to generate a mailto link with your e-mail
address in without sending it in plain text.
 Our job is to confuse the bots by using a JavaScript code
to generate the e-mail address dynamically.
 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.
 In following example rather than directly sending
me@mydomain.com. We conceal the e-mail address
using javascript and when user click on a button then a
mailto dialog box will appear . Presented By: Syed Ateeq

81
<html>
<head>
<script language="Javascript">
function makelink()
{
var str='mailto:';
str = str + String.fromCharCode(109,97,105,108, 116,
111, 58);
//first part of the address
str = str + String.fromCharCode(109,101);
//the at sign
str = str + String.fromCharCode(64);
//the domain part

82
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>

FRAMEWORKS OF JAVASCRIPT AND ITS APPLICATION
83
 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. JavaScript is a multi-paradigm
language.
 It supports event -driven, functional and object-oriented
and prototype-based programming styles.
 JavaScript is used for client side programming as well as
used as a server-side programming language.
 As technology advances everyday, there are various
framework available to work with javascript
Frameworks which are more adaptable and are preferred
by most of the website developers.

84
 Java Script frameworks are a type of tool that makes
working with JavaScript easier and smoother.
 Following are the most frequent and popularly used
framework used by programmer to code the application
as device responsive.
 1- AngularJS: Angular JS is one of the most powerful,
efficient, and open-source JavaScript framework.
 AngularJS framework is operated by the Google and is
basically implemented to use for developing Single Page
Application (SPA).
 It extends the HTML into the application and interprets
the attributes in order to perform data binding.
 Angular is full of useful features such as dependency
injection, templates, forms, and more.

85
 Advantages Of AngularJS:
 (i) It is fully extensible and works well with other
libraries.
 (ii) Every feature can be modified or replaced to suit
your unique development workflow and feature needs.
 (iii) Code production is comparatively fast.
 (iv) Every piece of application was easily testable.
 (v) Two way binding. It means changes in the backend
are immediately reflected on the UI.
 (vi) Angular JS improves server performance.
 (vii) Angular JS is highly testable. By allowing unit
testing and end-to- end testing, it makes testing and
debugging much simpler than you can imagine.

86
 2. ReactJS:
 React framework that was originally created, and is
maintained, by Facebook.
 React JS provides a huge weight on the scales when
choosing it for a project. It gives React a sense of
stability that many new frameworks lack.
 In fact, 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 easier.
 Advantages: virtual DOM which improves app
performance. It can be used on client and server side. It
can be used with other frameworks. It has readable
component and data patterns. Presented By: Syed Ateeq

87
 3. MeteorJS:
 The application area of Meteor (Meteor.js or MeteorJS)
serves the name itself since it is varied as it covers
almost major portion of software development.
 Meteor ships with a variety of Useful smart packages
readily available for all manner of uses, and allows the
inclusion of custom packages as well for those who wish
to create their own.
 Back-end development, management of the database,
business logic and rendering of the front-end part of
websites are a major area where meteor framework is
used. Presented By: Syed Ateeq

88
 Advantages Of MeteorJS :
 It is very simple and easy to understand.
 Meteor apps are real time by default.
 Official and community packages are huge time saver.
 Need only JavaScript for client and server development.
 4. Node.js:
 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
hence shows similar properties of JAVA like threading,
packages, forming of loops. Presented By: Syed Ateeq

89
 Advantages Of Node.js:
 Asynchronous and event driven.
 Very fast.
 Single threaded but highly scalable.
 No buffering.
 Backbone.js :
 It is one of the most famous JavaScript framework. It is
very easy to understand and learn. It can be used to
create Single Page Applications.
 This framework was made by keeping in mind the idea
that all server side functions must flow through an API,
which would help in achieving complex functionalities
by writing less code.

90
 Backbone is declining in popularity, perhaps due to its
age and minimalism, but it is still a relevant and
Powerful tool for the right needs.
 Advantages Of Backbone.js:
 Event driven communication between views and model.
 Syncing with back-end: When a mode changes, it
automatically updates the HTML of your application.
 Maintainability by following conventions.
 Allows creating client side web applications in well
structured and an organized format.

Msbte polytechnic 22519 CSS Ch 6 By Syed Ateeq.pdf

More Related Content

Similar to Msbte polytechnic 22519 CSS Ch 6 By Syed Ateeq.pdf (20)

Recently uploaded (20)

Msbte polytechnic 22519 CSS Ch 6 By Syed Ateeq.pdf