Department of Computer Science & Engineering
LAB MANUAL
[Link]. (Computer Science and Engineering)
Subject Name :-Web Scripting Lab
Subject Code :-CS289
INTEGRAL UNIVERSITY LUCKNOW
Dasauli, Kursi Road, PO Basha-2260
Syllabus
Experiment No. Name Of Experiment
1
Write a JavaScript program to display a welcome message on a webpage
using [Link](), [Link](), and alert().
Write a JavaScript program to demonstrate DOM manipulation using both
2
getElementById (ID selector) and getElementsByClassName (class
selector) to dynamically change the content and style of HTML elements.
Create an interactive webpage where clicking a button dynamically
3
makes an invisible division appear and dynamically bold, italic and
underline words and phrases based on user actions.
Write a JavaScript program to change background color after 5 seconds
4
of page load.
Implement JavaScript form validation to ensure required fields are
5
filled, email format is correct, and password meets security criteria.
6 Write a JavaScript program to create a simple To-Do List that allows
users to add and remove tasks dynamically
Create a calculator using Javascript.
7
8 Create a Simple Login form using ReactJS.
Implement authentication in a React Login form to allow only valid
9
users to log in, ensuring proper validation and redirection upon
successful authentication.
10 WAP to create a voting application using ReactJS.
VISION
To produce highly skilled personnel who are empowered enough to transform the society by their
education, research and innovations.
MISSION
● To offer diverse academic programs at undergraduate, postgraduate, and doctorate levels that are in line
with the current trends in Computer Science and Engineering.
● To provide the state-of-the-art infrastructure for teaching, learning and research.
● To facilitate collaborations with other universities, industry and research labs.
PROGRAM EDUCATIONAL OBJECTIVES (PEOS)
B Tech: Computer Science & Engineering
PEO1 To produce graduates who have strong foundation of knowledge and skills in the field of computer
science and engineering.
PEO2 To produce graduates who are employable in industries/public sector/research organizations or
work as an entrepreneur.
PEO3 To produce graduates who can provide solutions to challenging problems in their profession by
applying computer engineering theory and practices.
PEO4 To produce graduates who can provide leadership and are effective in multidisciplinary environment
PROGRAM SPECIFIC OUTCOMES (PSO’s)
Ability to understand the principles and working of computer systems. Students
PSO 1 have a sound knowledge about the hardware and software aspects of computer
systems.
Ability to design and develop computer programs and understand the structure
PSO 2 and development methodologies of software systems.
Ability to apply their skills in the field of algorithms, networking, web design,
PSO 3 cloud computing and data analytics.
Ability to apply knowledge to provide innovative novel solutions to existing
PSO 4 problem and identify research gaps.
Program Outcomes (PO)
PO's
● PO1: Ability to apply knowledge of science, computing and mathematics to deal with computer
engineering problems.
● PO2: Ability to analyze the computer engineering problems, formulate them in order to achieve the
solution.
● PO3: Ability to develop and design solutions based on analysis to solve engineering problems.
● PO4: Ability to handle complex and interdisciplinary engineering problems by using their research
methodology.
● PO5: Ability to apply state of the art tools and techniques in order to achieve economic solutions to the
problems.
● PO6: Ability of being aware about the existing social problems and keen to find their solutions by using
their computer engineering skills.
● PO7: Ability to provide environment friendly and sustainable solutions.
● PO8: Ability to understand their professional and ethical responsibility.
● PO9: Ability to work as an individual as well as in teams.
● PO10: Ability to communicate with the stake holders by applying their soft skills.
● PO11: Ability to manage the day-to-day challenges by optimizing the project resources.
● PO12: Ability to engage and encourage themselves in continuous learning process in order to cope up
with the rapidly growing tools and technology.
Course outcome
1. Understand the role of java script in web development.
2. Syntax and structure of JavaScript code.
3. Java Scripts to solve real world problems.
4. Utilize the Concepts of JavaScript.
5. React JS concepts to solve real world problems.
JavaScript Introduction:
JavaScript (often abbreviated as JS) is a programming language that along with HTML and CSS, is considered
one of the core technologies of the web. It's what makes web pages interactive and dynamic.
On the other hand, JavaScript is used to make Web pages interactive and is a markup language heavily used for
building web apps.
History of JavaScript:
JavaScript started life as LiveScript, but Netscape changed the name, possibly because of the excitement being
generated by [Link] JavaScript. JavaScript made its first appearance in Netscape 2.0 in 1995 with a name
LiveScript.
JavaScript is a lightweight, interpreted programming language with object-oriented capabilities that allows you
to build interactivity into otherwise static HTML pages.
JavaScript is:
JavaScript is a lightweight, interpreted programming language
• Designed for creating network-centric applications
• Complementary to and integrated with Java
• Complementary to and integrated with HTML
• Open and cross-platform
Client-side JavaScript:
Client-side JavaScript is the most common form of the language. The script should be included in or
referenced by an HTML document for the code to be interpreted by the browser.
It means that a web page need no longer be static HTML, but can include programs that interact with the user,
control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism features many advantages over traditional CGI server-side scripts. For
example, you might use JavaScript to check if the user has entered a valid e-mail address in a form field.
The JavaScript code is executed when the user submits the form, and only if all the entries are valid they would
be submitted to the Web Server.
JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions that
the user explicitly or implicitly initiates.
Advantages of JavaScript:
The merits of using JavaScript are:
Less server interaction: You can validate user input before sending the page off to the server. This saves server
traffic, which means less load on your server.
Immediate feedback to the visitors: They don't have to wait for a page reload to see if they have forgotten to enter
something.
Increased interactivity: You can create interfaces that react when the user hovers over them with a mouse or
activates them via the keyboard.
Richer interfaces: You can use JavaScript to include such items as drag-and-drop components and sliders to give a
Rich Interface to your site visitors.
Limitations with JavaScript:
We can not treat JavaScript as a full-fledged programming language. It lacks the following important features:
Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reasons.
JavaScript can not be used for Networking applications because no such support is available.
JavaScript doesn't have any multithreading or multiprocess capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that allows you to build interactivity
into otherwise static HTML pages.
JavaScript Development Tools:
One of JavaScript's strengths is that expensive development tools are not usually required. You can start with a
simple text editor such as Notepad.
Since it is an interpreted language inside the context of a web browser, you don't even need to buy a compiler.
Various vendors have come up with very nice JavaScript editing tools to simplify our lives. A few of them are
listed here:
Microsoft FrontPage: Microsoft has developed a popular HTML editor called FrontPage.
FrontPage also provides web developers with a number of JavaScript tools to assist in the creation of an
interactive website.
Macromedia Dreamweaver MX: Macromedia Dreamweaver MX is a very popular HTML and JavaScript
editor in the professional web development crowd.
It provides several handy prebuilt JavaScript components, integrates well with databases, and conforms to new
standards such as XHTML and XML.
Macromedia HomeSite 5: This provides a well-liked HTML and JavaScript editor, which will manage their
personal website just fine.
JavaScript Syntax
JavaScript consists of JavaScript statements that are placed within the <script>... </script> HTML tags in a web
page.
You can place the <script> tag containing your JavaScript anywhere within your web page, but it is preferred to
keep it within the <head> tags. 28
The <script> tag alerts the browser program to interpret all the text between these tags as a script. So, the simple
syntax of your JavaScript will be as follows
<script ...>
JavaScript code
</script>
The script tag takes two important attributes:
language: This attribute specifies what scripting language you are using. Typically, its value will be javascript.
Although recent versions of HTML (and XHTML, its successor) have phased out the use of this attribute.
type: This attribute is what is now recommended to indicate the scripting language in use and its value should be set
to "text/javascript".
So your JavaScript segment will look like:
<script language="javascript" type="text/javascript">
JavaScript code
</script>
Your First JavaScript Script:
Let us write our class example to print out "Hello World".
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
[Link]("Hello World!")
//-->
</script>
</body>
</html>
We added an optional HTML comment that surrounds our Javascript code. This is to save our code from a browser
that does not support Javascript. The comment ends with a "//-->". Here "//" signifies a comment in Javascript, so we
add that to prevent a browser from reading the end of the HTML comment in as a piece of Javascript code.
Next, we call a function [Link] which writes a string into our HTML document. This function can be used
to write text, HTML, or both. So above code will display following result:
Hello World!
Program No. -1
Write a javascript program to display a welcome message on a webpage using
[Link](), [Link](), and alert().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome Page</title>
</head>
<body>
<h2 id="welcome-container"></h2>
<script>
let welcomeMessage = "Welcome to our website!";
// Insert message into the h2 element
[Link]('welcome-container').textContent = welcomeMessage;
// Log to console
[Link](welcomeMessage);
// Show alert popup
alert(welcomeMessage);
</script>
</body>
</html>
This script performs the following actions:
1. Defines a welcome message as a string and stores it in a variable named welcomeMessage.
2. Displays the message on the webpage using the [Link]() method, which inserts HTML content
directly into the page.
3. Logs the message to the browser's console using [Link]() for debugging or developer reference.
4. Shows a pop-up alert box using alert() to immediately capture the user's attention with the welcome
message.
5. Provides a multi-channel user greeting by delivering the message visually on the page, in the developer
console, and through an alert dialog.
OUTPUT:
Program No. – 2
Write a program to demonstrate DOM manipulation using both getElementById (ID
selector) and getElementsByClassName (class selector) to dynamically change the content
and style of HTML elements.
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation Example</title>
<style>
.highlight {
color: gray;
font-size: 16px;
}
</style>
</head>
<body>
<h1 id="mainHeading">Original Heading</h1>
<p class="highlight">This is the first paragraph.</p>
<p class="highlight">This is the second paragraph.</p>
<button onclick="manipulateDOM()">Click to Manipulate DOM</button>
<script>
function manipulateDOM() {
// 1. Use getElementById to change content and style of a specific element
let heading = [Link]("mainHeading");
[Link] = "Updated Heading via getElementById!";
[Link] = "blue";
[Link] = "32px";
// 2. Use getElementsByClassName to change style and content of multiple elements
let paragraphs = [Link]("highlight");
for (let i = 0; i < [Link]; i++) {
paragraphs[i].textContent = "Updated paragraph " + (i + 1);
paragraphs[i].[Link] = "green";
paragraphs[i].[Link] = "bold";
}
}
</script>
</body></html>
OUTPUT
Program No. -3
Create an interactive webpage where clicking a button dynamically makes an invisible
division appear and dynamically bold, italic and underline words and phrases based on user
actions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive Text Styling</title>
<style>
#editor {
display: none; /* Initially hidden */
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
width: 80%;
min-height: 100px;
}
.toolbar button {
margin-right: 5px;
}
</style>
</head>
<body>
<h2>Interactive Text Editor</h2>
<!-- Show Editor Button -->
<button onclick="showEditor()">Show Editor</button>
<!-- Styling Toolbar -->
<div class="toolbar" style="margin-top:10px; display:none;" id="toolbar">
<button onclick="formatText('bold')"><b>B</b></button>
<button onclick="formatText('italic')"><i>I</i></button>
<button onclick="formatText('underline')"><u>U</u></button>
</div>
<!-- Editable Division -->
<div id="editor" contenteditable="true">
You can edit this text. Select any part and click the buttons above to style it.
</div>
<script>
function showEditor() {
// Show the editor and toolbar
[Link]("editor").[Link] = "block";
[Link]("toolbar").[Link] = "block";
}
function formatText(command) {
// Apply the text formatting (bold, italic, underline)
[Link](command, false, null);
}
</script>
</body>
</html>
OUTPUT
FOR BOLD :-
FOR ITALIC :-
FOR UNDERLINE :-
Program No:-4
Write a JavaScript program to change background color after 5 seconds of page load
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Change Background Color</title>
<style>
/* Initial background color with transition */
body {
background-color: #f0f0f0;
transition: background-color 1s;
}
</style>
<script>
// Change the background color after 5 seconds
[Link] = function () {
setTimeout(function () {
[Link] = '#3498db';
}, 5000);
};
</script>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>Watch the background color change after 5 seconds!</p>
</body>
</html>
OUTPUT
Program No. -5
Implement JavaScript form validation to ensure required fields are filled, email format is
correct, and password meets security criteria.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation</title>
<style>
.error {
color: red;
font-size: 0.9em;
margin-left: 10px;
}
input {
margin-bottom: 5px;
}
</style>
</head>
<body>
<h2>Registration Form</h2>
<form id="myForm" onsubmit="return validateForm()">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name">
<span class="error" id="nameError"></span><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email">
<span class="error" id="emailError"></span><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password">
<span class="error" id="passwordError"></span><br><br>
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
let isValid = true;
const name = [Link]('name').[Link]();
const email = [Link]('email').[Link]();
const password = [Link]('password').value;
// Clear previous errors
[Link]('nameError').textContent = '';
[Link]('emailError').textContent = '';
[Link]('passwordError').textContent = '';
// Name validation
if (name === '') {
[Link]('nameError').textContent = 'Name is required.';
isValid = false;
}
// Email validation
if (email === '') {
[Link]('emailError').textContent = 'Email is required.';
isValid = false;
} else {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if () {
[Link]('emailError').textContent = 'Invalid email format.';
isValid = false;
}
}
// Password validation
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/;
if (password === '') {
[Link]('passwordError').textContent = 'Password is required.';
isValid = false;
} else if () {
[Link]('passwordError').textContent =
'Password must be at least 8 characters long and include uppercase, lowercase, number, and special character.';
isValid = false;
}
return isValid;
}
</script>
</body>
</html>
OUTPUT
Program No. -6
Write a JavaScript program to create a simple To-Do List that allows users to add and
remove tasks dynamically
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple To-Do List</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
}
#todo-list {
margin-top: 20px;
list-style-type: none;
padding: 0;
}
li {
padding: 8px;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
button {
margin-left: 10px;
}
</style>
</head>
<body>
<h1>My To-Do List</h1>
<input type="text" id="task-input" placeholder="Enter a new task">
<button onclick="addTask()">Add Task</button>
<ul id="todo-list"></ul>
<script>
function addTask() {
const input = [Link]('task-input');
const taskText = [Link]();
if (taskText === '') return;
const li = [Link]('li');
[Link] = taskText;
const removeBtn = [Link]('button');
[Link] = 'Remove';
[Link] = function () {
[Link]();
};
[Link](removeBtn);
[Link]('todo-list').appendChild(li);
[Link] = '';
}
</script>
</body>
</html>
OUTPUT
Program No. -7
Create a calculator using Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background: #f2f2f2;
}
.calculator {
background: #fff;
padding: 20px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
#result {
width: 100%;
height: 40px;
font-size: 20px;
text-align: right;
margin-bottom: 10px;
}
.buttons button {
width: 60px;
height: 60px;
font-size: 20px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="result" disabled />
<div class="buttons">
<button onclick="clearResult()">C</button>
<button onclick="appendValue('/')">/</button>
<button onclick="appendValue('*')">*</button>
<button onclick="appendValue('-')">-</button><br/>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button onclick="appendValue('+')">+</button><br/>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button onclick="calculateResult()">=</button><br/>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button onclick="appendValue('0')">0</button>
</div>
</div>
<script>
const result = [Link]('result');
function appendValue(value) {
[Link] += value;
}
function clearResult() {
[Link] = '';
}
function calculateResult() {
try {
[Link] = eval([Link]);
} catch {
[Link] = 'Error';
}
}
</script>
</body>
</html>
OUTPUT
Program No. -8
Create a Simple Login form using React JS
import React, { useState } from 'react';
import './[Link]';
function App() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const handleSubmit = (event) => {
[Link]();
if (username === '' || password === '') {
setError('Both fields are required');
} else {
setError('');
alert(`Username: ${username}, Password: ${password}`);
}
};
return (
<div className="App">
<h1>Login</h1>
<form onSubmit={handleSubmit} style={[Link]}>
<div style={[Link]}>
<label style={[Link]}>Username</label>
<input
type="text"
value={username}
onChange={(e) => setUsername([Link])}
style={[Link]}
/>
</div>
<div style={[Link]}>
<label style={[Link]}>Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword([Link])}
style={[Link]}
/>
</div>
{error && <p style={[Link]}>{error}</p>}
<button type="submit" style={[Link]}>
Login
</button>
</form>
</div>
);
}
const styles = {
form: {
maxWidth: '400px',
margin: '0 auto',
padding: '2rem',
border: '1px solid #ddd',
borderRadius: '4px',
backgroundColor: '#fff',
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
},
inputGroup: {
marginBottom: '1rem',
},
label: {
display: 'block',
marginBottom: '0.5rem',
fontWeight: 'bold',
},
input: {
width: '100%',
padding: '0.5rem',
border: '1px solid #ddd',
borderRadius: '4px',
},
button: {
width: '100%',
padding: '0.75rem',
border: 'none',
borderRadius: '4px',
backgroundColor: '#007bff',
color: '#fff',
fontSize: '1rem',
cursor: 'pointer',
transition: 'background-color 0.3s ease',
},
marginBottom: '1rem',
},
};
export default App;
OUTPUT
Program No. -9
Implement authentication in a React Login form to allow only valid users
to log in, ensuring proper validation and redirection upon successful
authentication.
import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate } from 'react-
router-dom';
// ==========================
// Login Component
// ==========================
function Login({ setAuthenticated }) {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const navigate = useNavigate();
// Mock user data for demo
const mockUser = {
username: 'user',
password: 'pass123',
};
const handleLogin = (e) => {
[Link]();
// Simple form validation
if (!username || !password) {
setError('Both fields are required.');
return;
}
// Check credentials against mock user
if (username === [Link] && password === [Link]) {
setAuthenticated(true); // Update parent auth state
navigate('/dashboard'); // Redirect to dashboard
} else {
setError('Invalid username or password.');
}
};
return (
<div style={[Link]}>
<h2>Login</h2>
{error && <p style={[Link]}>{error}</p>}
<form onSubmit={handleLogin} style={[Link]}>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername([Link])}
style={[Link]}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword([Link])}
style={[Link]}
/>
<button type="submit" style={[Link]}>Login</button>
</form>
</div>
);
}
// ==========================
// Dashboard Component (Protected)
// ==========================
function Dashboard() {
return (
<div style={[Link]}>
<h1>Welcome to the Dashboard!</h1>
<p>You are successfully authenticated.</p>
</div>
);
}
// ==========================
// App Component with Routing
// ==========================
function App() {
const [authenticated, setAuthenticated] = useState(false);
return (
<Router>
<Routes>
{/* Public Route */}
<Route path="/" element={<Login setAuthenticated={setAuthenticated} />} />
{/* Protected Route */}
<Route
path="/dashboard"
element={authenticated ? <Dashboard /> : <Navigate to="/" />}
/>
</Routes>
</Router>
);
}
// ==========================
// Basic Inline Styling
// ==========================
const styles = {
container: {
maxWidth: '400px',
margin: '100px auto',
padding: '20px',
border: '1px solid #ccc',
borderRadius: '10px',
textAlign: 'center',
fontFamily: 'Arial, sans-serif',
},
form: {
display: 'flex',
flexDirection: 'column',
gap: '15px',
},
input: {
padding: '10px',
fontSize: '16px',
},
button: {
padding: '10px',
fontSize: '16px',
backgroundColor: '#007bff',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
},
error: {
color: 'red',
},
};
export default App
OUTPUT
Program No. – 10
WAP to create a voting application using ReactJS
[Link]
import React, { useState } from 'react'; import './[Link]';
function App() {
const [candidates, setCandidates] = useState([
{ name: 'Candidate 1', votes: 0 },
{ name: 'Candidate 2', votes: 0 },
{ name: 'Candidate 3', votes: 0 },
]);
const voteForCandidate = (index) => { const newCandidates = [...candidates];
newCandidates[index].votes += 1; setCandidates(newCandidates);
};
return (
<div className="App">
<h1>Voting Application</h1>
<div className="candidates">
{[Link]((candidate, index) => (
<div key={index} className="candidate">
<h2>{[Link]}</h2>
<p>Votes: {[Link]}</p>
<button onClick={() => voteForCandidate(index)}> Vote
</button>
</div>
))}
</div>
</div>
);
}
export default App;
[Link]
.App {
text-align: center;
font-family: Arial, sans-serif; background-color: #f9f9f9; padding: 20px;
}
h1 {
margin-bottom: 20px;
}
.candidates { display: flex;
justify-content: space-around;
}
.candidate {
border: 1px solid #ccc; border-radius: 8px; padding: 20px;
width: 200px; background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.candidate h2 { margin: 0 0 10px 0;
}
.candidate p { margin: 0 0 10px 0;
}
.candidate button { padding: 10px 20px; border: none;
border-radius: 4px; background-color: #4CAF50; color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}
.candidate button:hover { background-color: #45a049;
}
OUTPUT