Flowcharts: Difference between revisions

From Legacy Roblox Wiki
Jump to navigationJump to search
>Mindraker
No edit summary
>Mr Doom Bringer
No edit summary
Line 1: Line 1:
__TOC__
__NOTOC__


== Introduction ==
This tutorial gives you a better idea of how to think about writing your code. It's not just words on a screen, it's a line of thought. Think of your program as a line drawn on paper. That's the first step to programming, learning how to get that line to do what you want it to.


This tutorial is intended to familiarize you with <b>flowcharts</b>.
=== Flowcharts, or Code on Paper ===


== What is a flowchart? ==
A '''Flowchart''' is what many many people use to get a clear idea of what they want their code to look like. It's a common set of symbols and designs that let you show what you want your program to do before you start writing messy code. It's kind of like creating an outline for an essay you're going to write, only a lot easier.


A <b>flowchart</b> is a visual representation of a process.  It is helpful with programming because you can build the basic structure of your program or script without even touching any code.  You can also find flaws in the <b>structure</b> of your code without having to write any code.  A flowchart will not debug typos in your code, however.
'''Flowcharts''' move from a start to an end '''flow'''ing from one thing to the next in the chart. See where the name comes from?


Although it is quite possible to create simple code without relying on flowcharts, the more complex your scripts and programs are, the more helpful a flowchart can become.
Small bits of code are easy to whip right up without a flowchart. The bigger, more complex and crazier your code, the more a flowchart will make life easier for you.


== Symbols ==
==Creating a Flowchart==


A flowchart will typically begin at a "Start" oval, and end at an "End" oval. Most of the time the direction of the program/code is expressly stipulated by arrows.
Grab a piece of paper and a pencil, not a pen. Now draw a long straight line down the page leaving a little space at the top and some at the bottom. This is your program. Congratulations! You just wrote your first flowchart. But it's a little hard to understand.
 
Lets make it easier to read. At the top create an oval, and in the oval put '''"Start"'''. This is the beginning of your flowchart, and now it's really easy to see where your flowchart starts. Nice how that works, eh?
 
We have a start, now at the bottom of your line make another oval and put '''"Stop"''' in it. This is the end of your flowchart. Flowcharts always go from Start to Stop.
 
Cool! You've written a basic flowchart now. But now we need to actually do something in your flowchart, we can't just go from start to stop the whole time.
 
Erase some space in the middle of your line, big enough to put some words into. Now draw a slanted rectangle leaning to the right a bit, and write the words '''print("Hello Mom")''' in the middle of it. It should now look like this.


[[Image:Flowchart.JPG]]
[[Image:Flowchart.JPG]]


Other symbols are as follows:
Sometimes arrows are added to show which direction the flowchart is going.
 
Good job. You've got a full flowchart there now. The Ovals are used to always show starts and stops. That slanted rectangle, or '''parallelogram''' is called an output. The '''print''' command spits out text, in this case it prints out ''Hello Mom''.
 
There are a bunch of other symbols that are used in flowcharts, such as
 


*Input/Output is represented as a parallelogram.
*Input/Output is represented as a parallelogram.

Revision as of 00:43, 10 February 2010


This tutorial gives you a better idea of how to think about writing your code. It's not just words on a screen, it's a line of thought. Think of your program as a line drawn on paper. That's the first step to programming, learning how to get that line to do what you want it to.

Flowcharts, or Code on Paper

A Flowchart is what many many people use to get a clear idea of what they want their code to look like. It's a common set of symbols and designs that let you show what you want your program to do before you start writing messy code. It's kind of like creating an outline for an essay you're going to write, only a lot easier.

Flowcharts move from a start to an end flowing from one thing to the next in the chart. See where the name comes from?

Small bits of code are easy to whip right up without a flowchart. The bigger, more complex and crazier your code, the more a flowchart will make life easier for you.

Creating a Flowchart

Grab a piece of paper and a pencil, not a pen. Now draw a long straight line down the page leaving a little space at the top and some at the bottom. This is your program. Congratulations! You just wrote your first flowchart. But it's a little hard to understand.

Lets make it easier to read. At the top create an oval, and in the oval put "Start". This is the beginning of your flowchart, and now it's really easy to see where your flowchart starts. Nice how that works, eh?

We have a start, now at the bottom of your line make another oval and put "Stop" in it. This is the end of your flowchart. Flowcharts always go from Start to Stop.

Cool! You've written a basic flowchart now. But now we need to actually do something in your flowchart, we can't just go from start to stop the whole time.

Erase some space in the middle of your line, big enough to put some words into. Now draw a slanted rectangle leaning to the right a bit, and write the words print("Hello Mom") in the middle of it. It should now look like this.

Sometimes arrows are added to show which direction the flowchart is going.

Good job. You've got a full flowchart there now. The Ovals are used to always show starts and stops. That slanted rectangle, or parallelogram is called an output. The print command spits out text, in this case it prints out Hello Mom.

There are a bunch of other symbols that are used in flowcharts, such as


  • Input/Output is represented as a parallelogram.
  • Processing steps are represented as rectangles.
  • Conditional statements are represented as a diamond. These typically contain a Yes/No question or True/False test.