Manipulating HTML elements

Loading...

From the course by University of London

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

2776 ratings

University of London

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

2776 ratings

Course 1 of 6 in the 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

From the lesson

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

Manipulating HTML elements9:57

Meet the Instructors

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]

Hello, we've started to look at JavaScript.

We've got the basic concepts, and we're creating little bits of interactivity,

but all our interactivity's basically been showing alerts or

printing things out to the console.

None of it has actually done anything to the webpage itself.

Now, what I want to start on today is looking at how we actually

manipulate the elements of the HTML to sort of change what they're doing.

So let's look at a very simple example.

Back to our sort of, world's most basic webpage.

We've got a hello, and I'm gonna click on this again, and

this time, rather than being out of alert to print something out,

I've actually changed the HTML element,

where the text of the h1 has gone from being hello, to being goodbye.

Still pretty basic, but actually it's a massive leap in terms of what we can do

because, it shows that we you can now start to change the webpage

in real time based on user interaction, without having to reload the webpage.

So let's have a look at how we do that.

So this is the script, it's starting to get a little bit more complex, and

the first thing I want to point out is this, and I'll explain what it is.

Now, JavaScript has a lot of built in functionality that allows you

to manipulate the web page, but sometimes it's not the easiest to use.

And in fact, most people who write a lot of JavaScripts,

don't use the directly, the built in JavaScript functionality.

They use what we call library, so existing sets of code that are built on top of

JavaScript, and provide easier functionality instead of extra bits of

functionality than the language itself, and that's what we're going to do.

We're going to use a library called jQuery.

What does that mean?

All it really is, is it's just another bit of JavaScript.

A very big and complex bit of JavaScript, but

another bit of JavaScript that you can add to your webpage, and

that gives you a lot of power, lots of extra bits of code that you can access,

and it makes it easy for you to manipulate the webpages you want to.

So that's what we have here.

This line here, is simply adding in jQuery our,

this library is a JavaScript file.

The tag is called a script tag, we'll see that later,

but what this particular script tag is doing

is just bringing in some extra JavaScript and adding it to the webpage.

And the most important, the main attribute,

well the only attribute we've got here, is this source attribute.

That sim is the source attribute of an image.

So we're getting an external file, but in this case, what we have is not

an image file but a .js file, which means it's JavaScript.

I'm loading it from a web page, so this is the permanent hosted version of jQuery.

So, you can just download it all the time without having to include it in your

own sites, but sometimes you might want to include it in your own sites,

in which case you don't bother with the full URL.

You just have it there, but you need to make sure that this file,

a copy of this file is on your server.

The only thing I'll say here is that we've got this .min thing,

well actually I'll look at the full title to just explain it a bit.

It's called jQuery, that's the name of the library.

You see that a lot.

This bit is the version, it's actually very important

to be aware of the version of the library your're using.

It's constantly updating and changing so, if you want to

really control and know that it works and that some new version hasn't broken,

changed the functionality and broken your code.

You need to make sure you're looking at a specific version.

So this was the latest version at the time I wrote this, a couple of weeks ago,

and so, by the time you're doing this course,

there will probably be a newer updated version.

And this bit here is min, that means it's minified.

What that means is that JavaScript files can become quite big, and

if as you write JavaScript, just as you write html, you might leave some space,

put in some carriage returns to make it easy to read.

That's all very good practice to make great readable code, but

it does increase this file size.

So, there's this special program which will take JavaScript,

which is nicely formatted and readable, and

crunch it down by reducing all the white space, shortening the variable names.

So it's as small as it can possibly be.

So, once we got this library installed, then we can

access functionality in this library, and this is what we're doing down here.

Just as we have with previous examples, you've got onclick attributes and

we've got some code, a line of coding that onclick attributes, and this is some code

that's using jQuery, and I want to go through that in quite a lot of detail.

So, here is that, that line of jQuery code and I'll explain it bit by bit.

The first thing to note is this dollar sign.

This dollar sign is actually short hand for jQuery.

You could actually write out jQuery, but most people don't.

It's just a short hand, it just makes it a very short, simple thing to type.

It doesn't make your code overly long, and

this shorthand is,

what it is, is it's actually a function, and

we can kind of tell it's a function because it's got brackets and an argument.

So it actually looks like the function's the only thing that makes it look strange

is it's got this odd name and dollar sign, but

a dollar sign is a valid name for function.

The argument of the function is actually a css selector.

So if you remember from the last module,

the css selector is a way of accessing certain elements of a web page,

and in this case, we're using the hash or pound sign, and

that means it's the id of a particular element.

So, we're selecting an element by an id,

and we can see that we've given our h1 the id title.

Now, that JQuery

supports any kind of css selector, so you could select it by a particular type,

tag type like h1, or a particular class, but

if you want one specific element accessed, then you would normally use an id.

Then we're calling a function html.

Now this is like we saw in the last video.

We're calling a function on an object.

In the last video, that object, we had the name of the object, console.

In this case, the object is actually what the function is returning to us.

So, that function $("#title"),

that gives us an object, which represents the html tag.

So we've actually got the html tag back, and what that allows us to do

is call a function on html, and what that function, that function is called html.

What that means is that we're changing the body, the html body of the element.

So, all of the html code that's contained in the elements is being changed.

Now, at the moment that is just some text, it's just hello, but

it could have further tags in it including other tags.

And finally, we've got an argument to this function html, and

that is what we want to set the html content in the tag to.

So we're gonna, change the html content of the tag, and

we wanna change it to Goodbye.

Again, I could include tags in there, I could include a link for example, but

at the moment it's just text.

So, we're getting rid of the old content of the tag,

and we're putting in Goodbye, so we're replacing it.

So that's what this line of code does.

It grabs, it uses jQuery to grab hold of our html element, and

cause a function which changes the content of our html element, and

it changes it to Goodbye, because that's the argument of our function, and

just to look at that again, if I refresh when I click, it changes to Goodbye.

And, to look at it in context again, just to remind ourselves where it is,

we're putting that in the onclick, so it's responding to onclick.

So we've now, in this video, made a big leap forward.

We can now really create interactive webpages where the content of the webpage

changes as you interact with it, and responds to user interaction.

This is a very, very powerful feature and basically for the rest of this MOOC,

and for large chunks of the following specialization we're gonna

make use of this in order to create rich interactive web experiences.

[MUSIC]

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play