Scribd Logo
Upload

Welcome to Scribd!

  • Lab 07

    Uploaded by

    Rohit
    12 views4 pages
    IWP Lab 07

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    IWP Lab 07

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views4 pages

    Lab 07

    Uploaded by

    Rohit
    IWP Lab 07

    Copyright:

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

    Date: 02/20/2017

    Lab-07

    Lab-07
    HTML CODE:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="style7.css">
    <title>IWP- Lab "07"</title>
    <script src="js7.js"> </script>
    </head>
    <body>
    <h1><u>Introduction to JavaScript</u></h1>
    <p>----------------- Date Function -----------------</p>
    <button type="button" onclick="date()">
    Click for Date & Time
    </button>
    <p id="datePara"></p>

    <p>------------------ Change Font ------------------</p>


    <button type="button" onclick="font()">
    Click for Changing font
    </button>
    <p id="changeFontPara">Hello World!</p>

    <p>-------------------- Hide Para --------------------</p>


    <button type="button" onclick="hide()">
    Click for Hiding para
    </button>
    <button type="button" onclick="display()">
    Click for Displaying para
    </button>
    <p id="hideDisplayPara">Hello World!</p>

    <p>---------------- Changing Image ----------------</p>


    <button type="button" onclick="changeImage1()">
    Click for Star Wars
    </button>
    <button type="button" onclick="changeImage2()">
    Click for Star Trek
    </button><br><br>
    <img id="image" src="star_wars.jpg" width=200px height=200px />

    <p>---------------- events ----------------</p>


    <button type="button"
    onmouseover="document.getElementById('events').style.display='none'"
    onmouseout="document.getElementById('events').style.display='block'">
    Hover for hiding para
    </button>

    <p id="events">Hello World!</p>

    <p>---------------- variables ----------------</p>


    Date: 02/20/2017
    Lab-07

    <button type="button" onclick="add(3,5)">Add 3,5</button>


    <p id="addResult"></p>

    </body>
    </html>

    Javascript Code:
    function date(){
    document.getElementById('datePara').innerHTML = Date()
    }
    function font(){
    document.getElementById('changeFontPara').style.fontSize='30px'
    }
    function hide(){
    document.getElementById('hideDisplayPara').style.display='none'
    }
    function display(){
    document.getElementById('hideDisplayPara').style.display='block'
    }
    function changeImage1(){
    document.getElementById('image').src='star_wars.jpg'
    }
    function changeImage2(){
    document.getElementById('image').src='star_trek.jpg'
    }
    function add(a, b){
    document.getElementById('addResult').innerHTML = a+b;
    }
    Date: 02/20/2017
    Lab-07

    Output:
    Date: 02/20/2017
    Lab-07

    You might also like