1 00:00:00,000 --> 00:00:00,976 2 00:00:00,976 --> 00:00:04,392 [MUSIC PLAYING] 3 00:00:04,392 --> 00:00:16,330 4 00:00:16,330 --> 00:00:18,080 DAVID J. MALAN: Recall that when you visit 5 00:00:18,080 --> 00:00:23,680 a URL, like http://www.example.com, you're 6 00:00:23,680 --> 00:00:27,100 actually requesting of some web server a file, most likely, 7 00:00:27,100 --> 00:00:29,530 called, for instance, index.html. 8 00:00:29,530 --> 00:00:31,860 Now, to be fair, that file can be called something else 9 00:00:31,860 --> 00:00:33,610 and it doesn't actually have to be a file. 10 00:00:33,610 --> 00:00:36,980 It can be a program that generates a response for the user. 11 00:00:36,980 --> 00:00:40,540 But in the common case, it's indeed a file called index.html, 12 00:00:40,540 --> 00:00:44,060 even if you or some user has not explicitly typed it. 13 00:00:44,060 --> 00:00:46,030 And what that means is that you're effectively 14 00:00:46,030 --> 00:00:50,140 downloading from the server just a file that happens to be a text file, 15 00:00:50,140 --> 00:00:54,430 such as one written in Notepad.exe or Text Edit on a Mac. 16 00:00:54,430 --> 00:00:58,600 But this file is written in such a way that the browser understands it. 17 00:00:58,600 --> 00:01:03,160 It's written in a language that calls itself HTML or HyperText Markup 18 00:01:03,160 --> 00:01:03,880 Language. 19 00:01:03,880 --> 00:01:06,490 And now, and this is indeed not a programming language 20 00:01:06,490 --> 00:01:09,310 but a markup language, a set of instructions 21 00:01:09,310 --> 00:01:13,120 that tells the computer what to do and how to do it, but not in the way 22 00:01:13,120 --> 00:01:15,820 that we saw with programming languages proper. 23 00:01:15,820 --> 00:01:20,200 We don't have an HTML functions or loops or conditions or variables. 24 00:01:20,200 --> 00:01:22,480 Rather, we have what we're going to call tags, 25 00:01:22,480 --> 00:01:26,020 special instructions to the browser that tell it what to start doing 26 00:01:26,020 --> 00:01:28,150 and eventually, what to stop doing. 27 00:01:28,150 --> 00:01:31,330 So for instance, if you might want to display text or center that text 28 00:01:31,330 --> 00:01:33,560 or format it or structure it in some way, 29 00:01:33,560 --> 00:01:37,170 HTML is going to allow us to present contents of a web page. 30 00:01:37,170 --> 00:01:38,920 And eventually, we'll see another language 31 00:01:38,920 --> 00:01:41,620 via which we can style the same, but we're not 32 00:01:41,620 --> 00:01:44,290 going to do it in the same way as logically as we 33 00:01:44,290 --> 00:01:46,190 did with the programming language. 34 00:01:46,190 --> 00:01:48,250 So what might the simplest possible web page 35 00:01:48,250 --> 00:01:51,850 be that we could implement in this language called HTML? 36 00:01:51,850 --> 00:01:53,920 Well, consider this web page here. 37 00:01:53,920 --> 00:01:57,850 In the main part of the page, do I see, hello, body, a sort of greeting 38 00:01:57,850 --> 00:01:59,410 to the actual user. 39 00:01:59,410 --> 00:02:01,930 And up here in the title do I see quite simply, hello, 40 00:02:01,930 --> 00:02:06,250 title, referring to the title bar or the tab atop this web page. 41 00:02:06,250 --> 00:02:07,390 Now it's incredibly simple. 42 00:02:07,390 --> 00:02:09,050 It's only whitespace everywhere else. 43 00:02:09,050 --> 00:02:12,190 So this web page would seem to have just a couple of phrases. 44 00:02:12,190 --> 00:02:17,150 So how, using this language, HTML, would you go about implementing this page? 45 00:02:17,150 --> 00:02:18,460 Well, let's take a look. 46 00:02:18,460 --> 00:02:21,490 Here I have just a simple text editor, again similar in spirit 47 00:02:21,490 --> 00:02:23,440 to Notepad or Text Edit. 48 00:02:23,440 --> 00:02:27,730 I'm going to call this file index.html, simply to be consistent with that URL 49 00:02:27,730 --> 00:02:28,450 we saw. 50 00:02:28,450 --> 00:02:30,880 Now, what might the contents of this file be? 51 00:02:30,880 --> 00:02:33,100 Well, to write the simplest possible web page, 52 00:02:33,100 --> 00:02:37,120 I'm simply going to begin as follows, open bracket, or less than sign, 53 00:02:37,120 --> 00:02:41,140 followed by an exclamation point, and then DOCTYPE html. 54 00:02:41,140 --> 00:02:43,210 A fairly arcane line of text that is simply 55 00:02:43,210 --> 00:02:45,500 a clue to the browser to say hey, browser, 56 00:02:45,500 --> 00:02:50,290 here comes a web page written in a version of HTML version 5. 57 00:02:50,290 --> 00:02:53,050 Indeed, this first line of code has changed over the years. 58 00:02:53,050 --> 00:02:56,800 This is perhaps the simplest yet, and it implies only implicitly 59 00:02:56,800 --> 00:02:59,530 that indeed we want to use HTML5. 60 00:02:59,530 --> 00:03:02,770 Now thereafter, actually come the structure of the web page itself. 61 00:03:02,770 --> 00:03:04,690 And so I will literally type this. 62 00:03:04,690 --> 00:03:07,210 Open bracket, html, close bracket. 63 00:03:07,210 --> 00:03:12,190 And then a couple of lines later, let me go ahead and say, open bracket, /html. 64 00:03:12,190 --> 00:03:15,500 These are what are called tags and they say to the browser, hey browser, 65 00:03:15,500 --> 00:03:17,920 here comes a page written in HTML. 66 00:03:17,920 --> 00:03:20,410 And hey browser, that's it for this web page. 67 00:03:20,410 --> 00:03:23,200 So whereas, we might call this first tag here the start 68 00:03:23,200 --> 00:03:25,990 tag and this last tag the end tag, we might also 69 00:03:25,990 --> 00:03:29,200 call them the open and close tag, respectively, 70 00:03:29,200 --> 00:03:32,080 thereby implying that there's a structure and a symmetry 71 00:03:32,080 --> 00:03:36,432 really to a web page, whereby, you both start and stop, ultimately, a thought. 72 00:03:36,432 --> 00:03:38,140 Now inside of this web page, you're going 73 00:03:38,140 --> 00:03:41,110 to be at least two parts, just as we saw in the rendering 74 00:03:41,110 --> 00:03:42,430 thereof in the browser. 75 00:03:42,430 --> 00:03:45,010 We have what we're going to call the head of the web page, 76 00:03:45,010 --> 00:03:46,930 the very topmost portion thereof. 77 00:03:46,930 --> 00:03:48,970 And I'm going to go ahead and preemptively say, 78 00:03:48,970 --> 00:03:50,740 open bracket, head, closed bracket. 79 00:03:50,740 --> 00:03:54,160 And then again, close that tag by using a forward slash 80 00:03:54,160 --> 00:03:56,230 in front of that very same name. 81 00:03:56,230 --> 00:03:59,170 Now for now, the only thing that can go in the head of a web page, 82 00:03:59,170 --> 00:04:02,920 for our purposes, it turns out is something like the page's title. 83 00:04:02,920 --> 00:04:06,487 And I'll go ahead and say title, and just as before, hello, title. 84 00:04:06,487 --> 00:04:08,320 Now that's the end of my thought, and so I'm 85 00:04:08,320 --> 00:04:10,780 going to tell the browser that is it for the title, 86 00:04:10,780 --> 00:04:14,350 and I'm going to close or end that tag, so to speak. 87 00:04:14,350 --> 00:04:16,880 So that covers it for the top part of the page. 88 00:04:16,880 --> 00:04:20,230 What about the rest of it-- the body of the page? 89 00:04:20,230 --> 00:04:22,600 Well there too, I have another tag quite simply called 90 00:04:22,600 --> 00:04:24,880 body that says, hey browser, here comes the body 91 00:04:24,880 --> 00:04:28,762 of my page, the remainder of the contents that really fill out the rest. 92 00:04:28,762 --> 00:04:30,970 Thereafter, I'm going to preemptively say, all right, 93 00:04:30,970 --> 00:04:32,560 that's going to be it for the body. 94 00:04:32,560 --> 00:04:36,910 But inside of that body, are going to be the contents thereof, perhaps just 95 00:04:36,910 --> 00:04:40,870 a phrase like I had before, or perhaps a picture or video or much more. 96 00:04:40,870 --> 00:04:44,920 This is where you would put the contents of a company's web page or anything 97 00:04:44,920 --> 00:04:46,960 that you want to present to the user. 98 00:04:46,960 --> 00:04:50,930 I'm quite simply for now going to say hello, body, and that's it. 99 00:04:50,930 --> 00:04:54,460 Hereafter, I'll save this file and it will exist on my hard drive 100 00:04:54,460 --> 00:04:57,880 as just that, a file, called index.html. 101 00:04:57,880 --> 00:05:00,490 And if I now go into my browser and choose File Open 102 00:05:00,490 --> 00:05:06,070 or simply drag that file index.html onto the browser, what I will see 103 00:05:06,070 --> 00:05:07,320 is just this. 104 00:05:07,320 --> 00:05:09,610 Our browser pictured here is Chrome and in the title 105 00:05:09,610 --> 00:05:13,940 bar is indeed hello, title, and in the body is just that, hello, body. 106 00:05:13,940 --> 00:05:15,280 The browser knows what to do. 107 00:05:15,280 --> 00:05:18,030 Because indeed, at the end of the day, all a browser does is that. 108 00:05:18,030 --> 00:05:23,350 It reads this language called HTML in a file called, typically something .html, 109 00:05:23,350 --> 00:05:27,700 top to bottom, left to right, and every time it encounters one of these tags, 110 00:05:27,700 --> 00:05:30,070 it does what that tag means. 111 00:05:30,070 --> 00:05:32,980 So Google and Microsoft and Mozilla and others 112 00:05:32,980 --> 00:05:36,700 who create these so-called browsers simply design them in such a way 113 00:05:36,700 --> 00:05:40,120 that they know how to, if you will, interpret HTML. 114 00:05:40,120 --> 00:05:43,780 Again, it's not a programming language or interpreted in quite the same way 115 00:05:43,780 --> 00:05:47,980 that Python is, but it is in fact an interpreted, line by line, 116 00:05:47,980 --> 00:05:50,380 top to bottom, left to right and the browser simply 117 00:05:50,380 --> 00:05:53,985 does what these tags tell it to do-- present the title up 118 00:05:53,985 --> 00:05:56,080 here and the body down here. 119 00:05:56,080 --> 00:05:59,560 Now fortunately, there are many more tags than just these, whereby 120 00:05:59,560 --> 00:06:04,150 we can create lists and tables and paragraphs and more. 121 00:06:04,150 --> 00:06:07,030 And so, let's flesh out the vocabulary, so to speak, 122 00:06:07,030 --> 00:06:12,100 that is HTML by looking at some more complicated examples. 123 00:06:12,100 --> 00:06:15,550 Here for instance, is a file called paragraphs.html, 124 00:06:15,550 --> 00:06:19,390 and I've begun it just as I have before with a DOCTYPE html 125 00:06:19,390 --> 00:06:23,380 at the top an html tag thereafter and a close html tag 126 00:06:23,380 --> 00:06:27,610 down below, a head, a close head, an open body, a close body, a title 127 00:06:27,610 --> 00:06:29,930 tag, and a close title tag thereafter. 128 00:06:29,930 --> 00:06:31,930 But between that, I've gone ahead and whipped up 129 00:06:31,930 --> 00:06:34,990 a couple of paragraphs of Latin, or well, Latin, 130 00:06:34,990 --> 00:06:37,270 thereby filling out the screen much more. 131 00:06:37,270 --> 00:06:39,820 But let's go ahead and now open this file on a browser 132 00:06:39,820 --> 00:06:44,710 and we'll see that it doesn't quite present in the way that you'd think. 133 00:06:44,710 --> 00:06:46,630 Indeed, when I open this file in my browser 134 00:06:46,630 --> 00:06:50,710 all I see is just one big block of text, no two paragraphs, 135 00:06:50,710 --> 00:06:53,800 even though when I typed it out did I very deliberately 136 00:06:53,800 --> 00:06:55,930 hit my Enter key a couple of times in order 137 00:06:55,930 --> 00:06:58,772 to create that break between paragraphs. 138 00:06:58,772 --> 00:06:59,980 And so, what's going on then? 139 00:06:59,980 --> 00:07:01,862 Why is the browser ignoring me? 140 00:07:01,862 --> 00:07:03,820 Well indeed, just as with the tags, the browser 141 00:07:03,820 --> 00:07:05,730 only does what it tells you to do. 142 00:07:05,730 --> 00:07:10,840 And in fact, by default, it ignores whitespace-- presses of your space bar 143 00:07:10,840 --> 00:07:14,890 or tab key that are typically used only in writing code 144 00:07:14,890 --> 00:07:17,200 to make the code more readable for the user, 145 00:07:17,200 --> 00:07:20,300 whether Python or HTML or anything else. 146 00:07:20,300 --> 00:07:23,920 And indeed, notice how I very nicely indented here everything on the screen, 147 00:07:23,920 --> 00:07:25,672 including those paragraphs. 148 00:07:25,672 --> 00:07:27,880 But I don't want to see all of this space in the page 149 00:07:27,880 --> 00:07:30,790 and I don't want to see all of this space in the title or body, 150 00:07:30,790 --> 00:07:34,660 and so the browser just ignores seemingly superfluous whitespace, 151 00:07:34,660 --> 00:07:38,260 simply presuming that the code itself was pretty printed. 152 00:07:38,260 --> 00:07:40,840 But that's of course, a problem when what I want to display 153 00:07:40,840 --> 00:07:44,710 is text, English text, that actually has paragraphs and structure. 154 00:07:44,710 --> 00:07:48,610 And so, I need to format this a little bit differently. 155 00:07:48,610 --> 00:07:52,660 I need to tell the browser, hey, browser, break lines here so as 156 00:07:52,660 --> 00:07:54,620 to move the text down below. 157 00:07:54,620 --> 00:07:55,870 So let's go ahead and do that. 158 00:07:55,870 --> 00:07:59,810 And let me go in here between these two paragraphs and type out a open bracket, 159 00:07:59,810 --> 00:08:02,710 br, closed bracket, indicating line break. 160 00:08:02,710 --> 00:08:05,620 Indeed here, br is obviously not a complete word. 161 00:08:05,620 --> 00:08:08,440 It's just an abbreviation, because HTML ultimately 162 00:08:08,440 --> 00:08:10,210 tends to optimize characters. 163 00:08:10,210 --> 00:08:13,540 And for any type of tag, so to speak, that you might use frequently, 164 00:08:13,540 --> 00:08:17,140 it tends to have a shorter name or nickname like this. 165 00:08:17,140 --> 00:08:19,750 Now curiously, about br, that's it. 166 00:08:19,750 --> 00:08:20,905 I'm done typing. 167 00:08:20,905 --> 00:08:23,530 Because with a line break, it's either there or it's not there. 168 00:08:23,530 --> 00:08:27,250 You can't really start breaking a line and then stop breaking a line. 169 00:08:27,250 --> 00:08:28,730 You either do it or you don't. 170 00:08:28,730 --> 00:08:32,380 And so the br tag, unlike HTML head title and body, 171 00:08:32,380 --> 00:08:35,470 does not in fact have a corresponding end tag. 172 00:08:35,470 --> 00:08:40,840 You could theoretically go ahead and say open bracket, /br, close bracket, 173 00:08:40,840 --> 00:08:41,799 but it has no meaning. 174 00:08:41,799 --> 00:08:44,860 And you shouldn't put anything in between anyway. 175 00:08:44,860 --> 00:08:47,650 And so, it's not strictly necessary and HTML5 176 00:08:47,650 --> 00:08:49,870 allows you to omit that altogether. 177 00:08:49,870 --> 00:08:52,810 Or if you really do like to feel symmetric, 178 00:08:52,810 --> 00:08:56,710 can you put the forward slash inside the tag right there at the end. 179 00:08:56,710 --> 00:09:01,120 So here, too, the language itself HTML allows for all of these possibilities. 180 00:09:01,120 --> 00:09:04,450 But why type more characters when you can type fewer, and so 181 00:09:04,450 --> 00:09:06,950 we'll leave it, for instance, as just this. 182 00:09:06,950 --> 00:09:10,060 Let me go ahead and save now the file and reload the browser. 183 00:09:10,060 --> 00:09:13,600 And you'll see that it doesn't seem to have quite solved the problem. 184 00:09:13,600 --> 00:09:19,330 Now it did make sure that, that first paragraph ends and the next one begins 185 00:09:19,330 --> 00:09:21,970 here, but I don't see the space that I'd like 186 00:09:21,970 --> 00:09:24,850 to see as in a magazine or paper or book, 187 00:09:24,850 --> 00:09:27,700 whereby those two paragraphs are truly distinct. 188 00:09:27,700 --> 00:09:28,840 So how can I do better? 189 00:09:28,840 --> 00:09:33,250 Well, if one br tag got me one break, why not use two get two? 190 00:09:33,250 --> 00:09:35,110 And so, let's do that in my code instead, 191 00:09:35,110 --> 00:09:39,500 this time doing open bracket, br, close bracket again, telling the browser, 192 00:09:39,500 --> 00:09:41,110 give me two line breaks here. 193 00:09:41,110 --> 00:09:43,810 And if I now reload that page in my browser, 194 00:09:43,810 --> 00:09:47,320 I do in fact see a gap between paragraphs. 195 00:09:47,320 --> 00:09:49,840 But this feels a little bit hackish, and frankly, 196 00:09:49,840 --> 00:09:53,830 old-school, akin to a typewriter, where the only expressiveness you have 197 00:09:53,830 --> 00:09:55,360 is what you can do mechanically. 198 00:09:55,360 --> 00:09:59,170 But these days in software, we should certainly be able to do more. 199 00:09:59,170 --> 00:10:01,510 And so indeed, HTML accommodates this. 200 00:10:01,510 --> 00:10:05,200 Rather than just break lines, why not tell the browser, hey, browser, 201 00:10:05,200 --> 00:10:06,610 here is a paragraph. 202 00:10:06,610 --> 00:10:09,670 And say that a couple of times for a couple of paragraphs. 203 00:10:09,670 --> 00:10:13,030 So let me go back into my code here, and instead of this line break, 204 00:10:13,030 --> 00:10:17,340 instead first go to the start of my text and say hey, browser, here comes 205 00:10:17,340 --> 00:10:20,280 a paragraph, abbreviated just p. 206 00:10:20,280 --> 00:10:24,150 And just for consistency, I'll go ahead and indent the rest of that paragraph. 207 00:10:24,150 --> 00:10:27,330 And notice my text editor is smart and it's moving everything over, 208 00:10:27,330 --> 00:10:32,020 just so that I can see that this is all part of one thought, if you will. 209 00:10:32,020 --> 00:10:35,448 It's not actually adding all of these spaces to the actual output. 210 00:10:35,448 --> 00:10:38,490 But when that paragraph is done, I should tell the browser as much and do 211 00:10:38,490 --> 00:10:41,920 open bracket, /p, close bracket, thereby saying hey, browser, 212 00:10:41,920 --> 00:10:43,440 that's it for this paragraph. 213 00:10:43,440 --> 00:10:46,920 But I again want to say this a second time and so here on my second line 214 00:10:46,920 --> 00:10:50,130 will I go ahead and say open bracket, p, close bracket. 215 00:10:50,130 --> 00:10:53,220 And then below that paragraph of text, go back down 216 00:10:53,220 --> 00:10:56,160 and finish that thought as well. 217 00:10:56,160 --> 00:10:58,260 And so, it's a bit more verbose now because I 218 00:10:58,260 --> 00:11:01,320 have to say, both start and stop, or open and close. 219 00:11:01,320 --> 00:11:04,410 But now, I've told the browser all the more explicitly what 220 00:11:04,410 --> 00:11:05,890 instructions to follow. 221 00:11:05,890 --> 00:11:08,310 And if I go back into my browser and reload now, 222 00:11:08,310 --> 00:11:12,270 we'll see that I indeed still have that gap between lines, 223 00:11:12,270 --> 00:11:15,540 but I no longer have to fairly hackishly, if you will, 224 00:11:15,540 --> 00:11:18,210 hit line break, line break just twice. 225 00:11:18,210 --> 00:11:21,700 226 00:11:21,700 --> 00:11:23,350 So that's how I get paragraphs. 227 00:11:23,350 --> 00:11:26,170 How about a list, whether a to do list for the day 228 00:11:26,170 --> 00:11:27,550 or a whole list of thoughts. 229 00:11:27,550 --> 00:11:31,000 Well here, I've readied a page called list.html. 230 00:11:31,000 --> 00:11:34,540 And as before, I've structured it in the usual way, DOCTYPE up top 231 00:11:34,540 --> 00:11:38,530 and then HTML at the top, close HTML at the bottom with a head and a body 232 00:11:38,530 --> 00:11:40,690 in between and only a title. 233 00:11:40,690 --> 00:11:43,330 So let's now focus on making a list inside of that body 234 00:11:43,330 --> 00:11:46,870 and suppose that I have three thoughts on my mind, foobar 235 00:11:46,870 --> 00:11:49,990 and baz, the go-to words for any computer scientist, 236 00:11:49,990 --> 00:11:52,690 not unlike xy or z for a mathematician. 237 00:11:52,690 --> 00:11:54,880 So if I have three things to say, I might go ahead 238 00:11:54,880 --> 00:12:00,160 and say, foo bar and baz, one per line, just as you might on a tablet 239 00:12:00,160 --> 00:12:02,050 or on an actual piece of paper. 240 00:12:02,050 --> 00:12:05,200 And let me go ahead and Save this now and open it in my browser. 241 00:12:05,200 --> 00:12:10,510 And unfortunately, just as you might expect, per our foray into paragraphs, 242 00:12:10,510 --> 00:12:12,760 each of those thoughts ends up on that same line. 243 00:12:12,760 --> 00:12:13,510 Well, why is that? 244 00:12:13,510 --> 00:12:16,420 Well, I haven't told the browser to give me separate paragraphs, 245 00:12:16,420 --> 00:12:17,260 let alone lines. 246 00:12:17,260 --> 00:12:19,070 And indeed, these really aren't paragraphs. 247 00:12:19,070 --> 00:12:22,090 Now, I want for myself a proper list. 248 00:12:22,090 --> 00:12:24,430 Well, it turns out that HTML does offer that 249 00:12:24,430 --> 00:12:26,950 in the form of multiple types of lists. 250 00:12:26,950 --> 00:12:30,070 And in fact, if I go back to my code and am a bit more explicit 251 00:12:30,070 --> 00:12:32,320 this time, I can say, hey, browser, give me 252 00:12:32,320 --> 00:12:37,780 a list, specifically a UL or unordered list, one that will not have numbers. 253 00:12:37,780 --> 00:12:41,320 And then beneath that, I'm going to go ahead and indent my previous thoughts. 254 00:12:41,320 --> 00:12:43,990 But this time, I'm going to surround them with open bracket, 255 00:12:43,990 --> 00:12:49,450 li for list item, and then open bracket, close li, for the same. 256 00:12:49,450 --> 00:12:53,560 Then, each of the elements below will get that same wrapper, if you will, 257 00:12:53,560 --> 00:12:56,740 open bracket, li, and then open bracket, close li. 258 00:12:56,740 --> 00:12:59,743 And then lastly, so does get baz. 259 00:12:59,743 --> 00:13:01,660 Of course, I need to finish that whole thought 260 00:13:01,660 --> 00:13:04,720 and say hey, browser, that's it for my unordered list. 261 00:13:04,720 --> 00:13:09,310 If I now save this and go back to my browser and reload, what I'll get 262 00:13:09,310 --> 00:13:13,310 is that unordered list, complete with bullets given to me by the browser. 263 00:13:13,310 --> 00:13:17,230 And here now, do I have the ability to start formatting a page in a fairly 264 00:13:17,230 --> 00:13:20,320 standard way without having to worry about how do I get the bullets 265 00:13:20,320 --> 00:13:21,490 and where do I put them. 266 00:13:21,490 --> 00:13:23,680 The browser can do that for me. 267 00:13:23,680 --> 00:13:26,650 Now to be fair, it's up to the particular browser 268 00:13:26,650 --> 00:13:28,510 how to render that unordered list. 269 00:13:28,510 --> 00:13:31,360 And different browsers, Chrome or Firefox or Edge 270 00:13:31,360 --> 00:13:34,390 might interpret that ul tag differently. 271 00:13:34,390 --> 00:13:37,120 But for the most part, we humans have agreed universally 272 00:13:37,120 --> 00:13:39,520 what these bullets should look like. 273 00:13:39,520 --> 00:13:42,910 But what if I want this list to actually be ordered and not unordered. 274 00:13:42,910 --> 00:13:46,210 Well instead, I can actually use ol instead of ul, 275 00:13:46,210 --> 00:13:48,730 thereby giving me an ordered list. 276 00:13:48,730 --> 00:13:52,480 Here, I need only change that u to an o and this u to an o 277 00:13:52,480 --> 00:13:55,660 as well, hitting Save, not even adding any numbers myself. 278 00:13:55,660 --> 00:13:59,470 And if now I go back to my page and reload, I automatically, 279 00:13:59,470 --> 00:14:02,843 for free so to speak, get my 1, 2, and 3. 280 00:14:02,843 --> 00:14:05,260 And you can imagine then, the utility of this, not so much 281 00:14:05,260 --> 00:14:08,950 for foos bars and baz's, but rather when these lists get long. 282 00:14:08,950 --> 00:14:11,500 You, as the developer of the web page, no longer need 283 00:14:11,500 --> 00:14:14,380 to worry about keeping track of these numbers, let alone 284 00:14:14,380 --> 00:14:18,040 if some additional element needs to be inserted at the beginning or middle 285 00:14:18,040 --> 00:14:18,880 or end of that list. 286 00:14:18,880 --> 00:14:21,610 You don't have to worry about renumbering that page. 287 00:14:21,610 --> 00:14:24,880 After all, computers can save us time and solve problems for us. 288 00:14:24,880 --> 00:14:29,290 And this is just one with which we're scratching the surface. 289 00:14:29,290 --> 00:14:30,640 Well that then is a list. 290 00:14:30,640 --> 00:14:34,690 Suppose I want to start writing whole chapter or sections or subsections 291 00:14:34,690 --> 00:14:35,410 thereof. 292 00:14:35,410 --> 00:14:37,600 Well, it turns out HTML can help me with that too. 293 00:14:37,600 --> 00:14:41,410 Because up until now, we've seen no mention of font size or font 294 00:14:41,410 --> 00:14:44,080 weight, bold or italics or the like. 295 00:14:44,080 --> 00:14:48,628 And it turns out, we can nonetheless get some of those features via HTML itself. 296 00:14:48,628 --> 00:14:50,420 Within the body of this page, for instance, 297 00:14:50,420 --> 00:14:53,530 suppose I have the first chapter of my book. 298 00:14:53,530 --> 00:14:56,770 Well, I can go ahead and say open bracket, h1, 299 00:14:56,770 --> 00:14:59,620 for heading one, the first topmost level. 300 00:14:59,620 --> 00:15:02,320 And then I'll simply say for now something like 1. 301 00:15:02,320 --> 00:15:07,030 I'll go ahead and close that tag with open bracket, /h1, close bracket. 302 00:15:07,030 --> 00:15:08,920 And then, let's move on to the next. 303 00:15:08,920 --> 00:15:11,500 Suppose that within chapter 1, there is a section, 304 00:15:11,500 --> 00:15:14,380 and so it is diminutive with respect to the first. 305 00:15:14,380 --> 00:15:18,730 And so here, I'm going to say not h1 but h2, thereafter saying a word, 306 00:15:18,730 --> 00:15:22,720 like 2 itself, open bracket, /h2, close bracket. 307 00:15:22,720 --> 00:15:27,890 And if we continue this logic doing h3 followed by 3, and close bracket, h3, 308 00:15:27,890 --> 00:15:34,240 and h4, followed by 4, and close, h4, and then open bracket, h5, F-I-V-E, 309 00:15:34,240 --> 00:15:39,310 followed by, close 5, and then lastly h6, followed by 6, 310 00:15:39,310 --> 00:15:41,830 and then we can complete that thought as well. 311 00:15:41,830 --> 00:15:43,600 And that's as many levels as you get. 312 00:15:43,600 --> 00:15:46,700 Beyond that, you'd better start reorganizing your book. 313 00:15:46,700 --> 00:15:49,750 I'm going to go head now and save this file and open it in my browser. 314 00:15:49,750 --> 00:15:51,580 And what do I get? 315 00:15:51,580 --> 00:15:53,410 Well, I get a whole hierarchy. 316 00:15:53,410 --> 00:15:56,560 At the very top, is one in the biggest boldest text that we see. 317 00:15:56,560 --> 00:15:59,590 Beneath that, is still some text that's bold, but smaller still. 318 00:15:59,590 --> 00:16:02,410 And repeatedly, does the font progressively 319 00:16:02,410 --> 00:16:05,980 get smaller, but still boldface, thereby, drawing attention to it, 320 00:16:05,980 --> 00:16:07,840 just as you might in a book. 321 00:16:07,840 --> 00:16:10,870 So HTML does all of that for free and we can commingle these tags 322 00:16:10,870 --> 00:16:13,930 so that I have paragraphs of text, but above and below them 323 00:16:13,930 --> 00:16:18,340 these section headings, h1 through h6. 324 00:16:18,340 --> 00:16:20,560 Now web pages are so much more than just text, 325 00:16:20,560 --> 00:16:22,340 so much more than headings and lists. 326 00:16:22,340 --> 00:16:24,450 They're ultimately, frankly, about links, 327 00:16:24,450 --> 00:16:26,830 hyperlinks from one page to another. 328 00:16:26,830 --> 00:16:31,400 So how with HTML can we go about linking one page to another. 329 00:16:31,400 --> 00:16:33,060 Well again, with these tags. 330 00:16:33,060 --> 00:16:38,130 Here is a file called link.html and it too has our boilerplate code. 331 00:16:38,130 --> 00:16:41,220 I have a HTML tag, a head, and a title, as well as 332 00:16:41,220 --> 00:16:43,710 a body where our code need now go. 333 00:16:43,710 --> 00:16:46,590 So within that body, let's go ahead and encourage people 334 00:16:46,590 --> 00:16:48,660 to visit Harvard, Harvard's website. 335 00:16:48,660 --> 00:16:56,340 And I'll proceed to say visit, https://www.harvard.edu. 336 00:16:56,340 --> 00:16:59,350 Now my text editor here is being quite friendly. 337 00:16:59,350 --> 00:17:02,550 It's actually underlining it for me as though it's just a link. 338 00:17:02,550 --> 00:17:06,690 But browsers are not so friendly as these text editors that developers use. 339 00:17:06,690 --> 00:17:10,020 And indeed, if I save this file now, go into my browser, 340 00:17:10,020 --> 00:17:14,550 and open this file, what I see is literally what I typed, 341 00:17:14,550 --> 00:17:19,290 visit https://www.harvard.edu. 342 00:17:19,290 --> 00:17:21,480 And yet, it's not underlined here. 343 00:17:21,480 --> 00:17:25,230 And indeed, I can try clicking this all day long, highlighting it too-- 344 00:17:25,230 --> 00:17:27,000 nothing actually happens. 345 00:17:27,000 --> 00:17:29,610 And that's because the browser has taken me literally. 346 00:17:29,610 --> 00:17:37,770 All it saw in my file was visit https://www.harvard.edu. 347 00:17:37,770 --> 00:17:41,800 I never actually told it to link to that page. 348 00:17:41,800 --> 00:17:45,300 So if I go back to my code, I need to be more explicit it seems. 349 00:17:45,300 --> 00:17:47,400 And indeed, there's a tag for just this. 350 00:17:47,400 --> 00:17:51,330 Historically, it's called the anchor tag, or short, just a. 351 00:17:51,330 --> 00:17:52,640 So open bracket, a. 352 00:17:52,640 --> 00:17:57,540 And now I need to tell the browser where to take the user, and albeit 353 00:17:57,540 --> 00:18:04,290 redundantly, let me first type href, for hyper reference, = "that URL". 354 00:18:04,290 --> 00:18:06,600 And now I have the opportunity to tell the browser what 355 00:18:06,600 --> 00:18:08,640 to display to the user. 356 00:18:08,640 --> 00:18:12,810 So rather than say the URL, I'm going to say the more user-friendly, Harvard, 357 00:18:12,810 --> 00:18:17,100 followed by open bracket, /a, close bracket. 358 00:18:17,100 --> 00:18:19,740 And at this point, notice the slight asymmetry. 359 00:18:19,740 --> 00:18:24,420 Whereas, I've opened the tag with an href, I've closed the tag with just a. 360 00:18:24,420 --> 00:18:27,300 Indeed, whenever you have a tag whose behavior 361 00:18:27,300 --> 00:18:30,570 needs to be customized in this way, the behavior of the tag 362 00:18:30,570 --> 00:18:33,210 influenced by an additional input otherwise known 363 00:18:33,210 --> 00:18:36,750 as an attribute of which href is just one. 364 00:18:36,750 --> 00:18:40,980 What you do in closing the tag is only mentioned with that one forward slash, 365 00:18:40,980 --> 00:18:43,770 the name of the tag not the attributes. 366 00:18:43,770 --> 00:18:46,532 Otherwise, you'd be repeating yourself all day long. 367 00:18:46,532 --> 00:18:48,240 And indeed, this is indeed more generally 368 00:18:48,240 --> 00:18:52,350 an attribute, a key word defined in the HTML language that 369 00:18:52,350 --> 00:18:57,270 somehow modifies the behave of the tag inside which you've typed it. 370 00:18:57,270 --> 00:19:00,540 And its structured typically as some keyword, like href, followed 371 00:19:00,540 --> 00:19:04,860 by equals and then a pair of quotes, may be single or double, and inside of that 372 00:19:04,860 --> 00:19:06,130 is some value. 373 00:19:06,130 --> 00:19:09,690 So here, too, we see a theme we've seen in other contexts and languages, 374 00:19:09,690 --> 00:19:13,980 key value pairs, some word associated with some value. 375 00:19:13,980 --> 00:19:16,800 And this one, as we'll soon see, will modify 376 00:19:16,800 --> 00:19:21,000 the behavior of the anchor or a tag to actually create 377 00:19:21,000 --> 00:19:23,140 a link, like the one we see here. 378 00:19:23,140 --> 00:19:25,770 And so, if I go ahead and save this file and go back 379 00:19:25,770 --> 00:19:30,480 to the same page in my browser and click reload, what I now see is that, 380 00:19:30,480 --> 00:19:34,530 visit Harvard, this time underlined and in that familiar blue. 381 00:19:34,530 --> 00:19:37,710 And indeed, if I hover over this link, albeit small, 382 00:19:37,710 --> 00:19:40,320 you'll see a little clue in the bottom left of your screen, 383 00:19:40,320 --> 00:19:44,830 at least if using Chrome, that tells you preemptively where, if you click that, 384 00:19:44,830 --> 00:19:47,220 you'll actually end up. 385 00:19:47,220 --> 00:19:49,860 Of course, there's a bit of a threat here, 386 00:19:49,860 --> 00:19:54,850 I dare say, whereas I might say one thing, I might actually mean another. 387 00:19:54,850 --> 00:19:58,890 And in fact, I could, for instance, were I a rival, go into this code 388 00:19:58,890 --> 00:20:02,940 and instead say, oh, please visit Yale, saving the file thereafter 389 00:20:02,940 --> 00:20:03,960 and reloading. 390 00:20:03,960 --> 00:20:06,930 And here I see now a message to visit Yale. 391 00:20:06,930 --> 00:20:09,420 But of course, if I hover over that, it's 392 00:20:09,420 --> 00:20:13,920 really just an invitation to visit www.Harvard.edu. 393 00:20:13,920 --> 00:20:16,110 Well, this is just playful. 394 00:20:16,110 --> 00:20:18,180 We could actually be more malicious than this. 395 00:20:18,180 --> 00:20:20,878 And indeed, if you flip through some day your spam folder, 396 00:20:20,878 --> 00:20:22,920 odds are you'll find some message you've not ever 397 00:20:22,920 --> 00:20:27,000 seen that actually does have hyperlinks, because these days, emails 398 00:20:27,000 --> 00:20:32,040 can be written by computers or humans in HTML and displayed as web pages 399 00:20:32,040 --> 00:20:33,300 within your browser. 400 00:20:33,300 --> 00:20:35,850 But within your spam folder might very well be what's called 401 00:20:35,850 --> 00:20:38,880 a phishing attack, an attack by someone who 402 00:20:38,880 --> 00:20:41,010 is trying to socially engineer you into clicking 403 00:20:41,010 --> 00:20:45,450 one link that you think goes someplace, but actually go someplace else. 404 00:20:45,450 --> 00:20:47,940 For instance, I might here say, you know what? 405 00:20:47,940 --> 00:20:52,650 Go ahead and visit PayPal.com, thereby inviting you to visit this page. 406 00:20:52,650 --> 00:20:57,180 And if I now reload and look at what's here, I'm invited to visit PayPal.com. 407 00:20:57,180 --> 00:21:03,000 And yet, if I click that, I'm clearly going to end up at www.Harvard.edu. 408 00:21:03,000 --> 00:21:06,120 Well, that isn't necessarily all that malicious, but were 409 00:21:06,120 --> 00:21:11,850 that URL not to be www.Harvard.edu, but some domain name some bad actor 410 00:21:11,850 --> 00:21:15,930 has bought, trying to trick you into giving him or her your username 411 00:21:15,930 --> 00:21:20,280 or password or credit card information or something even more personal, 412 00:21:20,280 --> 00:21:23,300 it truly is not all that hard with these basic primitives. 413 00:21:23,300 --> 00:21:26,300 This is how HTML works and phishing attacks 414 00:21:26,300 --> 00:21:29,060 are derivative of exactly this design. 415 00:21:29,060 --> 00:21:29,927 So what do you do? 416 00:21:29,927 --> 00:21:32,510 Well, you could certainly adopt a habit of hovering over links 417 00:21:32,510 --> 00:21:36,680 and realizing, mm-mm, I'm not actually going to PayPal.com. 418 00:21:36,680 --> 00:21:40,670 Most of us probably won't be so paranoid as to do that regularly. 419 00:21:40,670 --> 00:21:44,010 But with antivirus software and tools that are cloud-based, 420 00:21:44,010 --> 00:21:46,340 can we detect some of this automatically. 421 00:21:46,340 --> 00:21:48,560 And indeed, browsers like Chrome will occasionally, 422 00:21:48,560 --> 00:21:51,860 if they know through experience some website to be bad, 423 00:21:51,860 --> 00:21:53,900 might even warn you within that window. 424 00:21:53,900 --> 00:21:55,760 And corporate networks as well can certainly 425 00:21:55,760 --> 00:21:58,970 do this, albeit at the cost computationally 426 00:21:58,970 --> 00:22:01,490 and in terms of your privacy, of monitoring 427 00:22:01,490 --> 00:22:04,670 all of the emails and traffic going in and out of a network, 428 00:22:04,670 --> 00:22:09,110 thereby being capable of alerting users if they see something dangerous. 429 00:22:09,110 --> 00:22:11,960 But it all boils down to these basic, simple tags. 430 00:22:11,960 --> 00:22:14,030 And indeed, this was just the first example 431 00:22:14,030 --> 00:22:17,690 of using an attribute to modify the behavior of some tag. 432 00:22:17,690 --> 00:22:21,290 It turns out there are others that you can used more for good and not evil. 433 00:22:21,290 --> 00:22:26,120 And indeed, on the HTML tag itself it's not uncommon to specify a language, 434 00:22:26,120 --> 00:22:27,460 for instance, this one here. 435 00:22:27,460 --> 00:22:29,210 Your browser might be in the habit, if you 436 00:22:29,210 --> 00:22:31,700 visit some foreign website, of asking you, would 437 00:22:31,700 --> 00:22:35,420 you like to translate this page from its native language into English. 438 00:22:35,420 --> 00:22:38,750 And one of the clues you can provide to a browser is exactly that. 439 00:22:38,750 --> 00:22:43,190 Hey, browser, here comes a web page written in HTML, specifically 440 00:22:43,190 --> 00:22:47,480 with English text or any other, thereby helping those automatic translation 441 00:22:47,480 --> 00:22:50,810 tools to know what it is they're looking at so 442 00:22:50,810 --> 00:22:56,870 as to translate with higher probability of success it to some other language. 443 00:22:56,870 --> 00:22:59,000 Now, web pages are so much more than just text. 444 00:22:59,000 --> 00:23:01,430 They have images and sounds and videos and more. 445 00:23:01,430 --> 00:23:04,910 So how can we go about embedding media in a web page? 446 00:23:04,910 --> 00:23:07,580 Well, it's again thanks to these tags and attributes. 447 00:23:07,580 --> 00:23:10,310 Here, for instance, is a file called image.html. 448 00:23:10,310 --> 00:23:14,930 I've begun as I always have with DOCTYPE in HTML, head and body, and therein, 449 00:23:14,930 --> 00:23:15,590 a title. 450 00:23:15,590 --> 00:23:19,190 And this time, I've proactively said the language of this web page and any other 451 00:23:19,190 --> 00:23:21,650 is going to be written in my own English. 452 00:23:21,650 --> 00:23:26,930 And now suppose that I have on my hard drive here an image called cat.jpeg 453 00:23:26,930 --> 00:23:29,450 and I want to embed that image in my web page. 454 00:23:29,450 --> 00:23:30,540 How do I do it? 455 00:23:30,540 --> 00:23:33,980 Well, I'm going to go ahead and this time start with an open bracket, img, 456 00:23:33,980 --> 00:23:38,180 which is short for image, and then specify that the source of the image I 457 00:23:38,180 --> 00:23:41,450 want is going to be src, for source, ="cat.jpeg". 458 00:23:41,450 --> 00:23:44,250 459 00:23:44,250 --> 00:23:47,480 Thereafter, I'm going to go ahead and close my tag and save this file, 460 00:23:47,480 --> 00:23:49,850 and go ahead now and open it up. 461 00:23:49,850 --> 00:23:54,440 And we'll see here, exactly that, a cat, a grumpy cat, in fact. 462 00:23:54,440 --> 00:23:56,570 And the browser has done exactly what I've told. 463 00:23:56,570 --> 00:23:59,237 I've said hey, browser, here comes an image, the source of which 464 00:23:59,237 --> 00:24:02,690 should be this file called cat.jpeg, and it does exactly 465 00:24:02,690 --> 00:24:05,720 that, embedding it as the very first thing it sees. 466 00:24:05,720 --> 00:24:09,060 Now, this is not nearly as accessible as it might be in multiple ways. 467 00:24:09,060 --> 00:24:11,120 One, if I'm on a slow internet connection, 468 00:24:11,120 --> 00:24:16,340 the human might not see this image all too soon as his or her phone or browser 469 00:24:16,340 --> 00:24:20,090 downloads it slowly, and it'd be nice to have some place holder text. 470 00:24:20,090 --> 00:24:21,860 Moreover for accessibility's sake, if I'd 471 00:24:21,860 --> 00:24:25,550 like to ensure that users who are blind and require screen readers 472 00:24:25,550 --> 00:24:28,580 can actually have this image recited or described to them, 473 00:24:28,580 --> 00:24:34,132 have an actual hint in the code with which to describe it verbally. 474 00:24:34,132 --> 00:24:35,090 So how might I do this? 475 00:24:35,090 --> 00:24:38,960 Well, in HTML you can have multiple attributes, not just zero or one, 476 00:24:38,960 --> 00:24:40,010 but a second one too. 477 00:24:40,010 --> 00:24:43,700 For instance, alt, the alternative text for this image 478 00:24:43,700 --> 00:24:47,150 shall be, for instance, one grumpy cat. 479 00:24:47,150 --> 00:24:49,910 And if now I were to reload this page on a slow connection, 480 00:24:49,910 --> 00:24:55,820 would I see that text, or if using a screen reader, have it recited to me. 481 00:24:55,820 --> 00:24:58,160 Now, how about data with even more structure-- something 482 00:24:58,160 --> 00:25:01,310 tabular with rows and columns and numbers and names? 483 00:25:01,310 --> 00:25:04,010 Well, here too, HTML provides us a mechanism. 484 00:25:04,010 --> 00:25:06,440 And in fact, this one, I'll cook in advance. 485 00:25:06,440 --> 00:25:10,130 In this file, do we have table.html, some of our familiar structure, 486 00:25:10,130 --> 00:25:11,900 but also some new tags. 487 00:25:11,900 --> 00:25:15,170 Indeed, in the body of this page, do we have a new one called table. 488 00:25:15,170 --> 00:25:17,480 Open bracket, table, close bracket, which just says, 489 00:25:17,480 --> 00:25:20,690 hey, browser, here come some tabular info. 490 00:25:20,690 --> 00:25:24,840 And below that, do we have a less obviously named tr tag, that says, 491 00:25:24,840 --> 00:25:27,770 hey browser, here comes a table row. 492 00:25:27,770 --> 00:25:30,830 Within that table row tag, which is only later closed, 493 00:25:30,830 --> 00:25:35,320 do we have three td tags, it would seem, 1, 2, and 3. 494 00:25:35,320 --> 00:25:37,820 Well, td stands for table data and denotes 495 00:25:37,820 --> 00:25:42,500 here comes a column or cell, the actual data in this position. 496 00:25:42,500 --> 00:25:45,480 And the close tag, of course, means that's it for that data. 497 00:25:45,480 --> 00:25:49,460 1, 2, and 3 followed by 4, 5, and 6, 7, 8, 9, each of them 498 00:25:49,460 --> 00:25:52,100 in their own table rows. 499 00:25:52,100 --> 00:25:55,460 What sort of effect might that have in the end? 500 00:25:55,460 --> 00:25:59,600 1, 2, 3 in one row, 4, 5, 6, in another, 7, 8, 9. 501 00:25:59,600 --> 00:26:05,000 And if we scroll further, it turns out, an asterisk, a zero, and hash. 502 00:26:05,000 --> 00:26:07,820 What have I laid out in tabular form? 503 00:26:07,820 --> 00:26:11,390 Well, you might not see it so often if you're using your contacts, 504 00:26:11,390 --> 00:26:14,810 but on a typical phone, this is exactly how those numbers and symbols are 505 00:26:14,810 --> 00:26:17,580 laid out, really in rows and columns. 506 00:26:17,580 --> 00:26:19,790 And if I go now and open up this file in my browser, 507 00:26:19,790 --> 00:26:24,710 will I see that, albeit, fairly small, laid out top to bottom, left to right. 508 00:26:24,710 --> 00:26:27,890 Indeed, here in table.html, once viewed with a browser, 509 00:26:27,890 --> 00:26:33,410 do I see my 1, 2, 3, 4, 5, 6, 7, 8, 9, and asterisk, zero, and hash. 510 00:26:33,410 --> 00:26:37,070 So you can certainly imagine longer words or phrases, dollar amounts, 511 00:26:37,070 --> 00:26:40,160 or any data being laid out in this way, even taking up 512 00:26:40,160 --> 00:26:44,420 the entire width of the screen, otherwise known as the viewport. 513 00:26:44,420 --> 00:26:46,820 Now, to add one last piece of jargon here, 514 00:26:46,820 --> 00:26:49,340 even though these tags open and close are each 515 00:26:49,340 --> 00:26:53,090 called just that, collectively, what we have on the screen here 516 00:26:53,090 --> 00:26:55,370 are any number of HTML elements. 517 00:26:55,370 --> 00:26:58,100 An HTML elements is a higher-level concept, 518 00:26:58,100 --> 00:27:00,530 such as you might see in a data structure 519 00:27:00,530 --> 00:27:04,190 in memory that represents everything between this start tag 520 00:27:04,190 --> 00:27:06,830 and end tag and everything within. 521 00:27:06,830 --> 00:27:10,220 In fact, what we keep looking at here in HTML 522 00:27:10,220 --> 00:27:12,740 form is really a tree of some sort. 523 00:27:12,740 --> 00:27:15,360 In fact, it's no accident that I've been deliberately 524 00:27:15,360 --> 00:27:20,210 indenting every level of my code here so that the browser knows 525 00:27:20,210 --> 00:27:21,980 what's inside of something else. 526 00:27:21,980 --> 00:27:23,900 Now, to be fair, I could delete almost all 527 00:27:23,900 --> 00:27:26,990 of the whitespace, all of the tabs and spacebar characters 528 00:27:26,990 --> 00:27:29,990 that I've typed thus far, because again, the browser doesn't care. 529 00:27:29,990 --> 00:27:32,570 This is mostly for your benefit and mine, 530 00:27:32,570 --> 00:27:35,180 so as to read our own code top to bottom, left to right, 531 00:27:35,180 --> 00:27:36,800 and see it quite quickly. 532 00:27:36,800 --> 00:27:42,420 But it turns out that the computer when reading this code top to bottom, 533 00:27:42,420 --> 00:27:46,040 left to right, actually loads it into its own memory or RAM 534 00:27:46,040 --> 00:27:47,660 in a tree-like form. 535 00:27:47,660 --> 00:27:50,120 After all, at the very top of this file is 536 00:27:50,120 --> 00:27:55,640 this one very important tag-- hey, browser, here comes a web page in HTML. 537 00:27:55,640 --> 00:28:01,290 And then nested inside of that, slightly indented, is both head and the body, 538 00:28:01,290 --> 00:28:07,170 much like in a tree structure, might a node have one or two children. 539 00:28:07,170 --> 00:28:11,720 Meanwhile, within body, do you have another child table, inside of which 540 00:28:11,720 --> 00:28:14,990 is one, two, three, four table rows-- 541 00:28:14,990 --> 00:28:16,760 four total children. 542 00:28:16,760 --> 00:28:20,780 And within just one of those children, say this table row, are three children, 543 00:28:20,780 --> 00:28:21,680 as well. 544 00:28:21,680 --> 00:28:24,500 So akin to a real-world family tree, do we 545 00:28:24,500 --> 00:28:27,620 have a number of root elements, so to speak, each of which 546 00:28:27,620 --> 00:28:33,050 have children of some number, at below which might be grandchildren and more. 547 00:28:33,050 --> 00:28:34,180 So how might we see this? 548 00:28:34,180 --> 00:28:38,240 Well, this is generally known as a DOM, document object model. 549 00:28:38,240 --> 00:28:41,690 And HTML would have us think of it as just this. 550 00:28:41,690 --> 00:28:45,230 This then is the simplest of web pages with which we began, whereby, 551 00:28:45,230 --> 00:28:50,273 we had hello, title, hello, body, and plus this time, lang=english. 552 00:28:50,273 --> 00:28:52,940 But on the right, here, do we have an artist's rendition of what 553 00:28:52,940 --> 00:28:57,390 a computer would do when that browser reads this HTML file top to bottom, 554 00:28:57,390 --> 00:28:57,980 left to right. 555 00:28:57,980 --> 00:28:59,688 Well, at the very top of this tree, we'll 556 00:28:59,688 --> 00:29:03,800 just call it the generic document, some sort of reference to everything inside. 557 00:29:03,800 --> 00:29:05,600 But the one in one only children that we've 558 00:29:05,600 --> 00:29:08,690 seen thus far beneath that is that HTML element, which 559 00:29:08,690 --> 00:29:12,650 itself has two children-- head on the left and body on the right. 560 00:29:12,650 --> 00:29:16,700 Meanwhile, that had element, indented inside of that, was title. 561 00:29:16,700 --> 00:29:18,740 And so, we see title as its sole child. 562 00:29:18,740 --> 00:29:23,660 And inside of that was not another tag or element, but rather just text, 563 00:29:23,660 --> 00:29:25,940 a text node in this tree, and that's why I've 564 00:29:25,940 --> 00:29:28,585 drawn it in this very different shape, to make clear 565 00:29:28,585 --> 00:29:31,460 that it's not an element that has some notion of starting and ending, 566 00:29:31,460 --> 00:29:35,720 but rather it's just the value, effectively, of that particular node. 567 00:29:35,720 --> 00:29:39,080 And down here in the body did we only have a short phrase, hello, body. 568 00:29:39,080 --> 00:29:42,650 And it too was a leaf, so to speak, of this tree. 569 00:29:42,650 --> 00:29:45,770 And here, then we see the intersection of the human and computer 570 00:29:45,770 --> 00:29:48,590 in our discussion itself of data structures. 571 00:29:48,590 --> 00:29:52,880 Here is the computer using a fundamental core concept of CS, 572 00:29:52,880 --> 00:29:55,460 while allowing the human, or really the computer, 573 00:29:55,460 --> 00:29:57,770 to think at a higher level of abstraction. 574 00:29:57,770 --> 00:30:00,350 It does not matter how this is represented in memory, 575 00:30:00,350 --> 00:30:03,780 but that it is represented and can be. 576 00:30:03,780 --> 00:30:09,320 And so here, via this indentation, do we see a hint at what the computer is 577 00:30:09,320 --> 00:30:11,480 ultimately doing. 578 00:30:11,480 --> 00:30:13,730 Now finally, what about user input? 579 00:30:13,730 --> 00:30:16,700 Suppose that you want your web page to interact with the user 580 00:30:16,700 --> 00:30:21,560 and actually ask them for some textual input, like a web form might. 581 00:30:21,560 --> 00:30:25,460 Well consider this file here, search.html, which I've, again, begun 582 00:30:25,460 --> 00:30:28,790 as always, and I'm now ready for the body of this page. 583 00:30:28,790 --> 00:30:32,480 Well, it turns out that HTML also indeed supports forms, 584 00:30:32,480 --> 00:30:36,020 such as any of those text boxes or check boxes or dropdown menus 585 00:30:36,020 --> 00:30:38,550 that you might see on a typical web page. 586 00:30:38,550 --> 00:30:42,800 And this tag for this is quite simply open bracket, form, close bracket. 587 00:30:42,800 --> 00:30:45,770 And I'll go ahead now and preemptively finish that thought. 588 00:30:45,770 --> 00:30:47,750 And it turns out that within form tags can 589 00:30:47,750 --> 00:30:52,490 you have so-called inputs, each of which can be of some disparate type. 590 00:30:52,490 --> 00:30:57,350 For instance, here I'll go ahead and say, inputs, the type of which 591 00:30:57,350 --> 00:30:58,670 shall be text. 592 00:30:58,670 --> 00:31:03,710 And then hereafter, I'll go ahead and have another input, input type=submit, 593 00:31:03,710 --> 00:31:07,970 thereby giving me, per HTML's own documentation, inputs, 594 00:31:07,970 --> 00:31:12,470 that is UI mechanisms, via which the user can provide textual input and then 595 00:31:12,470 --> 00:31:14,510 submit it to some server. 596 00:31:14,510 --> 00:31:17,270 Let's go ahead and save this file and open it in my browser. 597 00:31:17,270 --> 00:31:20,570 And what I see now is quite simply this, a text box 598 00:31:20,570 --> 00:31:24,050 that just seems to be waiting for input, followed by a Submit button that 599 00:31:24,050 --> 00:31:26,057 will submit it to some server. 600 00:31:26,057 --> 00:31:28,640 Now, we can clean this up a little bit, because I don't really 601 00:31:28,640 --> 00:31:30,050 know what I'm looking at. 602 00:31:30,050 --> 00:31:34,850 And so, let me go back to my code and put a place holder in this text box, 603 00:31:34,850 --> 00:31:36,830 literally adding another attribute that says, 604 00:31:36,830 --> 00:31:40,848 for instance, query, whatever it is the user wants to search for. 605 00:31:40,848 --> 00:31:42,890 Meanwhile, let me change the value of that button 606 00:31:42,890 --> 00:31:47,570 to actually say not the default submit, but for instance, more clearly, search. 607 00:31:47,570 --> 00:31:51,470 And now if I reload this page, it's a bit more self-explanatory to the user. 608 00:31:51,470 --> 00:31:53,790 It's not just an empty box, but one that says query. 609 00:31:53,790 --> 00:31:56,270 And that button explicitly says search. 610 00:31:56,270 --> 00:31:59,060 And if I begin now to type in this box, query 611 00:31:59,060 --> 00:32:02,600 will go away if I want to search for, say, cats. 612 00:32:02,600 --> 00:32:07,170 Of course, if I click search now, what's going to become of this input? 613 00:32:07,170 --> 00:32:11,750 Well, nothing, because I have no back-end server, let alone database. 614 00:32:11,750 --> 00:32:13,130 But you know what? 615 00:32:13,130 --> 00:32:14,210 I know who does-- 616 00:32:14,210 --> 00:32:15,050 Google. 617 00:32:15,050 --> 00:32:17,600 And Google is very good at searching the web. 618 00:32:17,600 --> 00:32:21,710 So let's see if I can't glean via http how Google itself works 619 00:32:21,710 --> 00:32:24,500 and see if I could make my own front-end, 620 00:32:24,500 --> 00:32:28,100 that is, web page for Google, but defer all of the logic 621 00:32:28,100 --> 00:32:31,420 to Googlers own back-end. 622 00:32:31,420 --> 00:32:35,080 Well, let's see exactly what happens when I search Google for cats. 623 00:32:35,080 --> 00:32:36,130 Here we go, Enter. 624 00:32:36,130 --> 00:32:41,470 And voila, I'm whisked away to any number of cats-- more than 4 billion, 625 00:32:41,470 --> 00:32:42,190 indeed. 626 00:32:42,190 --> 00:32:46,750 But let's focus not so much on the actual results on how we got them. 627 00:32:46,750 --> 00:32:49,720 Indeed, if I focus on the URL, up here, you'll 628 00:32:49,720 --> 00:32:57,730 see that this URL itself begins with the familiar https://www.google.com/search, 629 00:32:57,730 --> 00:33:00,520 a program of sorts on Google's servers that 630 00:33:00,520 --> 00:33:02,530 does literally that, search the web. 631 00:33:02,530 --> 00:33:04,270 Then, there's this question mark followed 632 00:33:04,270 --> 00:33:08,210 by a number of other words and key phrases and a number of equal signs. 633 00:33:08,210 --> 00:33:10,570 And if I keep looking, ampersands. 634 00:33:10,570 --> 00:33:14,290 It turns out, that http specifies not only how web browsers 635 00:33:14,290 --> 00:33:17,750 and servers communicate within that so-called virtual envelope, 636 00:33:17,750 --> 00:33:23,050 but also how the browser should format the user's input when submitting it 637 00:33:23,050 --> 00:33:24,190 to some server. 638 00:33:24,190 --> 00:33:25,990 And in fact, there's so much up here that I 639 00:33:25,990 --> 00:33:27,365 don't understand at first glance. 640 00:33:27,365 --> 00:33:29,950 I'm going to just start deleting things from that URL 641 00:33:29,950 --> 00:33:31,690 that just seem unfamiliar. 642 00:33:31,690 --> 00:33:35,350 But familiar, of course, after I delete just a few characters is q 643 00:33:35,350 --> 00:33:38,992 equals cats, which would seem to relate to whatever I typed in. 644 00:33:38,992 --> 00:33:40,450 In fact, let me go ahead and erase. 645 00:33:40,450 --> 00:33:42,880 Everything after that is irrelevant. 646 00:33:42,880 --> 00:33:45,790 Hit Enter again and search much more simply. 647 00:33:45,790 --> 00:33:48,160 And I still get those cats. 648 00:33:48,160 --> 00:33:49,760 Well, what does that mean? 649 00:33:49,760 --> 00:33:53,110 Well, it seems that http prescribes that in order 650 00:33:53,110 --> 00:33:58,120 to provide input from browser to server, you literally visit some URL. 651 00:33:58,120 --> 00:34:01,690 You append to that URL a question mark, thereby saying, hey, server, 652 00:34:01,690 --> 00:34:02,980 here comes some inputs. 653 00:34:02,980 --> 00:34:05,920 And those inputs have names, for instance, q, 654 00:34:05,920 --> 00:34:09,969 followed by an equal sign and then whatever the human typed in. 655 00:34:09,969 --> 00:34:13,870 And if the human had typed into multiple boxes or maybe checked some checkboxes 656 00:34:13,870 --> 00:34:19,570 or selected for menus, well those additional inputs or http parameters 657 00:34:19,570 --> 00:34:23,739 would all appear in that URL separated by ampersands, each of them 658 00:34:23,739 --> 00:34:27,489 a key value pair, separated with equals. 659 00:34:27,489 --> 00:34:30,250 Well that's all I've searched for here and you know what? 660 00:34:30,250 --> 00:34:32,679 I bet I could mimic this behavior. 661 00:34:32,679 --> 00:34:36,400 I know the URL to which I want to send the user's input, 662 00:34:36,400 --> 00:34:39,730 and I can defer to the browser to format that input. 663 00:34:39,730 --> 00:34:44,840 It remains, then, only to somehow wire this logic into my web page. 664 00:34:44,840 --> 00:34:49,120 So let's go back to that web page and finish our form's thought. 665 00:34:49,120 --> 00:34:52,750 The action I would like this form to take, so to speak, 666 00:34:52,750 --> 00:35:00,850 is to submit specifically to https://www.google.com/search, 667 00:35:00,850 --> 00:35:03,610 the URL of that program running on Google servers that 668 00:35:03,610 --> 00:35:05,590 does quite simply search. 669 00:35:05,590 --> 00:35:08,230 I don't need to type a question mark q or an equal sign, 670 00:35:08,230 --> 00:35:10,210 and I certainly don't want to type cats. 671 00:35:10,210 --> 00:35:11,950 That should come from the user. 672 00:35:11,950 --> 00:35:15,420 But I do need to give the users' input a name, which I'll 673 00:35:15,420 --> 00:35:18,700 do here with now a third attribute. 674 00:35:18,700 --> 00:35:20,140 The name equaling q. 675 00:35:20,140 --> 00:35:20,770 Why q? 676 00:35:20,770 --> 00:35:22,480 Well, that's clearly what Google decided, 677 00:35:22,480 --> 00:35:25,870 and it turns out some 20 years ago, so did Larry and Sergey 678 00:35:25,870 --> 00:35:30,400 at Google, in its infancy, decide that the name of their query parameter 679 00:35:30,400 --> 00:35:32,140 would simply be q. 680 00:35:32,140 --> 00:35:34,570 My other input doesn't need a name, per se, 681 00:35:34,570 --> 00:35:37,720 because it's just a button that needs to trigger that submission. 682 00:35:37,720 --> 00:35:43,300 And so now, if I save this file and go back to my own browser and reload, 683 00:35:43,300 --> 00:35:47,150 I still see the same form here, a query with a button. 684 00:35:47,150 --> 00:35:50,440 But if I now go ahead and, for instance, search for cats 685 00:35:50,440 --> 00:35:55,510 and hit Search, indeed the URL to which I whisk my users away is just that, 686 00:35:55,510 --> 00:35:56,980 q equals cats. 687 00:35:56,980 --> 00:35:59,840 Now, to be clear, cats are not hard-coded in this page. 688 00:35:59,840 --> 00:36:02,890 If I go back to my own and this time search for, say, dogs, 689 00:36:02,890 --> 00:36:05,710 I can go ahead and search for those too. 690 00:36:05,710 --> 00:36:09,340 My browser will presume to append dogs after that equal sign, 691 00:36:09,340 --> 00:36:13,397 thereby allowing me to search dynamically for anything I want. 692 00:36:13,397 --> 00:36:15,730 Now there's a few other features here that relate really 693 00:36:15,730 --> 00:36:18,190 to you ux, user experience. 694 00:36:18,190 --> 00:36:21,160 In this form, now that I've searched for a couple of things, 695 00:36:21,160 --> 00:36:25,060 you'll notice that the browser wants to complete that thought for me, using 696 00:36:25,060 --> 00:36:28,660 what's generally known as auto-complete, a browser's specific feature, 697 00:36:28,660 --> 00:36:31,810 sometimes, that remembers the words you've typed into some box 698 00:36:31,810 --> 00:36:34,715 and then reminds you of such just to save you keystrokes. 699 00:36:34,715 --> 00:36:36,340 Now, you might not want this to happen. 700 00:36:36,340 --> 00:36:39,310 You, the web page, might want to implement this sort of feature 701 00:36:39,310 --> 00:36:40,120 yourself. 702 00:36:40,120 --> 00:36:43,870 And so we can actually turn off that notion of auto-complete. 703 00:36:43,870 --> 00:36:48,040 Moreover, if I visit this web page, the very first thing I have to do, 704 00:36:48,040 --> 00:36:50,590 it would seem, is actually click in that box. 705 00:36:50,590 --> 00:36:55,040 I can't actually type until I have focused on that input. 706 00:36:55,040 --> 00:36:58,300 And this, too, is not all that good for user experience. 707 00:36:58,300 --> 00:37:01,900 Why make me, if I already come to your website to search, 708 00:37:01,900 --> 00:37:04,750 the first thing I need to do is actually click in that box? 709 00:37:04,750 --> 00:37:08,230 Why not click on it for me yourself with code? 710 00:37:08,230 --> 00:37:09,630 And we can do this with HTML. 711 00:37:09,630 --> 00:37:12,670 Indeed, if I go back to this input here, and I say, you know what? 712 00:37:12,670 --> 00:37:17,140 Go ahead and turn auto-complete, "off" as well as 713 00:37:17,140 --> 00:37:20,410 auto-focus on that particular box. 714 00:37:20,410 --> 00:37:22,570 Now here we see already an anomaly. 715 00:37:22,570 --> 00:37:26,290 In HTML5, attributes don't have to have values, per se. 716 00:37:26,290 --> 00:37:30,160 They need not be followed by an equal sign or double or single quotes, 717 00:37:30,160 --> 00:37:32,770 you can specify the attribute's name. 718 00:37:32,770 --> 00:37:36,850 And if its present, it means give focus automatically to this text input. 719 00:37:36,850 --> 00:37:39,670 And if it's not present, just don't do that feature. 720 00:37:39,670 --> 00:37:43,360 Now indeed, if I go back to my browser and reload, what 721 00:37:43,360 --> 00:37:46,270 you see now is even with my cursor away from that box, 722 00:37:46,270 --> 00:37:48,070 does it already have focus. 723 00:37:48,070 --> 00:37:50,470 And on Mac OS, here, does it tend to highlight in blue. 724 00:37:50,470 --> 00:37:53,428 But other operating systems and browsers might do it a bit differently. 725 00:37:53,428 --> 00:37:57,760 But the key is I can search for immediately without clicking anything 726 00:37:57,760 --> 00:38:02,560 I want, without now, this time, even being prompted for my last input cats 727 00:38:02,560 --> 00:38:04,470 or, say, dogs. 728 00:38:04,470 --> 00:38:07,150 Now, thus far, our web pages have been fairly simplistic, 729 00:38:07,150 --> 00:38:09,430 but there's so many more tags we can use. 730 00:38:09,430 --> 00:38:11,960 But those tags all follow a similar format. 731 00:38:11,960 --> 00:38:15,010 A tag's name followed by zero or more attributes. 732 00:38:15,010 --> 00:38:18,490 But some of those tags have more meaning than others. 733 00:38:18,490 --> 00:38:22,690 And can we begin now to stylize our page further 734 00:38:22,690 --> 00:38:24,580 through fonts and through colors and more. 735 00:38:24,580 --> 00:38:27,880 Consider, for instance, this home page here for John Harvard. 736 00:38:27,880 --> 00:38:30,400 Welcome to my home page, copyright John Harvard. 737 00:38:30,400 --> 00:38:34,060 How might we go about structuring this page with HTML? 738 00:38:34,060 --> 00:38:37,600 Well consider this file here, which I've written already. 739 00:38:37,600 --> 00:38:41,440 Here in this file to I have really three paragraphs, one on top of the other. 740 00:38:41,440 --> 00:38:43,810 And within those paragraphs, do I have text. 741 00:38:43,810 --> 00:38:47,590 Now, one anomaly that we've not yet seen is that copyright. 742 00:38:47,590 --> 00:38:52,190 I'm not sure where on my keyboard to type a c within that circle, 743 00:38:52,190 --> 00:38:55,120 but it's indeed a symbol that computers and printers can express. 744 00:38:55,120 --> 00:38:58,850 And within HTML, indeed, can you express those same characters, 745 00:38:58,850 --> 00:39:02,050 even if they're not readily accessible on your own keyboard. 746 00:39:02,050 --> 00:39:07,870 This thing here, ampersand#169; is what's known as an HTML entity. 747 00:39:07,870 --> 00:39:12,760 That ampersand says, hey, browser, here comes an entity, number 169. 748 00:39:12,760 --> 00:39:15,880 And that semicolon means that's it for that. 749 00:39:15,880 --> 00:39:18,550 Now, within the computer's memory is a list, essentially, 750 00:39:18,550 --> 00:39:22,720 of all of these codes that correspond to the symbol, the punctuation, 751 00:39:22,720 --> 00:39:24,130 that you want to display. 752 00:39:24,130 --> 00:39:29,050 And so here, do we get in the actual browser the graphical version thereof. 753 00:39:29,050 --> 00:39:32,230 But these aren't, strictly speaking, paragraphs, per se. 754 00:39:32,230 --> 00:39:35,120 Indeed, these are really just different divisions of the page. 755 00:39:35,120 --> 00:39:38,080 And so, there are other tags in HTML, like exactly 756 00:39:38,080 --> 00:39:41,650 that, div, whereby you can fairly generically say, 757 00:39:41,650 --> 00:39:46,630 here comes a division of my page, really an invisible rectangle, a swath, 758 00:39:46,630 --> 00:39:50,950 from left to right across the screen that represents this information, 759 00:39:50,950 --> 00:39:52,720 then this, then this. 760 00:39:52,720 --> 00:39:56,080 Of course, that doesn't really have much meaning unto itself either. 761 00:39:56,080 --> 00:39:58,810 And so in HTML5, the latest version, are there more 762 00:39:58,810 --> 00:40:01,120 semantically meaningful tags. 763 00:40:01,120 --> 00:40:04,450 For instance, this feels like, perhaps, the header of my page. 764 00:40:04,450 --> 00:40:07,450 And perhaps this is the main aspect thereof. 765 00:40:07,450 --> 00:40:09,580 Meanwhile, this copyright might be relegated 766 00:40:09,580 --> 00:40:11,620 to the simple idea of a footer. 767 00:40:11,620 --> 00:40:15,280 And so HTML also has tags like those there. 768 00:40:15,280 --> 00:40:19,660 I can actually call this not the head, but the proper header of my page, 769 00:40:19,660 --> 00:40:21,190 and I'll close that tag there. 770 00:40:21,190 --> 00:40:24,850 Here might be the main part of my page, and so I'll call it just that. 771 00:40:24,850 --> 00:40:30,040 And then down here, will be the footer of my page, which I'll specify as such. 772 00:40:30,040 --> 00:40:33,790 And now I further refine the semantics of my web page, which does not 773 00:40:33,790 --> 00:40:37,900 change at all the layout, but it does help the browser perhaps, 774 00:40:37,900 --> 00:40:41,860 both now and in the future, better understand what it is it's looking at. 775 00:40:41,860 --> 00:40:44,800 And indeed, for SEO, search engine optimization, 776 00:40:44,800 --> 00:40:47,920 the more hints you can provide to the Google's and Bings of the world, 777 00:40:47,920 --> 00:40:53,120 the more they can know what it is they're searching and how to index it. 778 00:40:53,120 --> 00:40:55,960 Moreover, they know perhaps what to display in search results 779 00:40:55,960 --> 00:40:59,230 if the main part of the page is this and everything else is just 780 00:40:59,230 --> 00:41:00,550 header and footer. 781 00:41:00,550 --> 00:41:03,550 So the more hints you can provide to the browser, and in turn web, 782 00:41:03,550 --> 00:41:06,370 is probably a good thing for your own website. 783 00:41:06,370 --> 00:41:10,090 But of course, if I reload this same HTML now 784 00:41:10,090 --> 00:41:12,580 it's going to look exactly the same. 785 00:41:12,580 --> 00:41:16,195 But with these tags, as well as with div and with p, 786 00:41:16,195 --> 00:41:20,230 I can actually begin now to stylize my website more. 787 00:41:20,230 --> 00:41:24,910 But I can't rely on HTML alone, at least not with HTML5. 788 00:41:24,910 --> 00:41:26,890 I need a second new language. 789 00:41:26,890 --> 00:41:29,710 And indeed HTML works wonderfully well in conjunction 790 00:41:29,710 --> 00:41:34,150 with a second language called CSS, cascading style sheets, which 791 00:41:34,150 --> 00:41:36,700 allows you to take a website that last mile 792 00:41:36,700 --> 00:41:40,820 and get the aesthetics, the colors, the fonts, and the positioning, 793 00:41:40,820 --> 00:41:44,560 just right, leaving less to the browser to just infer. 794 00:41:44,560 --> 00:41:49,300 And with CSS though, we need to somehow remain within the confines of our HTML, 795 00:41:49,300 --> 00:41:50,690 at least for now. 796 00:41:50,690 --> 00:41:53,770 And so how might I provide yet another language? 797 00:41:53,770 --> 00:41:57,610 Well, these attributes of HTML provide one solution. 798 00:41:57,610 --> 00:42:01,630 For instance, suppose I want to specify that the style of my header 799 00:42:01,630 --> 00:42:03,790 shall have a very large font size. 800 00:42:03,790 --> 00:42:07,240 I can indeed say font-size:large. 801 00:42:07,240 --> 00:42:09,370 And here in the main part of my page, well, 802 00:42:09,370 --> 00:42:13,300 I'm fine with the style thereof of being font-size:medium. 803 00:42:13,300 --> 00:42:15,460 Meanwhile, the footer is sort of my last thought, 804 00:42:15,460 --> 00:42:20,898 and so I'll style it ever so smaller with a font-size:small. 805 00:42:20,898 --> 00:42:22,690 Now what is this then that I've just typed? 806 00:42:22,690 --> 00:42:27,970 Well, this is CSS within the confines of my HTML attributes values 807 00:42:27,970 --> 00:42:32,670 surrounded by quotes have I specified CSS syntax, which 808 00:42:32,670 --> 00:42:33,840 follows this pattern-- 809 00:42:33,840 --> 00:42:37,320 some keyword, like font size, followed by colon, 810 00:42:37,320 --> 00:42:40,790 followed by that so-called property's value. 811 00:42:40,790 --> 00:42:44,040 And indeed here, the property I'm using throughout this page now is font size, 812 00:42:44,040 --> 00:42:48,360 but with three different values-- large, medium, and small, pre-determined words 813 00:42:48,360 --> 00:42:50,250 that every browser should just know, even 814 00:42:50,250 --> 00:42:53,430 though they're more relative than they are fixed. 815 00:42:53,430 --> 00:42:56,490 And so let's go now and save this file and reload the page 816 00:42:56,490 --> 00:43:00,900 and now we'll have the same content, but stylized differently still. 817 00:43:00,900 --> 00:43:02,850 Indeed, when I reload the page now, I still 818 00:43:02,850 --> 00:43:07,140 have three lines of text, three paragraphs, or divs, or now sections, 819 00:43:07,140 --> 00:43:07,770 if you will. 820 00:43:07,770 --> 00:43:11,280 But John Harvard's text is indeed a bit larger and my welcome to home 821 00:43:11,280 --> 00:43:12,750 page is just medium. 822 00:43:12,750 --> 00:43:15,660 Meanwhile, copyright John Harvard is ever so smaller, 823 00:43:15,660 --> 00:43:20,130 because I've now applied styles to each of these sections. 824 00:43:20,130 --> 00:43:23,040 But it'd be nice if this, after all, is John Harvard's home 825 00:43:23,040 --> 00:43:25,410 page, let's greet everyone right in the middle, 826 00:43:25,410 --> 00:43:27,450 and align that text in the center. 827 00:43:27,450 --> 00:43:28,870 Well, how might we do that? 828 00:43:28,870 --> 00:43:33,030 Well, it turns out that with CSS, you can specify one or more properties 829 00:43:33,030 --> 00:43:36,540 within each of these pairs of quotes, simply separating them 830 00:43:36,540 --> 00:43:40,380 with a semicolon, thereby finishing the first thought, and starting another. 831 00:43:40,380 --> 00:43:44,490 And so I might now say something like text-align:center. 832 00:43:44,490 --> 00:43:48,060 And then down here, do the same-- text-align:center. 833 00:43:48,060 --> 00:43:50,430 And then lastly, here the same-- 834 00:43:50,430 --> 00:43:52,920 text-align:center. 835 00:43:52,920 --> 00:43:56,430 If I now save this file, reload the page, what I see now 836 00:43:56,430 --> 00:43:59,910 is exactly that same text, but now nicely centered. 837 00:43:59,910 --> 00:44:04,500 And so now do I have, through this combination of HTML and CSS, 838 00:44:04,500 --> 00:44:08,490 a wonderful marriage of structure and style, each of them 839 00:44:08,490 --> 00:44:11,280 focused on really particular tasks. 840 00:44:11,280 --> 00:44:12,990 But there's some redundancy. 841 00:44:12,990 --> 00:44:16,380 And indeed, any time you find yourself doing the same thing again and again, 842 00:44:16,380 --> 00:44:19,620 like text-align:center, text-align:center, text-align:center, 843 00:44:19,620 --> 00:44:21,960 you're probably doing something wrong. 844 00:44:21,960 --> 00:44:25,950 Surely, there's an opportunity here to factor that out and somehow say 845 00:44:25,950 --> 00:44:28,470 that thought just once and apply it throughout. 846 00:44:28,470 --> 00:44:33,000 And indeed, here's one hint of what we mean by cascading style sheets. 847 00:44:33,000 --> 00:44:36,960 That first c implies that you can have one property 848 00:44:36,960 --> 00:44:41,070 sort of affect multiple things in your tree, that so-called DOM. 849 00:44:41,070 --> 00:44:43,470 After all, with header and main and footer, 850 00:44:43,470 --> 00:44:46,710 notice that they all share a common parent, so to speak, 851 00:44:46,710 --> 00:44:48,150 in the family-tree sense. 852 00:44:48,150 --> 00:44:49,890 That parent here his body. 853 00:44:49,890 --> 00:44:54,210 And if I want everything centered but disparate font sizes 854 00:44:54,210 --> 00:44:56,310 for each of those sections, you know what? 855 00:44:56,310 --> 00:45:01,350 I'm going to go ahead and just remove each of those text-aligned centers 856 00:45:01,350 --> 00:45:06,420 and move all three of those to just one on the parent, saying, hey, browser, 857 00:45:06,420 --> 00:45:11,280 the style of its body should instead be text-align:center. 858 00:45:11,280 --> 00:45:14,010 If I now save this page and reload, voila-- 859 00:45:14,010 --> 00:45:17,200 it actually still looks the same because the effect is the same, 860 00:45:17,200 --> 00:45:18,960 but now, I've been more succinct. 861 00:45:18,960 --> 00:45:21,360 I've typed fewer keystrokes, thereby saving time, 862 00:45:21,360 --> 00:45:25,110 and I've also ensured now that design-wise of my code, 863 00:45:25,110 --> 00:45:28,860 if I need ever change that value, say to left or to right, 864 00:45:28,860 --> 00:45:32,865 I can only change it now in one place and affect everything. 865 00:45:32,865 --> 00:45:36,120 866 00:45:36,120 --> 00:45:39,030 But there's still an opportunity to design this code better. 867 00:45:39,030 --> 00:45:42,390 Up until now, I've been commingling one language with another, 868 00:45:42,390 --> 00:45:47,310 mixing in my CSS properties inside those quotes, inside of HTML proper. 869 00:45:47,310 --> 00:45:49,980 Now, it turns out in industry, this isn't always best practice 870 00:45:49,980 --> 00:45:52,350 to have one language right there in another, 871 00:45:52,350 --> 00:45:55,770 if only because if I'm working with some colleague who's focused on the site's 872 00:45:55,770 --> 00:45:59,520 aesthetics, the UI designer, whereas I'm the web developer focusing 873 00:45:59,520 --> 00:46:03,600 on its structure, it would be nice if the two of us could work independently, 874 00:46:03,600 --> 00:46:04,620 but collaboratively. 875 00:46:04,620 --> 00:46:08,640 But it's hard to imagine how that work well if his or her code needs 876 00:46:08,640 --> 00:46:10,770 to be commingled with mine. 877 00:46:10,770 --> 00:46:14,250 So it tends to be better practice to actually factor out one language, 878 00:46:14,250 --> 00:46:17,700 say CSS, and remove it from those attributes 879 00:46:17,700 --> 00:46:20,400 and put it, for instance, in a tag of its own. 880 00:46:20,400 --> 00:46:22,230 Now, that's not a hard and fast rule. 881 00:46:22,230 --> 00:46:24,330 In fact, increasingly, in web development 882 00:46:24,330 --> 00:46:27,270 there is this notion of components, whereby one human doesn't 883 00:46:27,270 --> 00:46:30,990 work on just one page, but some portion thereof, a component, 884 00:46:30,990 --> 00:46:33,780 like just the search box, or some other feature. 885 00:46:33,780 --> 00:46:36,840 And in those cases, are we actually seeing an industry of tendency 886 00:46:36,840 --> 00:46:41,250 in the opposite direction, whereby he or she combines their HTML 887 00:46:41,250 --> 00:46:43,390 and CSS into one. 888 00:46:43,390 --> 00:46:48,210 But for this process, whereby I'm creating not components, but web pages, 889 00:46:48,210 --> 00:46:50,790 probably shouldn't be commingling them there. 890 00:46:50,790 --> 00:46:53,040 So indeed, I'm going to go into this same code, 891 00:46:53,040 --> 00:46:56,490 remove those style attributes, and instead, go back 892 00:46:56,490 --> 00:46:59,130 to the head of my page, where historically, I've 893 00:46:59,130 --> 00:47:04,710 had nothing else but my title, and now go in and add a style tag, 894 00:47:04,710 --> 00:47:09,150 not attribute, opening and closing it within the confines of that head. 895 00:47:09,150 --> 00:47:15,420 And inside of this style tag can I now go ahead and type CSS, all indented 896 00:47:15,420 --> 00:47:17,910 as always just for beauty's sake. 897 00:47:17,910 --> 00:47:22,380 But here, I can go ahead and specify well, what tags in my HTML 898 00:47:22,380 --> 00:47:23,640 should have what properties. 899 00:47:23,640 --> 00:47:24,750 And I can do this by name. 900 00:47:24,750 --> 00:47:29,190 For instance, the body of my web page shall have, as per these curly braces, 901 00:47:29,190 --> 00:47:33,630 the following property well, text-align:center. 902 00:47:33,630 --> 00:47:37,620 Meanwhile, the header of my page, not to be confused with the head, 903 00:47:37,620 --> 00:47:41,790 shall instead have font-size:large. 904 00:47:41,790 --> 00:47:45,180 Meanwhile, the main part of my page, as before, this time though, 905 00:47:45,180 --> 00:47:48,840 up here shall have font-size:medium. 906 00:47:48,840 --> 00:47:52,170 And then last but not least, is the page's footer, which as before, 907 00:47:52,170 --> 00:47:56,310 will have a font-size:small. 908 00:47:56,310 --> 00:47:59,130 And here too, do we still have that same cascading 909 00:47:59,130 --> 00:48:03,420 feature, whereby, body is still a parent of those three other tags. 910 00:48:03,420 --> 00:48:06,330 And that body shall be text-aligned:center. 911 00:48:06,330 --> 00:48:09,720 But header and main and footer shall each have their own respective font 912 00:48:09,720 --> 00:48:10,260 size. 913 00:48:10,260 --> 00:48:12,710 Now, why these properties in particular? 914 00:48:12,710 --> 00:48:14,460 Well, you would only know which properties 915 00:48:14,460 --> 00:48:17,910 exist by consulting some documentation or class. 916 00:48:17,910 --> 00:48:23,070 But indeed, text align and font size and font family and color and more 917 00:48:23,070 --> 00:48:26,940 are all defined by CSS as being available properties, 918 00:48:26,940 --> 00:48:30,960 just as with HTML whereby you might hereafter look up in some reference 919 00:48:30,960 --> 00:48:35,310 the available tags, so in CSS can you do the same, to see what properties exist 920 00:48:35,310 --> 00:48:38,160 and for what HTML tags. 921 00:48:38,160 --> 00:48:42,030 So if I go now and reload this page, the effect should be visually the same, 922 00:48:42,030 --> 00:48:46,560 but I now have at least moved all of my CSS to the top, at least 923 00:48:46,560 --> 00:48:51,180 within the head of my page, and all of the HTML, or most of it, down below. 924 00:48:51,180 --> 00:48:54,990 Indeed here, it looks exactly as expected, no different from before, 925 00:48:54,990 --> 00:49:00,060 but design-wise, underneath the hood, have I now structured it better. 926 00:49:00,060 --> 00:49:03,870 But it turns out, you don't have to apply CSS properties only 927 00:49:03,870 --> 00:49:05,850 to HTML tags in this way. 928 00:49:05,850 --> 00:49:09,690 You can actually create reusable collections of properties 929 00:49:09,690 --> 00:49:14,190 that you can apply to this tag or this one or multiple tags altogether. 930 00:49:14,190 --> 00:49:17,190 In fact, let's go now to some HTML that's almost the same, 931 00:49:17,190 --> 00:49:21,450 but create some new collections of properties quite like those here. 932 00:49:21,450 --> 00:49:23,340 And so, let me go ahead and say, I would like 933 00:49:23,340 --> 00:49:27,390 a class, or a collection of properties, called centered, 934 00:49:27,390 --> 00:49:29,160 as indicated here by that dot. 935 00:49:29,160 --> 00:49:32,550 Indeed, in CSS, if you have not just a word, but a dot, 936 00:49:32,550 --> 00:49:36,970 it says this is a class, a custom name, that you yourself provide. 937 00:49:36,970 --> 00:49:40,500 And inside of the curly braces now and am I going to do just as before, 938 00:49:40,500 --> 00:49:41,850 text-align:center. 939 00:49:41,850 --> 00:49:44,100 But suppose I now want some reusable classes 940 00:49:44,100 --> 00:49:47,040 as well that express the notion of small, medium, and large. 941 00:49:47,040 --> 00:49:50,190 Well, I could have one called large, inside of which, for now, 942 00:49:50,190 --> 00:49:53,790 is just one simple property, like font-size=large. 943 00:49:53,790 --> 00:49:56,715 Meanwhile, might I have medium defined almost the same. 944 00:49:56,715 --> 00:49:59,540 945 00:49:59,540 --> 00:50:02,360 And lastly, might I again have, say, small, 946 00:50:02,360 --> 00:50:06,900 that just as these others do exactly that. 947 00:50:06,900 --> 00:50:10,070 So my code is a little different, but now I've 948 00:50:10,070 --> 00:50:13,370 associated properties not with hard-coded tags, 949 00:50:13,370 --> 00:50:16,490 but rather with words, class names, so to speak, 950 00:50:16,490 --> 00:50:18,740 that I can apply anywhere I want. 951 00:50:18,740 --> 00:50:20,930 So as to achieve the same effect as before, 952 00:50:20,930 --> 00:50:25,820 but now using these reusable commodity classes can I go down to my page 953 00:50:25,820 --> 00:50:30,260 and say, well, my body shall have a class of "centered". 954 00:50:30,260 --> 00:50:33,560 Meanwhile, my header shall have a class of "large". 955 00:50:33,560 --> 00:50:37,640 And the main part of my page, meanwhile, will be medium, as before. 956 00:50:37,640 --> 00:50:40,820 And that footer, lastly, shall be small. 957 00:50:40,820 --> 00:50:43,910 So the effect, for me the programmer, is a little different. 958 00:50:43,910 --> 00:50:46,550 I'm not actually changing all that many keystrokes, 959 00:50:46,550 --> 00:50:50,930 but I now have these collections that I can reuse here or in other tags still, 960 00:50:50,930 --> 00:50:53,600 particularly, if this page were even bigger. 961 00:50:53,600 --> 00:50:57,440 If I go ahead and reload the page now after saving that file, voila, 962 00:50:57,440 --> 00:51:00,260 it still looks the same, because again, we're focusing now 963 00:51:00,260 --> 00:51:03,500 not on correctness, but also design. 964 00:51:03,500 --> 00:51:07,550 And so with CSS are there best practices or at least good practices 965 00:51:07,550 --> 00:51:09,710 for this particular context via which we can 966 00:51:09,710 --> 00:51:12,710 implement our same ideas but better. 967 00:51:12,710 --> 00:51:16,070 But there's still one last opportunity here, I daresay, to do better. 968 00:51:16,070 --> 00:51:20,060 Suppose that colleague of mine with whom I'd like to collaborate actually 969 00:51:20,060 --> 00:51:22,190 would prefer to work on their own file. 970 00:51:22,190 --> 00:51:25,880 After all, I'm still commingling my CSS with HTML. 971 00:51:25,880 --> 00:51:27,860 It just happens to be not in those attributes, 972 00:51:27,860 --> 00:51:31,310 but in one bigger tag up top there. 973 00:51:31,310 --> 00:51:36,020 And so, why not just factor all of that CSS out and put it in a separate file 974 00:51:36,020 --> 00:51:39,770 and then just tell my HTML file how to find it. 975 00:51:39,770 --> 00:51:42,470 And indeed, let's do this, with one final flourish. 976 00:51:42,470 --> 00:51:47,678 Here under new file, css3.css are those same CSS classes 977 00:51:47,678 --> 00:51:49,220 inside of which are those properties. 978 00:51:49,220 --> 00:51:52,580 But now, all of this code is in its own file. 979 00:51:52,580 --> 00:51:56,630 Meanwhile, I'll have another file css3.html, which 980 00:51:56,630 --> 00:51:59,690 before had all of my HTML and CSS. 981 00:51:59,690 --> 00:52:03,470 But this time, here, has just one new tag link. 982 00:52:03,470 --> 00:52:06,350 This tag link says to the browser, hey, browser, 983 00:52:06,350 --> 00:52:11,450 link this file to this other one called css3.css. 984 00:52:11,450 --> 00:52:14,570 And the relationship between one file and the other 985 00:52:14,570 --> 00:52:17,030 is quite simply that of style sheet. 986 00:52:17,030 --> 00:52:19,160 And so effectively, what the browser does 987 00:52:19,160 --> 00:52:22,040 here is copy-paste the contents of that CSS file 988 00:52:22,040 --> 00:52:24,740 as though it were at the top of this page. 989 00:52:24,740 --> 00:52:27,590 But the effect ultimately, for development purposes, 990 00:52:27,590 --> 00:52:31,280 is that now I have my so-called separation of concerns. 991 00:52:31,280 --> 00:52:34,070 And I, and any number of colleagues, can work now truly 992 00:52:34,070 --> 00:52:38,210 independently on these two files, aggregating later the net effect 993 00:52:38,210 --> 00:52:38,990 together. 994 00:52:38,990 --> 00:52:43,190 Moreover, because this CSS file is now factored out, 995 00:52:43,190 --> 00:52:47,630 I can reuse that same CSS file not just on this page, 996 00:52:47,630 --> 00:52:50,060 but dozens or hundreds of others. 997 00:52:50,060 --> 00:52:54,200 And so, if indeed, you put in one or more files all of your CSS, 998 00:52:54,200 --> 00:52:56,690 you can reuse those entire files. 999 00:52:56,690 --> 00:53:00,630 And browsers themselves are smart and try to be as efficient as possible. 1000 00:53:00,630 --> 00:53:04,820 And so, if a browser realizes that while you visit some website that this page 1001 00:53:04,820 --> 00:53:08,720 and that both use the same CSS file, the browser 1002 00:53:08,720 --> 00:53:11,510 can be smart and download that file just once, 1003 00:53:11,510 --> 00:53:14,240 thereby saving you the user, time, because you don't 1004 00:53:14,240 --> 00:53:16,380 have to wait for that file to download. 1005 00:53:16,380 --> 00:53:19,490 And it saves the website bandwidth because it doesn't 1006 00:53:19,490 --> 00:53:21,620 have to download that same file twice. 1007 00:53:21,620 --> 00:53:25,790 So simply by focusing not only on the correctness of the content that you'd 1008 00:53:25,790 --> 00:53:27,800 like to display and the aesthetics thereof, 1009 00:53:27,800 --> 00:53:31,610 but on the underlying design, can we build systems that scale better 1010 00:53:31,610 --> 00:53:34,317 and can be built by so many more people. 1011 00:53:34,317 --> 00:53:37,880 1012 00:53:37,880 --> 00:53:41,540 So with HTML can we structure our web pages and the data therein? 1013 00:53:41,540 --> 00:53:44,330 And with CSS, can we take things that final mile 1014 00:53:44,330 --> 00:53:46,640 and stylize it just the way that we want? 1015 00:53:46,640 --> 00:53:49,190 But everything we've coded thus far has been static. 1016 00:53:49,190 --> 00:53:49,910 I write it. 1017 00:53:49,910 --> 00:53:50,540 I save it. 1018 00:53:50,540 --> 00:53:52,520 And then everyone else reads it. 1019 00:53:52,520 --> 00:53:55,280 But of course, so many of today's websites are dynamic. 1020 00:53:55,280 --> 00:53:59,570 They take users' input and they produce, per every user, disparate output. 1021 00:53:59,570 --> 00:54:01,100 So how can you do that? 1022 00:54:01,100 --> 00:54:04,400 Well, you need for that to work, a proper programming language. 1023 00:54:04,400 --> 00:54:08,000 And some of that logic that changes the data and changes the pages 1024 00:54:08,000 --> 00:54:12,080 that users see, can be done on the server-side with languages like Python. 1025 00:54:12,080 --> 00:54:16,850 But a lot of it, and increasingly so, can it be done client-side, on the Mac 1026 00:54:16,850 --> 00:54:20,000 or PC itself within the user's browser. 1027 00:54:20,000 --> 00:54:22,460 And the language via which this is done these days 1028 00:54:22,460 --> 00:54:26,990 is via JavaScript, not to be confused with Java, another language still. 1029 00:54:26,990 --> 00:54:29,540 But via JavaScript, do you have the ability 1030 00:54:29,540 --> 00:54:32,690 through writing functions and conditions and loops 1031 00:54:32,690 --> 00:54:35,930 and Boolean expressions and more to actually change a web 1032 00:54:35,930 --> 00:54:41,660 page once a user has downloaded it for the first time in that virtual HTTP 1033 00:54:41,660 --> 00:54:42,350 envelope. 1034 00:54:42,350 --> 00:54:44,990 In other words, imagine most any website you visit daily 1035 00:54:44,990 --> 00:54:46,550 that's constantly changing. 1036 00:54:46,550 --> 00:54:48,290 For instance, something like Gmail. 1037 00:54:48,290 --> 00:54:51,920 Anytime you receive a message in Gmail or any web-based client, 1038 00:54:51,920 --> 00:54:55,520 you get, for instance, a new row in a table, each of which 1039 00:54:55,520 --> 00:54:57,410 represents an email you've gotten. 1040 00:54:57,410 --> 00:54:59,480 Or on some social media site might you get 1041 00:54:59,480 --> 00:55:01,850 messages that just pop up at the bottom of the page 1042 00:55:01,850 --> 00:55:05,510 and you don't have to wait until you click something or reload in order 1043 00:55:05,510 --> 00:55:06,380 to see them. 1044 00:55:06,380 --> 00:55:10,340 And so, with JavaScript what you can do is send to the user 1045 00:55:10,340 --> 00:55:13,130 some initial HTML, the simplest of web pages 1046 00:55:13,130 --> 00:55:15,170 that doesn't have all that much content. 1047 00:55:15,170 --> 00:55:19,640 But because the browser then loads that HTML into memory, into RAM, 1048 00:55:19,640 --> 00:55:25,190 via the DOM, or document object model, that tree, or more generally, data 1049 00:55:25,190 --> 00:55:27,870 structure, can evolve over time. 1050 00:55:27,870 --> 00:55:31,220 Just as you can add and remove things from an array or a list, so can 1051 00:55:31,220 --> 00:55:35,540 a tree have more or fewer nodes and branches. 1052 00:55:35,540 --> 00:55:38,450 And so, with JavaScript, a proper programming language, 1053 00:55:38,450 --> 00:55:41,930 can you add data to a web page by just asking via 1054 00:55:41,930 --> 00:55:46,520 HTTP some server for that data any time a new email comes in and then 1055 00:55:46,520 --> 00:55:49,250 present it to the user, really, but just adding 1056 00:55:49,250 --> 00:55:56,150 another tr, or table row to a table, or another div, or another element still. 1057 00:55:56,150 --> 00:56:00,080 And so, with JavaScript, too, we have the ability then to change web pages 1058 00:56:00,080 --> 00:56:04,880 and, most importantly, listen for users' input. 1059 00:56:04,880 --> 00:56:07,910 For instance, here is a list, but not even an exhaustive list, 1060 00:56:07,910 --> 00:56:11,630 of all of the events that might happen while a human is interacting 1061 00:56:11,630 --> 00:56:12,920 with your website. 1062 00:56:12,920 --> 00:56:16,940 They might click or drag or change something on the page, each of which 1063 00:56:16,940 --> 00:56:22,520 is an operation, or more generally, event that the author of that web page 1064 00:56:22,520 --> 00:56:26,090 can listen for by writing code in JavaScript. 1065 00:56:26,090 --> 00:56:29,210 For instance, if you've ever used Google Maps or some other mapping tool 1066 00:56:29,210 --> 00:56:33,560 where you can click and drag in order to see north, south, west, or east, 1067 00:56:33,560 --> 00:56:37,340 every time you click and drag you're seeing more images, more tiles, 1068 00:56:37,340 --> 00:56:38,035 so to speak. 1069 00:56:38,035 --> 00:56:40,160 And if your connection happens to be somewhat slow, 1070 00:56:40,160 --> 00:56:42,380 you might actually see gray place holders 1071 00:56:42,380 --> 00:56:46,190 until all of a sudden new squares suddenly appear. 1072 00:56:46,190 --> 00:56:49,370 That's because, behind the scenes, is the browser requesting 1073 00:56:49,370 --> 00:56:52,370 more and more images from some server and then embedding them 1074 00:56:52,370 --> 00:56:57,950 in the website dynamically, adding more divs or some other HTML elements. 1075 00:56:57,950 --> 00:57:00,070 Moreover, if you have Gmail, that again, is just 1076 00:57:00,070 --> 00:57:01,820 getting more and more data from the server 1077 00:57:01,820 --> 00:57:05,330 and appending it or pre-pending it to some HTML table 1078 00:57:05,330 --> 00:57:07,610 or some stack of big divs. 1079 00:57:07,610 --> 00:57:10,280 So there's any number of events that we can listen for. 1080 00:57:10,280 --> 00:57:15,050 And those events at what underlie every possible interaction you 1081 00:57:15,050 --> 00:57:16,610 have with a modern website. 1082 00:57:16,610 --> 00:57:19,940 It's just a menu of things a programmer can listen for, 1083 00:57:19,940 --> 00:57:23,390 and can you listen for those things with JavaScript. 1084 00:57:23,390 --> 00:57:26,990 For instance, suppose I want to make my very first interactive web 1085 00:57:26,990 --> 00:57:28,940 page that has an HTML form. 1086 00:57:28,940 --> 00:57:31,190 But this interactive form doesn't go to a server 1087 00:57:31,190 --> 00:57:35,420 like Google's, but instead, stays right here and interacts with the user. 1088 00:57:35,420 --> 00:57:39,160 Well, I might have a form tag inside of which are a couple of input. 1089 00:57:39,160 --> 00:57:41,540 So let's go ahead and construct this UI and then 1090 00:57:41,540 --> 00:57:44,540 somehow write some code in JavaScript that 1091 00:57:44,540 --> 00:57:48,770 listens for clicks of the button, submissions of this form, 1092 00:57:48,770 --> 00:57:53,360 intercepts that submission, and then does something with the user's input. 1093 00:57:53,360 --> 00:57:56,390 Here then, I have a file hello.html, inside 1094 00:57:56,390 --> 00:57:59,030 of which I'll go about implementing my form. 1095 00:57:59,030 --> 00:58:01,460 In here, have I opened and closed my form tag, 1096 00:58:01,460 --> 00:58:03,920 and now I need the first of my inputs. 1097 00:58:03,920 --> 00:58:07,280 I'm going to go ahead and save the type of this input is text. 1098 00:58:07,280 --> 00:58:08,150 But you know what? 1099 00:58:08,150 --> 00:58:13,460 As before, I'd like to turn autocomplete=off, and auto focus, 1100 00:58:13,460 --> 00:58:14,930 for UI's sake. 1101 00:58:14,930 --> 00:58:20,060 And moreover, I'm going to go ahead and have a input type=submit, 1102 00:58:20,060 --> 00:58:23,180 the value of which quite simply will be submits. 1103 00:58:23,180 --> 00:58:27,560 Finally, for UI's sake, let's go ahead and add a place holder of "name" 1104 00:58:27,560 --> 00:58:30,890 so that the user knows exactly what it is we want of them. 1105 00:58:30,890 --> 00:58:35,030 Now, I'm not going to include, say, the action attribute on my form elements 1106 00:58:35,030 --> 00:58:38,120 here this time, because I don't want the action to go to some server. 1107 00:58:38,120 --> 00:58:41,282 Rather, I do want to keep the user right here. 1108 00:58:41,282 --> 00:58:41,990 So you know what? 1109 00:58:41,990 --> 00:58:46,290 Instead of that default action, via which the browser handles submission, 1110 00:58:46,290 --> 00:58:48,750 I'm going to go ahead and say the following-- on 1111 00:58:48,750 --> 00:58:52,400 submit, literally telling the browser when this form is submitted, 1112 00:58:52,400 --> 00:58:55,610 do this and not your default behavior. 1113 00:58:55,610 --> 00:58:59,600 Inside of quotes, I'm going to go ahead and type now, not HTML 1114 00:58:59,600 --> 00:59:02,810 and not CSS, but code in JavaScript. 1115 00:59:02,810 --> 00:59:05,180 I want to go ahead and say, greet the user. 1116 00:59:05,180 --> 00:59:08,030 And I'm going to go ahead and quite simply say, greet. 1117 00:59:08,030 --> 00:59:12,110 Thereafter, I'm going to go ahead and implement this function 1118 00:59:12,110 --> 00:59:14,150 as those parentheses would imply. 1119 00:59:14,150 --> 00:59:17,300 Indeed, JavaScript quite like Python, looks very much the same 1120 00:59:17,300 --> 00:59:19,100 and has similar conventions. 1121 00:59:19,100 --> 00:59:23,060 Functions have names and you call them with parentheses and zero more inputs. 1122 00:59:23,060 --> 00:59:26,910 With JavaScript, we achieve the same, but through slightly different syntax. 1123 00:59:26,910 --> 00:59:28,870 Up here in the head of my page, I'm going 1124 00:59:28,870 --> 00:59:32,030 to go ahead and now add yet another new tag, 1125 00:59:32,030 --> 00:59:35,240 this one called script, implying to the browser 1126 00:59:35,240 --> 00:59:39,350 that, hey, browser, here comes a script or a small program written, 1127 00:59:39,350 --> 00:59:41,690 as this presumed, in JavaScript. 1128 00:59:41,690 --> 00:59:44,270 Now, in order to declare my own function in JavaScript, 1129 00:59:44,270 --> 00:59:46,220 I don't say def, as in Python. 1130 00:59:46,220 --> 00:59:49,332 I instead say function quite literally. 1131 00:59:49,332 --> 00:59:51,290 And if I want this function to be called greet, 1132 00:59:51,290 --> 00:59:53,900 I simply say it by name, open paren, closed paren, 1133 00:59:53,900 --> 00:59:56,060 since it shall take no inputs here. 1134 00:59:56,060 --> 01:00:01,200 And then inside of curly braces, not just indentation with some colon, 1135 01:00:01,200 --> 01:00:10,490 I'm going to go ahead and say window.alert ("hello,world"); 1136 01:00:10,490 --> 01:00:15,080 Here too, am I passing a string or phrase into alert as an input. 1137 01:00:15,080 --> 01:00:18,470 And notice that alert itself is associated with the window. 1138 01:00:18,470 --> 01:00:21,980 Well, it turns out in JavaScript, you have some global variables, 1139 01:00:21,980 --> 01:00:25,220 if you will, one of which is called window and refers to data 1140 01:00:25,220 --> 01:00:28,760 or functionality that's somehow associated with the whole browser's 1141 01:00:28,760 --> 01:00:29,420 window. 1142 01:00:29,420 --> 01:00:33,050 Indeed, what I want to do ultimately is have the user type in some input 1143 01:00:33,050 --> 01:00:37,680 and then display an alert that says, hello, world, as in this case. 1144 01:00:37,680 --> 01:00:38,300 So that's it. 1145 01:00:38,300 --> 01:00:39,925 I have defined a function called greet. 1146 01:00:39,925 --> 01:00:42,470 I've hard-coded that I want it to alert the user. 1147 01:00:42,470 --> 01:00:45,920 And I've told the browser on Submit, to call greet. 1148 01:00:45,920 --> 01:00:48,420 Unfortunately, there's a couple of shortcomings here. 1149 01:00:48,420 --> 01:00:51,860 Indeed, I seem to be asking via HTML for the user's name 1150 01:00:51,860 --> 01:00:54,640 and yet never doing anything for it, but that's OK. 1151 01:00:54,640 --> 01:01:00,080 Let's still break this problem down step by step getting each milestone right 1152 01:01:00,080 --> 01:01:04,550 until we build on this success hopefully with at least one other. 1153 01:01:04,550 --> 01:01:06,320 Let's go ahead and save this file here. 1154 01:01:06,320 --> 01:01:11,600 Go back to the browser and type my name, David, followed by a click on Submit. 1155 01:01:11,600 --> 01:01:12,380 And there it is. 1156 01:01:12,380 --> 01:01:17,360 This page says, hello, world, an alert of sorts that my browser, here, Chrome, 1157 01:01:17,360 --> 01:01:19,040 has displayed for the user. 1158 01:01:19,040 --> 01:01:23,300 So window.alert is a function built into the browser window itself 1159 01:01:23,300 --> 01:01:26,750 that does exactly this-- opens a prompt, says a message, 1160 01:01:26,750 --> 01:01:29,450 and then allows the user to click OK. 1161 01:01:29,450 --> 01:01:30,920 There's a small bug here though. 1162 01:01:30,920 --> 01:01:34,530 Indeed, when I click OK, you'll notice that suddenly the page refresh 1163 01:01:34,530 --> 01:01:37,580 is entirely disappearing my name. 1164 01:01:37,580 --> 01:01:39,950 Well, that's not exactly the behavior I intend, 1165 01:01:39,950 --> 01:01:42,020 especially if I want the user's input to remain. 1166 01:01:42,020 --> 01:01:45,540 Moreover, I want to ultimately do something with that input. 1167 01:01:45,540 --> 01:01:48,080 So this is a subtle change to make, but it turns out 1168 01:01:48,080 --> 01:01:52,610 if in JavaScript you want to override the browser's default behavior, 1169 01:01:52,610 --> 01:01:56,510 inside of this submit, I need to say not one thought but two. 1170 01:01:56,510 --> 01:02:01,580 I need to tell the browser via a Boolean expression return-false. 1171 01:02:01,580 --> 01:02:05,420 This is simply a convention that says whatever your default behavior is 1172 01:02:05,420 --> 01:02:07,520 when submitting a form, do not do that. 1173 01:02:07,520 --> 01:02:09,110 Return-false. 1174 01:02:09,110 --> 01:02:10,250 Turn that off. 1175 01:02:10,250 --> 01:02:14,300 Instead, only called greet, which is going to be this function. 1176 01:02:14,300 --> 01:02:17,780 This ensures that we don't accidentally, not only take the user's input 1177 01:02:17,780 --> 01:02:19,850 and do something with it, but also send it 1178 01:02:19,850 --> 01:02:23,430 off somewhere that's not here defined. 1179 01:02:23,430 --> 01:02:28,310 So now, let's actually capture the user's name or input 1180 01:02:28,310 --> 01:02:32,540 and actually print hello, so and so, instead of just world. 1181 01:02:32,540 --> 01:02:35,420 Well, to do this, we can solve the problem in several ways. 1182 01:02:35,420 --> 01:02:38,870 I'm going to go up here in my greet function and declare a variable. 1183 01:02:38,870 --> 01:02:42,590 The keyword in JavaScript I might use for this is called let, so to speak, 1184 01:02:42,590 --> 01:02:45,098 let the following variable take on some value. 1185 01:02:45,098 --> 01:02:47,390 And I'm going to Let's go ahead and call that variable, 1186 01:02:47,390 --> 01:02:49,100 perhaps reasonably, name. 1187 01:02:49,100 --> 01:02:53,270 And then I need to go about getting that value from the web page. 1188 01:02:53,270 --> 01:02:57,470 And here, that same picture we drew of the so-called document object model, 1189 01:02:57,470 --> 01:03:00,800 or DOM, that tree, allows you to think about where 1190 01:03:00,800 --> 01:03:02,660 this value's going to come from. 1191 01:03:02,660 --> 01:03:05,750 Somewhere in my computer's memory is a tree structure and one 1192 01:03:05,750 --> 01:03:10,100 of the nodes or rectangles in that tree is this text box. 1193 01:03:10,100 --> 01:03:14,280 In that text box, once the human interacts with it, has some value. 1194 01:03:14,280 --> 01:03:17,240 So I somehow programmatically in this new language 1195 01:03:17,240 --> 01:03:20,450 JavaScript want to express, hey, browser, go get me 1196 01:03:20,450 --> 01:03:24,770 from the document that particular node, and go in and get its value 1197 01:03:24,770 --> 01:03:26,720 and return it to me so that I can store it 1198 01:03:26,720 --> 01:03:29,900 from right to left into this variable. 1199 01:03:29,900 --> 01:03:32,660 And the means by which we can do that is this. 1200 01:03:32,660 --> 01:03:35,480 Hey, browser, go into the document, thereby 1201 01:03:35,480 --> 01:03:39,850 accessing another global variable, so to speak, alongside window, 1202 01:03:39,850 --> 01:03:45,020 and go ahead and select via a function called query selector, so to speak, 1203 01:03:45,020 --> 01:03:49,540 whereby I can now specify the name of a tag or some other expression via which 1204 01:03:49,540 --> 01:03:52,450 I can go get that particular input. 1205 01:03:52,450 --> 01:03:56,080 Unfortunately, that input doesn't yet have a name. 1206 01:03:56,080 --> 01:03:58,660 Or better yet, it doesn't yet have an ID. 1207 01:03:58,660 --> 01:04:01,540 It turns out in HTML and in turn JavaScript, 1208 01:04:01,540 --> 01:04:06,700 if you want to proactively give certain elements identifiers, 1209 01:04:06,700 --> 01:04:10,750 unique across the entire document so that later in code 1210 01:04:10,750 --> 01:04:15,010 you can refer to that input and not mistake it for any other, 1211 01:04:15,010 --> 01:04:18,430 you can give inputs not only names, but ID's, simply 1212 01:04:18,430 --> 01:04:22,600 by saying, for instance, within this tag here, the ID of this tag 1213 01:04:22,600 --> 01:04:26,530 should actually be "name" or x or y or z or anything else, 1214 01:04:26,530 --> 01:04:29,290 but here, too, I'll name it quite aptly. 1215 01:04:29,290 --> 01:04:33,220 And now within my query selector, I need just a pair of quotes, 1216 01:04:33,220 --> 01:04:38,470 single or double, and I need to now express that unique identifier's name. 1217 01:04:38,470 --> 01:04:41,560 Well I'm going to go ahead and say #name, 1218 01:04:41,560 --> 01:04:46,090 because it turns out in JavaScript as well as in CSS, 1219 01:04:46,090 --> 01:04:51,940 you can specify or select a specific tag by way of its ID. 1220 01:04:51,940 --> 01:04:55,840 And the browser only knows that you mean an ID by way of this hash. 1221 01:04:55,840 --> 01:04:57,220 You don't write it down here. 1222 01:04:57,220 --> 01:04:58,390 You only write it here. 1223 01:04:58,390 --> 01:05:00,520 But the browser realizes, oh, I see a hash, 1224 01:05:00,520 --> 01:05:04,420 you must mean the element with this ID name. 1225 01:05:04,420 --> 01:05:08,890 So now, have I selected from the web page's document 1226 01:05:08,890 --> 01:05:11,680 that node, that rectangle, from my DOM. 1227 01:05:11,680 --> 01:05:14,770 But I specifically want its value and the syntax for that, quite simply, 1228 01:05:14,770 --> 01:05:20,140 is to say .value, go into that box, and grab the text of whatever the user has 1229 01:05:20,140 --> 01:05:21,770 typed in. 1230 01:05:21,770 --> 01:05:22,990 So what now remains? 1231 01:05:22,990 --> 01:05:28,330 Here I have a line let name equal the following value, for instance DAV ID. 1232 01:05:28,330 --> 01:05:31,120 And then I still have the window alert hello, world, but I now 1233 01:05:31,120 --> 01:05:34,390 want to say hello to that name-- hello, David. 1234 01:05:34,390 --> 01:05:38,900 Well, I clearly want to replace the world with that name. 1235 01:05:38,900 --> 01:05:40,970 So how might I go about doing that? 1236 01:05:40,970 --> 01:05:43,000 Well, in JavaScript, we have multiple options, 1237 01:05:43,000 --> 01:05:47,110 but perhaps the simplest is our old friend concatenation, using a plus, 1238 01:05:47,110 --> 01:05:51,580 not between numbers, but between strings or text values, and quite simply, 1239 01:05:51,580 --> 01:05:56,290 concatenate onto the end of that thought hello, hello+name. 1240 01:05:56,290 --> 01:05:59,350 Now if I save this file, go back to my web page, 1241 01:05:59,350 --> 01:06:02,530 and begin to interact with it after loading, 1242 01:06:02,530 --> 01:06:06,460 I can go about typing my name and hopefully, with fingers crossed, 1243 01:06:06,460 --> 01:06:11,680 do I now submit it and see not just hello, world, but D-A-V-I-D Submit. 1244 01:06:11,680 --> 01:06:13,090 Hello, David. 1245 01:06:13,090 --> 01:06:17,170 And there then, with JavaScript, have we rather come full circle. 1246 01:06:17,170 --> 01:06:20,620 Not only do we have the ability to present data and the stylization 1247 01:06:20,620 --> 01:06:25,330 thereof, we also now have the ability to change our minds later and manipulate 1248 01:06:25,330 --> 01:06:29,050 that page, perhaps even prompting the user interactively with values he 1249 01:06:29,050 --> 01:06:31,045 or she actually typed in. 1250 01:06:31,045 --> 01:06:32,920 And so you can perhaps imagine now that we've 1251 01:06:32,920 --> 01:06:36,160 only just begun to scratch the surface of what you can do in JavaScript. 1252 01:06:36,160 --> 01:06:38,470 But almost any of today's popular websites 1253 01:06:38,470 --> 01:06:42,310 with which you yourself interact are being influenced and talked 1254 01:06:42,310 --> 01:06:45,972 to by this particular language, JavaScript. 1255 01:06:45,972 --> 01:06:49,140 1256 01:06:49,140 --> 01:06:51,520 Well, what more now can we do with JavaScript? 1257 01:06:51,520 --> 01:06:53,950 Well, we needn't just wait for the user to type something 1258 01:06:53,950 --> 01:06:56,620 in and then submit some form to our code. 1259 01:06:56,620 --> 01:06:59,780 We can instead actually change the aesthetics of the website 1260 01:06:59,780 --> 01:07:02,770 too just by waiting, say, for mouse clicks on buttons. 1261 01:07:02,770 --> 01:07:05,380 For instance, in this file here, background.html, 1262 01:07:05,380 --> 01:07:08,430 let's go about giving ourselves one or more buttons that if clicked, 1263 01:07:08,430 --> 01:07:10,940 change the colors of that page. 1264 01:07:10,940 --> 01:07:13,990 So I'm going to go ahead here and use another tag still called button, 1265 01:07:13,990 --> 01:07:16,073 but proactively, I'm going to go ahead and give it 1266 01:07:16,073 --> 01:07:19,263 a unique identifier of "red" because my goal ultimately here 1267 01:07:19,263 --> 01:07:21,430 is going to be to create a button that when clicked, 1268 01:07:21,430 --> 01:07:24,610 changes the whole background from white to red. 1269 01:07:24,610 --> 01:07:27,880 So here, I'm going to go ahead and call this button quite simply, r. 1270 01:07:27,880 --> 01:07:30,580 And I'm going to go ahead and close that button tag next. 1271 01:07:30,580 --> 01:07:34,720 And now down below here am I going to print my script tag, this time, not 1272 01:07:34,720 --> 01:07:38,140 in the head, but below, because indeed, logically now, I 1273 01:07:38,140 --> 01:07:42,760 need this button to exist before this code actually executes. 1274 01:07:42,760 --> 01:07:44,620 Before, when I created that greet function, 1275 01:07:44,620 --> 01:07:47,990 it was only eventually called, not right when the page loads. 1276 01:07:47,990 --> 01:07:51,100 So here now, I want this script, though, to run 1277 01:07:51,100 --> 01:07:53,630 after the buttons have been rendered. 1278 01:07:53,630 --> 01:07:58,450 So what do I want to do within this script or mini program written here 1279 01:07:58,450 --> 01:07:59,980 in JavaScript? 1280 01:07:59,980 --> 01:08:02,750 Well, I think I'd like to express the following. 1281 01:08:02,750 --> 01:08:05,410 First, let's go ahead and say to the document, 1282 01:08:05,410 --> 01:08:09,370 go ahead and select via that same function query selector, 1283 01:08:09,370 --> 01:08:11,920 this particular button whose ID is red. 1284 01:08:11,920 --> 01:08:14,920 I can express the notion of an ID, again with that hash, 1285 01:08:14,920 --> 01:08:16,750 and then the word of that ID-- 1286 01:08:16,750 --> 01:08:17,470 red. 1287 01:08:17,470 --> 01:08:20,319 And when I select that button, I want to go ahead and listen 1288 01:08:20,319 --> 01:08:23,830 for an on-click event, not on Submit, per se, 1289 01:08:23,830 --> 01:08:26,890 but on-click, because this time, I want to distinguish one 1290 01:08:26,890 --> 01:08:28,510 among multiple buttons. 1291 01:08:28,510 --> 01:08:31,779 And here, what do I want to do when that button is clicked? 1292 01:08:31,779 --> 01:08:34,880 Well, I'd like to execute a block of code. 1293 01:08:34,880 --> 01:08:36,380 Well, what is a block of code? 1294 01:08:36,380 --> 01:08:38,740 Well, that's really just what a function is. 1295 01:08:38,740 --> 01:08:41,560 And in fact, functions don't always have to have names. 1296 01:08:41,560 --> 01:08:45,670 Sometimes, you just want a function to encapsulate one or more lines. 1297 01:08:45,670 --> 01:08:49,060 And in JavaScript, this is actually quite straightforward, if cryptic 1298 01:08:49,060 --> 01:08:50,830 certainly, the first time around. 1299 01:08:50,830 --> 01:08:53,439 I can just say, hey, JavaScript, give me a function 1300 01:08:53,439 --> 01:08:58,240 with no name, just parentheses, implying that it also takes no input. 1301 01:08:58,240 --> 01:09:02,290 And then by convention, this time, I'll put a curly brace on the same line 1302 01:09:02,290 --> 01:09:05,710 just because I want the other curly brace down below. 1303 01:09:05,710 --> 01:09:08,680 And I'll finish my thought in advance with that semicolon. 1304 01:09:08,680 --> 01:09:12,670 This is to say now that between those two curly braces is a function, 1305 01:09:12,670 --> 01:09:15,700 if an anonymous function with no name, that is just 1306 01:09:15,700 --> 01:09:19,779 to have one or more lines of code that I'd like the browser to execute, if 1307 01:09:19,779 --> 01:09:22,912 and only if that red button is clicked. 1308 01:09:22,912 --> 01:09:25,120 Now what do I want to do when that button is clicked? 1309 01:09:25,120 --> 01:09:27,520 I'd like to change the whole background of the page, that 1310 01:09:27,520 --> 01:09:32,020 is the body from white, its default, to, in this case, red. 1311 01:09:32,020 --> 01:09:34,630 So let's go ahead and ask the browser again, hey, browser, 1312 01:09:34,630 --> 01:09:39,850 go into the document and select via that function again, query selector, not 1313 01:09:39,850 --> 01:09:45,880 red, or any ID, but rather an actual tag "body" with no hash, because body 1314 01:09:45,880 --> 01:09:47,979 is the name of that tag. 1315 01:09:47,979 --> 01:09:53,340 And I'd like to change the style of that particular tag and everything therein, 1316 01:09:53,340 --> 01:09:56,920 and so it turns out that I can get not its value, as before, 1317 01:09:56,920 --> 01:10:00,550 but instead its style, its actual CSS. 1318 01:10:00,550 --> 01:10:03,730 And within that style property, so to speak, 1319 01:10:03,730 --> 01:10:08,800 is there something called background color, capitalized this time exactly 1320 01:10:08,800 --> 01:10:12,430 like this in so-called camel case, whereby it's a lower-case background 1321 01:10:12,430 --> 01:10:15,730 and then a capital c and the rest of the word color. 1322 01:10:15,730 --> 01:10:19,150 This is distinct, and unfortunately inconsistent 1323 01:10:19,150 --> 01:10:21,100 with what this would be called in CSS. 1324 01:10:21,100 --> 01:10:26,710 Were I writing CSS and not JavaScript, I would actually say background-color, 1325 01:10:26,710 --> 01:10:31,120 all in lowercase, just as font size and text align are all lowercase, 1326 01:10:31,120 --> 01:10:32,140 with that same dash. 1327 01:10:32,140 --> 01:10:33,158 But so be it. 1328 01:10:33,158 --> 01:10:35,200 These languages were designed by different people 1329 01:10:35,200 --> 01:10:38,380 and so sometimes you simply have these inconsistencies. 1330 01:10:38,380 --> 01:10:43,610 Now style.background color is indeed the current color, which is to say, white. 1331 01:10:43,610 --> 01:10:45,430 So if I want to change that color, I just 1332 01:10:45,430 --> 01:10:48,610 need to assign it a new value from right to left. 1333 01:10:48,610 --> 01:10:53,680 And frankly, I'll just change it to that "red"; followed by a semicolon, 1334 01:10:53,680 --> 01:10:54,850 thereby ending my thought. 1335 01:10:54,850 --> 01:10:57,820 And while each individual keyword on the screen 1336 01:10:57,820 --> 01:10:59,770 here might in itself look fairly cryptic. 1337 01:10:59,770 --> 01:11:01,510 Again, consider it top-down. 1338 01:11:01,510 --> 01:11:04,000 Hey, browser, give me a button, the label of which 1339 01:11:04,000 --> 01:11:08,890 is just r and the unique ID underneath the hood of which is just red. 1340 01:11:08,890 --> 01:11:11,985 Hey, browser, here comes a script, a program written in JavaScript. 1341 01:11:11,985 --> 01:11:15,730 Hey, browser, from the documents select the element who's unique 1342 01:11:15,730 --> 01:11:19,240 ID is red, and on clicking that button-- 1343 01:11:19,240 --> 01:11:21,640 that is to say, to listen for the following event 1344 01:11:21,640 --> 01:11:24,520 and then call this function, that has no name, 1345 01:11:24,520 --> 01:11:28,330 but that's fine, in between these two curly braces. 1346 01:11:28,330 --> 01:11:31,840 Document.querySelect or("body").style.backgroundColor=red. 1347 01:11:31,840 --> 01:11:34,540 1348 01:11:34,540 --> 01:11:38,630 So if I now save this file and open that page, 1349 01:11:38,630 --> 01:11:41,710 I should see a button quite simply labeled r. 1350 01:11:41,710 --> 01:11:46,510 And if now I click this r, I should see that my white background becomes, 1351 01:11:46,510 --> 01:11:47,457 indeed, red. 1352 01:11:47,457 --> 01:11:49,540 Now red is not all that interesting, and this page 1353 01:11:49,540 --> 01:11:52,300 is far from all that interactive, because now it's red 1354 01:11:52,300 --> 01:11:53,980 and it's permanently so. 1355 01:11:53,980 --> 01:11:56,980 I've not implemented any notion of a toggle, which 1356 01:11:56,980 --> 01:11:59,470 I could perhaps with an, if else. 1357 01:11:59,470 --> 01:12:00,400 Now, it's just red. 1358 01:12:00,400 --> 01:12:04,060 But what if I wanted to allow at least three colors r, g, and b, 1359 01:12:04,060 --> 01:12:05,530 for red, green, and blue. 1360 01:12:05,530 --> 01:12:08,920 Well with a bit of duplication or better design, could I do this. 1361 01:12:08,920 --> 01:12:11,620 And let me actually pull something out of the oven 1362 01:12:11,620 --> 01:12:16,300 that's already written here, which is to say this version-- voila. 1363 01:12:16,300 --> 01:12:20,110 Now I have that same structure red, green, and blue, 1364 01:12:20,110 --> 01:12:22,180 as well as a few blocks of code. 1365 01:12:22,180 --> 01:12:24,550 But because this is getting fairly verbose, 1366 01:12:24,550 --> 01:12:28,690 I've actually factored out some of my code to another variable, 1367 01:12:28,690 --> 01:12:34,720 document.querySelector("body") is what I would need to use three times now, 1368 01:12:34,720 --> 01:12:36,220 one for each button. 1369 01:12:36,220 --> 01:12:38,290 But I've instead called that just once, stored 1370 01:12:38,290 --> 01:12:42,520 the answer in body, the equivalent of really going into that tree 1371 01:12:42,520 --> 01:12:46,960 and plucking out one of those nodes, one of those rectangles from the DOM 1372 01:12:46,960 --> 01:12:50,740 and just calling it body so that I have now immediate access. 1373 01:12:50,740 --> 01:12:55,120 And thereafter, I simply check for red on click and green on click 1374 01:12:55,120 --> 01:12:59,470 and blue on click and on each line, setting that background color. 1375 01:12:59,470 --> 01:13:02,260 And I could actually take this further, because indeed, there's 1376 01:13:02,260 --> 01:13:03,640 clearly a structure here. 1377 01:13:03,640 --> 01:13:07,510 So while correct, this is not necessarily well-designed. 1378 01:13:07,510 --> 01:13:09,700 Indeed, almost all of my code is now the same. 1379 01:13:09,700 --> 01:13:12,160 All of that red, that green, and that blue, and so there 1380 01:13:12,160 --> 01:13:16,630 is certainly an opportunity here to factor more out and maybe use a loop. 1381 01:13:16,630 --> 01:13:19,180 Listen for red and then for green and then for blue 1382 01:13:19,180 --> 01:13:22,607 and so do something again and again, specifically three times. 1383 01:13:22,607 --> 01:13:24,940 But for now, we'll leave this is as demonstrative really 1384 01:13:24,940 --> 01:13:30,040 of what you can do in the intersection now with not just HTML and JavaScript, 1385 01:13:30,040 --> 01:13:35,050 but HTML and CSS and JavaScript, because indeed, that's what's going on. 1386 01:13:35,050 --> 01:13:39,370 By way of this style property inside of the body tag can 1387 01:13:39,370 --> 01:13:42,280 I change something just as I can read it. 1388 01:13:42,280 --> 01:13:45,800 In the past, did I read the value of what the human typed in. 1389 01:13:45,800 --> 01:13:50,080 But here I can check the style of the body and even change it. 1390 01:13:50,080 --> 01:13:53,150 1391 01:13:53,150 --> 01:13:55,530 Allow me now to pull one more cake out of the oven. 1392 01:13:55,530 --> 01:13:57,770 This one called size.html. 1393 01:13:57,770 --> 01:14:01,370 Here again, I have a paragraph of Latin or Latin text, which 1394 01:14:01,370 --> 01:14:03,890 is fairly small by default. But I've used 1395 01:14:03,890 --> 01:14:08,570 that familiar UI mechanism, a dropdown or select menu 1396 01:14:08,570 --> 01:14:11,000 inside of which is multiple values. 1397 01:14:11,000 --> 01:14:13,790 By default, its value is "initial" but here 1398 01:14:13,790 --> 01:14:18,380 we see that we can go large or small, or even xx large or xx small. 1399 01:14:18,380 --> 01:14:21,400 In fact, we can interact now with this web page using 1400 01:14:21,400 --> 01:14:26,480 HTML that's being listened to by JavaScript, so that if I go ahead now 1401 01:14:26,480 --> 01:14:32,840 and select, say, xx large, a well-defined type size in CSS, 1402 01:14:32,840 --> 01:14:37,800 I can go ahead and magically change the entire text, suddenly be extra, 1403 01:14:37,800 --> 01:14:38,600 extra large. 1404 01:14:38,600 --> 01:14:40,640 Meanwhile, if I go to that same drop-down menu 1405 01:14:40,640 --> 01:14:44,970 and choose instead xx small, it instead goes in the other direction. 1406 01:14:44,970 --> 01:14:47,360 So how now might this be implemented? 1407 01:14:47,360 --> 01:14:51,260 Well, it's probably quite not obvious exactly what code to write, 1408 01:14:51,260 --> 01:14:54,450 but the primitives are exactly the same. 1409 01:14:54,450 --> 01:14:57,410 There is some drop-down menu implemented with some HTML 1410 01:14:57,410 --> 01:15:00,770 that we've not actually yet seen, but there's so clearly 1411 01:15:00,770 --> 01:15:05,240 an action or event associated on occasion with that HTML element. 1412 01:15:05,240 --> 01:15:07,820 It happens to be an event called on change. 1413 01:15:07,820 --> 01:15:12,170 Whenever that dropdown menus value changes, you, the programmer, 1414 01:15:12,170 --> 01:15:13,490 can do something. 1415 01:15:13,490 --> 01:15:14,360 And what can you do? 1416 01:15:14,360 --> 01:15:15,620 Well, technically, anything. 1417 01:15:15,620 --> 01:15:18,050 But in this case, I want to change the font size. 1418 01:15:18,050 --> 01:15:23,030 And just as I can change the color of a background of an HTML tag, 1419 01:15:23,030 --> 01:15:26,750 thereby affecting with JavaScript its underlying CSS, 1420 01:15:26,750 --> 01:15:29,810 so will I bet can I do the same here using 1421 01:15:29,810 --> 01:15:36,380 JavaScript to change the font size property of one or more HTML elements. 1422 01:15:36,380 --> 01:15:40,310 And while again, the wiring of this end code might not be so clear, 1423 01:15:40,310 --> 01:15:44,030 all of this interactions reduces to these first principles-- what can 1424 01:15:44,030 --> 01:15:44,620 you do? 1425 01:15:44,620 --> 01:15:47,090 Well, HTML tags layout your data. 1426 01:15:47,090 --> 01:15:48,980 CSS styles the page. 1427 01:15:48,980 --> 01:15:52,580 And with JavaScript can you listen for interactions from a user 1428 01:15:52,580 --> 01:15:56,720 and respond to those actions or events with some change. 1429 01:15:56,720 --> 01:16:00,260 So indeed here, lets look underneath the hood, so to speak, at this file 1430 01:16:00,260 --> 01:16:02,810 here, size.html. 1431 01:16:02,810 --> 01:16:06,470 I have my paragraph of text up top here in my p tag 1432 01:16:06,470 --> 01:16:09,500 and below that a new tag, so-called select. 1433 01:16:09,500 --> 01:16:13,190 This select tag is what gives you a drop-down menu on most any website. 1434 01:16:13,190 --> 01:16:16,260 And you can see within that are any number of options. 1435 01:16:16,260 --> 01:16:18,800 Those options happen to have specific values. 1436 01:16:18,800 --> 01:16:22,790 And in between the open and close tags, you have whatever the human sees. 1437 01:16:22,790 --> 01:16:27,560 So you can have just with, as with links, dichotomy between the values 1438 01:16:27,560 --> 01:16:30,500 that are ultimately used and what the human actually sees. 1439 01:16:30,500 --> 01:16:33,090 But in this case, surely, I'd like to be consistent. 1440 01:16:33,090 --> 01:16:35,030 And so I've made them quite the same. 1441 01:16:35,030 --> 01:16:37,850 By default though, I had initial selected 1442 01:16:37,850 --> 01:16:43,010 and that's because I indeed had this attribute with no value "selected" 1443 01:16:43,010 --> 01:16:47,100 on only one and just one of those elements. 1444 01:16:47,100 --> 01:16:50,450 Now if I go down below, I'll see another script tag. 1445 01:16:50,450 --> 01:16:54,290 Again here, I've put it down below so that everything has been read already 1446 01:16:54,290 --> 01:16:56,000 by the browser, top to bottom. 1447 01:16:56,000 --> 01:17:00,320 And here I have now our old friend, query selector. 1448 01:17:00,320 --> 01:17:04,070 Hey, browser, go into the document and select, via query selector, 1449 01:17:04,070 --> 01:17:07,580 the tag called, conveniently, select. 1450 01:17:07,580 --> 01:17:11,870 And on change, when its value changes by way of some interaction, 1451 01:17:11,870 --> 01:17:14,060 go ahead and call the following function. 1452 01:17:14,060 --> 01:17:15,710 As before, that function has no name. 1453 01:17:15,710 --> 01:17:18,950 It's just a block of code, one line in this case. 1454 01:17:18,950 --> 01:17:23,930 And hey, browser, go into the document and select the body, just as before. 1455 01:17:23,930 --> 01:17:30,620 Go into its style and change whatever its font size is to this .value. 1456 01:17:30,620 --> 01:17:33,830 Now this place holder called this is actually 1457 01:17:33,830 --> 01:17:36,590 a variable to which we have implicit access. 1458 01:17:36,590 --> 01:17:39,620 Because this code is associated with that select menu, 1459 01:17:39,620 --> 01:17:43,370 conveniently, in JavaScript this means whatever 1460 01:17:43,370 --> 01:17:46,490 element is an actual play here. 1461 01:17:46,490 --> 01:17:49,220 Now notice that same inconsistency again. 1462 01:17:49,220 --> 01:17:52,340 Font size has this camel case, capital s. 1463 01:17:52,340 --> 01:17:56,660 There again, turns out that JavaScript standardized on and only supports 1464 01:17:56,660 --> 01:18:00,420 this approach, because in JavaScript it turns out if you had a hyphen, 1465 01:18:00,420 --> 01:18:04,410 it would be confused for subtraction, which is not what we want. 1466 01:18:04,410 --> 01:18:10,670 So font size in JavaScript maps to font-size, all lowercase in CSS. 1467 01:18:10,670 --> 01:18:13,310 And so the net effect here is to say, hey, browser, 1468 01:18:13,310 --> 01:18:16,700 change the font size of the body to this value, 1469 01:18:16,700 --> 01:18:19,670 which is whatever the user selected. 1470 01:18:19,670 --> 01:18:21,500 And now, one final flourish. 1471 01:18:21,500 --> 01:18:24,650 An example that uses JavaScript to actually find 1472 01:18:24,650 --> 01:18:27,050 my or, perhaps, your location. 1473 01:18:27,050 --> 01:18:31,460 Indeed, it turns out now browsers today and in turn computers and laptops, 1474 01:18:31,460 --> 01:18:34,670 can figure out where you are with high probability. 1475 01:18:34,670 --> 01:18:38,450 This is all thanks to GPS in our phones and all of these wireless 1476 01:18:38,450 --> 01:18:40,430 access points throughout our world. 1477 01:18:40,430 --> 01:18:43,850 But indeed this can be useful if not a bit invasive. 1478 01:18:43,850 --> 01:18:47,750 But let's see through JavaScript how with just a few lines of code, 1479 01:18:47,750 --> 01:18:49,670 you can achieve this yourself. 1480 01:18:49,670 --> 01:18:52,730 Here then, is a web page geo location .html, 1481 01:18:52,730 --> 01:18:56,060 finding someone's location geographically via code. 1482 01:18:56,060 --> 01:19:00,740 Here in my body, I have a script tag that fairly arcanely says, hey, 1483 01:19:00,740 --> 01:19:04,430 browser, go into your navigator, an historical term, 1484 01:19:04,430 --> 01:19:09,560 and geo location is a feature therein, and get the user's current position. 1485 01:19:09,560 --> 01:19:12,590 That might actually take some number of milliseconds or seconds. 1486 01:19:12,590 --> 01:19:17,870 And so, this says, hey, browser, please call this function when you are done. 1487 01:19:17,870 --> 01:19:19,130 And what is that function? 1488 01:19:19,130 --> 01:19:22,070 Well, it's one that takes an argument, the user's actual position. 1489 01:19:22,070 --> 01:19:26,690 And then as per these curly braces, do the following thing. 1490 01:19:26,690 --> 01:19:30,990 Document.right, that is print to the screen the position.coordinates 1491 01:19:30,990 --> 01:19:35,960 .latitude,position.c oordinates.longitude. 1492 01:19:35,960 --> 01:19:39,800 In other words, if the browser is successful in finding me in this world, 1493 01:19:39,800 --> 01:19:43,280 I will see quite simply on the screen latitude, longitude. 1494 01:19:43,280 --> 01:19:46,160 Well, let's go ahead and open this page in my browser 1495 01:19:46,160 --> 01:19:50,330 and thankfully, my browser first asks, is this OK? 1496 01:19:50,330 --> 01:19:52,310 This page wants to know your location. 1497 01:19:52,310 --> 01:19:57,000 At which point, I can either block that invasive request or allow it. 1498 01:19:57,000 --> 01:19:59,150 Now for pedagogical purposes, we'll proceed 1499 01:19:59,150 --> 01:20:02,330 to allow and some number of seconds later 1500 01:20:02,330 --> 01:20:05,120 after some deep thought and triangulation, 1501 01:20:05,120 --> 01:20:08,030 there is where I apparently am in this world-- 1502 01:20:08,030 --> 01:20:13,413 42,comma-71 with quite a few decimal points of precision. 1503 01:20:13,413 --> 01:20:14,330 Where in fact is that? 1504 01:20:14,330 --> 01:20:18,260 Well, let me go ahead and just copy this now into the familiar Google Maps. 1505 01:20:18,260 --> 01:20:21,260 It turns out with Google Maps you can search not only by address or city 1506 01:20:21,260 --> 01:20:23,900 or state, but also by GPS coordinates. 1507 01:20:23,900 --> 01:20:26,800 And indeed, if I paste those in and hit Enter, 1508 01:20:26,800 --> 01:20:30,890 we'll zoom in on what appears to be, yes, Harvard Law School. 1509 01:20:30,890 --> 01:20:35,840 And in fact, if we turn on now satellite mode, we can see with some probability 1510 01:20:35,840 --> 01:20:38,030 exactly where we are. 1511 01:20:38,030 --> 01:20:42,080 And indeed, it would seem that I'm standing on the steps of Lang Del hall, 1512 01:20:42,080 --> 01:20:45,530 the library here on Harvard Law School's campus, which 1513 01:20:45,530 --> 01:20:47,960 isn't quite right but those are the steps that I 1514 01:20:47,960 --> 01:20:50,040 happen to go in to get here. 1515 01:20:50,040 --> 01:20:55,010 And so your location is only precise within some radius of some sort. 1516 01:20:55,010 --> 01:20:55,730 Why? 1517 01:20:55,730 --> 01:20:57,440 Well, at some point, I entered a building 1518 01:20:57,440 --> 01:20:59,930 where, thankfully, Google doesn't have eyes. 1519 01:20:59,930 --> 01:21:02,330 And so only with some probability can Google 1520 01:21:02,330 --> 01:21:06,050 or any service identify your precise location. 1521 01:21:06,050 --> 01:21:08,750 But surely, in time, will this only get better. 1522 01:21:08,750 --> 01:21:12,200 And so, imagine now if you just pull up Google Maps regularly, 1523 01:21:12,200 --> 01:21:15,530 you might have said allow quite some time ago or perhaps block, 1524 01:21:15,530 --> 01:21:19,010 but this is how Google Maps knows when you pull it out of your pocket 1525 01:21:19,010 --> 01:21:23,900 or open your laptop, where, with some probability, you actually are. 1526 01:21:23,900 --> 01:21:27,080 In the end of the day, anyone can ask that same question 1527 01:21:27,080 --> 01:21:28,940 where is this user in the world? 1528 01:21:28,940 --> 01:21:32,090 And our only defense right now is that block. 1529 01:21:32,090 --> 01:21:34,670 And if you're in the habit all too often, as frankly, 1530 01:21:34,670 --> 01:21:37,400 am I, of just saying allow or allow, well 1531 01:21:37,400 --> 01:21:39,920 you're giving up quite a bit of information. 1532 01:21:39,920 --> 01:21:43,310 Because what the program or website does with that information 1533 01:21:43,310 --> 01:21:45,320 now is entirely up to it. 1534 01:21:45,320 --> 01:21:48,290 It might you be used for good and to show me on a map 1535 01:21:48,290 --> 01:21:49,880 or it could be logged server side. 1536 01:21:49,880 --> 01:21:55,470 Once you have the ability to program, can you do anything with this data. 1537 01:21:55,470 --> 01:21:59,910 That then, is web development, or really only scratching the surface thereof. 1538 01:21:59,910 --> 01:22:03,420 With HTML have we the ability now to structure web pages 1539 01:22:03,420 --> 01:22:05,100 and all of the contents therein. 1540 01:22:05,100 --> 01:22:08,520 With CSS do we have the ability to refine the presentation thereof 1541 01:22:08,520 --> 01:22:10,717 and the size and the color and more. 1542 01:22:10,717 --> 01:22:13,050 And with JavaScript, do we have the ability, ultimately, 1543 01:22:13,050 --> 01:22:17,130 to interact with the user and then do something with that user's input-- 1544 01:22:17,130 --> 01:22:19,830 pass it off to a server or keep it locally, 1545 01:22:19,830 --> 01:22:23,910 and even change the DOM or the underlying code that 1546 01:22:23,910 --> 01:22:27,900 composes that web page on the fly, as we get more and more input and more 1547 01:22:27,900 --> 01:22:28,920 and more data. 1548 01:22:28,920 --> 01:22:33,120 Of course, all of this now is happening, so to speak, client-side within the Mac 1549 01:22:33,120 --> 01:22:35,280 or PC, in the specific browser. 1550 01:22:35,280 --> 01:22:37,830 If we now go back to the server instead, do we 1551 01:22:37,830 --> 01:22:40,950 have even more expressive capabilities, because on servers 1552 01:22:40,950 --> 01:22:44,760 can we use a Python or Ruby or PHP or Java, 1553 01:22:44,760 --> 01:22:48,720 and can we store any volume of data in so-called databases. 1554 01:22:48,720 --> 01:22:51,690 And so whereas, web development here has been client-side, 1555 01:22:51,690 --> 01:22:55,950 the whole ecosystem of web development and more generally web programming, 1556 01:22:55,950 --> 01:23:01,760 has yet more pieces that we can assemble as part of this whole technology stack. 1557 01:23:01,760 --> 01:23:03,001