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
Variables in practice
Loading...
來自 University of London 的課程
响应式网站基础：HTML、CSS 与 JavaScript
2774 個評分
從本節課中
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]
Great so now you know about variables, and
I've told they're incredibly useful parts of the JavaScript langauge,
but so far we haven't done anything that amazing with them.
You can show a number on your webpage, and that's occasionally useful, but
it's not going to blow the world away.
So, let's look at
a little bit more depth about how we can use variables in the extended example.
We're gonna use it a bit more behind the scenes, so
you're never actually gonna see the variable on screen.
It's just gonna affect the behavior.
So, this is the example I want to look at.
It's an image gallery.
Now, we've got a bunch of thumbnails at the top here, and
we've got a big image here.
We can click on the thumbnails to show the big image.
So, that's kinda similar to some of the stuff we did last week.
The thing I really want you to look at is these backwards and forwards buttons.
So, this forward button, what it does is it steps through the images one by one.
So, you're going from the first image to the second image to the third image.
That's a nice little app, and I'll take you through how to build that, but
what has that got to do with variables?
What's the relationship between a bunch of images and
the number we were looking at in the last video?
Well, there's a really important relationship, and this is typical of so
much JavaScript and programming in general, that behind the scene,
lots of stuff that you see on the webpage actually can be represented as numbers,
and that allows us
to do some quite powerful effects by simply calculating on those numbers.
So, what are those numbers?
Well, the most important thing we can look at, in terms of these numbers,
is that we've got four images, and then we can count these images.
So, this graffiti image is image one, the cheese is image two,
the synthesizer is image three, and the city night is image four.
So, behind the scenes each of these images has a number, and
as long as we can do calculations on that number, then we can act on these images.
Really, though, it seems very, very different, but
it's exactly what we were doing last time.
So, we started off at one with a number one and we showed one.
Then we clicked on it, it showed number two.
We clicked on it, and it showed number three.
We clicked on it, and it showed number four.
That's what we did last time, and really, what we want to do here is no different.
We started image one.
We click.
We show image two.
We click.
We show image three.
We click.
We show image four.
It's the same thing, only, instead of directly showing the number,
we're grabbing hold of that numbered image and showing it on the screen.
So let me take you through some of the code that does that.
So, this is the codes of the page.
It's based on Matthew's example for module two.
So, I've got his style sheets and
you'll be able to download a zip file, which contains all of these files.
You'll need them in the right directory, a little bit of header stuff that's not so
important, and then we've got a bootstrap layout, a basic grid with some images in.
I'll come back to exactly what I'm talking about today,
but we've got these images.
Each of these images has a class crop image that's used in the CSS, so
just as we saw in Matthew's CSS lecture, we can use the class to apply CSS, but
in my last module we showed how we could use JavaScript
to use the same CSS selectors to add functionality.
I'll quickly show you down at the bottom how I've done that,
to allow clicking on an image to select it.
So, this is the bit.
While clicking an image,
I'm grabbing all of the HTML elements with the class crop image.
Those are all the little thumbnail images.
I'm calling the click function, which we saw last week, and we're doing this.
So, we're grabbing an element with an id, bigImage.
That's up here.
It's a very simple id.
It's just an image with an image source,
as usual, and this time I'm setting the image source
to be equal to the image source of this.
This stands in for the image that we've clicked on.
So, when we click on the little thumbnail, that thumbnail image
appears inside this variable called behind the scenes is a variable.
We didn't know about this last week, but it is a variable, and
what's in it is the HTML element that you've just clicked on.
Doing this .attribute source will
get the source of that attribute, and put it in to the big image.
That's fine.
That's what we've done before.
Let's look at how we can go back and swap between images based on their number.
How am I actually representing images as numbers?
So, this is how I'm doing it.
I've got an id for each image, and the last character of that id is a number.
So that one.
So I've got image1, image2, image3, image4.
It's as simple as that.
It's behind the scenes.
There's an ID, and that ID contains a number.
In future courses in this specialization, we'll look at much more
sophisticated ways of doing this, but for now this works well enough.
So, now if we go down to the code, we can
see here we've also got a variable, just like last week.
We've got this counter variable, and
just like in the last video, this counter will go from one two three four.
This is the basic thing that we're going to be doing.
We're going to be using jquery to click an image, and
calling click on its own without a function, passing it a function.
What that does is it's caused the click function.
So, it's like doing a virtual click.
We click on it, and instead of actually clicking on it,
we can write some code that does the same thing as clicking on it.
The interesting thing is in here.
So, we're grabbing an image by its ID, but
we've actually, instead of just typing in the ID, we're creating the ID in code.
All of the images we saw earlier started off with their ID with image.
So, it just got this text #image is the start of the ID, and
we're adding counter onto it.
So, we're putting a number at the end.
So, this expression, this code, will change.
The idea we're using will change every time counter changes.
So, if count is one, we'll get image one.
If count is two, we'll get image two.
If count is three, we'll get image three.
So, this is what allows us to get different images based on the state of our
variable.
This here in the middle is the code that actually does that.
I'll come back to the rest of the codes around it later.
There are a few other complicated things.
So, we're grabbing an element here with ID forwards, that's just the forward button I
showed you when I showed you the example, and we're giving this a click function.
This function does two things.
First, it adds one to the counter.
Exactly as we saw in the last video, we're adding one to the counter.
In the last video, we then showed that counter by putting it onto a bit of HTML.
We're not gonna do that.
Instead, what we're gonna do is use it to grab hold of an HTML element
with that number, and use jquery to change that element.
That's what we do here.
It's exactly the same code we saw above.
We're taking image, putting the number onto it, so we're going to get image one,
image two, image three depending on the value of the counter, and
then we're gonna call click on it.
As we saw, calling click on it is like a virtual click.
It will have exactly the same effect as if we actually clicked on that image.
So, it's basically just selecting that image.
So, let's look at all that again.
Clicking on an image will select it.
If we then press the forward button, it goes to the next image and
selects that one.
Okay, so let's have a quick recap of that code, and
I want to point out an important feature of it.
So, this is the code we were looking at.
We start at a variable.
We create variable starts at one, very much like we did last video.
Then we add one to it, again, exactly like last lesson.
This is the bit that's different.
Instead of just displaying the variable value,
we're using it to get hold of an image.
Again, that's just like any other bit of jQuery.
We're getting hold of something by its ID, but
now we're using this variable to create that ID from our program,
and then we're just using click to virtually click, selecting this image.
If your cover background is in any other language, most other languages other
than JavaScript, then you might find this as something that seems a bit odd.
This is one of those things I was talking about last module, where JavaScript
is really quite a different language from a lot of other languages, and so
some things might not work in quite the same way,
and this is a very different, but a very powerful feature of JavaScript.
If you're not used to JavaScript,
you'll see that this variable counter is created outside of this function click,
but that we're using it inside the function "click".
In a lot of other languages this would not be allowed because they're in different
scope, but in Javascript this is doing something different.
Because "click" is defined just after "counter" and,
to say this formally, "click" is defined in the scope of the variable "counter",
then the variable click sort of captures that scope, and is able to
use the variable counter, and it becomes part of the scope of the variable click.
What that is, it's called something called a closure.
So, the scope of the variable counter is put into the scope of the variable click.
This is a very, very powerful feature of Javascript.
It makes it easy to create a variable, and not date it in number functions.
It is very different from what you might be used to in other languages,
but don't worry.
If you have a program in other languages, and
you need to know what I'm talking about when I'm talking about Skype, don't worry.
It just works as I've explained.
Okay, so, we've now gone on from the basic uses of our variable,
to actually using it in practice in a webpage.
You can now use a variable behind the scenes to really make changes in
the webpage.
It's a very powerful feature.
I just wanna make a point of what we've really done.
What we've used the variable for
is used it to remember what's happening in the web page.
We've remembered which image we're showing, whether it's showing image one,
two three, four, and then based on the current image, which image we're showing,
what we've remembered, we can move on to the next one.
So, if we've remembered image two, we move on to image three.
That is a very, very powerful feature that we're going to use all across
JavaScript programming in many different ways, and
I'm going to show you one of those in one of the later videos of this module.
So, please come back to the next lesson, and we'll find out more.
[MUSIC]
