Last post we looked at the basics of flowcharting and how to structure them. This post we will be expanding the basics and getting into more in-depth processes. So let's get started...
FLOWCHARTING Part Deux:
Remember from Part 1, the only real standard in flowcharting is that Loops/Conditionals are denoted by a diamond. With that being said, I do not follow this standard to a "T". In my own little OCD world, I prefer to have a different symbol for each part of my flowchart. So I will be using a diamond for Loops and a rectangle for conditionals. You can do it whichever way your prefer, but your company/employer may have different requirements. As long as you and other developers on your team understand what is going on, you are doing it correctly.
We will be looking at 2 separate flowcharts today, one using a Loop and another using a Loop and a Conditional. Let's start by looking at one with just a Loop...
We are going to flowchart a program that will take in an array of numbers from the user. The program will sum the numbers in the array and render the sum.
Step 1: Start (Start with Start like we always Start)
Step 2: We create an empty array and call it numbers
Step 3: We create a variable called sum and set it equal to zero (we must do this so we have something to begin adding to, otherwise we will add our first number onto itself and our sum will not be accurate)
step 4: We use a listener to obtain our first number (we are also creating the variable userInput1 in this step)
Step 5: We use a second listener to obtain another number (we are also creating the variable userInput2 in this step)
Step 6: We use push to add all of our user input numbers into our array
Step 7: Now we create our Loop, and inside of the Loop we specify the parameters in which the loop will run until it stops
Step 8: We have to add in an operator that will reassign the variable sum as we run our loop
Step 9: We render the sum of the array once the Loop has finished running
Here's what this will look like in an actual flowchart...
Now let's look at an example where we have a pre-made array of student names and their GPAs. We want to run a function where we look through the Object Array and find all students that have a GPA of 3.0 or higher and then render the student names.
Step 1: Start (Start with Start like we always Start)
Step 2: We have a pre-made Object List named studentList and inside of it we have object pairs for name and GPA (note we notate the object pairs in the object out to the right of the array box)
Step 3: We create our Loop that will run through our student list
Step 4: We use a Conditional to check that the student's GPA is 3.0 or higher (note this is inside of the loop)
Step 5: We create another variable, we will call it studentName inside the loop and set it equal to studentList[i].name
Step 6: We render the var studentName, note this is outside of the loop (if the render is inside of the loop, we would run into the issue of it rendering a value each time it ran through the loop)
Here's what this will look like in an actual flowchart...
You can see that this is a much more technical program than the previous one but the flowchart is somewhat easier to chart.
Next post we will take the 3 flowcharts we have created so far and get into the really fun stuff...CODING!
Until next time :)
Top comments (0)