Responding to mouse clicks

Loading...

En provenance du cours de University of London

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

2703 notes

University of London

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

2703 notes

Cours 1 sur 6 dans 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

À partir de la leçon

Beginning JavaScript

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

Responding to mouse clicks6:48

Rencontrer les enseignants

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]

So in the last lecture we talked about why we need JavaScript and

how it gives interactivity.

Now I'd like to take the first steps in creating an interactive webpage.

So If you look at this web page, it's as simple as it can

possibly be in terms of HTML and layouts, it's just one h1 tag.

But the thing I'm adding here is the ability to click on this tag.

So there's nothing special about it, it's not a button,

it's just an h1 with some text in.

But if I click on it, something happens.

It brings up this little alert saying Hello.

So this is very very simple interactivity, but

it requires us to look at a number of things, looking at events and JavaScript.

So what's happening when I'm doing this click

is that the web browser is creating an event.

So, something has happened that we need to respond to.

That event is called a click event, because I have clicked the mouse.

If we want to do something based on that event, we need to create a little bit of

code, a little script which will tell us what to do

when we respond to that event, and I'll show you how to do that.

So this is the simplest possible way of responding to an event.

Basically, this is an h1 tag.

It is simply some HTML that we've seen before,

but we've got a new attribute here, and this is an attribute called onclick.

Onclick is a bit of code that

the value of the attribute that happens when the element is clicked.

So this is telling the browser what it needs to do when

we've received a click event on this HTML element.

And the content of the app tree, the value, is a script.

While everything else on this slide is HTML,

this little bit is our first bit of JavaScript, and

this is what is actually making that little dialog window appear.

So, let's look a little bit more closely at what the script is doing and

what it looks like.

First thing to note, it looks quite different from HTML.

So, Java Script is a different looking language from HTML, and the syntax and

punctuation is different, so it's quite easy to tell what is Java Script and

what is HTML.

There are various bits here.

The first thing I'll say is what is this thing, alert.

Alert is a function, it's like a command.

We're asking JavaScript to do something for us, and

we're telling them what we want to be done is we want an alert.

And an alert, that function, what it does is simply create a little alert box,

a little dialog that pops up as we've seen when I showed you the original web page.

But, it's just one example of a possible function.

We could have many other functions that do many other things, and

we'll see many of those over the course of this MOOC.

So what's everything else?

So alert's the function, that's what we want it to do, what's everything else?

The next thing is this 'hello' thing.

This is an argument.

An argument is something that changes what the function does,

or tells the function how to do what it's doing.

So, creating an alert is one thing, you pop up a dialog box,

but not all alerts are the same.

The main thing that we want different about alerts is different alerts should

say different things.

And so the main thing we want to change about the alert is the text that goes

on that dialog box.

So our argument is changing that text.

In this example here, the argument is hello, and that hello is in quotes.

The reason it's in quotes is because to say this is some text,

it's not the name of a tag or the name of a function,

it's just simply the text hello that we want to display on screen.

Then we've got a bunch of punctuation, and this is really, really important.

As we've already seen in HTML, the sort of punctuation,

what we call the syntax, like the angle brackets, are a key part of the language.

They're really important.

The computer needs those to know what to do, and

because computers are basically pretty stupid, they can't really cope if we get

the punctuation wrong, so getting all the syntax right is absolutely critical.

Now, in this case, we've got these two brackets, they're standard parentheses.

What these are telling us, this is the start and the end of the argument of

the function, and as we'll get used to functions, these two parentheses

are really what defines a function, as opposed to other things in JavaScript.

And then we've got this semicolon, what's that for?

That's basically saying this is the end of this line of code.

So, we've done one thing, end that, and then we can move on to other things.

In this case, we were only doing one thing, we were only bringing up an alert,

so it's not so critical that we have this semicolon.

But it's very important to get used to putting semicolons cuz the minute

you start doing another thing after this code,

you will need that semicolon to end this command and start the next command.

It's a very important part of writing more complex programs.

So, let's have a look at the entire HTML file.

Very, very simple HTML.

I've got nothing in the head, and my body just consists of this h1.

As I said, it looks a lot like the HTML you've seen so far in this course,

apart from this onclick, which is exactly what I've just showed you.

Just to return to the web page to remind us what we do, we have this Hello,

this h1, and when we click on it it brings up an alert.

So, there you go, you've got the basics of interactivity.

We have an interactive web page, we can click on it,

it does stuff without having to do page reloads.

This is an enormously powerful technique.

This video we've only just scratched the surface, and in the next few videos I'll

take you through some more interactive techniques we can use.

[MUSIC]

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2018 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play