16/06/2021
1
EECE1012
Net-Centric Introduction to Computing
Computational Thinking (part 2)
Robotic dad
• algorithm
▪ an unambiguous
specification of how
to solve a problem
in finite number of
steps and using a
finite amount of
memory
• flowchart
▪ visual presentation
of algorithms
review
1
2
16/06/2021
2
• algorithm
▪ an unambiguous
specification of how
to solve a problem
in finite number of
steps and using a
finite amount of
memory
• flowchart
▪ visual presentation
of algorithms
review
pre: a≠0, b, c  ℝ
post: depending on b2 is >, =, or < 4ac,
either “two”, “one”, or “none” is outputted
• algorithm
▪ an unambiguous
specification of how
to solve a problem
in finite number of
steps and using a
finite amount of
memory
• flowchart
▪ visual presentation
of algorithms
review
pre: a≠0, b, c  ℝ
post: depending on b2 is >, =, or < 4ac,
either “two”, “one”, or “none” is outputted
3
4
16/06/2021
3
branching (if-then-else-if)
condition
True
False
temp>26
T
F
"hot"
temp<15
T
F
"cold"
x > 26
F
"hot"
T
x >26
T
F
"hot" "mild"
if (a %6 ==0){
var res = "divisible by 6";
}
else if(a %6 !=0){
var res = " not divisible by 6";
}
else {
var res = " divisible by 6
program ended ";
}
5
6
16/06/2021
4
• algorithm
▪ an unambiguous specification of how to solve a problem in
finite number of steps and using a finite amount of memory
review
iteration (while-do loop)
condition
True
False• as long as the boolean condition
holds,the steps in the cloud
part are iterated
• normally it’s used for non
deterministic iterations
• example: rainy
True
False
use-the-umbrella
7
8
16/06/2021
5
example 10A
draw a flowchart to
keep receiving numbers
from the end-user and
output the double of
input number, until a
zero is received.
num ≠ 0 F
start
end
num
num
pre: ?
post: ?
num * 2
T

while (num != 0) {
}

example 10A
draw a flowchart to
keep receiving numbers
from the end-user and
output the double of
input number, until a
zero is received.
num ≠ 0 F
start
end
num
num
pre: ?
post: ?
num * 2
T

while (num != 0) {
}


9
10
16/06/2021
6
example 10B
draw a flowchart to
keep receiving
numbers from the
end-user and
determine if they are
positive or negative,
until a zero is
received.
num ≠ 0 F
“positive”
start
end
num
F
T
num>0
T
“negative”
num
pre: ?
post: ?
example 10B
draw a flowchart to
keep receiving
numbers from the
end-user and
determine if they are
positive or negative,
until a zero is
received.
num ≠ 0 F
“positive”
start
end
num
F
T
num>0
T
“negative”
num
pre: ?
post: ?
11
12
16/06/2021
7

while (num != 0) {
if (num > 0)

else


}
JavaScript’s while-do
num ≠ 0 F
“positive”
end
start
num
F
T
num>0
T
“negative”
num
JavaScript’s while-do
end
start
draw a flowchart to
output "hello" 10 times
• Can also be used for
deterministic iterations
pre: ?
post:
13
14
16/06/2021
8
num = 0
while (num < 10) {

num = num +1
}
JavaScript’s while-do
num < 10
F
"hello"
end
start
num
num
0
num + 1
draw a flowchart to
output "hello" 10 times
• Can also be used for
deterministic iterations
0 <10 1 <=10 1 < 11 0 <=9 2 <12 …
num = 10
while ( num <= 30 )
{

num = num +1
}
JavaScript’s while-do
num ≤ 30 F
“even”
end
start
num
F
T
num%2=0
T
“odd”
num
10
num + 1
One problem: forget to increment.
draw a flowchart to
check 10…30
15
16
16/06/2021
9
iteration (for loop)
• as long as the boolean
condition holds,the steps in
the cloud part are iterated
• normally it’s used for
deterministic iterations
• initialize a memory space
• specify how you want that
memory space be modified
after each iteration
• example:
True
False
initialization
modification
condition
T
Fi 0
i i +1
i < 10
“hello”
example 11
draw a flowchart to
output "hello" 10 times
T
Fa 0
a a+1
a < 10
“Hello”
end
start
alert("hello");
}
for (a=0; a<10; a=a+1)
{
alert("hello");
a=1;
while(a<10){
a=a+1)
}
for (initialization; condition; modification)
{
//body of for loop
}
initialization
while (condition){
//body of for loop
modification
};
17
18
16/06/2021
10
if(num > 0)
….
else ….
}
JavaScript’s for
num ≤ 30
“even”
end
start
F
T
num%2=0
T “odd”
num
10
num + 1
num
for (num=10; num<=30; num=num+1)
{
draw a flowchart to
check 10…30
for (initialization; condition; modification)
{
//body of for loop
}
example 11
draw a flowchart to
compute sum of
numbers between 10
and 30,inclusively.
T
Fa 10
a a+1
a ≤ 30
“10+11+..+30=“,
sum
sum  sum + a
sum  0
end
start
pre: none
post: result of 10+11+…+30
is outputted
this solution is better
structured compared to the
one for example 4
19
20
16/06/2021
11
var sum = 0;
for (a = 10; a <= 30; a = a + 1){
sum = sum + a;
}

JavaScript’s for loop
F
a 10
a  a+1
T
a ≤ 30
“10+11+..+30=“,
sum
sum  sum + a
sum  0
end
start
algorithm example 4
• problem: write a program that calculates sum of numbers
10,11,12,…, 30.
• solution: instead of rushing to implementation, the idea
is to provide an algorithm first:
1. start
2. store 10 in a memory space and call it a
3. store 0 in a memory space and call it s
4. add a to s and store it in s
5. increment the value stored in a
6. if a<31 go to step 4; otherwise, go to the next step
7. send s to the end-user
8. stop
pre: none
post: sum of 10 to 30 is outputted
algorithms/flowcharts 4-22
21
22
16/06/2021
12
e
x
a
m
p
le
4
v
s
1
1
T
F
a 10
a a+1
a ≤ 30
“10+11+..+30=“,
sum
sum  sum + a
sum  0
end
start
a  10
sum  0
start
sum  sum + a
a  a +1
a < 31
F
T
“10+11+..+30=“,
sum
end
bad structure good structure
“go to”
F
o
r
lo
o
p
v
s.
w
h
il
e
l
o
o
p
T
F
a 10
a a+1
a ≤ 30
“10+11+..+30=“,
sum
sum  sum + a
sum  0
end
start
a  10
sum  0
start
sum  sum + a
a  a +1
a ≤ 30
T
“10+11+..+30=“,
sum
end
while loop for loop
23
24
16/06/2021
13
F
o
r
lo
o
p
v
s.
w
h
il
e
l
o
o
p
T
F
sum  sum + a
end
start
initialization
start
….
modification
condition
T
end
while loop for loop
initialization
condition
modification
…. ….
…. ….
iteration (do-while loop)
condition
True
False
• the steps in the cloud part
are iterated as long as the
boolean condition holds
• it’s like the while-do loop,
however the cloud part will
be iterated at least once
• similar to while-do,it’'s used
normally for non
deterministic iterations
• exercise: draw a flowchart to keep receiving numbers and
adds the positive numbers and negative numbers separately,
until azero is received. compare the structure of your
flowchart with that of example 10.
25
26
16/06/2021
14
example 12
T
a ≤ 30
F
a 10
sum 0
start
sum sum+a
a a +1
“10+11+..+30=“,sum
end
draw a flowchart for
the algorithm presented
in example 4: sum of 10,
11,...,30
pre: none
post: result of 10+11+12+…30
is outputted
≤
JavaScript’s do-while
var a = 10;
var sum = 0;
do {
sum = sum + a;
a = a + 1;
}
while (a < 31);

T
a < 31
F
a 10
sum 0
start
sum sum+a
a a +1
“10+11+..+30=“,sum
note the ;
end
28
29
16/06/2021
15
example 10A revisit
draw aflowchart to keep
receiving numbers from the end-
user and output the double of input
number, until azero is received.

while (num != 0) {
}


T
num ≠ 0
F
start
num * 2
num
do {

}while (num != 0);

end
30
31
16/06/2021
16
proper nesting
good bad
• common constructs
▪ the flowchart constructs introduced so far are
supported in most well-known languages
• nesting
▪ you can use a construct inside another
construct as long as they are properly nested
• bad practice
▪ jumping into a construct or jumping outside a
construct is considered a bad practice
▪ in general, jumping is considered a bad practice
Why? Hard to debug – find errors in your code, if ever needed
▪ labels and GOTO statements,as well as break and continue
statements,are usually used for jumping
for (i = 0; i < 5; i++) {
for (j = 0; j < 5; j++) {
…
}
}
draw a flowchart to receive
numbers and count positive and
negative ones, until a zero is
received. also,at any time the
number of positives gets more than
twice the number of negatives, the
program should stop.
example of
bad practice
start
num
p 0
n 0
F
F
num ≠ 0
T
num > 0
T
p p + 1
T
p > 2*n
F
num
end
num < 0
T
n n + 1
F
two exits
from the
loop
pre: num ℝ
post: p is # of positive numbers,
n is # of negative numbers,
p ≤ 2n +1
32
33
16/06/2021
17
bad JS code: try to avoid
even:
for (i = 1; i <= 100; i++){
if (i % 2 == 1) continue even;
…
}
first: for (i = 0; i < 5; i++) {
second: for (j = 0; j < 5; j++) {
if (i === 1) continue first;
if (j === 1) break second;
…
}
}
var text = ""
var i;
for (i = 0; i < 5; i++) {
if (i === 3) {
continue;
}
text = text + "The number is " + i + "
";
}
labels to specify loops
esp. if there is more
than one
example 14
start
p 0
n 0
num ≠ 0 and
p ≤ 2*n
T
num
F
p p+1
num>0
T
n n+1
num<0
T
F
F
end
❖ good practice
❖ proper nesting
pre: num ℝ
post: p is # of positive numbers,
n is # of negative numbers,
p ≤ 2n +1
34
35
16/06/2021
18
❖ need to process all items, or all properties
of an item
var txt = 'JavaScript';
var x;
for (x of txt) {
document.write(x + "
");
}
other loops in JS: for/of, for/in
resultnot in the test
• Non-deterministic: while do while
• deterministic: for, while, do while
• At least one iteration: do while
• nest properly
▪ avoid the use of goto,continue, or alike statements
summary
36
37
16/06/2021
19
• print n times – for, while, do while
• count sum 351 -> 9
• nested loop
demo
38