Scribd Logo
Upload

Welcome to Scribd!

  • Javascript Programs Dated 10th March

    Uploaded by

    Kill TheDeath
    3 views8 pages
    The document demonstrates how JavaScript can be used to change HTML content by modifying the innerHTML of an element, validate user input, change images by modifying their src, use variables, and implement if/else statements.

    Original Description:

    Original Title

    javascript_programs_dated_10th_march

    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
    The document demonstrates how JavaScript can be used to change HTML content by modifying the innerHTML of an element, validate user input, change images by modifying their src, use variables, and implement if/else statements.

    Copyright:

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

    Javascript Programs Dated 10th March

    Uploaded by

    Kill TheDeath
    The document demonstrates how JavaScript can be used to change HTML content by modifying the innerHTML of an element, validate user input, change images by modifying their src, use variables, and implement if/else statements.

    Copyright:

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

    JavaScript Programs

    Changing HTML Content


    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First JavaScript</h1>

    <p id="demo">
    JavaScript can change the content of an HTML element.
    </p>

    <script>
    function myFunction()
    {
    x=document.getElementById("demo"); // Find the element
    x.innerHTML="Hello JavaScript!"; // Change the content
    }
    </script>

    <button type="button" onclick="myFunction()">Click Me!</button>

    </body>
    </html>

    Output:

    My First JavaScript
    JavaScript can change the content of an HTML element.

    Click Me!

    1|Page
    Validating Input
    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First JavaScript</h1>

    <p>Please input a number.</p>

    <input id="demo" type="text">

    <script>
    function myFunction()
    {
    var x=document.getElementById("demo").value;
    if(x==""||isNaN(x))
    {
    alert("Not Numeric");
    }
    }
    </script>

    <button type="button" onclick="myFunction()">Click Me!</button>

    </body>
    </html>

    Output:

    My First JavaScript
    Please input a number.

    2|Page
    Click Me!

    3|Page
    Changing HTML Images
    <!DOCTYPE html>
    <html>
    <body>
    <script>
    function changeImage()
    {
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
    element.src="pic_bulboff.gif";
    }
    else
    {
    element.src="pic_bulbon.gif";
    }
    }
    </script>

    <img id="myimage" onclick="changeImage()"


    src="pic_bulboff.gif" width="100" height="180">

    <p>Click the light bulb to turn on/off the light</p>

    </body>
    </html>

    4|Page
    Output:
    Before clicking on image:

    Click the light bulb to turn on/off the light

    After clicking on image:

    Click the light bulb to turn on/off the light

    5|Page
    JavaScript Variables
    <!DOCTYPE html>
    <html>
    <body>

    <script>
    var x=5;
    var y=6;
    var z=x+y;

    document.write(x + "<br>");
    document.write(y + "<br>");
    document.write(z + "<br>");
    </script>

    </body>
    </html>

    Output:

    5
    6
    11

    6|Page
    Local and Global Variable
    A local variable can have the same name as a global variable, but it is entirely separate; changing the
    value of one variable has no effect on the other. Only the local version has meaning inside the function
    in which it is declared.

    // Global definition of aCentaur.


    var aCentaur = "a horse with rider,";

    // A local aCentaur variable is declared in this function.


    function antiquities(){

    var aCentaur = "A centaur is probably a mounted Scythian warrior";


    }

    antiquities();
    aCentaur += " as seen from a distance by a naive innocent.";

    document.write(aCentaur);

    // Output: "a horse with rider, as seen from a distance by a naive


    innocent."

    7|Page
    If-else
    function GetReaction(newShip, color, texture, dayOfWeek)
    {
    // The test succeeds if the newShip Boolean value is true.
    if (newShip)
    {
    return "Champagne Bottle";
    }

    // The test succeeds if both conditions are true.


    if (color == "deep yellow" && texture == "large and small wrinkles")
    {
    return "Is it a crenshaw melon?";
    }

    // The test succeeds if either condition is true.


    if ((dayOfWeek == "Saturday") || (dayOfWeek == "Sunday"))
    {
    return "I'm off to the beach!";
    }
    else
    {
    return "I'm going to work.";
    }
    }

    var reaction = GetReaction(false, "deep yellow", "smooth", "Sunday");


    document.write(reaction);

    // Output: I'm off to the beach!

    8|Page

    You might also like