1 00:00:02,060 --> 00:00:04,850 So now up to this point in this section, 2 00:00:04,850 --> 00:00:07,280 we made sure that clicking these Edit buttons here 3 00:00:07,280 --> 00:00:09,190 opens this modal. 4 00:00:09,190 --> 00:00:12,040 Now, in case you skipped all the previous lectures 5 00:00:12,040 --> 00:00:15,330 because you just wanted to dive into these new concepts 6 00:00:15,330 --> 00:00:17,020 which are also covered here, 7 00:00:17,020 --> 00:00:19,350 you're welcome to use the attachment 8 00:00:19,350 --> 00:00:20,560 you find on this lecture 9 00:00:20,560 --> 00:00:25,370 to get this same project snapshot as you see it here for me, 10 00:00:25,370 --> 00:00:26,740 and then you should also be able 11 00:00:26,740 --> 00:00:30,680 to click these Edit buttons here and get this overlay 12 00:00:30,680 --> 00:00:34,043 by default without any value in the input though. 13 00:00:34,930 --> 00:00:38,410 Now we wanna make sure that when we enter something here, 14 00:00:38,410 --> 00:00:40,150 and we then click Confirm, 15 00:00:40,150 --> 00:00:44,690 we don't have that default browser mechanism 16 00:00:44,690 --> 00:00:48,560 of trying to send HTTP request to some server, 17 00:00:48,560 --> 00:00:50,340 which is the default. 18 00:00:50,340 --> 00:00:53,900 But instead, I wanna prevent that default 19 00:00:53,900 --> 00:00:57,240 and handle that submission with JavaScript, 20 00:00:57,240 --> 00:01:00,230 read that value with JavaScript, 21 00:01:00,230 --> 00:01:03,963 and then use that value to set the player names here. 22 00:01:05,260 --> 00:01:08,903 And doing all of that is far easier than it might sound. 23 00:01:09,950 --> 00:01:12,320 The first thing we have to do 24 00:01:12,320 --> 00:01:17,320 is get access to our form element that we have here 25 00:01:17,340 --> 00:01:19,713 because it's this form that will be submitted. 26 00:01:20,580 --> 00:01:23,350 Now, we can select this by id, 27 00:01:23,350 --> 00:01:26,670 we can select it by HTML element. 28 00:01:26,670 --> 00:01:30,110 And since I only selected by id up to this point, 29 00:01:30,110 --> 00:01:31,730 and I also wanna practice 30 00:01:31,730 --> 00:01:34,700 the other variance of selecting elements, 31 00:01:34,700 --> 00:01:37,393 I will actually now select these differently here. 32 00:01:38,250 --> 00:01:40,750 I'll add a new constant here in app.js, 33 00:01:40,750 --> 00:01:42,830 which is where I gather 34 00:01:42,830 --> 00:01:45,880 all these elements we have on the page 35 00:01:45,880 --> 00:01:48,970 so that we can use them in the other JavaScript files 36 00:01:48,970 --> 00:01:50,290 because I'm splitting my code 37 00:01:50,290 --> 00:01:54,540 across multiple JavaScript files here for readability. 38 00:01:54,540 --> 00:01:59,140 And in app.js, I will now get my form element 39 00:01:59,140 --> 00:02:01,350 by using document.querySelector 40 00:02:02,530 --> 00:02:04,960 and then I'll select the first form element 41 00:02:04,960 --> 00:02:06,530 which I find on this page, 42 00:02:06,530 --> 00:02:08,990 which in this application, in this website, 43 00:02:08,990 --> 00:02:12,170 is the only form element I have. 44 00:02:12,170 --> 00:02:15,300 So that's the element to which we now store a reference 45 00:02:15,300 --> 00:02:17,850 in this formElement constant. 46 00:02:17,850 --> 00:02:20,100 And now just as we added click listeners 47 00:02:20,100 --> 00:02:21,940 on our elements before, 48 00:02:21,940 --> 00:02:24,380 we can now also use this formElement 49 00:02:24,380 --> 00:02:27,010 and add an event listener on that, 50 00:02:27,010 --> 00:02:29,910 but now it won't be a click listener. 51 00:02:29,910 --> 00:02:31,770 And that's, by the way, important. 52 00:02:31,770 --> 00:02:34,550 I add a listener on the overall form. 53 00:02:34,550 --> 00:02:37,920 I'm not adding a listener on the Submit button. 54 00:02:37,920 --> 00:02:40,490 We could also do that and make it work 55 00:02:40,490 --> 00:02:42,240 by listening to this button, 56 00:02:42,240 --> 00:02:44,980 but the thing that technically happens 57 00:02:44,980 --> 00:02:47,150 when that Submit button is pressed 58 00:02:47,150 --> 00:02:49,540 is that the form is submitted, 59 00:02:49,540 --> 00:02:51,900 and I'm fine with that happening. 60 00:02:51,900 --> 00:02:54,030 It's just this submit event 61 00:02:54,030 --> 00:02:56,980 which I now wanna capture with JavaScript 62 00:02:56,980 --> 00:03:00,080 and handle in JavaScript. 63 00:03:00,080 --> 00:03:01,640 And for this here, 64 00:03:01,640 --> 00:03:05,120 I actually add an event listener to the form itself, 65 00:03:05,120 --> 00:03:08,520 and it's the submit event which is a built-in event 66 00:03:08,520 --> 00:03:11,740 in the browser available in JavaScript 67 00:03:11,740 --> 00:03:13,623 to which I wanna add a listener. 68 00:03:14,950 --> 00:03:18,580 And then in config.js, which is the JavaScript file 69 00:03:18,580 --> 00:03:22,830 that holds all my logic related to player configuration, 70 00:03:22,830 --> 00:03:25,780 I'll add a new function that should be executed 71 00:03:25,780 --> 00:03:28,760 if that submit event is fired, 72 00:03:28,760 --> 00:03:30,787 which I'll name savePlayerConfig 73 00:03:33,690 --> 00:03:35,020 like that. 74 00:03:35,020 --> 00:03:38,690 And it's now this function which I wanna use in app.js. 75 00:03:38,690 --> 00:03:40,820 So as a second-parameter value, 76 00:03:40,820 --> 00:03:42,370 I'll point at savePlayerConfig. 77 00:03:45,090 --> 00:03:48,650 Now, this function here will be executed 78 00:03:48,650 --> 00:03:50,423 when the form is submitted. 79 00:03:52,000 --> 00:03:53,620 And now the interesting thing 80 00:03:53,620 --> 00:03:55,550 will be what we do in this function, 81 00:03:55,550 --> 00:03:58,510 and there are all kinds of things I wanna do. 82 00:03:58,510 --> 00:04:01,520 I wanna get the entered value. 83 00:04:01,520 --> 00:04:03,990 I wanna briefly validate it 84 00:04:03,990 --> 00:04:06,700 and check that it's a valid value. 85 00:04:06,700 --> 00:04:09,670 But most importantly, for a start, 86 00:04:09,670 --> 00:04:13,990 I wanna prevent the default behavior of the browser 87 00:04:13,990 --> 00:04:16,209 because, keep in mind, the default behavior 88 00:04:16,209 --> 00:04:18,149 is that if I click Confirm, 89 00:04:18,149 --> 00:04:22,670 the browser tries to send a HTTP request to a server, 90 00:04:22,670 --> 00:04:24,680 in this case to our development server 91 00:04:24,680 --> 00:04:26,450 which is serving this page, 92 00:04:26,450 --> 00:04:29,730 and the browser tries to send the data there. 93 00:04:29,730 --> 00:04:31,600 That's why this page reloads 94 00:04:31,600 --> 00:04:34,040 because the development server gets this request 95 00:04:34,040 --> 00:04:36,110 and just returns the page 96 00:04:36,110 --> 00:04:39,050 because it doesn't know anything else to do. 97 00:04:39,050 --> 00:04:42,960 Now we'll talk about handling form data on the server 98 00:04:42,960 --> 00:04:44,410 later in the course 99 00:04:44,410 --> 00:04:47,470 when we dive into writing custom backend code. 100 00:04:47,470 --> 00:04:49,960 At the moment, we don't know how to do that. 101 00:04:49,960 --> 00:04:53,350 And this is a browser-based game anyways. 102 00:04:53,350 --> 00:04:56,400 Hence, I wanna prevent that default behavior 103 00:04:56,400 --> 00:05:00,730 and ensure that the browser does not try to send a request 104 00:05:00,730 --> 00:05:03,220 to some server, which doesn't exist here, 105 00:05:03,220 --> 00:05:07,170 and instead handle that with just JavaScript. 106 00:05:07,170 --> 00:05:09,890 And preventing that default is possible 107 00:05:09,890 --> 00:05:14,240 with help of that event object which we get automatically 108 00:05:14,240 --> 00:05:19,190 in functions that are executed because of an event. 109 00:05:19,190 --> 00:05:23,270 And savePlayerConfig will be executed because of an event 110 00:05:23,270 --> 00:05:28,050 because we bind it here with addEventListener. 111 00:05:28,050 --> 00:05:30,290 Then you'll learn we get an event object 112 00:05:30,290 --> 00:05:33,470 that describes the event automatically. 113 00:05:33,470 --> 00:05:36,300 And this event object happens to have 114 00:05:36,300 --> 00:05:40,523 a preventDefault method which we can execute. 115 00:05:42,120 --> 00:05:45,210 You can always console.log that event 116 00:05:45,210 --> 00:05:46,810 to see what's inside of it, 117 00:05:46,810 --> 00:05:50,370 inside of that automatically generated event object. 118 00:05:50,370 --> 00:05:53,380 And I can tell you that one thing that's inside of it 119 00:05:53,380 --> 00:05:56,020 is this preventDefault method. 120 00:05:56,020 --> 00:05:59,080 And this method does what the name implies. 121 00:05:59,080 --> 00:06:01,860 It prevents the browser default behavior 122 00:06:01,860 --> 00:06:04,050 of sending a request automatically. 123 00:06:04,050 --> 00:06:06,480 It avoids that this happens. 124 00:06:06,480 --> 00:06:09,480 And that's important because that allows us 125 00:06:09,480 --> 00:06:13,150 to handle that form submission in JavaScript. 126 00:06:13,150 --> 00:06:16,110 Without that, the request would be sent, 127 00:06:16,110 --> 00:06:19,020 and that would cause a page reload. 128 00:06:19,020 --> 00:06:21,120 Now, whenever the page reloads, 129 00:06:21,120 --> 00:06:23,940 the entire page is executed again, 130 00:06:23,940 --> 00:06:27,080 and hence the JavaScript code is executed again. 131 00:06:27,080 --> 00:06:31,810 So our old running game is simply finished, 132 00:06:31,810 --> 00:06:33,620 and the page is reloaded. 133 00:06:33,620 --> 00:06:36,490 So we can't handle the submission with JavaScript 134 00:06:36,490 --> 00:06:38,143 if we reload the page. 135 00:06:39,060 --> 00:06:41,110 Therefore, we need to prevent the default. 136 00:06:41,110 --> 00:06:43,140 And with that in the next steps, 137 00:06:43,140 --> 00:06:45,590 we can then get the entered data 138 00:06:45,590 --> 00:06:47,403 and then continue with that. 139 00:06:48,390 --> 00:06:49,740 So if I now save this 140 00:06:49,740 --> 00:06:53,870 with just this line of code added in savePlayerConfig, 141 00:06:53,870 --> 00:06:57,460 if you reload, click Edit and click Confirm, 142 00:06:57,460 --> 00:07:00,350 you'll notice that now nothing happens, 143 00:07:00,350 --> 00:07:04,630 which is good because that means the page doesn't reload. 144 00:07:04,630 --> 00:07:06,340 And therefore, now as a next step, 145 00:07:06,340 --> 00:07:10,800 we can see how we can extract data from that form 146 00:07:10,800 --> 00:07:14,793 and then also validate that data and so on. 147 00:07:15,660 --> 00:07:19,450 Now we prevent the default when submitting the form, 148 00:07:19,450 --> 00:07:22,650 and hence we no longer reload the page. 149 00:07:22,650 --> 00:07:26,499 Now as a next step, let's make sure we actually also extract 150 00:07:26,499 --> 00:07:30,320 the value that was submitted here. 151 00:07:30,320 --> 00:07:32,740 And for this, we got another new feature 152 00:07:32,740 --> 00:07:34,340 which we haven't seen before 153 00:07:34,340 --> 00:07:36,390 which makes handling form submission 154 00:07:36,390 --> 00:07:40,470 with browser-side JavaScript extremely simple. 155 00:07:40,470 --> 00:07:43,950 We can add a formData constant, 156 00:07:43,950 --> 00:07:46,850 and this constant should hold an object. 157 00:07:46,850 --> 00:07:50,350 Now, up to this point, we learned that we can create objects 158 00:07:50,350 --> 00:07:54,650 by using these curly braces, and this is true. 159 00:07:54,650 --> 00:07:56,570 But there also is another way 160 00:07:56,570 --> 00:07:58,780 of building objects in JavaScript 161 00:07:58,780 --> 00:08:02,610 at which we'll also have a closer look later in the course 162 00:08:02,610 --> 00:08:07,110 which involves a special keyword, the new keyword, 163 00:08:07,110 --> 00:08:11,230 and then the execution of a function, so to say, 164 00:08:11,230 --> 00:08:14,630 in this case a built-in function which is made available 165 00:08:14,630 --> 00:08:17,730 directly in JavaScript in the browser, 166 00:08:17,730 --> 00:08:20,313 and that's the FormData function. 167 00:08:21,440 --> 00:08:25,510 This here, what we're doing here with new FormData, 168 00:08:25,510 --> 00:08:29,090 is called instantiating an object 169 00:08:29,090 --> 00:08:32,440 based on an object blueprint. 170 00:08:32,440 --> 00:08:35,320 A FormData basically is a function that knows 171 00:08:35,320 --> 00:08:39,280 how to generate objects that have a certain shape. 172 00:08:39,280 --> 00:08:41,059 We can use such blueprints 173 00:08:41,059 --> 00:08:44,910 by executing these blueprint functions as functions 174 00:08:44,910 --> 00:08:47,633 and adding the new keyword in front of them. 175 00:08:48,540 --> 00:08:51,220 Now, we'll learn how to write our own blueprints 176 00:08:51,220 --> 00:08:53,490 later in the course once we need that, 177 00:08:53,490 --> 00:08:56,193 but this is how we can use this built-in blueprint. 178 00:08:57,140 --> 00:09:00,040 And FormData is a built-in blueprint 179 00:09:00,040 --> 00:09:02,530 that actually takes a form, 180 00:09:02,530 --> 00:09:06,050 so a pointer at a form HTML element, 181 00:09:06,050 --> 00:09:08,490 and will then automatically extract 182 00:09:08,490 --> 00:09:13,343 values entered into inputs in that form for us. 183 00:09:14,410 --> 00:09:19,410 So for this, we can pass event.target as a value to FormData 184 00:09:20,200 --> 00:09:22,730 because, as you learned before in this course, 185 00:09:22,730 --> 00:09:26,390 this event object, which describes the event that occurred, 186 00:09:26,390 --> 00:09:31,390 has a target property that points at the HTML element 187 00:09:32,020 --> 00:09:35,300 that was responsible for this event. 188 00:09:35,300 --> 00:09:36,450 And that's the form here 189 00:09:36,450 --> 00:09:38,590 because it's the form that was submitted, 190 00:09:38,590 --> 00:09:42,473 and we are listening to the submit event on that form here. 191 00:09:43,940 --> 00:09:48,940 And by passing a pointer at this form element to FormData, 192 00:09:49,170 --> 00:09:54,100 JavaScript behind the scenes will analyze this form here, 193 00:09:55,180 --> 00:09:58,440 and it will automatically look for inputs in there. 194 00:09:58,440 --> 00:10:00,420 However, not just any inputs, 195 00:10:00,420 --> 00:10:03,360 instead, inputs that have a name field 196 00:10:03,360 --> 00:10:06,200 and also not just input elements like this. 197 00:10:06,200 --> 00:10:09,360 We could also have a dropdown with select 198 00:10:09,360 --> 00:10:13,970 just as you learned in the forms section of this course. 199 00:10:13,970 --> 00:10:15,860 Here it is input element, though, 200 00:10:15,860 --> 00:10:19,270 but, very important, it has a name attribute, 201 00:10:19,270 --> 00:10:22,660 and therefore it will be picked up by FormData 202 00:10:22,660 --> 00:10:25,943 if we pass that overall form to FormData. 203 00:10:26,798 --> 00:10:29,382 And then we can get access to the value 204 00:10:29,382 --> 00:10:32,137 that was identified by FormData 205 00:10:32,137 --> 00:10:35,642 with help of the value we've defined here 206 00:10:35,642 --> 00:10:37,648 on this name attribute. 207 00:10:37,648 --> 00:10:41,360 So that is an identifier by which we will be able 208 00:10:41,360 --> 00:10:43,853 to get access to the entered input value. 209 00:10:45,530 --> 00:10:47,960 And therefore, here in savePlayerConfig, 210 00:10:47,960 --> 00:10:52,960 we can get the enteredPlayername by using formData 211 00:10:53,000 --> 00:10:57,160 and now not the dot notation but a special method 212 00:10:57,160 --> 00:11:00,480 that's available on this formData object. 213 00:11:00,480 --> 00:11:02,770 And that's why this is a blueprint 214 00:11:02,770 --> 00:11:06,110 so that it has the logic for parsing that form 215 00:11:06,110 --> 00:11:10,170 and so that it has a couple of built-in methods, 216 00:11:10,170 --> 00:11:11,833 in this case the get method. 217 00:11:12,670 --> 00:11:17,670 get allows us to get a value of one of our inputs. 218 00:11:18,020 --> 00:11:21,450 And here we pass a string with the identifier 219 00:11:21,450 --> 00:11:25,750 of the input element of which we wanna get the value. 220 00:11:25,750 --> 00:11:29,340 And these are the values provided for the name attributes 221 00:11:29,340 --> 00:11:30,670 that we can enter there. 222 00:11:30,670 --> 00:11:33,070 So in this case playername is the value 223 00:11:33,070 --> 00:11:35,270 provided to the name attribute, 224 00:11:35,270 --> 00:11:40,200 so playername is what we pass as a string to get. 225 00:11:40,200 --> 00:11:41,090 And this will give us 226 00:11:41,090 --> 00:11:45,053 the value entered into the input with that name, 227 00:11:46,200 --> 00:11:47,440 and that's then our enteredPlayername, 228 00:11:47,440 --> 00:11:50,980 so I stored this in a separate constant. 229 00:11:50,980 --> 00:11:52,270 And I'm using a constant 230 00:11:52,270 --> 00:11:54,640 because I don't plan on overwriting 231 00:11:54,640 --> 00:11:56,140 the value stored in here. 232 00:11:56,140 --> 00:11:59,070 Instead, I'll extract it once and keep it stored in here, 233 00:11:59,070 --> 00:12:00,973 hence using a constant is great. 234 00:12:02,670 --> 00:12:06,090 And with that, we now got hold of what the user entered. 235 00:12:06,090 --> 00:12:08,070 And to see that that worked, 236 00:12:08,070 --> 00:12:11,903 for the moment, I'll just console.log enteredPlayername, 237 00:12:13,830 --> 00:12:16,893 save everything and open the Developer Tools here. 238 00:12:18,120 --> 00:12:20,120 And with that, 239 00:12:20,120 --> 00:12:24,290 if I now click Edit and enter Max here and click Confirm, 240 00:12:24,290 --> 00:12:27,563 I see Max here in my Console. 241 00:12:28,610 --> 00:12:30,760 We're not closing the modal yet, 242 00:12:30,760 --> 00:12:33,220 and we're not doing anything with that value yet, 243 00:12:33,220 --> 00:12:35,810 but I can see it here. 244 00:12:35,810 --> 00:12:37,890 So extracting that value works, 245 00:12:37,890 --> 00:12:40,340 and that was the other new concept 246 00:12:40,340 --> 00:12:42,740 that I wanted to introduce here: 247 00:12:42,740 --> 00:12:46,640 how we can use these object blueprints like FormData 248 00:12:46,640 --> 00:12:49,270 and why we're using this here. 249 00:12:49,270 --> 00:12:52,360 Now, this new concept can, of course, be confusing 250 00:12:52,360 --> 00:12:57,110 since thus far, we haven't really used these blueprints. 251 00:12:57,110 --> 00:13:00,380 And you might wonder how do you know which blueprints 252 00:13:00,380 --> 00:13:03,210 for which kind of objects are available, 253 00:13:03,210 --> 00:13:07,250 and why do we not simply build this object on our own? 254 00:13:07,250 --> 00:13:08,780 Well, we don't build it on our own 255 00:13:08,780 --> 00:13:10,660 because we could do that, 256 00:13:10,660 --> 00:13:15,240 but we then have to write the logic for parsing the form, 257 00:13:15,240 --> 00:13:17,150 which is stored in event.target, 258 00:13:17,150 --> 00:13:20,000 and for extracting all the data on our own, 259 00:13:20,000 --> 00:13:22,920 and that's what FormData does for us. 260 00:13:22,920 --> 00:13:24,410 Now, regarding the question 261 00:13:24,410 --> 00:13:28,410 which object blueprints are available in the browser, 262 00:13:28,410 --> 00:13:30,650 you can use sources like MDN 263 00:13:30,650 --> 00:13:34,610 to get an overview of all the available capabilities 264 00:13:34,610 --> 00:13:36,590 that are built into the browser. 265 00:13:36,590 --> 00:13:39,710 If you have a look at the Web APIs page here, 266 00:13:39,710 --> 00:13:43,150 you basically find a list of all the core features 267 00:13:43,150 --> 00:13:46,540 that you can use in JavaScript in the browser. 268 00:13:46,540 --> 00:13:48,870 But whilst this list here looks quite long, 269 00:13:48,870 --> 00:13:52,310 I will say that a lot of the features here are experimental 270 00:13:52,310 --> 00:13:55,770 and not really supported by most browsers, 271 00:13:55,770 --> 00:13:58,830 or only parts of these features are supported, 272 00:13:58,830 --> 00:14:02,060 some features are not to be used anymore, 273 00:14:02,060 --> 00:14:04,930 and not all these features are made available 274 00:14:04,930 --> 00:14:09,510 as object blueprints that you create with the new keyword. 275 00:14:09,510 --> 00:14:11,400 Instead, for example, you also find 276 00:14:11,400 --> 00:14:13,590 the DOM functionality here, 277 00:14:13,590 --> 00:14:15,600 which we, of course, already used a lot 278 00:14:15,600 --> 00:14:17,550 with the document object 279 00:14:17,550 --> 00:14:19,740 with the built-in document variable 280 00:14:19,740 --> 00:14:22,640 that we can use anywhere in our code. 281 00:14:22,640 --> 00:14:25,150 So such things are included here as well, 282 00:14:25,150 --> 00:14:27,080 and you definitely should not learn 283 00:14:27,080 --> 00:14:28,620 a list like this by heart, 284 00:14:28,620 --> 00:14:30,770 but instead, you can use it as a reference 285 00:14:30,770 --> 00:14:32,400 to look up things. 286 00:14:32,400 --> 00:14:35,000 But throughout this course and in general, 287 00:14:35,000 --> 00:14:38,610 as a web developer, as you work on more and more projects, 288 00:14:38,610 --> 00:14:42,610 you will see the common and most important web capabilities 289 00:14:42,610 --> 00:14:44,620 and functionalities that you can use, 290 00:14:44,620 --> 00:14:49,180 and you'll see important object blueprints like FormData 291 00:14:49,180 --> 00:14:52,480 which we did use in this course section. 292 00:14:52,480 --> 00:14:54,860 So as everything in programming, 293 00:14:54,860 --> 00:14:57,440 this is all the question of experience 294 00:14:57,440 --> 00:14:59,850 which you simply gain by building things 295 00:14:59,850 --> 00:15:02,070 and by, of course, advancing with this course 296 00:15:02,070 --> 00:15:04,270 because we'll also see more examples 297 00:15:04,270 --> 00:15:05,913 and functionalities there.