Exercise-2 MSD Lab Programs

The document outlines two exercises focused on JavaScript: one on inheritance and the other on creating a login module. Exercise 2(a) involves creating an Employee class that extends a Person class, while Exercise 2(b) requires developing a User class for login validation. Each exercise includes specific steps for creating HTML and JavaScript files, along with source code examples and expected outputs.

Uploaded by

sacet chirala

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

11 views7 pages

Exercise-2 MSD Lab Programs

Uploaded by

sacet chirala

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 7

MEAN STACK DEVELOPMENT LAB

Exercise -2: JavaScript - Inheritance, Modules

a).Write a JavaScript to create an Employee class extending from a base class Person.
Hints:
(i) Create a class Person with name and age as attributes.
(ii) Add a constructor to initialize the values
(iii) Create a class Employee extending Person with additional attributes role

b).Write a JavaScript to validate the user by creating a login module. Hints:

(i) Create a file login.js with a User class.
(ii) Create a validate method with username and password as arguments.
(iii) If the username and password are equal it will return "Login Successful"
else will return "Unauthorized access".

Exercise -2(a) : JavaScript – Inheritance

AIM:
a).Write a JavaScript to create an Employee class extending from a base class Person.
Hints:
(i) Create a class Person with name and age as attributes.
(ii) Add a constructor to initialize the values
(iii) Create a class Employee extending Person with additional attributes role

Procedure Steps for Exercise -2(a) Program:

1. Create a MSD LAB folder in D:/ drive and create a subfolder Exercise -2 under the
MSD LAB folder and create 2.a folder in Exercise -2 folder.
2 .Create a file Inheritance.html in 2.a folder.
3.Type and save the code for Inheritance.html file
4. Run the Inheritance.html file then output will be displayed on the web page.

SOURCE CODE: Inheritance.html

<!DOCTYPE html>
<html>
<head>
<title> Employee Details</title>
<style>
.mydiv {
text-decoration: bold;
text-align: left;
margin-top: 10px;
width: 700px;
height: 550px;
border: 6px solid purple;
text-align: center;
color: blue;
background-color: #c7f15e;
font-family: verdana;
font-size:25pt;
}
</style>
</head>
<body bgcolor="pink">
<center>
<h1 style="color:red;font-size:40pt;"><b>Creating and Inheriting Classes </b></h1>
<div class="mydiv">
<script type="text/javascript">
class Person
{
constructor(name, age,empid)
{
this.name = name;
this.age = age;
this.empid = empid;
}
}
class Employee extends Person
{
constructor(name, age,empid,job,salary,mobileno,emailid,role)
{
super(name, age,empid);
this.job=job;
this.salary=salary;
this.mobileno=mobileno;
this.emailid=emailid;
this.role = role;
}
getEmployeeDetails()
{
document.write("<br><br>*** EMPLOYEE INFORMATION ***<br>");
document.write(" <br> Name : "+this.name);
document.write(" <br> Age : ",this.age);
document.write("<br> Empid : ",this.empid);
document.write("<br> Job : ",this.job);
document.write("<br> Salary : ",this.salary);
document.write("<br>Mobile No : ",this.mobileno);
document.write("<br>Email Id : ",this.emailid);
document.write("<br> Job Role : ",this.role);
}
}
let employee1 = new Employee("Karth", 25,"Sacet180", "Software",100000,
9110307238,"Dr [email protected]","Software Manager");
employee1.getEmployeeDetails();
</script>
</div>
</body>
</html>

OUTPUT: 2.a
Exercise -2(b) : JavaScript – Modules

AIM:
b).Write a JavaScript to validate the user by creating a login module. Hints:
(i) Create a file login.js with a User class.
(ii) Create a validate method with username and password as arguments.
(iii) If the username and password are equal it will return "Login Successful"
else will return "Unauthorized access".

Procedure Steps for Exercise -2(b) Program:

1 . Create 2.b folder in Exercise -2 folder.
2. Creating Loginmodule.html and Login.js files in 2.b folder.
3.Type and save the code for both files in VS Code..
4. Run the Loginmodule.html file then output will be displayed on the web page.

SOURCE CODE: Loginmodule.html

<!DOCTYPE html>
<html>
<head>
<title>Creating a Login Module</title>
<style>
.mydiv {
text-decoration: bold;
margin-top: 10px;
width: 600px;
height:400px;
border: 5px solid purple;
text-align: center;
color: blue;
background-color: #c7f15e;
font-family: verdana;
font-size:25pt;
padding: 20px;
}
</style>
</head>
<body style="background-color:#F0E68C;">
<center>
<h1 style="color:red;font-size:35pt;">Creating a Login Module</h1>
<div class="mydiv">
<script src="Login.js">
</script>
<form id="login-form">
<br><br>
<label for="username"><b>Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password"><b>Password:</label>
<input type="password" id="password" name="password"><br><br>
    <input type="submit" value="Login"
onclick="validate()">   <input type="reset" value="Reset">
<br><br>
<div id="result"></div>
</center>
</body>
</html>

class User {
constructor(username, password)
{
this.username = username;
this.password = password;
}
validate() {
if (this.username === this.password) {
return "Login Successful!";
}
else {
return "Unauthorized Access!";
}
}
}
function validate() {
form = document.getElementById('login-form');
resultDiv = document.getElementById('result');
username = document.getElementById('username').value;
password = document.getElementById('password').value;
event.preventDefault();
const user = new User(username, password);
const result = user.validate();
resultDiv.innerHTML = result;
}
OUTPUT: 2.b