Lesson on pseudocode and flowcharts
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md changes to layout, added one more exercise Sep 29, 2017

README.md

---
title: Pseudocoding
type: lesson
duration: "2:30"
creator:
    name: "Taka" aka Jonathan Ahrens
    city: NY
    parent: none, I'm batman!
competencies: Programming
---

Pseudocode

The art of thinking before you code!

Lesson Objectives

  • Understand what pseudo-code is and it's usage
  • Learn how to map out a flow-chart

Lesson pre-requisites

What is Pseudo Code?

Pseudo: not genuine; sham.
Code: byproduct of a developer drinking bad coffee while poorly sleeping 👻

a notation resembling a simplified programming language, used in program design.

What do we use pseudocode for?

Pseudocode helps us break down the complexity of a problem before coding it.
Sometimes we might feel the burn of running into a problem and wanting to solve it immediately on code, but the time we invest designing how our algorithm should work is time that we will not spend stuck trying to write something that works.

It is language agnostic: needs no specific syntax elements of the programming language.

Real life Example of pseudocode: Clean a car!

Objective: Clean car  
Tasks:  
1. Prepare tools
2. Wash Car

We know that in a high level, it makes sense, but what if someone doesn't know how to prepare tools, or wash car??
Let's break down our tasks into simpler steps:

Tasks: 
1. Prepare Tools
    - [ ] Grab a bucket
    - [ ] Grab a sponge
    - [ ] Grab some car soap
    - [ ] Grab some drying rags
2. Wash Car
    - [ ] Rinse car
    - [ ] Soap and wash car
    - [ ] Rinse car
    - [ ] Dry car

This process can go on until we reach a basic level action that we can understand.

- We Do - Pseudocode me a PB&J Sandwich!

pb
Team up with the people on your table!

  • What actions do I have to complete in order to eat this delicious PB&J Sandwich?
Click HERE to uncover some possible answers 1. Make a sandwich 2. Eat said sandwich 3. That simple right?
  • What happens if the instruction is not something I'm know how to complete (ex. make a sandwich)? Break it down into smaller steps until they are individual actions!!
Break it down to more steps... like for real the most basic ones
    1. Make a sandwich  
        1.1 Put Some Peanut Butter on Bread  
            1.1.1 Open Peanut Butter  
            1.1.2 Extract PB with tool  
            1.1.3 Spread PB on bread slice  
            1.1.4 Spread PB on bread slice  
        1.2 Put some jelly on bread  
            1.2.1 Open Peanut Butter  
            1.2.2 Extract Jelly with tool  
            1.2.3 Spread Jelly on bread slice  
            1.2.4 Spread Jelly on bread slice  
        1.3 Put bread slices together  
    2. Eat said sandwich  
        2.1 Grab Sandwich with hands  
        2.2 Introduce Sandwich partially in mouth  
        2.3 Chew  
    3. Happiness Entails  

Pseudocode Principles

There are none. The concept is to make a hybrid language between code and English (or the language you speak) to process the logic of your problem without the abstraction of code.

We can use some of these following principles just to follow some general consensus:

  1. One statement per line (representing one action for the computer)
  2. Capitalize initial keyword
  3. READ (take an input), WRITE (print, consolelog), IF, ELSE, ENDIF (closure of IF), WHILE, ENDWHILE, REPEAT (do), UNTIL (while).
  4. Indent to show hierarchy (is this a sub-process of someone else?)
  5. END for multi line structures
  6. Make statements Language independent (someone who doesn't code should be able to read)
  7. Same Operators, Arithmetic, AND (&&), OR (||),

Pseudocoding some Javascript

How does an if statement look like?

let userInput = prompt("write a number from 1 to 10");

if (userInput > 70 && userInput <= 100) {
    console.log('top 30');
} elseif (userInput <= 70 && userInput >= 30) {
    console.log('Right in the middle');
} else console.log('Under 30');

This in pseudocode would look like this:

WRITE "write a number from 1 to 10"
INPUT user selection and save into userInput
IF userInput > 70 AND userInput <= 100
    PRINT "top 30"
ELSEIF userInput <= 70 && userInput >= 30
    PRINT "Right in the middle"
ELSE 
    PRINT "under 30"
ENDIF

- You Do - Some whiteboarding coding exercises (30 mins)

Break up into teams of two:
Write the pseudocode for the following:

  • Reverse a string (think of the string as an array)
  • Change all the vowels in a word to an *
  • Fizz Buzz

Flow-charts

a diagram of the sequence of movements or actions of people or things involved in a complex system or activity.

These are another form of drawing out the logic of our code.

If Statements:
if

Loops:
loops

Flow chart Symbols

symbols

- You Do - (20 mins)

Convert your previous white-boarding to a flow-chart!
panda

Advantages of Pseudocode vs Flow-charts

Pseudocode Disadvantages

  • It’s not visual
  • There is no accepted standard, so it varies widely from company to company

Pseudocode Advantages

  • Can be done easily on a word processor
  • Easily modified
  • Implements structured concepts well

Flowchart Disadvantages

  • Hard to modify
  • Need special software (not so much now!)
  • Structured design elements not all implemented

Flowchart Advantages

  • Standardized: all pretty much agree on the symbols and their meaning
  • Visual (but this does bring some limitations)

Some extra coding problems to solve:

  • Capitalize every first letter of input (consider something like prompt() capturing the user input).
  • Obtain the average of all the values of an array.

Resources:

Free flow chart online App Lucidchart
More whiteboarding