We've spent our time so far introducing the principles behind programming and computational thinking. We've started to learn how to read and understand programs, making use of JavaScript and the turtle library. But it's now time for us to get on and start writing some of our own programs. In this video, I'm going to step through the process of developing a program from scratch. You'll see that process in action. Then later on in this lesson, you'll be able to try some of that for yourself. Well, let's get started on that. There are some steps to follow when you're faced with a new task, something you want to complete. The first thing to do is to write down what it is you want to do. Then you should probably have quite a good look at that description and see if you can make it more precise. See if there is anything else that you need to know if you are going to carry out the task, just try and make it as clear as possible what you want to do. Often, people run into trouble because they've got a vague idea of what they wanted to do, but I've not really thought about it quite carefully enough first. What you might want to do is to mess around with the problem. Perhaps get a bit of pen and paper out or sketching thing on your computer or laptop or tablet or whatever. Think about how you might carry out this task first, that often really helps. In the same way that we thought about how to draw windows and ladders and all that thing. You want to think about how you might do this first to get you into thinking about how the computer might do it. You probably want to draw up a plan. Think of a few high-level steps that are going to help you carry out the task. When we talked about the ladder, we considered draw the uprights and then draw the rungs. We broke the larger task into smaller pieces. The smaller pieces tend to be easier to solve than the large task. See if you can come up with a plan of a few steps that capture the activity you're trying to perform. Then see if you can find matches between the steps of your plan and the computing techniques you've seen so far. If you notice something familiar about this task or one of the steps in your plan and something that you've seen already, maybe in an earlier program, then go back and look at that. Then see if you can make the connection between what you're trying to do and things that you've seen and you know about already. Really this is always, pretty much always the way of programming is as you get more confident, you're unexperienced, you'll have built up a whole load of knowledge from previous programs, problems, tasks that you've seen. Programming becomes an exercise in drawing up what it is you've done before and adjusting it to suit this new situation. Well, let's actually have a go at doing this on a particular example. Here's a simple startup. I said the first thing to do is to write down what it is you're going to do. Let's start with that. I'm going to draw it in here to extend this. Draw an empty table. I mean, the first thing to query is whether we even understand what that means. What table are we talking about? Well, I'm actually talking about a data table here. A table you might have numbers or text in. Perhaps I'll just extend this to be a bit clearer. An empty table, like a grid. All cells just to be clear. Any other questions as you look at that? I think something that might come up is what size it should be. Let's fix on a size for the moment. I don't know. Let's say it's going to be 140 wide and a 100 high. How many cells are going to be in there? Perhaps say we've got five columns and four rows. We're getting there, we've certainly firmed up on what it is we're actually trying to create. We do that just by thinking about a problem. The next step that I had, let me just go back to that. Mess around pen and paper but doodling. How do we carry this out? I don't know, maybe if I was going to draw a table like this, I would probably draw a box around the edge. Then I might draw in the lines that I need inside that. I might do that much. That would be drawing a box and then drawing a bunch of straight lines. So I could do it that way. Perhaps an easier way if I was very careful and accurate with my lines, would simply be to draw all of the horizontal lines and then draw all of the vertical lines. I will start drawing the horizontal lines. It's quite easy to get the vertical ones accurate, because I've got a guide at top and bottom. But it's a bit more tricky to get those original ones. That wasn't quite long enough, that one. Anyway, but I think, the computer is very accurate at drawing. I think it would be better probably at drawing all of the horizontal lines, that repetitive activity. Then all of the vertical lines, we can do them in that order. In terms of that plan, I was talking about, once you've thought about the you can come up with a plan. Well, this seems to be two stages here. Basically, let's draw the columns or the verticals. Then once we've done that, we'll draw the rows or the horizontals. Well there's a plan, it's only got two stages but that will probably do is for this. We're keeping this one quite simple, you can see that in a way this is really just an extension of the ladder. It's slightly different structure, but we're going to be able to see that things that we did with a ladder going to probably help us. If we went back to the window, remember. We used a technique with a window where we drew. In fact, this is the ladder, wasn't it? We drew upwards and then we moved ourselves across and then we went downwards again. Whereas with the rungs what we did, if you remember, we started and we went across and then we still came back and up. Then we went across again and the movement back and up and the movement across. We repeatedly drew a line in the same direction. We probably want to use the rungs technique, if you remember that. Something like that, but we want to do it in both the horizontal and the vertical, not just the horizontal direction as we did with the rungs. You can see here, in order to draw this table, we're going to be picking up elements of what we've done before. Well, I think that's most of my preparatory steps. We've, written down on what we wanted to do, we've looked at the description to try and make it more precise, we've messed around a bit on paper, we've come up with a plan. We've tried to think about, what it is we've seen before that is like this problem. We've done our prep now. Now we can get on and write a program. I'm going to try live coding here. I've not really tried to actually program this piece of code up before, particularly. What you'll see is the coding is a bit messy, it's quite easy to make mistakes as you go. Very often, as a learner, you see complete programs and you assume that the person who wrote them gets it right every time. But that very rarely happens in programming. Let's move to programming space where we can do this. There we are so you should be able to see that now. I'll just move to it on my screen here as well. We start off with a blank screen. How should we get going? Well, we know that what we're trying to draw is a table, so let's put a comment and just to say that that's what this program is about. Like that. We know that we've got two steps here, so we'll put those in as two steps in our plan so let's put them in his comment. Draw the columns vertical lines and then draw the rows that are going to be the horizontal. These comments just help us realize what the pieces of code coming after each comment is for. There we go. Well now let's have a think about drawing these columns. We've got quite a few of them to draw. But just like the rungs, that we saw before, it's a repetitive activity. If you remember with a repetitive activity, we've got a structure for that based around the for loops. Let's just put a for loop in. Template structure that we've been using for loops is going to look the same each time. How many columns are there? There's five columns. Let's put that in, and four rows. I'm going to say five columns four rows. We just have a plus, plus as part of the template that we're used to do for loop. We'll learn about it in for loop in more detail later on. But for now that's what we do. Then we've got the code that's going to be repeated in order to draw each column. When I write a for loop, I tend to try and put in the curly brackets both of them, just so I don't forget to put that second curly bracket. Well, the turtle is facing upwards. We simply want to draw upwards the height of the table and so we said the table is going to be a 100 high. Let's just literally get on and do that for with the 100. Then let's put the pen down first, just to make sure depends always down. There's the pen down and then there's the pen up once we've finished drawing that line. Then let's turn around 180 degrees, and come back down again. Forward 100. If you watch closely, you might see mistakes here, and there's one other thing that you might be interested to do here. You'll see that in this lesson, there's a lab right after this video. If you want to, you can open up another Coursera Window. Just pause this video for a minute. You can open another Coursera Window and be typing this program in at the same time, so you can just be having a go at this. You can pause the video as we go along if I'm going too fast or anything and it might just help you see what's going on and practice it as well at the same time. Then you'll have the program down and you can play with it a bit after the video if you want to make changes and try things out. We've put a pendown, we've drawn one of the uprights going upwards, we've turned round, we've come back again, and we're now facing downwards because we've just come down the way. We now want to move across, say to the right, to draw the next upright. We're facing down, so instead of turning right again, we now want to turn left by 90. Now, we want to go forward. How far forward do we want to go? Well, we want to have five columns. We know the total width, we said we want it to be 140. Let's just do 140 divided by 5. We're going to pop a little calculation in there. I could do it in my head, but we'll just leave that there for now and that'll take us across. We're heading towards the right-hand side, and if we go left again, then left 90 we'll be ready to draw the next line. That's all we need to put inside this loop because we're drawing upwards here and we're coming back downwards here. We're moving ourselves across to get ready for the next position and then turning ourselves back upright and the pen will go back down again over there. This is looking quite reasonable, isn't it? Let's just see. When you've got a piece of code written like this, you can go ahead and write your whole program, but what you could do is at this point, just pause and you could try and run that complete piece. If you're confident, if you think you've got it right there, you've worked it through in your head like we just did, we're repeating this five times, we've got five columns, pendown, forward, the pieces are all here. We've talked through it, it seems right. Now as I say, it's very easy to make mistakes when you're programming and there could be something wrong here, but let's have a go at this and just see how we get on. Before I run this, do you think that's the right code? Do you think there's a mistake? Do you think it's correct? That's what I mean about this idea of predicting first and then run the code. Always predict first to test your knowledge, to test your ability to work out where do you think that's right or wrong? You might want to pause while you do it. You could even do it by hand and just write it out and see if it's going to work correctly. Let's have a go at running that code now. Run the code and we go. Well, what have I got? I've got five vertical lines and the turtle is lined up already for any more lines because that's what the lead tells it to do every time round. Does that look right to you? Well, I've actually made a little mistake there because actually, I've got five lines but I wanted five columns. In fact, if you think of this as a table, I've actually only got four columns here. What I'm going to need to do is make that five there. I need to make that one bigger. I'm going to make that six and that'll give me one extra line because I want one more line. In fact, just to write it down, I'm going to put down a little five there just to make it really obvious. I'm going to add one more because I need one extra line. That's all the calculation going on there. I'll just reset the turtle, and we'll run that code again. Now you see what's happened is we've got the correct six lines giving us five columns, and the turtle has just chopped itself off the side and come back on the left there. That's got our verticals done. What we can probably do, I'll have a go at this anyway, I can probably just copy this code and paste it into the drawing, the horizontal lines, but I'll have to make some changes to it. But it's broadly the same thing again. This time, we're going to need to get that turtle back into the right place. Let's just do that. Move turtle back to the starting position, and then we can get on and draw these. They're going to be the horizontal lines on there. Now, we basically need to get that turtle to turn to the left, so left, 90. Then we're going to want a turtle to move 140. Oops, we can't just do that. Forward 140. That's the width of the table, but we're going to any one extra little bit on the end, which is 140 divided by 5. This is not turning to quite complicated at all. Some headers to make sure it's clear how this is going to get evaluated or put brackets around there just like you would in math. Let's now take that 140, divide it by 5, because that's going to be the extra column that we just pushed the turtle across and then back across the width of the table. Now, we've gone forward, but heading to the left. We're now going to want the turtle to be drawing horizontal lines. So let's tell the turtle to go left by 180 to face back where it was coming from. That should now put us back in position to draw horizontal lines across the way. I want four rows, if you remember. So that's 4 plus 1 this time. When we put the pen down and start drawing, we're going to want that to be not forward 100, but a 140. Then we want the pen up, we want to turn right by a 180, and we want to come back by a 140. Then want to go left. Left to take us downwards. So we better go right here to get upwards. This is the same as the ladder runs, if you remember. We're going to go forward this time, 100 divided by 4, because 100 is the height of the table and we want to divide it into four equal pieces. Once we've gone up by 90, we want to go right 90 again to take us across to draw a run. Let's just look at that piece. You might want to just pause for a minute and convince yourself that that will draw us the necessary five lines that will give us four rows. There we've got the forward taking us across the full width of the table. We pen up, we turn back around, we come back again, forward 140, then we turn right 90, upwards. We go forward, just the amount upwards we need before we get to the next crossing line, and we turn right again, ready to repeat this piece of code inside the for-loop. That's all looking like it might be okay. Let's have a go running that code. Let's reset the turtle. Okay, back to where we started, and let's run the code. Here we are, and there we go. There's our table with five columns and four rows, and you can see the turtles ended up just the same as it did when it was drawing the verticals with the horizontals here. It's positioned itself up at the top there as if ready to draw another horizontal line. That's the nature of the repetition that's going on. Well, that all seems to be fine. If you did type this in for yourself, you might want to play around with this and just see what happens when you change some of these values. One thing that we could try and do is, for example, we could ask the user to type in the size of the table and the number of columns and rows that they wanted. Let's just keep it quite simple at this stage and just have the size of the table. If we had height, var height equals members prompt. We'll just keep it simple and ask them to type in the height, and then we'll get the width as well. Equals prompt. Whoops. Sorry, I'm just being asked to fill and to extend this. Width. So that's the height and the width. What am I going to do this? Okay. So everywhere I used a 100 for the height, I need to replace it with this variable, height, and everywhere I use a 140 for the width. I'm going to need to replace it with this width variable. That 100 there is the height, so let's replace that with height. Forward height. Here we were at 140 was the width, and that was to tell us how much to move across by to draw the next vertical. That's that. Here we had the width. Remember this was taking us back all the way across. What we're doing is we're changing our program from drawing one very specific table to being a program that can draw any table. Sorry, not any table. A table of any size will be a table that has to be five columns by four rows. You can see we've changed all of these values, and now let's just see, if we put in some different values; we'll reset the title, and we'll run the code. When I run this code, you don't see me typing in the values as the user. If you have this code, and you'll be able to type in your own. I'm being asked for the height now. I'm going to make a much smaller table. Let's make it only 50 high. Perhaps we'll have a 100 wide. Let's just see what that does. There we are. Now we've got, still five by four. But you can see it's a much lower table. The hundred is half the height the previous one was. We could carry on and do that. You could do an exercise here. There's something we should have done there. That program has worked, but it might have gone wrong. We're being unlucky. What we should really have done here is, told the system to treat whatever got typed in as a number. That's what these two little bits I'm adding in here. There's two important like I said. That's essentially saying take whatever's typed it in and just force it into being a number. Sometimes the systems about uncertain on this point. Now if you were interested, and you've been following along, and in fact, if you've been typing this program into your code window, you can now extend this with two extra requests of the user, asking for the number of rows, number of columns. Then every way you've written five, you can replace that with the number of rows, and everywhere you've written four, we could replace, sorry, other way around four as the rows, five is columns. Well, that's that piece. I hope that will make sense, and you can work through a series of guided exercises to help you do that thing yourself. Let's go back to the slides, and so there are some points for us to pick up on here. It's very tempting when you're writing programs to jump straight into coding. [inaudible] lets start typing in, and in this case, it's title commands, whatever you use, so I get straight onto, and that people often do that, but particularly when you're beginning, try, and do some preparation before you start coding. Don't try. Do some preparation before you start coding, makes a big difference. Be clear about what it is you're trying to do. Mess around with it on paper or just think about how you do it yourself, and try and get yourself organized with a plan, a few main steps, what it is you're going to try and do. You do exactly the same if you're writing an essay or a big bit of writing. You tend to plan it out first, and you want to do just the same here. That thinking process really helps you match up what it is you realize you're going to try, and do with stuff you've done before. That makes a big difference. When you're actually writing the code into the programming environment, and if you're confident you've got something or work in the same way as I was fairly confident that I knew that the vertical lines didn't nice fairly comfortable had to vertical lines. Then try it out, and try to avoid using the computer to tell you whether your code was right or wrong. It's doing that. It's giving you a confirmation of whether it's right or wrong, but don't depend on it too much. Try, and get the confidence to know yourself whether something's right or wrong, makes a big difference to your coding. Of course, we all do make mistakes, and the mistake I made was not remembering if I needed one more line than the number of columns I wanted, and then one more line for the rows as well, and the number of rows. We do make mistakes, and so the computer does, as it were helpless there because it does exactly what you told it, and sometimes that isn't right. I think the message here is, we almost never get this right the first time. Even really experienced programmer doesn't get their program right first time, so don't worry about making mistakes. It's just part of what we do as programmers. This fail, fail, fail, fail, fail, succeed may be new for you, but often this is what happens in programming. Often your program doesn't work for quite a lot of time, and then it does work. Hopefully, you get a real buzz, and a zing when a program does what you really intended it to do, and you've worked out how to make it do that. As I say, that may not be the usual fee to get that failure, but don't get despondent about it. It's just, people who program. They know that's going to happen, and they embrace it. Welcome to programming. That's just how it works.
