Scribd Logo
Upload

Welcome to Scribd!

  • 8th Css

    Uploaded by

    Ganesh Ekambe
    5 views6 pages

    Original Title

    8th css

    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

    Copyright:

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

    8th Css

    Uploaded by

    Ganesh Ekambe

    Copyright:

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

    Client side Scripting Language (22519)

    Name of Student: Ekambe Ganesh Roll No.: 53


    Practical No. 08

    Code.
    1. Onload Events

    <html>
    <head>Javascript Events</head>
    </br>
    <body onload="window.alert('Page successfully loaded');">
    <script>
    document.write("The page is loaded successfully");
    </script>
    </body>
    </html>

    Output
    Client side Scripting Language (22519)

    Name of Student: Ekambe Ganesh Roll No.: 53


    Practical No. 08

    2. On Change :

    <!DOCTYPE html>
    <html>
    <body>
    <p>Select a new car from the list.</p>
    <select id="mySelect" onchange="myFunction()">
    <option value="Audi">Audi</option>
    <option value="BMW">BMW</option>
    <option value="Mercedes">Mercedes</option>
    <option value="Volvo">Volvo</option>
    </select>
    <p>When you select a new car, a function is triggered which outputs the value
    of the selected car.</p>
    <p id="demo"></p>
    <script>
    function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "You selected: " + x;
    }
    </script>
    </body>
    </html>

    Output
    Client side Scripting Language (22519)

    Name of Student: Ekambe Ganesh Roll No.: 53


    Practical No. 08

    3. On color change

    <!DOCTYPE html>
    <html>
    <head>
    <h1> Color change</h1>
    <style>
    input[type="radio"] {
    margin-right: 10px;
    }
    input[type="text"] {
    padding: 5px;
    width: 200px;
    }
    </style>
    </head>
    <body>
    <h1>Choose a Color:</h1>
    <form>
    <label><input type="radio" name="color" value="red"> Red</label>
    <label><input type="radio" name="color" value="green"> Green</label>
    <label><input type="radio" name="color" value="blue"> Blue</label>
    </form>
    <br>
    <input type="text" id="colorInput" placeholder="Type something...">

    <script>
    // Get references to the radio buttons and the text input
    const redRadio = document.querySelector('input[value="red"]');
    const greenRadio = document.querySelector('input[value="green"]');
    const blueRadio = document.querySelector('input[value="blue"]');
    const colorInput = document.getElementById('colorInput');

    redRadio.addEventListener('change', function() {
    if (this.checked) {
    colorInput.style.backgroundColor = 'red';
    }
    Client side Scripting Language (22519)

    Name of Student: Ekambe Ganesh Roll No.: 53


    Practical No. 08

    });

    greenRadio.addEventListener('change', function() {
    if (this.checked) {
    colorInput.style.backgroundColor = 'green';
    }
    });

    blueRadio.addEventListener('change', function() {
    if (this.checked) {
    colorInput.style.backgroundColor = 'blue';
    }
    });
    </script>
    </body>
    </html>

    Output

    4. Key up
    <!DOCTYPE html>
    <html>
    <head>
    Client side Scripting Language (22519)

    Name of Student: Ekambe Ganesh Roll No.: 53


    Practical No. 08

    <title> keyup function in javascript </title>


    <style>
    #datas {
    color: green;
    }
    </style>
    </head>
    <body>
    <h2> JavaScript keyup Method </h2>
    <div id = "demoDIV" >
    The javascript keyup event works after pressing the key and key in the
    up position on the specific tag.
    </div>
    <input type = "text" id = "key_class" placeholder = "write here."
    onkeyup = "keyUpFunction()">
    <p id = "datas"> </p>
    <script>
    function keyUpFunction() {
    alert("JavaScript keyUp function activates successfully!!!");
    document.getElementById("datas").innerHTML = "JavaScript keyUp
    function activates successfully!!!";
    }
    </script>
    </body>
    </html>
    Output

    5. Onsubmit and onreset

    <!DOCTYPE html>
    <html>
    Client side Scripting Language (22519)

    Name of Student: Ekambe Ganesh Roll No.: 53


    Practical No. 08

    <head>
    <title>Form Events</title>
    <script>

    function handleSubmit(event) {
    event.preventDefault();
    alert('Form submitted!');
    }
    function handleReset() {
    alert('Form reset!');
    }
    </script>
    </head>
    <body>
    <form onsubmit="handleSubmit(event)" onreset="handleReset()">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <br>
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
    </form>
    </body>
    </html>
    Output

    You might also like