We going to start making things happen, sort of. Before we can really move forward with our code, we need a few skills up our sleeves. Today’s lesson is on for loops.
A for loop is a short-hand code that runs the same code over and over for whatever you tell it to do. It has three parts.
- where to start
- when to stop
- how to move forward
The code says for this number, if it holds true to what we’re trying to do, do this code and then move on to the next number. It looks like this.
for (i = 0; I < 10; i++) {
$(“#practice”).append(i);
}
This code says start at 0. Since 0 is less than 10, write it on the page in the div with the ID practice. Then move forward one number. It will loop through again with i = 1, then 2, then 3, etc., until i = 10. Since 10 is not less than 10. It will not run the code.
I created a little div on my War index page to have a place to do some practicing before we get to our real code.
<div id=”practice” style=”font-size:2rem;”></div>
In my War code, I use a for loop to create the cards. I don’t want to write out 52 cards. I have it loop through the card numbers and loop through the card suits and save each one as a card to make a pack of 52.
You don’t have to use i++. You can use i = i+2. You can use i–. You don’t have to use i. That’s just traditional. It’s not a variable that has a meaning, just a place holder, so we don’t bother giving it a name.
Play around with the for loop. See if you can get on the page what you expect to see! You can get a space between each number by concatting a space like this, append(i + “ “).
You can watch the video of this lesson to see what’s supposed to happen!