William Rosener: Was Dr. Bill, welcome back. When writing computer programs you often find that you need to repeat a section of code over and over
William Rosener: Or repeated but change something about it each time to save time for my nose. I code. We can use a loop JavaScript has two kinds of loops.
William Rosener: A while loop and a for loop in this video will be taking a look at the for loop, let's go ahead and get started here to take a look at, in particular, what will be learned how to create in this video here.
William Rosener: So we're just simply allow the user to enter a value. Let's say the under five or they're going to print the numbers and increasing order from one to five.
William Rosener: And decrease in order from five to one all the even numbers in this range within print a square this, because it's going to have five rows five columns.
William Rosener: And then we're doing multiplication table all the way up to five. So up to five times five. So if I put another number in here, for example, seven.
William Rosener: I'm gonna get the numbers, the increase in order decrease in order all even numbers in this range, a little square and the multiplication table. I'll do a one less time here. Let me put in 15
William Rosener: And I can see increasing order decreasing even numbers, a big old square and the multiplication table all the way to 15 times 15 there.
William Rosener: Okay, well, now that we know we want to do, uh, let's get started. So the first step, you want to do is open up some basic editor. I'm gonna go ahead and just use the notepad.
William Rosener: And let me just to save a little time here, you probably have already got a little basic form already to go here. I'm going to start. Go ahead and paste that
William Rosener: That's going to start my HTML. I'm going to close it. I'm going to have a head. I'm gonna close the head appear in the title, we could go ahead and put JavaScript.
William Rosener: And we'll put the for loop.
William Rosener: And then maybe I'll just go ahead and grab that copy it and paste it right here in the title.
William Rosener: Okay, take a look. We've got a title or to start a script and the script. I haven't done written written it yet. So we'll get some code in here. Don't want to close the head. We're going to start the body, close the body.
William Rosener: Here I've got a pattern. A lot of times actually would simply go, I'm gonna go zero that's going to be the top
William Rosener: The right the bottom and then the left. So the only one. I'm going to add any pad into is 30 pixels on the left.
William Rosener: I'll tell you. Well, let's go ahead and get started as saving this and then we'll add and keep saving and refreshing or reloading there so I'm gonna come up here to a file. I'm going to go to save or save ass.
William Rosener: Make sure you know where you're saving it. I'm saving on the desktop and a temporary called a temp and I'm going to call this one assignment nine JavaScript.
William Rosener: dot html HyperText Markup Language, so make sure, first of all, you know where you're saving it. Make sure you give it a name that ends with HTML assignment nine JavaScript and then make sure is a text document when you have those things, then go ahead and save
William Rosener: At this point, I can just simply come right over here. Here it is. I can right click on it and I can go open with and I'll just choose the first one here. Firefox.
William Rosener: Okay, that's what we've got so far, and they'll go ahead and just sit a little control plus to zoom in just a little bit there.
William Rosener: Okay, well let's come back here next step we want to do is go ahead and start maybe I'll come down here on the forum and to save a little time on me, just go ahead and grab a basic little form.
William Rosener: Okay, so now pasted this information. I'm going to create a form. I'm just going to call it form one it's going to have an input, where the user can enter value. I'm assume that's max value.
William Rosener: When they click on the command button. It's going to look for a JavaScript function called display results and then here is my big tech Sarah tag. I tell you what, let me just put a value in here, for example, yes.
William Rosener: I'LL SAY THAT COME BACK HERE, TAKE A LOOK AT reload or refresh. And I can see I've got the word yes in there. Okay, well I'm actually going to delete that.
William Rosener: YES. CIRCLE we want to do is start working on the JavaScript. So getting JavaScript is case sensitive, so you might want to I've called this one display results.
William Rosener: So I'm gonna come right up here. I'm going to copy that and I'm going to come up here to the top. And I'm going to go ahead and create a function
William Rosener: And just paste that way can't even make any spelling mistakes open print. See, close parentheses. Start curly bracket and close it and if you want. We let's just go ahead and do this. That's going to, I'm going to type in a document that form one and I'm going to put results.
William Rosener: Data dad value equals ABC does or dummy just type in test her
William Rosener: Okay, I'm going to save that.
William Rosener: I'll come back here to my browser. I'm going to refresh again, never work a couple ways I can press on the reload button, I can. You can see right there. The controller.
William Rosener: And either one of those. And sometimes I even hit control at five for sit there okay so soon as I hit display results, sure enough, it is displaying test there.
William Rosener: OK, now what we're gonna do is we're going to allow the user to enter, enter a value and then we're going to read that value.
William Rosener: And then based on that value start working with our for them. Okay, so you can actually maybe you can comment that I'm just going to go ahead and leave it there and I'll be modifying that line here shortly and
William Rosener: OK, so maybe the first step we want to do is we'll go ahead and actually do a little air check in here.
William Rosener: And this is going to be is not a number. It's going to have Laura, Laura. Laura ray and then to capital ends if is not a number. And I'm going to do.
William Rosener: Places in max value.
William Rosener: And we use the variable name and I'll go ahead and declare that here. Maybe I'll just come right up here and declare it before I even move on.
William Rosener: And maybe I'll declare some other variables here. I'm going to place all this information in a in a string called temp string. Here's my max value.
William Rosener: And then maybe I'll go ahead and clear some variables here as well. And I'll tell you, I'll stop right there. Then as I need more variables. I'll come back up here and add that
William Rosener: Okay, so what we're gonna do is we're going to do a parse float here.
William Rosener: Capital F there. We're going to take a look at. Oops. Oops.
William Rosener: Parse float.
William Rosener: Taking a look at the information and document that form one so I called it form one
William Rosener: Will be taking a look at and it's going to be seen as you can see, it's right here. It's in max value.
William Rosener: That guy you
William Rosener: Okay, that's not a number. We're going to have a little error message pop up and just say, please enter. Hey, maximum
William Rosener: Value.
William Rosener: I'm of this lineup here.
William Rosener: Inside my f statement here. Okay, so what's going to happen is we're going to go ahead. I've declared some variables.
William Rosener: I'm going to go ahead and read in converting this parse float in that until I can an integer and to a number. I'm going to take the information and max value form one
William Rosener: So here's form one I'm going to take the information and max value. And if this is not a number. An error message will appear. Otherwise, hey, we know we've got ourselves a number
William Rosener: I think this point, we're going to go ahead and I'm going to create with my temporary variable here attempt string, I'm just going to sign it, the knowledge value that all string. So here I declared the variable.
William Rosener: And now I'm going to go ahead and make sure there is nothing in that variable that's going to make sure it's an Australian and then we're going to start with our for loop here. I tell you what, let me go ahead and get the syntax her down.
William Rosener: And then we'll actually plug in some real values here. So first step is going to be our initialization, then we'll have our loop.
William Rosener: Continuation test and then how much we're going to increment by increment by one two etc there and
William Rosener: Then we're going to have some statement or statements.
William Rosener: Okay, well let's get started here. Okay, that was just a self declared temp string offset it to the nostril. Now we're going to go ahead and
William Rosener: Start with a little loop here. Well, I'll tell you what the very first step here. If I was to have taken a look coming back here.
William Rosener: I want to get the text increasing order displayed. First of all, so before I even start my loop. I'm going to go ahead and say attempt strength is equal to what's already in Tim string. I know there's nothing there but this way when I do a copy and paste and make a little bit easier.
William Rosener: And we're going to type in increasing order. And I'm gonna put a slash in like a new line hard return and close that out.
William Rosener: Let's get a little more code here before we actually check it out. I'm now going to go ahead and start.
William Rosener: And I'll tell you what I'm actually going to go ahead and declare the variable right here.
William Rosener: So let me delete that up there. I'm gonna go var. This is kind of typically away. A lot of people will do this index equals one, that's going to be mine.
William Rosener: Initialization phase. The next step is there a semi colon. Now we're gonna do our loop continuation is index less than or equal to max value.
William Rosener: And I'm going to go index plus plus. And that's going to increment by one and maybe I'll change that here in a second.
William Rosener: Okay, we're gonna go ahead and start and close. OK, now the statements. So we're going to simply say Tim strain.
William Rosener: Is equal to tempt string plus index for example one and now we want to get to, let's let's stop right there.
William Rosener: And then we'll, we'll see how those numbers are all kind of jam together and then we'll go ahead and throw a space in there. OK. Now, rather than not displaying test. We're going to display temps trying, okay, let's look at. I think that's looking good, and
William Rosener: It's come along. I'm going to save this.
William Rosener: To come along to my browser.
William Rosener: Actually get the right one here and I'm going to hit reload refresh. I tell you what, let's make sure our little error message is working. I'm gonna hit the display results.
William Rosener: And sure enough, I'm getting a little error message. Please that or maximum value and we'll go ahead and put a five in here and had display results. And sure enough, we're getting the numbers, although they're kind of all jammed together. So let's just put a little space right there.
William Rosener: So I'm going to do is come right here and put a space.
William Rosener: OK. So again, there's probably no reason to keep going on. This much is not working. So just take, take a look here, all your little mistakes. There
William Rosener: You hopefully I've got this much work in again it's case sensitive. So I've got nada number, the capital ends parse float. I've got the capital F.
William Rosener: I'm now going to start my loop first step here was just going to display a static string increasing order.
William Rosener: Next step is I'm going to enter my for loop. I'm going to declare index equal to one. That's my initialization. How long do I keep going. As long as index.
William Rosener: Is less than max value. So it's going to start off with one is one less than, say, five. Yes. And it's going to increment it and here rather than put in plus plus another way you can do this as
William Rosener: Put plus one. And that might make a little more sense for you. I'm going to take what's an index and add one. So the first time through index has a value of one.
William Rosener: Now I'm going to add once it's gonna be 234 and five. What is this going to do. It's going to take what was ever intended string, it's going to add what is an index that's going to add a one.
William Rosener: And a space and a two and a space etc there. Let's go ahead and I say that, just to make sure everything's still work in here.
William Rosener: Reload and display results. And sure enough, I've got 12345 okay let's come along down here. And whoops not there right below there and I want to get some blank lines.
William Rosener: And I'll put two in there. That way the next information. There's a little break. So the first one is going to advance the cursor, then the second one is actually going to cause the line break there.
William Rosener: Okay, so that was an increasing order. And just take a look here. And now we'll go in decreasing order.
William Rosener: And to do that, I'm just going to grab all this code right here. I'm going to copy it.
William Rosener: I'm going to paste it. And here it is. So here's my new code. So I'm gonna go ahead and type in decreasing
William Rosener: Order now what I'm going to do is rather than starting with one I'm gonna start off with max value.
William Rosener: And I'm going to go as long as index is greater than or equal to one.
William Rosener: Okay, so we're going to decrease in order. So I've got a couple of choices here I can either put index minus minus
William Rosener: Like that. Or if you prefer, you can put down index.
William Rosener: Minus one. So we're going to set index initially equal to max value for example five is five credit or equal to one. Yes.
William Rosener: And then the next time through, we're going to subtract one. So that's going to give me. It's going to go 54321
William Rosener: And then we're going to do is some just like we did earlier, we're going to take the value in index concatenate a space to it.
William Rosener: Keep going through this and then finally we'll actually turn around and add two more line things there to create a little buffer there. So let's go ahead and save that and again I'm just typically coming right up here. I'm sitting Control S come back to my browser.
William Rosener: hit reload or refresh put a value in here.
William Rosener: And sure enough, we're going in increasing order. And we're going in decreasing order. Okay, next step here is we're going to print the even numbers.
William Rosener: Okay and I'm just going to come along right down here, put a little blank line.
William Rosener: Okay, and maybe I'll now grab all this information. I'll go ahead and copy it.
William Rosener: Paste and I'm going to type in even numbers.
William Rosener: Okay, so this point probably would have been best to have had I copy this code, but that's fine. I'm going to start off with index equal to so I don't want to start with one I'm start off with two. And now I'm going to go as long as index is less than or equal to the max value.
William Rosener: And here's. Finally, the first time we get a really see. So if I just want to go, plus, plus, that's going to increment by one
William Rosener: Or dash dash is going to discriminate by one. But in this case, I'm going to go index plus two. So I'm gonna start off with two
William Rosener: Is to less than, let's say five. Sure it is. And the next time. It's going to be for
William Rosener: So maybe I should put some I did like 10 so it was ended indexed our software to is it less than 10. Yes. So I'm going to 2468 and 10 there. Okay. Well, I think we're ready to go with this. This come right up here to File, Save.
William Rosener: Come back refresh.
William Rosener: Let's put a about put 10 in and hit display results. Sure enough, I'm getting the numbers in increasing order decrease in order and I'm getting the even numbers between two and whatever value is in this text box there.
William Rosener: Okay, take a look. The next thing here. This one is going to be. We're going to be using some nested looping to get a square, so maybe I can then put a smaller number in here like five, and we're going to see, we're going to get 1234512345 so five rows and columns there.
William Rosener: Okay, so now I'm going to come along and we're going to be doing some nested loops. And so what I can do is let me go ahead and grab tell you. I'll just grab all this code here and we'll be working with it here.
William Rosener: So,
William Rosener: I'm the first of all put in. Let me just take a look kind of match just says square
William Rosener: Okay, some type in square
William Rosener: So up until now, we've been using just a single loop. So tell you what this point, I'm now going to actually so you can kind of help see what's going on. I'm going to create
William Rosener: A sign that I had just been called an Index. Index. Index. I'm not going to call it index one is index one was the max. I'm going to go index one here is want to go buy one.
William Rosener: And index one
William Rosener: But actually, I've had to work with that we're actually putting a star here.
Oops.
William Rosener: And there would be no space after. Okay, so now we're going to go ahead. So this is going to go and next one is one watch less than, let's say 10 and I want to be incremental by one. I'm now going to go ahead and copy this and we're going to create a nested loop.
William Rosener: So this loop will be inside the outer loop. I'm going to call this one index to
William Rosener: Next to
William Rosener: An index to
William Rosener: Okay, I'm not going to simply
William Rosener: Oh my inner loop. I'm gonna go ahead and add a star just slide this over here. Just a little bit.
William Rosener: And after going through one entire row. I just want to get one in here. And what that's going to do is wrap it around to the next lon I now need to close my outer loop.
William Rosener: As such, right there.
William Rosener: Okay, so I've got an inner loop here. So my outer loop is going to let's say we've got the value of well just just do five
William Rosener: This loop here is going to go one to five. So this in effect is going to be creating five rows.
William Rosener: This loop here. It's going to be working on the columns. So it's going to do it five times as well. So I've got just kind of look. Make sure I got everything here and next one.
William Rosener: Next one, next one index to index to index to index to their. Okay, so this is looking good here. Let's go ahead and check it out. File, Save come long
William Rosener: Refresh.
William Rosener: Put a value in such as five. And sure enough, I'm now getting a little square A five rows and columns there. And if I was to enter a value such as 10
William Rosener: Sure enough, get it going and increasing order decrease in order the even numbers and the square. And I think I'm going to go ahead and stop there. With this point.
William Rosener: I'm gonna have you made a mighty can modify this but definitely have you give me this much code here. This I think you should find having
William Rosener: Walked through that you should get easily a finished this multiplication table. Some of the guys I figured that out yourself there. But anyway, I'll catch in the next video. Thank you.