Explore
For Enterprise
Join for Free
Log In

艺术与人文
商务
计算机科学
数据科学
信息技术
健康
数学和逻辑
个人发展
物理科学与工程
社会科学
语言学习
學位
證書

瀏覽 Coursera 的全部課程

瀏覽
搜索
企業版
登錄
免費加入

Variables in practice

Loading...

响应式网站基础：HTML、CSS 与 JavaScript

4.5（3,258 個評分） | 94K 名學生已註冊

課程 1（共 6 門，响应式网站开发与设计專項課程）

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.

查看授課大綱

您將學習的技能

Jquery, Html, JavaScript, Cascading Style Sheets (CCS)

審閱

4.5（3,258 個評分）

5 stars
2,174 ratings
4 stars
760 ratings
3 stars
224 ratings
2 stars
63 ratings
1 star
37 ratings

JF

Feb 14, 2016

Bright instructors delivering succinct and interesting content, with quick-paced videos and quizzes make a great learning experience. I am really impressed! Thank you, University of London people!

SS

Jan 03, 2016

It's very good for beginner who already have hands in programming. it gives very basic and important concepts about HTML, CSS and javascript. it also gives a brief history of internet and HTML.

從本節課中

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

Variables in practice13:40

教學方

Dr Matthew Yee-King
Lecturer
Dr Marco Gillies
Senior Lecturer
Dr Kate Devlin
Senior Lecturer

腳本

[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]

探索我們的目錄

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

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

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

通過 App Store 下載

通過 Google Play 獲取

Coursera
關於
管理團隊
工作機會
目錄
證書
MasterTrack™ 證書
學位
企業版
政府版

社區
Learners
Partners
Developers
Beta Testers
Translators

連接
博客
Facebook
領英
Twitter
Instagram
YouTube
技術博客

更多
條款
隱私
幫助
內容訪問
媒體
聯繫我們
目錄
附屬公司