Scribd
Upload
53 views

Web Tech

This document contains code and instructions for 5 JavaScript demos: 1) Alert boxes to display messages 2) Confirm boxes to confirm user actions 3) Prompt boxes to get user input 4) Displaying the current date and time 5) Form validation using JavaScript The demos show how to use common JavaScript methods like alert, confirm, prompt, and manipulating the DOM to add interactivity to web pages.

Uploaded by

panchalkushal478
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
53 views

Web Tech

This document contains code and instructions for 5 JavaScript demos: 1) Alert boxes to display messages 2) Confirm boxes to confirm user actions 3) Prompt boxes to get user input 4) Displaying the current date and time 5) Form validation using JavaScript The demos show how to use common JavaScript methods like alert, confirm, prompt, and manipulating the DOM to add interactivity to web pages.

Uploaded by

panchalkushal478
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy