Lecture 53, Part 1: DOM Manipulation

Loading...

From the course by Johns Hopkins University

HTML, CSS, and Javascript for Web Developers

3972 оценки

Johns Hopkins University

HTML, CSS, and Javascript for Web Developers

3972 оценки

Course 4 of 6 in the Specialization Ruby on Rails Web Development

Do you realize that the only functionality of a web application that the user directly interacts with is through the web page? Implement it poorly and, to the user, the server-side becomes irrelevant! Today’s user expects a lot out of the web page: it has to load fast, expose the desired service, and be comfortable to view on all devices: from a desktop computers to tablets and mobile phones. In this course, we will learn the basic tools that every web page coder needs to know. We will start from the ground up by learning how to implement modern web pages with HTML and CSS. We will then advance to learning how to code our pages such that its components rearrange and resize themselves automatically based on the size of the user’s screen. You’ll be able to code up a web page that will be just as useful on a mobile phone as on a desktop computer. No “pinch and zoom” required! Last but certainly not least, we will get a thorough introduction to the most ubiquitous, popular, and incredibly powerful language of the web: Javascript. Using Javascript, you will be able to build a fully functional web application that utilizes Ajax to expose server-side functionality and data to the end user.

From the lesson

Using Javascript to Build Web Applications

In this module, we are going to take all those newly learned Javascript language skills and learn how to utilize them within the context of a web page. We’ll start by learning how to properly manipulate the web page components using the Javascript Document Object Model API. We will then move on to learning one of the most popular ways of serving up data to a web site - Ajax. We'll learn about the protocol that the language of the web speaks in (HTTP), how to set up and handle Ajax requests and responses, as well as how to process JSON data. We'll finish the module by connecting our restaurant web site from Module 3 to a real backend service that will allow us to pull the data for the restaurant menu dynamically from the server without having to reload the entire page.

Welcome to Module 5: Using Javascript to Build Web Applications0:47

Lecture 53, Part 1: DOM Manipulation6:52

Lecture 53, Part 2: DOM Manipulation11:34

Lecture 54: Handling Events9:58

Lecture 55: The 'event' Argument6:12

Meet the Instructors

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science
Whiting School of Engineering

[SOUND] JavaScript

in the browser wouldn't really be any fun if you wouldn't be able to manipulate

the page that that JavaScript is attached to.

So in this lecture, we're going to speak about DOM manipulation,

otherwise known as Document Object Model manipulation.

So the first question that comes when we start talking about DOM manipulation is

how to include the actual script.js,

how to include your JavaScript library inside your HTML page.

Currently, I'm looking at script.js, which is located in the Lecture53 folder.

And I'm going to go ahead and just close the file browser so

we have some more space here.

And before we even start going on about where to include the script.js,

let's go ahead and learn about this special object called document.

And the document object represents the entire HTML document,

the document object model.

So we know that there is an object called window, otherwise known as this, and

it contains a whole bunch of things.

One of the things it contains is a document property.

So if we go ahead and say, let's clear this, and

say window.document, you'll see that what you get is a document object.

And if you open it up,

you can see that the document object contains our entire HTML page.

This document object is the stepping stone for

us to be able to get at individual elements within our webpage.

And there's a few ways to do that.

So let's go ahead and take a look at our index.html just to familiarize ourselves

as to what's going on here.

So what we have here is a very simple page.

It has an h1 title, which just says, Lecture 53.

We'll give it an id called title.

Then we have a paragraph that says, Say hello to, and we have an input field again

with an id name to type text, so it's going to display a text box.

And we also included a button that just says, Say it!

And then, at the very end here,

we have this div that is an empty div that just has the id content.

And we'll see why we need that a little bit later.

So one of the central methods that the document object has

is being able to get at the element by the id.

So let's go to our console and let's try to get at this h1 element right here.

So, the way we could do that is by the special method called, let's go ahead and

say, document.getElementById.

And, in parenthesis, we're going to specify the actual id in quotation marks.

But the id is going to be without the pound sign.

It's just the actual id.

In this case, it's just title.

So if we execute that statement,

you'll see what it returns is the element h1 that has the title id.

Now, of course, we could do console.log inside our script.js to accomplish exactly

the same thing.

So let's go ahead and try that.

First, let's include script.js,

which is located in the js folder inside our head section of the document.

So we will say, script and

we'll say src="js/script.js".

And we can omit the type attribute here because JavaScript is really the only type

that's possibly here.

So go ahead and save that.

Let's go to our script.js and execute exactly the same thing.

Let's go say document.,

now the reason we're able to use document here is because we're in the global scope.

And global scope is window.

And window has an attribute, has a property called document in it.

So when we say document, this will obviously go ahead and

look on the window object to see if document is one of its properties.

And, in fact, it is.

So document.getElementById, and we're going to say title.

Let's go ahead and console.log this.

So let's see what happens when we do that.

Let's save that, and we get null.

Well, that's kind of strange.

Why would we get null?

Why are we not getting this Lecture 53 title?

Well, the reason we're not getting it is because of when

this line is being executed.

Let's take a look at our index.html again.

This line is executed just like any other JavaScript,

is exactly where it is mentioned.

So it's as if we took this line right here and we copy and

pasted it right in the middle of the script tag.

Well, the problem is, is that, when you are calling and asking the document to

retrieve for you something that has an id title, at this point of

the rendering of the HTML page, the h1 with an id title doesn't exist yet.

So, therefore, you get null.

So how do we solve that?

Well, there's actually a couple of ways of solving it.

One is to have a special method that listens for an event in the life cycle

over the page loading, and says, when page is loaded, go ahead and execute this line.

However, there's even a simpler way to fix that.

Especially with the fact that what we're trying to do is

insert some behavior into the page.

It's not how the page is going to look, it's how the page is going to behave.

And whenever things like that, JavaScript code like that is executed,

it's always best not to keep it in the head, but

actually place it at the very end of the document.

So, which is what we're going to insert right here.

So this JavaScript is going to execute after all of these things have been

already processed, loaded in the browser's memory and

the document object model is now going to be alive and well.

So now, if we save that, you'll see that now, we are getting,

at this point, the h1 that is an id equal to title.

So this code executes just fine

only when this element has all ready been loaded and rendered.

Now the reason we're able to use this function called getElementById

is because document is a special object and

the object name of the document is HTMLDocument.

It's a special object that has a whole bunch of different methods

that you could call in the document.

So in fact, we can actually console that out,

console.log(document) and find out is it an instanceof.

It's an instanceof operated we actually haven't seen before that tests whether or

not our particular instance is actually an instance of a particular class.

In this case, it is HTMLDocument.

So if we print that out to our console or save that, you'll see that that's true.

So document is actually an instance of HTMLDocument.

So if you go on the web and look up HTMLDocument, you will be able to see all

the methods that HTMLDocument defines for you to help you manipulate the webpage.

So now that we know about this special object called document,

otherwise known as HTMLDocument, in part two of this lecture,

we're going to start using this special object to manipulate the webpage.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2018 Все права защищены.

Загрузить из App Store

Загрузить в Google Play