WEBVTT 0 00:15.180 --> 00:21.480 And because we are defining this process.html file, we need to create one. So let's do that right now. 1 00:22.630 --> 00:26.710 Let's call it process.html, and what do we want to happen in this file? 2 00:27.010 --> 00:30.790 Well, let me just show you the file works, okay, before we get too complicated. 3 00:30.790 --> 00:37.840 So let's just create an HTML file, and I don't know, let's have obviously a <body>, and within the <body>, let's have a... 4 00:37.840 --> 00:40.510 heading, saying "Hello Wally". 5 00:41.750 --> 00:43.460 Okay, we save this... 6 00:44.520 --> 00:46.080 let's go back to our index file... 7 00:46.110 --> 00:46.810 so let's go back... 8 00:47.280 --> 00:55.260 let's now delete everything. Let's refresh the page. We know now we're starting from a clean slate. If now... 9 00:55.650 --> 00:57.330 okay, we type "Wally"... 10 00:58.080 --> 01:03.000 and we click submit, we get our process.html file. 11 01:03.000 --> 01:04.440 The browser knows where to find it. 12 01:04.680 --> 01:06.950 But can you see a flaw with what we've just done 🤔? 13 01:08.330 --> 01:17.240 I'm sure you can. If we go back and I type the name, I don't know, Gerald, and we submit that, we're always... 14 01:17.240 --> 01:18.740 getting the same, "Hello Wally". 15 01:18.740 --> 01:22.320 In other words, we haven't used that form data in any way 😳. 16 01:22.850 --> 01:23.810 How do we do that? 17 01:24.170 --> 01:25.130 Another great question. 18 01:25.530 --> 01:29.640 Let's go back to our Visual Studio Code, and you can see here we've hard-coded Wally. 19 01:29.660 --> 01:30.940 We don't want that to happen. 20 01:31.160 --> 01:32.870 We want this to kind of be dynamic. 21 01:33.050 --> 01:36.860 And let me just say straight off the bat that there are many ways to do this in coding. 22 01:37.220 --> 01:41.360 And later in the course, we're going to be coding up some server side code so you can see how that... 23 01:41.510 --> 01:41.930 works. 24 01:42.140 --> 01:43.850 But for now, we're just dealing with front end. 25 01:43.850 --> 01:45.920 We're just sending this to an html document. 26 01:46.100 --> 01:48.080 In other words, we sending it just to the browser. 27 01:48.410 --> 01:52.520 So we need a way to make that dynamic. In order for that to happen... 28 01:52.760 --> 01:53.510 you guessed it... 29 01:53.510 --> 01:54.460 we need JavaScript. 30 01:54.740 --> 01:58.840 We've always had access to the URL parameters with JavaScript. 31 01:59.060 --> 02:02.030 We've got the Window object. On that, we've got the "location" property. 32 02:02.030 --> 02:05.240 And on that, we've got the "search" property and that will give us the URL parameters. 33 02:05.630 --> 02:06.460 Let me show you what I mean. 34 02:06.470 --> 02:09.360 So let's go back to the browser, let's inspect this document... 35 02:09.380 --> 02:10.340 let's go to the Console. 36 02:12.160 --> 02:17.410 And as I mentioned, we've got this window object 😬. If you don't know what the window object is, please... 37 02:17.410 --> 02:21.850 check out my DOM course - it really does go into detail about what the DOM is. 38 02:22.000 --> 02:27.640 Anyway, we've got this window object, which is a global object provided to us by the browser automatically 39 02:27.880 --> 02:32.620 and there are a whole lot of properties and functions and methods associated on this window object. 40 02:32.620 --> 02:37.030 One property is called location. 41 02:37.930 --> 02:42.550 And on this location, it's also an object, there's another property called search. 42 02:43.580 --> 02:46.130 I'm not typing properly ... search. 43 02:47.750 --> 02:55.730 If we return that, we see that we get our URL value. We get our variable name, fname, and we get... 44 02:55.730 --> 02:59.570 the value itself, which is Gerald. Okay, cool, that's all good and well... 45 02:59.570 --> 03:02.570 but how do we actually get just that name part - the "Gerlad"? 46 03:03.380 --> 03:08.780 Well, traditionally, we had to go and use complicated parsing techniques to parse the string itself... 47 03:08.780 --> 03:09.540 and get the value. 48 03:09.770 --> 03:19.340 Buuuut, after years of ugly string parsing, we now have an awesome API called URLSearchParams() 🥳. 49 03:19.880 --> 03:22.730 And what does that mean? Well, the name gives it away. 50 03:22.880 --> 03:29.000 We're looking at the URL, and we're searching through its parameters. And it's an awesome API because it just... 51 03:29.000 --> 03:32.100 basically allows us to extract whatever we want from the URL. 52 03:32.240 --> 03:36.770 It really is neat. And I don't really want to get into detail on this API for the moment, but just realize... 53 03:36.770 --> 03:43.010 it does give us a lot of power 💪. We can extract just values, name:value pairs, etc etc. So it isn't... 54 03:43.010 --> 03:46.770 difficult to use, but we're going to be using the get method on this API. 55 03:46.910 --> 03:48.110 We haven't defined it. 56 03:48.170 --> 03:53.480 I haven't defined it. It's provided to us straight out of the box by the browsers, so it's really cool. 57 03:53.510 --> 03:58.660 Let me show you how we use it, um, well actually let me use it here before we code it in Visual Studio Code. 58 03:58.880 --> 04:01.690 So what do I want to do first? Well, first I want to get our URL. 59 04:01.910 --> 04:07.520 So let's put it into a variable called urlText, for lack of a better word ... urlVariables... 60 04:07.950 --> 04:08.870 should we just say that? 61 04:09.380 --> 04:10.910 And that is going to be what we've just done... 62 04:11.060 --> 04:13.160 "window.location.search"... 63 04:13.190 --> 04:19.460 okay, so we're basically just putting all of our form data into this variable called urlVariables. 64 04:19.610 --> 04:21.080 And what do I want to do now? 65 04:21.590 --> 04:29.240 Now I want us to use this URLSearchParams API. And in order to use it, we have to instantiate it. 66 04:29.390 --> 04:31.040 That's just a fancy developer word... 67 04:31.190 --> 04:32.650 that means "create it". 68 04:32.900 --> 04:37.010 And in order to do that in JavaScript, we have to use the "new" keyword. 69 04:37.730 --> 04:44.060 So let's define a new variable called urlParams, because we're wanting to get the URL parameters... 70 04:44.060 --> 04:44.810 into a variable. 71 04:45.140 --> 04:49.340 And like I said, we have to use the "new" keyword and let's use this API. 72 04:49.340 --> 04:50.400 And this is the cool thing. 73 04:50.660 --> 04:51.230 Look at this. 74 04:51.680 --> 04:53.840 You can already see the IDE here... 75 04:53.840 --> 04:58.670 the console in the browser, has given us this URLSearchParams keyword. 76 04:58.760 --> 05:00.290 I haven't typed anything. 77 05:00.290 --> 05:01.670 I haven't coded this myself. 78 05:01.880 --> 05:06.260 This is provided to us by the browser. And it takes arguments. 79 05:06.270 --> 05:12.830 The argument that we need to give it is the URL string, the query string, or what... 80 05:12.830 --> 05:17.290 we've defined it as, in a variable called urlVariables. And that's all there is to it... 81 05:17.300 --> 05:21.740 my dear students,. We've literally now used this API and we've got all the URL parameters. 82 05:21.740 --> 05:27.520 If I console this out, you can see that we get this weird object, right? 83 05:27.560 --> 05:28.850 So it doesn't ... it's not enough. 84 05:28.850 --> 05:33.350 We need to do something else. And remember I said that there are many different methods and properties on... 85 05:33.350 --> 05:34.360 this actual object. 86 05:35.090 --> 05:36.160 Well, you can open it up. 87 05:36.160 --> 05:37.790 You can see. If we open its __proto__... 88 05:37.790 --> 05:44.420 we've got get() methods, we've got keys(), we've got values(), we've got entries(), etc etc. 89 05:44.420 --> 05:46.400 So it is really powerful, this API. 90 05:46.610 --> 05:48.800 I just want us to use the get() method. 91 05:49.190 --> 05:55.010 So we call our urlParams, we can just get(). And what do we want to get? Well, we want to get the... 92 05:55.010 --> 05:56.870 first name and... 93 06:00.140 --> 06:02.990 BOOMSHAKALAKA 💥. (sound effect: mission completed) There we go. We've got our name... 94 06:02.990 --> 06:08.600 Gerald. This is just a very long way to show you how we can get the name. Now that we know how to get... 95 06:08.600 --> 06:11.290 the name, let's display it onto the screen. 96 06:11.780 --> 06:18.110 I just want to mention, though, can you see how important it is for the front end developers and the... 97 06:18.110 --> 06:19.700 back end developers to communicate? 98 06:19.790 --> 06:26.870 Because when we use this get() method, we have to know the name of the URL variable. 99 06:27.140 --> 06:32.360 We have to know the name that we sending to the server, in this case sending to the front end - "fname". 100 06:32.720 --> 06:38.900 So it's just a lot easier if frontend and backend are communicating to each other. It just makes our life a lot 101 06:38.900 --> 06:39.250 easier. 102 06:39.400 --> 06:41.260 Everyone just knows what the variable names are called. 103 06:41.500 --> 06:42.200 It's pretty handy. (background music starts)