The process of programming

M1 – The Process of Programming
School of Media, Art, & Design
CWMD2601 –
Scripting for Design
4/3/2020 M1 – The Process of Programming 1

functionsreuse
decisionscondition
loops
repeat
arrays and
objects
variables
values
expressions
key elements
Programming
process
M1 – week 1
M2 – week 2
M3 – week 3
M4 – week 4 and 5
M5 – week 6, 8 and 9
(week 7 –mid term)
M6 – week 10 and 11
M7 – week 12 and 13
(week 14 – final)
Course Learning Path – 7 Modules
enhance
JavaScript
programming

M1 The Process of Programming – Objectives
Introduction to
 Algorithms
 Pseudo Code
 Flow Charts
 Essential Statements

M1 The Process of Programming – Activities (WK1)
 Explore the process of programming
 Define programming
 Identify some of the characteristics of
programming
 Introduce and define the algorithm concept
 Define several basic programming concepts and
terms that will be used in the course
 Identify the fundamental components of
programming languages

4/3/2020 M1 - The Process of Programming 5
M1 The Process of Programming – Topics
 The Programming Process
 Algorithm
 Pseudo Code
 Flow Chart
 The 6 Essential Statements
Before we start,
ask yourself: “Am I a programmer?”

4/3/2020 M1 – The Process of Programming
Recipes
-for human
Program
-for machine
Objectives
(WANT)
Programming Process – Like cooking
Instructions
(HOW)
Cooking
(baking, steaming,
pressuring…etc)
6

4/3/2020 M1 – The Process of Programming
7
Programming Process – Web Development
Recipes
(for Human)
Program
(for Machine)
Objectives
(WHAT)
Instructions
(HOW)
Cooker
(baking, steaming,
pressuring…etc)
Algorithms
Pseudo code & Flow
Chart
Statements
HTML, CSS, JavaScript
Interactive &
Dynamic Web Page
Codes
(HOW)
Interpreter
Browser
7

An algorithm is the blueprint for a program:
 Pseudo code algorithms, be described
"informally" with a mix of natural language,
math, and logic notation, e.g.
1. Step 1: getting the beef ready for cooking
2. Step 2: seasoning the beef
3. ….
4. Step n: set Air Fryer to….
 Flowchart, another algorithm type, is a diagram
or visual representation of steps and their
execution order
Algorithm: Pseudo Code and Flow Chart
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
4/3/2020 8
I&DWP
Algorithms
(PC & FC)
Statements
Interpreter
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)

 Various flowchart languages exist, but almost all of them
include the following kinds of symbols:
1. Terminal (begin/end)
2. input/output
3. process
4. decision
5. flow (order of execution)
4/3/2020 9
Algorithm - Flow Chart Symbols
SEQUENCE DECISION LOOP
I&DWP
Algorithms
(PC & FC)
Statements
Interpreter

Statements – Instructions for machines
 Run/Execute -when computer performs those steps
 Languages – low to high level, JavaScript, HMTL and CSS are
samples of high level languages
 Translations – compile vs interpret
 Syntax – language or statement rules
 Six essential statements –input, output,
declaration, assignment, decision and loop
4/3/2020 10
I&DWP
Algorithms
(PC & FC)
Statements
InterpreterA sequence of steps or instructions that a computer
understands, aka computer program
(known as IPO statements)

Statements – The 6 essential statements
 Browser – the interpreter for HTML, CSS and JavaScript
 IPO – input, process and output, 6 essentials
statements being interpreted, each has their
corresponding flow chart symbols
PROCESS
2. Create a storage and reference, called
variable
3. Compute and store a value in a variable
4. Decide which statement to perform next
5. Repeat one or more statements based on the
condition
1. Input 6. Output
4/3/2020 11
Need an engine to interpret and execute statements: START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
IPO

Summary: The Process of Web Programming
Algorithms
Pseudo code (PC)
& Flow Chart (FC)
Statements
Interactive & Dynamic
Web Page
CODES
Interpreter
Browser
The 6 Essential
Statements (IPO)
The Essential Symbols
1. Terminal
2. Input/output
3. Process
4. Decision
5. Flows:
 linear
 selection and
 repetition
Programming
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
INPUT prompt, confirm
OUTPUT alert, console.log
DECLARATION var, let, const
EXPRESSION assignment, operators
DECISION if, switch
LOOP while, for

Which of the follow(s) are samples of an
Algorithm and used in program designs?
A. A type of diagram that
represents a workflow or
process.
B. An informal high-level
description of the operating
principle of a computer
program, intended for human
reading rather than machine
reading.
C. Instructions for computer to
understand and follow
D. A standard markup language
for creating web pages

What is a high-level description of a programming
algorithm that uses simple English and is intended
for human reading?
A. Pseudocode
B. C
C. Flowchart
D. JavaScript

In creating pseudocodes: Put computer
commands on a line.
A. True
B. False

In creating pseudocodes, always start from
top to bottom.
A. True
B. False

What is a flowchart?
A. A text-based way of designing
an algorithm
B. A set of diagrams that
represents a set of
instructions

Which symbol do flowcharts begin with?
A. Rectangle
B. Circle
C. Parallelogram
D. Terminal

Which flowchart symbol represents input?
A. Rectangle
B. Circle
C. Parallelogram
D. Terminal (ovals or rectangles
with rounded corners)

Which flowchart symbol represents
condition?
A. Rectangle
B. Circle
C. Parallelogram
D. Diamond

Which flowchart symbol represents process
statements?
A. Rectangle
B. Circle
C. Parallelogram
D. Diamond

Inside the process symbol of the flow chart, there
can not be another flowchart, for modulization.
A. True
B. False
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)

How are symbols in a flowchart connected?
A. Flowchart symbols do not get
connected together
B. With dashed lines and
numbers
C. With solid lines to link events
D. With lines and arrow to show
the flow and the direction

The process of programming involves defining
program goals, designing pseudo codes or flow
charts, and writing/validating program codes.
A. True
B. False
I&DWP
Algorithms
(PC & FC)
Statements
(HTML, CSS, JS)
Interpreter
(browser)
HINT

The last step of programming process is for the
browser engine to interprets the program codes
for executions
A. True
B. False

Which of the followings are the 6 essential
statements (aka IPO statements)?
A. Input and Output
B. Declaration and Assignment
C. Decision and Loop
D. None of the above

Algorithms
Pseudo code & Flow
Chart
Statements
Interactive &
Dynamic Web Page
DESIGN AND WRITE
CODES
INTREPRET
Browser
The Process of Programming - The Takeaways
For Human
For Computer
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
The IPO
Symbols
The IPO statementsINPUT prompt, confirm
OUTPUT alert, console.log
DECLARATION var, let, const
EXPRESSION assignment, operators
DECISION if, switch
LOOP while, for

Checkout
4/3/2020 28
 GO TO DC Connect
 Select CWMD-2601… SCRIPTING FOR DESIGN
 Click “Content”
 Under “Table of Contents”, select M1 – The process of
programming
 Select M1 Checklist
 Check all those objectives are met, raise questions if not sure

The process of programming

More Related Content

What's hot (18)

Similar to The process of programming (20)

More from Kopi Maheswaran (20)

Recently uploaded (20)

The process of programming