 Take a look at flowchart. I have a list here of some of the common flowcharts and programming, we write a program. It's not a complete list, but these are indeed the most common ones you will see. And the only ones that were used for this class when this week or so. So we have an arrow here. The arrow is the flow line called the flow line and it's used to connect symbols. And it's also the flow of logic, the flow of data. So when you receive the input, where does the input go to the next process? What does it do? So the flow line is that the terminal is this oblong shape or the oval shape. Sometimes it's just an oval shape, which is okay. This is the terminal symbol, meaning both the starting position or the starting symbol and the ending symbol. So every program must have a start and an end, right? You can't just like run without starting somewhere. It's always starting and end. And then you have the output and input. You can see that the starting end is the same symbol. The input and output uses the same symbol. This is the, I think in geometry, it's called the parallelogram. Parallelogram, it's a transistor here. So this shape here uses for both reading input and displaying output, right? The processing symbol is just this rectangular shape, right? So here we have four symbols here followed by a few more. The diamond shape here is a decision icon. This is where you make decisions that either true or false, left or right, turn left or right, you know, start and go and things like that. So that represents that symbol. This is also known as the conditional statement. Okay, so we see this in flow chart. We'll talk about the conditional statements is this symbol here. The connector here, just this so-called connector here. It's like a rubber band where it will be tied a bunch of wires together, right? So what you do is that you have a lot of flow lines coming from many other symbols to one symbol. And if you have too many lines, you can just, you know, direct all those lines to a connector and then draw one line out of that so that you don't have to have many lines in your code. That's all it does. Annotation, you just to write some notes and a particular process to explain what's going on inside that particular box. So here's the example of what a flow chart might look like. Back to that steps we just talked about, right? So you start with a star position, start icon and then you always end down here. The flow of data always starts from the start symbol and you're going down, doesn't matter which direction, down, up, left, right, doesn't matter. It just easier for us to see it downward. So we usually throw it down in this direction or it's something as you go to the right. But it doesn't matter where it, which orientation it is. So you can see that is a really simple process here. You start the program and then the first thing you need to do is you need to read the number of sheets of paper, right? How many do you have in order to process it? Once you have that information, this is the output. So as you can see, you put an location here to say this is the input, just some notes with it. This is the reading inputs and you see the parallelogram symbol here. The output is also the parallelogram. So by visually seeing these icons, a programmer can easily think right away, okay, this is a reading input, this is display output without having to think twice about it, right? So that's what you wanna make sure you have the right symbol to help you code faster. It all, it is to make you code faster and more accurately, that's all they do. And then once you have the sheet, you can process it. As you can see, the processing part are the things that happen behind the scene, right? They're not visible to the user. You don't have to see it, it's happening in the background whereas the input and output, they need to see on the screen, okay? So these are hidden processes. Of course, you can put all of these inside the same square if you want to, it doesn't really matter. Or you can break each one by its own separate box like this, it's okay too, right? As long as the flow of information is flowing in the right direction to the right box and the right sequence, then that's fine. Again, there's no rules to how many boxes you have or you shouldn't have, but there is a rules. Your rules are how or what symbol you should use, right? And the arrow here is also important. So you notice when you start, when you start a program, the arrow should only go one arrow out to a particular item, right? And then it goes out and you process it and then you display the result and the program, right? Well, it's simple like that. So it's a sequential order from top to bottom, just like that. Then inside each box, each shape, you have to include a word or a statement of what's happening inside the box. So you always want to write start. If you don't put start and end here, usually you will know because of the arrow, but you always put start and end here. These boxes here, so what's happening inside here? Again, you obtain sheets, you can actually write a coding here too, like sheet equals get sheets, like whatever it is you put here, as long as it makes sense. So put some text in here, like you see here, set set step equal to sheets by divided by five. It's a process. So this is like a pseudo-coderator, right? It tells the programmer that you have to calculate the sheets by doing this way or it stands by doing this algorithm or operation, okay? So each box must have some text in there. You cannot leave it blank. That's the rule. And so here is the next part, pseudo-code. Again, just a same English like phrase with some basic terms. Back to this again, I'm gonna go right to... This is the hierarchy chart. We're not gonna do that in this class, but a hierarchy chart is kind of the same thing. Except the rule is you go from except the rule is you go from down and then left, okay? So you go here and then down. You process the left side first and there's no more to process and then you go to the next one, you go down. You process something here, is there something more you can process? You keep going down, right? Go down here. Oh, I keep going down until there's no more down here. You process that, comes back out and then the next is down here. You process that when you're done. Then it goes back up here and then you process this and then you go up here and you go down here again, down, process. That's the order of the hierarchy chart. So it's always down and then down and then right down, right down. So let's go here. Here is, I think we already looked at this already. So we've seen this already, this is the flow chart and then we have a decision flow chart, right? You see here, this is the pseudocode, as you can see. This is the flow chart that will give you the same meaning as the pseudocode here. This is called a decision flow chart because of this symbol here. This symbol makes a decision, either yes or no, right? You can have both, one or the other. And this diamond shape here will always have exactly one input. You cannot have two inputs, exactly one input and exactly two outputs. That's it, okay? So you process something, either it's true or false. So the direction of data will flow left or right based on this condition. And this is a really important icon where you will use a lot of programs, a lot, okay? So for example, you check if it's true, then you go to the right side, the arrow flows out to the right side, point to the next process. So processing here again is a rectangular because we don't see that on the screen. It's behind the scene and it wants to have done the arrow. The output here is passed on to the next process. And then here is the false part, it goes out here. So as you can see, we have two lines coming out and then they're gonna go to a one symbol out here, maybe to display information. So instead of having two lines going to that symbol, you can connect those two lines or more line using a connector like this. And they just one line out. Just make your design cleaner and easier to see, okay? So the pseudo code looks like this. So if the condition is true, right? If this is true, then you process step one, right? Then yes, you process step one else or otherwise you process step two, then you done, okay? So this one looks very similar to a program already. So again, it's no rule how you write your code here. As long as it makes sense to you and that's fine. So here's another example of how you solve a problem. So given a street number of a one-way street in New York City decide the direction of the street either eastbound or westbound, right? And they gave you some information as well. In New York City, even number of streets are eastbound and a westbound or unnumbered streets, okay? So which is kind of true, right? Well, streets but highway is usually even numbers are north and south, right? And then unnumbers are, no, I'm the other way around. Unnumbers are north and south, even numbers are east and west. So if you look at the US highway system you see that all the highways are even number are always east and west. Like over 80, over 88, you can take that, right? So you have 41, something like that. It's designed that way. By the way, so these are the rules that your program has to conform to in order to work, okay? So you will do something like this. So again, first you start the program and then here you need to get the street. So you come to the street name or that street and you look at that street address or the number or now the street, if it's even then you must be going in the eastbound. If it's odd, you go to the westbound, right? Okay, and then you're done because that's all it is. You just determine based on the street number which direction are you heading? And then this is a pseudocode for that as well. Same thing, if the street's even then you must be going to eastbound otherwise go on the westbound. For example, like that, using pseudocode and flow chart. So we can skip this part here. So here is another one. This is a condition decision structure as well but it's also known as a looping flow chart because it loops, right? Loops and the looping is this arrow here go from here, go back here. If you follow this, if you imagine this goes in circle like this, are you holding a loop here continue to loop until this condition is false. If it's never false, you're gonna go into forever in this loop. And when we write a program that can happen in your code if you have a program, if you're not careful it will run into this loop here we call this loop of debt and programming, okay? It goes wherever nonstop and then it uses all your computer resources and it crashes without a memory it can get a freezes in this crash. And it forces you to shut down your program sometimes shut down your computer and you might already experience it sometimes you see you run a program you see the loaders is not found in, not for processing instead of spinning wheel forever and you get a forced exit, right? So as a coder yourself you want to prevent this from happening unless your intention is to do that make sure this is called but this is also a really important process and computing and computer program is. So loop, you can see here it says while this is true or as long as this is true process this information here and then go back and do it again, okay? So the processes part we don't have more information here or something here must set or affect the condition in this diamond shape, right? So if you want to count a number from one to a thousand starting with one so you can say it's one less than a thousand and yes, then you go in print one and then we want to increase one to two and you keep doing that until the increment patient of that number exceeds a thousand then it would exit out, right? If you don't do that then you're going to have that forever look you call that an infinite look, okay? So it's really important to understand this part here it's also very useful but also very dangerous. So I don't, it's always something good. So this is the loop and flow chart and then here again, I'm going to skip that or see this before this is just another program see how much you have left I'll do one more and then we'll take a break, okay? One more here. So you can see it gets a little more complex but if you follow the arrow and read what's happening in sage box you can kind of guess what's happening and you can translate this into code, okay? So it helps you write code very, very quickly and you can always go back to this page for this design to make sure why your program doesn't work the way you expect it to work because maybe one of the steps is missing or it's incorrectly coded therefore you don't have to result that you want it. So here we have kind of same as before it's a looping chart it starts here run through a lot of processes and it loops back again until this is no longer true then you exit out of that and you continue on until we end that program, okay? All right, why don't we take a I was gonna give you a 10 minute break we'll come back at about, let's say like 645, well 645, 47 around there and then we'll continue on with the next part and maybe we'll also dive into a little bit and kind of conduct kind of give you a preview of what's like and then we'll start up next week by writing code, okay? So I see you guys back at about let's say 650, okay? All right, so I'm gonna show you a few more flow charts and here I will probably I don't know if I should, it's with you or not but I'll share with you later. So in here is an example of something a little more complex, right? So it's a little bit, okay, like this, all right? So it's something about, you know a series of things that you can see in a flow chart of course not a program, but it's also applicable here. You see when we start a program here and end up here and so something happens, like a process here an accident happens and you wanna determine whether you should call an ambulance or not, right? And so before you do that, what happened to that person, right? Is it a blackout? If it's a blackout, then yes you should call an ambulance definitely, right? And then it will end here. So even though like the arrow is down here yes, it does not show the arrow here it usually flows out of here and goes down here, okay? It does not flow here and goes in here because you have to follow the arrow, right? In this kind of design and then down here doesn't mean that it goes here and it goes up here, it doesn't mean like that it just means it goes up here the arrow is down here so it goes to the end. 63 lines are coming to the same spot and usually if you were to design this you put a circle connector symbol here, right? To not confuse the people here if you look at it, it's confusing, right? So you put a connector here for that it goes in one direction. So this is a little bit bad design here but in a ways it makes sense. So you check for this condition you just have blackout, no, there you check for the vital signs, it's weak and yes and couldn't. It's not check if you have any broken bones I know that it's bleeding, no, then you take a rest and then feeling sick is it sick or no sick, right? And then no, then you die. If it's yes, you just go to the clinic we're not gonna call the ambulance, right? So something like this you have a lot of these are called conditional statements, right? One after another to make sure whether something is true or false, right? That's one example. This one here is a little more complex. This is at the airport for example, okay? So we start, you check in, you drop your baggage this is just processes and you go to secure the screening. And again, usually these are several conditions here so you can see a loop that goes in here. One of these is true. And you keep going down here, you multiply it. Assuming it's all already good to go and then let's see, there's no loop here, yeah. And then you go to like first, go here, yeah. I guess this is more about the connection here, right? So whether you make connection or not if you don't make connection once you arrive at the next airport you can connect to the next flight which you make connection you might have to go back to security again. I don't know. Again, depends how what the airport is but I don't think you have to go screening again but in this case, just showing you how these counts have been used in a real world scenario. One here, this one is much simpler. It's just a long clock, probably apply to almost everyone here. You start the program along range. Are you ready to wake up? No, snooze, right? Say, will you be late? No, you snooze it. Wait for five minutes, just a timer here. Just a delay symbol, which we don't see. After five minutes, it rains again. You ready to wake up? Yes, maybe leave the bed, turn on the end, right? So this is a simple process in here. Next one here is kind of similar to gate. Another airport scenario. This one here is a recipe type. Okay, you make some, I'm not sure what this is, but you prepare the egg. The egg type, what type is it? Is it once gambled, once once at it, we want hard boil, we want to set it up or whatever it is, right? And then you have these processes to occur. So again, we have condition statements here. This is more of a, like we'll call it a switch case statement. We'll learn that later. We have multiple options in here. Instead of just two, we have multiple options, okay? But still, only one route can be taken at any given time, not two, okay? And as you can see, all these symbols are only rectangularly. It doesn't show you any output, which is kind of rare in this case. This is another one here. You start, you turn on the water, you dispense the soap, you rub your hands, as you hand clean, no, you do rubbing hands until they're clean, right? If they're clean, yes. Rinse off the soap, turn off the water, by hands and the program, right? Step by step like this, even though it takes a lot of effort to draw this out, when you see this and you translate it into code, it helps you a lot, okay? So if you don't know where to start and the code, go back to the drawing board and draw this out. So you can see what's going on, okay? If you don't understand what's happening, each step of the program, then you may not know how or where to start the program. Again, just another one here, but it's simple for this way, log in program. You see this? You may have experienced this already all the time, log into your account, log into your iPhone, you can miss a couple of attempts, it shuts down your system, right? Same idea. You start the program, has it used five attempts yet? No, not yet. You log in, you otherwise, is it correct? No, then you go here and you reduce that attempt, right? Or you increase it by one, two, three, four, five, after five attempts fail, then you lock your account and you allow the user and that is, this is a typical flowchart for that type of login system.