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.
Using variables
Loading...
來自 University of London 的課程
Responsive Website Basics: Code with HTML, CSS, and JavaScript
3175 個評分
從本節課中
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-KingLecturer
Computing Department, Goldsmiths, University of London
Dr Marco GilliesSenior Lecturer
Computing Department, Goldsmiths, University of London
Dr Kate DevlinSenior 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]
