Scribd Logo
Upload

Welcome to Scribd!

  • Chapter 6 Menu Navigation & Web Page Protection

    Uploaded by

    Priya Mali
    8 views32 pages

    Original Title

    Chapter_6_Menu_Navigation_&_web_Page_Protection[1]

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views32 pages

    Chapter 6 Menu Navigation & Web Page Protection

    Uploaded by

    Priya Mali

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 32

    CHAPTER 6

    Menus , Navigation And Web Page


    Protection
    CONTENTS

    ➢Status Bar
    ➢Banner
    ➢Slide show
    ➢Menus
    ➢Protecting web Page
    ➢Framework of JavaScript and its application.
    Status Bar

    ✓Builds a static message


    ✓Changing a message using rollover
    ✓Moving message along status bar
    Introduction To Status Bar
    ✓The status bar is located at the bottom of the browser window and is
    used to display a short message to visitors to your web page.
    ✓Though most web sites make use of status bar messages.
    ✓ Some developers display a message on the status bar when the
    web page first opens. Other developers might change the message
    to reflect whatever the visitor is doing on the web page.
    ✓Still other developers animate the message while the page is
    displayed,.
    ✓We'll show you how to build several status bar display techniques
    into your web page.
    Building A Static Message
    • To display a static message on the status bar. A static message appears when the web page
    opens and remains on the status bar until the web page is closed.

    window. status= ‘Welcome to my First Static Message on Status Bar!!!!’

    <!DOCTYPE html>
    <html>
    <body>
    <h1>Please Look at Status Bar.</h1>
    <script>
    window.status = "Welcome to my First Static Message on Status Bar!!!";
    </script>
    </body>
    </html>
    Changing the Message Using Rollovers

    • The message on the status bar changes as the visitor moves the mouse cursor over
    objects on the page.
    • onmouseover and onmouseout property
    Write A java script to modify the status bar using on mouseover and on mouseout with
    links. When the user moves his mouse over the links, it will display “MSBTE” in the
    status bar. When the user moves his mouse away from the link the status bar will display
    nothing.

    <html>
    <head>
    <title>JavaScript Status Bar</title></head>
    <body>
    <a href=" https://msbte.org.in/“
    onMouseOver="window.status='MSBTE';return true"
    onMouseOut="window.status='';return true">
    MSBTE
    </a>
    </body>
    </html>
    Moving the Message Along the Status Bar
    • We can do your message moving along status bar.
    <html>
    <head>
    <title>Javascript Moving Status Bar Message</title>
    <script language="javascript">
    msg="Welcome to Javascript";
    pos=0;
    function MoveMessage()
    {
    window.status=“ ”+msg.substring(pos,msg.length);
    pos++;
    if(pos>msg.length)
    pos=0;
    window.setTimeout(“MoveMessage()",300);
    }
    MoveMessage();
    </script>
    </head>
    <body>
    <p>Javascript Moving Status Bar Message</p>
    <p>Look at the status line at the bottom of the page</p>
    </body>
    </html>
    Crawling the Status Bar Message
    ✓ We have noticed headlines crawling along the bottom of the television screen. You can incorporate the
    same effect in your we page by crawling a message along the status bar.

    ✓ A crawl creates a steady flow of text moving from right to left on the status bar
    <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>
    Crawling text on status bar
    Banner Advertisements
    ✓ Displaying banners ads is a common practice for showing advertisements on web
    pages to the visitors.
    ✓ Banners ads are normally created using standard graphic tools such as Photoshop,
    Paintbrush Pro, and other software.
    ✓ Banner ads can be static or animated.
    ✓ Animated images are animated GIF files or flash movies.
    ✓ Flash movies are created using Macromedia Flash and the browsers must have
    installed flash plugin to view the movies.
    ✓ On the other hand, you can create some animated effect using JavaScript, like rotating
    static banner ads at a certain time interval.
    Loading And Displaying Banner Advertisements

    • Your first job is to build your banner advertisements.


    • Banners advertisements consists of several banner images that constantly rotate on a
    webpage at a fix time interval.
    <html>
    <head>
    <script language="Javascript">
    pics=new Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')
    index=0
    function ShowBanners()
    {
    document.img1.src=pics[index]
    index++
    if (index==pics.length)
    {
    index=0
    }
    setTimeout("ShowBanners()",1000)
    }
    </script>
    <body onload="ShowBanners()">
    <center>
    <img src=“ " width="381" height="131" name="img1"/>
    </center>
    </body>
    </html>
    Linking Banner Advertisements To Urls
    ✓ We expect to click the banner so that a new web page opens.
    ✓ You can link a banner advertisement to a web page by inserting a hyperlink into your web page that
    calls a JavaScript function.
    ✓ The JavaScript then determines the URL that is associated with the current banner and loads the web
    page that is associated with the URL.
    ✓ The script is basically the same as the previous one but we need to add another array that comprises
    the links, as follows:

    link=new Array('URL1','URL2','URL3','URL4')
    <html><head>
    <script language="Javascript">
    pics=new Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')
    link=new Array('http://www.google.com','http://www.gpsolapur.ac.in’,
    'http://www.msbte.org.in’,'http://www.google.com')
    index=0
    function ShowLinks()
    {
    document.location.href=link[index]
    }
    function ShowBanners()
    {
    document.img1.src=pics[index]
    index++
    if (index==pics.length)
    {
    index=0
    }
    setTimeout("ShowBanners()",5000)
    }
    </script>
    <body onload="ShowBanners()">
    <center>
    <a href="javascript: ShowLinks()">
    <img src=“ " width="381" height="131" name="img1"/></a>
    </center></body></html>
    Creating A Slideshow
    • In last session we have learned how to create rotating banners without links and with
    links.
    • In this topic, we will modify the JavaScript code for the rotating banners into a
    slideshow.
    • Slideshow gives us the ability to change the image displayed using Forward button(next
    image) Back button ( previous image).
    • Create a slideshow with the group of three images, also simulate next and previous
    transition between slides in your Java Script.
    SIMPLE SLIDE SHOW
    <html>
    <body style="background-color:pink" onload="changeImg()">
    <center>
    <img name="slide" width="400" height="200" />
    </center>
    <script>
    var i = 0; // Start Point
    var pics = new Array('js1.png','js2.jpg','js3.png')
    // Change Image
    function changeImg(){
    document.slide.src = pics[i];
    // Check If Index Is Under Max
    if(i < pics.length - 1)
    {
    i++; // Add 1 to Index
    }
    else
    {
    i = 0; // Reset Back To O
    }
    setTimeout("changeImg()",1000); // Run function every x seconds
    }
    </script></body></html>
    <html > SLIDE SHOW WITH NEXT AND PREVIOUS BUTTON
    <head>
    <script language="Javascript">
    pics = new Array('js1.png','js2.jpg','js3.png')
    i= 0;
    function prev()
    {
    i--;
    if(i<0) </head>
    { <body style="background-color:pink">
    i=0; <center>
    } <img src="js1.png" width="400" height="400" name="img1">
    document.img1.src = pics[i]; <br><br>
    } <input type="button" value="Back" onclick="prev()">
    function next() <input type="button" value="Next" onclick="next()">
    { </center>
    i++; </body>
    if(i>pics.length-1) </html>
    {
    i=pics.length-1;
    }
    document.img1.src = pics[i];
    }
    </script>
    Menus
    • menus consists of list of options and we can choose items from a list of options.
    Creating a Pull-Down Menu
    ✓ pop-down menu is also called as drop-down menu.
    ✓ pop-down menu is a menu of commands or options you can select an item with
    mouse.
    ✓ We can group web pages into a pull-down menu.
    ✓ Each menu option can identify a web page.
    ✓ You can use JavaScript to load the selected page.
    Example:
    <html>
    <body style="background-color:pink">
    <h1>Pull Down Menu</h1>
    <p>The select element is used to create a pull down/drop-down list.</p>
    <form action=" ">
    <label>Choose a Month:</label>
    <select name="pulldownMenu">
    <option value="January">January</option>
    <option value="Feburary">Feburary</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
    </select>
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>
    Write a JavaScript to create a pull-down menu with three options
    [ google, MSBTE, yahoo] once the user will select one of the
    options then user will be redirected to that site.
    <html>
    <head>
    <title>Pull Down Menu</title>
    <script language="javascript" type="text/javascript">
    function getPage(choice)
    {
    page=choice.options[choice.selectedIndex].value;
    if(page != "")
    {
    window.location=page; <body style="background-color:pink">
    } <form name="myform" action="" method=" ">
    } Select Your Favourite Website:
    </script> <select name="MenuChoice" onchange="getPage(this)">
    </head> <option value="https://www.google.com">Google</option>
    <option value="https://www.msbte.org.in">MSBTE</option>
    <option value="https://www.yahoo.com">Yahoo</option>
    </form>
    </body>
    </html>
    PROTECTING WEB PAGE

    • List ways of protecting your web page and describe any one of them.
    1. Hiding your source code

    2. Disabling the right MouseButton


    3. Hiding JavaScript
    4. Concealing E-mail address.
    FRAMEWORKS OF JAVASCRIPT AND ITS APPLICATIONS

    ✓ JavaScript Framework are JavaScript code libraries that have pre-written code to use for
    routine programming features and tasks.
    ✓ It is literally a framework to build websites or web applications around.

    ✓ Frameworks have their own way of doing things.

    Node.js

    Mithril
    Backbone.js Aurelia

    You might also like