[MUSIC]

Hi, and welcome back.

In our last lesson, we talked about the distinguishing differences between

client-side and server-side development.

In this lesson, we'll talk about some of the additional features of JavaScript

as a full-fledged programming language.

You may remember that in a previous lesson I mentioned that programming language

can do things repeatedly, that is, do things in a loop.

And in this lesson, we'll look at a couple of loops that are available in JavaScript.

Now here, we have a function called verticalFullName that is

starting on line 7.

And on line 16, you see the keyword, while, which is part of a while loop.

We'll come that in just a moment.

On line 9, we're getting a value called fullname into a variable.

We're checking to see if fullname is the empty string on line 10.

And if it is, we'll give the user the information Please input a name.

That is, if they've left it blank, we'll prompt them to do something else.

If it's not blank, we go on to the loop portion.

We're declaring a variable called i and giving it a value of 0.

So for the loop, it says, while i is less than the length of the full name and

then we do whatever is in the body of the loop.

Notice here, we've got curly braces that define the body of the loop.

Anything between those curly braces will

continue to happen as long as i is less than the length.

Well i starts at 0 and notice here on line 18, we see i++.

And that ++ increases the value of i by 1.

This is a shorthand that is

the same as saying, i = i + 1.

So we could say this instead, we could say i = i + 1,

which would allow i to increase and

eventually it'll increase to the length of the full name and the loop will stop.

But usually, we like the shorthand, it's easy to type and

very popular with programmers rather than the long form that I just backspaced over.

All right, so let's look at what this program does and

then maybe we'll revisit the code a little.

So here I have a whileLoopExample.html file.

And notice here, I've got an input and I've given it a label Full Name.

And I'm going to give it a name that I'll make up,

I've used it for testing in some of our lessons.

And I'm going to click the Show Me button,

which will run the function we were just looking at.

And notice here what it's done.

It provides the name, character by character, but

vertically rather than it was horizontally.

Now we may or may not want this effect, but what the loop does

is lets us go through full name, character by character.

And let's look at this a little more closely on line 17.

We are getting the output, which is,

if we scroll down here, the id of a paragraph on line 33.

We're getting that output and its inner HTML, and

then we're taking fullname, and notice that appended

here to fullname is i in brackets, square brackets.

Now this means that on the first pass i will be 0, because we start at 0,

then i will be increased by 1, so i will be 1 and then 2 and so on.

And finally, it'll be the length of fullname,

which means at that point, the loop will stop.

So when we do this, the 0 will be the F in the name I typed in,

which was, This was the string fullname.

So when i is 0, we're on the letter F.

When i is 1, we're on r, and then e, and so forth.

And this brings to our attention that strings, the way we count them

in JavaScript and in most programming languages, starts with 0.

So this is the 0 position for the F, then one, two,

three, the space is four, five, six, seven, eight, and finally nine.

So it goes from zero to nine, which is a total of ten characters.

And so, as we go through by i, in each case, we're using a break along with it,

which is why we're seeing these vertically,

because there's a break after each letter.

So that gives us some insight into how a while will work.

There are other forms of loops as well and

we'll look at one probably now in the next video.

Features in Web Applications: The While Loop

Introduction to Web Development

与讲师见面