Variables

Loading...

來自 University of London 的課程

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

3174 個評分

University of London

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

3174 個評分

課程 1（共 6 門，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.

從本節課中

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

與講師見面

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]

Welcome back.

In the last module we looked at creating interactive websites,

building on the HTML and the CSS that we had done previously, to use JavaScript to

manipulate in real time what's happening on the website based on user interaction.

We ended that up with a nice image gallery example, where users could

click on a small thumbnail and see the large image.

Now, I'm gonna sort of play with that example a bit more and

do something new with it.

So this is pretty much the example we looked at last week with one really

important difference, that we've, now it's not simply clicking.

The user isn't simply clicking on it.

The webpage itself is updating to create this slide show effect,

where we're going from one image to the next one, and

that's got quite a nice common effect in a lot of websites,

sort of really normally adds some nice things like smooth fades and

all this but I wanted to show a fairly simple example of this.

So this kind of example is something we'd like to build for

this week, but it requires a number of important features.

And one which might not be obvious is that to do this,

we need to keep track of which image we're currently displaying.

Because we need to know which one to do next.

So, we need to know where we are, which is our current image.

And to switch to the next one,

we need to know which the next one is based on the current one.

And that actually brings us into some quite new functionality that we

haven't seen before, because what we need actually to do this is to count.

We know that we're image one, so we need to go to image two.

Once we're at image two, we need to go to image three and

when I flip to image three, you need to go to image four.

Seems a pretty basic thing to do for us and it's a pretty basic thing for

a computer to do as well, they're very good at counting.

But I'm going to show you how to do that, and

in particular how to keep track of the current value of the count.

So, counting and keeping track of a value is based on something called a variable.

Now you can think of a variable as a little box in the memory of the computer.

And that box can hold a value.

So for example, this box has a value one.

The value isn't necessarily a number.

It can be many things, including sort of text and other things.

But for now we're gonna look at numbers.

And it's important to be able to have that number somewhere so that we know and we

can remember what the computer remembers, that we're currently displaying image one.

So when it's time to transition to next one, we display image two.

So we've got this little box, and it's keeping track of the accounts, but

we need to be able to know how to get hold of it, and know how to use it.

And to do that, we need to give it a name.

This is like we gave names to functions in the last module.

We give names to variables so we can then access the value of that variable later.

And the really important thing about variables,

if you take the name variables into account, is that they vary.

They change their values,

which is exactly what we need because we need to go from one, two, three, four.

So, we take the value one and we can change that value and set it to two.

Let's have a look at sort of how that actually works in practice.

So this is some code to create a variable.

Now the first line is this thing var.

That stands for variable.

This tells us it's a variable.

That's just like what we do when creating a function, we say function before we do

anything else so that JavaScript knows that you're creating a function.

And what calling var does is basically creating a little box,

that little box we see on the right of the screen.

Then next we give it a name, so we call it counter because we're counting.

So we've got a box with a name so that we can use it later.

And then we say this equals.

Now what this equals does is set the value of the variable.

This is quite an important thing because actually you can,

equals can have two meanings.

Sometimes equal means A and B are equal, means they are the same.

But actually, in this programming context, it doesn't mean counter is equals to zero,

it means we're setting counter equals to zero.

Counter becomes equal to zero.

And we have to set it a value, and this value is zero.

Or it could be one, or any value we like, really.

So that last bit equals zero is putting a value into our little box.

So we've got a box with a name and a value in it, and that defines our variable.

And once we have our variable, we can use it in other context, just as we can

see down here, in just ordinary JavaScript code where we'd use everywhere else.

We can use the name of that variable, in this case counter, put it in.

And where ever we use the name of that variable it get's replaced by the value in

that variable.

So we can set the text of a particular HTML element as we're doing

here to be equal to the value of that counter, and it will be zero.

If we do it again and we change the value, it will be a different value.

Whatever value we have will be put into the HTML,

replacing where we've written out the name of the variable.

So this is a really really important feature of JavaScript and all programming,

I'm not sure if you're used to programming, that is

not of a novel concept to you, though the one thing I will say if we go back to

the beginning of this slide is if you're used to applying this like Java, you may

be surprised that I'm not putting a type there, I'm saying var instead of a type.

JavaScript is not a type language, a variable can be anything,

it can be a number, floating point, just text,

the same type of variables can hold all those values, so just be aware of that.

You don't need to worry about types in JavaScript.

If your computer needs programming or having programming a type language you

probably don't know what I'm talking about.

You don't have to worry about it.

That's a feature that exists in other languages that has certain benefits but

it makes programming a little bit more complex.

In JavaScript, it's quite simple.

You can create a variable and put whatever you like into it and

you don't have to worry.

So that's the basics of variables.

In the next video, I'd like to show you how to use a variable in practice.

[MUSIC]

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

© 2019 Coursera Inc. 保留所有權利。

通過 App Store 下載

通過 Google Play 獲取