Module 01

Full Stack Web Development

Intro to programming,
variables and data types
Outline

● Introduction to Programming
● Introduction to Algorithm
● Introduction to JavaScript
● Variable
● Data Types
● Type Conversion
● Operator
Introduction to Programming

● What is programming ?
● Why learn programming ?
● What is programming language ?
What is Programming ?

Programming is the process of creating a set of

instructions that tell computer to perform a
task.
Why Learn Programming ?

● Improve problem solving & logical thinking

● Grow your creativity
● Level-up your career
● Great earning potential
● Technology are ruling the world

“Everybody in this country should learn how to

program a computer … because it teaches you how to
think”
–Steve Jobs–
What is Programming Language ?

A programming language is a vocabulary and set

of grammatical rules for instructing a computer
or computing device to perform specific tasks.

Example :

Javascript, Java, Golang, PHP, C, C++, C#, etc.

Think Like a Programmer

Before we jump in to the Algorithm, let’s talk about problem solving first.

Problem-solving skills are the ability to identify problems, brainstorm and analyze answers, and
implement the best solutions. Programmers with good problem-solving skills is both a self-starter
and a collaborative teammate; they are proactive in understanding the root of a problem and work
with others to consider a wide range of solutions before deciding how to move forward.
Think Like a Programmer

Problem Step 1: You try a solution

Step 2: Try another

solution!

Step 3: If that does not

Solved
work, repeat step 2
Introduction to Algorithm

● What Is An Algorithm?
○ An algorithm is a set of step-by-step procedures, or a set of rules to follow, for completing a specific task
or solving a particular problem. Algorithms are all around us.
● Why are Algorithms Important to Understand?
○ Algorithmic thinking, or the ability to define clear steps to solve a problem, is crucial in many different
fields. Even if we’re not conscious of it, we use algorithms and algorithmic thinking all the time.
Algorithmic thinking allows you to break down problems and conceptualize solutions in terms of discrete
steps. Being able to understand and implement an algorithm requires you to practice structured
thinking and reasoning abilities.
Introduction to Algorithm

● Where are Algorithms Used as a Web Developer?

Algorithms are used in every part of IT industries. They form the field's backbone.
Algorithm gives the computer a specific set of instructions, which allows the computer to
do everything. Algorithms written in programming languages that the computer can
understand.

Computer algorithms play a big role in how social media works: which posts show up,
which ads are seen, and so on. These decisions are all made by algorithms.

Google’s programmers use algorithms to optimize searches, predict what users are going
to type, and more. In problem-solving, a big part of computer programming is knowing
how to formulate an algorithm.
Introduction to JavaScript

● What is JavaScript ?
● Why use JavaScript ?
● Setting up development environment
● Let’s write our first code !
● JavaScript code structure
What is JavaScript ?

JavaScript is a programming language. It is

lightweight and most commonly used as a part
of web pages. It is an interpreted programming
language with object-oriented capabilities.

JavaScript can execute not only in the browser,

but also on the server, or actually on any device
that has a special program called the JavaScript
engine.
What is JavaScript ?

Javascript is single-threaded, non-blocking,

asynchronous, concurrent language.

● Single-threaded means that it runs only one thing

at a time.
● Non-blocking & Asynchronous means that it
doesn't wait for the response of an API call, I/O
events, etc., and can continue the code execution.
● Concurrent means executing multiple tasks at the
same time but not simultaneously. E.g. two tasks
works in overlapping time periods.

For more information, watch this video

Why Use JavaScript ?

● Easy to Learn
● Popularity
● Large Community
● Speed
● Versatility
● Interoperability
Setting Up the Development Environment

Install the following tools & extensions :

● Visual Studio Code

○ IDE / Code editor
● QuokkaJS
○ VS Code Extension, to run your code with instant result / feedback
● Git
○ Source code management
Hello World !

Let’s write our first code !

Javascript Code Structure

Single Statement

Semicolon
Variable

Variable is a “named storage” for data. We can

use variable to store any data you need.
Example

In package delivery apps, there’s information about package

details, address, sender’s name, etc.

Variable are used to store all the information.

Code Example

Create (declare) variable

String “Hello”

Store data using assignment operator “=”

Variable Declaration

Different ways to declare variable :

● var : To create global variables

● let : To create scoped, replaceable
variables
● const : Can’t be updated or redeclared
within the scope
Variable Naming

● Must contain only letters, digits, or the symbols “$” and “_”
● The first character must not digit
● Case-sensitive
● Can’t use reserved words
Data Types

A value in JavaScript is always of a certain type.

Primitive data types : The predefined data types provided by JavaScript.

Non-primitive data types : The data types that are derived from primitive data types.

Primitive Non Primitive

String Used to represent textual data Object Is an entity having properties and methods (keyed
collection) → Will be explained in the next session
Number & BigInt Used to hold decimal values as well as values
without decimals Array Used to store more than one element under a single
variable → Will be explained in the next session
Boolean Represents a logical entity and can have two values:
true and false

Null Has exactly one value: null. Represents the

intentional absence of any object value

Undefined A variable that has not been assigned a value has

the value undefined
Data Types
Mutable vs Immutable

● Mutable is a type of variable that can be changed. (contains of: non primitive) it is also called as reference type
● Immutable are the objects whose state cannot be changed once the objects is created. (contains of: primitive)
immutable it is also called as value type.
● Declaring variable with const doesn’t make the value immutable. It depends on data type.
Mutable vs Immutable

Value types are been stored on the Stack in

our memory.
2 “Jhonny”
When storing a value type in memory, it adds
an element to the top of the stack with the
value of the newly created variable. When 1 “Jhonny”
creating a new variable and assigned the first
one to the new one, it adds a new element on
top of the stack with the value of the new The Stack
variable.
The first variable — name gets into the stack
with the value of the variable data. Then, the
newName gets into the stack in a new
memory location with the value of the
variable data.
Mutable vs Immutable

Reference types are been

stored on the Heap. The Heap,
indifference from the stack, has
no order of how to store the 4 newPerson Pointer

data.

When storing a reference type in 3 PersonPointer

memory, it adds a new element
to the top of the stack, when its
value is a pointer/reference to 2 “Jhonny”
the address of the object that
{
has been stored on the heap. name: ‘Jhonny’,
1 “Jhonny” age: 26
}

The Stack The Heap

Mutable vs Immutable

Immutable

Try to change value in newName

variable, check out the result! 4 newPerson Pointer

Does that change name variable

value? 3 PersonPointer

2 “Jhonny”
{
name: ‘Jhonny’,
1 “Jhonny” age: 26
}

The Stack The Heap

Mutable vs Immutable

Mutable

Try to change value in

newPerson variable, check out 4 newPerson Pointer

the result!

Does that change Person 3 PersonPointer

variable value?

2 “Jhonny”
{
name: ‘Jhonny’,
1 “Jhonny” age: 26
}

The Stack The Heap

Mutable vs Immutable

With that in mind, we can say

that a value type is immutable
where a reference type is
4 newPerson Pointer
mutable.

3 PersonPointer

2 “Jhonny”
{
name: ‘Jhonny’,
1 “Jhonny” age: 26
}

The Stack The Heap

String Built-in Method

● slice ● padStart
● substring ● padEnd
● substr ● chartAt
● replace ● charCodeAt
● toUpperCase ● split
● toLowerCase ● indexOf
● concat ● lastIndexOf
● trim ● search
Template Literals

● Template literals (template strings) allow you to use

strings or embedded expressions in the form of a
string.
● Template literals are enclosed by backtick (`)
characters instead of double or single quotes.
● With template literals, you can get :
○ A multiline string → a string that can span multiple lines.
○ String formatting → the ability to substitute part of the
string for the values of variables or expressions. This
feature is also called string interpolation.
○ HTML escaping → the ability to transform a string so that
it’s safe to include in HTML.
Number Built-in Method

Number built-in method Global built-in method & property

● toString ● Number
● toExponential ● parseInt
● toFixed ● parseFloat
● toPrecision
● valueOf
● MAX_VALUE
● MIN_VALUE
● POSITIVE_INFINITY
● NEGATIVE_INFINITY
● NaN
Type Conversion

● String Conversion
○ String(123) // return a string from a number literal 123
● Numeric Conversion
○ const num = "3" * "3" // return 9 in number
○ Number("3.14") // return 3.14 in number
● Boolean Conversion
○ Boolean(1) // return true
○ Boolean(0) // return false
○ Boolean("Hello") // return true
○ Boolean("") // return false
Date Data Type

It stores the date, time and

provides methods for date/time
management.
Date Built-in Method

Get Methods Set Methods

● getFullYear ● setDate
● getMonth ● setFullYear
● getDate ● setHours
● getHours ● setMilliseconds
● getMinutes ● setMinutes
● getSeconds ● setMonth
● getMilliseconds ● setSeconds
● getTime ● setTime
● getDay
● Date.now
● Date.parse
Basic Operators

Operator Description

+ Addition

- Subtraction

* Multiplication

/ Division

% Remainder (modulo)

** Exponentiation
Unary, Binary and Operand

● An operand is what operators are applied to. For instance, in the multiplication of 5 * 2 there
are two operands: the left operand is 5 and the right operand is 2. Sometimes, people call these
“arguments” instead of “operands”.
● An operator is unary if it has a single operand. For example,
the unary negation - reverses the sign of a number.

● An operator is binary if it has two operands. The same

minus exists in binary form as well.
String Concatenation with binary “+”

Note : Only work with binary “+”. Other arithmetic operators work only with numbers
and always convert their operands to numbers.
Modify in Place

We often need to apply an operator to a variable and store the new result in that same variable.
Increment & Decrement

● Increasing or decreasing a number by one is

among the most common numerical
operations.
● Increment ++ increases a variable by 1.
● Decrement -- decreases a variable by 1
Postfix & Prefix Form

● The operators ++ and -- can be placed

either before or after a variable.
● When the operator goes after the variable, it
is in “postfix form”: counter++.
● The “prefix form” is when the operator goes
before the variable: ++counter.
● If we’d like to increase a value and
immediately use the result of the operator,
we need the prefix form
● If we’d like to increment a value but use its
previous value, we need the postfix form
Comparisons

Operator Description

== Equal

!= Not equal

> Greater than

< Less than

>= Greater than equal

<= Less than equal

=== Strict Equality

Introduction to Pseudocode

Before we start our exercise on the next

slides, let’s talk about Pseudocode first.
Pseudocode is basically an
“easier-to-understand” version of
programming languages, usually in the form of
simple natural language.
Through pseudocode, you can express
detailed step-by-step process in a much
simpler language.
Exercise

Since you already know about pseudocode, let’s solve this exercise through pseudocode first, and
then convert it into a programming code!

● Write a code to find area of rectangle.

● Write a code to find perimeter of rectangle.
● Write a code to find diameter, circumference and area of a circle.
● Write a code to find angles of triangle if two angles are given.
● Write a code to get difference between dates in days.
● Write a code to convert days to years, months and days.
○ Example : 400 days → 1 year, 1 month, 5 days
○ 1 year : 365 days, 1 month : 30 days
Thank You!