Introduction To JavaScript - Object Oriented Programming

CDEV
DBAV
Introduction to JavaScript: Object-

Oriented Programming
Week 03.
SOFTWARE CLUSTER
[ CDEV • Coding and Development Project ] [ DBAV • Database Applicati on Development ] 1
Objectives
• Describe the basic structure of a Class in JavaScript;

• Describe the concept of Object and its usage in Object-Oriented
Programming;
• Demonstrate how to create and use custom objects in JavaScript.
TEMASEK POLYTECHNIC I School of Informati cs & IT 2

Tools Required
• Visual Studio Code

• Node.js
• Browser
• Google Chrome (recommended)
• Mozilla Firefox

WHAT IS OBJECT-ORIENTED
PROGRAMMING?
4
Before the Use of Computers…
Monthly statements of rates collected (1912 – 1920) Old Barclays bank book. The page shown here shows all
transactions in 1913!
• Before the use of computers, transferring money from one bank account to another required the
use of paper and pen.
• Tons of papers were used to store information such as customers’ bank account(s) details,
transactions of money transferred, etc.
• It was a tedious, slow and painful job, and easily prone to human errors.
With the Use of Computers…
• With the use of computers, transferring money from one bank account to
another requires a way to represent such real world process in digital form.
• There is no need for tons of papers to be used but there is still a need to
store, manipulate and transfer data/information.
• There is no need for using pen to record information but there is now a
need to write computer programs to automate the whole process of money
transfer.
• Object-Oriented Programming provides a way to implement real world
processes, such as the above, in the digital medium.

Object-Oriented Programming Languages
• There are many languages that supports Object-Oriented

Programming.
• The following lists some of these languages:
• Simula 67
• Smalltalk
• Java
• C++
• JavaScript
• Python
• C#

What is an Object?
• An Object is something that we perceived in the real world that has states and behaviours.
• For instance, in the previous example a Bank Account is an object that could have the following states:
• Customer Name
• NRIC
• Account Number
• Account Type
• Amount
• Activation
• And the following behaviours:

• Activate Account
• Deactivate Account
• Debit Amount
• Credit Amount

What is an Object?
• Another example of an Object is a Dog.

• For instance, a Dog could have the following states:
• Name
• Breed
• Gender
• Age
• And the following behaviours:
• Barking
• Wag the tail
• Drinking
• Jumping

Class Diagram
• For documentation purpose, we can use a Class Diagram to

represent Objects (so that it is easier to read) as shown in the
following examples:
Class Name BankAccount Dog
Name: String Name: String

NRIC: String RegistrationNumber: String
AccountNumber: String Breed: String
States AccountType: String Gender: char
Amount: double Age: int
Activation: boolean
Barking()
ActivateAccount() WagTheTail()
DeactivateAccount() Drinking()
Behaviours DebitAmount() Jumping()
CreditAmount()

How to use Objects?
• In Object-Oriented Programming, we make use of Objects to group,

transfer and manipulate data.
• As you can see from the previous examples, the data/information of
Bank Account and Dog are contained in their respective states.
• The behaviours in each of them can be created to manipulate their
data.
• So how do we create Objects in our program to use them?
• We will talk about this in the next section.

Object-Oriented Programming References
• Wikipedia
• https://en.wikipedia.org/wiki/Object-oriented_programming
• IBM: Object-oriented programming concepts and principles
• https://www.ibm.com/developerworks/library/j-perry-object-oriented-progr
amming-concepts-and-principles/index.html

OBJECT-ORIENTED PROGRAMMING IN
JAVASCRIPT
13
How to Create Objects?
• JavaScript has different ways to create Object.

• We will use class declaration that is similar to Java, to implement
Objects in JavaScript.
• A Class is a blueprint for an Object that we write in code form.
• We represent the states and behaviours of an Object using a Class in
code form.

How to Create Object States?
• Let’s start with creating a BankAccount class and its

states first.
• Under your website folder, create a folder called
models.
• Under the models folder, create a file called
BankAccount.js.
• Object states are created using variables.
• Add the code on the right to the BankAccount.js file.
• Notice that in JavaScript, the constructor is a keyword
and the state variables are created in the constructor.
• In the next slide, we will compare the differences
between Java and JavaScript.

How to Create Object States?
Java JavaScript

How to Create Object Behaviours?
• Object behaviours are created

using method / function.
• Let’s now add the behaviours
as shown on the right into the
class.
• In the next slide, we will Behaviours
compare the differences

between Java and JavaScript.

How to Create Object Behaviours?
Java JavaScript

Test It Out
• To test if your class works, it is good

practice to create a separate testing file.
• Under your models folder, create a new
file called test.js.
• In JavaScript, in order to use the
BankAccount class in test.js, you need
to export the class from BankAccount.js.
• Open the BankAccount.js file to add the
highlighted line as shown on the right.
• Continue to next slide… Add this
line here.

Test It Out
• Open the test.js file to add the codes

on the right to test your class.
• After you save the file, open up
your Command Prompt or Terminal
and change directory to your
models folder.
• Type the following to run your
program:
• node test.js

Try It Out!
• Add additional functions to BankAccount.js to do the following:

• Get the name of the account holder
• Get the account type of the account holder
• In your test.js file, write the codes to debit $250.00 from the amount
of John Loh in the example.
• Print out the name of the account holder, the account type and the
balance to the console.

Challenge
• Add an additional function to BankAccount.js to transfer amount to another account. The function
name can be “transferAmount”.
• The function should have two parameters:
1. Amount to transfer
2. The account to transfer to
• In your test.js file, write the codes to create another instance of BankAccount with the following info:
• Name: Elsa Goh
• NRIC: S7654321D
• Account Number: 113-113-113-2
• Account Type: Saving
• Activate Elsa Goh’s account
• Credit $5000.00 into Elsa Goh’s account
• Transfer $50.00 from John Loh’s account to Elsa Goh’s account.
• Print out the balance of both accounts to the console.

The End
23

Introduction To JavaScript - Object Oriented Programming

Uploaded by

Copyright:

Available Formats

Introduction To JavaScript - Object Oriented Programming

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To JavaScript - Object Oriented Programming

Uploaded by

Copyright:

Available Formats

CDEV

Introduction to JavaScript: Object-

• Describe the basic structure of a Class in JavaScript;

TEMASEK POLYTECHNIC I School of Informati cs & IT 2

• Visual Studio Code

TEMASEK POLYTECHNIC I School of Informati cs & IT 3

TEMASEK POLYTECHNIC I School of Informati cs & IT 6

• There are many languages that supports Object-Oriented

TEMASEK POLYTECHNIC I School of Informati cs & IT 7

• And the following behaviours:

TEMASEK POLYTECHNIC I School of Informati cs & IT 8

• Another example of an Object is a Dog.

TEMASEK POLYTECHNIC I School of Informati cs & IT 9

• For documentation purpose, we can use a Class Diagram to

Name: String Name: String

TEMASEK POLYTECHNIC I School of Informati cs & IT 10

• In Object-Oriented Programming, we make use of Objects to group,

TEMASEK POLYTECHNIC I School of Informati cs & IT 11

TEMASEK POLYTECHNIC I School of Informati cs & IT 12

• JavaScript has different ways to create Object.

TEMASEK POLYTECHNIC I School of Informati cs & IT 14

• Let’s start with creating a BankAccount class and its

TEMASEK POLYTECHNIC I School of Informati cs & IT 15

TEMASEK POLYTECHNIC I School of Informati cs & IT 16

• Object behaviours are created

compare the differences

TEMASEK POLYTECHNIC I School of Informati cs & IT 17

TEMASEK POLYTECHNIC I School of Informati cs & IT 18

• To test if your class works, it is good

TEMASEK POLYTECHNIC I School of Informati cs & IT 19

• Open the test.js file to add the codes

TEMASEK POLYTECHNIC I School of Informati cs & IT 20

• Add additional functions to BankAccount.js to do the following:

TEMASEK POLYTECHNIC I School of Informati cs & IT 21

TEMASEK POLYTECHNIC I School of Informati cs & IT 22

You might also like