JavaScript – Week04c – Repetition – Interesting Things to Do With Loops


– Hi, class, it’s Bill
Barry with another video in the programming with
repetition series in IT 102, Introduction to Programming
with JavaScript. In the first video, we looked
at what looping was for– why we needed it, how we
use it, some scenarios, gave you some
examples of why you’d use it in real life examples. We also looked at
the kinds of loops that we were going to be using. We looked at the while
loop, a loop that used a condition to decide
how far to keep going, how long to repeat. The second video,
we switched over and we talked about for loops. And for loops are generally
based on counting. So we run the loop a
certain number of times, based on the data that
we can easily determine. And we also have
done some examples along the way to
help you understand how to put them to use in code. And, of course, there
is no exception here. We’re going to do
some more examples. But, in fact, let’s take a quick
look at some different ways loops can be used. These aren’t new kinds of loops. They aren’t anything new
in terms of technology. They’re just kind of
an interesting way to think about different
situations in which looping can solve some problems with you. So let us jump down there. And let’s take a quick look. First thing is, what if you
need to enter multiple items? So far, we have
typically done data entry with a single item– you
know, enter this, enter that, and then we’re sort of done. But we know that, now
that we have loops, we can do multiple things. So, for instance, we can
enter multiple grades. And then we could figure out
an average, if we wanted to, or a count of the grades,
and things like that. So here is a simple loop
that can be really useful. You might recognize
this as being a priming the pump
kind of scenario, based on earlier discussion. So here’s what the
code might look like. Write out a nice header,
right, heading one, big nice word grades. We then create a grade variable. And we assign it
to the conversion to a number of a prompt asked
of the user to enter the grade. Now this is another
example of a sentinel. We’ve said to the user, hey,
you can type in negative 99 when you’re tired
of entering grades. And I’ll let you out. So this negative
99 is the sentinel. Notice, because the grade
is going to be numeric, then we use a numeric sentinel. If we were using some
text to mark this, a text to manage the loop, we
would use something other than negative 99. We’d probably use some
other word, like done, or something like that. So we ask for this grade. And then we store it. Then we set up a loop that
says while the grade is not equal to negative 99,
which is our sentinel– now the key with the priming
the pump thing that we have– we started using it before, but
this is a little more complete example. The other thing that we need
to do is, because, in the loop, we need to make progress toward
the goal, which is the grade eventually being negative 99,
we need to ask for it again. Otherwise, it’ll
always have this grade. And it’ll never ask. And we’ll never make
progress to negative 99, unless it happened to be the
first and only thing they entered. So the important
thing to do is, right before the end of the loop,
you put the same exact code that you put here. You don’t need var again,
because you already have the variable. But you put the
same code exactly. So you’re gathering the
new grade, which starts a new iteration of the loop. Now important– very
important– note here, do not put anything between
this line and this line. This must be the
absolute last thing right before the end of the loop. So anything else
that you need to do, you need to do in
here between the while and this inside
the curly braces. So in this case, we’re
just writing out the grade. But if we wanted to average,
or add it, or count it, or whatever else was
kind of good stuff you want to do while you’ve
got the grade in your hands, you’ve got to do it here. The other thing to note is,
because we’re replacing each time– we’re assigning a new
value to the variable grade– we are discarding
the previous grade. So this is a scenario in which
you’d better handle everything, again, right here in
this section of code. Because you won’t have the
grade around after that point. Later in the quarter, we’ll
learn how to use arrays– lists, basically. And we can store
multiple grades, so we don’t have to
discard them each time. But for the moment,
this is what we can do. So great example of entering
multiple items, and this is another example of this
priming the pump thing. And so, again, the negative
99 we’ll call a sentinel. It stands guard. And when we see
that sentinel, it knows that something needs
to happen differently. In this case, we need
to exit the loop. So that’s one quick example of
a great thing to use loops for– data entry. Then there’s more notes
about priming the pump and discarding,
exactly as I’ve said. All right, so next example– counters and accumulators. Have you ever seen
one of these devices, somebody using one of these? It might have been a while. And maybe you haven’t
paid much attention. Because it’s not that
typical these days. But you can have this little
manual counting device that you hang on your hand. There’s a little loop to
put it around your fingers so you don’t drop it. And there is a little thing at
the top that you simply press. When you press that
button, that little device will count up by one. And there’s a knob
here to reset it so that you can dial it
all back to zero when you need to start over again. But when you’re working at an
event, or something like that, you just simply click each
time a person comes by, or each time something happens. And that will count how
many things are going on. Well, that’s a great example. Because that works
a lot like programs are going to work with
this idea of a counter. So again, if you can find some
good analogy in real life, you can apply it
sometimes to programming. Because how would you tell
a child to go do this? You have somebody
who’s fairly young, or let’s say somebody who’s
a little bit dull, and not so bright, maybe. And you have to tell
them exactly what to do. So how would you express this? You would say,
first, turn the dial to make sure that all
the numbers are at zero. You’ve got to start at zero. Zero it out before
anybody– before you start this whole process. Then, every time a person walks
by you, click this button. When you click
this little thing, that’s all you need to do. And when we’re all
done with the event, then you hand the thing to me. And I’ll be able to see how
many people came through. So this is a great
example of a counter. So very often, we want to
count things much like that. And sometimes we also want to
sum them, or accumulate them. So for instance, when
customer balances are being entered
within the loop, you want to sum
those all up so you know what the total of
all the balances– maybe that’s the accounts receivable
total, or something like that. So all of these things are easy
to do with variables and loops. So let’s take a quick look
at what those look like. Here’s an example of a counter. So in this case, I ask the
user to guess the word. And I don’t tell
them what it is. In this case, it’s
kind of boring. Because the word is
always abracadabra. But that’s OK for the moment. So you ask them
to guess the word. But you set up this guess
count at the beginning, before the loop. And you set it to zero. You need to set it
up before the loop. Because we need it to be
available after the loop and have the right count. So typically, outside the
loop, set up the counter. Set it to zero. Inside the loop, do
whatever you need to do. This is another
priming the pump thing. You’re asking them
the question here. You’re asking them the
same question here. Inside here, you do whatever
else you need to do. And this includes
incrementing the counter, just ticking it up by one,
using the plus plus operator. Then after the loop, we know
that everything’s been counted. We know how many
times they tried. Because it’s been counted in
this guest count variable. And then afterwards, we
can use that counter. The same thing works
with an accumulator. The only difference
is, as you’ll see, there’s one other
little subtlety. You set up the accumulator
variable, like grocery total. Set it to zero. And then you ask him a
question– input the item price. So as you’re going
through, pricing out stuff that you’re going to buy
at the grocery store, you want to know about
how much your total is. So you’re going to
enter the item prices– again, priming the pump. Because you’re going to ask
the same question again. You’re going to have a sentinel
value, which is negative 9.99. That really needs to be here
in this little prompt message. I just didn’t have
room on the slide. But here’s the difference. Whereas with the total, you
increment it by one each time through the loop,
with an accumulator, you add to that total whatever
it is that you’re tracking. In this case, we want
to keep track of– we want a total of the item
prices that are entered. So therefore, we say grocery
total plus equals item price. That says take the grocery
total that you had before, add to it the item
price, and store it back into the grocery total. That would be the same, again,
as saying grocery total equals grocery total plus item price. So notice that’s different. Here, you’re adding one. Here, you’re adding whatever
it is that you’re totaling. But you’re still
setting up the variable, setting it to zero, et cetera. And so afterwards,
after the loop, you know that you’ve
totaled up all the item prices that have been entered. But because of the
priming the pump, you don’t total up
the negative 99. Same here, we don’t total up
the extra thing once they– if they actually guess the thing
right, it doesn’t count again. So this priming the pump thing
is very convenient this way. Because we know that the
sentinel value is not going to be included. That’s pretty good. That’s important. So that’s how counters
and accumulators work. Now, one other thing that we
can do that’s pretty handy is data validation,
where validation means we’ve got to make
sure they enter it right. Now, we’ve done this
with forms before. But we haven’t done it
yet with other kinds of code, non-form code. So again, we’re going to use a
priming the pump sort of idea, where we ask him
a question once, and then ask him again at
the very bottom of the loop. But here, the loop condition,
rather than counting some other thing that we don’t– we actually are not keeping
track of anything else. But if they give us bad
entries, we just ask it again. So the loop says,
keep bugging the user. Keep pestering the user until
they comply, until they give us the thing that we want. So in this case, the
loop condition you notice is the bad stuff. Any possible bad conditions,
bad data, all goes here. So in this case, we ask him for
the number between one and 10. And we say, hey, while the
user’s answer is less than one, or the user’s answer
is greater than 10, that means they
gave us bad data. So not going to go, not going
to work, so ask them again. This will continue
to ask them over, and over, and over until they
give us a number that is not less than one or
greater than 10, which means it
must be one to 10. It must be exactly
what you asked for. So this will keep them
locked in this loop forever until they comply. As soon as they enter a
number from one to 10, then it lets them out. And therefore you know
you have a valid number. So one of the things, of course,
you’ve got to tell them here. Don’t make them guess what
the validation is asking. Make sure you tell them, enter
a number between one and 10. But data validation
is a cool thing that you can do with a loop–
lock them in until they comply. Now, another thing that we
can do is build up strings. In the loop, you can
create a longer string by concatenating on
shorter strings that are entered as you go. So in this example, you
ask the user for a word. And each of those
words that they enter is going to be concatenated
into a variable called sentence. So you’re saying
sentence plus equals whatever word they entered. And then we’re also
concatenating on the space. Because you don’t want the
sentence to run altogether without any spaces. So the user enters
a series of words. And we add them together–
add, in quotes– concatenate them together with
a space so that you’re going to get a whole sentence– so
the boy ran down the street– so each word gets
added to the sentence. And then down here,
the variable sentence contains that built up string. We often do that character
at a time, right? They enter one
character, and we’re sort of creating
a bigger string. Or it doesn’t have
to be user entry. It can be other things that
build up strings as you. Now, there’s another
slide here that shows the way that you can
solve the multiplication table in a little prettier fashion. I’m not going to stop
and talk about it here. But if you want to pause
the slide and take a look, it uses a pre-formatted
block in HTML, which is a very
handy little thing to know about when you want sort
of blocky monospaced output. All right, one more
area, and that’s going to be finding
the min and max. But I’m going to pause the
video or stop the video here, because this one
is getting long. So we’ll do one more video
that is finding min and max, and then also walks through a
slightly more complex challenge project. And we’ll walk through
pseudocode for that together. So let’s stop this video. Thanks for watching this one. Continue on with the
next one on min and max and some more examples of coding
with loops and other control structures. Thanks for watching.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *