1 00:00:00,000 --> 00:00:04,439 2 00:00:04,439 --> 00:00:07,230 DOUG LLOYD: In this video, we wanted to call out separate attention 3 00:00:07,230 --> 00:00:09,110 to a very particular element of JavaScript 4 00:00:09,110 --> 00:00:11,350 that you might find handy when you're starting 5 00:00:11,350 --> 00:00:15,750 to work on manipulating web pages and changing the content of your web page 6 00:00:15,750 --> 00:00:16,460 on the fly. 7 00:00:16,460 --> 00:00:19,450 And that's the notion of the Document Object Model. 8 00:00:19,450 --> 00:00:23,030 So as we saw in our video on JavaScript, objects are very flexible. 9 00:00:23,030 --> 00:00:24,750 >> And they can contain various fields. 10 00:00:24,750 --> 00:00:28,075 And though we didn't go into a lot of detail, those fields or properties, 11 00:00:28,075 --> 00:00:30,200 that we would probably more appropriately call them 12 00:00:30,200 --> 00:00:33,915 in the context of an object, even those properties can be other objects. 13 00:00:33,915 --> 00:00:36,210 And inside of those objects can be other objects. 14 00:00:36,210 --> 00:00:39,630 >> You have this very large object with a lot of other objects 15 00:00:39,630 --> 00:00:43,550 inside of it, which sort of creates this idea of a big tree. 16 00:00:43,550 --> 00:00:47,540 Now, the document object is a very special object in JavaScript 17 00:00:47,540 --> 00:00:52,580 that organizes your entire web page under this sort of umbrella 18 00:00:52,580 --> 00:00:53,470 of an object. 19 00:00:53,470 --> 00:00:56,770 And so inside of the document object are objects presenting 20 00:00:56,770 --> 00:00:59,630 the head and body of your web page. 21 00:00:59,630 --> 00:01:03,760 >> Inside of those are other objects, et cetera, et cetera, 22 00:01:03,760 --> 00:01:08,411 until your entire web page has been organized in this big object. 23 00:01:08,411 --> 00:01:09,660 What's the upside here, right? 24 00:01:09,660 --> 00:01:12,170 Well, we know how to work with objects in JavaScript. 25 00:01:12,170 --> 00:01:15,840 >> So if we have an object that refers to our entire web page, that 26 00:01:15,840 --> 00:01:19,590 means by calling the correct methods to manipulate that object 27 00:01:19,590 --> 00:01:22,360 or modifying certain of its properties, we 28 00:01:22,360 --> 00:01:25,500 can change the elements of our page programmatically 29 00:01:25,500 --> 00:01:30,210 using JavaScript instead of having to code things with, say, HTML. 30 00:01:30,210 --> 00:01:33,760 So here's an example of a very simple web page, right? 31 00:01:33,760 --> 00:01:35,850 It's got HTML tags, a head. 32 00:01:35,850 --> 00:01:37,979 >> Inside of there is a title, hello world. 33 00:01:37,979 --> 00:01:38,770 Then I have a body. 34 00:01:38,770 --> 00:01:40,686 Inside of that, I have three different things. 35 00:01:40,686 --> 00:01:44,170 I have an h2 header tag, a paragraph, and a link. 36 00:01:44,170 --> 00:01:45,920 This is a very simple web page. 37 00:01:45,920 --> 00:01:48,590 >> Well, what might the document object for this look like? 38 00:01:48,590 --> 00:01:50,700 Well, it's a little scary maybe at first. 39 00:01:50,700 --> 00:01:52,510 But it's really just a big tree. 40 00:01:52,510 --> 00:01:54,890 And at the very root of it is document. 41 00:01:54,890 --> 00:02:00,030 >> Inside of the document is another object referring to the HTML of my page. 42 00:02:00,030 --> 00:02:02,660 And the HTML of my page is all of this. 43 00:02:02,660 --> 00:02:06,900 And then inside of the HTML object, I have a head object, 44 00:02:06,900 --> 00:02:09,000 which refers to everything there. 45 00:02:09,000 --> 00:02:11,009 >> And inside of there, I have a title object. 46 00:02:11,009 --> 00:02:15,620 And inside of there, I have another object that's just hello world. 47 00:02:15,620 --> 00:02:18,020 I could have my body represented like this. 48 00:02:18,020 --> 00:02:22,850 >> Inside of my body, I have an h2 object and a p object for paragraph 49 00:02:22,850 --> 00:02:25,270 and an a object for a link. 50 00:02:25,270 --> 00:02:29,660 And so this entire hierarchy can be represented as a big tree 51 00:02:29,660 --> 00:02:31,990 with lots of smaller little things coming out of it. 52 00:02:31,990 --> 00:02:33,740 Now, of course, when we're programming, we 53 00:02:33,740 --> 00:02:35,560 don't think of things like a big tree. 54 00:02:35,560 --> 00:02:37,980 We want to see actual code related things. 55 00:02:37,980 --> 00:02:40,790 >> And fortunately, we can use our developer tools 56 00:02:40,790 --> 00:02:46,080 to actually take a look at this website's document object. 57 00:02:46,080 --> 00:02:48,150 And let's do that. 58 00:02:48,150 --> 00:02:49,580 So I've opened up a browser tab. 59 00:02:49,580 --> 00:02:51,540 >> And I've opened up Developer Tools. 60 00:02:51,540 --> 00:02:54,460 And in my video on JavaScript, I mentioned that the console is not 61 00:02:54,460 --> 00:02:56,770 only someplace where we print information, 62 00:02:56,770 --> 00:02:59,560 it's also a place where we can input information. 63 00:02:59,560 --> 00:03:01,380 In this context, what I'm going to say is 64 00:03:01,380 --> 00:03:05,720 I would like to get back the document objects, 65 00:03:05,720 --> 00:03:07,502 so I can start to have a look at it. 66 00:03:07,502 --> 00:03:08,460 So how might I do this? 67 00:03:08,460 --> 00:03:10,740 Well, if I want to organize it really nicely, 68 00:03:10,740 --> 00:03:16,317 I'm going to say console.dir, D-I-R. Now, I use console.log to just print 69 00:03:16,317 --> 00:03:17,400 out something very simple. 70 00:03:17,400 --> 00:03:20,450 But if I want to organize this hierarchically like an object, 71 00:03:20,450 --> 00:03:23,800 I want it sort of structured like a directory structure. 72 00:03:23,800 --> 00:03:27,400 >> So I want to console.dir document. 73 00:03:27,400 --> 00:03:28,430 I'm going to hit Enter. 74 00:03:28,430 --> 00:03:32,350 And right below it now, and I'll zoom in here, 75 00:03:32,350 --> 00:03:36,000 I've got this response document with a little arrow next to it. 76 00:03:36,000 --> 00:03:39,470 Now, when I open this arrow, there's going to be a lot of stuff. 77 00:03:39,470 --> 00:03:42,560 >> But we're going to ignore a lot of it and just kind of focus 78 00:03:42,560 --> 00:03:46,250 on the most important part, so we can begin to navigate this document. 79 00:03:46,250 --> 00:03:50,125 There's a lot more to the DOM than just parent nodes and child nodes. 80 00:03:50,125 --> 00:03:51,500 There's a lot of ancillary stuff. 81 00:03:51,500 --> 00:03:52,280 >> So I'm going to open this up. 82 00:03:52,280 --> 00:03:54,610 And there's a whole lot of stuff that pops up. 83 00:03:54,610 --> 00:03:59,000 But all I care about is right here, child nodes. 84 00:03:59,000 --> 00:04:00,410 Let's open that up. 85 00:04:00,410 --> 00:04:03,810 >> Inside of there I see something familiar, HTML. 86 00:04:03,810 --> 00:04:07,670 So inside of our document one level down, HTML. 87 00:04:07,670 --> 00:04:08,550 I open that up. 88 00:04:08,550 --> 00:04:10,380 What are we expecting? 89 00:04:10,380 --> 00:04:13,760 >> If you recall from our diagram, what should we find inside of HTML? 90 00:04:13,760 --> 00:04:17,275 What two nodes are below it in the tree? 91 00:04:17,275 --> 00:04:17,899 Let's find out. 92 00:04:17,899 --> 00:04:18,940 We open up HTML. 93 00:04:18,940 --> 00:04:22,079 We go down to its child nodes. 94 00:04:22,079 --> 00:04:23,440 >> Pop that open. 95 00:04:23,440 --> 00:04:25,990 There's head and body. 96 00:04:25,990 --> 00:04:28,540 And we can open up the head. 97 00:04:28,540 --> 00:04:30,460 Go to its child nodes. 98 00:04:30,460 --> 00:04:31,460 Well, there's the title. 99 00:04:31,460 --> 00:04:33,293 >> And we could go on and on like this forever. 100 00:04:33,293 --> 00:04:34,770 We could do this with body as well. 101 00:04:34,770 --> 00:04:40,090 But there is a way for us to look at the document organized as a big object. 102 00:04:40,090 --> 00:04:42,610 And if we look at is a big object that looks a lot 103 00:04:42,610 --> 00:04:47,480 like code, that means that we can start to manipulate this big object using 104 00:04:47,480 --> 00:04:51,220 code to change what our website looks and feels like. 105 00:04:51,220 --> 00:04:54,920 >> So that's a pretty powerful tool we have at our disposal now. 106 00:04:54,920 --> 00:04:57,360 So as we just saw, the document object itself 107 00:04:57,360 --> 00:05:01,392 and all of the objects inside of it have properties and methods, just 108 00:05:01,392 --> 00:05:04,100 like any other object that we've been working with in JavaScript. 109 00:05:04,100 --> 00:05:08,370 But we can use those properties and use those methods to sort of drill down 110 00:05:08,370 --> 00:05:10,900 from the big document and get lower and lower and lower, 111 00:05:10,900 --> 00:05:13,360 finer and finer grains of detail, until we 112 00:05:13,360 --> 00:05:17,510 get to a very specific piece of our web page that we want to change. 113 00:05:17,510 --> 00:05:22,700 >> And when we update properties of the Document Object or call those methods, 114 00:05:22,700 --> 00:05:24,450 things might happen on our web page. 115 00:05:24,450 --> 00:05:28,420 And we don't need to do any refreshing to have those changes take effect. 116 00:05:28,420 --> 00:05:33,160 >> And that's a pretty cool ability to have when we're working with code. 117 00:05:33,160 --> 00:05:37,185 So what are some of these properties that are part of a document object? 118 00:05:37,185 --> 00:05:40,100 Well, you probably saw a couple of them really quickly 119 00:05:40,100 --> 00:05:42,700 as we were zipping through the giant document 120 00:05:42,700 --> 00:05:45,150 object we just saw in the web browser. 121 00:05:45,150 --> 00:05:48,420 >> But a couple of these properties might be things like inner HTML. 122 00:05:48,420 --> 00:05:52,950 And you might even recall me using this in the JavaScript video 123 00:05:52,950 --> 00:05:54,950 at the very end when I was talking about events. 124 00:05:54,950 --> 00:05:56,125 What was this inner HTML? 125 00:05:56,125 --> 00:05:59,030 Well, it's just what's in between the tags. 126 00:05:59,030 --> 00:06:01,590 >> And so the inner HTML, for example, of the title 127 00:06:01,590 --> 00:06:05,390 tag, if we had kept going in that example a moment ago, 128 00:06:05,390 --> 00:06:08,020 would have been hello world. 129 00:06:08,020 --> 00:06:10,140 That was the title of our page. 130 00:06:10,140 --> 00:06:12,370 Other properties include node name, which 131 00:06:12,370 --> 00:06:15,810 is the name of an HTML element such as title. 132 00:06:15,810 --> 00:06:19,100 ID, which is the ID attribute of an HTML element. 133 00:06:19,100 --> 00:06:23,790 >> Recall that we can specially indicate specific elements of our HTML 134 00:06:23,790 --> 00:06:27,510 with an ID attribute, which usually comes in handy in the context of CSS, 135 00:06:27,510 --> 00:06:29,000 specifically. 136 00:06:29,000 --> 00:06:33,217 Parent node, which is a reference to what's just up above me in the DOM. 137 00:06:33,217 --> 00:06:35,800 And child nodes, which is a reference to what's down below me. 138 00:06:35,800 --> 00:06:37,950 And we saw a lot of that just looking through. 139 00:06:37,950 --> 00:06:42,970 Child nodes, that's how we got lower and lower into the tree. 140 00:06:42,970 --> 00:06:46,590 >> Attributes, that's just an array of attributes of the HTML element. 141 00:06:46,590 --> 00:06:50,270 So an example of attributes might be if you have an image tag, 142 00:06:50,270 --> 00:06:54,090 it usually has a source attribute, maybe a height and a width attribute. 143 00:06:54,090 --> 00:06:57,120 And so that would just be an array of all of the attributes associated 144 00:06:57,120 --> 00:06:59,300 with that HTML element. 145 00:06:59,300 --> 00:07:04,140 >> Style is another one that does represent the CSS 146 00:07:04,140 --> 00:07:06,050 styling of a particular element. 147 00:07:06,050 --> 00:07:08,310 And later on in this video, we'll specifically 148 00:07:08,310 --> 00:07:14,592 leverage style to make a couple of changes to our website. 149 00:07:14,592 --> 00:07:15,800 So those are some properties. 150 00:07:15,800 --> 00:07:17,591 >> And there are also some methods that we can 151 00:07:17,591 --> 00:07:22,450 use to also more quickly maybe isolate elements of the Document Object. 152 00:07:22,450 --> 00:07:26,730 Perhaps, the most versatile of these being getElementById. 153 00:07:26,730 --> 00:07:31,190 So I might say something like, because remember it's a method of the Document 154 00:07:31,190 --> 00:07:34,880 Object, document.getElementById. 155 00:07:34,880 --> 00:07:39,820 >> And inside of those parentheses, specify an HTML element with a particular ID 156 00:07:39,820 --> 00:07:42,330 attribute that I've previously set, and I'll immediately 157 00:07:42,330 --> 00:07:46,685 go right to that element of the overall website. 158 00:07:46,685 --> 00:07:49,310 So I don't have to maybe drill down through every single layer. 159 00:07:49,310 --> 00:07:52,841 I can just use this method to find it, sort of like a heat seeking missile, 160 00:07:52,841 --> 00:07:53,340 right? 161 00:07:53,340 --> 00:07:56,300 It just goes and finds exactly what it's looking for. 162 00:07:56,300 --> 00:07:59,290 >> GetElementsByTagName is very similar in spirit. 163 00:07:59,290 --> 00:08:02,500 Maybe this would find all of the bold tags or all of the p tags 164 00:08:02,500 --> 00:08:05,920 and give me an array of everything that I could then work with. 165 00:08:05,920 --> 00:08:12,080 appendChild adds something one level down in the tree. 166 00:08:12,080 --> 00:08:16,440 >> So I can add an entire new element one level lower. 167 00:08:16,440 --> 00:08:19,700 Or I can remove an element that's one level lower as well if I want 168 00:08:19,700 --> 00:08:22,870 to delete something from my web page. 169 00:08:22,870 --> 00:08:28,480 Now, a quick coding note and a quick headache saving note, hopefully. 170 00:08:28,480 --> 00:08:31,670 >> getElementById-- the d is lowercase. 171 00:08:31,670 --> 00:08:36,950 I can't tell you how many times I have used getElementById and capitalized 172 00:08:36,950 --> 00:08:38,336 the d there. 173 00:08:38,336 --> 00:08:39,460 Because it's really common. 174 00:08:39,460 --> 00:08:42,990 If we write the word ID, it's usually capital I capital D. 175 00:08:42,990 --> 00:08:44,240 And my code just doesn't work. 176 00:08:44,240 --> 00:08:45,630 And I can't figure out why. 177 00:08:45,630 --> 00:08:49,490 This is a really, really, really common bug that everybody makes, 178 00:08:49,490 --> 00:08:51,890 even experts that have been doing this forever. 179 00:08:51,890 --> 00:08:55,410 So just be aware, getElementById, that d is lowercase. 180 00:08:55,410 --> 00:09:00,080 And hopefully, that saves you several minutes at least of heartache. 181 00:09:00,080 --> 00:09:02,204 >> So what does all of this tell us? 182 00:09:02,204 --> 00:09:03,120 We have these methods. 183 00:09:03,120 --> 00:09:04,161 We have these properties. 184 00:09:04,161 --> 00:09:06,610 Now, if we start from document, document. 185 00:09:06,610 --> 00:09:10,220 whatever, we can now get to any single piece of our web page 186 00:09:10,220 --> 00:09:14,870 that we want to using JavaScript just by calling these the methods 187 00:09:14,870 --> 00:09:19,940 and leveraging the properties that we find at various locations. 188 00:09:19,940 --> 00:09:24,890 >> This can get wordy, this document.getElementByID, 189 00:09:24,890 --> 00:09:28,560 maybe have a long tag name, maybe you do more calls later on. 190 00:09:28,560 --> 00:09:31,230 Things can get a little bit wordy. 191 00:09:31,230 --> 00:09:34,480 And as programmers, as you've probably seen in many of these videos, 192 00:09:34,480 --> 00:09:36,600 we don't like wordy things. 193 00:09:36,600 --> 00:09:38,520 >> We like to be able to do things quickly. 194 00:09:38,520 --> 00:09:42,640 So we would like a more concise way to say something. 195 00:09:42,640 --> 00:09:46,270 So this sort of leads to the notion of something called jQuery. 196 00:09:46,270 --> 00:09:49,170 Now jQuery is not JavaScript. 197 00:09:49,170 --> 00:09:50,350 It's not part of JavaScript. 198 00:09:50,350 --> 00:09:54,790 >> It is a library that was written by some JavaScript programmers 199 00:09:54,790 --> 00:09:57,060 about 10 years ago. 200 00:09:57,060 --> 00:10:01,300 And its goal is to simplify this what's called client side scripting, which 201 00:10:01,300 --> 00:10:04,310 is basically what we were just talking about with DOM manipulations. 202 00:10:04,310 --> 00:10:11,090 And so if I wanted to modify the background color of my web page, maybe 203 00:10:11,090 --> 00:10:11,980 a specific Div. 204 00:10:11,980 --> 00:10:15,325 >> Here, I'm apparently getting ElementById colorDiv. 205 00:10:15,325 --> 00:10:16,950 And I want to set its background color. 206 00:10:16,950 --> 00:10:20,720 If I'm just using pure JavaScript using the Document Object Model, 207 00:10:20,720 --> 00:10:23,990 that's a lot of stuff, right? document.getElementByID 208 00:10:23,990 --> 00:10:25,531 colorDiv.style.backgroundColor=green. 209 00:10:25,531 --> 00:10:27,260 210 00:10:27,260 --> 00:10:28,050 >> Whew. 211 00:10:28,050 --> 00:10:30,110 That was a lot to say. 212 00:10:30,110 --> 00:10:31,720 It's a lot to type, too. 213 00:10:31,720 --> 00:10:35,760 And so in jQuery, we can maybe say this a little bit more concisely. 214 00:10:35,760 --> 00:10:39,350 The trade off being it's maybe a little bit more cryptic all of a sudden, 215 00:10:39,350 --> 00:10:39,850 right? 216 00:10:39,850 --> 00:10:43,580 >> At least the long is a bit more explanatory as to what we're doing. 217 00:10:43,580 --> 00:10:49,947 This dollar sign, parentheses, single quote, hash, colorDiv, right? 218 00:10:49,947 --> 00:10:50,780 What does that mean? 219 00:10:50,780 --> 00:10:53,640 Well, that's basically just document.getElementByID colorDiv. 220 00:10:53,640 --> 00:10:58,700 >> But it's this sort of shorthand way of doing it using jQuery. 221 00:10:58,700 --> 00:11:01,380 Let's just take a look now at a couple of different ways 222 00:11:01,380 --> 00:11:04,520 that I might actually use this Document Object 223 00:11:04,520 --> 00:11:06,807 Model to manipulate pieces of my site. 224 00:11:06,807 --> 00:11:09,140 In particular, we're going to be working on manipulating 225 00:11:09,140 --> 00:11:14,090 the color of a particular Div, colorDiv, on a web page. 226 00:11:14,090 --> 00:11:15,299 So let's take a look at that. 227 00:11:15,299 --> 00:11:15,798 All right. 228 00:11:15,798 --> 00:11:16,700 So I'm on a page. 229 00:11:16,700 --> 00:11:20,750 It's called test.html when you download this if you want to tinker with this. 230 00:11:20,750 --> 00:11:24,730 And I've got a bunch of buttons on this page. 231 00:11:24,730 --> 00:11:27,730 And I'm saying individual functions for background color, purple, green, 232 00:11:27,730 --> 00:11:31,330 orange, red, blue, one single function for background color, event handler 233 00:11:31,330 --> 00:11:34,360 for background color, and using jQuery. 234 00:11:34,360 --> 00:11:38,147 What am I talking about when I'm doing this? 235 00:11:38,147 --> 00:11:39,230 So we've seen the buttons. 236 00:11:39,230 --> 00:11:41,521 Now, let's take a look at some of the source code here. 237 00:11:41,521 --> 00:11:44,770 We'll start with test.html. 238 00:11:44,770 --> 00:11:48,100 So individual functions for background color is what I've typed here. 239 00:11:48,100 --> 00:11:49,350 Let me scroll a little bit. 240 00:11:49,350 --> 00:11:56,170 241 00:11:56,170 --> 00:11:58,820 >> And you'll notice that I have defined these buttons 242 00:11:58,820 --> 00:12:03,990 to say when this button is clicked, call the function turn purple. 243 00:12:03,990 --> 00:12:06,670 When this button is click, rather, call the function turn green, 244 00:12:06,670 --> 00:12:08,710 turn orange, turn red, turn blue. 245 00:12:08,710 --> 00:12:11,880 You can probably guess that this is perhaps not the best design 246 00:12:11,880 --> 00:12:12,460 sense, right? 247 00:12:12,460 --> 00:12:16,490 >> It would be nice if I could have a more general approach. 248 00:12:16,490 --> 00:12:19,570 Well, first we'll take a look at what those five functions are 249 00:12:19,570 --> 00:12:24,400 document.getElementByID colorDiv.style.background=purple, 250 00:12:24,400 --> 00:12:27,250 green, orange, red, and blue, respectively. 251 00:12:27,250 --> 00:12:30,930 So, not particularly the best design. 252 00:12:30,930 --> 00:12:33,390 >> The next set of buttons I have is I've written 253 00:12:33,390 --> 00:12:36,380 a single function called change color that apparently 254 00:12:36,380 --> 00:12:38,960 accepts a string as its argument. 255 00:12:38,960 --> 00:12:40,290 So this is a little bit better. 256 00:12:40,290 --> 00:12:43,840 Purple, green, orange, red, blue is now an argument. 257 00:12:43,840 --> 00:12:46,230 So I've written a more general case JavaScript function, 258 00:12:46,230 --> 00:12:47,771 which might look something like this. 259 00:12:47,771 --> 00:12:48,680 I'm passing in. 260 00:12:48,680 --> 00:12:52,090 This function change color is expecting an argument called color. 261 00:12:52,090 --> 00:12:54,970 And I'm saying set the background color to color. 262 00:12:54,970 --> 00:12:58,390 So here represents what I've got here. 263 00:12:58,390 --> 00:12:59,770 So that's a bit better. 264 00:12:59,770 --> 00:13:02,740 >> But I might be able to do better than that. 265 00:13:02,740 --> 00:13:06,140 If we go down to take a look at the event handler situation, 266 00:13:06,140 --> 00:13:07,860 now all these calls look the same. 267 00:13:07,860 --> 00:13:10,340 If you recall for our discussion on event handlers, 268 00:13:10,340 --> 00:13:15,770 I can get information about which of these buttons was clicked and use that. 269 00:13:15,770 --> 00:13:19,560 >> And so in event.JavaScript, I've written change color event, which 270 00:13:19,560 --> 00:13:21,110 figures out which button was clicked. 271 00:13:21,110 --> 00:13:23,250 That's the trigger object line. 272 00:13:23,250 --> 00:13:25,240 And then here, it gets really wordy. 273 00:13:25,240 --> 00:13:27,420 But what I'm doing is I'm setting the background 274 00:13:27,420 --> 00:13:30,340 color to triggerObject inner.HTML. 275 00:13:30,340 --> 00:13:34,170 That's the text in between the button tags. 276 00:13:34,170 --> 00:13:36,500 >> And then I apparently have to set it to lowercase. 277 00:13:36,500 --> 00:13:40,780 And that's how I can convert an entire string to lowercase in JavaScript using 278 00:13:40,780 --> 00:13:42,940 that method to lowercase. 279 00:13:42,940 --> 00:13:46,570 Because when I set a color, as I'm trying to do here, 280 00:13:46,570 --> 00:13:48,260 the color has to be all lowercase. 281 00:13:48,260 --> 00:13:50,920 >> But the button that I had, if we take another look, 282 00:13:50,920 --> 00:13:55,890 notice that the text there is written with a capital P for purple. 283 00:13:55,890 --> 00:13:59,140 And then at the very bottom here, I apparently 284 00:13:59,140 --> 00:14:02,630 try and do this using jQuery as well. 285 00:14:02,630 --> 00:14:06,000 And in this case, I'm not actually calling a function at all. 286 00:14:06,000 --> 00:14:11,430 I've just said the class that I'm using for this button is a jQ button. 287 00:14:11,430 --> 00:14:12,360 That's it. 288 00:14:12,360 --> 00:14:14,950 >> So how does jQuery know what I'm doing? 289 00:14:14,950 --> 00:14:18,740 Well, this is one of the advantages slash disadvantages of jQuery. 290 00:14:18,740 --> 00:14:21,560 It can allow me to do things very concisely, but maybe not 291 00:14:21,560 --> 00:14:22,570 as intuitively. 292 00:14:22,570 --> 00:14:25,570 Maybe those other three make a bit more sense what I'm doing. 293 00:14:25,570 --> 00:14:29,010 Here, though, what's going on? 294 00:14:29,010 --> 00:14:31,940 >> Apparently, creating an anonymous function 295 00:14:31,940 --> 00:14:36,790 that loads whenever my document is ready, so document.ready, 296 00:14:36,790 --> 00:14:38,760 some function is going to happen. 297 00:14:38,760 --> 00:14:40,490 Basically, when is a document ready? 298 00:14:40,490 --> 00:14:42,310 It's when my page has loaded. 299 00:14:42,310 --> 00:14:46,540 >> So as soon as my page has loaded, the following function is always ready. 300 00:14:46,540 --> 00:14:54,310 It says, if an object of type jQButton, or if class jQButton has been clicked, 301 00:14:54,310 --> 00:14:55,570 execute this function. 302 00:14:55,570 --> 00:14:59,360 So here's two anonymous functions, one defined inside of the other. 303 00:14:59,360 --> 00:15:03,930 >> So my entire context here so far is my page 304 00:15:03,930 --> 00:15:06,520 when it loads it calls this function. 305 00:15:06,520 --> 00:15:09,740 And this function is waiting for a button to be clicked. 306 00:15:09,740 --> 00:15:14,490 And when a button is clicked, jQ button specifically is clicked, 307 00:15:14,490 --> 00:15:17,150 it calls this other function, which is going 308 00:15:17,150 --> 00:15:21,250 to set the background color of colorDiv to be 309 00:15:21,250 --> 00:15:25,990 whatever text is in between the tags. 310 00:15:25,990 --> 00:15:28,050 >> This is the notion of which button was clicked. 311 00:15:28,050 --> 00:15:31,230 But otherwise, this is sort of behaving similar to an event. 312 00:15:31,230 --> 00:15:34,460 It's just the same way I would express this in jQuery. 313 00:15:34,460 --> 00:15:36,790 Again, it's probably a lot more intimidating. 314 00:15:36,790 --> 00:15:40,840 It's not as clear as something like event.js, 315 00:15:40,840 --> 00:15:45,080 which is maybe a little bit more verbose, but a little bit less 316 00:15:45,080 --> 00:15:46,000 intimidating. 317 00:15:46,000 --> 00:15:51,460 >> But if we pop back over to my browser window, if I start clicking-- well, 318 00:15:51,460 --> 00:15:52,690 that changed to purple. 319 00:15:52,690 --> 00:15:54,450 This is green using the string method. 320 00:15:54,450 --> 00:15:56,500 This is orange using the event handler. 321 00:15:56,500 --> 00:15:58,300 >> This is red using jQuery, right? 322 00:15:58,300 --> 00:16:01,270 They all behave exactly the same. 323 00:16:01,270 --> 00:16:06,509 They just do it using different approaches to solve the problem. 324 00:16:06,509 --> 00:16:08,550 There's a lot more to jQuery then we're certainly 325 00:16:08,550 --> 00:16:10,050 going to talk about in this video. 326 00:16:10,050 --> 00:16:15,410 But if you want to learn more, you can go to the jQuery sort of documentation 327 00:16:15,410 --> 00:16:19,710 and learn quite a bit more about this very flexible library, which 328 00:16:19,710 --> 00:16:22,550 is great for doing client side scripting such as what we were doing 329 00:16:22,550 --> 00:16:26,240 to manipulate the look and feel of our web page 330 00:16:26,240 --> 00:16:28,750 with the Document Object Model. 331 00:16:28,750 --> 00:16:29,650 I'm Doug Lloyd. 332 00:16:29,650 --> 00:16:31,930 This is CS50. 333 00:16:31,930 --> 00:16:34,022