Original subtitles

[MUSIC PLAYING]

DOUG LLOYD: So in our video on JavaScript,

we introduced you to the concept of an object.

And in this video, I want to talk about a very specific object

that we can use to manipulate data and content on our web pages called

the document object.

Now, you may recall from that discussion in the JavaScript video

that objects contain two different things, basically.

They contain something called properties or data.

And they contain methods, which are functions

that apply just to those objects.

But what we didn't really get into a lot of detail

was that those objects, what you can put in them is actually pretty flexible.

You can do a lot of different things with them.

You can not only put data in there.

You can also put other objects or arrays inside of it.

And maybe those objects that you put inside of that bigger object

also have other objects in them.

So you can kind of create this nesting structure of objects

within a single JavaScript object, which,

if you think about it, thinking back to our discussion about C and trees,

it kind of creates a tree structure where you have one object,

inside of that there's another one, inside of those, there's other ones,

and so on.

One very specific object in JavaScript is called the document object.

And that is an object that basically organizes

the entire content of a single web page into a single JavaScript object.

And once you know the methods and properties of the document object,

you can change them in JavaScript.

You can assign the different properties to a value.

You can call methods on the object to change some of those properties, which

then allow you to manipulate the content or look and feel of your website

only using JavaScript, instead of going back and editing your HTML

or the Python that underlies it.

So here's an example of a very simple HTML website.

There's really not much going on here.

But as you can see, there's HTML tags.

We have inside of that a head and a body.

Inside of the head, we have a title, "Hello, world."

Inside of the body, we have a couple of different tags there.

We have an H2, or a second-level header tag, a paragraph tag, and a link.

And all of this can actually be represented in JavaScript

as a document object.

We can actually arrange all of this hierarchically,

sort of similar to what we're doing with the indentation, where clearly things

that are indented one level further in are nested with inside of another--

nested inside of another part of the HTML.

So for example, here is what a tree structure of that simple web

page we just looked at might be.

So we have a document.

And inside of that, we have HTML.

And that's kind of represented by the HTML tag that we have.

And everything inside of it is sort of nested below it, as you can see.

Within our HTML, there are two main things at the next level down.

There is the head and the body.

So we can look specifically at the head.

And we see that inside of the head, there is a title.

And inside of the title, there is some text, "Hello, world."

And we can also look at the body, which is an entirely different segment

of the object or of the tree, inside of which

is each of those three individual pieces, the h2, the p, and the a tag.

And all of that can be represented sort of

in a tree, which maps, as you can see, as I'm

highlighting the text in green on the HTML, to a section of our HTML as well.

So the document object has properties, just like any other object.

And it has a number of methods as well.

And if you, again--

and we're going to talk about this in just a moment--

know how to navigate through the document object, starting at the top

and drilling down to the section of the page that you want,

you can change what your site looks like.

So actually, let's go into the IDE and take a look

at how you can see the document object yourself in the browser.

OK.

So we're in my IDE and I'm really quickly just going

to show you that this is exactly the same HTML that we had just a moment ago

on a slide.

And I have page actually open in another tab here.

And you'll also notice that I popped open my Developer Console.

If you're using Google Chrome, you can usually

do that with Control-Shift-J on a PC, or Command-Shift-J a Mac.

And that just opens the JavaScript Console.

And recall from our JavaScript video that we

can use the Console using console.log, for instance,

to print out information to the Console as we're going through our page.

Well, there's other things we can do with the Console as well.

We can also type commands to it to have it do something.

And so what I'm going to do this time is something a little bit different.

Instead of typing console.log, I'm going to type console.dir.

And what console.dir is going to do is it's

going to basically try and organize the content of my page

here in a directory structure, which basically

is a fancy way of describing an object.

So we can kind of look and see what's in the object.

And what object do I want to look at?

Well, I want to look at the document object,

so I'm going to console.dir document.

And when I hit Enter here, we're going to see that I got an undefined.

But above that I have this sort of pound sign document.

That is the JavaScript Console returning to me the document object.

When this pops open, there's going to be a lot of stuff in there.

And a lot of it we're not going to really talk about.

I just want to show you how things are nested in that document object.

So I'm going to pop this open.

And again, there's a lot of stuff here.

But what I really want to take a look at is

the children, so just looking at the children property of the document

object.

And you can see that there is one.

If I pop that open, what do you see here?

Inside of the document object, there is one child

called HTML, which you might recall from our diagram a few slides ago.

If I pop that open, you'll see that it also

has children, two of them in fact, head and body.

And I can continue doing this exercise all the way down.

But in fact, if I kept doing that and I looked inside of the head,

I'd find the title tag.

I could open that and see what's in there.

Inside of the body I would find that there are three children, the h2,

the p, and the a tag.

All of them are nested inside of this big document object.

And we can actually manipulate this object using JavaScript.

Let's go back to the slides and talk a little bit

about how we might be able to do that.

So again, the document object, as you could

see from when we were just looking at it in the Console, is pretty big.

There's a lot of stuff in there.

We're not going to cover all of it, because not all of it's

going to be really necessary as you get started working with it.

But I want to cover a couple of the big properties

that you might use when you're working with the document object, as well

as a couple of the methods in just a moment.

So one of them, for example, is InnerHTML, which

holds the HTML inside of a set of tags.

So for example, the InnerHTML of the title tag,

if I was to go into that section, would be

"Hello, world" or whatever I called--

whatever my actual title of my page is.

That's the InnerHTML of the title tag or the title node

or the title object within the overall document object.

nodeName similarly would just be title for the node we were just describing,

or the section of the object we were just describing.

Id.

You may recall from our video on HTML and CSS

that we can specify an optional ID attribute to certain HTML elements.

We usually use this in the context of CSS,

for example, to style one particular node

or one particular set of tags in our HTML with a certain style.

We can give it an ID so that the CSS knows which section of the page

to apply that style to.

So this property would just allow us to figure out

what the ID of that particular node is.

parentNode is a reference to the node one level up.

So again, if I'm looking at the title node--

I'll just continue using that example for now--

the parent node of that would be head, because title is nested inside

of head in that tree structure.

childNodes is sort of the converse of that.

It is what is down from where I currently am.

So if I am now using the body node as an example,

so we've kind of nested to that section of the tree,

the child nodes of the body node would be that h2 and that p and that a.

Those would be the three child nodes from that area.

attributes, an array of attributes of an HTML element.

A good example here is the image tag.

So if I am, again, navigating through the document object using JavaScript

and I come to an image tag and I want to figure out what attributes it has,

well, you may recall that an image's attributes

include, for example, its source.

What is the source file?

Or perhaps I've also specified optional parameters of height and width.

Those would all the attributes associated with that particular node

of the document object.

And then style, which is one way--

which is another way we can actually style the look and feel of a page.

And in a few moments, we'll actually be going

through an example, where we specifically

manipulate this property, the style property, to change something.

But it is analogous to the CSS styling of a particular section

or portion of the page.

So those are some of the most common properties.

There are also four common methods that you might see.

And again, there are many more beyond this.

But here are four that you might use as you're beginning

to work with the document object.

getElementById.

And notice that now because we're talking about methods,

these are all functions that may optionally take parameters.

In this case, we're looking for an element with a specific ID.

That's the parameter being passed in there.

So if we maybe have styled a particular element using CSS

and we've given it that optional ID attribute,

this method would go and navigate through the entire document

object for us and find that specific node,

one of those further down the tree or further nested within the object.

It would find that section of the page and return to you

the M object from that point down.

getElementsByTagName.

Notice it's getElements.

This would, for example, maybe find all of the instances of me using a B tag.

So it would give me an array of all of the bold tagged sections of my site.

appendChild basically allows me to add an additional node

below where I currently am, so it allows me to expand the number of things.

I might want to add a new element on the fly to the body portion of my website.

I can append perhaps a new paragraph tag or an H3

or something else that wasn't there before using this method here.

And then removeChild is sort of the opposite of that.

It deletes a section of the page by removing

that portion of the HTML, that entire node, from the document object.

I do want to point out one thing here that causes

programmers a lot of heartache.

I know it's caused me a lot of heartache.

When you're using the getElementById attribute, notice that the D in Id

is lowercase.

Usually when we use the term ID for identification, it's usually capital I,

capital D. I can't even tell you how many times I have accidentally

typed capital I, capital D here.

And then I get a JavaScript error, because it

doesn't know what I'm talking about.

So calling this out specifically as a well-known common issue,

be really careful when using this to use a lowercase D there instead.

So because the document object is one big thing

with lots of objects nested within it, if we start at the top,

we can find our way using those properties and methods

to any other area within the document object.

Now, you may have seen that some of those terms, some of those property

names and some of those method names are really, really long.

It would be a lot to type out to do that.

And so it's actually quite common when you

are working on a project that has a lot of document object manipulation

to use a JavaScript library called jQuery.

jQuery is quite popular.

It's probably the most popular JavaScript library currently in use.

It's been around for about 10 years now.

It's an open source library.

And it does a lot of things.

But one of the things it does particularly well

is simplify what's called client-side scripting,

or where you are writing some code to change things on your computer

to affect the look and feel of a site.

Document object manipulation is one of those things it does really well.

And it also does AJAX queries, which we'll

talk about in another video on AJAX, quite well also.

So for example, the raw JavaScript version

of this, what we're doing here in this raw JavaScript

is changing one section of the page.

I'm finding the element of my page whose ID is colorDiv.

So I'm starting from the top of the document.

It's going to look through the entire document object, all of those

nested nodes below it, to find a section of the page called colorDiv.

And I'm going to go there and set that node's style property's backgroundColor

property to green.

So basically, all that's happening here is

I'm changing the background color of one section of my page to green.

That is a lot to type to do that in pure JavaScript.

In jQuery, the trade-off is you get a shorter--

you have to type less stuff.

You have a shorter line of code.

But it's going to look a little bit more weird.

So this would do exactly the same thing using jQuery syntax.

The dollar sign is a shorthand way of saying jQuery.

And it's going to be looking for a section of my page called colorDiv.

That's the jQuery syntax for it.

And I'm going to change that node's CSS background color to green.

Again, it's a little bit strange.

But it is a shorter way to do the same thing.

So you will often see this as opposed to the longer JavaScript version

when you're seeing some client-side scripting.

What I want to do now is go back into the IDE

and show you a little bit about how--

show you a couple of examples of how we can actually manipulate the document

object using JavaScript and jQuery to change

the color of a section of a web page.

All right.

So here is a very simple web page-- and you can download this example when

you're reviewing this video--

that has a whole bunch of different buttons.

And as you can see at the top, there's a section that says "Change my color!"

We're going to be trying to change the background

color of that section of the page.

And apparently, I'm going to do it four different ways.

There's individual functions for background color written in JavaScript;

a single function to change the background color,

so a bit of a design improvement perhaps; an event handler--

recall from the end of our video on JavaScript,

we talked a little bit about event handlers,

so this will be another opportunity to see those in action--

and one example where we do the exact same thing using jQuery instead of

using raw JavaScript.

So let's take a look at what the code for this site actually looks like.

In my IDE we'll open this tab.

As you can see, I'm loading a couple of different JavaScript scripts

at the beginning of my page, so I'm basically

doing a pound include, the analogy here from C,

of a couple of JavaScript files.

And I have one file for each of the four different types of color manipulation

we're going to do.

And then here, it's not particularly well designed HTML,

but it kind of gets the job done.

I have one section with a set of five buttons for the background color ones,

one for the passing in the color as a parameter, one for the event handler,

and one for the jQuery ones.

And they all look a little bit different.

So let's start by looking at the individual color ones.

So there's really not much to this.

You saw that I wrote those five different functions,

turn purple, turn green, turn orange, turn red, and turn blue.

And all they do is, using pure JavaScript,

they get the element by ID of colorDiv, which is the element that we're trying

to change the background color of.

And I set it's style backgroundColor attribute

to purple, green, orange, red or blue, as described.

So that's hopefully the most obvious.

Then we have sort of a general purpose one,

where instead we're passing in a color as a parameter.

So you may recall, looking back at our HTML for a second, for that one

I'm passing in the colors purple, green, orange, red, and blue as parameters

to that function.

And in the general purpose one, I'm just saying

whatever I passed in as a parameter, set the colorDiv's backgroundColor

to that color instead.

Then we have the event handler on.

So recall-- if we take a look at the event handler one,

the line looks exactly the same for all five of them.

But you might remember from our discussion on event handlers

that the way an event handler works is when you click on a button,

for instance, the event handler captures some information

about what triggered it to happen.

So it knows, for example, which button you clicked.

And all of those buttons--

I'm going to jump again to the HTML for a second.

All of those buttons have a different title, purple, green, orange, red,

and blue, with the capital letters there,

that is the word that is actually going to appear on the button.

So I have a little bit of a way to distinguish between all of them.

But as it turns out-- sorry about that.

As it turns out, in order for my color changing to work,

I can't pass in a capital letter color name.

I have to pass in a lowercase one.

So what I'm going to do instead is I'm going to set the document's--

the colorDiv's backgroundColor to whatever object

triggered the event to be called in the first place.

I'm going to look at its InnerHTML-- so here's that InnerHTML property coming

into play.

And what I'm going to do to it is transform that entire string, so

that capital P purple, into lowercase.

So basically what happens here is when I click on a button,

say I click on the purple button, what is happening

is that capital P purple is being turned into all lowercase purple.

And then that word "purple" is going to become the color that I'm

setting the backgroundColor to.

So hopefully that makes sense.

Again, what I'm doing is I'm clicking on a button.

That button has a title.

I'm just taking the title of that button,

the InnerHTML turmoil between the button tags, making it all lowercase.

And that is then a color that I can assign the backgroundColor to.

Again, you might play with this yourself when

you're tinkering if you're following along with this video

and maybe set some other different colors to see

that you can make this change as well.

And then we have the jQuery version of this.

And we'll take a look at the HTML again for a second here.

Notice with this one, it looks a little bit different.

I'm not specifying an onClick attribute this time.

I'm creating a new class called a jQuery button.

But there seems to be no function that gets called.

Well, that's kind of a side effect of what is happening in jQuery.

And the way jQuery works-- or one of the ways jQuery can work

is that we can do something like this.

This uses anonymous functions.

Remember from JavaScript that we have this notion of anonymous functions.

We can have functions that don't have names.

So what's happening here is when the document-- there's that word "document"

again--

when the document object is fully loaded or ready,

the page is going to execute the following function.

It's going to say, I'm going to look for every instance of something

being of class--

that's what the little dot there, remember that from CSS--

of class JQ button appears on the page.

And when any of those buttons is clicked,

I'm going to execute this other anonymous function that

is going to do basically what we just saw in the final example there,

where we transformed the entire text of the button into lowercase

and that becomes a color name that we can assign.

But I'm just going to do it using jQuery syntax instead of JavaScript syntax.

So again, what is happening here is the document, the page is fully loaded.

And when the page is fully loaded, the following function

is applied to the page.

Every jQuery button is given this extra attribute,

this onClick attribute, such that when you click it,

it assigns a color based on whatever the text is of the button.

Again, we're not going to get into a lot of detail on jQuery itself.

That's sort of an exercise for at home.

But this version that you're seeing here is exactly

the same as the event handler version we just saw for pure JavaScript,

except written in jQuery style.

And if I actually go to the page, all four of these do in fact work.

I can click the purple one here, the green one here.

I can click the orange one, red one.

They all do the exact same thing.

They just do it doing a couple of different--

using a couple of different techniques.

So you can hopefully use this example to give yourself

a better understanding of using functions in JavaScript,

using events in JavaScript, and perhaps dipping

your toe in the water of jQuery.

So if you want to learn more about jQuery beyond what we talk about

in this video, you can go to the jQuery documentation,

which is available at the website you see on the screen here.

It's a great place to go to learn about some of the more interesting things

that you can do with jQuery.

And we'll see a little bit more about this in our video on AJAX as well.

I'm Doug Lloyd.

This is CS50.