Client Side Coding

Thinking like a computer - basics of object

oriented programming

Florian Grassinger
[email protected]
 What is programming?
How do computers solve problems?
Programming & Problem solving

◉ Computers solve problems by performing billions of

operations per second
◉ Programmers have to find the solution and tell it the computer
somehow
◉ Programming languages allow programmers to communicate
with the computer (easily)
◉ Computers are literal and do exactly what we tell them - we
tell them basically each step (logic flow)
Programming & Problem solving

◉ The logic flow is the order in which the steps are fulfilled
◉ The steps we tell a computer to perform are completed mostly
sequential (synchronous in JS - one after another)
◉ There are steps who can be independent (asynchronous in JS)
What is an Object?
 ?
Image Source:
Icons
Let’s think in a more programmatic way!
Object-oriented programming (OOP)

◉ Helps us make the real world understandable for computers

◉ For example think of a cat:
Nr. ears: 2
color: black fur

can: lick
(clean) her
paw.

Nr. legs: 4

Nr. tail: 1
Object-oriented programming

◉ Time consuming to describe all details again and again

◉ Therefore, group them under the name “Cat” → essentially a
class
◉ Let’s us reuse the same description over and over again
◉ We can vary properties or attributes (e.g. color)
Object-oriented programming

◉ A specific cat would be an object of the class Cat

○ All cats in the world share some characteristics from the
same template or blueprint
○ We can create multiple instances or objects if we have the
blueprint with different attribute values (e.g. one cat is
brown, the other black)
○ The Cat class would be the blueprint for all individual cat
objects
◉ We could not create a house object from the cat blueprint
 CLASS CAT
A = Attribute; M = Method
A: color
A: name
A: fur type
M: eat()
M: sleep()

OBJECT 1 OBJECT 3
color = brown color = white
name = simon name: minka
fur type = short OBJECT 2 fur type = normal
Color = red brown
Name = garfield
fur type = long
Class

◉ … is a blueprint for creating objects

◉ Contains attributes (variables) and methods (functions)
◉ Attributes can be:
○ Local - they are only available within the class
○ Class specific (class variable) - which can be used without
an object of the class just by using the name
○ Instance specific (instance variable) - we need to create an
object to gain access (if granted)
◉ The same concepts apply to methods
Object

◉ … is one Instance of a specific class

◉ An object is defined by what attributes it possesses and how
they are distinct
◉ The methods allow the use of the attributes or perform certain
actions
◉ With access control we limit the access to certain methods or
attributes
Class and Object Definition

Class:
“A class is a blueprint or prototype that defines the variables and
the methods (functions) common to all objects of a certain kind.”

Object:
“An object is a instance of a class.”
Interacting with Objects / Classes

◉ Attribute values of an object can also be objects!

◉ The other objects have their own blueprint (class)
○ Can be dependent on the original (inheritance)
○ Can be standalone new class

“An object-oriented programming system is a network of

associated objects that can communicate amongst themselves.”
The four principles (pillars) of object-oriented
programming are encapsulation, abstraction,
inheritance, and polymorphism.
Abstraction

◉ Natural extension of encapsulation (next slide)

◉ Abstraction helps us reduce the complexity of our code
○ Applying abstraction each object should only a high-level
mechanism for using it
○ The mechanism should hide internal implementation
details - and only reveal relevant operations for other
objects.
○ The mechanism should be easy to use and rarely change
over time
Encapsulation

◉ Encapsulation is achieved when each object keeps its state

private, inside a class
○ Other objects don’t have direct access to this state
○ They can only call public functions - called methods
◉ Object manages its own state via methods
◉ No other class can interact except it’s allowed
◉ By default we can not change the state of the object

Let's continue our cat example →

 Encapsulation Private Part

Public Part

Image Source: Cat

Logic? :D
Inheritance

◉ Common problem: Objects share common logic but are not

entirely the same → Solution: Inheritance
◉ It means basically that we create a (child) class by deriving
from another (parent) class → We form a hierarchy
◉ The child class reuses all methods and field of the parent class
an can implement its own unique parts

Each class adds only necessary things and reuses common

logic
Inheritance
Parent Class

eat()
sleep()

Child Class Child Class

Child Class

meow()

swim()

bark()
Polymorphism

◉ Polymorphism = “many shapes” (greek language)

◉ It gives a way to use a class exactly like its parent so there is
no confusion with mixing types
◉ Each child keeps its own methods as they are
◉ This can be done by defining a parent interface
○ Outlines common methods
○ Each child class implements its own version of these
methods
 Polymorphism

Image Source:
freecodecamp
Difference: Encapsulation & Abstraction

Encapsulation (hiding data): Abstraction (hiding complexity):

◉ The “How” is something ◉ The “What” is shown to the
hidden, implemented, … outside of the class
◉ Using access modifiers like ◉ Outside End-User doesn’t
private, protected, public know how a method is
◉ Solves problems at defined
implementation level ◉ Solves problems at design
level
Summary

◉ Encapsulation - “Removing access to parts of our code and

hiding data is exactly what Encapsulation is all about.”
◉ Abstraction - “To abstract something away means to hide
away the implementation details inside something - e.g.
function.”
◉ Inheritance - “Inheritance lets one class/object (child) acquire
the properties and methods of another class/object (parent).”
◉ Polymorphism - “Same method in the inheritance chain being
able to do different things.”
How do we store data?
Data storage

◉ Data is stored in variables (like storage boxes)

◉ All variables have precise types
◉ All variables have a name in order to access them later again
Data types

◉ Types define what we can put in a variable - we have seen

one already → Objects
◉ There are primitive types
○ Boolean - can only be true or false
○ String - series of alphanumeric characters
○ Number - can contain positive or negative values and may
contain a decimal point
○ Null - presence of nothing
Data types

◉ In order to store groups of data we

use Arrays
◉ An array is a container for other
objects
◉ The array has a fixed number of
buckets (places)
◉ Array buckets can be accessed using
zero-based counting
◉ The processing very fast karton = cardboard ;)
Image Source: M. Boucher
State, logical operators & conditions
States

◉ States let the computer make decisions

◉ There are booleans which only have two values true or false
→ computer can respond in simple statements; understands
only 0 and 1
◉ The empty state is when we have planned a value for example
(variable) but it's currently empty → JS undefined
◉ The null state means it doesn’t exist at all
Logical Operators

◉ There are three key logical operators

○ NOT → with the ! symbol which flips the statement (so
true turns to false and vice versa)
○ AND → with the && symbol which requires all expressions
it connects to be true in order to be true in total
○ OR → with the || symbol which requires at least one
expressions it connects to be true to be true in total
Conditions & Comparisons

◉ Conditions use true/false to make decisions

◉ The decisions are made with if/else statements
○ if - checks if the condition is true, then it performs a
specific action
○ else - happens if the condition is false
◉ Often included are the comparison operators
○ (equal) greater than: >=
○ (equal) smaller than: <=
○ equal: =
 Loops

Image Source: Gifs

Loops

◉ There are various loops. Common ones are while and for
◉ The while loop is used when we know the end state, but not
the number of iterations
◉ The for loop is used when we know the exact number of
iterations

Watch out for infinite loops!

Functions

◉ … should focus on a specific task

◉ … contain a series of instructions (easy reuse)
◉ … are named
◉ … are called by name
◉ … accept additional parameters
◉ … help us perform repetitive tasks

Image Source: M. Boucher

Functions

◉ Functions should be clean and understandable

(documentation helps)
◉ Following 4 basic steps:
1. Define the function goal
2. Define the end result
3. Define the required input
4. Implement the function logic
◉ Functions can receive values → Parameters
◉ Functions can return something → Return values