6th Chapter of CSS

ClientSide
Scripting Language (MSBTE)

</head>
GHAP 6-2
Menus Navigation and Web Page

<body> Menus Navigation and Web Page Protection
6 Protection <h3><p> Buildings

</body>
static message in
slatus
UNIT VIL <html> bar.<lp><h3>
Output
Syllabus:
6.1
Status Bar: Builds a static Changing the message using rollover, Moving
the message along the statuS 9 static.html
bar. message,
6.2 X
6.3 .vading and displaying banner advertisement. Linking a banner advertisement to URL.
Slide Show: Creating a
6.4 slide show.
Menus : Creating a pull the menu, Validating a menu selection,
Chain select menu, Tabdown menu,,Dynamically changingmenu, Highlighted menu, Folding a tree Floating menu,
menu,
menu, Scrollable menu, Side bar Pop-up menu, Sliding menu, Context Building static message in status bar.
6.5 menu.
Protecing web
page:Hiding
6.6
Framework of JavaScript and itsyourapplication.
code, Disabling the right mouse button, JavaScript, Concealing email
address.
6.1
Status Bar
welcome to status bar. This is a static
What is status bar? Explain
with example. message.
In Program 6.1.1, the statement
Status bar is a horizontal bar, typically at the +he static message in the 'window.status = "Welcome to status bar. This is a static
status bar. The 'status' property of
bottom of
document being edited ora program running, We can modify the screen or window, displaying information about a har. But this property is not 'window obiect is used to displaymessage." is used ro
the static message in
dispiay
display information about a link, when the user moves status bar.u'sing JavaScript. For example, it can be
used to supported by the modern browsers. status
about the page can be displayed in the cursor of mouse over that link. Also a small
status bar. The horizontal status bar is amount of information 6.1.2 Changing the Message using Rollover
status information is stillshown in a small box removed in modern web browsers. The
which is generated
not work with that new
status bar, because, it does not stay on dynamically and disappears. Hence, the static message is How to change the message of status bar by
screen. usíng rollover? Explain with example.
6.1.1 Build Static We can change the message of status bar by
Message using rollover. We use 'onmouseover' and
change the message of status bar. On rollover event we set onmouseout' properties to
How to build a static message in new message to 'window.status'.
status bar? Explain with example.
We can build a static
Program 6.1.2 : Write a JavaScript to change the message of status
message which will window using rollover.
bar. To create a message in display on status bar. As it is static it will
status bar
we used 'status' be present
permanently on status Solution:
modern browser. Thus, the static property of window object. This
message is not possible to
display in
property is not supported by the <!DOCTYPE html>
operating system as follows. modern browser. So, it has no effect. We can create
static message in old browser and old
<html>
Program 6.1.1 : Write a JavaScript code to
display static message on status bar. <body>
Solution:
<h2>Image Rollover</h2>
<html>
<a onmouseover="window.status = "Welcome to status bar. This is an Apple.">
<head>
<h3>Apple</h3>
<script type = "text/javascript"> </a>
window.status = "Welcone to status bar. This is a static <aonmouseover="window.status = Welcome to status bar. This is a pineapple.">
</script> message.":
<h3>Pineapple</h3>
echKeesledo:
PUDtitattons
Client Side Scripting ClientSide
Language (MSBTE) Menus Navigation and Web Page Scripting Language (MSBTE)
<a>
6-3
Proteclon <script > 6-4
</body> var scrolPos = 0 Menus Navigation and Web Page
</html> var maxScroll = 100
Protection
Output : var blanks = n
Conction scrolText(text,
chanq1ng.ht
mil iseconds) {
Image Rollover
@fiie| E/Javascript/6th%20unit/chan..
window.setlnterval('displayText("+text+"y", mil seconds)
function displayText(text) {
Apple
Pineapple
window.defaultStatus= blanks
++scrollPos
+ text
blanks +=""
wappiecoñapce if(scrollPos >maxScrol) {
S changnghtm
scrolPos=0
blanks
File E/Javascript/6th%20unit/chan...
Image Rollover
Agple
</script>
</head>
Pincapple <body onload="serollText(Welcome to JavaSeript, 300)"'>
we.eappieromipienaa.. <p>Watch the text scroll at the bottom of this window!</p>
In Program 6.1.2, if the mouse cursor <body>
cursor is moved to the "Pineapple' then moves to the 'Apple' it will display the link
associate with the 'apple' and if </html>
does not support the 'status'
property
link associated to the
pineapple is displayed in status bar. The modern mouse
links of the content in status bar.
of window, the status
message not displayed. The modern browser on browser
is Output:
show the
6.1.3 Moving the Message along the Status Bar X
Scrolling Text X
How to move a message along the status bar? t

Explain with example. ’ C 0File EyJavascript/6th%20unit/scrol.
We can show a message
interval, If we set the messagesscrolling
in status bar by assigning the this window!
spaces and the Watch the text scroll at the bottom of
with
after some milliseconds, then it looks increasing spaces in start of message, and assigningmessage to the stats bar in time
the message in time interval i.e.
like the message is scroling along the status bar.
Program 6.1.3 : Write a JavaScript code to display the
moving message on status bar.
Solution:
<html> Welcome toJayaScript.
<head>
B Techknomledee
Puratiens
Tecakaowedyg
Client (MS8TE)
Menus Navigation and Web Page Protection Program6.2.1 .Write a JavaScript 6-6
code to create a enus Navigation and Web Page Protection
FClient Side Scripting Language (MSBTE)
6-5
solution:
simple banner.
DOCTYPEhtml>
S Scrolling Text
E:/Javascript/6th%20unit/scroll. chtml>
O File
<body>
bottom of this window!
Watch the text scroll at the <img src=
</body>
"p\Javascript\6th unit\fruits.jpg" all="custom html bannerl" "style="width:100%">
</html>
Welcome to JavaScript. Output :
9 banner.html
9 Scrolling Text
E:/Javascript/6th9620unit/scrol. 0 File E:/Javascript/6th%20unit/bann..
O File |
Watch the text scroll at the bottom of this window!
Welcome to JavaScript.
In Program 6.1.3, statement window.setinterval("display Text("+text+")", milliseconds)' is used to set the scrolling
message. The setinterval()' function is used to set the message after milliseconds. The text' will send to the function
'display Text()' function, this function is called after milliseconds defihed in 'setinterval(} function. After calling the
to the top location of the
In Program 6.2.1, we have created a banner with the help of single image. The image is set
'displaytext(Y function, the statement window. defaultStatus = blanks + text is executed. In which the status of the using the statement <img src="E:\Vovascript|\6th unit\lfruits.jpg"
alt="custom_html_banner1"
window is changed by setting the new text to the 'defaultStatus' property of window object.
webpage by screen.
style="width:10O0%">. In this statement, we provide the width of the image to fit to the width of the
6.2 Banner
Program 6.2.2:Write a JavaScript code to change the images in banner.
What is Banner ? Explain with example. Solution
rectangular area in webpage where image is placed for advertisement purpose is known as Banner. Banner can be <html>
placed anywhere in the webpage, horizontally on top and bottom or vertically at right and left side of the <head>
webpage.
6.2.1 Loading and Displaying the Banner Advertisement <script>
unitl\bannerl.jpg E:\Wavascript\\6h
How to load and display the banner advertisement ? Explain with example. banner_array=new Array(E:AJavascnpt\6th E:\Javascript\6th unit\banner4.jpg)
Q.
unit\banner2.jpg,'E:Javascriptl\6th unitl\banner3.jpg
To load and display the banner
advertisement, we placed an image in banner=0
particular advertiser. We can also provide the link to that image. When imagewebsite. That image is advertisement or
is clicked it will go to thè advertiser's
website. function DisplayBanners(){
if (document.images){
bannert+
tatiseS
Side
Client Scipung Language (MSBTEY
Navigation and Web Page Linking a Banner 6-8
Protection
Advertisement
Menus 6.2.2
to Menus Navigation and Web Page Protection
Client Side Scripting Language (MSBTE)
6-7
How to link a banner
URL
if (banner==banner array.lenglh)
1
Banner is mainly used
advertisement with
for
URL? Explain with
example.
banner. he user
shouldadvertisement
navigate to thepurpose. We need to provide the link
banner=0
image of
When user clicks on any image, user website the of to the banner. When user clicks the
navigate to that URL.advertiser. For this purpose
image. will
document.Change Banner.sre=banner array[banner] we provide the URL to each
6.2.3:Writea
Program JavaScript Code to link
setrTimeout("DisplayBanners()",5000) banner with the URL.
Solution:
IDOCTYPE html>
</script> <html>
<body onload="Display Banners()"> <body>

<cenler>
name="ChangeBanner"/> a href= "https://www.google.com">
width="100%" beigh="150"
<img sre="bannerl.ipg'
<lcenter>
<la>
<img
sre="E:\Javascript\6th unitlbannerl.jpg' alt="custom html bannerl" style="width:l00%">
</body>
</body >
</html>
</html>
Qutput:
Output :
banner_rotate.html
) File E:/Javascript/6th9620unit/banner _rotate.html banner.html
File E:/Javascript/6th%20unit/bann..
In Program 6.2.2, we define an array of image links. It is possible to change the image of
banner automatically after
some specified time interval. We use 'set Timeout()' function to trigger the event which
change the image of banner. In
'setTimeout()' function we use a user defined function displayBanner()' and a time interval '5000
milliseconds. The
'displayFunction()' function will be called after 5 seconds of time interval. The statement
condition to check for the images in document. After that the index of array is 'document.images' is used in it
check the array index banner with the array size by using incremented by using banner+. Then We
the statement "banner=banner array.length' in if
the index is reached to
array size then the
condition.
index is set The statement
'document.ChangeBanner.src=banner_array[banner]'
name of image tag. By using
is used to change the image of banner.,
Here. 'ChangeBanner is the
property of that image we candocument.ChangeBanner
we access the image element in
set the link of image from the JavaScript. By using invoking Sre
image array.
PechKtege
echKaosledge Pusteatasns
ClientSide Scripting
Menus Navigation
and Web Page Language (MSBTE)
6-9
Protection document.location.href =link array[baniner 8-10
Menus Navigation and Web Page Protection
G Gcg'
httos w.o00gle com Gmail mages
</script>
cbodyonload="DisplayBanners()'>
<center>
ahref =
Limg
"Javascript:display page()">
Go gle src="'bannerl.jPg' width="100%" height='150"
<la>
<lcenter>
name="ChangeBanner'|>
<(body>
<html>
the linked URL webpage will be One
image to the URL If weclick the mage then
In Program 6.2.3, we link a banner statement ka href="https://www.google.com">'. Thus, if Output:
It is possible by using <a> tag and href attribute of HTML The
we click on banner image, then the Google web page will be opened. 9 banner rotate linkhtm!
’ C File
Program 6.2.4 :Write a JavaScript to link all the images in banner to URLS. E/lavascript/6th62Ounitbanner rotate_ linkhtmi
Solution:
<html>
<head> YAHOO!
<script>
banner_array=new Aray(E:\Javascript\6th unitl |google.jpg,E:\Javascript\6
unitl\gmai.jpg,"E:\Javascriptl\6th unitllyahoo.jpg,"E:|\Javascript|\|6th unit\Vacebook.jpg)
link array= new
Array('htps:/www.google.conm,htps/www.gmai.com, htps:/www.yahoo.com, 'htps://www.facebook.com")
banner=0
X
Yahoo india
function DisplayBanners){
httosjfinyahoa.com/?p=us
if (document.images){ FiBance Celebrity Movies Liestyle Moble
Mail News Cricket
banner++ t Hame
if (banner==banner array.length) { Q
banner=0
YAHOO!
Lifestyie Novies Celebrity
News Finance
Mail Cricket
document.ChangeBanner.sre=banner array[banner]
setTimeout("'DisplayBanners()",5000)
funetion display page){

goagless.g.doubiaickne. Tedknsatedge
Watng for
TsKeeutede
Publitations
ClientSide
Client Side Scripting Language (MSBTE) 6-11
Menus Navigation and Web
Page Scripting Language (MSBTE)
In Program 6.2.4, we link all images in banner. The first window contains the multipleimages in
banner
If weProtecion 6-12
image in banner then the related webpage will be opened. This is carried out by taking two array, one for cdick any </script> Menus Navigation and Web Page
URL image links and
Protection
other for related URLS. The array[banner]' is used to set the
Statement document.location.href=linkof URL array is also changed. Thus the present in array </head>
to the href attribute. As index of
image array is change,
URL is used to open the webpage according to image click.
the index
related webpage <body>
<img src="
6.3 Slide Show
What is slide show? Explain with example.

</br></br> "E:NJavascript\6th unit\banner.ipg width="400" height="220" name="Slide"/>
<input
type="button" value="Previous'
oncliocnkc=l"icDki=sp"DlayisIpmlagy(1lm)'>g(-1)">
A series of on screen is known as
images as a presentation continuously changing one after another
contains multiple still images, which change in a sequentiallorder after few seconds. We can create a slide
slide show. It <input type=" "button" value="Next'
array of image in JavaScript. show by using </body>
</html>
6.3.1 Creating a Slide Show
Output:
How to create a slide show? Explain with example.
S slide.html
We can create a slide show of images in Javascript. To create a slide show, we need to create an array of imaoe
locations. The path of image from array is used to display the next image on screen. We can change the path of image on 0 File E:/Javascript/slideshow/slide.ht..
specific time interval.
Program 6.3.1 :Write a JavaScript code to create a slide show.

Solution:
<DOCTYPE htmls
<html>
<head>
<script> |Previous Next
img array=new Array('E:\Javaseript\6th unit\bannerl.jpg, E:\Javascript\6th

Junit \banner2.jpg,'E:\Wavascript|\Ñth unit\banner3.jpg, E:\Wavascript|\6th unit\banner4.jpg') slide.html
img=0; O File E:/Javascript/slideshow/lide.ht... t

function Displaylmg(num){
img=img+num;
if(img>img_array.length-l){
img=0;
if(img<0){
img=img array.length-l;
document.Slide.src=img aray[imgl: Previous Next
PlC atj6ns
Client Side Scripting Language
Menus Navigation
and Web
Page (MSSBTE) 6-14
Client SideScripting Language (MSBTE)
6-13
created an image
with img' tag
and
the
two Protection
buttons. The
<option value="C++">C++</option>
<option value "JAVA">JAVA<<oplion>
Menus Navigation and Web Page Protection
images. We have will display next
In Program 6.3.1, we create a slide show of
slide show and the Next' button
on button clic .If
image in slide
'Previous' button will display the previous image in
image link from
array will be assign
incremented indey we
the 'Previous <option value:"JavaScript">Javascript<loption>
show. We have created an array of an image links. The using that can get the URI
incremnent by one. By index of the </select>
button is clicked, then the index of current imageisthe Next' Button is clicked, then the current image
displave URL 0s
of that index from array and display the image. If obtained by the array and s the <button onClick=
image.
decremented by one. By using that decremented index
6.4 Menus
theimage URL 0s
</body> -"GetSelectedItem(0:">Get Selected Item</buton>
</html>
Q. What is menu? Explain with example. Output:

The menu element represents a ggroup of commands that a user can perform or activate. Menu may contain multiple
menu at a time depending on type of menu. 9 pulldown.html

to seleCt. User can choose one or more
6.4.1 Creating Pull Down Menu
File E/Javascript/menufpulidown.h..
What is pull down menu? Explain with example. C Get Seiected Item
C
How to create a puildown menu? Explain with example.
C++
A website is a collection of multiple wébpages. So, there should be 'a proper navigation to VIsIt these pages. The menu JAVA
is used to navigate through the website. Menu contains the various items which perform related operations such ae JavaScript
opening a new webpage, displaying other related information, etc. There are various types of menus are available, such ae
Puldown menu, floating menu, chain select menu, tab menu, sliding menu, pop up menu, scrollable menu, etc. The
pulldowWn 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.
9 pulldown.html
Program 6.4.1:Write a JavaScript to create a pulldown menu.
Solution: FileE/Javascript/menu/pulldown.htmi
JAVA
<!DOCTYPE html> This page says
<html> The selected value is: JAVA
<script>
function GetSelectedItem()
{
var ele =
var str =
document.getElementByld("select"):
ele.options[ele.selectedindex].value;
alert("The selected value is: "+str): In Program 6.4.1. we have created a 'pulldown' menu by using <select> tag and <option> tag. When we click on the
enu, the list of menu item willbe pulled down. We can select the option from the list. To get the access of the menu ie.
</script> elernent of HTML in JavaScriot the statement 'vor ele =document.getElementByld("'select "); is used. The getElementByld()
<body> function is used to get the access of the element of HTML by passing the id of the element in that function. After selecting
statement var str =
<select id="'select"> menu item, we can get the selected menu item value in JavaScript by using
'alert("The selected value
COptionslele. selectedindexl.value:. Then we can use that value to display by using statement
<option value="C">C</option> is: "+str);'.
Tech Kaouledge Ich Knouledee

PDILC atian
ClientSide Scripting Language
and Web
(MSBTE) 6-16
Menus Navigation Page Protection opt.texiContent = ty_subjects{il: Menus Navigation and Web Page Protection
6-15
Client Side Scripting Language (MSBTE) select.appendChild(opt):
6.4.2 Dynamically Changing the Menu
example.
the menu? Explain with }else if(x=="class"){
VYnat is dynamically changing
menu? Explain with example.
chanaing
How to create dynamically is two opt = document.
The item of the menu can be changedI
One contains the class namee and other
dynamically depending on
contains the subiect. So, on
any action
the
taken place. There
selection of first menu
pulldown
the other menu item i
menu,
-createElement('option"):
opt.value = "class".
changd dynamically.
opt.textContent = "'Subjects":
create the dynamically changing meno. select.appendChild(op);
Program 6.4.2 :Write a JavaScript code to
Solution : }
<!DOCTYPE html>
<html> </seript>
<head> </head>
<script> <body>
sy_subjects=new Array("0OP","CG""'DBMS","DSU" "'DTE"); Kselect id="mySelect" onchange="'myFunction(this)">
ty_subjects=new Array("AJP""STE","EST""OSY","CSS");
<option value="class"> Class </option>
function myFunction(sub) {
<option value="syco">SYCO</option>
var select = document.getElementByld("student");
<option value"yco">TYCO</option>
var s = select.options.length;
</select>
for(i=s;i>=0;i--){
<select id="student" name="student">
select.options.remove(i);
<option value="O">Subjects </opion>
</select>
var x =
document.getElementByld ('mySelect").value;
if(x=="yco") { </body>>
for(i=0;i<sy _subjects.length;it +){ </html>
opt = document.createElement("option");
Output :
opt.value= sy_subjects[i]:
dynamic_menu2.htmi
opt.textContent = sy_subjects[i];
O File E:/Javascript/menu/dynamic_m..
select.appendChild(opt);
Class. v Subjects v
Class
}else if(x=="tyco"){ SYCO
[TYCO
for(i=0;i<ty_subjects.length;i ++){
opt = document.createElement("'option"):
opt.value ty subjects[i);
TechKnouledee
PluEatiens
TechKnouledge
P u b t i atton
Client Side Scripun g Language (MSBTE)
8-18
document.-g etElementByld('mySelect'),value;
and Web var x = Menus Navigation and Web Page Protection
Menus Navigation Page Protection
6-17
ifx=="Select Subject"){
alert("Please select subjec."):
S dynamis_menu2.htnl }else{
E/Javascript/menu/dynamic_m.
document.
-getElementByld("ademo").innerHTML=
O File
|SYCO OOP "You selected:" + x;

OOP
CG
IDBMS
DSU </script>
DTE
</head>
<body>
<select id="mySelect">
S dynamic menu2.html X
FileE:/Javascript/menu/dynamic_m. Â Coplion value="Select Subject'>Select Subject</option>

O
Coption value="00P">00P</option>
TYCOAJP
AJP <option value ="'CG">CG</option>
STE <option value="DBMS"> DBMS</oplion >
EST
oSY
CSS
<option value="DSU"> DSU</option>
<option value="DTE">DTE<loption>
</select>
In Program 6.4.2, we have created a menu which can change dynamically on the selection of other menu. Here we have <br>
created two pulldown menus. One menu contains class name and other contains the subject names of that class. If we <input type="button" value="Submit" onclick="myFunction()"'>
select the TYCO then the menu items of second pulldown menu is set accordingly, i.e. subjects of TYCO is set to the second
<br>
'pulldown' menu. If we select SYCO then the SYCO subjects are set to the second menu dynamically.
<pid="demo"> </p>
6.4.3 Validating Menu Selection
</body>
What is validating menu selection? Explain with example. </html>
How to validate the menu selection? EXplain with example.
Output :
While filing information, user can forget to select an option in menu. In such case, the
not be send to the server. To make fields compulsory to fill, we use filed
incomplete information should
validation. We can validate menu selection by validate.html
using JavaScript. JaväScript is used for Client Side Validations. We can check
incorrect then the error messagè can be generated and displayed to the screen. whether the input is correct or not. If input is File E/Javascript/menu/validate.html
By using JavaScript, the user gets prompt
to fill the proper information.
Program 6.4.3 : Write a JavaScript code to validate the menu selection. Select Subject v
Submit
Solution:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var select =
document.getElementByLd('student): B TechKnowtedge
IchKnsatedyi
PuDIasns
ClientSide Scripting
Menus Navigation and
dWeb Page Protection Language (MSBTE
6-20
} Menus Navigation and Web Page
validate.html
</seript>
Protection
O File E/Javascript/menu/al1date.html
</head>
<body>
This page says
cbr> <br> <br>
Please select subject.
<p>Floating menu. Scroll
<select id="mySelect" Down.</p>
<option value=' 'sSubjtyle=e"ct'p'>oSelsit oenct:fixed"'
"Select >
<option value="OOP">00P</opion>
Koplion value ="CG"> CG</option>
Sbject</oplion>
In Program 6.4.3, we are validating the menu selection by usingJavaScript. The selected value can be store in the <option value=="DBMS">DBMS</option>
variable and then it compares with some condition to check whether the selection of menu item is proper or not. If the <optionvalue="DSU">>DSU</option>
proper option is selected then the value of that option will be displayed on screen. If proper value is not selected or meni
item is not selected then the alert message will be display as shown in above Tigure. <option value="DTE"'>DTE</opion>
</select>
6.4.4 Floating Menu
<br><br>
What is floating menu ? Explain with example. <input type="button' value="Submit'
How to create a floating menu ? Explain with example. <br> onclick='yFunction(0'>
When user scrolls the webpage, sometimes we needa menu to stick to the screen for particular operation. The menu <p id="'demo"> </p>
which is fixed while scrolling the webpage is known as floating menu. A floating menu can be
created by setting the style <br> <br> <br> <br> <br> <br> <br> <br>
position of that menu fixed. Following example shows the floating menu on webpage.
</body>
Program 6.4,4:Write a JavaScript to create floating menu.
</html>
Solution:
<!DOCTYPE html> Output:
<html>
<head> floating.htmi
<seript> ’C File E/lavascript/menu/floating.html
function myFunction() {
var select=document.getElementByld('student"):
var x =
document.getElementByld('mySelect").value;
if(x=="Select Subject"){ Floating menu. Seroll Down.
alert("Please select subject.");
}else{ Select Subject
document.getElementByld("demo").innerHTML = "You selected: " + x: Submit
Tech Kpouledgé
Pubt atons
Menus Navigation and
Web Page Clent Side Scripting
Client Side Scripting Language (MSBIE) 6-21
Proleclon 64.6 TabMenu Language (MSBTE)
X
622
flosting.htm Menus Navigation and Web Page
What is Tab menu?
O File /Javascript'menu/floating.html Protection
Tab menu contain the
one of
Floating menu. Scroll Down. atab-head
thenthe
content relatedmoreto tthatab-head
replacethe previous content on
likea
tab button. Each tab
tab-head click then thebetabdisolmenuaved.is Mwe contwantainsmgreseparatthane oneContentpageto display.
wil
If we click on
like
the best content which will
Home option.
Submit
About usl Contact
Select Subject v
Content of Home Page.. .

In Program 6.4.4, we have created a floating menu. We set the position property oT menu as fixed Istyle to mal.
menu fix to the webpage. It look like floating on the webpage. The statement '<select id="mySelect" style="position-f..
is used to fix the menu on screen.
Fig. 642
Ae shown in Fig.
6.4.5 Chain Select Menu 6.4.2, TWe select home tab then the
contact then the relatedIcontent will be home page content wil be
displayed. displayed. If we cick on about us or
Q. What is chain select menu? 6.4.7 Popup Menu
How to create a Chain select menu?
a. What is Popup menu?
Chain select menu is a type of dvnamic menu in which there are more than one select menu present. The option
Popup menu is nothing but an hoverable dropdown
menu. The drop down menu cisplay
select from first menu decides the options of second menu and option selected from second menu decides the option of is known as popup menu. It contains the submenu which will display or poouD below the the sub menu on mouse over
the third menu. For ex. There are three select menu are available first for district second for tehsil of selected district and shown in the Fig. 6.4.3 if we take mouse on the menu, it will popup the menu in the form of list. As
list of submenu.
third for village of selected tehsil. First we need to select district from first select menu, then on the basic of selected
Flle Edit Vew
district in first menu the options of second menu decided i.e. tehsil of selected district will be set as options to second New
menu. Then we need to select the tehsil from second menu. Then the villages of selected tehsil will be set to the third Open
Save
menu as options. Then we can select the village.
Save As
Pune Purandar V Saswad

Bhor Kodit
Haveli Chambali
Purandar Narayanpur
Shirur Saswad Flg. 6.4.3
of submenu. In popup menu we
AS ShoWn in Fig. 6.4.3. if we take
mouse cursor to the menu then it wills popup the list
Fig. 6.4.1
popup the list of sub menu by only taking the mouse cursor to it.
UO nÙt require to click on the menu. jt can
In Fig. 6.4.1, first menu contains the name districts, second menu contains tehsil and
changes according to first menu
selection. The third menu contains villages and changes according to the second menu 6.4.8 Sliding Menu
selection. Here we select rune
district from the first menu then the second menu contains the tehsil of
Pune district. Then we can select the tensli na Q. What ls slkding menu? we
from second menu. We select Purandar tehsil from second list then the third to displav the menu. If
menu contains villages of Purandar tensl. button or some menu icon
present on screen. We need to click on example will illustrate the working
not Following
select Saswad. e SMGing menu is in the screen to display
on screen.
cllck on menu 0con then the menu will slide B TedKassieder
sliding menu.
Client Side Scriptingg Language(MSBTE)
Menus Navigation and Web 6-24
6-23
Page Protecion
Language (MSBTE) Menus Navigation and Web Page Protection
Client Side Scripting Product Services
X he Contact Product
Home Home Mobe
About Us
Product page content...
uptops
Product lage content...
Services
Services
Home page content...
Contact Contact
Fig. 6.4.6
Fig. 6.4.4
As shown in the Fig. 6.4.6,the menu can be
screen. If we click on +hie t listbelow the menu expanded. If we click on afoldable
clicked. If we click again then the tree menu it will display the sub menu
icon is displayed on left side of the first sub menu will be
As shown in Fig. 6.4.4, the sliding menu hidden i.e. folded.
and display as shown in second screen. It may contain more than one sub men, E 6.4.11 Context Menu
menu will slide from left to right
product +he
that sub menu will be displayed. As we click on
click on any sub menu then the content related to
menu will hide by sliding from right to left. What is context menu?
content willbe displayed and the
6.4.9 Highlighted Menu ona webpage if we click a right button of
mouse then the context menu will be
. click of mouse and the
position of menu is depend on the location where the mousedisplayed. The will be displayed on
is clicked.
Q. What is highlighted menu?
Cut
menuitem, the menu
The highlighted menu can be created by-mouse over effect. As user moves the mOUse to any Copy
as bold, etc. The
will be highlighted by using special effects such as background color change or making the font style Paste Options:
highlighted menu is used to make a confirmation that the user is going to choose a proper menu item.
X
Home Font...
About U
Us
Paragraph...
Product
Services Highlighted Bullets
Contact Menu
Numbering
A Styles
Hyperiink..
Fig. 6.4.5 Look Up

Synonyms
As shown in the Fig. 6.4.5, the user moves the cursor to the menu 'Product the backeround color of that
menu item
will be changed. It makes confirmation that the user going to click the right EE Tranglate
menu. Additional Actions
6.4.10 Folding a Tree Menu
Q. What is folding tree menu? Fig. 6.4.7
A menu
which contain sub menu and the sub menu
contain the sub menuthen the hierarchy like 6.4.12 Scrollable Menu
Created. The menu can be fold by hiding the sub menus and tree oT mee
unfold by displaving the submenu of a mnenu is
foldable tree menu, known What is scrollable menu?
screen is called as scrollable menu. If there are
can be scrolled to
display limited item on
The In which items screen then we can use the scrollable menu.
many menumenuneed to be displaved on screen, but all menus are not fit onthe
Teceg
Client Side. Scripting
Menus Navigation and Web
Language (MSBTE)
Page Protection 651 Hiding Your Code 6-26
ProductServces code of Protection
Home| About Us| The source the
cimoly viewwebpage
can be
the
webpagecan
the source code viofewed by clicking right mouse
IAbout Us | Product | ServcesCllents
source code
ofthe
webpage by disabling the rightthe webpage. Viewing sourcebuttoncodeonby the webpage. Anyone who visits to
buttonin JavaScript.
Hiding source code is mouse dick on users is not safe, We can hide the
Disabling the Right
protecting the source codewebpage.
by
We write the code to disabie the right
viewing
mouse
other users.
Product |Servces lclients Contact
6.5.2
Mouse Button
The source code of the
Fig. 6.4.8 iewing source Code
webpage of some websites can be
source'. By we can find out how the viewed by right clicking selecting the option 'view
and
webpage. It is not weboage is
Ihe above Fig. 6.4.8, the sCrollable menu. There are two arrows which scrolls the
menu. IT we click on left arrow tho their own
see the
secure to display asource code to users. created. anvone can use that source code to create
menuitem from ons the user cannot We can disable the right cick of
one menu of left side will be bide and the and one new menu is added to right side. It just scrolls the source code eof the mouse button. Thus
side to another.
webpage.
Program 6.5.1 : Wite aJavaScript code to
disable the right moUse cdlick.
6.4.13 Side Bar Menu Solution:
What is side Bar Menu? <!DOCTYPE html>
the menu. When we click on the <html>

In side bar menu, the sub meñu of a menu item will be displayed on right side
menu item, the sub menu item of that menu will be displayed on right side of the menu. <head>
Product
<script>
Product Mobiles:
Services Services Laptops document.addEventListener('contextmenu,event=>event. preventDefault));
Department
</script>
Department
Contact Contact
<head>
<body>
Product Mobiles. <h3><p> Disabling thee right click of mose button.</p></h3>
Services Laptops Asus <body>
Department Lenovo </html>
Contact HP
Output :
Fig. 6.4.9 right.htm!
In Fig. 6,4.9, the side bar menu is shown. If we click a menu :
item 'Product then the side menu itenms will be displayed. (-’ C File E/Javascript/rollover/menu/ig..
again if we click on the side sub menu item Laptops, then the sub
menu item of "Laptops' will|be displayed.
mouse button.
6.5 Protecting the Webpage Disablingthee right click of
How to protect the webpage?

Q. How to disable the mouse right click on webpage?
Explaín with examole.
TecdKaaiedgë
TechKuoleu
Client Side Scripting
Client Side Scripting Language 6-27
Menus Navigation and Web Page Language (MSBTE)
In
Program 6.5.1,
(MSBTE)
disabled the right mouse click by using Protecion output: 6-28
we
´document.addEventlistener('contextmenu'
which prevent to perform any action on right click. On right click, the context menu is used to open, and we
statement
,event=>event.preventDefault();. We add the even listener on the document.
)
Protection
prevent to open that context menu.
need to Protecting Email address from u X
6.5.3 Concealing email Address O File
What is mean by concealing email address? Explain with example.

This page says E|lavascipt/Sth%20unit conce. k :
Concealing email address means to hide email address from unauthorized user. If we are working with the javascr. @example.com
doaress and we don't want to show email address to the user, then we can hide the email address by using JavaScriot email
Program 6.5.2 : Write a JavaScript code to hide the email address.
Solution:
i Program 6.5.2, we have create a
<!DOCTYPE btml>
<html>
ll address to hide the some charactersJavaScript
in email
function hide emaill). The function
contains the code to
e the ' dot to address. We use the string function to split the convert the
repave the email address email string and then
<head> nrotect the email address by using Javascriot.characters. The changed email address is displayed to the user. Thus we can
<title> Protecting Email address from unauthorised user</title>
<script>
6.6 Frameworks of JavaScript and its Application
hide email = function (email address) { What are the JavaScript frameworks?
var avg, splitted, partl, part2; What are the applications of the JavaScript Framework?
splitted = email address.split("@": A JavaScript framework is an application framework which is written in JavaScript. JavaScript
frameworks are
partl = splitted[0}: collections of JavaScript libraries which provide the predefined code or functions to the developer. It performs the general
avg = partl.length/2; programming that JavaScript do and many more with less lines of code. There are various JavaScript frameworks are
partl available. Each framework has different work flow. An entire application is based on the framework. The framework
partl.substring(0, (partl.length avg)): designs the complete application. in framework, User need not call the predefined library functions instead the framework
part2 = splitted[1]; itself call the functions in specific way. Some of the framework such as AngularJS folows the Model-View-Controller design
improve the code quality. Some of the
return partl + "..@" + part2; patern to separate the complex code and to make easy the development and
}; examples of JavaScript frameworks are Angular!S, ReactJS, Meteor.JS, Ember.JS, etc.
JavaScript frameworks are used in web development as well as in
Each Framework has wide range of applications.
alert(hide_email('javascript_2019@example.com"):
</script> yorid mobile app development, It improves
the code
by
quality. The development of entire application is
developer. The reactjs is used in
based on the
react-native mobile application
ramework, where less code is required to write Frameworks reduce the code cómplexity.
</head> web application development.
development. Angular JS is used in single page
<body>
<h3><p> Email Address is Protected.</p></h3>
</body>
</html>
TechKaestedee
Pal4catibas

6th Chapter of CSS

Uploaded by

Copyright:

Available Formats

6th Chapter of CSS

Uploaded by

Document Information

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

6th Chapter of CSS

Uploaded by

Copyright:

Available Formats

ClientSide

Scripting Language (MSBTE)

Menus Navigation and Web Page

6 Protection <h3><p> Buildings

How to move a message along the status bar? t

Welcome to JavaScript. Output :

What is Banner ? Explain with example. Solution

<body onload="Display Banners()"> <body>

) File E:/Javascript/6th9620unit/banner _rotate.html banner.html

funetion display page){

What is slide show? Explain with example.

Program 6.3.1 :Write a JavaScript code to create a slide show.

<script> |Previous Next

img array=new Array('E:\Javaseript\6th unit\bannerl.jpg, E:\Javascript\6th

img=0; O File E:/Javascript/slideshow/lide.ht... t

document.Slide.src=img aray[imgl: Previous Next

Q. What is menu? Explain with example. Output:

menu at a time depending on type of menu. 9 pulldown.html

Tech Kaouledge Ich Knouledee

|SYCO OOP "You selected:" + x;

FileE:/Javascript/menu/dynamic_m. Â Coplion value="Select Subject'>Select Subject</option>

document.getElementByld("demo").innerHTML = "You selected: " + x: Submit

Content of Home Page.. .

Pune Purandar V Saswad

Fig. 6.4.5 Look Up

What is side Bar Menu? <!DOCTYPE html>

the menu. When we click on the <html>

How to protect the webpage?

What is mean by concealing email address? Explain with example.

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.