1 00:00:00,000 --> 00:00:00,786 2 00:00:00,786 --> 00:00:04,220 SELA KASEPA: So hello, and welcome to this S50 3 00:00:04,220 --> 00:00:07,080 seminar, which is JavaScript, The Basics. 4 00:00:07,080 --> 00:00:08,260 So quick introduction. 5 00:00:08,260 --> 00:00:11,800 I am Sela, junior studying computer science. 6 00:00:11,800 --> 00:00:15,940 And we'll be going through the basics of JavaScript. 7 00:00:15,940 --> 00:00:21,010 So in this case, we are going to go over the different data types that we have, 8 00:00:21,010 --> 00:00:24,340 some functions, some looping constructs. 9 00:00:24,340 --> 00:00:28,900 And then we'll also go through JavaScript asynchronous data. 10 00:00:28,900 --> 00:00:32,500 So look at callbacks, promises, async await. 11 00:00:32,500 --> 00:00:34,310 So yeah. 12 00:00:34,310 --> 00:00:37,940 So we can dive into the seminar. 13 00:00:37,940 --> 00:00:41,500 OK, so we'll start with basic introductory JavaScript, which 14 00:00:41,500 --> 00:00:45,980 is, what is JavaScript and what can you do with it? 15 00:00:45,980 --> 00:00:50,260 So JavaScript, in a nutshell, is a programming language. 16 00:00:50,260 --> 00:00:52,210 And then some of the terms that you hear, 17 00:00:52,210 --> 00:00:55,840 whenever people are talking about JavaScript, is it's single-threaded. 18 00:00:55,840 --> 00:00:57,400 It's asynchronous. 19 00:00:57,400 --> 00:01:02,830 So I won't dive into these terms right now, but we'll come back to them. 20 00:01:02,830 --> 00:01:07,570 So a brief history of JavaScript is JavaScript was originally 21 00:01:07,570 --> 00:01:10,280 built to run in the browser. 22 00:01:10,280 --> 00:01:13,150 And so browsers come in [? beta ?] JavaScript engines. 23 00:01:13,150 --> 00:01:15,390 And then JavaScript engines, in this case, 24 00:01:15,390 --> 00:01:17,840 are responsible for executing JavaScript code. 25 00:01:17,840 --> 00:01:20,980 So some examples are SpiderMonkey and Firefox, and then 26 00:01:20,980 --> 00:01:25,540 V8, a V8 engine in Chrome. 27 00:01:25,540 --> 00:01:30,790 But then sometime later on, some brilliant engineer came along and then 28 00:01:30,790 --> 00:01:36,730 decided to invade Chrome's V8 engine into some C++ program. 29 00:01:36,730 --> 00:01:40,150 And then he called this firmware Node, Node.js. 30 00:01:40,150 --> 00:01:43,480 And so what this Node.js framework enables us to do 31 00:01:43,480 --> 00:01:47,710 is it enables us to execute JavaScript code outside the browser. 32 00:01:47,710 --> 00:01:50,950 And so with us getting this capability to execute 33 00:01:50,950 --> 00:01:53,440 JavaScript code outside the browser, that 34 00:01:53,440 --> 00:01:56,020 meant we could now write server side JavaScript. 35 00:01:56,020 --> 00:01:59,290 We could build entire web applications solely in JavaScript 36 00:01:59,290 --> 00:02:01,630 because it can now write our backend in JavaScript 37 00:02:01,630 --> 00:02:06,010 and simply run our JavaScript in the Node.js framework. 38 00:02:06,010 --> 00:02:10,360 OK, so that's kind of a brief history in JavaScript. 39 00:02:10,360 --> 00:02:15,580 And so now we're going to dive into working with JavaScript in the browser. 40 00:02:15,580 --> 00:02:22,654 So I'm going to open a browser terminal. 41 00:02:22,654 --> 00:02:24,490 So I'm going to open a browser window. 42 00:02:24,490 --> 00:02:30,190 And then in this browser, I want us to go over working 43 00:02:30,190 --> 00:02:32,590 with JavaScript in the browser. 44 00:02:32,590 --> 00:02:35,620 So like I mentioned, Chrome has a V8 engine, 45 00:02:35,620 --> 00:02:38,630 which is responsible for executing JavaScript code. 46 00:02:38,630 --> 00:02:43,660 So if you open up Chrome, because I'm using the Chrome browser, 47 00:02:43,660 --> 00:02:45,910 so I'll show you how I got here. 48 00:02:45,910 --> 00:02:47,710 So you can literally open up the Inspect. 49 00:02:47,710 --> 00:02:53,170 50 00:02:53,170 --> 00:02:59,350 OK, so you can literally open up the Inspect option. 51 00:02:59,350 --> 00:03:01,180 And so this brings us a bunch of options, 52 00:03:01,180 --> 00:03:04,138 and then, because [INAUDIBLE] in JavaScript, what we're concerned about 53 00:03:04,138 --> 00:03:04,940 is a console. 54 00:03:04,940 --> 00:03:07,930 So the console is where we can write random JavaScript code 55 00:03:07,930 --> 00:03:12,612 and execute it and see what happens. 56 00:03:12,612 --> 00:03:15,070 So JavaScript is, like I mentioned, a programming language. 57 00:03:15,070 --> 00:03:19,120 It comes with its basic data types, such as numeric data type. 58 00:03:19,120 --> 00:03:22,240 So you can have something like five. 59 00:03:22,240 --> 00:03:24,880 And you can store this in a variable. 60 00:03:24,880 --> 00:03:27,410 So I've looked at variables previously. 61 00:03:27,410 --> 00:03:34,300 So say I said x equals 9 and I can say y equals 10. 62 00:03:34,300 --> 00:03:37,540 And I can do basic mathematics operations 63 00:03:37,540 --> 00:03:43,150 with it, which is, in this case, I just executed x times y, which gives me 90. 64 00:03:43,150 --> 00:03:46,670 65 00:03:46,670 --> 00:03:50,070 And then we could also have strings types. 66 00:03:50,070 --> 00:03:51,900 So let's say I had a name. 67 00:03:51,900 --> 00:03:56,250 in this case, my name is Sela, and I can store that. 68 00:03:56,250 --> 00:04:02,012 And one function that we're going to consistently use-- 69 00:04:02,012 --> 00:04:02,970 we're using JavaScript. 70 00:04:02,970 --> 00:04:04,410 It's a console.log. 71 00:04:04,410 --> 00:04:09,060 And what console.log does is it simply prints out something to the console. 72 00:04:09,060 --> 00:04:11,630 So in this case, if wanted to print out my name, 73 00:04:11,630 --> 00:04:16,180 I can simply print out a console.log name. 74 00:04:16,180 --> 00:04:21,730 So in the console, you can also execute some basic JavaScript functions. 75 00:04:21,730 --> 00:04:25,365 So one function you've probably encountered is the alert. 76 00:04:25,365 --> 00:04:27,880 77 00:04:27,880 --> 00:04:31,620 So alert is meant to pop up some window. 78 00:04:31,620 --> 00:04:36,620 So if I run this, so we do see a window pop up there. 79 00:04:36,620 --> 00:04:40,100 And it says "Greetings." 80 00:04:40,100 --> 00:04:44,664 And I could do something. 81 00:04:44,664 --> 00:04:46,580 So let's say I didn't want to say "Greetings," 82 00:04:46,580 --> 00:04:50,480 and I actually want it to say "Greetings to Sela." 83 00:04:50,480 --> 00:04:56,180 So I can use the plus sign, which really just concatenates some strings. 84 00:04:56,180 --> 00:04:59,910 So in this case, I have the greeting string and I have the name string. 85 00:04:59,910 --> 00:05:04,490 And I can execute the strings together and I get "Greetings, Sela." 86 00:05:04,490 --> 00:05:10,340 And then one other nice feature that you can probably 87 00:05:10,340 --> 00:05:15,620 relate to with Python is as opposed to me using this plus sign to concatenate 88 00:05:15,620 --> 00:05:19,220 my strings, I can actually input Format My String to have 89 00:05:19,220 --> 00:05:21,510 the value that I wanted to have. 90 00:05:21,510 --> 00:05:25,280 So in this case, we're looking at Greetings. 91 00:05:25,280 --> 00:05:29,540 And then I want it to have Sela in it. 92 00:05:29,540 --> 00:05:35,600 So I have Greetings that I can use the dollar sign with the curly braces 93 00:05:35,600 --> 00:05:38,960 and have the name, which I want input there. 94 00:05:38,960 --> 00:05:41,294 And then Close. 95 00:05:41,294 --> 00:05:43,960 And then we execute that, I still get the same thing that I had. 96 00:05:43,960 --> 00:05:48,740 So Greetings plus name is the same as me having Greetings, 97 00:05:48,740 --> 00:05:52,550 the last line, open curly braces, the value that I want to have, 98 00:05:52,550 --> 00:05:54,320 close curly braces. 99 00:05:54,320 --> 00:05:56,150 And then one other thing that also changed 100 00:05:56,150 --> 00:06:00,290 is instead of me using the quotation marks, the quotes, 101 00:06:00,290 --> 00:06:01,760 I'm now using the backtick. 102 00:06:01,760 --> 00:06:05,077 So you can find the backtick right before 1 on your keyboard, 103 00:06:05,077 --> 00:06:06,035 if it's on my keyboard. 104 00:06:06,035 --> 00:06:10,010 I'm not sure about the Windows keyboard. 105 00:06:10,010 --> 00:06:15,280 So anyway, so these are some basic things 106 00:06:15,280 --> 00:06:17,600 you can do in the JavaScript console. 107 00:06:17,600 --> 00:06:27,370 And so we can also go over to [? enact your ?] Script and see how we 108 00:06:27,370 --> 00:06:30,440 can execute JavaScript code from there. 109 00:06:30,440 --> 00:06:38,450 So I'm going to open up an external page. 110 00:06:38,450 --> 00:06:39,200 Sorry. 111 00:06:39,200 --> 00:06:41,180 Give me a moment. 112 00:06:41,180 --> 00:06:51,580 113 00:06:51,580 --> 00:06:58,420 OK, so here, I want us to go over some other data types 114 00:06:58,420 --> 00:07:00,370 that we have in JavaScript. 115 00:07:00,370 --> 00:07:02,860 So we looked at numeric data types. 116 00:07:02,860 --> 00:07:04,450 We looked at strings. 117 00:07:04,450 --> 00:07:09,400 So one of the important data type that I think you need to know for JavaScript 118 00:07:09,400 --> 00:07:11,360 is the object data type. 119 00:07:11,360 --> 00:07:13,550 So an object, really, you can think about it 120 00:07:13,550 --> 00:07:17,050 as something that has properties and methods. 121 00:07:17,050 --> 00:07:21,370 And then in here, I have created a bunch of objects in which I 122 00:07:21,370 --> 00:07:24,160 have listed some key value pairs. 123 00:07:24,160 --> 00:07:27,520 So if familiar with Python, this kind of looks 124 00:07:27,520 --> 00:07:34,540 similar to the dict data type, where you can assign values to keys. 125 00:07:34,540 --> 00:07:37,000 In this case, I have a list of students. 126 00:07:37,000 --> 00:07:39,460 And then for each student, I have different properties, 127 00:07:39,460 --> 00:07:42,434 which is I have a name, I have a house, I have a major, 128 00:07:42,434 --> 00:07:44,350 and then I have a number of students in there. 129 00:07:44,350 --> 00:07:47,860 130 00:07:47,860 --> 00:07:52,912 So we could go over create an object in JavaScript. 131 00:07:52,912 --> 00:07:57,070 132 00:07:57,070 --> 00:08:00,460 So let's say I decided to create a new student object, 133 00:08:00,460 --> 00:08:02,080 and then I'll say New Student. 134 00:08:02,080 --> 00:08:04,620 135 00:08:04,620 --> 00:08:09,150 It goes to open, close curly braces. 136 00:08:09,150 --> 00:08:12,690 So similar to how you'd initialize in dict Python. 137 00:08:12,690 --> 00:08:18,850 And then I can assign values and properties to this new object. 138 00:08:18,850 --> 00:08:27,000 So I can say I want my new student to have a name of, say, John. 139 00:08:27,000 --> 00:08:37,640 And then I can say, let my new student be a member of the house. 140 00:08:37,640 --> 00:08:39,650 I'll say [INAUDIBLE] again. 141 00:08:39,650 --> 00:08:46,520 And then I can say let my new student be a mechanical engineering major. 142 00:08:46,520 --> 00:08:49,300 143 00:08:49,300 --> 00:08:52,165 So I have now created a new student. 144 00:08:52,165 --> 00:08:55,750 145 00:08:55,750 --> 00:09:01,695 So I can console.log the student. 146 00:09:01,695 --> 00:09:12,010 147 00:09:12,010 --> 00:09:15,465 And so if I opened up my browser-- 148 00:09:15,465 --> 00:09:19,160 149 00:09:19,160 --> 00:09:25,220 so I have this JavaScript that I have defined, which I have [INAUDIBLE].. 150 00:09:25,220 --> 00:09:27,440 And then this JavaScript, I have included it 151 00:09:27,440 --> 00:09:30,300 in this HTML page, which is just basics. 152 00:09:30,300 --> 00:09:34,840 So I have this particular page open here. 153 00:09:34,840 --> 00:09:36,840 And then if you notice, on this particular page, 154 00:09:36,840 --> 00:09:39,110 I still have the console window open. 155 00:09:39,110 --> 00:09:44,060 And if I had to refresh this page, I have my new student. 156 00:09:44,060 --> 00:09:44,800 That's here. 157 00:09:44,800 --> 00:09:47,430 158 00:09:47,430 --> 00:09:52,650 And OK, so I'm actually printing the student itself. 159 00:09:52,650 --> 00:09:56,567 So if I look at this, I have the new student who I have console.log in. 160 00:09:56,567 --> 00:09:59,650 So I said my new student is going to have the name John, house [INAUDIBLE] 161 00:09:59,650 --> 00:10:02,930 major ME, and then we see that happen there. 162 00:10:02,930 --> 00:10:07,530 And I'm also printing out all the students that I have. 163 00:10:07,530 --> 00:10:11,760 So my student array has the predefined students that I made. 164 00:10:11,760 --> 00:10:15,930 And then we see the predefined students in there. 165 00:10:15,930 --> 00:10:20,760 And so if I wanted to add this to my array, I can simply say-- 166 00:10:20,760 --> 00:10:24,960 in My Students, I am going to push my new student. 167 00:10:24,960 --> 00:10:30,120 168 00:10:30,120 --> 00:10:32,120 So we notice array now changes. 169 00:10:32,120 --> 00:10:34,860 Instead of me only having two objects in my array, 170 00:10:34,860 --> 00:10:38,850 I now have three objects with all of them in there. 171 00:10:38,850 --> 00:10:42,780 172 00:10:42,780 --> 00:10:48,780 Now, let's say I didn't want just print out all of this. 173 00:10:48,780 --> 00:10:52,751 Let's say I wanted to go over all my students, iterate through all of them. 174 00:10:52,751 --> 00:10:54,750 So in this case, I want to look over my students 175 00:10:54,750 --> 00:10:57,930 and maybe print out a particular value for my students. 176 00:10:57,930 --> 00:11:01,470 So we can, of course, use a for loop. 177 00:11:01,470 --> 00:11:02,970 So we're familiar with for loops. 178 00:11:02,970 --> 00:11:05,730 And I'll probably use a different one that we haven't used 179 00:11:05,730 --> 00:11:09,750 so much, where we can have students. 180 00:11:09,750 --> 00:11:14,680 And then on students, I can call the loop for each. 181 00:11:14,680 --> 00:11:18,840 So what students loop for each does is it's going to go through every student 182 00:11:18,840 --> 00:11:23,070 and then return the current student that I'm at. 183 00:11:23,070 --> 00:11:27,600 So these return the current object that I'm at in my array. 184 00:11:27,600 --> 00:11:31,770 And then for this object that I'm returning, 185 00:11:31,770 --> 00:11:34,830 I'm going to define a function. 186 00:11:34,830 --> 00:11:42,200 So I'll say, student, where student is a current student I'm looking at. 187 00:11:42,200 --> 00:11:44,310 And then does something with the students. 188 00:11:44,310 --> 00:11:48,330 So let's say all I want to do is just print out the names of my students. 189 00:11:48,330 --> 00:11:53,080 So I'm going to say student.name, because of the log student.name. 190 00:11:53,080 --> 00:11:57,630 And then if we save this, we notice, in our browser window, 191 00:11:57,630 --> 00:12:00,350 I print out all my student names. 192 00:12:00,350 --> 00:12:02,340 Sela, Jim, and John. 193 00:12:02,340 --> 00:12:09,150 So what students.dot for each did, so it goes over, like I said. 194 00:12:09,150 --> 00:12:11,490 So it's going to iterate over all my students, 195 00:12:11,490 --> 00:12:15,750 and then it's going to return every single item that's in my student array. 196 00:12:15,750 --> 00:12:20,580 So in this case, every item in my student array is an object. 197 00:12:20,580 --> 00:12:22,840 So let me show you that. 198 00:12:22,840 --> 00:12:25,210 So we can print out the student itself. 199 00:12:25,210 --> 00:12:26,310 And if I save this-- 200 00:12:26,310 --> 00:12:28,900 so you notice student is actually an object. 201 00:12:28,900 --> 00:12:35,200 Then I can do anything I want with that current item I'm at in the array, 202 00:12:35,200 --> 00:12:37,030 or I have that. 203 00:12:37,030 --> 00:12:42,339 So what I have inside my dot for each is this function here. 204 00:12:42,339 --> 00:12:44,130 So this function is a function that's code. 205 00:12:44,130 --> 00:12:47,640 Each time I go, I go to the next item in my array. 206 00:12:47,640 --> 00:12:52,860 And then we can use some nice JavaScript syntax 207 00:12:52,860 --> 00:12:55,120 to actually make this more concise. 208 00:12:55,120 --> 00:12:59,940 So notice here, I have function defined, but then I have no name. 209 00:12:59,940 --> 00:13:02,700 So basic construct fully functioning JavaScript 210 00:13:02,700 --> 00:13:05,940 is you declare that I'm beginning a function. 211 00:13:05,940 --> 00:13:11,160 Then you put some name, and then some arguments, parentheses, 212 00:13:11,160 --> 00:13:15,270 in your brackets, and then have the curly braces. 213 00:13:15,270 --> 00:13:19,920 But then in JavaScript, we are not mandated to actually provide 214 00:13:19,920 --> 00:13:21,180 a function each name. 215 00:13:21,180 --> 00:13:24,520 So in this case, I can do away with the func name 216 00:13:24,520 --> 00:13:26,254 and then just have a function. 217 00:13:26,254 --> 00:13:28,170 So in this case, this is an anonymous function 218 00:13:28,170 --> 00:13:30,340 because I really haven't given it a name. 219 00:13:30,340 --> 00:13:37,830 So what I have inside here, inside my [INAUDIBLE] is an anonymous function. 220 00:13:37,830 --> 00:13:41,270 Now in this case, I have an anonymous function. 221 00:13:41,270 --> 00:13:44,770 So with [INAUDIBLE] of JavaScript, they decided, well, 222 00:13:44,770 --> 00:13:47,020 I'm not giving this function a name. 223 00:13:47,020 --> 00:13:49,120 I might as well just not have it there. 224 00:13:49,120 --> 00:13:52,720 So then they introduce another syntax, which 225 00:13:52,720 --> 00:13:58,460 is the fat arrow, where I do it with a function. 226 00:13:58,460 --> 00:14:00,460 And then, instead of me having function student, 227 00:14:00,460 --> 00:14:04,840 I just do student, which is the parameter, the argument that I'm 228 00:14:04,840 --> 00:14:09,970 positing, which is going to pass into my function, and then have this fat arrow. 229 00:14:09,970 --> 00:14:14,380 So we're if we run this code, it's still as same thing. 230 00:14:14,380 --> 00:14:16,330 So it's just more concise, and you'll probably 231 00:14:16,330 --> 00:14:21,700 come across this notation, this type of syntax, from time and again. 232 00:14:21,700 --> 00:14:23,490 And so they just didn't end there. 233 00:14:23,490 --> 00:14:24,490 They went further. 234 00:14:24,490 --> 00:14:28,280 And then they said, well, I have a function. 235 00:14:28,280 --> 00:14:32,380 And so my function takes in one argument, which is student, 236 00:14:32,380 --> 00:14:34,930 and it simply has one-- 237 00:14:34,930 --> 00:14:36,430 it just returns one thing. 238 00:14:36,430 --> 00:14:40,130 And the only thing it returns right now is just console.logs. 239 00:14:40,130 --> 00:14:42,070 In this case, print out the name. 240 00:14:42,070 --> 00:14:49,000 For this array, I, as well, don't need to have my curly braces here, 241 00:14:49,000 --> 00:14:53,650 and so I can just do away with them. 242 00:14:53,650 --> 00:14:57,880 And if I run that, so notice, it still does the same thing. 243 00:14:57,880 --> 00:15:03,670 So the function that we had before was just really just like bin string, 244 00:15:03,670 --> 00:15:09,270 and then now I have this more concise function. 245 00:15:09,270 --> 00:15:15,495 So that's on objects and functions and some function syntax. 246 00:15:15,495 --> 00:15:21,850 247 00:15:21,850 --> 00:15:27,190 So we are now going to move on to JavaScript as a DOM, 248 00:15:27,190 --> 00:15:30,370 so going over some basic constructs in JavaScript. 249 00:15:30,370 --> 00:15:34,030 And so now I want us to look at using JavaScript 250 00:15:34,030 --> 00:15:38,470 on the client side, which is really using JavaScript to manipulate the DOM. 251 00:15:38,470 --> 00:15:45,610 So I mentioned earlier that JavaScript was initially built to run in browsers. 252 00:15:45,610 --> 00:15:48,910 And then what JavaScript did for us, and still does for us, 253 00:15:48,910 --> 00:15:51,820 with it being able to write in process, is 254 00:15:51,820 --> 00:15:57,670 I can actually add some dynamic functionality to the different HTML 255 00:15:57,670 --> 00:16:00,100 pages that I have in my browser. 256 00:16:00,100 --> 00:16:03,079 Now, the question is, how does JavaScript manipulate? 257 00:16:03,079 --> 00:16:04,870 So it's a programming language that's going 258 00:16:04,870 --> 00:16:08,310 to work with the different elements you have in your browser. 259 00:16:08,310 --> 00:16:09,790 So in this case, an HTML page. 260 00:16:09,790 --> 00:16:12,010 So the question is, how does JavaScript actually 261 00:16:12,010 --> 00:16:15,910 manage to help us manipulate our HTML pages? 262 00:16:15,910 --> 00:16:23,050 So in understanding that, we come across the DOM. 263 00:16:23,050 --> 00:16:25,450 So the question is, what is a DOM? 264 00:16:25,450 --> 00:16:30,700 So to put it simple, the DOM is a programming interface 265 00:16:30,700 --> 00:16:32,860 for HTML and XML documents. 266 00:16:32,860 --> 00:16:34,670 So what does that mean? 267 00:16:34,670 --> 00:16:36,820 So the DOM is simply that. 268 00:16:36,820 --> 00:16:42,160 It's an object that enables other programming languages to interact 269 00:16:42,160 --> 00:16:44,800 with my HTML or XML documents. 270 00:16:44,800 --> 00:16:49,510 So in this case, we'll be focusing mainly on HTML documents. 271 00:16:49,510 --> 00:16:52,595 And so what a DOM does it takes an HTML page. 272 00:16:52,595 --> 00:16:57,710 It presents it as a single object in universal format, 273 00:16:57,710 --> 00:17:00,280 such that any programming language that I 274 00:17:00,280 --> 00:17:05,980 wanted to use that provides an interface with DOM objects 275 00:17:05,980 --> 00:17:11,200 can use it to manipulate DOM. 276 00:17:11,200 --> 00:17:16,839 So with recent lectures, we've been looking 277 00:17:16,839 --> 00:17:23,500 at working in the web, medium web applications, working in JavaScript. 278 00:17:23,500 --> 00:17:29,350 So we're just going to quickly go over some of the methods 279 00:17:29,350 --> 00:17:32,590 that we've encountered with using JavaScript to access and manipulate 280 00:17:32,590 --> 00:17:34,480 the DOM. 281 00:17:34,480 --> 00:17:36,970 So I singled out some. 282 00:17:36,970 --> 00:17:40,510 So in this case, we have document.getElementById, which 283 00:17:40,510 --> 00:17:42,670 has been in use for quite a while. 284 00:17:42,670 --> 00:17:47,460 And then document.querySelector, document.querySelectorAll 285 00:17:47,460 --> 00:17:50,320 are really some methods which I did later on. 286 00:17:50,320 --> 00:17:54,250 So maybe not as popular, but still very useful. 287 00:17:54,250 --> 00:17:57,490 And I will show you how you can-- we'll go through examples 288 00:17:57,490 --> 00:17:59,080 of how you can use them. 289 00:17:59,080 --> 00:18:01,240 Like, say, how can I use document.querySelector 290 00:18:01,240 --> 00:18:04,240 in place of document.getElementById. 291 00:18:04,240 --> 00:18:09,600 292 00:18:09,600 --> 00:18:16,590 So open up some examples again and then we'll go through that. 293 00:18:16,590 --> 00:18:19,880 294 00:18:19,880 --> 00:18:23,750 OK, so now I have a new HTML page. 295 00:18:23,750 --> 00:18:25,910 So I have it open here also. 296 00:18:25,910 --> 00:18:28,430 So this is my DOM page. 297 00:18:28,430 --> 00:18:33,890 It really just has one header tag, my one H1 tag. 298 00:18:33,890 --> 00:18:41,260 And in this HTML page, I have linked another JavaScript file. 299 00:18:41,260 --> 00:18:44,060 300 00:18:44,060 --> 00:18:44,560 Sorry. 301 00:18:44,560 --> 00:18:46,940 That's the wrong one. 302 00:18:46,940 --> 00:18:52,280 So presently, my JavaScript file is empty. 303 00:18:52,280 --> 00:18:55,250 So I'm going to populate it with some basic JavaScript 304 00:18:55,250 --> 00:18:56,560 things we can do with a DOM. 305 00:18:56,560 --> 00:19:01,720 306 00:19:01,720 --> 00:19:03,919 So let me close this one. 307 00:19:03,919 --> 00:19:04,710 We don't need this. 308 00:19:04,710 --> 00:19:08,080 309 00:19:08,080 --> 00:19:14,470 So like I said, JavaScript is able to access and manipulate some elements. 310 00:19:14,470 --> 00:19:20,470 And so we'll start off with something basic that you can do with the DOM. 311 00:19:20,470 --> 00:19:25,170 So you only have one tag in here, or one header tag, which is my DOM page. 312 00:19:25,170 --> 00:19:30,460 And let's say you actually you wanted to create a new element in your DOM 313 00:19:30,460 --> 00:19:33,490 and then add it to your DOM and have it displayed. 314 00:19:33,490 --> 00:19:37,540 So of course, the simple way to do this is 315 00:19:37,540 --> 00:19:41,830 you could just literally go into your HTML page and say, I'm going to add-- 316 00:19:41,830 --> 00:19:48,160 so to add a paragraph, I'm going to add a paragraph with some stuff. 317 00:19:48,160 --> 00:19:51,970 But then when you stop programming, you'll 318 00:19:51,970 --> 00:19:55,600 probably find that some things that you add to your page 319 00:19:55,600 --> 00:19:58,810 are not needed when your page is actually loading, 320 00:19:58,810 --> 00:20:01,720 but then you probably want to provide that information 321 00:20:01,720 --> 00:20:03,640 after your page is loaded and you've maybe 322 00:20:03,640 --> 00:20:06,370 gotten some information from a user. 323 00:20:06,370 --> 00:20:15,420 So let's see how we can add a single paragraph in my HTML page. 324 00:20:15,420 --> 00:20:24,480 So let's start with let p equals-- 325 00:20:24,480 --> 00:20:28,140 so I'm going to use my document object, which provides me some methods that I 326 00:20:28,140 --> 00:20:30,610 can use to achieve what I want. 327 00:20:30,610 --> 00:20:34,000 So in this case, all I want to do is to create an element. 328 00:20:34,000 --> 00:20:36,150 So I'm going to make an element, and in this case, 329 00:20:36,150 --> 00:20:37,358 I want to create a paragraph. 330 00:20:37,358 --> 00:20:41,760 That's going to be a p element. 331 00:20:41,760 --> 00:20:46,440 And then to my paragraph, I can add some content. 332 00:20:46,440 --> 00:21:01,270 And so let's say let p dot text content equals the CS50 is awesome. 333 00:21:01,270 --> 00:21:04,810 So I've created an element, which is a paragraph. 334 00:21:04,810 --> 00:21:07,100 I've added some content to my paragraph. 335 00:21:07,100 --> 00:21:09,550 And now, I really want to stitch this element that I've 336 00:21:09,550 --> 00:21:12,400 added to this document that I have. 337 00:21:12,400 --> 00:21:18,070 So in this case, I'm going to call my document Object again. 338 00:21:18,070 --> 00:21:23,350 And then, say, from my document in here, I want to get the body. 339 00:21:23,350 --> 00:21:26,260 And then to my body, I want to append some child. 340 00:21:26,260 --> 00:21:29,252 341 00:21:29,252 --> 00:21:30,960 So in this case, a child I want to append 342 00:21:30,960 --> 00:21:34,080 is a new paragraph element that I've created. 343 00:21:34,080 --> 00:21:38,510 So I can say this and see what happens. 344 00:21:38,510 --> 00:21:41,250 OK, so right now, I'm in my console. 345 00:21:41,250 --> 00:21:42,840 So if you have your element-- 346 00:21:42,840 --> 00:21:47,520 so it's not just my paragraph, which is supposed to say "CS50 awesome" also 347 00:21:47,520 --> 00:21:49,080 hasn't been added. 348 00:21:49,080 --> 00:21:53,700 And one use for debugging tool I like using when I'm using JavaScript 349 00:21:53,700 --> 00:21:56,370 is uses a console. 350 00:21:56,370 --> 00:21:59,822 So the console is going to tell you you have some error. 351 00:21:59,822 --> 00:22:02,647 Can read property of append child of null? 352 00:22:02,647 --> 00:22:05,730 And you can actually click on this when you open up your option JavaScript 353 00:22:05,730 --> 00:22:08,250 code, and show you what an error is. 354 00:22:08,250 --> 00:22:13,290 And if you hover over the cross sign, you see error it is, 355 00:22:13,290 --> 00:22:16,590 which is can I trade property of append child of null. 356 00:22:16,590 --> 00:22:18,960 So what this is telling us is you're trying 357 00:22:18,960 --> 00:22:23,610 to append some child to something which is null. 358 00:22:23,610 --> 00:22:26,320 So why do we think this might be the case? 359 00:22:26,320 --> 00:22:30,480 Why are we getting some null object that we're trying to append to? 360 00:22:30,480 --> 00:22:35,300 So if we go back to our index on HTML, we're notice-- 361 00:22:35,300 --> 00:22:40,930 so we have this script, this JavaScript, that we have included in our HTML page. 362 00:22:40,930 --> 00:22:43,140 And so let's imagine we are a browser and are 363 00:22:43,140 --> 00:22:45,960 trying to load up this HTML page with this JavaScript. 364 00:22:45,960 --> 00:22:48,870 So I get this HTML page. 365 00:22:48,870 --> 00:22:54,330 And then before loading up my [? text ?] HTML page, I have this JavaScript. 366 00:22:54,330 --> 00:23:00,750 And this JavaScript is accessing some elements that are in my HTML page, 367 00:23:00,750 --> 00:23:06,000 but then I haven't finished loading my entire page. 368 00:23:06,000 --> 00:23:10,620 So this might be a potential reason for why I get this error. 369 00:23:10,620 --> 00:23:14,249 I'm saying, from my document, get the body element. 370 00:23:14,249 --> 00:23:16,040 So I know my browser is telling me, saying, 371 00:23:16,040 --> 00:23:17,730 I don't know what your body element is. 372 00:23:17,730 --> 00:23:20,220 Because I really haven't finished loading this document so 373 00:23:20,220 --> 00:23:24,160 I don't have that body element that you're looking for. 374 00:23:24,160 --> 00:23:28,590 So this is why, probably, you've noticed with the previous work you've 375 00:23:28,590 --> 00:23:33,490 been doing, you have your script at the bottom. 376 00:23:33,490 --> 00:23:36,410 So let's say I could put my script here. 377 00:23:36,410 --> 00:23:39,210 And if I run this, it actually gives me what I want. 378 00:23:39,210 --> 00:23:44,380 I have my DOM and then I have my CS50 is awesome, and it runs, right? 379 00:23:44,380 --> 00:23:48,540 So now, I have this DOM. 380 00:23:48,540 --> 00:23:51,100 This particular document has been loaded. 381 00:23:51,100 --> 00:23:55,500 The different elements that I have in there have been added to my DOM. 382 00:23:55,500 --> 00:23:58,950 And so now, when my source [? min ?] tries 383 00:23:58,950 --> 00:24:02,210 to access some element in my DOM, defined in my DOM, 384 00:24:02,210 --> 00:24:04,870 it now doesn't draw an error. 385 00:24:04,870 --> 00:24:11,850 So one other way we can deal with this is I can still have it there. 386 00:24:11,850 --> 00:24:18,690 And then I can use one method provided to us by the window object, which 387 00:24:18,690 --> 00:24:21,980 is you can define a function and say, I only 388 00:24:21,980 --> 00:24:26,029 want to load this function when my page is actually done loading. 389 00:24:26,029 --> 00:24:28,070 So in this case, I'm going to call window.unload. 390 00:24:28,070 --> 00:24:31,650 391 00:24:31,650 --> 00:24:33,690 So what window.unload means is simply saying 392 00:24:33,690 --> 00:24:37,800 when I'm finished loading my entire window, 393 00:24:37,800 --> 00:24:39,580 I can define some anonymous function. 394 00:24:39,580 --> 00:24:42,520 395 00:24:42,520 --> 00:24:45,645 So it can have it there and there. 396 00:24:45,645 --> 00:24:49,845 397 00:24:49,845 --> 00:24:52,330 And then closes. 398 00:24:52,330 --> 00:24:55,430 So when we save this to-- 399 00:24:55,430 --> 00:24:58,380 sorry, excuse me. 400 00:24:58,380 --> 00:25:00,540 So when we save this, we notice it runs it 401 00:25:00,540 --> 00:25:04,620 on an error, which is, of course, as explained, 402 00:25:04,620 --> 00:25:08,040 this is now executing after my entire window is actually loaded. 403 00:25:08,040 --> 00:25:11,760 So when I tried to access my documented body, you want to return it now, 404 00:25:11,760 --> 00:25:15,430 it actually turns the element in my DOM. 405 00:25:15,430 --> 00:25:20,730 OK, so those are some basic things. 406 00:25:20,730 --> 00:25:24,930 Then it said it also wanted us to look a bit into document.getElementById 407 00:25:24,930 --> 00:25:28,470 and document.querySelector and SelectorAll. 408 00:25:28,470 --> 00:25:33,750 So let's add some more things in my HTML. 409 00:25:33,750 --> 00:25:35,640 So let's say I had some paragraph. 410 00:25:35,640 --> 00:25:40,050 Let this paragraph be 1. 411 00:25:40,050 --> 00:25:52,440 And then you [INAUDIBLE] So I've added some your paragraphs, 412 00:25:52,440 --> 00:25:55,770 which, really, are just numbers. 413 00:25:55,770 --> 00:25:57,510 So let me try to minimize this. 414 00:25:57,510 --> 00:26:04,490 415 00:26:04,490 --> 00:26:07,640 So I have these numbers, and then let's say 416 00:26:07,640 --> 00:26:13,820 I now wanted to, say, modify, or get some number, 417 00:26:13,820 --> 00:26:18,230 or I mean, or get some paragraph from my HTML page. 418 00:26:18,230 --> 00:26:23,718 So one way of doing this is using my document.querySelector. 419 00:26:23,718 --> 00:26:34,620 420 00:26:34,620 --> 00:26:41,575 And then that result equals that. 421 00:26:41,575 --> 00:26:44,690 422 00:26:44,690 --> 00:26:48,840 And then let's log this result. 423 00:26:48,840 --> 00:26:55,970 So if I say this and run this, we can see what happens. 424 00:26:55,970 --> 00:26:58,130 So in this case, come and save. 425 00:26:58,130 --> 00:27:03,260 And so I can go to my console and see what I'm actually printing out. 426 00:27:03,260 --> 00:27:06,500 So in this case, I have this paragraph. 427 00:27:06,500 --> 00:27:10,100 So I documented query selector p, right? 428 00:27:10,100 --> 00:27:13,040 So in this case, what this does is it's going to go into my DOM, 429 00:27:13,040 --> 00:27:19,670 select any element that has the p tag in it, and then I finally pick it out. 430 00:27:19,670 --> 00:27:23,270 So it prints out the entire thing, which is that. 431 00:27:23,270 --> 00:27:27,310 So one thing that you notice is I actually defined a bunch of programs. 432 00:27:27,310 --> 00:27:28,960 So I actually have three programs. 433 00:27:28,960 --> 00:27:32,750 I have three p tags in my DOM. 434 00:27:32,750 --> 00:27:34,700 But then what document.querySelector does 435 00:27:34,700 --> 00:27:38,840 is it's going to get the first matching element 436 00:27:38,840 --> 00:27:41,870 with the selector I have put here. 437 00:27:41,870 --> 00:27:45,250 So let's say I just wanted to have-- 438 00:27:45,250 --> 00:27:48,860 I would select this p with the 1. 439 00:27:48,860 --> 00:27:52,010 One way to go about this is I can assign an ID. 440 00:27:52,010 --> 00:27:57,230 Say, let this have an ID of P1. 441 00:27:57,230 --> 00:28:00,482 And then just so we can look at the different flavors of this, 442 00:28:00,482 --> 00:28:01,940 let's also have a class definition. 443 00:28:01,940 --> 00:28:03,820 Let's say this is class P2. 444 00:28:03,820 --> 00:28:07,570 445 00:28:07,570 --> 00:28:13,870 And so if we remember in CSS, if I had some CSS file that I've created, 446 00:28:13,870 --> 00:28:18,460 then I want to assign attributes to some element based on an ID, 447 00:28:18,460 --> 00:28:20,840 I would use a pound sign. 448 00:28:20,840 --> 00:28:24,130 So I'd add a pound in front of that, saying this is actually 449 00:28:24,130 --> 00:28:25,960 an element and not some-- 450 00:28:25,960 --> 00:28:29,300 I mean, this is actually an ID and not some element tag. 451 00:28:29,300 --> 00:28:32,940 So in case, the idea I used here was P1. 452 00:28:32,940 --> 00:28:35,047 So I can add it there. 453 00:28:35,047 --> 00:28:38,180 454 00:28:38,180 --> 00:28:40,500 And so we notice, it comes here is actually 455 00:28:40,500 --> 00:28:43,340 have the ID P1 and the content unit. 456 00:28:43,340 --> 00:28:46,179 457 00:28:46,179 --> 00:28:47,220 We can do something more. 458 00:28:47,220 --> 00:28:50,530 459 00:28:50,530 --> 00:28:52,780 Let's change the content of this program. 460 00:28:52,780 --> 00:28:59,800 This program just has one, and let's say you wanted to change it to result dot, 461 00:28:59,800 --> 00:29:12,350 in an HMTL, and I can say CS50 is great. 462 00:29:12,350 --> 00:29:18,260 And if I say this, you notice my P1 node changes to that. 463 00:29:18,260 --> 00:29:20,720 So I had done something else. 464 00:29:20,720 --> 00:29:22,880 So I also added a class here. 465 00:29:22,880 --> 00:29:28,520 Now, let's say you don't select an element based on its ID or its tag. 466 00:29:28,520 --> 00:29:31,790 You want to select this element based on its class, right? 467 00:29:31,790 --> 00:29:38,330 So again, like we had in CSS, if you wanted 468 00:29:38,330 --> 00:29:41,090 to select an element based on its-- 469 00:29:41,090 --> 00:29:43,750 let's call this result 2-- 470 00:29:43,750 --> 00:29:46,040 if you need to select something based on its class, 471 00:29:46,040 --> 00:29:49,250 instead of you having the pound sign, you'd have the dot. 472 00:29:49,250 --> 00:29:53,090 And this gives my class name as P2. 473 00:29:53,090 --> 00:29:57,580 So if I print my result 2 and I save this-- 474 00:29:57,580 --> 00:30:01,705 So you notice, in our console, what we get printed out is my result P2. 475 00:30:01,705 --> 00:30:07,640 476 00:30:07,640 --> 00:30:12,230 So this is selector, document.querySelector, and then 477 00:30:12,230 --> 00:30:18,110 we just do one last example of SelectorAll. 478 00:30:18,110 --> 00:30:23,210 And let's say, in this case, I wanted to return all my p tags, 479 00:30:23,210 --> 00:30:28,400 every single element I have in my DOM with the tag p. 480 00:30:28,400 --> 00:30:36,170 So one thing I could use is I can use my Document.querySelectorAll 481 00:30:36,170 --> 00:30:40,700 and then add my p tag there. 482 00:30:40,700 --> 00:30:49,970 So in this case, if I printed out my results and I say Save. 483 00:30:49,970 --> 00:30:54,250 OK, so what you notice is return some node list. 484 00:30:54,250 --> 00:31:09,080 So in this case, if we expand this, I have my p with ID P1, 485 00:31:09,080 --> 00:31:13,250 then I have my p with class P2, and then I have my other p's. 486 00:31:13,250 --> 00:31:18,790 487 00:31:18,790 --> 00:31:20,330 OK. 488 00:31:20,330 --> 00:31:23,080 And we can look at the contents, too. 489 00:31:23,080 --> 00:31:29,140 490 00:31:29,140 --> 00:31:31,362 OK. 491 00:31:31,362 --> 00:31:34,570 So the unfortunately, that didn't give me the content that I was looking for. 492 00:31:34,570 --> 00:31:35,486 It was a bit too much. 493 00:31:35,486 --> 00:31:38,390 But you could probably scroll through to see which p tag each of them 494 00:31:38,390 --> 00:31:40,960 belongs to. 495 00:31:40,960 --> 00:31:48,040 So what Document.querySelector does is it is going to select all my p tags, 496 00:31:48,040 --> 00:31:49,850 and then it's going to return a list. 497 00:31:49,850 --> 00:31:52,933 So in this case, it's going to return an array of all the different p tags 498 00:31:52,933 --> 00:31:55,510 that I have in my DOM object. 499 00:31:55,510 --> 00:31:58,110 500 00:31:58,110 --> 00:32:02,910 So probably won't go so much into DOM manipulation. 501 00:32:02,910 --> 00:32:06,960 We have covered a lot of that in class already, 502 00:32:06,960 --> 00:32:11,290 so I'll move on to the next part of the seminar. 503 00:32:11,290 --> 00:32:18,910 504 00:32:18,910 --> 00:32:19,800 OK. 505 00:32:19,800 --> 00:32:26,580 So finally, I want us to look at a single-threaded asynchronous. 506 00:32:26,580 --> 00:32:29,460 So when I ask the question, what is JavaScript? 507 00:32:29,460 --> 00:32:32,520 So I mention single-threaded, asynchronous language. 508 00:32:32,520 --> 00:32:36,780 And like I said, I didn't go into detail then, would come to it. 509 00:32:36,780 --> 00:32:39,270 And now we have come to it. 510 00:32:39,270 --> 00:32:41,880 So now, the question is, what does it mean when someone 511 00:32:41,880 --> 00:32:43,410 says JavaScript is single-threaded? 512 00:32:43,410 --> 00:32:46,950 What does it mean when someone says JavaScript is in asynchronous language? 513 00:32:46,950 --> 00:32:52,300 514 00:32:52,300 --> 00:33:00,160 So in plain, simple words, what does it mean for JavaScript is single-threaded? 515 00:33:00,160 --> 00:33:06,520 That means JavaScript, in its runtime, can only do one thing at a time. 516 00:33:06,520 --> 00:33:10,120 So what does it mean, really? 517 00:33:10,120 --> 00:33:12,460 So I'll give an example of humans. 518 00:33:12,460 --> 00:33:16,270 So humans are multi-threaded machines, if I 519 00:33:16,270 --> 00:33:22,300 should put it that way, in that you can say, I can talk on the phone and run. 520 00:33:22,300 --> 00:33:28,150 I can listen to something and work on my laptop. 521 00:33:28,150 --> 00:33:32,050 So I am performing more than one task. 522 00:33:32,050 --> 00:33:36,640 I have the ability to perform more than one task at any given time. 523 00:33:36,640 --> 00:33:39,880 But then with JavaScript, it just can't do that. 524 00:33:39,880 --> 00:33:41,800 I can perform a network code in JavaScript 525 00:33:41,800 --> 00:33:45,460 and be doing some algebra calculations all at the same time. 526 00:33:45,460 --> 00:33:49,870 With JavaScript, when it executes in its runtime is 527 00:33:49,870 --> 00:33:52,330 when you give it a list of tasks to do, it 528 00:33:52,330 --> 00:33:55,919 is going to go over each task one at a time. 529 00:33:55,919 --> 00:33:58,960 So this will be different from some languages that you are familiar with. 530 00:33:58,960 --> 00:34:00,280 For example, Python. 531 00:34:00,280 --> 00:34:03,310 Python is a multi-threaded language. 532 00:34:03,310 --> 00:34:05,350 It can multitask. 533 00:34:05,350 --> 00:34:12,040 It can do many things at one time, which is a useful feature, because sometimes 534 00:34:12,040 --> 00:34:14,650 you might have something that takes long in the network 535 00:34:14,650 --> 00:34:17,462 and you do not want that to stall every other thing that you 536 00:34:17,462 --> 00:34:18,670 want to execute in your code. 537 00:34:18,670 --> 00:34:22,750 538 00:34:22,750 --> 00:34:29,681 So another perception of it, what does it mean to be single-threaded? 539 00:34:29,681 --> 00:34:31,389 You also find many people say this, which 540 00:34:31,389 --> 00:34:34,360 is JavaScript has a single code stock. 541 00:34:34,360 --> 00:34:40,389 And so we'll look into what, really, is a code stock? 542 00:34:40,389 --> 00:34:44,679 So I have a simple definition for it, which 543 00:34:44,679 --> 00:34:48,159 is a call stack is data structure that is going 544 00:34:48,159 --> 00:34:51,310 to record where we are in the program. 545 00:34:51,310 --> 00:34:57,310 So I put up this diagram, and we probably 546 00:34:57,310 --> 00:35:02,110 might have looked at this when we looked at our memory management 547 00:35:02,110 --> 00:35:03,860 inside our computers. 548 00:35:03,860 --> 00:35:07,820 So here, we have the JavaScript environment. 549 00:35:07,820 --> 00:35:10,750 So we have the JavaScript runtime engine, which is really 550 00:35:10,750 --> 00:35:12,970 where my JavaScript code is executed. 551 00:35:12,970 --> 00:35:15,130 So in my runtime engine, I have the heap, 552 00:35:15,130 --> 00:35:19,150 where memory allocation is going to take place, and I have a stack. 553 00:35:19,150 --> 00:35:21,520 So in my stack, I have a list of functions. 554 00:35:21,520 --> 00:35:27,370 And how the stock adds is that whenever I call a function, 555 00:35:27,370 --> 00:35:29,710 function is going to be popped onto the stack. 556 00:35:29,710 --> 00:35:31,810 And the function is only popped off the stack 557 00:35:31,810 --> 00:35:34,720 when my function actually returns. 558 00:35:34,720 --> 00:35:40,120 And so I have an example of this, and you'll see that in action. 559 00:35:40,120 --> 00:35:43,570 And then the whole JavaScript environment 560 00:35:43,570 --> 00:35:46,810 is not just made of the JavaScript runtime engine. 561 00:35:46,810 --> 00:35:50,140 So you have some other features that are added to this environment. 562 00:35:50,140 --> 00:35:52,960 You have things like web APIs, and then you 563 00:35:52,960 --> 00:35:55,390 have the event loop and the callback queue. 564 00:35:55,390 --> 00:36:00,430 And again, we're going to come back to this soon. 565 00:36:00,430 --> 00:36:02,960 Excuse me. 566 00:36:02,960 --> 00:36:04,350 OK. 567 00:36:04,350 --> 00:36:09,520 So like I mentioned, JavaScript only has once you go call stack. 568 00:36:09,520 --> 00:36:11,490 So it only has one single thread, where it's 569 00:36:11,490 --> 00:36:15,540 going to be popping off and adding functions onto. 570 00:36:15,540 --> 00:36:20,700 So everything is going to be happening by synchronously, one at a time. 571 00:36:20,700 --> 00:36:23,880 So in this case, I have three functions in my stack. 572 00:36:23,880 --> 00:36:24,660 So I have mean. 573 00:36:24,660 --> 00:36:25,690 I have show text. 574 00:36:25,690 --> 00:36:27,711 Set time out. 575 00:36:27,711 --> 00:36:30,355 The total [? C ?] actually won't stay on that stack. 576 00:36:30,355 --> 00:36:32,355 But then if I have defined a bunch of functions, 577 00:36:32,355 --> 00:36:34,646 they're all going through my stack, and then JavaScript 578 00:36:34,646 --> 00:36:36,990 is going to execute one function at a time. 579 00:36:36,990 --> 00:36:39,870 So I said this may be problematic if you have something 580 00:36:39,870 --> 00:36:43,380 that goes on for a long time because it is going to block everything 581 00:36:43,380 --> 00:36:44,730 else from happening. 582 00:36:44,730 --> 00:36:50,640 And if this was, say, in your web browser and you have using JavaScript, 583 00:36:50,640 --> 00:36:54,030 you define some function that blocks out every other JavaScript code. 584 00:36:54,030 --> 00:36:58,530 That would provide bad user experience, in that 585 00:36:58,530 --> 00:37:00,780 every other thing that the user can do in your browser 586 00:37:00,780 --> 00:37:08,010 will be stopped until that one function that's really slow finally completes. 587 00:37:08,010 --> 00:37:11,620 and then other features can actually be accessed. 588 00:37:11,620 --> 00:37:18,780 So the question is, how does JavaScript manage to get around this? 589 00:37:18,780 --> 00:37:24,420 And so now this brings us to JavaScript being in asynchronous language. 590 00:37:24,420 --> 00:37:29,550 It is, like I mentioned, in JavaScript runtime, where your JavaScript 591 00:37:29,550 --> 00:37:33,120 code is actually going to be executed, can only do one thing at a time. 592 00:37:33,120 --> 00:37:36,210 But then, because your browser adds these extra features, such as your web 593 00:37:36,210 --> 00:37:41,800 APIs or event loop, JavaScript can do other things. 594 00:37:41,800 --> 00:37:44,977 And then we'll see why. 595 00:37:44,977 --> 00:37:47,310 So we'll come back to this and then I'll give an example 596 00:37:47,310 --> 00:37:50,670 why the web API helps us. 597 00:37:50,670 --> 00:37:53,720 598 00:37:53,720 --> 00:37:56,720 So again, open up this example. 599 00:37:56,720 --> 00:38:05,810 And then I found this nice visualizor for the JavaScript environment 600 00:38:05,810 --> 00:38:09,320 and I'll use this. 601 00:38:09,320 --> 00:38:19,400 602 00:38:19,400 --> 00:38:22,670 OK, so firstly, I want us to visualize a call stack. 603 00:38:22,670 --> 00:38:25,430 What really is a call stack and what does it mean to pop-- 604 00:38:25,430 --> 00:38:28,490 I mean, to put a function on it and pop a function off? 605 00:38:28,490 --> 00:38:36,215 So if I run this, what we see is I have my-- 606 00:38:36,215 --> 00:38:37,320 pause this here. 607 00:38:37,320 --> 00:38:40,490 608 00:38:40,490 --> 00:38:44,130 So the highlighted means the functions that are being executed. 609 00:38:44,130 --> 00:38:50,029 So here, I have this function at the top, which cannot be seen, 610 00:38:50,029 --> 00:38:51,320 unfortunately, because of that. 611 00:38:51,320 --> 00:38:54,202 So I have a function for which returns another function bar, 612 00:38:54,202 --> 00:38:56,660 which returns [INAUDIBLE],, which returns another function, 613 00:38:56,660 --> 00:39:01,130 returns another function, all the way up to bar z, which is going to-- 614 00:39:01,130 --> 00:39:05,270 615 00:39:05,270 --> 00:39:09,950 so all of the devices, which is finally going to print out some high statement, 616 00:39:09,950 --> 00:39:10,970 and then finally return. 617 00:39:10,970 --> 00:39:14,500 618 00:39:14,500 --> 00:39:18,720 So I have defined this function, and then among this function, 619 00:39:18,720 --> 00:39:21,660 you have this main function, which we're at the bottom. 620 00:39:21,660 --> 00:39:24,330 The main cause the function for, and then 621 00:39:24,330 --> 00:39:28,500 after the function for has returned, main is finally going to return some 3 622 00:39:28,500 --> 00:39:30,790 plus 5 value. 623 00:39:30,790 --> 00:39:33,870 And so the first function to be code here-- so notice, all of these 624 00:39:33,870 --> 00:39:35,850 are just function definitions that haven't yet 625 00:39:35,850 --> 00:39:40,920 code any function, except within the function, within functions themselves. 626 00:39:40,920 --> 00:39:45,620 But the first function that I'm going to call here is my main function. 627 00:39:45,620 --> 00:39:50,740 So console.log is going to call main, and then main will execute this. 628 00:39:50,740 --> 00:39:52,380 It's going to call for. 629 00:39:52,380 --> 00:39:55,920 And then for is basically calling these other functions. 630 00:39:55,920 --> 00:39:59,280 And so this is what we notice happening. 631 00:39:59,280 --> 00:40:02,525 So as its function is code, it's going to be popped. 632 00:40:02,525 --> 00:40:05,690 633 00:40:05,690 --> 00:40:06,920 So this function is code. 634 00:40:06,920 --> 00:40:10,420 It's going to be popped into the stack, and so the stack just keeps building. 635 00:40:10,420 --> 00:40:15,030 It keeps going and going and going until the final function returns. 636 00:40:15,030 --> 00:40:21,590 So in this case, bar z returns by calls of the plugin [? high. ?] 637 00:40:21,590 --> 00:40:24,690 And then once bar z returns, then the other functions. 638 00:40:24,690 --> 00:40:28,260 So once bar z returns, then bar z's finally popped off the stack, 639 00:40:28,260 --> 00:40:33,210 and then the other functions can now get popped onto the stack. 640 00:40:33,210 --> 00:40:38,420 So if I do this, so you notice now my stack starts decreasing. 641 00:40:38,420 --> 00:40:43,250 So this is like what's happening in my JavaScript runtime, 642 00:40:43,250 --> 00:40:44,930 where I'm just having functions pile up. 643 00:40:44,930 --> 00:40:51,710 644 00:40:51,710 --> 00:40:56,150 So I prepared an example to simulate what 645 00:40:56,150 --> 00:40:58,400 I mean by if you have one function that's 646 00:40:58,400 --> 00:41:03,815 blocking everything else on your call stack, and what that would imply. 647 00:41:03,815 --> 00:41:06,800 648 00:41:06,800 --> 00:41:09,140 So let's open up an example. 649 00:41:09,140 --> 00:41:15,410 So I have another page, which is just a [INAUDIBLE] page. 650 00:41:15,410 --> 00:41:21,590 So in this case, I've linked the first JavaScript file that I have here. 651 00:41:21,590 --> 00:41:24,620 And so in this JavaScript file, we see it 652 00:41:24,620 --> 00:41:28,760 does the first thing, which is it prints out [INAUDIBLE] 653 00:41:28,760 --> 00:41:31,560 then enters this while loop, which goes on. 654 00:41:31,560 --> 00:41:35,270 And then this while loop just prints out [INAUDIBLE] a couple of times. 655 00:41:35,270 --> 00:41:39,110 And then when that while loop done, prints out console.log. 656 00:41:39,110 --> 00:41:42,730 So if I run this in here-- 657 00:41:42,730 --> 00:41:48,160 OK, it's already been run, but let's see what's happening in the console. 658 00:41:48,160 --> 00:41:50,040 So you go in. 659 00:41:50,040 --> 00:41:51,010 OK. 660 00:41:51,010 --> 00:41:54,760 So what we notice is I start with I'm starting. 661 00:41:54,760 --> 00:41:59,440 Then I am the second that's being printed out. 662 00:41:59,440 --> 00:42:02,170 And the last, now that's waiting. 663 00:42:02,170 --> 00:42:07,120 So it will not print out until I am done with my while loop. 664 00:42:07,120 --> 00:42:12,010 So say, in this case, you had some other JavaScript functionality beneath this. 665 00:42:12,010 --> 00:42:15,110 What that means is everything that you have 666 00:42:15,110 --> 00:42:17,950 occurring after your while loop is now just going to stall 667 00:42:17,950 --> 00:42:22,060 and just wait for you to finish printing out this while loop. 668 00:42:22,060 --> 00:42:25,690 So of course, this is not a real-life kind of scenario, 669 00:42:25,690 --> 00:42:31,880 because unless, otherwise, someone wouldn't really want to print out, 670 00:42:31,880 --> 00:42:34,660 I mean, that statement forever. 671 00:42:34,660 --> 00:42:39,220 But this is just to show so you can have some things like this 672 00:42:39,220 --> 00:42:43,040 that are in your code and then would prevent other things from running. 673 00:42:43,040 --> 00:42:45,070 So I keep on giving an example of network codes 674 00:42:45,070 --> 00:42:48,250 just because network codes, such as, say, 675 00:42:48,250 --> 00:42:53,570 me getting something from some API, would take a long time to execute. 676 00:42:53,570 --> 00:42:57,370 So let's say you had an network code here, which takes forever, 677 00:42:57,370 --> 00:42:59,920 that means every other thing that you want to do 678 00:42:59,920 --> 00:43:05,590 would have to wait for that network code to complete, and then you do it. 679 00:43:05,590 --> 00:43:11,680 But then I said JavaScript has found a way to get around this, 680 00:43:11,680 --> 00:43:19,100 to execute things more than once using asynchronous functions. 681 00:43:19,100 --> 00:43:24,880 So we're going to open one. 682 00:43:24,880 --> 00:43:29,230 So in this second example, I have replaced that while loop 683 00:43:29,230 --> 00:43:31,420 that I had with a setTimeout function. 684 00:43:31,420 --> 00:43:35,530 So a setTimeout is something provided us through the web APIs. 685 00:43:35,530 --> 00:43:39,610 And what setTimeout does, so setTimeout accepts a function, a callback 686 00:43:39,610 --> 00:43:44,960 function, and your delay value. 687 00:43:44,960 --> 00:43:49,090 So in this case, what it means to be a callback function is 688 00:43:49,090 --> 00:43:56,290 I am this function that's going to be code when this thing is 689 00:43:56,290 --> 00:43:59,310 finished with what it's supposed to do. 690 00:43:59,310 --> 00:44:04,490 So let me write it out as it would. 691 00:44:04,490 --> 00:44:09,670 So it's supposed to have a function delay. 692 00:44:09,670 --> 00:44:13,180 So the main object of setTimeout is it's going to create 693 00:44:13,180 --> 00:44:14,710 some delay in what you're doing. 694 00:44:14,710 --> 00:44:17,412 695 00:44:17,412 --> 00:44:19,120 Now, the purpose of the callback function 696 00:44:19,120 --> 00:44:25,181 is it's going to stipulate what is going to happen when your setTimeout has 697 00:44:25,181 --> 00:44:25,930 actually finished. 698 00:44:25,930 --> 00:44:28,300 So in this case, when your time has run out. 699 00:44:28,300 --> 00:44:31,660 So in this case, I have set a time of 10,000. 700 00:44:31,660 --> 00:44:35,800 And what I'm saying is create this delay of 10,000, 701 00:44:35,800 --> 00:44:37,810 and then when you're finally done, I want 702 00:44:37,810 --> 00:44:41,530 you to execute this function, which is just console.log in 703 00:44:41,530 --> 00:44:44,350 and the callback function. 704 00:44:44,350 --> 00:44:47,420 So let's see how this works. 705 00:44:47,420 --> 00:44:55,660 So if I run this, so I'll go to into the index of this. 706 00:44:55,660 --> 00:44:58,960 And let's link, instead, my async. 707 00:44:58,960 --> 00:45:12,821 708 00:45:12,821 --> 00:45:13,320 OK. 709 00:45:13,320 --> 00:45:17,460 710 00:45:17,460 --> 00:45:19,860 So let's refresh that, see what happens. 711 00:45:19,860 --> 00:45:29,230 712 00:45:29,230 --> 00:45:31,730 OK. 713 00:45:31,730 --> 00:45:32,850 So it's taking a while. 714 00:45:32,850 --> 00:45:36,490 Let me reduce the time here, maybe that much. 715 00:45:36,490 --> 00:45:42,400 716 00:45:42,400 --> 00:45:42,900 OK. 717 00:45:42,900 --> 00:45:47,510 So it's taking a while, but we see what's happening. 718 00:45:47,510 --> 00:45:52,310 So in this case, the first thing that I do is I code I'm starting. 719 00:45:52,310 --> 00:45:54,620 Then I put a time out, and then I finally 720 00:45:54,620 --> 00:45:57,830 code the console.log and the last function. 721 00:45:57,830 --> 00:46:00,260 But then if we see the order in which they executed, 722 00:46:00,260 --> 00:46:02,510 we notice the first thing that's executed 723 00:46:02,510 --> 00:46:09,920 is I'm starting, then the last function, and then, finally, the callback. 724 00:46:09,920 --> 00:46:14,330 So setTimeout is an asynchronous function, 725 00:46:14,330 --> 00:46:18,050 which is really going to say-- 726 00:46:18,050 --> 00:46:19,880 so you're going to cause a time out. 727 00:46:19,880 --> 00:46:24,350 And then setTimeout is going to run in its web API. 728 00:46:24,350 --> 00:46:27,545 And then when it starts running in its web API, 729 00:46:27,545 --> 00:46:31,110 I will not have setTimeout on my call stack. 730 00:46:31,110 --> 00:46:34,850 And so what does it mean to push out the time out of the call stack? 731 00:46:34,850 --> 00:46:39,410 That means I can add my console.log onto the call stack and actually execute it. 732 00:46:39,410 --> 00:46:45,880 So notice, so if I refresh this, I don't have to wait for setTimeout 733 00:46:45,880 --> 00:46:49,880 to execute for me to actually continue to [? kick ?] in my other code. 734 00:46:49,880 --> 00:46:54,770 And so this is how JavaScript manages to get around-- 735 00:46:54,770 --> 00:46:59,240 deal with its single-threaded nature, by creating this asynchronous functions, 736 00:46:59,240 --> 00:47:02,540 which do not block other functions from executing, 737 00:47:02,540 --> 00:47:05,810 but simply are going to execute when I'm done. 738 00:47:05,810 --> 00:47:09,320 739 00:47:09,320 --> 00:47:11,780 So in understanding the synchronous functions, 740 00:47:11,780 --> 00:47:14,800 I think it best to actually see how this happens. 741 00:47:14,800 --> 00:47:19,270 Again, we'll go back to this visualizor here. 742 00:47:19,270 --> 00:47:26,120 743 00:47:26,120 --> 00:47:26,970 OK. 744 00:47:26,970 --> 00:47:29,385 So let's get rid of this previous example. 745 00:47:29,385 --> 00:47:40,340 746 00:47:40,340 --> 00:47:46,170 So I started with [INAUDIBLE] And if I have it in here-- 747 00:47:46,170 --> 00:47:47,325 so this is [INAUDIBLE]. 748 00:47:47,325 --> 00:47:48,950 And you know what [INAUDIBLE] is doing. 749 00:47:48,950 --> 00:47:51,860 750 00:47:51,860 --> 00:47:53,960 The first one has really executed, and now I'm 751 00:47:53,960 --> 00:48:02,550 just stuck in this while loop, which is running and running until it's done. 752 00:48:02,550 --> 00:48:06,050 And then when it's finally done, then execute console.log. 753 00:48:06,050 --> 00:48:12,680 But then let's see how this differs from how my asynchronous is going to add. 754 00:48:12,680 --> 00:48:17,030 So I paste this in this [? 2, ?] and then I'm going to run this. 755 00:48:17,030 --> 00:48:24,240 756 00:48:24,240 --> 00:48:26,430 So we notice something happening. 757 00:48:26,430 --> 00:48:34,780 758 00:48:34,780 --> 00:48:37,090 So make this a bit slower so that you see. 759 00:48:37,090 --> 00:48:39,970 760 00:48:39,970 --> 00:48:44,680 So we would notice is when I start this, my first function, 761 00:48:44,680 --> 00:48:46,765 console.log just pushed into my stack. 762 00:48:46,765 --> 00:48:47,920 It executes. 763 00:48:47,920 --> 00:48:50,260 Then I get my second function setTimeout. 764 00:48:50,260 --> 00:48:53,280 But it's a web API, so it's pushed off the stack. 765 00:48:53,280 --> 00:48:55,240 Then it goes into my web API. 766 00:48:55,240 --> 00:48:59,800 So since it's pushed off the stack, I am able-- 767 00:48:59,800 --> 00:49:03,100 2 [? plus ?] 2 so I'll probably use a pause. 768 00:49:03,100 --> 00:49:07,750 They said I have console.log pushed off the stack, then setTimeout, which 769 00:49:07,750 --> 00:49:10,300 is somewhere, maybe a function. 770 00:49:10,300 --> 00:49:12,760 So here, it's pushed off the stack. 771 00:49:12,760 --> 00:49:15,070 And so because it's pushed off the stack, 772 00:49:15,070 --> 00:49:17,830 it's now been executed here in my web APIs. 773 00:49:17,830 --> 00:49:21,670 I can have my other function here, which is beneath my setTimeout, 774 00:49:21,670 --> 00:49:22,990 come on to my stack. 775 00:49:22,990 --> 00:49:25,825 So that means I can execute this console.log function. 776 00:49:25,825 --> 00:49:28,840 777 00:49:28,840 --> 00:49:34,990 Now, when you have this setTimeout-- so setTimeout is working in your web API-- 778 00:49:34,990 --> 00:49:40,590 you do not want your web APIs to immediately modify your code, 779 00:49:40,590 --> 00:49:42,910 or just immediately push code into your stack, 780 00:49:42,910 --> 00:49:46,600 in the middle of your code running. 781 00:49:46,600 --> 00:49:48,490 So why might that be problematic? 782 00:49:48,490 --> 00:49:51,360 783 00:49:51,360 --> 00:49:55,390 So I already have some logical flow of my work. 784 00:49:55,390 --> 00:50:01,250 And if my web APIs could randomly push stuff back into the stack, 785 00:50:01,250 --> 00:50:05,200 it probably wouldn't be as consistent. 786 00:50:05,200 --> 00:50:08,200 The [? floppy ?] work will not be as smooth 787 00:50:08,200 --> 00:50:10,090 as you probably would want it to be. 788 00:50:10,090 --> 00:50:17,260 So you set up your web APIs randomly pushing stuff back onto your stack. 789 00:50:17,260 --> 00:50:24,490 You have this callback queue, which is here at the bottom of the page. 790 00:50:24,490 --> 00:50:29,800 And then what this callback queue does is it has this event loop. 791 00:50:29,800 --> 00:50:34,450 So when the web API is done running what it's supposed to do, 792 00:50:34,450 --> 00:50:36,910 it pushes the particular callback function 793 00:50:36,910 --> 00:50:39,910 that you want executed at the end into the callback queue. 794 00:50:39,910 --> 00:50:43,750 And then the event loop might have this callback queue saying, 795 00:50:43,750 --> 00:50:46,880 when my stack is empty-- 796 00:50:46,880 --> 00:50:53,800 that means when I have finished running all my functions in my stack-- 797 00:50:53,800 --> 00:50:57,010 I am going to get the first function in my callback queue 798 00:50:57,010 --> 00:51:00,220 and put it onto my stack, and then it's going to be executed. 799 00:51:00,220 --> 00:51:03,500 So we see how this works. 800 00:51:03,500 --> 00:51:05,900 And so I'm running. 801 00:51:05,900 --> 00:51:07,660 So setTimeout goes into my stack. 802 00:51:07,660 --> 00:51:10,150 It goes to web API. 803 00:51:10,150 --> 00:51:12,010 The last function executes. 804 00:51:12,010 --> 00:51:13,960 And callback goes into callback queue. 805 00:51:13,960 --> 00:51:15,760 It's pushed into the stack. 806 00:51:15,760 --> 00:51:18,730 It executes, and then I'm done. 807 00:51:18,730 --> 00:51:19,820 All right. 808 00:51:19,820 --> 00:51:24,747 And so this is the basic flow of your asynchronous functions 809 00:51:24,747 --> 00:51:26,080 and this is how they're managed. 810 00:51:26,080 --> 00:51:28,450 This is how they [INAUDIBLE] to do other things 811 00:51:28,450 --> 00:51:31,450 whilst they are running, similar to background, but not 812 00:51:31,450 --> 00:51:32,952 really in the background. 813 00:51:32,952 --> 00:51:39,560 814 00:51:39,560 --> 00:51:43,810 So move on to say my setTimeout is going to run 815 00:51:43,810 --> 00:51:48,700 and only executed-- in this case, the callback function will only 816 00:51:48,700 --> 00:51:52,180 execute once I'm done doing everything. 817 00:51:52,180 --> 00:51:55,150 In this case, executing every other function in my call stack. 818 00:51:55,150 --> 00:51:59,200 But there might be instances where you want to stipulate, 819 00:51:59,200 --> 00:52:02,080 that I want this particular function to execute 820 00:52:02,080 --> 00:52:06,180 only after my synchronous function is done executing. 821 00:52:06,180 --> 00:52:11,950 So in this case, say I performed an network code to my Google search. 822 00:52:11,950 --> 00:52:16,690 And all I want to do is give my user back the list of [? foods ?] 823 00:52:16,690 --> 00:52:19,030 based on their preferences. 824 00:52:19,030 --> 00:52:21,850 So I do not want to display something before I actually 825 00:52:21,850 --> 00:52:24,470 back my response from Google. 826 00:52:24,470 --> 00:52:26,890 So I would want to have a way to stipulate. 827 00:52:26,890 --> 00:52:31,240 Say, when I do my search, I only want my display 828 00:52:31,240 --> 00:52:34,270 function to execute after my search. 829 00:52:34,270 --> 00:52:40,962 And so this is now where the issue of async await and promises coming. 830 00:52:40,962 --> 00:52:42,580 So I'll open up an example. 831 00:52:42,580 --> 00:52:46,370 832 00:52:46,370 --> 00:52:57,260 So here, you have an example, just to show what I was talking about. 833 00:52:57,260 --> 00:53:01,026 So let's go to this and let this be my promise one. 834 00:53:01,026 --> 00:53:06,082 835 00:53:06,082 --> 00:53:13,891 So if I open up my HTML page, so I've linked that there. 836 00:53:13,891 --> 00:53:20,250 837 00:53:20,250 --> 00:53:24,160 OK, there's my async page. 838 00:53:24,160 --> 00:53:30,990 839 00:53:30,990 --> 00:53:35,010 So I have my first promise here. 840 00:53:35,010 --> 00:53:40,890 So in this case, my promise-- 841 00:53:40,890 --> 00:53:43,180 just give me a moment. 842 00:53:43,180 --> 00:53:45,660 OK, so in this case, I have a promise. 843 00:53:45,660 --> 00:53:50,280 I mean, I have a promise example, where we start off with the example 844 00:53:50,280 --> 00:53:55,860 that I gave, where I have a function, except I want this particular-- 845 00:53:55,860 --> 00:53:57,490 in this case, it's not a function. 846 00:53:57,490 --> 00:53:58,670 It's some line of code. 847 00:53:58,670 --> 00:54:03,660 And I want this line of code to execute when my setTimeout is actually done. 848 00:54:03,660 --> 00:54:07,830 So in this case, I set x to be the value that's 849 00:54:07,830 --> 00:54:12,840 going to return once I finish running my setTimeout. 850 00:54:12,840 --> 00:54:17,025 And then I let my y equals to-- 851 00:54:17,025 --> 00:54:20,040 I mean the product of x times 10. 852 00:54:20,040 --> 00:54:23,700 So one potential problem that might arise from here 853 00:54:23,700 --> 00:54:26,640 is-- so we notice that setTimeout is going to run in the background, 854 00:54:26,640 --> 00:54:30,600 and then everything else is going to run as normal. 855 00:54:30,600 --> 00:54:35,220 But then we notice, we're using x, which is the value returned from setTimeout. 856 00:54:35,220 --> 00:54:40,290 So if setTimeout happened to run for a long time, which 857 00:54:40,290 --> 00:54:46,410 it will do in this case, and then I code my y and x. 858 00:54:46,410 --> 00:54:52,150 So the most likely thing is I would get an error. 859 00:54:52,150 --> 00:54:55,460 And let's see if we can actually see that. 860 00:54:55,460 --> 00:55:17,020 861 00:55:17,020 --> 00:55:17,520 OK. 862 00:55:17,520 --> 00:55:20,480 863 00:55:20,480 --> 00:55:22,615 So the Python thing actually gives me-- 864 00:55:22,615 --> 00:55:45,180 865 00:55:45,180 --> 00:55:50,200 OK, so I'm wondering why it's giving me some random value, which it should not 866 00:55:50,200 --> 00:55:52,490 be doing. 867 00:55:52,490 --> 00:55:55,590 But I'll, instead, run this in-- 868 00:55:55,590 --> 00:56:03,270 OK, so like I said previously, that we can run JavaScript 869 00:56:03,270 --> 00:56:05,090 as an [? out ?] browser using Node.js. 870 00:56:05,090 --> 00:56:07,590 So if you're going to run JavaScript outside your browser, 871 00:56:07,590 --> 00:56:09,240 you'd have to use the Node.js. 872 00:56:09,240 --> 00:56:11,510 So I have it installed on my computer. 873 00:56:11,510 --> 00:56:15,810 And I think, for now, we use it because it cannot [? sync ?] while my browser 874 00:56:15,810 --> 00:56:20,490 gives me some random value. 875 00:56:20,490 --> 00:56:24,720 So in this case, I want to run promise 1. 876 00:56:24,720 --> 00:56:27,240 OK, so it gives me what I'm expecting. 877 00:56:27,240 --> 00:56:31,600 So at the bottom of my terminal here, so I call node 878 00:56:31,600 --> 00:56:35,970 and I say node, can you run this particular JavaScript file, 879 00:56:35,970 --> 00:56:38,310 where I'm running promise 1. 880 00:56:38,310 --> 00:56:42,720 So promise 1 first prints out "I'm starting" and codes this function 881 00:56:42,720 --> 00:56:48,765 x and then multiplies x times 10, stores it in y, and then prints out y. 882 00:56:48,765 --> 00:56:52,520 One problem that we notice is, especially 883 00:56:52,520 --> 00:56:59,680 if I'm stacking, then prints out none, which is not a number, and then ends. 884 00:56:59,680 --> 00:57:00,890 So why does it do that? 885 00:57:00,890 --> 00:57:04,520 So like I mentioned, you are coding-- 886 00:57:04,520 --> 00:57:07,810 you are using x before. 887 00:57:07,810 --> 00:57:12,160 Most likely, your setTimeout hasn't actually been executed. 888 00:57:12,160 --> 00:57:17,090 So get a certain time, in this case, execute this line of code, 889 00:57:17,090 --> 00:57:19,390 it doesn't know what x is. 890 00:57:19,390 --> 00:57:23,590 So it just returns not a number. 891 00:57:23,590 --> 00:57:30,250 And so then I mentioned promises. 892 00:57:30,250 --> 00:57:31,400 and async await. 893 00:57:31,400 --> 00:57:35,350 So here, I have described, given a solution, 894 00:57:35,350 --> 00:57:39,580 for how you'd get around this problem. 895 00:57:39,580 --> 00:57:43,910 I want to set some code to execute after this has finished. 896 00:57:43,910 --> 00:57:49,930 So this was the function, the setTimeout that we had before, except now, it's 897 00:57:49,930 --> 00:57:51,730 defined inside a promise. 898 00:57:51,730 --> 00:57:55,030 So basic syntax for a promise is you have a function 899 00:57:55,030 --> 00:57:58,210 and then it has a parameters resolve reject. 900 00:57:58,210 --> 00:58:02,410 And then what promise does is it's going to execute a particular function, 901 00:58:02,410 --> 00:58:05,950 and then it will either, resolve which it means to give that value. 902 00:58:05,950 --> 00:58:08,800 So resolving this case is my callback value. 903 00:58:08,800 --> 00:58:15,310 So if my setTimeout is done, it's going to code this function 904 00:58:15,310 --> 00:58:16,840 and it's going to code resolve. 905 00:58:16,840 --> 00:58:19,400 So resolve means my promise is being executing, 906 00:58:19,400 --> 00:58:21,980 and then I'm passing the value. 907 00:58:21,980 --> 00:58:24,410 So that's the value it's going to yield. 908 00:58:24,410 --> 00:58:29,400 And so if I define this promise, and then I wanted to use it, 909 00:58:29,400 --> 00:58:32,560 so instead of we just use an x randomly-- 910 00:58:32,560 --> 00:58:34,850 so I define an async function. 911 00:58:34,850 --> 00:58:38,890 So in this case, I am defining an asynchronous function. 912 00:58:38,890 --> 00:58:42,040 So why do this is a synchronous function come 913 00:58:42,040 --> 00:58:45,810 with this keyword here, which is await. 914 00:58:45,810 --> 00:58:50,680 And then what await does is it's going to pause my synchronous function 915 00:58:50,680 --> 00:58:54,490 and then wait for a promise to finish executing. 916 00:58:54,490 --> 00:59:00,630 And then after this particular promise is done, in this case, 917 00:59:00,630 --> 00:59:05,800 after my promise resolves, it's going to continue executing its code. 918 00:59:05,800 --> 00:59:08,750 So I'll first await the value of my promise. 919 00:59:08,750 --> 00:59:15,820 Then when my promise is done, I code y x times 5, and then I console.log y. 920 00:59:15,820 --> 00:59:19,810 And so if I code my function-- so in this case, I have [INAUDIBLE].. 921 00:59:19,810 --> 00:59:22,420 So this is in promise 2. 922 00:59:22,420 --> 00:59:27,220 So if I keep promise 2, I get the value that I'm looking for, 923 00:59:27,220 --> 00:59:30,135 which is I'm starting-- then it actually executes 25. 924 00:59:30,135 --> 00:59:34,180 925 00:59:34,180 --> 00:59:36,250 So now, this is using async functions. 926 00:59:36,250 --> 00:59:39,790 And then one thing that has also been added 927 00:59:39,790 --> 00:59:46,120 is, from using async word function, I can also use dot then. 928 00:59:46,120 --> 00:59:50,620 So I'm going to use another chain of the promise example, where 929 00:59:50,620 --> 00:59:54,400 instead of me awaiting a promise, I'm going to say execute 930 00:59:54,400 --> 00:59:57,100 this async function in this promise. 931 00:59:57,100 --> 00:59:59,050 Get this promise value. 932 00:59:59,050 --> 01:00:03,680 Then when the promise is done, execute this function. 933 01:00:03,680 --> 01:00:09,505 It's the same promise from before, and then I define a new-- 934 01:00:09,505 --> 01:00:15,070 so I call my promise here and say, perform this promise. 935 01:00:15,070 --> 01:00:21,550 When my promise has finally resolved, then execute this function. 936 01:00:21,550 --> 01:00:24,670 So I have a function, which takes an x. 937 01:00:24,670 --> 01:00:28,030 So whichever value is returned from my promise 938 01:00:28,030 --> 01:00:33,400 is assigned to this particular x parameter. 939 01:00:33,400 --> 01:00:38,650 And then I can finally multiply my x times 5 and then I can console.log y. 940 01:00:38,650 --> 01:00:47,020 And so if I executed this in my node, I still get the same thing. 941 01:00:47,020 --> 01:00:52,090 So this is really doing the same thing as my async awaits. 942 01:00:52,090 --> 01:00:55,600 So it might depend on my preference. 943 01:00:55,600 --> 01:00:57,730 So you might go into Details and actually 944 01:00:57,730 --> 01:01:01,460 talk about what is the difference between using dot then and async await. 945 01:01:01,460 --> 01:01:04,780 946 01:01:04,780 --> 01:01:07,120 But this is basically how you can handle promises 947 01:01:07,120 --> 01:01:11,620 and how you can stipulate when a particular set of code 948 01:01:11,620 --> 01:01:15,250 is going to execute with regard to an asynchronous function, where, 949 01:01:15,250 --> 01:01:18,780 in our case, asynchronous function is setTimeout. 950 01:01:18,780 --> 01:01:23,020 951 01:01:23,020 --> 01:01:25,090 And then, probably, one thing that would want 952 01:01:25,090 --> 01:01:27,580 to do from what we learned previously, which is I 953 01:01:27,580 --> 01:01:34,100 can actually shorten my function here and say, instead of me having that, 954 01:01:34,100 --> 01:01:39,210 I can simply set it to do that and save. 955 01:01:39,210 --> 01:01:42,450 And then if I run this, I still get the same thing. 956 01:01:42,450 --> 01:01:46,650 957 01:01:46,650 --> 01:01:50,410 So we'll just summarize what we just did, 958 01:01:50,410 --> 01:01:53,880 which is what happens when a function for it invites some web API. 959 01:01:53,880 --> 01:01:56,680 It's called, in this case. 960 01:01:56,680 --> 01:02:02,460 I stated web API, but let's say my asynchronous function is just called. 961 01:02:02,460 --> 01:02:05,185 So we'd have that asynchronous function called. 962 01:02:05,185 --> 01:02:08,340 In this case, for example, setTimeout. 963 01:02:08,340 --> 01:02:11,070 And then that function, we pushed off the stack. 964 01:02:11,070 --> 01:02:14,730 Then it's going to be executed somewhere else. 965 01:02:14,730 --> 01:02:19,530 And then-- oops, sorry. 966 01:02:19,530 --> 01:02:23,970 And then when it's done, my function is going to be added back to my task 2, 967 01:02:23,970 --> 01:02:26,190 and then my event loop, which has a task 2, 968 01:02:26,190 --> 01:02:29,130 is going to push my function back into the stack when done. 969 01:02:29,130 --> 01:02:32,240 970 01:02:32,240 --> 01:02:37,950 And of course, promise is async await, which we just looked at. 971 01:02:37,950 --> 01:02:44,820 So this is probably a lot to take in, and I will say probably 972 01:02:44,820 --> 01:02:53,400 working with the visualizor, seeing how exactly asynchronous function works, 973 01:02:53,400 --> 01:02:57,660 getting more practice into promises and dealing 974 01:02:57,660 --> 01:03:00,510 with those asynchronous functions, it's probably 975 01:03:00,510 --> 01:03:03,240 a good way to get a handle of this. 976 01:03:03,240 --> 01:03:05,790 And this is where, probably, JavaScript becomes 977 01:03:05,790 --> 01:03:09,270 tricky to learn, just because of its single-threaded nature 978 01:03:09,270 --> 01:03:14,460 and how you have to deal with these async functions. 979 01:03:14,460 --> 01:03:17,460 But with more practice, you get a handle of them, 980 01:03:17,460 --> 01:03:22,470 and I hope this gave you some place to start. 981 01:03:22,470 --> 01:03:26,750 And that's it for this seminar. 982 01:03:26,750 --> 01:03:28,675