Pandit Deendayal Energy University, Gandhinagar
School of Technology
Department of Computer Science & Engineering
Introduction to Web Technology
(23CP306P)
Name: ADITTI MALL
Enrolment No: 21BCP198
Semester: V
Division: 3 (G6)
Branch: Computer Science Engineering
Practical :- 2
AIM:
Implement JavaScript functionality to make interactive webpages
HARDWARE REQUIREMENT:
• Laptop OR Computer
SOFTWARE REQUIREMENT:
• Notepad Version 22H2 (OS Build19045.3324) OR Notepad OR VS Code
KNOWLEDGE REQUIREMENT:
Understanding of JAVASCRIPT.
THEORY:
JavaScript is a versatile scripting language that empowers web developers to create
interactive and dynamic webpages. It can be used to manipulate HTML and CSS, respond to
user input, make network requests, and much more. Here are some key concepts to
understand:
1. DOM Manipulation: The Document Object Model (DOM) represents the structure
of an HTML document. JavaScript can be used to manipulate the DOM, which allows
you to add, remove, or modify HTML elements in real-time.
2. Event Handling: JavaScript can listen for and respond to events like clicks,
keypresses, and form submissions. Event listeners are used to trigger specific actions
when events occur.
3. Asynchronous Programming: JavaScript can handle asynchronous tasks, like
making network requests, without blocking the main thread. Promises and
async/await are common techniques for dealing with asynchronous code.
4. Data Manipulation: JavaScript can work with data by creating objects, arrays, and
manipulating JSON data. This is essential for creating dynamic content on webpages.
JavaScript is a versatile and widely-used programming language that is primarily used for
web development. It allows you to add interactivity, manipulate the content of web pages,
and create dynamic user interfaces. Here's a brief introduction to JavaScript:
CODE AND OUTPUT:
1. DEMO: Alert
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #333;
}
button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Demo: alert</h1>
<button onclick="displayInfo()">Display Messages</button>
<script>
function displayInfo() {
alert("This is an alert message box."); // Display string message in an alert box
alert('This is a number: ' + 100); // Display the result of concatenation in an alert box
alert(100); // Display a number in an alert box
alert(Date()); // Display the current date and time in an alert box
}
</script>
</body>
</html>
2. DEMO: Confirm
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #333;
}
button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
p#msg {
font-weight: bold;
font-size: 18px;
}
.success {
color: green;
}
.error {
color: red;
}
</style>
</head>
<body>
<h1>Demo: confirm</h1>
<button onclick="save()">Save Data</button>
<p id="msg"></p>
<script>
function save() {
var userPreference;
if (confirm("Do you want to save changes?")) {
userPreference = "Data saved successfully!";
document.body.style.backgroundColor = "#DFF0D8"; // Change background to green
on success
document.getElementById("msg").className = "success";
} else {
userPreference = "Save Canceled!";
document.body.style.backgroundColor = "#F2DEDE"; // Change background to red on
cancel
document.getElementById("msg").className = "error";
}
document.getElementById("msg").innerHTML = userPreference;
}
</script>
</body>
</html>
3. DEMO: Prompt
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
p#msg {
font-weight: bold;
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Demo: prompt</h1>
<button onclick="myinput()">Click to enter your name</button>
<p id="msg"></p>
<script>
function myinput() {
var name = prompt("Enter Your Name:");
if (name === null || name === "") {
document.getElementById("msg").innerHTML = "You did not enter anything. Please
enter your name again.";
} else {
document.getElementById("msg").innerHTML = "Hello, " + name + "! Welcome!";
}
}
</script>
</body>
</html>
4. DEMO: Current Date and Time
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #b5fd84;
text-align: center;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
color: #fe0909;
font-size: 24px;
margin-bottom: 20px;
}
p{
color: #666666;
font-size: 30px;
}
#currentDate {
font-size: 26px;
font-weight: bold;
}
#dateComponents {
margin-top: 20px;
border: 1px solid #ccc;
padding: 50px;
background-color: #fff;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
text-align: left;
}
</style>
</head>
<body>
<h1>Demo: Current Date and Time</h1>
<!-- JavaScript for displaying current date and time -->
<p id="currentDate"></p>
<script>
var currentDate = new Date();
var p1 = document.getElementById("currentDate");
p1.innerHTML = "Current Date and Time: " + currentDate;
</script>
<!-- JavaScript for displaying individual date and time components -->
<div id="dateComponents">
<p id="dateComponentsText"></p>
</div>
<script>
var d1 = new Date();
var p2 = document.getElementById("dateComponentsText");
p2.innerHTML = "Day: " + d1.getDay() + "<br>" +
"Month: " + (d1.getMonth() + 1) + "<br>" +
"Date: " + d1.getDate() + "<br>" +
"Year: " + d1.getFullYear() + "<br>" +
"Hour: " + d1.getHours() + "<br>" +
"Minutes: " + d1.getMinutes() + "<br>" +
"Seconds: " + d1.getSeconds();
</script>
</body>
</html>
5. DEMO: Form Validation Example
<!DOCTYPE html>
<html>
<head>
<title>Form Validation Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h2 {
color: #333;
}
.error {
color: red;
}
form {
max-width: 400px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
label {
font-weight: bold;
}
input[type="text"],
input[type="password"] {
width: 95%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h2>Form Validation Example</h2>
<form id="myForm" onsubmit="return validateForm()" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<span id="nameError" class="error"></span><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<span id="emailError" class="error"></span><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<span id="passwordError" class="error"></span><br>
<!-- New input for confirming the password -->
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword">
<span id="confirmPasswordError" class="error"></span><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
var confirmPassword =
document.getElementById("confirmPassword").value;
var nameError = document.getElementById("nameError");
var emailError = document.getElementById("emailError");
var passwordError = document.getElementById("passwordError");
var confirmPasswordError =
document.getElementById("confirmPasswordError");
// Reset error messages
nameError.innerHTML = "";
emailError.innerHTML = "";
passwordError.innerHTML = "";
confirmPasswordError.innerHTML = "";
var isValid = true;
if (name === "") {
nameError.innerHTML = "Name is required";
isValid = false;
}
if (email === "") {
emailError.innerHTML = "Email is required";
isValid = false;
} else if (!isValidEmail(email)) {
emailError.innerHTML = "Invalid email address";
isValid = false;
}
if (password === "") {
passwordError.innerHTML = "Password is required";
isValid = false;
} else if (password.length < 6) {
passwordError.innerHTML = "Password must be at least 6 characters
long";
isValid = false;
}
if (confirmPassword === "") {
confirmPasswordError.innerHTML = "Confirm Password is required";
isValid = false;
} else if (confirmPassword !== password) {
confirmPasswordError.innerHTML = "Passwords do not match";
isValid = false;
}
return isValid;
}
function isValidEmail(email) {
var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailRegex.test(email);
}
</script>
</body>
</html>
CONCLUSION:
JavaScript is a crucial programming language for web development. It
enables interactivity, dynamic content, and responsive web applications. Key features like
event handling, DOM manipulation, and asynchronous programming are essential. Its
versatility extends from front-end to server-side development with Node.js. Learning
JavaScript is the gateway to creating user-friendly web apps, and abundant learning resources
are available.
REFERENCES:
• https://www.w3schools.com/js
• https://www.javatpoint.com/javascript-tutorial
• https://www.geeksforgreeks.org/javascript
