If statements

Loading...

From the course by University of London

Responsive Website Basics: Code with HTML, CSS, and JavaScript

3002 ratings

University of London

Responsive Website Basics: Code with HTML, CSS, and JavaScript

3002 ratings

Course 1 of 6 in the Specialization Responsive Website Development and Design

In this course you will learn three key website programming and design languages: HTML, CSS and JavaScript. You will create a web page using basic elements to control layout and style. Additionally, your web page will support interactivity. At the end of the course, you will be able to: 1. Define the purpose of HTML, CSS and JavaScript 2. Make a simple web page using HTML 3. Use CSS to control text styles and layout 4. Use CSS libraries such as Bootstrap to create responsive layouts 5. Use JavaScript variables and functions 6. Manipulate web page content using JavaScript 7. Respond to user input using JavaScript In this course, you will complete: 2 assignments writing HTML, CSS and JavaScript, each taking ~1 hour to complete 4 quizzes, each taking ~20 minutes to complete 1 programming exercise~30 minutes to complete multiple practice quizzes, each taking ~5 minutes to complete Participation in or completion of this online course will not confer academic credit for University of London programmes.

From the lesson

Going deeper into JavaScript

Welcome to the final module of 'Responsive website basics'. <p>In this final section of the course we will define JavaScript variables and write simple JavaScript programs that use and change the values of variables. </p>We'll also write if statements to control the flow of a JavaScript program, use boolean variables in conjunction with if statements and write javaScript in the context of moderately complex web applications. <p> Enjoy! <p> - Matthew and Marco

If statements7:08

Meet the Instructors

Dr Matthew Yee-King
Lecturer
Computing Department, Goldsmiths, University of London
Dr Marco Gillies
Senior Lecturer
Computing Department, Goldsmiths, University of London
Dr Kate Devlin
Senior Lecturer
Department of Computing, Goldsmiths

[MUSIC]

Okay, in the last video you found out how to use variables to

control what was going on inside a slide show app.

But there's one thing about the slide show app that that I want to show you,

that wasn't really covered by what was going on last week, and

you might have spotted that.

So here we are, on this slide show we can select the first one.

Actually, let me restart it, just to be clear what's going on.

So when it appears first, we've got the first elements.

And then we go onto the next one, and the next one, and the next one.

And at this point, we've reached the last element.

So what happens then?

Well, when we click on the last element, we go back to the beginning.

And that's fine that's a reasonable thing to do, that's a good thing to do.

But the code we looked at last week doesn't do that.

Because the code we looked at in the last video, all it does is count.

So, we start at one.

Then we go on up to two, then we go on to three, then we go on to four.

And when we hit four, we have the same code.

All it does is exactly the same thing.

It takes count or adds one to it.

And we get five, six, seven, eight, nine, ten.

But that won't work because we don't have an image five, we don't have an image six,

we don't have an image seven.

We've run out of images, so we need to do something different.

We need to, in this case, go back to the beginning.

But in any case,

once we reach the end, there's always something different we have to do.

And I'm gonna show you how to do that because

really what this is about is making a decision.

At certain points in your program you can't carry on just doing the same thing.

You need to decide to do something different.

And we're deciding to do something different depending at what

value of the count we are.

So what number we've reached.

I'm gonna show you how to do that.

Okay so let's look at that in a bit more detail.

We need to know if the count is more than four.

If it's less than four, it's fine because we've got four images.

If it's image one, two, three, four, we can just show it.

But if it's more than four,

then we've got a problem because you haven't got that image.

So we need to do something different.

So we need to make a decision based on if the counter's more than four.

If it's not more than four, no, it's less than four, we can display the image and

carry on counting.

But if it is more than four, then we need to do something different.

In that case, what we need to do is loop back to the beginning.

So we're making decision based on this variable.

Less than or equal to four, fine.

Just display the image, we've got an image there.

We can show it, and we can carry on as before.

More than four, we've run out of images.

Let's go back to the beginning.

And what that actually means in practice is the counter needs to go back and

be set to one, to the first image.

So we're making a decision, we're branching our program.

Based on it, we're doing one of two things.

Carrying on as usual, which actually basically means doing nothing.

Or doing something special for when we've got more than four,

in which case you have to loop back to zero.

And I'll show you how to do that.

So here's the actual codes, and the important bit is in the middle.

We've got this if.

This is called an if statement.

As I said in my last slide, I started with if we are more than four.

And this is exactly what I'm gonna translate into code.

If is a built-in word in the language that allows you to make these decisions.

If the counter's more than four,

this pit says the counter is more than four the counter is greater than four.

It's what we call a Boolean expression.

I'll come back a little bit to what Boolean means in the next lesson, but

for now, we just think about it.

Yes or no, true or false, is it more than four or not?

And the important thing is that it's the condition,

it's what we're using to make the decision.

And then we're doing something if it is more than four.

So this is the code that we want to run.

It's the body of the code.

Now this all looks quite a lot like a function actually.

Because we've got if, we've got some standard brackets with something in, and

we've some curly brackets.

It is not a function.

The syntax is similar, but it's actually something quite different.

The counter more than four is not an argument, it's what we call a condition.

And the body of the code is still code that's run,

but it's run based on that decision, not based on what the function's called.

But the syntax looks quite similar, and

as we'll see, the body of the code is inside these curly brackets, and

we've used standard curved brackets, parentheses, for the condition.

So, let's look at that in context.

This is the code I showed you in the last lesson, but

with this extra thing in the middle.

So here we're saying exactly that,

if the counter's more than four, the counter's equal to one.

But how does that work in the context of the whole program?

So you click on the forward button, you add one to the counter.

You always add one, but in this case now, two things can happen.

Either the count is less than or equal to four, in which case nothing happens, or

the count is now more than four, in which case we need to do something.

If it's more than four, it triggers this if statement and it runs this code.

All this code does is it counts to one, which goes back to the beginning.

And either way at the end we're just displaying the image again.

So this could be the next one in the sequence, or we could've gone back to one,

in which case we're showing image one.

And here's just a reminder of what it does.

Starts off with the first image, fine.

One, two, three, four.

We hit four, it loops back to the beginning.

So we've learned another really important feature of JavaScript.

If you've had downloader programming before,

it will be a very familiar one, if statements.

But if you're new to it, it's very, very powerful.

And just like variables, we're gonna be using it throughout this specialization.

And all the time you're web programming, you're gonna be using if statements.

As I've said, if you've programmed before, for

once it's not too different from other languages.

There are some very minor differences, but you don't have to worry too much.

It's not one of these strange JavaScript features.

If you haven't programmed before,

well I'm gonna take you through another example in the next video and

hopefully help you understand a little bit better what you can use if statements for.

So, I will see you at the next lesson.

[MUSIC]

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play