Scribd Logo
Upload

Welcome to Scribd!

  • Java Script

    Uploaded by

    SALMA ANSARI
    3 views23 pages
    This document describes creating an event-driven client-side script using JavaScript. The script will change the background color of a web page every few seconds when the mouse hovers over a button, cycling through 7 different colors. It will also display a status message when the second button is clicked. The script uses setTimeout() functions to change the background color after a delay, and an onmouseover and onclick event to trigger the color changes and status message, respectively.

    Original Description:

    Original Title

    JavaScript(1)

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document describes creating an event-driven client-side script using JavaScript. The script will change the background color of a web page every few seconds when the mouse hovers over a button, cycling through 7 different colors. It will also display a status message when the second button is clicked. The script uses setTimeout() functions to change the background color after a delay, and an onmouseover and onclick event to trigger the color changes and status message, respectively.

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    3 views23 pages

    Java Script

    Uploaded by

    SALMA ANSARI
    This document describes creating an event-driven client-side script using JavaScript. The script will change the background color of a web page every few seconds when the mouse hovers over a button, cycling through 7 different colors. It will also display a status message when the second button is clicked. The script uses setTimeout() functions to change the background color after a delay, and an onmouseover and onclick event to trigger the color changes and status message, respectively.

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    of 23

    XP

    Practical No : 8

    Event driven client side scripting


    QUESTION XP

    Create a web page in HTML having a white background and two Button Objects.
    Write code by using JavaScript such that

    When the mouse is placed over the first button object without clicking, the color of the
    background of the page should change after every few seconds.
    There should at least be 7 different and visibly distinct background colors excluding
    the default color.

    When the second button object is clicked, appropriate message should be


    displayed in Browsers status bar.
    XP

     Javascript function:
    setTimeout :
    It executes a block of code after
    specific time.
     Javascript Events :
     Onmouseover
     Onclick

    3
    XP

    Syntax:

    setTimeout(“block of code”,time inmilliseconds)

    Example:
    setTimeout(“p1()”,2000)

    4
    Javascript Program Layout: XP

    <html><head><title> JS</title>
    <script language = “javascript”>
    . . . JS functions…
    </script>
    </head>
    <body>
    Buttons, textboxes
    </body></html>
    5
    XP
    <html>
    <head>
    <title> Event driven client side script </title>
    <script language="javascript">

    <body>
    <br>
    <h1> This is Event Driven Client Side Script </h1>
    <form name=f1>
    <input type="button" value=" place your cursor " onmouseover="p1()">
    <input type="button" value=" Click Here for status message " onClick="StatusBar()" >
    </form>

    </body>
    </html>
    XP

    7
    XP
    <html>
    <head>
    <title> Event driven client side script </title>
    <script language="javascript">

    function p1()
    {
    document.bgColor="BLUE";
    window.setTimeout("p2()",2000);
    }
    XP

    9
    XP
    <html>
    <head>
    <title> Event driven client side script </title>
    <script language="javascript">

    function p1()
    {
    document.bgColor="BLUE";
    window.setTimeout("p2()",2000);
    }

    function p2()
    {
    document.bgColor="PINK";
    window.setTimeout("p3()",2000);
    }
    XP

    11
    XP
    <html>
    <head>
    <title> Event driven client side script </title>
    <script language="javascript">

    function p1()
    {
    document.bgColor="BLUE";
    window.setTimeout("p2()",2000);
    }

    function p2()
    {
    document.bgColor="PINK";
    window.setTimeout("p3()",2000);
    }

    function p3()
    {
    document.bgColor="BLACK";
    window.setTimeout("p4()",2000);
    }
    XP

    13
    XP
    <html>
    <head>
    <title> Event driven client side script </title>
    <script language="javascript">

    function p4()
    {
    document.bgColor="YELLOW";
    window.setTimeout("p5()",2000);
    }
    XP

    15
    XP

    <html>
    <head>
    <title> Event driven client side script </title>
    <script language="javascript">

    function p4()
    {
    document.bgColor="YELLOW";
    window.setTimeout("p5()",2000);
    }
    function p5()
    {
    document.bgColor=“ORANGE";
    window.setTimeout("p6()",2000);
    }
    XP

    17
    XP
    <html>
    <head>
    <title> Event driven client side script </title>
    <script language="javascript">

    function p4()
    {
    document.bgColor="YELLOW";
    window.setTimeout("p5()",2000);
    }
    function p5()
    {
    document.bgColor=“ORANGE";
    window.setTimeout("p6()",2000);
    }
    function p6()
    {
    document.bgColor=“RED";
    window.setTimeout("p7()",2000);
    }
    XP

    19
    XP
    <html>
    <head>
    <title> Event driven client side script </title>
    <script language="javascript">

    function p6()
    {
    document.bgColor=“RED ";
    window.setTimeout("p7()",2000);
    }
    function p7()
    {
    document.bgColor=“GREEN";
    window.setTimeout("p1()",2000);
    }
    XP

    21
    XP
    <html>
    <head>
    <title> Event driven client side script </title>
    <script language="javascript">

    function p6()
    {
    document.bgColor=“RED ";
    window.setTimeout("p7()",2000);
    }
    function p7()
    {
    document.bgColor=“GREEN";
    window.setTimeout("p1()",2000);
    }
    function StatusBar()
    {
    window.status = "This is event driven program";
    }
    XP

    StatusBar
    23

    You might also like