Features in Web Applications: The While Loop

Loading...

Do curso por University of California, Davis

Introduction to Web Development

234 ratings

University of California, Davis

Introduction to Web Development

234 ratings

This course is designed to start you on a path toward future studies in web development and design, no matter how little experience or technical knowledge you currently have. The web is a very big place, and if you are the typical internet user, you probably visit several websites every day, whether for business, entertainment or education. But have you ever wondered how these websites actually work? How are they built? How do browsers, computers, and mobile devices interact with the web? What skills are necessary to build a website? With almost 1 billion websites now on the internet, the answers to these questions could be your first step toward a better understanding of the internet and developing a new set of internet skills. By the end of this course you’ll be able to describe the structure and functionality of the world wide web, create dynamic web pages using a combination of HTML, CSS, and JavaScript, apply essential programming language concepts when creating HTML forms, select an appropriate web hosting service, and publish your webpages for the world to see. Finally, you’ll be able to develop a working model for creating your own personal or business websites in the future and be fully prepared to take the next step in a more advanced web development or design course or specialization.

Na lição

Creating Web Applications

In our final module, we're going to explore the basics of designing web applications - programming useful and dynamic webpages that allow our users to interact with them. By the end of this lesson you'll be able to: distinguish between client and server-side development; apply advanced JavaScript programming skills to create logic with selection and iteration; create new features for applications; create more advanced HTML forms; and practice and learn additional troubleshooting and problem-solving techniques. The module wraps with a final peer review activity that will draw upon all of the skills you've learned in this course.

Module 6 Introduction1:42

Client-side versus Server-side Application Development4:28

Features in Web Applications: The While Loop5:16

Features in Web Applications: The For Loop5:02

Creating New Features in Web Applications3:37

Guided Practice with HTML Form Validation, Part 15:42

Guided Practice with HTML Form Validation, Part 27:44

Conheça os instrutores

Daniel Randall
Senior Architect at Composer Solutions and Instructor
UC Davis Division of Continuing and Professional Education

[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.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2018 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play