1 00:00:00,000 --> 00:00:04,830 [PIANO PLAYING] 2 00:00:04,830 --> 00:00:12,079 3 00:00:12,079 --> 00:00:12,620 BRIAN YU: OK. 4 00:00:12,620 --> 00:00:14,330 Welcome back to CS50 Beyond. 5 00:00:14,330 --> 00:00:17,180 Hope everyone's doing all right with the cold weather today. 6 00:00:17,180 --> 00:00:19,050 I know it's a bit chilly getting here. 7 00:00:19,050 --> 00:00:21,633 So for a bit of recap, what we've been doing these past couple 8 00:00:21,633 --> 00:00:24,500 days is we started on day zero with a look at HTML and CSS, 9 00:00:24,500 --> 00:00:27,470 just building web pages, thinking about how to style them, 10 00:00:27,470 --> 00:00:28,940 how to make them more responsive. 11 00:00:28,940 --> 00:00:31,550 We then yesterday, added a server to that, 12 00:00:31,550 --> 00:00:34,100 added a Flask-based web server written in Python, 13 00:00:34,100 --> 00:00:36,950 whereby we could handle different routes to be able to create more 14 00:00:36,950 --> 00:00:38,780 interesting, more dynamic web pages. 15 00:00:38,780 --> 00:00:41,405 And where we're going today is a bit of a continuation of that, 16 00:00:41,405 --> 00:00:44,040 moving from the server side to the client side, in particular, 17 00:00:44,040 --> 00:00:46,940 taking a closer look at JavaScript, which we introduced 18 00:00:46,940 --> 00:00:48,864 and really scratched the surface of CS50. 19 00:00:48,864 --> 00:00:51,530 But there's a lot more to JavaScript than we were able to cover. 20 00:00:51,530 --> 00:00:54,613 So we'll go over a few more of those details, look at some of the nuances, 21 00:00:54,613 --> 00:00:58,050 and look at some of the details of more advanced-- 22 00:00:58,050 --> 00:01:01,875 of newer versions of JavaScript, the latest version, including ES6, 23 00:01:01,875 --> 00:01:04,250 for instance, looking at the features that that offers us 24 00:01:04,250 --> 00:01:06,410 and the types of capabilities that it gives us 25 00:01:06,410 --> 00:01:08,779 in terms of the types of web pages that we can design. 26 00:01:08,779 --> 00:01:10,820 So ultimately, what you want to be thinking about 27 00:01:10,820 --> 00:01:13,700 as we think about JavaScript is where the code is running. 28 00:01:13,700 --> 00:01:16,070 And you can think of this as the distinction 29 00:01:16,070 --> 00:01:17,660 between the server and the client. 30 00:01:17,660 --> 00:01:21,080 The client is your computer, your web browser that you are interacting with, 31 00:01:21,080 --> 00:01:22,910 you're clicking buttons on, for instance. 32 00:01:22,910 --> 00:01:25,790 The server is hosted somewhere else, code running elsewhere 33 00:01:25,790 --> 00:01:26,887 that you're talking to. 34 00:01:26,887 --> 00:01:29,720 Yesterday, when we were writing Flask applications, all of that code 35 00:01:29,720 --> 00:01:31,220 is server code. 36 00:01:31,220 --> 00:01:34,467 Your web page was making the request to some server, where that server might 37 00:01:34,467 --> 00:01:37,550 have been running on your own computer, or maybe it was running on Heroku, 38 00:01:37,550 --> 00:01:39,050 and you had some server running elsewhere, 39 00:01:39,050 --> 00:01:40,587 and it was communicating with that. 40 00:01:40,587 --> 00:01:42,920 But ultimately, you were making requests to that server, 41 00:01:42,920 --> 00:01:44,920 and you were getting responses back. 42 00:01:44,920 --> 00:01:46,790 What JavaScript's going to allow us to do 43 00:01:46,790 --> 00:01:48,710 is to actually run code on the client side, 44 00:01:48,710 --> 00:01:51,380 run code inside of the user's browser, which 45 00:01:51,380 --> 00:01:53,720 is going to give us the ability to create 46 00:01:53,720 --> 00:01:55,670 a lot of really interesting features. 47 00:01:55,670 --> 00:01:59,180 So let's dive in, take a look at what JavaScript has to offer. 48 00:01:59,180 --> 00:02:01,509 And so we'll start with just a very simple HTML web 49 00:02:01,509 --> 00:02:03,050 page, same as what we've done before. 50 00:02:03,050 --> 00:02:08,285 I'll just call it hello.html add in [INAUDIBLE] HTML, 51 00:02:08,285 --> 00:02:12,020 add a header that has a title that's just Hello 52 00:02:12,020 --> 00:02:16,430 and a body that just says maybe Welcome. 53 00:02:16,430 --> 00:02:19,570 And so this is just HTML, plain and simple, what we've seen before. 54 00:02:19,570 --> 00:02:21,320 But what we're going to add today is we're 55 00:02:21,320 --> 00:02:25,160 going to add up in the header section of the web page, a script tag. 56 00:02:25,160 --> 00:02:29,240 And in between these script tags, we're going to have JavaScript code. 57 00:02:29,240 --> 00:02:31,640 So we can include JavaScript, and our web browsers, 58 00:02:31,640 --> 00:02:33,567 all modern web browsers understand JavaScript. 59 00:02:33,567 --> 00:02:35,900 And so we can write JavaScript code here that's actually 60 00:02:35,900 --> 00:02:38,197 going to run inside of the web browser. 61 00:02:38,197 --> 00:02:40,280 And so the simplest thing we could do is something 62 00:02:40,280 --> 00:02:44,312 like alert, which is the equivalent of something like print in Python. 63 00:02:44,312 --> 00:02:46,520 But instead of printing to the terminal window, which 64 00:02:46,520 --> 00:02:49,520 you can also do in JavaScript, and we'll probably do a little bit later, 65 00:02:49,520 --> 00:02:52,460 alert is actually going to display a graphical visual alert 66 00:02:52,460 --> 00:02:53,780 in the user's web browser. 67 00:02:53,780 --> 00:02:58,030 So we can say, alert hello, for instance. 68 00:02:58,030 --> 00:03:02,870 And that is a very basic JavaScript program. 69 00:03:02,870 --> 00:03:07,280 And so I'm going to go ahead and open up hello.html. 70 00:03:07,280 --> 00:03:11,970 And we get this page says hello, this alert that pops up on my screen. 71 00:03:11,970 --> 00:03:12,905 I'm going to press OK. 72 00:03:12,905 --> 00:03:15,440 And OK, it says welcome. 73 00:03:15,440 --> 00:03:18,980 And so this is the very basics of what JavaScript is going to enable us to do. 74 00:03:18,980 --> 00:03:21,320 But JavaScript, of course, has the same sort 75 00:03:21,320 --> 00:03:24,367 of notion of variables and functions and loops and conditions 76 00:03:24,367 --> 00:03:27,200 that any other programming language, like C or Python, does as well. 77 00:03:27,200 --> 00:03:28,940 And we can take advantage of that too. 78 00:03:28,940 --> 00:03:32,180 So in JavaScript, there are a number of different ways 79 00:03:32,180 --> 00:03:35,570 to define variables, although the two most common that we're generally 80 00:03:35,570 --> 00:03:39,010 going to use them are let and const. 81 00:03:39,010 --> 00:03:44,060 So if I wanted to find a variable, let's say let x equal 28, for example, 82 00:03:44,060 --> 00:03:47,510 and then I can alert x just to display an alert message that 83 00:03:47,510 --> 00:03:50,210 has the value of that variable there. 84 00:03:50,210 --> 00:03:54,980 If I go ahead and open up hello.html again, this page says 28, 85 00:03:54,980 --> 00:03:57,230 displays that alert, as I might expect. 86 00:03:57,230 --> 00:03:59,390 And when I define a variable with let, this 87 00:03:59,390 --> 00:04:02,337 is a mutable variable, in other words, a variable that can change. 88 00:04:02,337 --> 00:04:05,420 So if later on down the road I wanted to reset the value of that variable, 89 00:04:05,420 --> 00:04:09,020 set x 50, for example, and then alert x, that's totally fine. 90 00:04:09,020 --> 00:04:13,250 When I refresh this page, this page now says 50. 91 00:04:13,250 --> 00:04:16,610 So let is your standard variable that is mutable. 92 00:04:16,610 --> 00:04:20,649 But JavaScript also has a variable declaration called const. 93 00:04:20,649 --> 00:04:24,900 And if I define a variable with const, const stands for constant. 94 00:04:24,900 --> 00:04:27,900 In other words, this variable's value is not going to change. 95 00:04:27,900 --> 00:04:31,140 And so if I try to change it, that's actually going to cause some errors. 96 00:04:31,140 --> 00:04:34,940 So if I try and run this page now, where I first site const x equals 28 97 00:04:34,940 --> 00:04:38,210 and then x equals 50, trying to reset the value of the variable 98 00:04:38,210 --> 00:04:43,070 that I said would be constant, if I run this, no alert happen. 99 00:04:43,070 --> 00:04:46,500 I see welcome, but I didn't get an alert page when I refreshed the page. 100 00:04:46,500 --> 00:04:49,250 If I go into the Chrome Inspector, or other web browsers 101 00:04:49,250 --> 00:04:52,580 have something similar, and go into the console, what I'll see here 102 00:04:52,580 --> 00:04:56,387 is, all right, uncut type error assignment to constant variable. 103 00:04:56,387 --> 00:04:58,220 In other words, this actually threw an error 104 00:04:58,220 --> 00:05:01,220 and didn't let me make this assignment to a constant variable 105 00:05:01,220 --> 00:05:02,780 because x was constant. 106 00:05:02,780 --> 00:05:04,470 I wasn't allowed to change it. 107 00:05:04,470 --> 00:05:06,890 And so this is a feature that you can and probably should 108 00:05:06,890 --> 00:05:09,650 use in your JavaScript programs whenever you have something 109 00:05:09,650 --> 00:05:11,369 whose value isn't going to change. 110 00:05:11,369 --> 00:05:13,160 If something's value isn't going to change, 111 00:05:13,160 --> 00:05:15,979 it's often safest to define it as a constant variable 112 00:05:15,979 --> 00:05:18,020 so that nobody could ever accidentally change it, 113 00:05:18,020 --> 00:05:21,350 for instance, such that you always know that that variable's value is 114 00:05:21,350 --> 00:05:23,290 going to be constant. 115 00:05:23,290 --> 00:05:26,700 Questions about anything so far? 116 00:05:26,700 --> 00:05:27,820 Yeah? 117 00:05:27,820 --> 00:05:30,650 AUDIENCE: Does the script part always go in the head? 118 00:05:30,650 --> 00:05:33,800 BRIAN YU: Good question, does the script section always go in the head? 119 00:05:33,800 --> 00:05:34,640 Not necessarily. 120 00:05:34,640 --> 00:05:38,620 You can put the script section later on in the body, for instance. 121 00:05:38,620 --> 00:05:41,870 In the lower part of the body is where some people will put their script tags. 122 00:05:41,870 --> 00:05:45,479 Ultimately, HTML is read from top to bottom, much like most anything else. 123 00:05:45,479 --> 00:05:47,270 But we'll often put the script in the head, 124 00:05:47,270 --> 00:05:51,350 in particular, once we start separating code into separate files. 125 00:05:51,350 --> 00:05:55,580 When we start putting things inside of scripts and inside of a JavaScript file 126 00:05:55,580 --> 00:05:58,580 and just including, the same way we might include CSS files, 127 00:05:58,580 --> 00:06:01,890 it's often common to put that code inside of a separate file. 128 00:06:01,890 --> 00:06:04,100 So for instance, I might create a new file 129 00:06:04,100 --> 00:06:07,070 and call it, like, hello.js, for example, which 130 00:06:07,070 --> 00:06:09,050 is just going to be a JavaScript file. 131 00:06:09,050 --> 00:06:11,280 And all this code-- 132 00:06:11,280 --> 00:06:16,310 or maybe I'll put the let x equal 50 here and alert x. 133 00:06:16,310 --> 00:06:19,340 This code is just going to go inside my JavaScript file. 134 00:06:19,340 --> 00:06:25,940 And then what I can do is in this file say, script source equals hello.js 135 00:06:25,940 --> 00:06:29,764 to mean, all right, I'm not going to include the JavaScript inside my HTML. 136 00:06:29,764 --> 00:06:32,180 I'm going to separate the JavaScript into a separate file. 137 00:06:32,180 --> 00:06:35,420 And so this is very common, to put a the script inside of the header, 138 00:06:35,420 --> 00:06:38,300 linking to some JavaScript file that's located elsewhere. 139 00:06:38,300 --> 00:06:40,340 Whereby now if I refresh the page, it still 140 00:06:40,340 --> 00:06:43,550 says 50 because it's pulling in that JavaScript from the other file 141 00:06:43,550 --> 00:06:46,460 and then running it inside of this web page. 142 00:06:46,460 --> 00:06:47,186 Good question. 143 00:06:47,186 --> 00:06:50,060 And I see a couple of people have it open already and are responding. 144 00:06:50,060 --> 00:06:53,018 But feel free to go to the course website, click on the Feedback button 145 00:06:53,018 --> 00:06:55,250 so that you can click on the Smiley Face/Frowny Face 146 00:06:55,250 --> 00:06:57,980 throughout the lecture, in case things make sense 147 00:06:57,980 --> 00:06:59,891 or in case you need clarification on topics. 148 00:06:59,891 --> 00:07:01,640 So I see a couple of yellow faces already. 149 00:07:01,640 --> 00:07:03,122 Questions, yeah? 150 00:07:03,122 --> 00:07:05,017 AUDIENCE: Kind of two questions for this. 151 00:07:05,017 --> 00:07:05,600 BRIAN YU: Yep. 152 00:07:05,600 --> 00:07:08,086 AUDIENCE: One of your imported multiples [INAUDIBLE] 153 00:07:08,086 --> 00:07:11,220 same variable name across two different ones. 154 00:07:11,220 --> 00:07:15,600 Does that count as it trying to-- is it, like, trying to [INAUDIBLE] error? 155 00:07:15,600 --> 00:07:16,850 BRIAN YU: Yeah, good question. 156 00:07:16,850 --> 00:07:18,590 So the question is, if you have, like, maybe two scripts 157 00:07:18,590 --> 00:07:20,840 that are trying to define the same variable name, that 158 00:07:20,840 --> 00:07:22,580 is something you need to be careful of. 159 00:07:22,580 --> 00:07:24,190 The name refers to the variable. 160 00:07:24,190 --> 00:07:27,180 So if you declare a variable once, then try and declare it again, 161 00:07:27,180 --> 00:07:29,705 you run into problems there. 162 00:07:29,705 --> 00:07:32,427 AUDIENCE: And then the other thing, for [INAUDIBLE] should 163 00:07:32,427 --> 00:07:35,150 you use it as something that's only going to be 164 00:07:35,150 --> 00:07:36,902 constant within that particular script? 165 00:07:36,902 --> 00:07:39,110 Or should it be something that's based on [INAUDIBLE] 166 00:07:39,110 --> 00:07:41,485 so that it's constant for each [INAUDIBLE].. 167 00:07:41,485 --> 00:07:44,282 For instance, like a header-based variable or something 168 00:07:44,282 --> 00:07:46,144 along those lines, where you don't want it 169 00:07:46,144 --> 00:07:49,374 to change in the course of that session, but it might be one for each user. 170 00:07:49,374 --> 00:07:50,540 BRIAN YU: Oh, good question. 171 00:07:50,540 --> 00:07:54,390 So the question is, does const mean that it literally, across all users, 172 00:07:54,390 --> 00:07:56,600 anytime anyone is using the page will never change? 173 00:07:56,600 --> 00:07:57,400 Not necessarily. 174 00:07:57,400 --> 00:08:00,230 It just means that once you define what the variable's value is, 175 00:08:00,230 --> 00:08:03,594 it will not change from that point forward while that script is running. 176 00:08:03,594 --> 00:08:05,510 But if that script is running some other time, 177 00:08:05,510 --> 00:08:08,610 that constant value might take on some other value, for instance. 178 00:08:08,610 --> 00:08:10,430 And that's totally OK. 179 00:08:10,430 --> 00:08:11,270 Good question. 180 00:08:11,270 --> 00:08:11,915 Yeah? 181 00:08:11,915 --> 00:08:18,350 AUDIENCE: Can you do a [INAUDIBLE] JS file [INAUDIBLE].. 182 00:08:18,350 --> 00:08:22,310 Can you also, more like a relation-type of word for CSS file, 183 00:08:22,310 --> 00:08:23,800 or do you just have to [INAUDIBLE]? 184 00:08:23,800 --> 00:08:24,400 BRIAN YU: Good question. 185 00:08:24,400 --> 00:08:26,027 All you need is script and then source. 186 00:08:26,027 --> 00:08:29,110 You don't need the rel equal style sheet, the way you would in a CSS file, 187 00:08:29,110 --> 00:08:29,650 for example. 188 00:08:29,650 --> 00:08:31,385 Yeah, just this is sufficient. 189 00:08:31,385 --> 00:08:34,596 190 00:08:34,596 --> 00:08:37,429 OK, we'll keep going in that case, take a look at some other things. 191 00:08:37,429 --> 00:08:42,110 And I'll go ahead and just keep working with hello.html and hello.js. 192 00:08:42,110 --> 00:08:48,650 But let's now actually take a look at trying to manipulate the DOM. 193 00:08:48,650 --> 00:08:50,670 So the DOM is the Document Object Model. 194 00:08:50,670 --> 00:08:52,996 It refers to the general structure of this web page. 195 00:08:52,996 --> 00:08:56,120 And what JavaScript is very good for is actually manipulating the web page, 196 00:08:56,120 --> 00:09:00,750 changing the elements inside of the page to be something different, for example. 197 00:09:00,750 --> 00:09:07,010 So for instance, right here I have a header that says Welcome, for example. 198 00:09:07,010 --> 00:09:09,800 And maybe I want it to do something different. 199 00:09:09,800 --> 00:09:12,210 I want it to change under certain conditions. 200 00:09:12,210 --> 00:09:14,730 And so I might add some code to do that. 201 00:09:14,730 --> 00:09:18,980 So the first thing I'll do is create an event. 202 00:09:18,980 --> 00:09:21,650 And so I'll create a button that's going to trigger an event. 203 00:09:21,650 --> 00:09:25,580 And the button's just going to say Click Here, for example. 204 00:09:25,580 --> 00:09:28,430 And so, OK, let me get rid of everything in the JavaScript file. 205 00:09:28,430 --> 00:09:32,560 So I just have a Welcome heading and a button that says Click Here. 206 00:09:32,560 --> 00:09:34,160 I refresh this page. 207 00:09:34,160 --> 00:09:36,742 And it says, Welcome. 208 00:09:36,742 --> 00:09:38,950 And there's a button underneath that says Click Here. 209 00:09:38,950 --> 00:09:43,502 But of course, clicking here doesn't really do anything, at least not yet. 210 00:09:43,502 --> 00:09:44,460 But I would like it to. 211 00:09:44,460 --> 00:09:49,057 So I'm going to say button on click, give the button an on-click attribute. 212 00:09:49,057 --> 00:09:50,140 This is an event listener. 213 00:09:50,140 --> 00:09:52,720 In other words, I'm saying when the button is clicked on, 214 00:09:52,720 --> 00:09:54,140 run this JavaScript code. 215 00:09:54,140 --> 00:09:55,890 And the code I'm going to run is I'm going 216 00:09:55,890 --> 00:10:01,810 to call a function that's just called hello, for example, so hello and then 217 00:10:01,810 --> 00:10:05,080 two parentheses, same as I would call a function in C or in Python, 218 00:10:05,080 --> 00:10:08,380 for example, just the name of the function and then two parentheses. 219 00:10:08,380 --> 00:10:12,071 But of course, I haven't yet defined a function called hello. 220 00:10:12,071 --> 00:10:15,070 But I can do that in JavaScript, and so simple as in my JavaScript file, 221 00:10:15,070 --> 00:10:18,999 hello.js, having a function called hello. 222 00:10:18,999 --> 00:10:21,290 And then inside this function I can do whatever I want. 223 00:10:21,290 --> 00:10:26,530 So for example, I could do alert hello, just to display an alert message, 224 00:10:26,530 --> 00:10:27,810 for example. 225 00:10:27,810 --> 00:10:30,426 And so I'll go ahead and refresh this page, hello.html. 226 00:10:30,426 --> 00:10:31,300 It just says Welcome. 227 00:10:31,300 --> 00:10:33,200 There's a button that says Click Here. 228 00:10:33,200 --> 00:10:35,710 And when I click on the button, I get an alert. 229 00:10:35,710 --> 00:10:37,690 And that alert says, Hello. 230 00:10:37,690 --> 00:10:38,800 So why did that work? 231 00:10:38,800 --> 00:10:40,690 It's because I have a function called hello. 232 00:10:40,690 --> 00:10:42,220 It displays the alert. 233 00:10:42,220 --> 00:10:46,660 And when I click on the button, that triggers the hello function to run, 234 00:10:46,660 --> 00:10:48,700 and that displays the alert. 235 00:10:48,700 --> 00:10:51,099 So basics of event listeners there. 236 00:10:51,099 --> 00:10:52,890 And so now let's do something a little more 237 00:10:52,890 --> 00:10:55,760 interesting inside this hello function. 238 00:10:55,760 --> 00:11:02,510 I'm going to write something like this, document.queryselector H1 dot inner 239 00:11:02,510 --> 00:11:03,830 HTML equal-- 240 00:11:03,830 --> 00:11:04,910 it said welcome. 241 00:11:04,910 --> 00:11:07,190 We'll change it to hello. 242 00:11:07,190 --> 00:11:10,240 243 00:11:10,240 --> 00:11:12,140 So I'll show you what it does, and then we'll 244 00:11:12,140 --> 00:11:15,320 go back and tease apart what this actually means and how this is working. 245 00:11:15,320 --> 00:11:17,240 We saw this briefly in CS50. 246 00:11:17,240 --> 00:11:19,320 But good to get a refresher on it as well. 247 00:11:19,320 --> 00:11:20,320 So I refreshed the page. 248 00:11:20,320 --> 00:11:21,361 The heading says Welcome. 249 00:11:21,361 --> 00:11:23,510 And there's a button that says Click Here. 250 00:11:23,510 --> 00:11:26,780 And now when I click the button, the Click Here, the word 251 00:11:26,780 --> 00:11:28,830 Welcome changes to the word Hello. 252 00:11:28,830 --> 00:11:31,640 So I've been able to manipulate the DOM, manipulate this page, 253 00:11:31,640 --> 00:11:33,530 change what's actually on the page. 254 00:11:33,530 --> 00:11:34,670 And how did that work? 255 00:11:34,670 --> 00:11:37,370 Well, document.queryselector is a function. 256 00:11:37,370 --> 00:11:42,350 And that function takes as its argument what's effectively a CSS selector, 257 00:11:42,350 --> 00:11:47,840 in the same way that I could specify a tag, like H1, to mean select an H1 tag, 258 00:11:47,840 --> 00:11:48,680 for instance. 259 00:11:48,680 --> 00:11:52,880 Or I could say pound sign, and then the name of some ID, for instance. 260 00:11:52,880 --> 00:11:55,850 Or I could have said dot followed by the name of some class, 261 00:11:55,850 --> 00:11:58,220 like we saw when we were doing CSS two days ago. 262 00:11:58,220 --> 00:12:00,920 You can do the same thing in document.queryselector, 263 00:12:00,920 --> 00:12:06,120 to say select for me something that is an H1 tag. 264 00:12:06,120 --> 00:12:09,150 And take that H1 element, that heading element, 265 00:12:09,150 --> 00:12:15,090 and change its inner HTML, the HTML contained within that HTML element, 266 00:12:15,090 --> 00:12:16,782 and change it to Hello. 267 00:12:16,782 --> 00:12:18,990 So what's going to happen there is it's going to look 268 00:12:18,990 --> 00:12:21,630 throughout my page for an H1 element. 269 00:12:21,630 --> 00:12:24,360 And once it finds the first H1 element in the page, 270 00:12:24,360 --> 00:12:28,120 it's going to go inside of it, go to the inner HTML and change its value. 271 00:12:28,120 --> 00:12:32,021 It's going to change its value to hello, in this case. 272 00:12:32,021 --> 00:12:34,020 And so we're seeing two important concepts here. 273 00:12:34,020 --> 00:12:37,230 Concept number one, event listeners, that when I click on a button, 274 00:12:37,230 --> 00:12:39,270 that triggers an event, the click event. 275 00:12:39,270 --> 00:12:41,160 And that's going to run the hello function. 276 00:12:41,160 --> 00:12:44,160 And concept number two is this idea of DOM manipulation, 277 00:12:44,160 --> 00:12:47,100 that I can select for part of the page, get an element out 278 00:12:47,100 --> 00:12:49,560 of the page programmatically, and update its value, 279 00:12:49,560 --> 00:12:52,590 change the thing on the page, such that this enables us to now 280 00:12:52,590 --> 00:12:55,320 have these dynamic pages that aren't just the same every time, 281 00:12:55,320 --> 00:12:58,170 but that can change in response to events, in response to things 282 00:12:58,170 --> 00:12:59,790 that are happening and so forth. 283 00:12:59,790 --> 00:13:00,754 Yeah? 284 00:13:00,754 --> 00:13:02,670 AUDIENCE: Does this change every single H1 tag 285 00:13:02,670 --> 00:13:04,540 throughout the page or just the first one? 286 00:13:04,540 --> 00:13:05,540 BRIAN YU: Good question. 287 00:13:05,540 --> 00:13:08,660 Does this change every single H1 tag or just the first one? 288 00:13:08,660 --> 00:13:10,310 It only changes the first one. 289 00:13:10,310 --> 00:13:14,965 So if I have another H1 that says some other heading, for example, 290 00:13:14,965 --> 00:13:17,590 and I refresh the page, it says Welcome and Some Other Heading. 291 00:13:17,590 --> 00:13:18,490 I click here. 292 00:13:18,490 --> 00:13:21,650 Welcome changes to Hello, but Some Other Heading stays the same. 293 00:13:21,650 --> 00:13:24,250 And that's because query selector will only select 294 00:13:24,250 --> 00:13:26,920 for the first thing that matches it. 295 00:13:26,920 --> 00:13:29,590 If I wanted to select for all of the H1 elements, 296 00:13:29,590 --> 00:13:32,830 then I'd have to do something like, document.queryselector 297 00:13:32,830 --> 00:13:34,784 all, which is another function that instead 298 00:13:34,784 --> 00:13:36,700 of just selecting for the first thing, selects 299 00:13:36,700 --> 00:13:38,770 for all of the things that match. 300 00:13:38,770 --> 00:13:41,950 But then you can't just say inner HTML because query selector 301 00:13:41,950 --> 00:13:45,070 all doesn't return a single element. 302 00:13:45,070 --> 00:13:47,050 It returns an array of elements. 303 00:13:47,050 --> 00:13:52,270 So what am I do is say something like, OK, const headings 304 00:13:52,270 --> 00:13:54,820 equals document.queryselector all H1. 305 00:13:54,820 --> 00:13:57,340 In other words, get me all of the headings, 306 00:13:57,340 --> 00:13:59,350 and that's going to be an array, and let's save 307 00:13:59,350 --> 00:14:02,800 that array inside of a variable called headings. 308 00:14:02,800 --> 00:14:06,400 And now what I can do is I can do what's effectively a for loop. 309 00:14:06,400 --> 00:14:09,310 And the for loop syntax in JavaScript looks something like this. 310 00:14:09,310 --> 00:14:14,850 I would say for const heading of headings. 311 00:14:14,850 --> 00:14:19,160 And I can say const here because when I have the heading, like each heading is 312 00:14:19,160 --> 00:14:20,330 going to be called heading. 313 00:14:20,330 --> 00:14:23,150 But in the context of the for loop, I'm never going to change the heading. 314 00:14:23,150 --> 00:14:24,560 Even though the heading is going to change 315 00:14:24,560 --> 00:14:26,720 every time the next iteration of the loop happens, 316 00:14:26,720 --> 00:14:30,410 within any one iteration of the loop, the heading doesn't change. 317 00:14:30,410 --> 00:14:36,554 And now I'm just going to say heading.inner HTML equals hello. 318 00:14:36,554 --> 00:14:38,470 We'll take a look at what's actually happening 319 00:14:38,470 --> 00:14:40,440 and then look at why it works. 320 00:14:40,440 --> 00:14:41,290 So refresh the page. 321 00:14:41,290 --> 00:14:44,580 I get two headings, Welcome and Some Other Heading. 322 00:14:44,580 --> 00:14:48,130 I click here, and they both change to Hello. 323 00:14:48,130 --> 00:14:49,440 So again, why did that work? 324 00:14:49,440 --> 00:14:52,840 On line two, I query for all the headings, store them in an array, 325 00:14:52,840 --> 00:14:55,280 save that inside of a variable called headings. 326 00:14:55,280 --> 00:14:58,540 On line three, I create a for loop, looping over each of those headings. 327 00:14:58,540 --> 00:15:00,400 We'll call each one just heading. 328 00:15:00,400 --> 00:15:03,400 And then for each of those headings, I'm taking the inner HTML 329 00:15:03,400 --> 00:15:06,936 and setting that equal to hello. 330 00:15:06,936 --> 00:15:08,060 What questions do you have? 331 00:15:08,060 --> 00:15:08,697 Yeah? 332 00:15:08,697 --> 00:15:15,375 AUDIENCE: Does the JavaScript file to be in a specific file for either the HTML 333 00:15:15,375 --> 00:15:17,674 [INAUDIBLE] function? 334 00:15:17,674 --> 00:15:18,840 BRIAN YU: Oh, good question. 335 00:15:18,840 --> 00:15:20,880 Does the JavaScript file need to be in a specific place? 336 00:15:20,880 --> 00:15:23,463 In this case right here, where I'm just opening the HTML file, 337 00:15:23,463 --> 00:15:26,490 the JavaScript file needs to be in the same directory. 338 00:15:26,490 --> 00:15:28,560 And when you're building web applications 339 00:15:28,560 --> 00:15:30,870 on the server, for instance, with like Flask, 340 00:15:30,870 --> 00:15:33,600 you'll want to store the JavaScript file probably 341 00:15:33,600 --> 00:15:35,241 inside of a directory called static. 342 00:15:35,241 --> 00:15:36,990 It's what we would consider a static file. 343 00:15:36,990 --> 00:15:38,972 The JavaScript file itself doesn't change. 344 00:15:38,972 --> 00:15:40,680 And Flask has a special way of serving up 345 00:15:40,680 --> 00:15:44,796 static files that most web servers do as well. 346 00:15:44,796 --> 00:15:45,780 Other things? 347 00:15:45,780 --> 00:15:48,900 348 00:15:48,900 --> 00:15:52,020 How do we feel about this general idea, these ideas of event listener 349 00:15:52,020 --> 00:15:55,440 is waiting for an event to happen and then performing some action based on it 350 00:15:55,440 --> 00:16:00,270 and then manipulating the DOM, actually changing things on the page in response 351 00:16:00,270 --> 00:16:03,140 to what's happening? 352 00:16:03,140 --> 00:16:05,760 All right, so mostly green, but some yellow and some red. 353 00:16:05,760 --> 00:16:09,210 So happy to pause and take questions, if there are more questions. 354 00:16:09,210 --> 00:16:13,820 Or I can just show another example, if that would be helpful as well. 355 00:16:13,820 --> 00:16:15,512 All right, let's do another example. 356 00:16:15,512 --> 00:16:16,470 I'll create a new file. 357 00:16:16,470 --> 00:16:18,910 I'll call it counter.html. 358 00:16:18,910 --> 00:16:23,020 And I'll just copy what's in hello.html for now. 359 00:16:23,020 --> 00:16:28,380 What I'm going to do is create a JavaScript file called counter.js. 360 00:16:28,380 --> 00:16:30,690 What I'm going to do is create an application 361 00:16:30,690 --> 00:16:33,750 that just allows me to keep a counter, sort of like those click counters 362 00:16:33,750 --> 00:16:37,180 that you can use to keep tally of attendance at something, for instance. 363 00:16:37,180 --> 00:16:39,702 I'm going to define an H1. 364 00:16:39,702 --> 00:16:42,660 And then I'm going to give it an ID, just to make it easy to reference. 365 00:16:42,660 --> 00:16:44,700 And I'll give it an ID of counter. 366 00:16:44,700 --> 00:16:46,860 And it's going to start at zero. 367 00:16:46,860 --> 00:16:48,730 And I'm going to have a button. 368 00:16:48,730 --> 00:16:54,120 When I click on the button, we're going to run the count function. 369 00:16:54,120 --> 00:17:00,020 And the button is going to say Click Here. 370 00:17:00,020 --> 00:17:03,620 So I have a heading that's going to display the number zero 371 00:17:03,620 --> 00:17:06,410 and a button that's just going to say Click Here. 372 00:17:06,410 --> 00:17:09,740 And if I open counter.html, here's what I see, right? 373 00:17:09,740 --> 00:17:13,050 I see the number zero, and I see a button that says called Click Here. 374 00:17:13,050 --> 00:17:14,960 But if I click on it right now, nothing's going to happen. 375 00:17:14,960 --> 00:17:16,834 I'm, in fact, going to get an error because I 376 00:17:16,834 --> 00:17:19,290 haven't defined this count function. 377 00:17:19,290 --> 00:17:20,119 So let's define it. 378 00:17:20,119 --> 00:17:24,560 Inside of counter.js, here's the code I'm going to include. 379 00:17:24,560 --> 00:17:28,940 I'm going to have a variable, let counter equal 0. 380 00:17:28,940 --> 00:17:31,914 And then I'm going to have a function, a function called count. 381 00:17:31,914 --> 00:17:34,580 And when the count function is run, the first thing I want to do 382 00:17:34,580 --> 00:17:37,592 is take my counter variable and increment it, increase it by one. 383 00:17:37,592 --> 00:17:39,050 And there are many ways to do this. 384 00:17:39,050 --> 00:17:41,540 I could do counter equals counter plus 1. 385 00:17:41,540 --> 00:17:44,304 I could simplify that to just counter plus equals 1. 386 00:17:44,304 --> 00:17:46,970 Or if I'm only incrementing by one, the simplest way to say this 387 00:17:46,970 --> 00:17:50,870 is just counter plus plus, increase the value of counter by 1. 388 00:17:50,870 --> 00:17:57,660 And then I'll say document.queryselector pound counter, in other words, 389 00:17:57,660 --> 00:18:05,620 get the thing that has an ID of counter, which was this H1 tag right over here, 390 00:18:05,620 --> 00:18:10,050 and set its inner HTML to be whatever the current value of my counter 391 00:18:10,050 --> 00:18:13,180 variable is. 392 00:18:13,180 --> 00:18:15,240 So let's see what happens. 393 00:18:15,240 --> 00:18:16,270 I have zero. 394 00:18:16,270 --> 00:18:16,870 I click here. 395 00:18:16,870 --> 00:18:18,277 And the number now is one. 396 00:18:18,277 --> 00:18:18,860 I click again. 397 00:18:18,860 --> 00:18:19,401 Now it's two. 398 00:18:19,401 --> 00:18:22,270 And every time I click, the value of the counter goes up, 399 00:18:22,270 --> 00:18:26,180 and the page updates to reflect that counter. 400 00:18:26,180 --> 00:18:27,720 And so again, what's happening here? 401 00:18:27,720 --> 00:18:30,710 I'm defining a variable on line one, let counter equal 0, 402 00:18:30,710 --> 00:18:33,650 using let not const because the value of counter's going to change. 403 00:18:33,650 --> 00:18:37,100 I want to be able to update the value of counter throughout this program. 404 00:18:37,100 --> 00:18:39,890 Then I have a function which is going to actually do the counting. 405 00:18:39,890 --> 00:18:41,960 And it increments the value of the variable 406 00:18:41,960 --> 00:18:45,920 and then manipulates the DOM, updates the contents of the actual page 407 00:18:45,920 --> 00:18:49,040 to reflect whatever the value of the variable is. 408 00:18:49,040 --> 00:18:49,540 Yeah? 409 00:18:49,540 --> 00:18:55,384 AUDIENCE: Should there be like a pop-up window in JavaScript or [INAUDIBLE]?? 410 00:18:55,384 --> 00:18:56,050 BRIAN YU: Sorry. 411 00:18:56,050 --> 00:18:56,945 Repeat that. 412 00:18:56,945 --> 00:18:59,844 AUDIENCE: So isn't there usually like a pop-up window 413 00:18:59,844 --> 00:19:01,810 for when you do JavaScript? 414 00:19:01,810 --> 00:19:04,870 How do you get it so that doesn't show the pop-up? 415 00:19:04,870 --> 00:19:08,376 BRIAN YU: The pop-up window-- so I was able to use the alert function, 416 00:19:08,376 --> 00:19:11,250 if that's what your referring to, in order to create a pop-up window. 417 00:19:11,250 --> 00:19:13,500 But there's no alert function being used in this code. 418 00:19:13,500 --> 00:19:15,510 And so we're not going to get any pop-up when 419 00:19:15,510 --> 00:19:18,792 I'm trying to run the JavaScript code, for instance. 420 00:19:18,792 --> 00:19:21,500 Yeah, can use JavaScript to create alerts, but you don't need to. 421 00:19:21,500 --> 00:19:24,050 In fact, most of the time manipulating the DOM 422 00:19:24,050 --> 00:19:29,148 is one of the primary use cases the JavaScript can be good for. 423 00:19:29,148 --> 00:19:29,648 Yeah? 424 00:19:29,648 --> 00:19:34,085 AUDIENCE: This one, like, just like the [INAUDIBLE],, 425 00:19:34,085 --> 00:19:38,210 that they would just change the first one with [INAUDIBLE],, right? 426 00:19:38,210 --> 00:19:39,210 BRIAN YU: Good question. 427 00:19:39,210 --> 00:19:41,760 Yes, query selector is only going to select the first thing. 428 00:19:41,760 --> 00:19:43,676 But in the case of IDs, there should only ever 429 00:19:43,676 --> 00:19:45,390 be one thing because IDs are unique. 430 00:19:45,390 --> 00:19:47,681 And so when you select for an ID, it would be a mistake 431 00:19:47,681 --> 00:19:51,300 if you had two things with the same ID in the same HTML page. 432 00:19:51,300 --> 00:19:52,530 Is there question here? 433 00:19:52,530 --> 00:19:53,175 Yeah? 434 00:19:53,175 --> 00:19:54,165 AUDIENCE: Yeah. 435 00:19:54,165 --> 00:19:58,140 Can you explain again why you use const for heading earlier? 436 00:19:58,140 --> 00:19:58,302 437 00:19:58,302 --> 00:19:59,010 BRIAN YU: Oh, OK. 438 00:19:59,010 --> 00:20:01,817 So the question is why earlier did I use const for headings when 439 00:20:01,817 --> 00:20:03,400 I had all of those different headings? 440 00:20:03,400 --> 00:20:05,940 It was because that array of headings never changed. 441 00:20:05,940 --> 00:20:08,242 I was never going to add something to that array, 442 00:20:08,242 --> 00:20:11,200 or I was never going to change it to be a different array, for example. 443 00:20:11,200 --> 00:20:13,470 The real thing is I wasn't going to change it to be a different array. 444 00:20:13,470 --> 00:20:15,630 Because it was always going to be the same array, 445 00:20:15,630 --> 00:20:17,560 that's why I was able to use const. 446 00:20:17,560 --> 00:20:21,971 AUDIENCE: You could then change each individual element inside the array? 447 00:20:21,971 --> 00:20:22,970 BRIAN YU: Good question. 448 00:20:22,970 --> 00:20:26,720 I was able to modify the contents of the elements. 449 00:20:26,720 --> 00:20:29,010 But the array itself didn't change. 450 00:20:29,010 --> 00:20:32,010 So the contents, I was able to update and manipulate their values. 451 00:20:32,010 --> 00:20:34,580 But these were still the same two headings. 452 00:20:34,580 --> 00:20:36,630 I just changed what was inside of them. 453 00:20:36,630 --> 00:20:37,550 Yeah. 454 00:20:37,550 --> 00:20:39,128 Yeah? 455 00:20:39,128 --> 00:20:41,508 AUDIENCE: So [INAUDIBLE]? 456 00:20:41,508 --> 00:20:44,624 457 00:20:44,624 --> 00:20:45,790 BRIAN YU: Oh, good question. 458 00:20:45,790 --> 00:20:49,660 So there also is a function called document.getElementById 459 00:20:49,660 --> 00:20:52,220 that you can use to get something by its ID as well. 460 00:20:52,220 --> 00:20:53,110 You can use that too. 461 00:20:53,110 --> 00:20:55,540 Query selector's a little bit newer and is a little more robust, 462 00:20:55,540 --> 00:20:58,300 in that allows you to select by different things, for instance. 463 00:20:58,300 --> 00:21:01,060 But you can definitely use getElementById as well. 464 00:21:01,060 --> 00:21:03,220 We'll be using query selector just for consistency. 465 00:21:03,220 --> 00:21:05,120 But getElementById will work, too. 466 00:21:05,120 --> 00:21:08,120 Often in JavaScript there are multiple ways of achieving the same thing. 467 00:21:08,120 --> 00:21:13,240 468 00:21:13,240 --> 00:21:17,420 All right, let's do another example. 469 00:21:17,420 --> 00:21:19,270 We'll add a little bit of complexity here. 470 00:21:19,270 --> 00:21:21,645 So one thing that you'll notice here is that right now we 471 00:21:21,645 --> 00:21:25,840 have button on click equals count, meaning that inside of my HTML 472 00:21:25,840 --> 00:21:29,620 I have JavaScript code for what happens when a button is clicked on. 473 00:21:29,620 --> 00:21:32,670 Oftentimes for design reasons we want to separate out the JavaScript, 474 00:21:32,670 --> 00:21:37,810 sort of put it into its own file, into the JavaScript 475 00:21:37,810 --> 00:21:41,500 file so that I don't have the JavaScript and HTML commingling 476 00:21:41,500 --> 00:21:43,820 together inside of the same file. 477 00:21:43,820 --> 00:21:47,701 So what I might do is instead of saying, button on click equals count, 478 00:21:47,701 --> 00:21:50,200 I can move this to the JavaScript file, much in the same way 479 00:21:50,200 --> 00:21:53,710 that two days ago when we were looking at CSS we were able to say, all right, 480 00:21:53,710 --> 00:21:57,220 instead of having inline CSS right next to the element in a style 481 00:21:57,220 --> 00:22:01,120 attribute, we move the CSS either into the header or into a separate file, 482 00:22:01,120 --> 00:22:02,060 for instance. 483 00:22:02,060 --> 00:22:04,000 And so I can do the same thing here, too. 484 00:22:04,000 --> 00:22:05,860 What I would like to be able to do is say 485 00:22:05,860 --> 00:22:12,752 document dot query selector button on click equals count. 486 00:22:12,752 --> 00:22:14,710 I'd like to be able to say something like that, 487 00:22:14,710 --> 00:22:17,980 select a button, and when you click, when you get clicked, 488 00:22:17,980 --> 00:22:22,860 run the count function, just add this sort of code to counter dot JS. 489 00:22:22,860 --> 00:22:26,990 And so now if I refresh this page and click here-- 490 00:22:26,990 --> 00:22:29,600 OK, nothing's happening. 491 00:22:29,600 --> 00:22:32,350 Any thoughts as to why? 492 00:22:32,350 --> 00:22:35,740 This is a little bit subtle, but there is a small bug 493 00:22:35,740 --> 00:22:37,000 that I've created, an error. 494 00:22:37,000 --> 00:22:40,820 495 00:22:40,820 --> 00:22:45,960 So recall a moment ago, I said that HTML pages are read from top to bottom. 496 00:22:45,960 --> 00:22:48,860 So my web browser is looking at this HTML page from top to bottom. 497 00:22:48,860 --> 00:22:51,240 It's going through the HTML header, title. 498 00:22:51,240 --> 00:22:52,832 OK, here's the script. 499 00:22:52,832 --> 00:22:55,790 And at the point that it hits the script, it's going to run the script. 500 00:22:55,790 --> 00:22:57,998 And when it runs the script, it's going to first run, 501 00:22:57,998 --> 00:22:59,720 all right, let's get the button. 502 00:22:59,720 --> 00:23:03,220 But at this point in time, the page doesn't have a button yet. 503 00:23:03,220 --> 00:23:04,970 If I'm reading the page from top to bottom 504 00:23:04,970 --> 00:23:08,450 and I hit document dot query selector button on line five, 505 00:23:08,450 --> 00:23:12,740 well, the button isn't defined until later on, on line nine. 506 00:23:12,740 --> 00:23:14,990 So the [INAUDIBLE] hasn't fully been loaded yet 507 00:23:14,990 --> 00:23:17,480 because I'm only on line five of this HTML file, 508 00:23:17,480 --> 00:23:19,340 and so there's no button to select. 509 00:23:19,340 --> 00:23:22,430 And so there's no way to say when the button is clicked on, 510 00:23:22,430 --> 00:23:24,540 run the count function. 511 00:23:24,540 --> 00:23:27,680 Is that nuance clear as to why this isn't quite working? 512 00:23:27,680 --> 00:23:28,220 All right. 513 00:23:28,220 --> 00:23:29,460 So how do we fix this? 514 00:23:29,460 --> 00:23:30,180 Yeah, question. 515 00:23:30,180 --> 00:23:33,770 AUDIENCE: If you put the script back from the bottom, would that be helpful? 516 00:23:33,770 --> 00:23:34,770 BRIAN YU: Good question. 517 00:23:34,770 --> 00:23:36,030 We put the script tag at the bottom? 518 00:23:36,030 --> 00:23:37,720 Yes, that would certainly fix the issue. 519 00:23:37,720 --> 00:23:39,430 But we'd like to keep the script in the header 520 00:23:39,430 --> 00:23:41,440 because that's often where scripts are going to go. 521 00:23:41,440 --> 00:23:44,356 And so we can come up with other ways of solving this problem as well, 522 00:23:44,356 --> 00:23:47,440 and probably the most common way is to have something like this-- 523 00:23:47,440 --> 00:23:52,090 document dot ad event listener DOM content loaded. 524 00:23:52,090 --> 00:23:56,120 525 00:23:56,120 --> 00:24:00,700 And then put the event listener inside of that. 526 00:24:00,700 --> 00:24:03,490 So this is a lot of sort of strange looking syntax. 527 00:24:03,490 --> 00:24:04,450 We'll tease it apart. 528 00:24:04,450 --> 00:24:06,790 This is all in the lecture source code examples, 529 00:24:06,790 --> 00:24:09,123 which are online now if you want to take a look at them. 530 00:24:09,123 --> 00:24:10,450 But what's going on here? 531 00:24:10,450 --> 00:24:14,607 Document dot ad event listener is saying let's take the document, this web page, 532 00:24:14,607 --> 00:24:15,940 and add an event listener to it. 533 00:24:15,940 --> 00:24:17,740 Let's listen for something. 534 00:24:17,740 --> 00:24:19,540 And what event am I listening for? 535 00:24:19,540 --> 00:24:23,140 I'm listening for a special event called DOM content loaded. 536 00:24:23,140 --> 00:24:25,420 DOM, remember, is the Document Object Model. 537 00:24:25,420 --> 00:24:28,540 And so when I say add event listener DOM content loaded, what 538 00:24:28,540 --> 00:24:33,130 I'm saying is let's wait for all of the DOM to finish loading, 539 00:24:33,130 --> 00:24:35,380 all of the buttons and the headings and the forums 540 00:24:35,380 --> 00:24:38,980 and whatever else might be inside of my HTML page, wait for all of the elements 541 00:24:38,980 --> 00:24:40,000 to finish loading. 542 00:24:40,000 --> 00:24:44,060 And when everything's done loading, then run this function, 543 00:24:44,060 --> 00:24:46,460 the function that comes after it. 544 00:24:46,460 --> 00:24:49,060 So whereas before when I was just reading top to bottom, 545 00:24:49,060 --> 00:24:52,690 the take the button and when it's clicked on run the count function, 546 00:24:52,690 --> 00:24:55,480 that happened right away before the DOM was done loading. 547 00:24:55,480 --> 00:24:58,090 Now I'm saying, all right, all this code that I want to run, 548 00:24:58,090 --> 00:25:00,475 I only want it to run after the DOM is done loading. 549 00:25:00,475 --> 00:25:03,100 And so that's what this beginning part of the script is saying. 550 00:25:03,100 --> 00:25:05,470 Wait until the whole page is done loading 551 00:25:05,470 --> 00:25:08,500 and then run the JavaScript code. 552 00:25:08,500 --> 00:25:13,700 So the syntax looks a little bit funky, but with practice you'll 553 00:25:13,700 --> 00:25:17,690 find that this notion of passing in functions as arguments 554 00:25:17,690 --> 00:25:20,690 to other functions is something you'll see quite commonly in JavaScript. 555 00:25:20,690 --> 00:25:21,810 And yeah, question. 556 00:25:21,810 --> 00:25:23,810 AUDIENCE: Would you be able to do the same thing 557 00:25:23,810 --> 00:25:28,660 if the button was dynamically created or generated on the page? 558 00:25:28,660 --> 00:25:29,660 BRIAN YU: Good question. 559 00:25:29,660 --> 00:25:32,750 Would you be able to do the same thing if the button were dynamically 560 00:25:32,750 --> 00:25:35,120 created or generated on the page? 561 00:25:35,120 --> 00:25:36,560 Yes, you could. 562 00:25:36,560 --> 00:25:40,400 The DOM content loaded just refers to all the content initially on the page, 563 00:25:40,400 --> 00:25:43,130 so when all that is loaded this function will run. 564 00:25:43,130 --> 00:25:46,220 But certainly, , as we'll soon se when we get to this morning's project, 565 00:25:46,220 --> 00:25:49,880 we will be adding buttons to the page dynamically and adding event listeners 566 00:25:49,880 --> 00:25:50,597 to those. 567 00:25:50,597 --> 00:25:52,430 And so you can do similar things there, too. 568 00:25:52,430 --> 00:25:53,060 Yeah. 569 00:25:53,060 --> 00:25:55,510 AUDIENCE: Um, on the second line [INAUDIBLE].. 570 00:25:55,510 --> 00:26:03,304 571 00:26:03,304 --> 00:26:04,470 BRIAN YU: Oh, good question. 572 00:26:04,470 --> 00:26:07,870 Yeah, this is actually a really interesting point about JavaScript. 573 00:26:07,870 --> 00:26:10,540 What am I passing in as the value of on click? 574 00:26:10,540 --> 00:26:12,340 I'm passing in count. 575 00:26:12,340 --> 00:26:13,690 And what is count exactly? 576 00:26:13,690 --> 00:26:17,920 Count, defined here on line seven, is a function. 577 00:26:17,920 --> 00:26:19,990 And so JavaScript does something interesting 578 00:26:19,990 --> 00:26:23,590 which is it lets me treat functions as values. 579 00:26:23,590 --> 00:26:30,100 I can take a function and set it equal to some variable or some value, 580 00:26:30,100 --> 00:26:32,260 and you can treat functions the same way that you 581 00:26:32,260 --> 00:26:36,130 treat integers or strings or floating point numbers or arrays 582 00:26:36,130 --> 00:26:39,130 or any other type of data in other languages. 583 00:26:39,130 --> 00:26:42,220 And this is a bit of a tricky concept to wrap your mind around at first. 584 00:26:42,220 --> 00:26:47,260 This has to do with getting towards this idea of functional programming, 585 00:26:47,260 --> 00:26:49,390 passing in functions into other functions 586 00:26:49,390 --> 00:26:51,790 and using functions in this way. 587 00:26:51,790 --> 00:26:56,350 And this is quite powerful because if I were to put parentheses after count, 588 00:26:56,350 --> 00:27:00,610 that would actually run the count function right now on line two. 589 00:27:00,610 --> 00:27:03,190 It would run the count function and set whatever 590 00:27:03,190 --> 00:27:06,880 its return value is equal to this. 591 00:27:06,880 --> 00:27:09,160 But I don't want to run the count function now. 592 00:27:09,160 --> 00:27:13,250 I want to say, when the button is clicked, then run the function. 593 00:27:13,250 --> 00:27:16,390 And so by just passing and count, no parentheses, 594 00:27:16,390 --> 00:27:18,160 I'm not running the function. 595 00:27:18,160 --> 00:27:23,110 I'm just passing in the function providing it as the value of on click, 596 00:27:23,110 --> 00:27:27,790 so that when the button is clicked, then it's going to run the function. 597 00:27:27,790 --> 00:27:31,240 So this is a little bit tricky, but this idea is that I can take a function 598 00:27:31,240 --> 00:27:34,870 and rather than run it, just pass it around as a value 599 00:27:34,870 --> 00:27:37,240 and save it inside of a variable, provide it 600 00:27:37,240 --> 00:27:41,000 as the value of on click, the on click attribute of the button, for example, 601 00:27:41,000 --> 00:27:43,860 and use it in that way. 602 00:27:43,860 --> 00:27:44,430 Questions? 603 00:27:44,430 --> 00:27:44,930 Yeah. 604 00:27:44,930 --> 00:27:47,598 AUDIENCE: Why would you always want to have event listener, 605 00:27:47,598 --> 00:27:53,320 have your Java scripts run after the entire HTML page? 606 00:27:53,320 --> 00:27:54,970 BRIAN YU: Why would you-- 607 00:27:54,970 --> 00:27:58,894 AUDIENCE: Why wouldn't you always just want to event listener for JavaScript? 608 00:27:58,894 --> 00:28:00,810 BRIAN YU: Why wouldn't you always want to have 609 00:28:00,810 --> 00:28:02,580 an event listener for your JavaScript? 610 00:28:02,580 --> 00:28:05,670 Oftentimes you do just want to have an event listener for your JavaScript, 611 00:28:05,670 --> 00:28:08,190 although your functions can exist outside of that. 612 00:28:08,190 --> 00:28:11,511 So this function, count, for example, none of that code 613 00:28:11,511 --> 00:28:14,260 is actually going to run until I actually call the count function, 614 00:28:14,260 --> 00:28:16,650 a so it doesn't need to be inside of this 615 00:28:16,650 --> 00:28:19,789 add event listener because it's not going to run anyways until I 616 00:28:19,789 --> 00:28:21,330 call the count function, for example. 617 00:28:21,330 --> 00:28:25,029 618 00:28:25,029 --> 00:28:25,570 Other things? 619 00:28:25,570 --> 00:28:27,260 I know this notion of passing around functions 620 00:28:27,260 --> 00:28:29,970 is a little bit tricky, but hopefully with a couple more examples it'll 621 00:28:29,970 --> 00:28:30,970 become a little clearer. 622 00:28:30,970 --> 00:28:34,780 623 00:28:34,780 --> 00:28:36,265 Yeah? 624 00:28:36,265 --> 00:28:45,175 AUDIENCE: For DOM content load [INAUDIBLE] once everything [INAUDIBLE] 625 00:28:45,175 --> 00:28:48,145 after a certain [INAUDIBLE]. 626 00:28:48,145 --> 00:28:51,640 627 00:28:51,640 --> 00:28:54,690 BRIAN YU: So DOM content loaded will wait until everything is done. 628 00:28:54,690 --> 00:28:57,310 There is no specific event for after half of the page 629 00:28:57,310 --> 00:28:58,680 is loaded, for instance. 630 00:28:58,680 --> 00:29:01,290 But wherever you put your script and that 631 00:29:01,290 --> 00:29:03,630 is where that script is going to run. 632 00:29:03,630 --> 00:29:06,930 And so if you were to add script tags in other places throughout the page, 633 00:29:06,930 --> 00:29:10,320 you could get a script that runs before all of the rest of the content 634 00:29:10,320 --> 00:29:11,380 has loaded for instance. 635 00:29:11,380 --> 00:29:13,020 And that's something that you could do. 636 00:29:13,020 --> 00:29:14,270 Is there a question over here? 637 00:29:14,270 --> 00:29:15,060 Yeah. 638 00:29:15,060 --> 00:29:18,300 AUDIENCE: So how is this better than just adding on click 639 00:29:18,300 --> 00:29:20,260 is equal to [INAUDIBLE]? 640 00:29:20,260 --> 00:29:26,520 641 00:29:26,520 --> 00:29:29,700 BRIAN YU: So the question is why is this any better than just adding button 642 00:29:29,700 --> 00:29:31,110 on click equals something? 643 00:29:31,110 --> 00:29:33,210 Why should I do this programmatically? 644 00:29:33,210 --> 00:29:36,259 Doing it programmatically gives us a little bit more flexibility 645 00:29:36,259 --> 00:29:38,550 in the sense that right now, yeah, this is no different 646 00:29:38,550 --> 00:29:40,450 than if I just said on click equals count. 647 00:29:40,450 --> 00:29:43,496 You can imagine a situation where maybe on click-- 648 00:29:43,496 --> 00:29:45,870 I don't necessarily always want to run the same function. 649 00:29:45,870 --> 00:29:48,286 Maybe I want to run one of a couple of different functions 650 00:29:48,286 --> 00:29:51,870 and I want to programmatically be able to decide which function to run. 651 00:29:51,870 --> 00:29:54,300 This ability to use this variable account 652 00:29:54,300 --> 00:29:57,600 and pass it around as a value means that I could do something like that, 653 00:29:57,600 --> 00:30:00,960 means that I could pick and choose, do things programmatically, add some more 654 00:30:00,960 --> 00:30:02,140 logic to this program. 655 00:30:02,140 --> 00:30:04,140 And so doing it in the JavaScript side of things 656 00:30:04,140 --> 00:30:07,881 just gives us a little bit more flexibility in that sense. 657 00:30:07,881 --> 00:30:08,822 Yeah? 658 00:30:08,822 --> 00:30:10,863 AUDIENCE: If you want to have multiple functions, 659 00:30:10,863 --> 00:30:19,312 say that the count function [INAUDIBLE] different functions, at the very top, 660 00:30:19,312 --> 00:30:24,282 you have a document as a [INAUDIBLE] have function, 661 00:30:24,282 --> 00:30:28,279 [INAUDIBLE] all the functions in JavaScript or just-- 662 00:30:28,279 --> 00:30:28,820 BRIAN YU: Oh. 663 00:30:28,820 --> 00:30:32,570 So the question is, what exactly is this function doing? 664 00:30:32,570 --> 00:30:38,360 This function is actually being provided as an argument to add event listener. 665 00:30:38,360 --> 00:30:40,490 This is a function that I'm saying, this is 666 00:30:40,490 --> 00:30:44,210 the function that should run when the DOM content is loaded. 667 00:30:44,210 --> 00:30:46,700 And so I could have other functions here like hello that 668 00:30:46,700 --> 00:30:49,732 get triggered on other buttons, but this function itself, 669 00:30:49,732 --> 00:30:51,440 this is just a function that's describing 670 00:30:51,440 --> 00:30:55,070 what code is going to run when the DOM content is done loading. 671 00:30:55,070 --> 00:30:59,240 I could have separated this out and said let's take this function 672 00:30:59,240 --> 00:31:05,220 and call this function start for what to do when you start running the program. 673 00:31:05,220 --> 00:31:09,330 And I could have said, document dot add event listener, when the DOM content is 674 00:31:09,330 --> 00:31:11,481 done loading, run the function start. 675 00:31:11,481 --> 00:31:13,230 And then so that's what would happen then. 676 00:31:13,230 --> 00:31:16,050 When the DOM content is loaded, we would run the function start, 677 00:31:16,050 --> 00:31:17,580 and here is that function. 678 00:31:17,580 --> 00:31:20,100 But oftentimes if all I'm doing is naming a function 679 00:31:20,100 --> 00:31:23,550 so that I can provide it as the argument to something like an event listener, 680 00:31:23,550 --> 00:31:28,170 for instance, it can be more succinct just to take the whole function 681 00:31:28,170 --> 00:31:32,572 and plug it in as the argument to add event listener, and in this case, 682 00:31:32,572 --> 00:31:35,280 not even bother to give it a name because it doesn't need a name. 683 00:31:35,280 --> 00:31:37,738 This is what we call an anonymous function, a function that 684 00:31:37,738 --> 00:31:38,880 just doesn't have a name. 685 00:31:38,880 --> 00:31:42,360 And I'm providing this function to say, when the DOM content is loaded, 686 00:31:42,360 --> 00:31:46,124 this is the function that should run. 687 00:31:46,124 --> 00:31:46,790 Yeah, of course. 688 00:31:46,790 --> 00:31:47,406 Yeah? 689 00:31:47,406 --> 00:31:52,697 AUDIENCE: How is adding event listener different from the [INAUDIBLE]?? 690 00:31:52,697 --> 00:31:54,780 BRIAN YU: So question is, how is an event listener 691 00:31:54,780 --> 00:31:56,400 different from query selector? 692 00:31:56,400 --> 00:32:00,180 Query selector is going to look throughout the page for an HTML element 693 00:32:00,180 --> 00:32:03,630 and pick it out for me, give me that HTML element so that I can do something 694 00:32:03,630 --> 00:32:07,450 with it, so that I can modify it, so that I can add properties to it, 695 00:32:07,450 --> 00:32:08,470 for example. 696 00:32:08,470 --> 00:32:12,990 Add event listener is going to take some element 697 00:32:12,990 --> 00:32:15,730 and it's going to wait for something to happen. 698 00:32:15,730 --> 00:32:18,840 And when something happens, then it's going to run a function. 699 00:32:18,840 --> 00:32:21,330 In this case, I'm taking the document-- my whole web page-- 700 00:32:21,330 --> 00:32:24,810 adding an event listener, saying wait for all the content of this page 701 00:32:24,810 --> 00:32:28,860 to be done loading, and when it's done loading, run this function. 702 00:32:28,860 --> 00:32:30,220 So that's the distinction there. 703 00:32:30,220 --> 00:32:30,720 Yeah? 704 00:32:30,720 --> 00:32:34,248 AUDIENCE: So kind of like the previous question, if you have more functions, 705 00:32:34,248 --> 00:32:38,835 could you add them to the same function line on one 2? 706 00:32:38,835 --> 00:32:39,460 BRIAN YU: Yeah. 707 00:32:39,460 --> 00:32:41,710 So line 2 doesn't need to just be one line. 708 00:32:41,710 --> 00:32:44,380 I could add another document dot query selector. 709 00:32:44,380 --> 00:32:46,390 I could do any arbitrary logic in this function 710 00:32:46,390 --> 00:32:49,108 and make it as long as you want it to be. 711 00:32:49,108 --> 00:32:50,020 Yeah? 712 00:32:50,020 --> 00:32:53,550 AUDIENCE: So is it [INAUDIBLE] argument in the add event 713 00:32:53,550 --> 00:32:57,565 listener to the function, is that unique to add an event listener 714 00:32:57,565 --> 00:32:59,549 or do you actually [INAUDIBLE]? 715 00:32:59,549 --> 00:33:00,090 BRIAN YU: OK. 716 00:33:00,090 --> 00:33:02,580 So question is, is this idea of this anonymous function 717 00:33:02,580 --> 00:33:05,520 passing in a function, is that unique to add event listener? 718 00:33:05,520 --> 00:33:11,100 No, you can do that anytime you want to provide a function as the argument to-- 719 00:33:11,100 --> 00:33:12,684 as a value to anything. 720 00:33:12,684 --> 00:33:15,600 And in fact, I don't even need this function called count necessarily. 721 00:33:15,600 --> 00:33:17,970 If I wanted to, I could just say, all right. 722 00:33:17,970 --> 00:33:19,770 I don't need to name this function count. 723 00:33:19,770 --> 00:33:23,160 Let me just create another anonymous function inside of which 724 00:33:23,160 --> 00:33:25,320 is the contents of the count function. 725 00:33:25,320 --> 00:33:28,490 726 00:33:28,490 --> 00:33:33,710 And I'll move the declaration of counter up to the top here. 727 00:33:33,710 --> 00:33:36,860 But now what I'm saying is, all right, when the DOM content is loaded, 728 00:33:36,860 --> 00:33:38,360 run this function. 729 00:33:38,360 --> 00:33:40,970 And this function is going to say, when the button is clicked, 730 00:33:40,970 --> 00:33:44,690 then go ahead and run this function, which is going to increment counter 731 00:33:44,690 --> 00:33:46,279 and update counter as in our HTML. 732 00:33:46,279 --> 00:33:47,820 This would be exactly the same thing. 733 00:33:47,820 --> 00:33:50,278 I've just gotten rid of another function and just turned it 734 00:33:50,278 --> 00:33:52,744 into an anonymous function. 735 00:33:52,744 --> 00:33:53,244 Yeah? 736 00:33:53,244 --> 00:34:00,940 AUDIENCE: Is it preferable to have [INAUDIBLE] that way? 737 00:34:00,940 --> 00:34:04,330 Or is it better to find [INAUDIBLE]? 738 00:34:04,330 --> 00:34:06,990 BRIAN YU: So is it preferable to have fewer functions? 739 00:34:06,990 --> 00:34:10,105 It's going to depend a little bit upon the type of program 740 00:34:10,105 --> 00:34:10,980 that you're creating. 741 00:34:10,980 --> 00:34:15,270 Generally, I'd go for cleanliness and ease of reading as the top priority 742 00:34:15,270 --> 00:34:15,840 here. 743 00:34:15,840 --> 00:34:18,449 And so here I'd probably prefer to actually separate count 744 00:34:18,449 --> 00:34:20,940 into a different function so that it becomes very clear, 745 00:34:20,940 --> 00:34:22,189 here's what the function does. 746 00:34:22,189 --> 00:34:22,880 It counts. 747 00:34:22,880 --> 00:34:24,630 And I'm saying when the button is clicked, 748 00:34:24,630 --> 00:34:25,920 then you should run the count function. 749 00:34:25,920 --> 00:34:27,960 And that just seems a little bit clearer to me, at least, 750 00:34:27,960 --> 00:34:30,300 than putting everything in without giving them names. 751 00:34:30,300 --> 00:34:33,311 752 00:34:33,311 --> 00:34:33,810 Yeah? 753 00:34:33,810 --> 00:34:39,480 AUDIENCE: So the scope of [INAUDIBLE],, but 754 00:34:39,480 --> 00:34:42,335 if it's outside of [INAUDIBLE] variable? 755 00:34:42,335 --> 00:34:42,960 BRIAN YU: Yeah. 756 00:34:42,960 --> 00:34:46,550 If this let counter is outside of the curly braces of any function, 757 00:34:46,550 --> 00:34:49,800 then it'll be accessible from within the count function or any other function, 758 00:34:49,800 --> 00:34:50,300 for example. 759 00:34:50,300 --> 00:34:54,331 760 00:34:54,331 --> 00:34:54,830 OK. 761 00:34:54,830 --> 00:34:57,050 Let's take a look at another example that 762 00:34:57,050 --> 00:35:01,230 will hopefully help to make some of this a little clearer as well. 763 00:35:01,230 --> 00:35:09,110 So I'll go in here and we'll take a look at color 0 dot HTML. 764 00:35:09,110 --> 00:35:11,270 So here is color 0 dot HTML. 765 00:35:11,270 --> 00:35:14,790 It's got hello in big letters and it's got three buttons-- red, blue, 766 00:35:14,790 --> 00:35:15,480 and green. 767 00:35:15,480 --> 00:35:16,730 So what am I going to do here? 768 00:35:16,730 --> 00:35:19,271 If I click on the red button, let's just observe what happens 769 00:35:19,271 --> 00:35:20,900 and then take a look at why it happens. 770 00:35:20,900 --> 00:35:23,675 I click on red and hello changes to red. 771 00:35:23,675 --> 00:35:25,490 I click blue, hello changes to blue. 772 00:35:25,490 --> 00:35:28,550 I click green and hello changes to green. 773 00:35:28,550 --> 00:35:30,690 Why and how did that happen? 774 00:35:30,690 --> 00:35:34,850 Well, all right, let's take a look at color 0 dot HTML. 775 00:35:34,850 --> 00:35:36,500 Let's take a look at the body. 776 00:35:36,500 --> 00:35:40,220 I have a heading that has an ID of hello that just says hello. 777 00:35:40,220 --> 00:35:42,792 And then I have three buttons-- red, blue, and green-- 778 00:35:42,792 --> 00:35:44,250 that are just red, blue, and green. 779 00:35:44,250 --> 00:35:46,910 And they have IDs-- red, blue, and green. 780 00:35:46,910 --> 00:35:50,130 Let's take a look at the JavaScript that's making this work. 781 00:35:50,130 --> 00:35:53,376 First, we add an event listener, wait for the DOM content to load, 782 00:35:53,376 --> 00:35:54,500 and then run this function. 783 00:35:54,500 --> 00:35:58,220 Same as before, basically just saying, wait for the page to finish loading. 784 00:35:58,220 --> 00:36:01,790 And then I'm saying, document dot query selector red-- 785 00:36:01,790 --> 00:36:04,760 get the red button, the thing that has ID red. 786 00:36:04,760 --> 00:36:06,650 When it's clicked-- on click-- 787 00:36:06,650 --> 00:36:08,240 run this function. 788 00:36:08,240 --> 00:36:09,620 What is the function doing? 789 00:36:09,620 --> 00:36:11,953 It's saying, all right, let me select for the thing that 790 00:36:11,953 --> 00:36:13,670 has ID hello, that heading. 791 00:36:13,670 --> 00:36:15,570 And then I can actually change its style. 792 00:36:15,570 --> 00:36:18,567 I can say dot style to get at the style of that element. 793 00:36:18,567 --> 00:36:20,150 And what property do I want to change? 794 00:36:20,150 --> 00:36:21,560 What CSS property? 795 00:36:21,560 --> 00:36:23,090 Same as anything as this property. 796 00:36:23,090 --> 00:36:27,010 I want to change the color and I want to change the color to red. 797 00:36:27,010 --> 00:36:31,760 And then I do the same thing for blue and the same thing for green. 798 00:36:31,760 --> 00:36:34,210 So we have these nested functions, these event listeners. 799 00:36:34,210 --> 00:36:36,242 There's a lot of JavaScript code here. 800 00:36:36,242 --> 00:36:38,200 Let's see if you can glean, generally speaking, 801 00:36:38,200 --> 00:36:40,300 what it is that this code is doing. 802 00:36:40,300 --> 00:36:42,130 It's waiting for the DOM to finish loading 803 00:36:42,130 --> 00:36:44,171 and then when a button is clicked, we're changing 804 00:36:44,171 --> 00:36:45,910 the style of some HTML element. 805 00:36:45,910 --> 00:36:46,552 Yeah? 806 00:36:46,552 --> 00:36:48,520 AUDIENCE: Is it better to use single quotes or double quotes? 807 00:36:48,520 --> 00:36:49,510 Or does it not matter? 808 00:36:49,510 --> 00:36:49,840 BRIAN YU: Oh. 809 00:36:49,840 --> 00:36:51,790 So is it better to use single quotes or double quotes? 810 00:36:51,790 --> 00:36:53,664 I've been using them sort of interchangeably. 811 00:36:53,664 --> 00:36:55,190 JavaScript doesn't really care. 812 00:36:55,190 --> 00:36:57,822 It's really a matter of personal preference and style. 813 00:36:57,822 --> 00:37:01,030 You should just be consistent within a file is probably the best thing to do. 814 00:37:01,030 --> 00:37:04,117 AUDIENCE: I know we had that one advantage of using double quotes is 815 00:37:04,117 --> 00:37:06,746 that this side of it was [INAUDIBLE]. 816 00:37:06,746 --> 00:37:07,370 BRIAN YU: Yeah. 817 00:37:07,370 --> 00:37:09,230 Within double quotes, you can use single quotes 818 00:37:09,230 --> 00:37:11,270 and just treat them as normal single quotes, and vice versa. 819 00:37:11,270 --> 00:37:13,269 Within single quotes, you can use double quotes, 820 00:37:13,269 --> 00:37:15,110 and those are just plain old double quotes. 821 00:37:15,110 --> 00:37:17,943 So that can be a reason to make a choice in certain situations, too. 822 00:37:17,943 --> 00:37:21,890 823 00:37:21,890 --> 00:37:22,390 All right. 824 00:37:22,390 --> 00:37:25,390 Questions about anything so far? ? 825 00:37:25,390 --> 00:37:29,850 What seems poorly designed about this example anything that strike you? 826 00:37:29,850 --> 00:37:30,350 Yeah? 827 00:37:30,350 --> 00:37:31,850 AUDIENCE: It's the same code. 828 00:37:31,850 --> 00:37:33,058 BRIAN YU: It's the same code. 829 00:37:33,058 --> 00:37:34,970 There's a lot of code repeated multiple times 830 00:37:34,970 --> 00:37:36,410 and so this is probably not ideal. 831 00:37:36,410 --> 00:37:41,370 I'd like to do something about that in order to make it a little bit better. 832 00:37:41,370 --> 00:37:44,540 So let's take a look at colors one dot HTML. 833 00:37:44,540 --> 00:37:48,684 Colors one dot HTML is going to do exactly the same thing-- 834 00:37:48,684 --> 00:37:49,850 hello, red, blue, and green. 835 00:37:49,850 --> 00:37:50,933 I click red, it turns red. 836 00:37:50,933 --> 00:37:53,300 Blue turns blue, green turns green. 837 00:37:53,300 --> 00:37:55,340 But how is this one working? 838 00:37:55,340 --> 00:37:57,020 Well, here's the body. 839 00:37:57,020 --> 00:37:59,111 I have a heading, hello. 840 00:37:59,111 --> 00:38:00,860 And then I have buttons, but these buttons 841 00:38:00,860 --> 00:38:02,570 have a few other different attributes. 842 00:38:02,570 --> 00:38:04,790 These buttons, instead of having an ID, have 843 00:38:04,790 --> 00:38:08,300 a class because I want this class to refer to all three buttons. 844 00:38:08,300 --> 00:38:11,140 The class is called color change so later I can say, all right, 845 00:38:11,140 --> 00:38:14,490 get the things with the class of color change and do something with them. 846 00:38:14,490 --> 00:38:17,600 And they also have this data attribute. 847 00:38:17,600 --> 00:38:21,800 And this data attribute is something that you can add to HTML elements 848 00:38:21,800 --> 00:38:24,860 if you want to store data alongside those elements. 849 00:38:24,860 --> 00:38:30,140 And in particular, I want each of my buttons to store data about what color 850 00:38:30,140 --> 00:38:34,040 they should change the heading to when I click on that button. 851 00:38:34,040 --> 00:38:36,710 So here I'm saying, button class equals color change. 852 00:38:36,710 --> 00:38:41,660 Data color equals red, in order to mean, I want to store along with this button 853 00:38:41,660 --> 00:38:44,960 some information and the information about what color it should turn, 854 00:38:44,960 --> 00:38:48,130 and it should turn the heading red in this case. 855 00:38:48,130 --> 00:38:51,440 And I give the blue button the data color of blue, green button data color 856 00:38:51,440 --> 00:38:53,010 of green. 857 00:38:53,010 --> 00:38:55,730 And so now here's the JavaScript code that makes this all work. 858 00:38:55,730 --> 00:38:59,334 859 00:38:59,334 --> 00:39:01,750 I have document dot add event listener DOM content loaded. 860 00:39:01,750 --> 00:39:03,890 Wait for the whole page to finish loading. 861 00:39:03,890 --> 00:39:06,380 And so what's the code that I'm ultimately going to run? 862 00:39:06,380 --> 00:39:08,680 I'm going to say, document dot query selector 863 00:39:08,680 --> 00:39:13,570 all for any-- select everything that has a class of color change. 864 00:39:13,570 --> 00:39:15,940 And now I have an array of things. 865 00:39:15,940 --> 00:39:19,150 And now I can do use a function called for each. 866 00:39:19,150 --> 00:39:22,390 And what for each is going to do is it's basically going to take an array 867 00:39:22,390 --> 00:39:25,760 and apply a function for each element in that array. 868 00:39:25,760 --> 00:39:28,030 So I've got this array of buttons and I would 869 00:39:28,030 --> 00:39:32,535 like to do the same thing for each of the buttons inside of this array. 870 00:39:32,535 --> 00:39:34,660 And so what am I going to do each of these buttons? 871 00:39:34,660 --> 00:39:36,520 Well, I'm going to run this function. 872 00:39:36,520 --> 00:39:38,860 The function takes this argument, the button itself, 873 00:39:38,860 --> 00:39:41,089 the element of the array. 874 00:39:41,089 --> 00:39:42,880 And what am I going to do with that button? 875 00:39:42,880 --> 00:39:47,540 Well, when the button is clicked, then go ahead and run this function. 876 00:39:47,540 --> 00:39:49,080 What is the function doing? 877 00:39:49,080 --> 00:39:53,480 Well, it's saying let's get the hello heading, get its style, 878 00:39:53,480 --> 00:39:56,490 change the color property of the style. 879 00:39:56,490 --> 00:39:58,590 And what value do I want to change it to? 880 00:39:58,590 --> 00:40:03,540 Well, I want to take the button and I want to get at its data dash color 881 00:40:03,540 --> 00:40:04,910 attribute. 882 00:40:04,910 --> 00:40:08,640 And so how do I get at the data information inside of an HTML element? 883 00:40:08,640 --> 00:40:11,640 In JavaScript you do this by saying button dot data set, 884 00:40:11,640 --> 00:40:15,120 which gets you at all the data information about that HTML element. 885 00:40:15,120 --> 00:40:17,870 And I want access the color property of that. 886 00:40:17,870 --> 00:40:20,730 So button dot data set dot color is a way 887 00:40:20,730 --> 00:40:24,180 of saying, all right, let's take this button, get at the data elements 888 00:40:24,180 --> 00:40:27,410 within it, and extract the color from it. 889 00:40:27,410 --> 00:40:29,160 There's a lot of new syntax here and a lot 890 00:40:29,160 --> 00:40:31,890 of new syntax in a lot of the examples that we're going to show today. 891 00:40:31,890 --> 00:40:34,110 Goal of this is not to have you memorize all of this stuff. 892 00:40:34,110 --> 00:40:35,610 These examples are posted online. 893 00:40:35,610 --> 00:40:37,140 You can refer back to them if you need it. 894 00:40:37,140 --> 00:40:39,181 But it's just to give you a sense of the tool kit 895 00:40:39,181 --> 00:40:42,330 that JavaScript enables you to use, this idea of associating data 896 00:40:42,330 --> 00:40:45,330 with elements such that later you can go back and take an element 897 00:40:45,330 --> 00:40:47,060 and get it the data associated with it. 898 00:40:47,060 --> 00:40:49,380 It's a pretty valuable tool that you might find useful 899 00:40:49,380 --> 00:40:53,650 as you go about building web applications using JavaScript. 900 00:40:53,650 --> 00:40:59,988 Questions about what's happening here and why it works? 901 00:40:59,988 --> 00:41:00,488 Yeah? 902 00:41:00,488 --> 00:41:04,337 AUDIENCE: Why is button passed as the parameter to the function? 903 00:41:04,337 --> 00:41:05,170 BRIAN YU: All right. 904 00:41:05,170 --> 00:41:08,710 So the question is why is button passed as the parameter to the function? 905 00:41:08,710 --> 00:41:10,600 This is part of the way that for each works. 906 00:41:10,600 --> 00:41:14,140 What for each does is it takes an array and applies a function 907 00:41:14,140 --> 00:41:16,134 to every element in that array. 908 00:41:16,134 --> 00:41:18,550 So I can actually demonstrate-- this is a good opportunity 909 00:41:18,550 --> 00:41:20,950 to talk a little bit about functional programming, which 910 00:41:20,950 --> 00:41:24,490 is something that JavaScript really enables, this idea of passing functions 911 00:41:24,490 --> 00:41:28,260 around as values of their own and that you'll see in other classes. 912 00:41:28,260 --> 00:41:31,720 CS51 really emphasizes functional programming as an idea 913 00:41:31,720 --> 00:41:34,360 and is very common in JavaScript programming in general. 914 00:41:34,360 --> 00:41:35,090 So let's do this. 915 00:41:35,090 --> 00:41:36,750 Let's get an array. 916 00:41:36,750 --> 00:41:38,410 I'll zoom in here. 917 00:41:38,410 --> 00:41:42,340 And so let array be-- and right now I'm just 918 00:41:42,340 --> 00:41:44,140 using the console inside of a web browser 919 00:41:44,140 --> 00:41:45,848 like Chrome, which you can do just to run 920 00:41:45,848 --> 00:41:47,500 JavaScript code if you would like to. 921 00:41:47,500 --> 00:41:53,260 And I'm going to have this array be 1, 2, 3, 4, 5, so it's just an array. 922 00:41:53,260 --> 00:41:56,930 And now I'm going to say array dot for each. 923 00:41:56,930 --> 00:42:02,450 And for each element in this array I'm going to run some function. 924 00:42:02,450 --> 00:42:06,780 And that function is going to take as its argument the element of the array. 925 00:42:06,780 --> 00:42:09,950 It's going to go for each element in this array, and for each one 926 00:42:09,950 --> 00:42:13,160 we're going to run this function, passing in that element as the argument 927 00:42:13,160 --> 00:42:14,720 to the function. 928 00:42:14,720 --> 00:42:18,590 And here I'm going to say, console dot log element. 929 00:42:18,590 --> 00:42:20,692 Console dot log is the equivalent of printf, 930 00:42:20,692 --> 00:42:22,025 just means print to the console. 931 00:42:22,025 --> 00:42:24,760 932 00:42:24,760 --> 00:42:25,620 And I press Return. 933 00:42:25,620 --> 00:42:28,440 Missing parentheses after argument list. 934 00:42:28,440 --> 00:42:32,070 Oh, I didn't close the parentheses after the end of for each, 935 00:42:32,070 --> 00:42:36,010 so we'll go ahead and close the parentheses after the end of for each. 936 00:42:36,010 --> 00:42:36,950 And OK. 937 00:42:36,950 --> 00:42:38,310 What gets printed out? 938 00:42:38,310 --> 00:42:41,292 1, 2, 3, 4, 5. 939 00:42:41,292 --> 00:42:44,250 The undefined is because the for each itself is not returning anything, 940 00:42:44,250 --> 00:42:45,780 so you don't have to worry too much about that. 941 00:42:45,780 --> 00:42:47,488 But what I got printed out to the console 942 00:42:47,488 --> 00:42:49,920 is 1, 2, 3, 4, 5 because for every element 943 00:42:49,920 --> 00:42:51,830 we just printed out that element. 944 00:42:51,830 --> 00:42:57,600 I could, instead, have said, console dot log element times 2, for example. 945 00:42:57,600 --> 00:43:01,950 And that would have printed out-- oh, I did the same problem mistake again. 946 00:43:01,950 --> 00:43:05,966 And that would have printed out 2, 4, 6, 8, 10 because for each element 947 00:43:05,966 --> 00:43:09,090 we're just going to go through each element in the array, multiply it by 2, 948 00:43:09,090 --> 00:43:10,950 for example, in order to do that. 949 00:43:10,950 --> 00:43:14,907 950 00:43:14,907 --> 00:43:16,490 Questions about that or how it worked? 951 00:43:16,490 --> 00:43:17,480 Yeah. 952 00:43:17,480 --> 00:43:21,440 AUDIENCE: I actually have a question about the previous one. 953 00:43:21,440 --> 00:43:24,905 For the data set dot, or button dot data set dot color, 954 00:43:24,905 --> 00:43:28,256 can we define and kind of data attributes 955 00:43:28,256 --> 00:43:32,128 we want on, like, we do data dash then make up our own name? 956 00:43:32,128 --> 00:43:33,441 Or does it have to be-- 957 00:43:33,441 --> 00:43:35,690 BRIAN YU: Yes, you can do data dash anything you want, 958 00:43:35,690 --> 00:43:37,880 just some arbitrary name for the data attribute. 959 00:43:37,880 --> 00:43:41,480 And then you can access it via the data set property of the HTML element. 960 00:43:41,480 --> 00:43:44,025 So you can store arbitrary data with your HTML elements 961 00:43:44,025 --> 00:43:44,900 if you would like to. 962 00:43:44,900 --> 00:43:51,180 963 00:43:51,180 --> 00:43:55,380 One new feature of ES6, one of the more recent versions of JavaScript, 964 00:43:55,380 --> 00:43:59,010 is a different way of defining functions. 965 00:43:59,010 --> 00:44:02,730 You can have what are called arrow functions, which is this idea that you 966 00:44:02,730 --> 00:44:05,400 can define a function instead of using the word function, 967 00:44:05,400 --> 00:44:08,550 you can use this arrow syntax to mean, take some input 968 00:44:08,550 --> 00:44:10,710 and then provide some output. 969 00:44:10,710 --> 00:44:15,280 And so I'll show you an example of that. 970 00:44:15,280 --> 00:44:21,540 What I could do is I could take the array 1, 2 3, 4, 5, as I did before. 971 00:44:21,540 --> 00:44:25,710 And then I could say something like for each, just take the element, 972 00:44:25,710 --> 00:44:30,736 and console dot log that element. 973 00:44:30,736 --> 00:44:33,110 And then what I get printed out as the exact same thing-- 974 00:44:33,110 --> 00:44:35,570 1, 2, 3, 4, 5, just much more succinctly. 975 00:44:35,570 --> 00:44:39,974 This right here is a function that takes as input the element. 976 00:44:39,974 --> 00:44:42,140 And what it does with that element is just print out 977 00:44:42,140 --> 00:44:43,550 that element to the console. 978 00:44:43,550 --> 00:44:46,100 And that arrow is this idea of element as the input 979 00:44:46,100 --> 00:44:49,460 to the function and the arrow is the actual body of the function. 980 00:44:49,460 --> 00:44:51,650 After the arrow is what the function should actually 981 00:44:51,650 --> 00:44:55,130 do with that individual element. 982 00:44:55,130 --> 00:44:59,510 And so functional programming gives us a lot of interesting capabilities 983 00:44:59,510 --> 00:45:02,240 that we might not have had before or that we 984 00:45:02,240 --> 00:45:05,930 can do more easily now with the ability to have functional programming. 985 00:45:05,930 --> 00:45:08,220 And so I'll give you an example. 986 00:45:08,220 --> 00:45:10,700 In addition to having for each, which takes an array 987 00:45:10,700 --> 00:45:13,420 and run some function on each element in it, 988 00:45:13,420 --> 00:45:16,150 I also have this function called map. 989 00:45:16,150 --> 00:45:18,920 What map is going to do is it's going to apply 990 00:45:18,920 --> 00:45:25,290 a function to every element in the array and give me a new array as a result. 991 00:45:25,290 --> 00:45:26,780 So let me apply-- 992 00:45:26,780 --> 00:45:30,560 take the array 1, 2, 3, 4, 5, and let me map over that array 993 00:45:30,560 --> 00:45:37,390 a function that takes the element and returns element times 2, for example. 994 00:45:37,390 --> 00:45:42,200 I press Return and what I get is I get a new array of five elements-- 995 00:45:42,200 --> 00:45:44,930 the parentheses 5 just means five elements-- and that array 996 00:45:44,930 --> 00:45:46,760 is 2, 4, 6, 8, 10. 997 00:45:46,760 --> 00:45:50,720 I was able to take an array and generate a brand new array by mapping over 998 00:45:50,720 --> 00:45:55,510 every element inside of that array. 999 00:45:55,510 --> 00:45:58,690 This is functional programming, passing a function as arguments 1000 00:45:58,690 --> 00:46:00,890 around in order to create interesting behavior. 1001 00:46:00,890 --> 00:46:02,800 Yeah? 1002 00:46:02,800 --> 00:46:05,486 AUDIENCE: Is this different than in C [INAUDIBLE] loop, 1003 00:46:05,486 --> 00:46:09,200 and then within the for loop [INAUDIBLE] function? 1004 00:46:09,200 --> 00:46:11,470 BRIAN YU: In C you could have replicated this idea 1005 00:46:11,470 --> 00:46:14,780 by having a for loop that loops over it and generates a new array, for example. 1006 00:46:14,780 --> 00:46:16,100 You certainly could do that. 1007 00:46:16,100 --> 00:46:18,558 Functional programming just offers a slightly different way 1008 00:46:18,558 --> 00:46:20,111 of achieving that same effect, yeah. 1009 00:46:20,111 --> 00:46:20,610 Yep? 1010 00:46:20,610 --> 00:46:23,182 AUDIENCE: Is elements an arbitrary name? 1011 00:46:23,182 --> 00:46:24,890 BRIAN YU: Yeah, ELT is an arbitrary name. 1012 00:46:24,890 --> 00:46:26,723 It could've been anything you want it to be. 1013 00:46:26,723 --> 00:46:29,960 AUDIENCE: So in the previous example, button was also an arbitrary name? 1014 00:46:29,960 --> 00:46:31,150 BRIAN YU: Button is also an arbitrary name. 1015 00:46:31,150 --> 00:46:33,900 Yeah, any argument to the function you can call whatever you want. 1016 00:46:33,900 --> 00:46:37,210 We just tend to give it names that are semantically meaningful. 1017 00:46:37,210 --> 00:46:37,855 Yeah? 1018 00:46:37,855 --> 00:46:41,250 AUDIENCE: How do arrow functions distinguish 1019 00:46:41,250 --> 00:46:47,711 the arbitrary name of an input versus the name of the [INAUDIBLE]?? 1020 00:46:47,711 --> 00:46:48,710 BRIAN YU: Good question. 1021 00:46:48,710 --> 00:46:51,075 The arrow function itself doesn't have a name. 1022 00:46:51,075 --> 00:46:53,450 It's just an anonymous function that doesn't have a name. 1023 00:46:53,450 --> 00:46:55,892 So ELT in this case is always just going to be 1024 00:46:55,892 --> 00:46:57,350 the input variable to the function. 1025 00:46:57,350 --> 00:46:59,350 AUDIENCE: But if you were writing it in a script 1026 00:46:59,350 --> 00:47:01,212 file, how would you name the arrow? 1027 00:47:01,212 --> 00:47:03,170 BRIAN YU: How would you name an arrow function? 1028 00:47:03,170 --> 00:47:06,440 You would do something like-- 1029 00:47:06,440 --> 00:47:12,170 let's open up hello dot JS or counter dot JS. 1030 00:47:12,170 --> 00:47:17,990 I could have instead of this said const count equals 1031 00:47:17,990 --> 00:47:22,130 or I could define a function like const double equals 1032 00:47:22,130 --> 00:47:27,500 a function that takes as input x and returns x times 2, for instance. 1033 00:47:27,500 --> 00:47:29,212 And so you could do something like that. 1034 00:47:29,212 --> 00:47:33,640 1035 00:47:33,640 --> 00:47:37,210 Again, a lot of new syntax here, but see if you can just 1036 00:47:37,210 --> 00:47:39,040 grasp the general ideas here and then we'll 1037 00:47:39,040 --> 00:47:41,860 get some opportunity to actually try this hands on so you 1038 00:47:41,860 --> 00:47:45,300 can see how this actually works. 1039 00:47:45,300 --> 00:47:46,050 Other questions? 1040 00:47:46,050 --> 00:47:48,720 1041 00:47:48,720 --> 00:47:51,660 I'll show you one other example of functional programming at work. 1042 00:47:51,660 --> 00:47:54,630 You can also-- in addition to a map to map over an array, 1043 00:47:54,630 --> 00:47:56,350 you can also filter an array. 1044 00:47:56,350 --> 00:48:00,540 So I could say, all right, 1, 2, 3, 4, 5, let me filter this array, 1045 00:48:00,540 --> 00:48:06,030 take every element, and only return the elements that are greater than 2, 1046 00:48:06,030 --> 00:48:07,380 for instance. 1047 00:48:07,380 --> 00:48:09,990 And that will take 1, 2, 3, 4, 5, and return for me 1048 00:48:09,990 --> 00:48:12,600 a new array that's just 3, 4, 5, that has 1049 00:48:12,600 --> 00:48:16,210 only the elements of that array that are greater than 2, for example. 1050 00:48:16,210 --> 00:48:16,808 Yeah? 1051 00:48:16,808 --> 00:48:19,350 AUDIENCE: Those filter mutate the array, or it doesn't do it? 1052 00:48:19,350 --> 00:48:20,974 BRIAN YU: Does filter mutate the array? 1053 00:48:20,974 --> 00:48:22,950 No, it's just returning to me a new array that 1054 00:48:22,950 --> 00:48:27,462 is the result of doing that filtering. 1055 00:48:27,462 --> 00:48:28,953 Other questions? 1056 00:48:28,953 --> 00:48:34,940 1057 00:48:34,940 --> 00:48:40,580 Let me show you one other or a couple other examples. 1058 00:48:40,580 --> 00:48:54,929 Let's go to Tasks 0 dot HTML and let's go to Task 0 dot HTML. 1059 00:48:54,929 --> 00:48:56,720 Here's a simple JavaScript application that 1060 00:48:56,720 --> 00:49:00,800 just acts as a to-do list, a list of things that you need to do. 1061 00:49:00,800 --> 00:49:05,482 So you type a thing you need to do, you press Submit, 1062 00:49:05,482 --> 00:49:07,190 and it adds it to a list of things to do. 1063 00:49:07,190 --> 00:49:08,960 Here's another thing that I need to do. 1064 00:49:08,960 --> 00:49:11,812 I press Submit, it adds it to the list of things to do. 1065 00:49:11,812 --> 00:49:13,520 And so this is an interesting application 1066 00:49:13,520 --> 00:49:14,660 that actually lets me interact with it. 1067 00:49:14,660 --> 00:49:16,368 I type things, it manipulates the DOM, it 1068 00:49:16,368 --> 00:49:18,620 updates the contents of the page in response 1069 00:49:18,620 --> 00:49:21,290 to whatever it is that I'm doing. 1070 00:49:21,290 --> 00:49:23,920 And so how exactly is this working? 1071 00:49:23,920 --> 00:49:28,780 So inside of the body of the page I have an unordered list 1072 00:49:28,780 --> 00:49:32,740 called Tasks that's just going to maintain that list of all of the tasks 1073 00:49:32,740 --> 00:49:34,790 that I currently have. 1074 00:49:34,790 --> 00:49:38,020 And then I have a form, a form where I can actually type in a new task 1075 00:49:38,020 --> 00:49:41,350 and press Submit in order to submit that form to do something. 1076 00:49:41,350 --> 00:49:42,550 The form has an ID. 1077 00:49:42,550 --> 00:49:43,654 It's called New Task. 1078 00:49:43,654 --> 00:49:46,570 And then I have an input field where I can actually type something in. 1079 00:49:46,570 --> 00:49:48,569 The place holder here is new task, which is just 1080 00:49:48,569 --> 00:49:52,060 the text it's going to be displayed before I start typing something in. 1081 00:49:52,060 --> 00:49:54,910 And then I have a Submit button at the bottom of the form. 1082 00:49:54,910 --> 00:49:57,670 And so that defines the general structure of the page. 1083 00:49:57,670 --> 00:50:01,019 I have an unordered list, I have inform or I have an input field, 1084 00:50:01,019 --> 00:50:04,060 and then a Submit button that's actually going to let me submit this form 1085 00:50:04,060 --> 00:50:07,060 to say I want to submit a new thing. 1086 00:50:07,060 --> 00:50:10,220 What is the JavaScript code that's making this work? 1087 00:50:10,220 --> 00:50:13,500 Well, OK, I'm adding an event listener for DOM content 1088 00:50:13,500 --> 00:50:15,870 loaded, waiting for the whole page to finish loading. 1089 00:50:15,870 --> 00:50:18,254 And when it does, I'm going to run this function. 1090 00:50:18,254 --> 00:50:21,170 Again, I'm using an arrow function here, which is just new ES6 syntax. 1091 00:50:21,170 --> 00:50:23,325 It's just the same as any old function, although it 1092 00:50:23,325 --> 00:50:25,950 does behave in slightly different ways, the nuances of which we 1093 00:50:25,950 --> 00:50:28,560 won't touch on today. 1094 00:50:28,560 --> 00:50:30,000 And so what am I doing in here? 1095 00:50:30,000 --> 00:50:32,400 I'm saying query selector new task. 1096 00:50:32,400 --> 00:50:34,450 What is ID new task? 1097 00:50:34,450 --> 00:50:36,900 Well, that is down here. 1098 00:50:36,900 --> 00:50:38,570 That's this form. 1099 00:50:38,570 --> 00:50:41,370 So OK, I've selected the thing called new task 1100 00:50:41,370 --> 00:50:43,560 and on Submit, it's saying, when I submit 1101 00:50:43,560 --> 00:50:46,560 this form, what would I like to do? 1102 00:50:46,560 --> 00:50:48,422 Well, what I'd like to do is actually when 1103 00:50:48,422 --> 00:50:50,130 I type in something and press Submit, I'd 1104 00:50:50,130 --> 00:50:52,570 like to add that to my list of tasks. 1105 00:50:52,570 --> 00:50:55,320 I have this unordered list and I want to add a new list 1106 00:50:55,320 --> 00:51:00,070 item to that list to reflect whatever it is that I just typed in. 1107 00:51:00,070 --> 00:51:05,040 So const LI equals document dot create element LI. 1108 00:51:05,040 --> 00:51:08,950 Document dot create element creates a brand new HTML element. 1109 00:51:08,950 --> 00:51:12,790 So I've here said to create a new list item element, and LI element, 1110 00:51:12,790 --> 00:51:15,830 and just save it inside this variable called LI. 1111 00:51:15,830 --> 00:51:19,850 Then I say LI dot inner HTML, meaning take that list item. 1112 00:51:19,850 --> 00:51:22,820 I want to update the contents of it, the inner HTML. 1113 00:51:22,820 --> 00:51:25,190 And what do I want that list item to say? 1114 00:51:25,190 --> 00:51:29,100 Well, the input field down here was called Task. 1115 00:51:29,100 --> 00:51:34,370 It had an ID of Task, and that was where I was actually typing something in. 1116 00:51:34,370 --> 00:51:40,300 So this list item up here, it's inner HTML should be whatever I typed in. 1117 00:51:40,300 --> 00:51:44,000 And I can get at whatever I typed in it by saying document doc query selector, 1118 00:51:44,000 --> 00:51:47,862 get the thing with ID task and get its value, 1119 00:51:47,862 --> 00:51:49,570 get that inputs value, which in this case 1120 00:51:49,570 --> 00:51:54,790 is whatever it is that I actually typed in into the task field. 1121 00:51:54,790 --> 00:51:58,570 I then say document dot query selector tasks append 1122 00:51:58,570 --> 00:52:03,349 LI, meaning take this element of all of the tasks 1123 00:52:03,349 --> 00:52:05,390 and go ahead and add this thing to the end of it. 1124 00:52:05,390 --> 00:52:09,526 Add this new list item that I have just created. 1125 00:52:09,526 --> 00:52:11,650 And then the last step is to clear the input field, 1126 00:52:11,650 --> 00:52:14,790 document dot query, select your task, change its value 1127 00:52:14,790 --> 00:52:18,540 to just be empty so that I can type in a new fresh task if I would like to. 1128 00:52:18,540 --> 00:52:21,565 1129 00:52:21,565 --> 00:52:23,940 Let's just show you what all that looks like in practice. 1130 00:52:23,940 --> 00:52:26,070 I type in a thing to do. 1131 00:52:26,070 --> 00:52:28,410 When I press Submit, that triggers the event. 1132 00:52:28,410 --> 00:52:30,930 I've submitted the form and when it does that, it's 1133 00:52:30,930 --> 00:52:34,630 going to create a new list item element, take the contents of this input field, 1134 00:52:34,630 --> 00:52:39,360 set that as the inner HTML of the list item, add that list item to my list, 1135 00:52:39,360 --> 00:52:43,390 and then it's also going to clear out this input field. 1136 00:52:43,390 --> 00:52:47,779 So just step by step describing the behavior that I want to perform. 1137 00:52:47,779 --> 00:52:50,570 You can imagine as programs start to get a little bit larger, doing 1138 00:52:50,570 --> 00:52:52,790 this all the time is going to start to get annoying. 1139 00:52:52,790 --> 00:52:54,530 In a couple days time, we'll introduce React, 1140 00:52:54,530 --> 00:52:56,279 which will actually simplify a lot of this 1141 00:52:56,279 --> 00:53:00,410 and make it easier to reason about more complex, more sophisticated programs. 1142 00:53:00,410 --> 00:53:03,640 But questions about this for now and how this works? 1143 00:53:03,640 --> 00:53:04,784 Yeah? 1144 00:53:04,784 --> 00:53:12,180 AUDIENCE: Would this be [INAUDIBLE] how can you append [INAUDIBLE]?? 1145 00:53:12,180 --> 00:53:17,160 BRIAN YU: So LI is a const because when I define this variable LI, at least 1146 00:53:17,160 --> 00:53:20,160 in the context of this function, I'm never 1147 00:53:20,160 --> 00:53:22,950 changing it to a different list item. 1148 00:53:22,950 --> 00:53:26,610 If I were to later try and set LI equal to something else, that 1149 00:53:26,610 --> 00:53:28,110 is when this constraint would break. 1150 00:53:28,110 --> 00:53:29,820 So a const, you can define it. 1151 00:53:29,820 --> 00:53:31,320 You can manipulate its properties. 1152 00:53:31,320 --> 00:53:34,740 You just can't set that variable name to be some new thing 1153 00:53:34,740 --> 00:53:36,040 is the only constraint there. 1154 00:53:36,040 --> 00:53:36,539 Yeah? 1155 00:53:36,539 --> 00:53:40,250 AUDIENCE: Why'd you choose to stop the form from submitting at the bottom? 1156 00:53:40,250 --> 00:53:42,750 BRIAN YU: Why did I choose to stop the form from submitting? 1157 00:53:42,750 --> 00:53:47,100 Normally when you submit a form, it will either submit to the same page 1158 00:53:47,100 --> 00:53:50,340 and just submit the page again or take you to some other route altogether, 1159 00:53:50,340 --> 00:53:51,550 and I didn't want that to happen. 1160 00:53:51,550 --> 00:53:54,466 I wanted the user to stay on the same page without reloading anything. 1161 00:53:54,466 --> 00:53:58,140 So return false just stops that from happening. 1162 00:53:58,140 --> 00:53:59,130 Yeah? 1163 00:53:59,130 --> 00:54:03,090 AUDIENCE: Why is it not a problem [INAUDIBLE]?? 1164 00:54:03,090 --> 00:54:07,105 So why do we not replace [INAUDIBLE]? 1165 00:54:07,105 --> 00:54:07,730 BRIAN YU: Yeah. 1166 00:54:07,730 --> 00:54:08,990 So why is it-- 1167 00:54:08,990 --> 00:54:12,800 why am I allowed to say that LI is a const when every time I 1168 00:54:12,800 --> 00:54:15,200 create a new task this LI is different? 1169 00:54:15,200 --> 00:54:18,230 It has to do with what's called variable scope, like where 1170 00:54:18,230 --> 00:54:20,330 this variable is actually alive. 1171 00:54:20,330 --> 00:54:25,700 And this variable only exists for this iteration, this run of this function. 1172 00:54:25,700 --> 00:54:29,800 And the next time that I create that I run this function, I get a brand new LI 1173 00:54:29,800 --> 00:54:32,630 and so it doesn't matter that I had an LI previously. 1174 00:54:32,630 --> 00:54:36,890 So I can use this const variable so long as in the same function 1175 00:54:36,890 --> 00:54:39,966 I never said LI to be equal to something else. 1176 00:54:39,966 --> 00:54:40,466 Yeah? 1177 00:54:40,466 --> 00:54:42,924 AUDIENCE: So like, did you have to define it as a constant? 1178 00:54:42,924 --> 00:54:45,670 Or can you just take that out and LI would work [INAUDIBLE]?? 1179 00:54:45,670 --> 00:54:48,310 BRIAN YU: I could have just used let here if I had wanted to. 1180 00:54:48,310 --> 00:54:51,080 It's just a little bit unnecessary because I'm never changing it, 1181 00:54:51,080 --> 00:54:54,050 so you'll generally want to use const if you're not actually 1182 00:54:54,050 --> 00:54:56,310 going to expect to change the value of a variable. 1183 00:54:56,310 --> 00:54:56,845 Yeah? 1184 00:54:56,845 --> 00:55:02,890 AUDIENCE: For line 7, [INAUDIBLE],, why did you pass the [INAUDIBLE]?? 1185 00:55:02,890 --> 00:55:06,580 BRIAN YU: On submit is the event that happens when you submit a form. 1186 00:55:06,580 --> 00:55:10,900 And so new task is the idea that actually refers to this form. 1187 00:55:10,900 --> 00:55:14,530 So when I submit the form, I want to run the event, run the function, 1188 00:55:14,530 --> 00:55:17,210 and the function is going to look at the input field. 1189 00:55:17,210 --> 00:55:19,900 And so I have the event listener on the form that then looks at the input field 1190 00:55:19,900 --> 00:55:20,997 is why they're different. 1191 00:55:20,997 --> 00:55:28,389 1192 00:55:28,389 --> 00:55:30,930 There are a couple other examples in the source code examples 1193 00:55:30,930 --> 00:55:34,180 if you'd like to go through them, just to get a better understanding of what's 1194 00:55:34,180 --> 00:55:36,090 going on in JavaScript and how to actually do 1195 00:55:36,090 --> 00:55:37,500 these sorts of manipulations. 1196 00:55:37,500 --> 00:55:40,709 What I'd like to do now is actually get started with this morning's projects, 1197 00:55:40,709 --> 00:55:42,083 sort of walk through it together. 1198 00:55:42,083 --> 00:55:43,380 We'll go through it together. 1199 00:55:43,380 --> 00:55:45,130 I'll post the distribution code so you can 1200 00:55:45,130 --> 00:55:48,000 look to it if you would like to as well, but then we'll get started 1201 00:55:48,000 --> 00:55:50,734 and I'll show you what we're creating first. 1202 00:55:50,734 --> 00:55:52,900 Before we get to that, any questions about anything? 1203 00:55:52,900 --> 00:55:57,720 1204 00:55:57,720 --> 00:56:00,980 What we're going to be creating this morning 1205 00:56:00,980 --> 00:56:07,370 is a quiz application, basically a mini quiz online 1206 00:56:07,370 --> 00:56:09,830 that allows you to have questions and answer questions 1207 00:56:09,830 --> 00:56:12,290 and keep track of how many questions you've gotten correct. 1208 00:56:12,290 --> 00:56:15,140 So we can have code that looks something like this. 1209 00:56:15,140 --> 00:56:17,630 It displays a question, it displays some answer choices. 1210 00:56:17,630 --> 00:56:20,124 What is the binary representation of the number 28? 1211 00:56:20,124 --> 00:56:22,040 Anyone know which of these is correct offhand? 1212 00:56:22,040 --> 00:56:29,420 1213 00:56:29,420 --> 00:56:30,404 Any guesses? 1214 00:56:30,404 --> 00:56:34,360 1215 00:56:34,360 --> 00:56:36,200 I heard someone say 1 1 1 0 0. 1216 00:56:36,200 --> 00:56:37,032 OK, great. 1217 00:56:37,032 --> 00:56:38,240 1 out of 1 questions correct. 1218 00:56:38,240 --> 00:56:41,642 What type of loop will always execute at least once? 1219 00:56:41,642 --> 00:56:42,570 AUDIENCE: [INAUDIBLE]. 1220 00:56:42,570 --> 00:56:43,140 BRIAN YU: Do while. 1221 00:56:43,140 --> 00:56:46,056 OK, throwback to when we were learning about C. Which of the following 1222 00:56:46,056 --> 00:56:47,850 HTTP status codes means not found? 1223 00:56:47,850 --> 00:56:48,610 AUDIENCE: 404. 1224 00:56:48,610 --> 00:56:49,300 BRIAN YU: 404. 1225 00:56:49,300 --> 00:56:52,174 Let's just try getting a question wrong just for the sake of example. 1226 00:56:52,174 --> 00:56:53,220 Let's say 500. 1227 00:56:53,220 --> 00:56:54,310 OK, quiz complete. 1228 00:56:54,310 --> 00:56:55,810 Questions correct, two out of three. 1229 00:56:55,810 --> 00:56:58,200 What we're going to be doing is just building a quiz application like this 1230 00:56:58,200 --> 00:57:00,920 using HTML and JavaScript, and CSS if you'd like to, 1231 00:57:00,920 --> 00:57:03,820 that just displays some questions that you can choose for yourself, 1232 00:57:03,820 --> 00:57:06,365 or we use the questions that I used as well, 1233 00:57:06,365 --> 00:57:09,240 and then lets you answer those questions, keeping track of your score 1234 00:57:09,240 --> 00:57:10,954 as you go. 1235 00:57:10,954 --> 00:57:12,620 Questions about what we're trying to do? 1236 00:57:12,620 --> 00:57:16,130 And then we'll actually start trying to build it together. 1237 00:57:16,130 --> 00:57:16,630 All right. 1238 00:57:16,630 --> 00:57:18,124 Let's give this a shot. 1239 00:57:18,124 --> 00:57:19,040 I'll go to my desktop. 1240 00:57:19,040 --> 00:57:21,520 I'll create a new directory called Quiz. 1241 00:57:21,520 --> 00:57:24,990 We'll go into the Quiz directory and we'll start working on this. 1242 00:57:24,990 --> 00:57:27,550 So I'm going to create a new file. 1243 00:57:27,550 --> 00:57:31,930 We'll call it quiz.html and quiz.html, we're just 1244 00:57:31,930 --> 00:57:35,800 going to start off as a same old HTML page that we've been doing before, 1245 00:57:35,800 --> 00:57:36,670 give it a header. 1246 00:57:36,670 --> 00:57:40,840 The title will just be quiz, for example. 1247 00:57:40,840 --> 00:57:43,390 And we're probably going to want to link in some other files, 1248 00:57:43,390 --> 00:57:47,270 maybe a CSS file, maybe some JavaScript files, so let's do that. 1249 00:57:47,270 --> 00:57:50,920 Let me first create a styles.CSS file where we can store any CSS 1250 00:57:50,920 --> 00:57:52,920 code that we want to use here. 1251 00:57:52,920 --> 00:57:59,101 And then I can say link href=styles.css rel=stylesheet, 1252 00:57:59,101 --> 00:58:00,850 and that's basically me saying, all right, 1253 00:58:00,850 --> 00:58:02,920 I'm going to link this styles.css file. 1254 00:58:02,920 --> 00:58:07,300 It's my style sheet for this page, so any CSS code I put in styles.css 1255 00:58:07,300 --> 00:58:10,990 will reflect in quiz.html. 1256 00:58:10,990 --> 00:58:14,670 And let me also create a new file called scripts.js 1257 00:58:14,670 --> 00:58:17,470 where I'm going to store all the JavaScript code for this quiz 1258 00:58:17,470 --> 00:58:19,000 application. 1259 00:58:19,000 --> 00:58:22,759 And I'm going to say script source equals scripts.js 1260 00:58:22,759 --> 00:58:26,050 and that's going to be my way of saying, I want to include some JavaScript here 1261 00:58:26,050 --> 00:58:28,750 as well that I want to associate with this particular page, 1262 00:58:28,750 --> 00:58:32,432 and the JavaScript code is going to go there. 1263 00:58:32,432 --> 00:58:34,056 Questions about what we've done so far? 1264 00:58:34,056 --> 00:58:36,960 1265 00:58:36,960 --> 00:58:38,460 All right. 1266 00:58:38,460 --> 00:58:41,990 Now in the body of the page what am I going to include? 1267 00:58:41,990 --> 00:58:44,270 Well, at the top of the page, I'm going to go ahead 1268 00:58:44,270 --> 00:58:48,780 and say, all right, let's just call it Quiz, give it a heading called Quiz. 1269 00:58:48,780 --> 00:58:52,320 And underneath the quiz I would like a place to display the question 1270 00:58:52,320 --> 00:58:53,767 and display the answer choices. 1271 00:58:53,767 --> 00:58:56,100 But the question and answer choices are going to change, 1272 00:58:56,100 --> 00:58:58,058 so ideally I'd like to have the JavaScript take 1273 00:58:58,058 --> 00:59:01,560 care of actually putting the question and the answer into the page. 1274 00:59:01,560 --> 00:59:05,610 But I need space on the page for the question and the answer choices to go, 1275 00:59:05,610 --> 00:59:09,990 so I'm going to go ahead and say h2id=question. 1276 00:59:09,990 --> 00:59:12,930 1277 00:59:12,930 --> 00:59:16,020 So the question is going to be a heading as well, not as big as quiz, 1278 00:59:16,020 --> 00:59:18,422 so each h2 for slightly smaller than h1. 1279 00:59:18,422 --> 00:59:21,630 And it's going to have an ID of question so that I can reference it later, so 1280 00:59:21,630 --> 00:59:23,902 that I can find this place in the page. 1281 00:59:23,902 --> 00:59:25,360 But for now it's going to be empty. 1282 00:59:25,360 --> 00:59:27,584 I'm not actually going to put a question on the page. 1283 00:59:27,584 --> 00:59:29,250 I'm going to let the JavaScript do that. 1284 00:59:29,250 --> 00:59:32,680 And we'll get to that in just a moment. 1285 00:59:32,680 --> 00:59:36,520 Underneath that I need some place to put it in the answer choices, the options 1286 00:59:36,520 --> 00:59:38,410 that the user can actually select. 1287 00:59:38,410 --> 00:59:42,250 So I'll say-- let's create a div, just a vertical section of the page, 1288 00:59:42,250 --> 00:59:45,367 ID=options End array. 1289 00:59:45,367 --> 00:59:46,950 I don't know what the options are yet. 1290 00:59:46,950 --> 00:59:48,610 Again, I'll let the JavaScript handle that. 1291 00:59:48,610 --> 00:59:51,265 But I need some space on the page where those options can go. 1292 00:59:51,265 --> 00:59:53,056 And so that's what I'm doing here, creating 1293 00:59:53,056 --> 00:59:56,520 a new div where I have those options. 1294 00:59:56,520 --> 01:00:00,600 And finally, at the bottom we'll do questions correct 1295 01:00:00,600 --> 01:00:04,350 and then I need some space where we can input the number of questions 1296 01:00:04,350 --> 01:00:05,820 correct that I have. 1297 01:00:05,820 --> 01:00:08,580 By default, it's probably just going to be 0 out of 0, 1298 01:00:08,580 --> 01:00:10,710 but I'm going to need to update that frequently. 1299 01:00:10,710 --> 01:00:13,020 So I'm going to put this inside of a span. 1300 01:00:13,020 --> 01:00:16,980 A span you can think of just as an inline section of the page 1301 01:00:16,980 --> 01:00:19,520 that I can later reference, similar to div, but divs 1302 01:00:19,520 --> 01:00:22,060 take up their own vertical space. 1303 01:00:22,060 --> 01:00:25,230 But I would like 0 out of 0 or 1 out of 1 to be on the same line 1304 01:00:25,230 --> 01:00:29,460 as questions correct, so I'm going to put it inside of a span. 1305 01:00:29,460 --> 01:00:33,410 Give it an ID called correct, just as a way of referencing it later. 1306 01:00:33,410 --> 01:00:36,590 And for now, we'll say 0-- or not 0 and 0, 0 of 0. 1307 01:00:36,590 --> 01:00:39,100 1308 01:00:39,100 --> 01:00:40,896 And so that's it for the HTML. 1309 01:00:40,896 --> 01:00:42,770 I'm just defining the structure of the page-- 1310 01:00:42,770 --> 01:00:45,740 a heading that says Quiz, a place where I can put the question, 1311 01:00:45,740 --> 01:00:48,860 a place where I can fill in with each of the options that I have, 1312 01:00:48,860 --> 01:00:50,693 and then a place where I can say, OK, here's 1313 01:00:50,693 --> 01:00:53,320 how many questions correct I've gotten. 1314 01:00:53,320 --> 01:00:57,890 If I open up quiz.html right now, here's what the page looks like. 1315 01:00:57,890 --> 01:01:03,040 It just says quiz and questions correct 0 out of 0. 1316 01:01:03,040 --> 01:01:07,118 What questions go so far about just the HTML here? 1317 01:01:07,118 --> 01:01:08,549 Yeah? 1318 01:01:08,549 --> 01:01:10,457 AUDIENCE: Why do you [INAUDIBLE]? 1319 01:01:10,457 --> 01:01:13,226 1320 01:01:13,226 --> 01:01:14,600 BRIAN YU: Why do I need the span? 1321 01:01:14,600 --> 01:01:19,110 I need the span because later on when I get a question right, 1322 01:01:19,110 --> 01:01:21,200 I want to be able to update this text. 1323 01:01:21,200 --> 01:01:24,410 Instead of 0 out of 0 I want it to be 1 out of 1 and then 1 out of 2 1324 01:01:24,410 --> 01:01:25,520 if I get one wrong. 1325 01:01:25,520 --> 01:01:27,460 And to do that, in my JavaScript I'm going 1326 01:01:27,460 --> 01:01:31,379 to need to be able to reference this particular part of the page. 1327 01:01:31,379 --> 01:01:33,920 And so by wrapping it inside of a span that I give a name to, 1328 01:01:33,920 --> 01:01:36,920 an ID of correct, I can later query select or try 1329 01:01:36,920 --> 01:01:40,582 and grab the thing that has an ID of correct, and then modify the contents. 1330 01:01:40,582 --> 01:01:42,290 So I'm just thinking ahead here, thinking 1331 01:01:42,290 --> 01:01:45,360 that eventually I'm going to need to edit that section of the page. 1332 01:01:45,360 --> 01:01:50,500 So I'm giving it a name that makes it easier for me to edit it later. 1333 01:01:50,500 --> 01:01:51,070 Other things? 1334 01:01:51,070 --> 01:01:54,120 1335 01:01:54,120 --> 01:01:54,620 All right. 1336 01:01:54,620 --> 01:01:57,645 Let's actually go ahead and actually try and write some JavaScript code. 1337 01:01:57,645 --> 01:02:00,770 The first thing that I'm going to need is I'm going to need some questions, 1338 01:02:00,770 --> 01:02:02,896 so I'm going to define a variable called questions. 1339 01:02:02,896 --> 01:02:05,853 It's going to be constant because the questions aren't going to change. 1340 01:02:05,853 --> 01:02:09,080 I'm just going to define them once and those are going to be the questions. 1341 01:02:09,080 --> 01:02:10,580 And it's going to be an array. 1342 01:02:10,580 --> 01:02:12,890 It's an array of one question after another question 1343 01:02:12,890 --> 01:02:15,110 after another question. 1344 01:02:15,110 --> 01:02:19,400 And each question is going to be what we'll call a JavaScript object, which 1345 01:02:19,400 --> 01:02:21,830 you can think of a Python dictionary that associates 1346 01:02:21,830 --> 01:02:24,180 keys and values together. 1347 01:02:24,180 --> 01:02:27,924 And the idea here is I want to be able to have a question, 1348 01:02:27,924 --> 01:02:29,840 and the question is going to be some question. 1349 01:02:29,840 --> 01:02:35,510 We'll do something simple for now, like, what is 10 plus 10? 1350 01:02:35,510 --> 01:02:39,310 And we're going to have options. 1351 01:02:39,310 --> 01:02:43,180 So my options are what data type makes sense for options? 1352 01:02:43,180 --> 01:02:44,140 AUDIENCE: A list. 1353 01:02:44,140 --> 01:02:46,181 BRIAN YU: A list or an array in JavaScript, yeah. 1354 01:02:46,181 --> 01:02:46,860 Same idea. 1355 01:02:46,860 --> 01:02:55,346 So my options are going to be-- all right, let's do 8 and 28 and 30. 1356 01:02:55,346 --> 01:02:58,220 And I guess we should probably put the correct answer in there, too-- 1357 01:02:58,220 --> 01:02:59,920 20. 1358 01:02:59,920 --> 01:03:03,922 OK, so we've defined question, we defined our possible answer options, 1359 01:03:03,922 --> 01:03:06,380 and then we also should probably define what the answer is. 1360 01:03:06,380 --> 01:03:09,560 JavaScript needs to know what the correct answer to the question is. 1361 01:03:09,560 --> 01:03:12,830 And the correct answer in this case is 20. 1362 01:03:12,830 --> 01:03:15,500 And I'm making everything strings just for ease of comparison 1363 01:03:15,500 --> 01:03:17,904 later because not all my answers are necessarily numeric, 1364 01:03:17,904 --> 01:03:19,820 though you can imagine a variant of this where 1365 01:03:19,820 --> 01:03:23,100 you use numbers instead of strings. 1366 01:03:23,100 --> 01:03:24,740 Let's do another question. 1367 01:03:24,740 --> 01:03:27,720 Anyone have a question in mind? 1368 01:03:27,720 --> 01:03:31,710 We'll do, what is Athena's favorite animal? 1369 01:03:31,710 --> 01:03:33,330 Anyone know the answer to this? 1370 01:03:33,330 --> 01:03:34,250 AUDIENCE: Otters. 1371 01:03:34,250 --> 01:03:34,916 BRIAN YU: Great. 1372 01:03:34,916 --> 01:03:36,950 You're paying attention. 1373 01:03:36,950 --> 01:03:38,360 All right. 1374 01:03:38,360 --> 01:03:45,570 We'll say jellyfish and penguins and otters. 1375 01:03:45,570 --> 01:03:51,224 And the answer is going to be otters, and that'll be good for now. 1376 01:03:51,224 --> 01:03:52,890 You can feel free to add more questions. 1377 01:03:52,890 --> 01:03:56,820 Add whatever you want to the page if you'd like to. 1378 01:03:56,820 --> 01:03:58,620 So we've got our questions. 1379 01:03:58,620 --> 01:04:01,403 What other information, what other variables do we need here? 1380 01:04:01,403 --> 01:04:02,778 What do we need to keep track of? 1381 01:04:02,778 --> 01:04:08,146 1382 01:04:08,146 --> 01:04:08,646 Yeah? 1383 01:04:08,646 --> 01:04:10,063 AUDIENCE: The number of questions. 1384 01:04:10,063 --> 01:04:12,604 BRIAN YU: The number of questions we've gotten correct, yeah. 1385 01:04:12,604 --> 01:04:14,530 So we'll set let correct be 0, just a variable 1386 01:04:14,530 --> 01:04:16,738 to stand in for how many things we've gotten correct. 1387 01:04:16,738 --> 01:04:19,515 Anything else we need to keep track of? 1388 01:04:19,515 --> 01:04:20,014 Yeah? 1389 01:04:20,014 --> 01:04:20,930 AUDIENCE: [INAUDIBLE] 1390 01:04:20,930 --> 01:04:23,130 BRIAN YU: Yeah, what question number you're currently on 1391 01:04:23,130 --> 01:04:25,004 is probably something that we should probably 1392 01:04:25,004 --> 01:04:26,620 have a program keep keeping track of. 1393 01:04:26,620 --> 01:04:30,182 So maybe say, let question number equal 0. 1394 01:04:30,182 --> 01:04:33,140 I'll go ahead and zero index this so it's easy to index into the array, 1395 01:04:33,140 --> 01:04:35,848 because the first thing in the array is going to be element zero. 1396 01:04:35,848 --> 01:04:38,430 So we'll start at question number zero. 1397 01:04:38,430 --> 01:04:40,540 And let's write some code here. 1398 01:04:40,540 --> 01:04:43,190 Document dot add event listener. 1399 01:04:43,190 --> 01:04:48,160 We'll wait for DOM content loaded, and when Dom content is loaded 1400 01:04:48,160 --> 01:04:52,490 we'll go ahead and run a function. 1401 01:04:52,490 --> 01:04:54,470 And what should this do? 1402 01:04:54,470 --> 01:04:56,380 Well, we want to load a new question. 1403 01:04:56,380 --> 01:04:58,737 We want to load the question onto the page, 1404 01:04:58,737 --> 01:05:01,820 but loading a question onto the page is something we're going to do a lot. 1405 01:05:01,820 --> 01:05:03,080 We're going to load a question onto the page, 1406 01:05:03,080 --> 01:05:05,370 and later on we're going to load another question onto the page 1407 01:05:05,370 --> 01:05:06,328 and so on and so forth. 1408 01:05:06,328 --> 01:05:09,410 So rather than put the code to load a question right here, 1409 01:05:09,410 --> 01:05:12,680 it's probably going to make more sense to create a function just called 1410 01:05:12,680 --> 01:05:16,850 load question that we can call here, that we can call later if we need to, 1411 01:05:16,850 --> 01:05:19,300 so that it's just easy to reference. 1412 01:05:19,300 --> 01:05:22,430 And so what's going to happen is as soon as the page is done loading, 1413 01:05:22,430 --> 01:05:26,210 let's go ahead and call this load question function. 1414 01:05:26,210 --> 01:05:31,900 1415 01:05:31,900 --> 01:05:35,880 Questions about what we've done here so far and why we've done it? 1416 01:05:35,880 --> 01:05:37,790 We've defined a variable called questions 1417 01:05:37,790 --> 01:05:41,040 that's going to keep track of an array of all the questions we've got so far-- 1418 01:05:41,040 --> 01:05:42,999 questions, options, what the correct answer is. 1419 01:05:42,999 --> 01:05:45,915 We're keeping track of the current question number, how many questions 1420 01:05:45,915 --> 01:05:46,839 we've gotten correct. 1421 01:05:46,839 --> 01:05:48,630 And then as soon as the pages done loading, 1422 01:05:48,630 --> 01:05:50,629 we're going to call this load question function. 1423 01:05:50,629 --> 01:05:53,330 1424 01:05:53,330 --> 01:05:53,830 All right. 1425 01:05:53,830 --> 01:05:55,900 So what's load question going to do? 1426 01:05:55,900 --> 01:06:00,280 Well, how would I access the current question, 1427 01:06:00,280 --> 01:06:01,710 the question that I want to load? 1428 01:06:01,710 --> 01:06:05,280 1429 01:06:05,280 --> 01:06:07,450 Let's think about for that a little bit. 1430 01:06:07,450 --> 01:06:08,200 Yeah, idea? 1431 01:06:08,200 --> 01:06:11,140 AUDIENCE: [INAUDIBLE] 1432 01:06:11,140 --> 01:06:15,594 1433 01:06:15,594 --> 01:06:16,260 BRIAN YU: Great. 1434 01:06:16,260 --> 01:06:17,790 So when we want to move on to the next question, 1435 01:06:17,790 --> 01:06:19,230 we can increment question number. 1436 01:06:19,230 --> 01:06:21,960 But yeah, this question number variable is the index 1437 01:06:21,960 --> 01:06:23,610 of which question I want to get at. 1438 01:06:23,610 --> 01:06:26,160 And so if I have a variable called questions up here, 1439 01:06:26,160 --> 01:06:28,811 how will I get at the current question? 1440 01:06:28,811 --> 01:06:29,810 What code would I write? 1441 01:06:29,810 --> 01:06:30,477 Yeah? 1442 01:06:30,477 --> 01:06:37,300 AUDIENCE: Questions bracket question number bracket question. 1443 01:06:37,300 --> 01:06:38,380 BRIAN YU: Yeah, exactly. 1444 01:06:38,380 --> 01:06:41,770 Questions is my variable that's keeping track of this whole list, 1445 01:06:41,770 --> 01:06:43,360 but I don't want all the questions. 1446 01:06:43,360 --> 01:06:45,410 I just want the current question. 1447 01:06:45,410 --> 01:06:48,520 So if I say questions square bracket question number, 1448 01:06:48,520 --> 01:06:51,760 that's going to get me just the current question. 1449 01:06:51,760 --> 01:06:53,700 But the current question has three parts. 1450 01:06:53,700 --> 01:06:57,250 It has a question, it has options, and it has an answer. 1451 01:06:57,250 --> 01:06:59,170 And so I want to get at just the question 1452 01:06:59,170 --> 01:07:02,480 property of this particular object. 1453 01:07:02,480 --> 01:07:04,770 And so I'm going to say question number dot question. 1454 01:07:04,770 --> 01:07:07,520 You could also use the square bracket notation, but for an object, 1455 01:07:07,520 --> 01:07:10,380 often you'll reference these properties just using the dot notation. 1456 01:07:10,380 --> 01:07:12,213 So I'm going to say, question square bracket 1457 01:07:12,213 --> 01:07:15,190 question mark question number dot question. 1458 01:07:15,190 --> 01:07:17,470 And try and make sure you understand why that works. 1459 01:07:17,470 --> 01:07:19,460 Questions is our array of questions. 1460 01:07:19,460 --> 01:07:22,057 Question number is the index of the question we care about. 1461 01:07:22,057 --> 01:07:24,640 And that's going to be an object with three parts-- a question 1462 01:07:24,640 --> 01:07:27,940 and options and an answer, and I want just the question out of that. 1463 01:07:27,940 --> 01:07:31,190 1464 01:07:31,190 --> 01:07:33,530 So this is our question. 1465 01:07:33,530 --> 01:07:37,060 And what do I want to do with that question? 1466 01:07:37,060 --> 01:07:41,765 I've gotten the question now, but where do I want to put it? 1467 01:07:41,765 --> 01:07:44,220 AUDIENCE: [INAUDIBLE] 1468 01:07:44,220 --> 01:07:46,220 BRIAN YU: Yeah, the inner HTML of something. 1469 01:07:46,220 --> 01:07:47,720 Inner HTML of what? 1470 01:07:47,720 --> 01:07:49,378 Here's my HTML page. 1471 01:07:49,378 --> 01:07:51,050 AUDIENCE: The h2 with ID question. 1472 01:07:51,050 --> 01:07:54,030 BRIAN YU: Yeah, the h2 that has ID of question, that's where 1473 01:07:54,030 --> 01:07:55,796 I want to put the actual question. 1474 01:07:55,796 --> 01:07:58,170 So it has an ID of question, so how am I going to get it? 1475 01:07:58,170 --> 01:08:04,690 1476 01:08:04,690 --> 01:08:07,390 What code will get the thing that has an ID of question? 1477 01:08:07,390 --> 01:08:11,080 1478 01:08:11,080 --> 01:08:11,749 Yeah? 1479 01:08:11,749 --> 01:08:15,172 AUDIENCE: Document dot query selector and then quotation marks 1480 01:08:15,172 --> 01:08:18,074 hashtag question. 1481 01:08:18,074 --> 01:08:18,740 BRIAN YU: Great. 1482 01:08:18,740 --> 01:08:20,840 Document dot query selector pound question 1483 01:08:20,840 --> 01:08:24,149 is going to say get the thing that has an ID of question. 1484 01:08:24,149 --> 01:08:29,886 And I would like to set its inner HTML to be equal to this question. 1485 01:08:29,886 --> 01:08:32,469 And just for fun, I'm going to swap the order of the questions 1486 01:08:32,469 --> 01:08:34,490 so that we get this one up first. 1487 01:08:34,490 --> 01:08:38,899 1488 01:08:38,899 --> 01:08:44,641 So now I open up quiz.html, refresh the page, and immediately we see Quiz. 1489 01:08:44,641 --> 01:08:46,640 And now we've been able to programmatically take 1490 01:08:46,640 --> 01:08:51,077 the first question and put it into the page in the question spot. 1491 01:08:51,077 --> 01:08:52,410 Questions about how we did that? 1492 01:08:52,410 --> 01:08:57,439 1493 01:08:57,439 --> 01:09:00,160 All right, let's move on. 1494 01:09:00,160 --> 01:09:01,930 Green smiley faces, great. 1495 01:09:01,930 --> 01:09:04,420 Now I want to actually insert the options into this page, 1496 01:09:04,420 --> 01:09:06,939 like the options that are going to allow me now 1497 01:09:06,939 --> 01:09:11,310 to be able to choose among the possible options. 1498 01:09:11,310 --> 01:09:13,310 So how am I going to do that? 1499 01:09:13,310 --> 01:09:14,939 Well, where are the options stored? 1500 01:09:14,939 --> 01:09:18,520 If the question is stored in question square bracket question number dot 1501 01:09:18,520 --> 01:09:22,304 question , what would I use to get at the answer options? 1502 01:09:22,304 --> 01:09:32,244 1503 01:09:32,244 --> 01:09:36,729 AUDIENCE: [INAUDIBLE] 1504 01:09:36,729 --> 01:09:38,170 BRIAN YU: Great. 1505 01:09:38,170 --> 01:09:41,410 Questions square bracket question number, get the current question, 1506 01:09:41,410 --> 01:09:43,149 and get the possible options. 1507 01:09:43,149 --> 01:09:45,859 I'll go ahead and store that. 1508 01:09:45,859 --> 01:09:48,469 That's going to be all my options. 1509 01:09:48,469 --> 01:09:50,260 And what I'd like to do is I'd like to have 1510 01:09:50,260 --> 01:09:52,479 some loop over all of those options that's 1511 01:09:52,479 --> 01:09:56,350 just going to get me one option at a time and do something with it. 1512 01:09:56,350 --> 01:10:03,210 So I'm going to say for const option of all of these options. 1513 01:10:03,210 --> 01:10:04,210 And now I've got a loop. 1514 01:10:04,210 --> 01:10:06,043 I'm looping through all the possible options 1515 01:10:06,043 --> 01:10:09,110 because I want to do something with each of those options. 1516 01:10:09,110 --> 01:10:13,420 And if I want to, I can do console dot log option. 1517 01:10:13,420 --> 01:10:15,910 Just for now, let's print out the option and make 1518 01:10:15,910 --> 01:10:18,950 sure it's what we expect it to be, taking things one piece at a time, 1519 01:10:18,950 --> 01:10:20,741 slowly just making sure that we're building 1520 01:10:20,741 --> 01:10:22,240 this application the right way. 1521 01:10:22,240 --> 01:10:24,746 I'll open up the console, refresh the page, 1522 01:10:24,746 --> 01:10:26,620 and we get, what is Athena's favorite animal? 1523 01:10:26,620 --> 01:10:28,870 And sure enough, if you look over here at the options, 1524 01:10:28,870 --> 01:10:32,560 we see that we have jellyfish, penguins, and otters 1525 01:10:32,560 --> 01:10:34,850 as the possible options for this. 1526 01:10:34,850 --> 01:10:39,040 They show up in the console, but now I'd like to actually make them buttons, 1527 01:10:39,040 --> 01:10:42,105 for example. 1528 01:10:42,105 --> 01:10:45,890 So what do I need to do here? 1529 01:10:45,890 --> 01:10:47,810 Well, the first thing I probably need to do 1530 01:10:47,810 --> 01:10:50,600 is to get it where I want to put the options where 1531 01:10:50,600 --> 01:10:53,822 do I want to put the options? 1532 01:10:53,822 --> 01:10:56,714 AUDIENCE: [INAUDIBLE] 1533 01:10:56,714 --> 01:10:59,047 1534 01:10:59,047 --> 01:11:00,088 BRIAN YU: Someone say it? 1535 01:11:00,088 --> 01:11:02,970 1536 01:11:02,970 --> 01:11:03,470 OK. 1537 01:11:03,470 --> 01:11:05,510 The thing that would ID options, great. 1538 01:11:05,510 --> 01:11:08,790 So we'll create a variable, call it options, 1539 01:11:08,790 --> 01:11:13,010 set it equal to document dot query selector options. 1540 01:11:13,010 --> 01:11:16,910 The thing that has ID options we're now going to store inside of this variable 1541 01:11:16,910 --> 01:11:18,845 called options. 1542 01:11:18,845 --> 01:11:21,220 And the first thing I'm going to do is just clear it out. 1543 01:11:21,220 --> 01:11:23,969 In case there was something in it before from a previous question, 1544 01:11:23,969 --> 01:11:27,310 we'll say options dot inner HTML is equal to the empty string. 1545 01:11:27,310 --> 01:11:28,579 It should be nothing. 1546 01:11:28,579 --> 01:11:29,577 Yeah? 1547 01:11:29,577 --> 01:11:33,569 AUDIENCE: When you're doing this over the options [INAUDIBLE],, 1548 01:11:33,569 --> 01:11:37,287 so is that equivalent to doing the for each? 1549 01:11:37,287 --> 01:11:37,870 BRIAN YU: Yes. 1550 01:11:37,870 --> 01:11:39,520 I could have also just done for each here 1551 01:11:39,520 --> 01:11:41,280 and that would have worked just fine, too. 1552 01:11:41,280 --> 01:11:42,970 I'm using a for loop here just because it's probably 1553 01:11:42,970 --> 01:11:45,340 what you're more familiar with from other languages, but in practice 1554 01:11:45,340 --> 01:11:48,298 you actually would probably end up using the for each, tends to be more 1555 01:11:48,298 --> 01:11:49,590 JavaScript paradigm. 1556 01:11:49,590 --> 01:11:51,631 But yes, you could use a for each here, for sure. 1557 01:11:51,631 --> 01:11:54,440 1558 01:11:54,440 --> 01:11:57,020 So now what I'd like to do is for each of these options, 1559 01:11:57,020 --> 01:12:02,690 let's try this-- options dot inner HTML plus equals option. 1560 01:12:02,690 --> 01:12:05,560 1561 01:12:05,560 --> 01:12:10,710 I take all the options, get at the inner HTML, and just add the option to it. 1562 01:12:10,710 --> 01:12:13,460 This isn't going to be perfect, but you'll see what it looks like. 1563 01:12:13,460 --> 01:12:15,410 We'll go ahead and refresh the page. 1564 01:12:15,410 --> 01:12:17,152 What is Athena's favorite animal? 1565 01:12:17,152 --> 01:12:19,860 All right, here's what the page looks like-- jellyfish, penguins, 1566 01:12:19,860 --> 01:12:22,959 otters as the three possible options, which is OK. 1567 01:12:22,959 --> 01:12:24,500 But we'd like to do better than that. 1568 01:12:24,500 --> 01:12:26,720 We'd like to actually make them buttons. 1569 01:12:26,720 --> 01:12:30,200 And so rather than just add the option to it, let's go ahead 1570 01:12:30,200 --> 01:12:31,860 and add something more. 1571 01:12:31,860 --> 01:12:35,030 Let's add-- and now I'm going to use it backticks. 1572 01:12:35,030 --> 01:12:38,390 This is JavaScript's way of doing format strings, the equivalent of what 1573 01:12:38,390 --> 01:12:40,520 was the F in front of the string in Python, 1574 01:12:40,520 --> 01:12:43,400 because I want to be able to substitute some values into this string. 1575 01:12:43,400 --> 01:12:46,180 And you'll see how I'm going to do that in just a moment. 1576 01:12:46,180 --> 01:12:49,330 We're going to have a button, and just forward thinking a little bit, 1577 01:12:49,330 --> 01:12:51,310 I'll give all these buttons a class. 1578 01:12:51,310 --> 01:12:54,070 That class will be called option, so that later I 1579 01:12:54,070 --> 01:12:57,340 can say let's wait for when you click on something that has a class of option, 1580 01:12:57,340 --> 01:12:58,930 but we'll deal with that later. 1581 01:12:58,930 --> 01:13:01,240 Button class equals option. 1582 01:13:01,240 --> 01:13:06,580 And in order to plug in some value in JavaScript into a format string, 1583 01:13:06,580 --> 01:13:10,200 you use a dollar sign and then curly braces. 1584 01:13:10,200 --> 01:13:15,070 So going to plug in the value of option and then we'll 1585 01:13:15,070 --> 01:13:19,790 say slash button to end the button. 1586 01:13:19,790 --> 01:13:21,170 So here's what I've done. 1587 01:13:21,170 --> 01:13:25,480 I've taken all of the options in that space in the HTML page. 1588 01:13:25,480 --> 01:13:28,330 I'm going to update the HTML out in order 1589 01:13:28,330 --> 01:13:33,370 to add this button, a button whose class is option, which doesn't do anything 1590 01:13:33,370 --> 01:13:37,630 now but we can make do something later, plugging in the option as the value 1591 01:13:37,630 --> 01:13:41,820 that button, and then that's it for the button. 1592 01:13:41,820 --> 01:13:44,880 Let's go ahead and refresh this page. 1593 01:13:44,880 --> 01:13:47,100 And all right, this is starting to look pretty good. 1594 01:13:47,100 --> 01:13:49,440 It asks the question, what is Athena's favorite animal. 1595 01:13:49,440 --> 01:13:52,320 It's giving me buttons for each of the three possible answers. 1596 01:13:52,320 --> 01:13:54,780 Now, of course, there are ways that I could style this if I wanted to 1597 01:13:54,780 --> 01:13:56,405 in order to make it a little bit nicer. 1598 01:13:56,405 --> 01:14:00,390 I'll go into my CSS file and say, all right, let's center it, take the body 1599 01:14:00,390 --> 01:14:05,170 the page, text align center it in order to match what I had before. 1600 01:14:05,170 --> 01:14:06,329 This is a serif font. 1601 01:14:06,329 --> 01:14:08,370 Maybe you'd like to use sans serif for this quiz, 1602 01:14:08,370 --> 01:14:10,703 just because I think it'll look a little nicer for this. 1603 01:14:10,703 --> 01:14:15,000 So I can say font family sans serif, just to make it a sans serif font. 1604 01:14:15,000 --> 01:14:18,107 And then I'd like these buttons to be a little spaced out. 1605 01:14:18,107 --> 01:14:20,190 I'd like them to be a little bigger, for instance. 1606 01:14:20,190 --> 01:14:22,090 I'd maybe like to change the color of it. 1607 01:14:22,090 --> 01:14:24,940 So let's take all these buttons. 1608 01:14:24,940 --> 01:14:29,160 Let's give them a font size, font size of 18 pixels maybe. 1609 01:14:29,160 --> 01:14:32,160 I'd like there to be some padding on the inside of the button, 1610 01:14:32,160 --> 01:14:34,530 so that the button shows up as a little bit bigger. 1611 01:14:34,530 --> 01:14:36,905 We'll give each button 15 pixels' width worth of padding, 1612 01:14:36,905 --> 01:14:38,613 though feel free to mess with this as you 1613 01:14:38,613 --> 01:14:40,480 like for whatever you think looks best. 1614 01:14:40,480 --> 01:14:42,420 And I'd also like space between the buttons. 1615 01:14:42,420 --> 01:14:44,560 Right now all the buttons are right next to each other. 1616 01:14:44,560 --> 01:14:47,070 So I'd like at least a little bit of space between all the buttons, 1617 01:14:47,070 --> 01:14:49,180 so I'll give them all a margin of 10 pixels. 1618 01:14:49,180 --> 01:14:51,360 Remember, margin is on this side of the border. 1619 01:14:51,360 --> 01:14:54,120 It's space between different elements. 1620 01:14:54,120 --> 01:14:56,785 And then I'm going to give it a background color. 1621 01:14:56,785 --> 01:14:59,160 And I'm just going to give it a grayish background color, 1622 01:14:59,160 --> 01:15:02,610 and I know that the color for that happens to be E7E7E7, 1623 01:15:02,610 --> 01:15:04,870 so I'm going to go with that. 1624 01:15:04,870 --> 01:15:08,962 And if I go ahead and refresh this page now, all right, great. 1625 01:15:08,962 --> 01:15:11,420 This is starting to really look like that quiz application. 1626 01:15:11,420 --> 01:15:13,184 I've centered things, made it sans serif, 1627 01:15:13,184 --> 01:15:16,100 added some space around the buttons, changed the color of the buttons. 1628 01:15:16,100 --> 01:15:18,620 We've got a question, we've got possible answers. 1629 01:15:18,620 --> 01:15:21,080 Of course, not all of this is quite working just yet. 1630 01:15:21,080 --> 01:15:23,690 The buttons don't actually do anything, and I'd 1631 01:15:23,690 --> 01:15:26,520 like to make the buttons actually do something. 1632 01:15:26,520 --> 01:15:29,340 So all right, how do I do that? 1633 01:15:29,340 --> 01:15:31,280 How do I make the buttons do something? 1634 01:15:31,280 --> 01:15:35,145 1635 01:15:35,145 --> 01:15:35,645 Yeah? 1636 01:15:35,645 --> 01:15:38,389 AUDIENCE: Is there like, on click? 1637 01:15:38,389 --> 01:15:39,430 BRIAN YU: Yeah, on click. 1638 01:15:39,430 --> 01:15:43,580 And I want to apply the on click to what exactly? 1639 01:15:43,580 --> 01:15:44,695 To each of the buttons. 1640 01:15:44,695 --> 01:15:46,695 And so how am I going to get all of the buttons? 1641 01:15:46,695 --> 01:15:49,532 1642 01:15:49,532 --> 01:15:52,740 Any thoughts on how I can get all the buttons so I can apply something to it? 1643 01:15:52,740 --> 01:15:53,240 Yeah? 1644 01:15:53,240 --> 01:15:57,440 AUDIENCE: Document dot query selector dot options? 1645 01:15:57,440 --> 01:16:00,050 BRIAN YU: OK, query selector dot option, this 1646 01:16:00,050 --> 01:16:02,450 will get me a thing that has a class a name of option, 1647 01:16:02,450 --> 01:16:05,500 which is great because this button has a class name of option. 1648 01:16:05,500 --> 01:16:06,602 What could go wrong here? 1649 01:16:06,602 --> 01:16:10,085 1650 01:16:10,085 --> 01:16:10,960 This is a good start. 1651 01:16:10,960 --> 01:16:11,180 Yeah? 1652 01:16:11,180 --> 01:16:12,670 AUDIENCE: It only takes the first one. 1653 01:16:12,670 --> 01:16:15,120 BRIAN YU: Yeah, query selector, recall, only gets me one thing. 1654 01:16:15,120 --> 01:16:18,078 It's only going to get me the first thing that has the class of option, 1655 01:16:18,078 --> 01:16:19,370 but I want all of them. 1656 01:16:19,370 --> 01:16:22,390 So what I might do is document dot query selector all to say, 1657 01:16:22,390 --> 01:16:24,970 get me all of the possible options. 1658 01:16:24,970 --> 01:16:31,390 And for each of them I would like to do something with that option. 1659 01:16:31,390 --> 01:16:34,635 Again, I'm using the arrow syntax here where the option is the input. 1660 01:16:34,635 --> 01:16:36,760 This is the option that I want to do something with 1661 01:16:36,760 --> 01:16:39,060 and here is the function. 1662 01:16:39,060 --> 01:16:42,310 And what do I want to do with this? 1663 01:16:42,310 --> 01:16:49,310 We'll say, option dot on click, we're going to run some function. 1664 01:16:49,310 --> 01:16:54,554 And for now, let me just say, alert you clicked something. 1665 01:16:54,554 --> 01:16:56,470 Just say, all right, you clicked on an option, 1666 01:16:56,470 --> 01:16:57,760 let's just make sure this code works. 1667 01:16:57,760 --> 01:17:00,710 I'm trying to say, for each of these options, when you click on them, 1668 01:17:00,710 --> 01:17:03,966 something should happen and let's make sure something happens. 1669 01:17:03,966 --> 01:17:05,510 So refresh. 1670 01:17:05,510 --> 01:17:07,130 If I click on a button, great. 1671 01:17:07,130 --> 01:17:07,790 I get an alert. 1672 01:17:07,790 --> 01:17:09,206 It says, you clicked on something. 1673 01:17:09,206 --> 01:17:10,310 Let's try another button. 1674 01:17:10,310 --> 01:17:11,420 I click on it, great. 1675 01:17:11,420 --> 01:17:13,730 It says, you clicked on something. 1676 01:17:13,730 --> 01:17:18,940 But now what I really care about is what is it that I clicked on. 1677 01:17:18,940 --> 01:17:21,271 And in order to do that, if you have a button-- 1678 01:17:21,271 --> 01:17:24,270 and you'd only know this by playing around a JavaScript little bit more. 1679 01:17:24,270 --> 01:17:27,360 But there is a property called text content that refers 1680 01:17:27,360 --> 01:17:30,030 to what does the button actually say. 1681 01:17:30,030 --> 01:17:35,385 So if I say, option dot text content, now let's play this game. 1682 01:17:35,385 --> 01:17:36,760 What is Athena's favorite animal? 1683 01:17:36,760 --> 01:17:41,170 If I click on otters, I get an alert and that alert says otters. 1684 01:17:41,170 --> 01:17:44,680 That is the button that I clicked on. 1685 01:17:44,680 --> 01:17:46,680 Questions about what we've done so far? 1686 01:17:46,680 --> 01:17:50,910 1687 01:17:50,910 --> 01:17:53,859 So this is the part where we're actually going to set you free. 1688 01:17:53,859 --> 01:17:56,400 Your project is to complete working on this quiz application. 1689 01:17:56,400 --> 01:17:57,900 I'll post the distribution code that we just 1690 01:17:57,900 --> 01:17:59,550 worked on together in just a moment, in case you 1691 01:17:59,550 --> 01:18:01,166 want to use that as a starting point. 1692 01:18:01,166 --> 01:18:02,790 But here are the things to think about. 1693 01:18:02,790 --> 01:18:04,950 We've gotten to the point where when you click on a button, 1694 01:18:04,950 --> 01:18:06,780 we know what button you've clicked on. 1695 01:18:06,780 --> 01:18:10,320 So if the answer is guessed and the answer is correct, 1696 01:18:10,320 --> 01:18:12,870 you should increment the score and ideally display 1697 01:18:12,870 --> 01:18:14,890 that as such on the page. 1698 01:18:14,890 --> 01:18:18,030 And when you answer a question, we should move on to the next question. 1699 01:18:18,030 --> 01:18:20,830 As soon as the answer is guessed, whether it's right or wrong, 1700 01:18:20,830 --> 01:18:24,210 you should update the score and then show us what the next question is. 1701 01:18:24,210 --> 01:18:26,162 And then once all the questions are done, 1702 01:18:26,162 --> 01:18:27,870 we should ideally show a game over screen 1703 01:18:27,870 --> 01:18:30,240 that might just say, quiz complete, for instance, 1704 01:18:30,240 --> 01:18:32,100 and also shows you your final score. 1705 01:18:32,100 --> 01:18:35,880 You got two out of three questions correct or whatnot. 1706 01:18:35,880 --> 01:18:37,620 Questions about what the project is? 1707 01:18:37,620 --> 01:18:38,970 We'll have about an hour to work on this. 1708 01:18:38,970 --> 01:18:41,640 We'll go until about 12:30, at which point we'll break for lunch 1709 01:18:41,640 --> 01:18:44,640 and reconvene back here at 2:00 PM for more look at JavaScript, 1710 01:18:44,640 --> 01:18:46,530 more look at animation in particular and how 1711 01:18:46,530 --> 01:18:48,930 to create animations using CSS in JavaScript 1712 01:18:48,930 --> 01:18:50,790 to make our pages even more interactive. 1713 01:18:50,790 --> 01:18:54,780 But this is going to be the goal for the morning project, at least for now. 1714 01:18:54,780 --> 01:18:55,960 Questions about anything? 1715 01:18:55,960 --> 01:18:56,460 Yeah? 1716 01:18:56,460 --> 01:18:58,350 AUDIENCE: Will you go back to the post? 1717 01:18:58,350 --> 01:18:59,700 BRIAN YU: I will post the distribution code 1718 01:18:59,700 --> 01:19:00,960 on the website in just a couple of minutes 1719 01:19:00,960 --> 01:19:02,460 as soon as we break out into groups. 1720 01:19:02,460 --> 01:19:05,640 1721 01:19:05,640 --> 01:19:06,140 All right. 1722 01:19:06,140 --> 01:19:09,770 In that case, why don't I have this group on the right-hand side 1723 01:19:09,770 --> 01:19:17,060 go to room 136, and if I could have the front half of the middle group 1724 01:19:17,060 --> 01:19:20,420 go to room 212 and everyone else will stay here. 1725 01:19:20,420 --> 01:19:24,730 And we'll work until 12:30 and we'll reconvene back here at 2:00 PM. 1726 01:19:24,730 --> 01:19:25,871