Using variables

Loading...

來自 University of London 的課程

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

3094 個評分

瀏覽相關視頻

您將在 Coursera 發現全球最優質的課程。以下是為我們為您提供的部分個性化建議

University of London

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

3094 個評分

課程 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

Using variables8:21

與講師見面

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, I told you about variables.

I want to take you through a first simple example of how to use a variable.

And this is going to be a very simple webpage.

In the future videos we're gonna use it do something a bit more real.

But this really simple webpage is even simpler than the ones we run last week.

It's just a simple number.

And what that does though, is this number is our count.

We're gonna use this page for counting.

And whenever I press on this number, it counts up.

So, that's, we can see that we've got.

We implement in the basic functionality we might want to use with a variable.

We've got this value, and we're changing this value.

So I'm going to take you through the code now.

So here is the code, as usual we've got

jquery in there, because we're manipulating HTML elements.

And we've got an h1, which is that number.

We've give it id="number" so we know what that is and

we've got an onclick, as we saw in last week's module.

We're calling this function count() and I'll show you that in a minute.

One thing to note is that this doesn't actually have any content.

So that may seem a little bit strange at first, we've got each one

with nothing in there but the reason I'm putting nothing in there, and this is

quite a common technique, I don't want to sort of hard code anything in there.

I want to give it it's content directly by JavaScript.

And you see increasingly In as we go to web programming.

With a loss of the content is going to be put in by JavaScript.

It's not going to be put in directly typed into the HTML.

And here is that JavaScript.

So I'm going to look at these first two lines.

First, because they are exactly what we did in the last session.

We're setting the variable counts equal to zero and we're using this variable.

We're putting that into the HTML.

As I said in the last video, using this variable

as input a function, lets us just copy across the value that's in that variable.

So when I write as I do here html(counter),

the value that's inside counter is getting copied into the call to HTML.

And that value has been set up up here to be equal to 0.

So that's pretty much what we saw in the last video and

the end result is that we've got this number, this showed on our webpage.

If we very quickly go back and reload the webpage we see that

the results of that code is the web page that displays here.

Pretty simple.

Before I move on to the next bit of the code, I would like to briefly recap what

we talked about last week to really understand that and

then show how we can start changing that.

So here we are, if you remember, we create a variable, by using the word var.

Give it a name, and this is the bit I'm interested in now.

We're setting the value of this variable to be 0.

So equals puts a value into the variable.

Now in this first example, we're doing this as we're creating a variable.

And normally, as you create a variable you're always gonna put a value in it so

there's something there.

It's possible to not do that.

And we've got this weird thing called undefined which is what

the value of a variable that has no value.

But most of the time you want the variable to have value so

you're going to put a value in there.

But there's no reason that you always have to put a value into the variable

only at the beginning, you can then change that value.

That's the point of the variable.

So I'm going to take you through that.

So, before we get to changing the value, here's another example.

Now, as I said, we can use the value of the variable

wherever we could use any other kind of number, so a variable

is just like a number, it's just like a value and I can use it in the same way.

And here I'm using it at to set another variable.

I'm taking a new variable called newCounter and

I'm setting it equal to counter.

There's nothing to stop me doing that, that's perfectly valid.

Counter is a value, I'm just putting one value into another value,

it's a very common programming tool.

And I'm actually setting it at counter plus 1,

so again, I can do maths on variables.

I can add one to my variable, so the result is this isn't changing counter,

it's just taking the value in counter, which is initially zero,

adding one to it, and putting that value into my new variable, new counter.

So that is creating a new variable with a value that is based on counter.

But I don't even have to stop there.

I can actually use the value of my variable counter and

use that to change the value of counter.

So I'm taking my variable counter and

setting that equal to the current value of counter plus one.

So I'm taking counter, adding one to it, and putting it back into counter.

So that I've got a new value for

the counter which is one more than it was before.

And that has exactly the effect I showed here.

We're taking the value, the what value is one, we add one to it and

put it back and it's two.

So, we have available now.

It's updated. It's got new value.

It's changed and we can go ahead and do something new with it.

So, that sort of simple operation plus one put it back gives us

the ability to count and move on, which is a very common programming practice.

Count and do something with the next value.

And I'll show you now, in more fuller code,

how we actually use that to display a different number each time we click.

So this is our function count, which is actually doing this counting and updating.

As we saw up here, it's our onclick function of our element.

And we're doing exactly what I said.

We're taking counter, we're adding one to it, and putting it back into counter.

So we've not got this new, updated value of counter.

The only thing we need to do now is actually put that back into the HTML page.

So just because the variable has changed,

it doesn't mean the HTML will have updated.

We need to update that manually.

And this is just what we do with this line of code,

which is exactly identical to this previous line of code here.

So we're just repeating this operation where we're setting

the HTML value of the the number elements to the value of counter and

what that does is when we click, we update the value and it writes it back and

we can submit that and so as I click, the numbers are gonna go up.

Make that bigger just so you can see it cuz it's quite small on screen.

And I can carry on counting pretty much forever.

Okay, so we've now managed to use variables to remember something,

remember where we are in our count, and then reflect that back into the HTML.

So we can show this sort of counter going on on our page,

every time you click it goes up one.

But that isn't really a particularly exciting webpage so

over the next few videos I'll show you a more complex example

where we're using the same basic principle of counting to create

a slide show based on the image gallery we looked at last time.

[MUSIC]

探索我們的目錄

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

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

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

通過 App Store 下載

通過 Google Play 獲取