Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
0
00:00:00,000 --> 00:00:02,335
[MUSIC PLAYING]
1
00:00:02,335 --> 00:00:05,401
2
00:00:05,401 --> 00:00:07,150
DOUG LLOYD: So in our video on JavaScript,
3
00:00:07,150 --> 00:00:09,900
we introduced you to the concept of an object.
4
00:00:09,900 --> 00:00:12,580
And in this video, I want to talk about a very specific object
5
00:00:12,580 --> 00:00:16,720
that we can use to manipulate data and content on our web pages called
6
00:00:16,720 --> 00:00:18,104
the document object.
7
00:00:18,104 --> 00:00:20,770
Now, you may recall from that discussion in the JavaScript video
8
00:00:20,770 --> 00:00:23,980
that objects contain two different things, basically.
9
00:00:23,980 --> 00:00:27,100
They contain something called properties or data.
10
00:00:27,100 --> 00:00:28,990
And they contain methods, which are functions
11
00:00:28,990 --> 00:00:31,437
that apply just to those objects.
12
00:00:31,437 --> 00:00:33,520
But what we didn't really get into a lot of detail
13
00:00:33,520 --> 00:00:37,252
was that those objects, what you can put in them is actually pretty flexible.
14
00:00:37,252 --> 00:00:39,210
You can do a lot of different things with them.
15
00:00:39,210 --> 00:00:41,110
You can not only put data in there.
16
00:00:41,110 --> 00:00:44,950
You can also put other objects or arrays inside of it.
17
00:00:44,950 --> 00:00:48,130
And maybe those objects that you put inside of that bigger object
18
00:00:48,130 --> 00:00:49,750
also have other objects in them.
19
00:00:49,750 --> 00:00:52,960
So you can kind of create this nesting structure of objects
20
00:00:52,960 --> 00:00:55,240
within a single JavaScript object, which,
21
00:00:55,240 --> 00:00:59,440
if you think about it, thinking back to our discussion about C and trees,
22
00:00:59,440 --> 00:01:02,050
it kind of creates a tree structure where you have one object,
23
00:01:02,050 --> 00:01:05,060
inside of that there's another one, inside of those, there's other ones,
24
00:01:05,060 --> 00:01:05,980
and so on.
25
00:01:05,980 --> 00:01:10,060
One very specific object in JavaScript is called the document object.
26
00:01:10,060 --> 00:01:12,310
And that is an object that basically organizes
27
00:01:12,310 --> 00:01:18,310
the entire content of a single web page into a single JavaScript object.
28
00:01:18,310 --> 00:01:22,370
And once you know the methods and properties of the document object,
29
00:01:22,370 --> 00:01:24,370
you can change them in JavaScript.
30
00:01:24,370 --> 00:01:26,530
You can assign the different properties to a value.
31
00:01:26,530 --> 00:01:30,490
You can call methods on the object to change some of those properties, which
32
00:01:30,490 --> 00:01:35,170
then allow you to manipulate the content or look and feel of your website
33
00:01:35,170 --> 00:01:38,640
only using JavaScript, instead of going back and editing your HTML
34
00:01:38,640 --> 00:01:41,110
or the Python that underlies it.
35
00:01:41,110 --> 00:01:44,360
So here's an example of a very simple HTML website.
36
00:01:44,360 --> 00:01:45,970
There's really not much going on here.
37
00:01:45,970 --> 00:01:48,160
But as you can see, there's HTML tags.
38
00:01:48,160 --> 00:01:50,620
We have inside of that a head and a body.
39
00:01:50,620 --> 00:01:52,990
Inside of the head, we have a title, "Hello, world."
40
00:01:52,990 --> 00:01:57,010
Inside of the body, we have a couple of different tags there.
41
00:01:57,010 --> 00:02:02,920
We have an H2, or a second-level header tag, a paragraph tag, and a link.
42
00:02:02,920 --> 00:02:05,800
And all of this can actually be represented in JavaScript
43
00:02:05,800 --> 00:02:07,180
as a document object.
44
00:02:07,180 --> 00:02:09,420
We can actually arrange all of this hierarchically,
45
00:02:09,420 --> 00:02:12,670
sort of similar to what we're doing with the indentation, where clearly things
46
00:02:12,670 --> 00:02:17,170
that are indented one level further in are nested with inside of another--
47
00:02:17,170 --> 00:02:21,290
nested inside of another part of the HTML.
48
00:02:21,290 --> 00:02:25,630
So for example, here is what a tree structure of that simple web
49
00:02:25,630 --> 00:02:27,734
page we just looked at might be.
50
00:02:27,734 --> 00:02:28,650
So we have a document.
51
00:02:28,650 --> 00:02:31,210
And inside of that, we have HTML.
52
00:02:31,210 --> 00:02:36,100
And that's kind of represented by the HTML tag that we have.
53
00:02:36,100 --> 00:02:39,750
And everything inside of it is sort of nested below it, as you can see.
54
00:02:39,750 --> 00:02:43,180
Within our HTML, there are two main things at the next level down.
55
00:02:43,180 --> 00:02:45,110
There is the head and the body.
56
00:02:45,110 --> 00:02:46,960
So we can look specifically at the head.
57
00:02:46,960 --> 00:02:49,570
And we see that inside of the head, there is a title.
58
00:02:49,570 --> 00:02:52,570
And inside of the title, there is some text, "Hello, world."
59
00:02:52,570 --> 00:02:55,570
And we can also look at the body, which is an entirely different segment
60
00:02:55,570 --> 00:02:58,640
of the object or of the tree, inside of which
61
00:02:58,640 --> 00:03:05,670
is each of those three individual pieces, the h2, the p, and the a tag.
62
00:03:05,670 --> 00:03:07,420
And all of that can be represented sort of
63
00:03:07,420 --> 00:03:10,000
in a tree, which maps, as you can see, as I'm
64
00:03:10,000 --> 00:03:16,660
highlighting the text in green on the HTML, to a section of our HTML as well.
65
00:03:16,660 --> 00:03:21,400
So the document object has properties, just like any other object.
66
00:03:21,400 --> 00:03:23,340
And it has a number of methods as well.
67
00:03:23,340 --> 00:03:24,440
And if you, again--
68
00:03:24,440 --> 00:03:25,930
and we're going to talk about this in just a moment--
69
00:03:25,930 --> 00:03:29,200
know how to navigate through the document object, starting at the top
70
00:03:29,200 --> 00:03:32,500
and drilling down to the section of the page that you want,
71
00:03:32,500 --> 00:03:35,410
you can change what your site looks like.
72
00:03:35,410 --> 00:03:38,140
So actually, let's go into the IDE and take a look
73
00:03:38,140 --> 00:03:41,600
at how you can see the document object yourself in the browser.
74
00:03:41,600 --> 00:03:42,100
OK.
75
00:03:42,100 --> 00:03:44,266
So we're in my IDE and I'm really quickly just going
76
00:03:44,266 --> 00:03:49,000
to show you that this is exactly the same HTML that we had just a moment ago
77
00:03:49,000 --> 00:03:49,900
on a slide.
78
00:03:49,900 --> 00:03:53,180
And I have page actually open in another tab here.
79
00:03:53,180 --> 00:03:56,120
And you'll also notice that I popped open my Developer Console.
80
00:03:56,120 --> 00:03:58,150
If you're using Google Chrome, you can usually
81
00:03:58,150 --> 00:04:02,800
do that with Control-Shift-J on a PC, or Command-Shift-J a Mac.
82
00:04:02,800 --> 00:04:04,630
And that just opens the JavaScript Console.
83
00:04:04,630 --> 00:04:06,463
And recall from our JavaScript video that we
84
00:04:06,463 --> 00:04:09,310
can use the Console using console.log, for instance,
85
00:04:09,310 --> 00:04:12,550
to print out information to the Console as we're going through our page.
86
00:04:12,550 --> 00:04:15,133
Well, there's other things we can do with the Console as well.
87
00:04:15,133 --> 00:04:18,357
We can also type commands to it to have it do something.
88
00:04:18,357 --> 00:04:21,440
And so what I'm going to do this time is something a little bit different.
89
00:04:21,440 --> 00:04:25,540
Instead of typing console.log, I'm going to type console.dir.
90
00:04:25,540 --> 00:04:27,760
And what console.dir is going to do is it's
91
00:04:27,760 --> 00:04:30,580
going to basically try and organize the content of my page
92
00:04:30,580 --> 00:04:33,370
here in a directory structure, which basically
93
00:04:33,370 --> 00:04:36,350
is a fancy way of describing an object.
94
00:04:36,350 --> 00:04:38,639
So we can kind of look and see what's in the object.
95
00:04:38,639 --> 00:04:40,180
And what object do I want to look at?
96
00:04:40,180 --> 00:04:42,100
Well, I want to look at the document object,
97
00:04:42,100 --> 00:04:44,530
so I'm going to console.dir document.
98
00:04:44,530 --> 00:04:50,370
And when I hit Enter here, we're going to see that I got an undefined.
99
00:04:50,370 --> 00:04:52,810
But above that I have this sort of pound sign document.
100
00:04:52,810 --> 00:04:56,932
That is the JavaScript Console returning to me the document object.
101
00:04:56,932 --> 00:04:59,640
When this pops open, there's going to be a lot of stuff in there.
102
00:04:59,640 --> 00:05:01,848
And a lot of it we're not going to really talk about.
103
00:05:01,848 --> 00:05:05,770
I just want to show you how things are nested in that document object.
104
00:05:05,770 --> 00:05:07,260
So I'm going to pop this open.
105
00:05:07,260 --> 00:05:08,885
And again, there's a lot of stuff here.
106
00:05:08,885 --> 00:05:10,940
But what I really want to take a look at is
107
00:05:10,940 --> 00:05:15,710
the children, so just looking at the children property of the document
108
00:05:15,710 --> 00:05:16,760
object.
109
00:05:16,760 --> 00:05:18,950
And you can see that there is one.
110
00:05:18,950 --> 00:05:22,100
If I pop that open, what do you see here?
111
00:05:22,100 --> 00:05:25,880
Inside of the document object, there is one child
112
00:05:25,880 --> 00:05:30,140
called HTML, which you might recall from our diagram a few slides ago.
113
00:05:30,140 --> 00:05:36,740
If I pop that open, you'll see that it also
114
00:05:36,740 --> 00:05:43,877
has children, two of them in fact, head and body.
115
00:05:43,877 --> 00:05:46,210
And I can continue doing this exercise all the way down.
116
00:05:46,210 --> 00:05:48,480
But in fact, if I kept doing that and I looked inside of the head,
117
00:05:48,480 --> 00:05:49,170
I'd find the title tag.
118
00:05:49,170 --> 00:05:50,990
I could open that and see what's in there.
119
00:05:50,990 --> 00:05:53,906
Inside of the body I would find that there are three children, the h2,
120
00:05:53,906 --> 00:05:55,350
the p, and the a tag.
121
00:05:55,350 --> 00:05:59,280
All of them are nested inside of this big document object.
122
00:05:59,280 --> 00:06:02,970
And we can actually manipulate this object using JavaScript.
123
00:06:02,970 --> 00:06:05,280
Let's go back to the slides and talk a little bit
124
00:06:05,280 --> 00:06:06,864
about how we might be able to do that.
125
00:06:06,864 --> 00:06:08,655
So again, the document object, as you could
126
00:06:08,655 --> 00:06:11,787
see from when we were just looking at it in the Console, is pretty big.
127
00:06:11,787 --> 00:06:13,120
There's a lot of stuff in there.
128
00:06:13,120 --> 00:06:15,210
We're not going to cover all of it, because not all of it's
129
00:06:15,210 --> 00:06:17,410
going to be really necessary as you get started working with it.
130
00:06:17,410 --> 00:06:19,620
But I want to cover a couple of the big properties
131
00:06:19,620 --> 00:06:22,800
that you might use when you're working with the document object, as well
132
00:06:22,800 --> 00:06:25,030
as a couple of the methods in just a moment.
133
00:06:25,030 --> 00:06:27,390
So one of them, for example, is InnerHTML, which
134
00:06:27,390 --> 00:06:30,250
holds the HTML inside of a set of tags.
135
00:06:30,250 --> 00:06:33,030
So for example, the InnerHTML of the title tag,
136
00:06:33,030 --> 00:06:35,190
if I was to go into that section, would be
137
00:06:35,190 --> 00:06:37,080
"Hello, world" or whatever I called--
138
00:06:37,080 --> 00:06:39,270
whatever my actual title of my page is.
139
00:06:39,270 --> 00:06:44,160
That's the InnerHTML of the title tag or the title node
140
00:06:44,160 --> 00:06:48,300
or the title object within the overall document object.
141
00:06:48,300 --> 00:06:51,890
nodeName similarly would just be title for the node we were just describing,
142
00:06:51,890 --> 00:06:54,700
or the section of the object we were just describing.
143
00:06:54,700 --> 00:06:55,320
Id.
144
00:06:55,320 --> 00:06:58,260
You may recall from our video on HTML and CSS
145
00:06:58,260 --> 00:07:02,820
that we can specify an optional ID attribute to certain HTML elements.
146
00:07:02,820 --> 00:07:05,650
We usually use this in the context of CSS,
147
00:07:05,650 --> 00:07:08,550
for example, to style one particular node
148
00:07:08,550 --> 00:07:13,080
or one particular set of tags in our HTML with a certain style.
149
00:07:13,080 --> 00:07:17,970
We can give it an ID so that the CSS knows which section of the page
150
00:07:17,970 --> 00:07:19,620
to apply that style to.
151
00:07:19,620 --> 00:07:21,750
So this property would just allow us to figure out
152
00:07:21,750 --> 00:07:24,720
what the ID of that particular node is.
153
00:07:24,720 --> 00:07:27,857
parentNode is a reference to the node one level up.
154
00:07:27,857 --> 00:07:29,690
So again, if I'm looking at the title node--
155
00:07:29,690 --> 00:07:32,190
I'll just continue using that example for now--
156
00:07:32,190 --> 00:07:36,450
the parent node of that would be head, because title is nested inside
157
00:07:36,450 --> 00:07:39,030
of head in that tree structure.
158
00:07:39,030 --> 00:07:41,100
childNodes is sort of the converse of that.
159
00:07:41,100 --> 00:07:43,650
It is what is down from where I currently am.
160
00:07:43,650 --> 00:07:47,184
So if I am now using the body node as an example,
161
00:07:47,184 --> 00:07:49,350
so we've kind of nested to that section of the tree,
162
00:07:49,350 --> 00:07:56,520
the child nodes of the body node would be that h2 and that p and that a.
163
00:07:56,520 --> 00:08:00,030
Those would be the three child nodes from that area.
164
00:08:00,030 --> 00:08:03,300
attributes, an array of attributes of an HTML element.
165
00:08:03,300 --> 00:08:05,240
A good example here is the image tag.
166
00:08:05,240 --> 00:08:08,590
So if I am, again, navigating through the document object using JavaScript
167
00:08:08,590 --> 00:08:12,082
and I come to an image tag and I want to figure out what attributes it has,
168
00:08:12,082 --> 00:08:14,040
well, you may recall that an image's attributes
169
00:08:14,040 --> 00:08:15,780
include, for example, its source.
170
00:08:15,780 --> 00:08:16,920
What is the source file?
171
00:08:16,920 --> 00:08:20,820
Or perhaps I've also specified optional parameters of height and width.
172
00:08:20,820 --> 00:08:24,060
Those would all the attributes associated with that particular node
173
00:08:24,060 --> 00:08:26,040
of the document object.
174
00:08:26,040 --> 00:08:27,910
And then style, which is one way--
175
00:08:27,910 --> 00:08:32,370
which is another way we can actually style the look and feel of a page.
176
00:08:32,370 --> 00:08:34,440
And in a few moments, we'll actually be going
177
00:08:34,440 --> 00:08:36,390
through an example, where we specifically
178
00:08:36,390 --> 00:08:39,659
manipulate this property, the style property, to change something.
179
00:08:39,659 --> 00:08:43,950
But it is analogous to the CSS styling of a particular section
180
00:08:43,950 --> 00:08:45,630
or portion of the page.
181
00:08:45,630 --> 00:08:47,630
So those are some of the most common properties.
182
00:08:47,630 --> 00:08:49,880
There are also four common methods that you might see.
183
00:08:49,880 --> 00:08:51,720
And again, there are many more beyond this.
184
00:08:51,720 --> 00:08:54,053
But here are four that you might use as you're beginning
185
00:08:54,053 --> 00:08:55,830
to work with the document object.
186
00:08:55,830 --> 00:08:57,167
getElementById.
187
00:08:57,167 --> 00:08:59,500
And notice that now because we're talking about methods,
188
00:08:59,500 --> 00:09:02,760
these are all functions that may optionally take parameters.
189
00:09:02,760 --> 00:09:06,270
In this case, we're looking for an element with a specific ID.
190
00:09:06,270 --> 00:09:08,710
That's the parameter being passed in there.
191
00:09:08,710 --> 00:09:12,550
So if we maybe have styled a particular element using CSS
192
00:09:12,550 --> 00:09:15,510
and we've given it that optional ID attribute,
193
00:09:15,510 --> 00:09:18,930
this method would go and navigate through the entire document
194
00:09:18,930 --> 00:09:22,770
object for us and find that specific node,
195
00:09:22,770 --> 00:09:27,060
one of those further down the tree or further nested within the object.
196
00:09:27,060 --> 00:09:30,780
It would find that section of the page and return to you
197
00:09:30,780 --> 00:09:34,020
the M object from that point down.
198
00:09:34,020 --> 00:09:35,510
getElementsByTagName.
199
00:09:35,510 --> 00:09:36,990
Notice it's getElements.
200
00:09:36,990 --> 00:09:41,610
This would, for example, maybe find all of the instances of me using a B tag.
201
00:09:41,610 --> 00:09:47,765
So it would give me an array of all of the bold tagged sections of my site.
202
00:09:47,765 --> 00:09:51,960
appendChild basically allows me to add an additional node
203
00:09:51,960 --> 00:09:55,500
below where I currently am, so it allows me to expand the number of things.
204
00:09:55,500 --> 00:10:00,510
I might want to add a new element on the fly to the body portion of my website.
205
00:10:00,510 --> 00:10:04,230
I can append perhaps a new paragraph tag or an H3
206
00:10:04,230 --> 00:10:08,340
or something else that wasn't there before using this method here.
207
00:10:08,340 --> 00:10:10,650
And then removeChild is sort of the opposite of that.
208
00:10:10,650 --> 00:10:13,020
It deletes a section of the page by removing
209
00:10:13,020 --> 00:10:17,550
that portion of the HTML, that entire node, from the document object.
210
00:10:17,550 --> 00:10:19,800
I do want to point out one thing here that causes
211
00:10:19,800 --> 00:10:21,330
programmers a lot of heartache.
212
00:10:21,330 --> 00:10:23,150
I know it's caused me a lot of heartache.
213
00:10:23,150 --> 00:10:28,560
When you're using the getElementById attribute, notice that the D in Id
214
00:10:28,560 --> 00:10:29,370
is lowercase.
215
00:10:29,370 --> 00:10:33,660
Usually when we use the term ID for identification, it's usually capital I,
216
00:10:33,660 --> 00:10:37,800
capital D. I can't even tell you how many times I have accidentally
217
00:10:37,800 --> 00:10:39,495
typed capital I, capital D here.
218
00:10:39,495 --> 00:10:41,370
And then I get a JavaScript error, because it
219
00:10:41,370 --> 00:10:42,870
doesn't know what I'm talking about.
220
00:10:42,870 --> 00:10:46,620
So calling this out specifically as a well-known common issue,
221
00:10:46,620 --> 00:10:51,030
be really careful when using this to use a lowercase D there instead.
222
00:10:51,030 --> 00:10:54,720
So because the document object is one big thing
223
00:10:54,720 --> 00:10:59,140
with lots of objects nested within it, if we start at the top,
224
00:10:59,140 --> 00:11:02,160
we can find our way using those properties and methods
225
00:11:02,160 --> 00:11:07,230
to any other area within the document object.
226
00:11:07,230 --> 00:11:11,430
Now, you may have seen that some of those terms, some of those property
227
00:11:11,430 --> 00:11:15,240
names and some of those method names are really, really long.
228
00:11:15,240 --> 00:11:17,950
It would be a lot to type out to do that.
229
00:11:17,950 --> 00:11:20,550
And so it's actually quite common when you
230
00:11:20,550 --> 00:11:23,940
are working on a project that has a lot of document object manipulation
231
00:11:23,940 --> 00:11:26,760
to use a JavaScript library called jQuery.
232
00:11:26,760 --> 00:11:27,990
jQuery is quite popular.
233
00:11:27,990 --> 00:11:30,781
It's probably the most popular JavaScript library currently in use.
234
00:11:30,781 --> 00:11:33,094
It's been around for about 10 years now.
235
00:11:33,094 --> 00:11:34,260
It's an open source library.
236
00:11:34,260 --> 00:11:35,670
And it does a lot of things.
237
00:11:35,670 --> 00:11:37,890
But one of the things it does particularly well
238
00:11:37,890 --> 00:11:40,530
is simplify what's called client-side scripting,
239
00:11:40,530 --> 00:11:47,700
or where you are writing some code to change things on your computer
240
00:11:47,700 --> 00:11:50,220
to affect the look and feel of a site.
241
00:11:50,220 --> 00:11:54,180
Document object manipulation is one of those things it does really well.
242
00:11:54,180 --> 00:11:57,600
And it also does AJAX queries, which we'll
243
00:11:57,600 --> 00:12:02,700
talk about in another video on AJAX, quite well also.
244
00:12:02,700 --> 00:12:05,490
So for example, the raw JavaScript version
245
00:12:05,490 --> 00:12:09,330
of this, what we're doing here in this raw JavaScript
246
00:12:09,330 --> 00:12:11,040
is changing one section of the page.
247
00:12:11,040 --> 00:12:14,725
I'm finding the element of my page whose ID is colorDiv.
248
00:12:14,725 --> 00:12:16,600
So I'm starting from the top of the document.
249
00:12:16,600 --> 00:12:19,440
It's going to look through the entire document object, all of those
250
00:12:19,440 --> 00:12:23,870
nested nodes below it, to find a section of the page called colorDiv.
251
00:12:23,870 --> 00:12:29,220
And I'm going to go there and set that node's style property's backgroundColor
252
00:12:29,220 --> 00:12:30,621
property to green.
253
00:12:30,621 --> 00:12:32,370
So basically, all that's happening here is
254
00:12:32,370 --> 00:12:36,840
I'm changing the background color of one section of my page to green.
255
00:12:36,840 --> 00:12:40,920
That is a lot to type to do that in pure JavaScript.
256
00:12:40,920 --> 00:12:44,880
In jQuery, the trade-off is you get a shorter--
257
00:12:44,880 --> 00:12:46,470
you have to type less stuff.
258
00:12:46,470 --> 00:12:48,250
You have a shorter line of code.
259
00:12:48,250 --> 00:12:52,440
But it's going to look a little bit more weird.
260
00:12:52,440 --> 00:12:56,160
So this would do exactly the same thing using jQuery syntax.
261
00:12:56,160 --> 00:13:00,834
The dollar sign is a shorthand way of saying jQuery.
262
00:13:00,834 --> 00:13:03,750
And it's going to be looking for a section of my page called colorDiv.
263
00:13:03,750 --> 00:13:05,640
That's the jQuery syntax for it.
264
00:13:05,640 --> 00:13:10,080
And I'm going to change that node's CSS background color to green.
265
00:13:10,080 --> 00:13:11,580
Again, it's a little bit strange.
266
00:13:11,580 --> 00:13:13,920
But it is a shorter way to do the same thing.
267
00:13:13,920 --> 00:13:19,600
So you will often see this as opposed to the longer JavaScript version
268
00:13:19,600 --> 00:13:21,690
when you're seeing some client-side scripting.
269
00:13:21,690 --> 00:13:23,760
What I want to do now is go back into the IDE
270
00:13:23,760 --> 00:13:26,144
and show you a little bit about how--
271
00:13:26,144 --> 00:13:29,310
show you a couple of examples of how we can actually manipulate the document
272
00:13:29,310 --> 00:13:32,460
object using JavaScript and jQuery to change
273
00:13:32,460 --> 00:13:34,380
the color of a section of a web page.
274
00:13:34,380 --> 00:13:35,240
All right.
275
00:13:35,240 --> 00:13:38,430
So here is a very simple web page-- and you can download this example when
276
00:13:38,430 --> 00:13:40,090
you're reviewing this video--
277
00:13:40,090 --> 00:13:42,450
that has a whole bunch of different buttons.
278
00:13:42,450 --> 00:13:44,760
And as you can see at the top, there's a section that says "Change my color!"
279
00:13:44,760 --> 00:13:46,801
We're going to be trying to change the background
280
00:13:46,801 --> 00:13:48,218
color of that section of the page.
281
00:13:48,218 --> 00:13:50,509
And apparently, I'm going to do it four different ways.
282
00:13:50,509 --> 00:13:53,620
There's individual functions for background color written in JavaScript;
283
00:13:53,620 --> 00:13:55,940
a single function to change the background color,
284
00:13:55,940 --> 00:13:59,550
so a bit of a design improvement perhaps; an event handler--
285
00:13:59,550 --> 00:14:01,509
recall from the end of our video on JavaScript,
286
00:14:01,509 --> 00:14:03,341
we talked a little bit about event handlers,
287
00:14:03,341 --> 00:14:06,000
so this will be another opportunity to see those in action--
288
00:14:06,000 --> 00:14:10,740
and one example where we do the exact same thing using jQuery instead of
289
00:14:10,740 --> 00:14:12,210
using raw JavaScript.
290
00:14:12,210 --> 00:14:15,210
So let's take a look at what the code for this site actually looks like.
291
00:14:15,210 --> 00:14:17,190
In my IDE we'll open this tab.
292
00:14:17,190 --> 00:14:20,415
As you can see, I'm loading a couple of different JavaScript scripts
293
00:14:20,415 --> 00:14:22,290
at the beginning of my page, so I'm basically
294
00:14:22,290 --> 00:14:25,440
doing a pound include, the analogy here from C,
295
00:14:25,440 --> 00:14:27,610
of a couple of JavaScript files.
296
00:14:27,610 --> 00:14:32,200
And I have one file for each of the four different types of color manipulation
297
00:14:32,200 --> 00:14:33,330
we're going to do.
298
00:14:33,330 --> 00:14:36,510
And then here, it's not particularly well designed HTML,
299
00:14:36,510 --> 00:14:38,070
but it kind of gets the job done.
300
00:14:38,070 --> 00:14:42,930
I have one section with a set of five buttons for the background color ones,
301
00:14:42,930 --> 00:14:50,310
one for the passing in the color as a parameter, one for the event handler,
302
00:14:50,310 --> 00:14:51,690
and one for the jQuery ones.
303
00:14:51,690 --> 00:14:53,590
And they all look a little bit different.
304
00:14:53,590 --> 00:14:59,400
So let's start by looking at the individual color ones.
305
00:14:59,400 --> 00:15:04,330
306
00:15:04,330 --> 00:15:05,874
So there's really not much to this.
307
00:15:05,874 --> 00:15:08,040
You saw that I wrote those five different functions,
308
00:15:08,040 --> 00:15:11,010
turn purple, turn green, turn orange, turn red, and turn blue.
309
00:15:11,010 --> 00:15:13,440
And all they do is, using pure JavaScript,
310
00:15:13,440 --> 00:15:20,070
they get the element by ID of colorDiv, which is the element that we're trying
311
00:15:20,070 --> 00:15:21,540
to change the background color of.
312
00:15:21,540 --> 00:15:24,450
And I set it's style backgroundColor attribute
313
00:15:24,450 --> 00:15:28,620
to purple, green, orange, red or blue, as described.
314
00:15:28,620 --> 00:15:31,200
So that's hopefully the most obvious.
315
00:15:31,200 --> 00:15:33,810
Then we have sort of a general purpose one,
316
00:15:33,810 --> 00:15:37,475
where instead we're passing in a color as a parameter.
317
00:15:37,475 --> 00:15:42,090
So you may recall, looking back at our HTML for a second, for that one
318
00:15:42,090 --> 00:15:46,380
I'm passing in the colors purple, green, orange, red, and blue as parameters
319
00:15:46,380 --> 00:15:47,640
to that function.
320
00:15:47,640 --> 00:15:49,860
And in the general purpose one, I'm just saying
321
00:15:49,860 --> 00:15:54,240
whatever I passed in as a parameter, set the colorDiv's backgroundColor
322
00:15:54,240 --> 00:15:56,610
to that color instead.
323
00:15:56,610 --> 00:15:58,470
Then we have the event handler on.
324
00:15:58,470 --> 00:16:01,320
So recall-- if we take a look at the event handler one,
325
00:16:01,320 --> 00:16:04,340
the line looks exactly the same for all five of them.
326
00:16:04,340 --> 00:16:06,840
But you might remember from our discussion on event handlers
327
00:16:06,840 --> 00:16:10,600
that the way an event handler works is when you click on a button,
328
00:16:10,600 --> 00:16:14,520
for instance, the event handler captures some information
329
00:16:14,520 --> 00:16:17,160
about what triggered it to happen.
330
00:16:17,160 --> 00:16:20,727
So it knows, for example, which button you clicked.
331
00:16:20,727 --> 00:16:21,810
And all of those buttons--
332
00:16:21,810 --> 00:16:24,060
I'm going to jump again to the HTML for a second.
333
00:16:24,060 --> 00:16:28,020
All of those buttons have a different title, purple, green, orange, red,
334
00:16:28,020 --> 00:16:29,730
and blue, with the capital letters there,
335
00:16:29,730 --> 00:16:33,460
that is the word that is actually going to appear on the button.
336
00:16:33,460 --> 00:16:37,440
So I have a little bit of a way to distinguish between all of them.
337
00:16:37,440 --> 00:16:39,240
But as it turns out-- sorry about that.
338
00:16:39,240 --> 00:16:44,580
As it turns out, in order for my color changing to work,
339
00:16:44,580 --> 00:16:48,990
I can't pass in a capital letter color name.
340
00:16:48,990 --> 00:16:50,710
I have to pass in a lowercase one.
341
00:16:50,710 --> 00:16:53,670
So what I'm going to do instead is I'm going to set the document's--
342
00:16:53,670 --> 00:16:57,360
the colorDiv's backgroundColor to whatever object
343
00:16:57,360 --> 00:17:02,460
triggered the event to be called in the first place.
344
00:17:02,460 --> 00:17:06,150
I'm going to look at its InnerHTML-- so here's that InnerHTML property coming
345
00:17:06,150 --> 00:17:07,410
into play.
346
00:17:07,410 --> 00:17:12,869
And what I'm going to do to it is transform that entire string, so
347
00:17:12,869 --> 00:17:15,342
that capital P purple, into lowercase.
348
00:17:15,342 --> 00:17:17,800
So basically what happens here is when I click on a button,
349
00:17:17,800 --> 00:17:20,010
say I click on the purple button, what is happening
350
00:17:20,010 --> 00:17:24,210
is that capital P purple is being turned into all lowercase purple.
351
00:17:24,210 --> 00:17:27,839
And then that word "purple" is going to become the color that I'm
352
00:17:27,839 --> 00:17:30,410
setting the backgroundColor to.
353
00:17:30,410 --> 00:17:31,660
So hopefully that makes sense.
354
00:17:31,660 --> 00:17:33,743
Again, what I'm doing is I'm clicking on a button.
355
00:17:33,743 --> 00:17:35,042
That button has a title.
356
00:17:35,042 --> 00:17:36,750
I'm just taking the title of that button,
357
00:17:36,750 --> 00:17:41,100
the InnerHTML turmoil between the button tags, making it all lowercase.
358
00:17:41,100 --> 00:17:44,175
And that is then a color that I can assign the backgroundColor to.
359
00:17:44,175 --> 00:17:46,050
Again, you might play with this yourself when
360
00:17:46,050 --> 00:17:48,260
you're tinkering if you're following along with this video
361
00:17:48,260 --> 00:17:50,259
and maybe set some other different colors to see
362
00:17:50,259 --> 00:17:52,870
that you can make this change as well.
363
00:17:52,870 --> 00:17:55,790
And then we have the jQuery version of this.
364
00:17:55,790 --> 00:17:59,100
And we'll take a look at the HTML again for a second here.
365
00:17:59,100 --> 00:18:01,350
Notice with this one, it looks a little bit different.
366
00:18:01,350 --> 00:18:03,810
I'm not specifying an onClick attribute this time.
367
00:18:03,810 --> 00:18:07,230
I'm creating a new class called a jQuery button.
368
00:18:07,230 --> 00:18:10,380
But there seems to be no function that gets called.
369
00:18:10,380 --> 00:18:13,680
Well, that's kind of a side effect of what is happening in jQuery.
370
00:18:13,680 --> 00:18:17,040
And the way jQuery works-- or one of the ways jQuery can work
371
00:18:17,040 --> 00:18:18,930
is that we can do something like this.
372
00:18:18,930 --> 00:18:20,650
This uses anonymous functions.
373
00:18:20,650 --> 00:18:23,691
Remember from JavaScript that we have this notion of anonymous functions.
374
00:18:23,691 --> 00:18:25,560
We can have functions that don't have names.
375
00:18:25,560 --> 00:18:28,726
So what's happening here is when the document-- there's that word "document"
376
00:18:28,726 --> 00:18:29,250
again--
377
00:18:29,250 --> 00:18:33,420
when the document object is fully loaded or ready,
378
00:18:33,420 --> 00:18:36,180
the page is going to execute the following function.
379
00:18:36,180 --> 00:18:39,570
It's going to say, I'm going to look for every instance of something
380
00:18:39,570 --> 00:18:40,354
being of class--
381
00:18:40,354 --> 00:18:42,770
that's what the little dot there, remember that from CSS--
382
00:18:42,770 --> 00:18:45,600
of class JQ button appears on the page.
383
00:18:45,600 --> 00:18:48,630
And when any of those buttons is clicked,
384
00:18:48,630 --> 00:18:52,266
I'm going to execute this other anonymous function that
385
00:18:52,266 --> 00:18:55,140
is going to do basically what we just saw in the final example there,
386
00:18:55,140 --> 00:18:58,500
where we transformed the entire text of the button into lowercase
387
00:18:58,500 --> 00:19:01,680
and that becomes a color name that we can assign.
388
00:19:01,680 --> 00:19:06,140
But I'm just going to do it using jQuery syntax instead of JavaScript syntax.
389
00:19:06,140 --> 00:19:10,680
So again, what is happening here is the document, the page is fully loaded.
390
00:19:10,680 --> 00:19:14,010
And when the page is fully loaded, the following function
391
00:19:14,010 --> 00:19:15,810
is applied to the page.
392
00:19:15,810 --> 00:19:19,620
Every jQuery button is given this extra attribute,
393
00:19:19,620 --> 00:19:23,110
this onClick attribute, such that when you click it,
394
00:19:23,110 --> 00:19:27,420
it assigns a color based on whatever the text is of the button.
395
00:19:27,420 --> 00:19:31,110
Again, we're not going to get into a lot of detail on jQuery itself.
396
00:19:31,110 --> 00:19:32,940
That's sort of an exercise for at home.
397
00:19:32,940 --> 00:19:35,760
But this version that you're seeing here is exactly
398
00:19:35,760 --> 00:19:40,110
the same as the event handler version we just saw for pure JavaScript,
399
00:19:40,110 --> 00:19:42,670
except written in jQuery style.
400
00:19:42,670 --> 00:19:46,470
And if I actually go to the page, all four of these do in fact work.
401
00:19:46,470 --> 00:19:49,350
I can click the purple one here, the green one here.
402
00:19:49,350 --> 00:19:51,570
I can click the orange one, red one.
403
00:19:51,570 --> 00:19:54,580
They all do the exact same thing.
404
00:19:54,580 --> 00:19:56,700
They just do it doing a couple of different--
405
00:19:56,700 --> 00:19:58,680
using a couple of different techniques.
406
00:19:58,680 --> 00:20:02,160
So you can hopefully use this example to give yourself
407
00:20:02,160 --> 00:20:05,440
a better understanding of using functions in JavaScript,
408
00:20:05,440 --> 00:20:07,450
using events in JavaScript, and perhaps dipping
409
00:20:07,450 --> 00:20:10,580
your toe in the water of jQuery.
410
00:20:10,580 --> 00:20:13,810
So if you want to learn more about jQuery beyond what we talk about
411
00:20:13,810 --> 00:20:16,690
in this video, you can go to the jQuery documentation,
412
00:20:16,690 --> 00:20:19,640
which is available at the website you see on the screen here.
413
00:20:19,640 --> 00:20:23,860
It's a great place to go to learn about some of the more interesting things
414
00:20:23,860 --> 00:20:25,450
that you can do with jQuery.
415
00:20:25,450 --> 00:20:30,130
And we'll see a little bit more about this in our video on AJAX as well.
416
00:20:30,130 --> 00:20:31,090
I'm Doug Lloyd.
417
00:20:31,090 --> 00:20:33,020
This is CS50.
418
00:20:33,020 --> 00:20:34,650
35913
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.