Scribd Logo
Upload

Welcome to Scribd!

  • 21203B0010 PR7 - CSS

    Uploaded by

    shujaa.2003
    7 views7 pages
    This document contains code snippets and explanations related to implementing form events and dynamic content in web pages using JavaScript. It includes two programs - one that triggers an alert pop-up when a button is clicked, and another that writes messages when a mouse enters or leaves a division. It also lists questions about JavaScript intrinsic functions, common events for checkboxes and buttons, and the deprecated "with" keyword. Finally, it provides exercises to dynamically update an option list when a button is clicked and generate an email automatically based on entered first and last names.

    Original Description:

    Original Title

    21203B0010 PR7_CSS

    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
    This document contains code snippets and explanations related to implementing form events and dynamic content in web pages using JavaScript. It includes two programs - one that triggers an alert pop-up when a button is clicked, and another that writes messages when a mouse enters or leaves a division. It also lists questions about JavaScript intrinsic functions, common events for checkboxes and buttons, and the deprecated "with" keyword. Finally, it provides exercises to dynamically update an option list when a button is clicked and generate an email automatically based on entered first and last names.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    7 views7 pages

    21203B0010 PR7 - CSS

    Uploaded by

    shujaa.2003
    This document contains code snippets and explanations related to implementing form events and dynamic content in web pages using JavaScript. It includes two programs - one that triggers an alert pop-up when a button is clicked, and another that writes messages when a mouse enters or leaves a division. It also lists questions about JavaScript intrinsic functions, common events for checkboxes and buttons, and the deprecated "with" keyword. Finally, it provides exercises to dynamically update an option list when a button is clicked and generate an email automatically based on entered first and last names.

    Copyright:

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

    DEPARTMENTOFCOMPUTERENGINEERING

    Course: Computer Engineering Class: CO5IB

    Semester: 5 Course: Client-Side Scripting (22519)


    Laboratory No: L001 Name of Subject Teacher: Prof. Omkar

    Name of Student: Dhriti Pandya Roll Id: 21203B0010

    Experiment No: 7

    Title of Create a webpage to implement form events. Part 1


    Experiment
    • Program Code 1:
    <html>
    <head>
    <script>
    function sayHello() {
    alert("Hello World")
    }
    </script>
    </head>
    <body>
    <p>Click the following button and see result</p>
    <form>
    <input type="button" onclick="sayHello()" value="Say Hello" />
    </form>
    </body>
    </html>

    • Program Code 2:
    <html>
    <head>
    <script>
    function over() {
    document.write ("Mouse Over");
    }
    function out() {
    document.write ("Mouse Out");
    }
    </script>
    </head>
    <body>
    <p>Bring your mouse inside the division to see the result:</p>
    <div onmouseover="over()" onmouseout="out()">
    <h2> This is inside the division </h2>
    </div>
    </body>
    </html>

    • Practical Related Questions:

    1) Explain Java Intrinsic functions.


    Java intrinsic functions are low-level operations built into the Java Virtual Machine (JVM). They
    are designed for efficiency and optimized for specific hardware platforms, such as processors.
    These functions include tasks like memory copying, synchronization, and mathematical
    operations, offering performance improvements by bypassing standard Java code for critical
    operations.
    2) Write the events which are used checkbox and buttons.
    Checkboxes and buttons in HTML can trigger various events when interacted with. Checkbox
    events include "change" when the checkbox state is altered, "click" when it's clicked, and
    "input" as the state changes. For buttons, the "click" event is the most common, responding to
    a button press. Developers can attach event listeners to these events to execute JavaScript
    functions, enabling dynamic web interactions, form submissions, and user input handling.

    3) Explain the use of with keyword in java script.


    The ‘with’ keyword was used in the past to simplify code by creating a temporary scope where
    the properties of an object could be accessed without explicitly referencing the object.
    However, it has been deprecated in modern JavaScript and is not recommended for use. As of
    ECMAScript 5 (ES5), using the with statement can lead to performance issues and can make
    your code harder to understand and maintain.
    Example:
    var person = {
    name: "John",
    age: 30,
    };
    with (person) {
    console.log(name); // This is the same as person.name
    console.log(age); // This is the same as person.age
    }
    4) What is the use of oncontextmenu event?
    The oncontextmenu event in JavaScript is used to detect when the context menu, typically
    triggered by a right-click on an element, is about to be displayed. You can use this event to
    control or customize what happens when a user right-clicks on an element, such as preventing
    the default context menu from appearing or triggering a custom context menu.
    • Exercise:
    1) Write a program for changing the option list dynamically.

    <html>
    <head>
    <title>Dynamic Option List</title>
    </head>
    <body>
    <label for="dynamicSelect">Choose a fruit:</label>
    <select id="dynamicSelect">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
    </select>
    <button id="changeOptions">Change Options</button>

    <script>
    // Get references to the select element and the button
    const selectElement = document.getElementById("dynamicSelect");
    const changeButton = document.getElementById("changeOptions");

    // Event listener for the button click


    changeButton.addEventListener("click", function() {
    // Clear the current options
    selectElement.innerHTML = "";

    // Define a new set of options


    const newOptions = [
    { value: "grape", text: "Grape" },
    { value: "kiwi", text: "Kiwi" },
    { value: "mango", text: "Mango" },
    ];

    // Add the new options to the select element


    newOptions.forEach(optionData => {
    const option = document.createElement("option");
    option.value = optionData.value;
    option.textContent = optionData.text;
    selectElement.appendChild(option);
    });
    });
    </script>
    </body>
    </html>
    2) Develop a program for as we enter the firstname and lastname , email is
    automatically generated.
    <html>
    <head>
    <title>Email Generator</title>
    </head>
    <body>
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" placeholder="Enter First Name"><br>

    <label for="lastName">Last Name:</label>


    <input type="text" id="lastName" placeholder="Enter Last Name"><br>

    <label for="email">Generated Email:</label>


    <input type="text" id="email" disabled><br>

    <button id="generateEmail">Generate Email</button>

    <script>
    // Get references to input elements and the button
    const firstNameInput = document.getElementById("firstName");
    const lastNameInput = document.getElementById("lastName");
    const emailInput = document.getElementById("email");
    const generateButton = document.getElementById("generateEmail");

    // Event listener for the Generate Email button


    generateButton.addEventListener("click", function() {
    const firstName = firstNameInput.value.trim();
    const lastName = lastNameInput.value.trim();

    if (firstName && lastName) {


    const generatedEmail = firstName.toLowerCase() + "." + lastName.toLowerCase() +
    "@example.com";
    emailInput.value = generatedEmail;
    } else {
    alert("Please enter both first name and last name.");
    }
    });
    </script>
    </body>
    </html>

    You might also like