Scribd
Upload
29 views

21203B0010 PR7 - CSS

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.

Uploaded by

shujaa.2003
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
29 views

21203B0010 PR7 - CSS

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.

Uploaded by

shujaa.2003
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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