Loading...

Anonymous functions

Welcome to the third module of 'Responsive website basics'. <p>In this module we will write simple JavaScript programs and learn how to write programs that can respond to user input such as clicking on HTML elements. We will also take a look at JavaScript functions and use jQuery to manipulate web pages.</p>Finally, you will learn how to write your own javaScript functions including anonymous functions. <p> Looking forward to working with you this week! <p> - Matthew and Marco

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

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

教學方

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

腳本

[MUSIC]

We're now creating some interactive web pages.

And let's have a look back at the kind of page we've created.

So as we saw, we've got this HTML element and we can now respond to clicks on it.

So when I click it, it changes to Goodbye.

But, actually there's a slight problem.

When I click it again, it just stays at Goodbye.

I might want it to do something else.

I might want it to switch back, for example.

And why is it doing that?

Well, it's not that it isn't responding to mouse clicks.

What's it doing, is that every time I am clicking on the mouse on this,

it's changing the text of this element to Goodbye,

because that's what my function does, it changed it to goodbye.

But if it's already Goodbye, it's not actually changing anything it's just

taking Goodbye and replacing it with Goodbye.

What we'd like to be able to do is to do,

if the text is already Goodbye, to do something different.

And there are a number of ways of doing that, but

one way of doing that is actually change the functionality of my JavaScript at

the same time as I change the text.

So when I I've changed from Hello to Goodbye,

I actually want to change my function as well so that I'm changing from

a function that sets it to Goodbye to a function that sets it to Hello.

So how can we go about making that change?

Actually JavaScript has some really nice features for enabling us to do that.

So let's just remind ourselves again, we've got our onclick event,

which has got an associated function, and we can define that in the HTML tag.

But there's actually another way of doing it, which is that we can use jQuery and

JavaScript to change what happens when we click on an element.

So, what we've got here is, as we've seen in previous videos, we got jQuery.

We're getting hold of that element and we're calling a function on it.

This is a new function.

Last time we we called the html function, which changes the content.

This function is click, which changes the onclick function.

So what happens when you click it?

This is a really nice feature of JavaScript because you're not just

changing the content, you can just in the same way you can change the content,

you can change the functionality of a particular HTML.

And so, that as your interaction with the program evolves

you can change what the web page actually does.

This is really powerful.

Now the thing that enables that is actually this.

The fact that we can instead of passing in some

text to a function called click we can actually pass another function.

This is something that may seem a little bit odd to people with a Java background.

This is not the kind of thing you do in Java or even Python.

But actually it's really core to how JavaScript works, and this one of

the sorta of big differences that I mentioned at the start of this module,

that actually it's a very fundamentally different language to one like Java.

And one of the reasons for that is that,

unlike Java where functions are a special thing, in JavaScript functions are just

objects, things like anything else and you can pass them into functions.

You can do anything that you can do to a piece of text,

almost you can do to a function.

And as we'll see in the future, this is a really powerful technique because It

makes it very easy to do the kinds of things we're gonna do,

which is changing the functionalities associated with an element.

As well as many, many more complex techniques,

which we'll learn at the course of this specialization.

So here's we're passing in a function to our click.

In many ways, it's like any other function,

but the thing to notice is, it doesn't have a name.

We just calling it function without the name.

And we don't need a name in this case,

because we're never actually calling it again.

We're just passing it into onclick and it's never been used anywhere else.

So we don't need to give it a name.

And this is something called an anonymous function, because it doesn't have a name.

And this is something that's used throughout JavaScript.

Again, it seems very strange to a Java programmer, but

in JavaScript this is really core functionality where we just

create a function on the fly and pass it into another function.

We're passing it into click and it's changing the functionality of the click

button but we don't have to explicitly call it again.

We don't have to give it a name.

It's just created for the sole purpose of passing it into this function.

As you see, we're defining the function, we're giving all the function

directly inside brackets, which define arguments of click.

So let's look at the rest of this.

We have the body of this function.

The body of this function, as I said, is defined directly inside the parentheses,

the brackets which contain the arguments of click.

And we can put whatever code we like in it.

Very strange to someone from many other programming languages but

very much the way JavaScript works and

you see this kind of way of writing throughout JavaScript's code.

And just thought I'd like to look at the last line here cuz it's

actually got a lot of complex syntax punctuation.

We need a curly bracket to end the function.

Here, we're ending the arguments to click.

So this is ending, I called click, and we're ending the line.

And so, what are these three slightly odd sort of bits

of punctuation at the end and you'll see that a lot again.

And I also want to point out this last line of the function.

The first line of the body of the function is just doing what we've done before,

changing the HTML.

There's an important difference of course, we're changing it back to Hello this time

instead of changing it to Goodbye, but otherwise it's the same.

What's this line doing?

It's $("#title".off("click");.

What it's doing, it's another function on the same HTML elements, but

what we're doing is we're turning off some functionality in the click functionality.

The reason we want to do that is, once we've clicked and

changed it back to Hello, we want to go back to the beginning of the program.

We want to get rid of this special new function we've added to click.

So, we just turn it off again,

and it will revert back to the old function that was there before.

In fact, that old function never really went away,

it's just this function is overwriting it.

Let's look at that in a full webpage.

So it's usually in the head where we're loading up jQuery,

that's the same as ever.

We've got our h1 tag that we're manipulating.

And we've got in our onclick, we calling sayGoodbye().

That's a function that we've created ourselves, and

it's down here in this script tag.

And this is function, it's actually a lot more complex than we've seen before,

and this is where we're starting to see the benefit of separating our code

off into a script tag with its own function, because now we can have lots of

lines of code that really wouldn't fit very well inside this app.

So the first line is just the same as ever, we're changing the HTML to Goodbye.

And then the next line is this click function, which I've just described

to you, where we're changing the click functionality, and the two things we're

doing there are kind of the mirror image of what we're doing in sayGoodBye().

We're switching the title back to Hello and

then we're turning off this new click functionality, so

we go back to the old click functionality, which is calling sayGoodbye().

So there we are, we're starting to build up some more complex JavaScript programs.

Let's see what that actually does.

When I click Hello it changes to Goodbye, and

this time when I click Goodbye it changes back to Hello.

And it's always flipping back and forward between those two things.

So we've got some nice new more complex functionality.

So that's good.

So we've got the ability to not only change what the webpage looks like,

but change what the webpage does, based on user interactions.

And that's really powerful because it allows us to turn on and

off bits of functionality, reveal bits of content, but

those contents don't have to be just static texts, static HTML.

They can be interactive content where we're creating new bits of functionality

as we reveal and add new bits of code.

This as I said, a powerful technique that we're gonna use a lot

over the course of the rest of this, making this specialization.

And we've done a lot in this week and this module.

We've gone from the most basic bits of functionality to really quite

sophisticated use of JavaScript anonymous functions.

In the last video of this series, I'm just gonna quickly show you a slightly more

rounded, complex example of how to use that.

[MUSIC]

關於 Coursera

課程、專項課程和在線學位均由全世界一流大學和教育機構的頂尖授課教師教授。

Join a community of 40 million learners from around the world

Earn a skill-based course certificate to apply your knowledge

Gain confidence in your skills and further your career

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

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

通過 App Store 下載

通過 Google Play 獲取