Scribd
Upload
19 views

l7. Object in JS, Cse 202, Bn11

JavaScript

Uploaded by

Saurav Barua
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
19 views

l7. Object in JS, Cse 202, Bn11

JavaScript

Uploaded by

Saurav Barua
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/ 13

Course Code: CSE 202

Course Title: Computer Programming Lab


Lecture 7: Object in JS
Course Teacher: Saurav Barua (SB)
Assistant Professor, Dept. of CE, DIU
Phone: +88-01715334075
Email: [email protected]
Contents

What is Object How to create Syntax for an


. Objects Object

Worked out Practice problems


Accessing
project for on object
properties
object

2
Objects
✓ An object in JavaScript is a data structure used to
store related data collections.
✓ It stores data as key-value pairs, where each key is
a unique identifier for the associated value.
✓ Objects are dynamic, which means the properties
can be added, modified, or deleted at runtime.

3
How to create object?

There are two primary ways to create an object in JavaScript:


❑ Object Literal and
❑ Object Constructor.

4
Syntax for an object
Syntax:
const obj = {
property1: value1, // property name may be an identifier
property2: value2, // or a number
"property n": value3, // or a string
};

• Each property name before colons is an identifier (either a name, a number,


or a string literal), and each valueN is an expression whose value is assigned
to the property name.
• The property name can also be an expression; computed keys need to be
wrapped in square brackets.
5
Accessing properties
Syntax:
obj.make = “Ford”; // Dot notation
obj[“year”] = 1969; //Bracket notation

• You can access a property of an object by its property name. Property


accessors come in two syntaxes: dot notation and bracket notation.

6
Worked out project
7.0 Project name: Program to create objects and display value in the
browser. (Create objects of 3 employees, where properties will be
name, age, occupation, income and Professional License and display
name of 4th person and income of third person)

Google drive link:


https://drive.google.com/drive/folders/15NS4cuLZV1BMMEMprq0V
vNQ9xiiqWvfu?usp=drive_link

Github link:
https://github.com/sauravbarua02/ConstructionEmployeeList
7
Interface

8
html codes
<!DOCTYPE html> <div id="income"></div>
<html lang="en">
<head> </div>
<meta charset="UTF-8">
<meta name="viewport" <script src="app.js"></script>
content="width=device-width, initial- </body>
scale=1.0"> </html>
<title>Object Create</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="name"></div>
<br>

9
css codes

body{
margin: 0px;
background-color: rgba(82,141,77,0.6); display: flex;
} flex-direction: column;
.container{ justify-content: center;
background-color: rgba(82,141,77,0.8); align-items: center;
width: 400px; border-radius: 10px;
height: 300px; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.8);
margin: 30px auto; }
padding: 10px;

10
JS codes const person3 = {
//Program to create objects. name: "Squid Ward",
nameEl = document.getElementById("name"); age: 62,
incomeEl = occupation: "Mason",
document.getElementById("income"); income: 15000,
professionalLicense: true
const person1 = { }
name: "Pearl Krabs",
age: 35, const person4 = {
occupation: "Welder", name: "Sponge bob",
income: 12000, age: 37,
professionalLicense: true occupation: "Engineer",
} income: 40000,
professionalLicense: true
const person2 = { }
name: "Karen Plankton",
age: 40, nameEl.innerText = "Name of person 4 is " +
occupation: "Plumber", person4.name;
income: 13000, incomeEl.innerText = "Income of person 3 is "
professionalLicense: false + person3.income +" BDT/month";
} 11
Class tasks
Task 7.1: Program to create objects of 3 students, where properties will be name, ID
and CGPA and display CGPA of third student in the browser.
Task 7.2: Program to create objects of 5 employees in a corporate office, where
properties will be name, position and salary and display name of forth employee in
the browser.
Task 7.3: Program to create objects of 3 soil samples for lab tests, where properties
will be location, soil type, sample collection depth and display soil type of second
sample in the browser.
Task 7.4: Program to create objects of 4 members of a volunteer club, properties will
be name, hobby and premierMembership and display PremierMembership of third
member in the browser. (hints: premier membership will be true or false)
Task 7.5: Program to create objects of 3 members in a roadside OD survey, properties
will be origin, destination, travel time and display travel time of second respondents
in the browser. 12
End of the Lecture

13

You might also like