WEBVTT

0
00:15.180 --> 00:16.180
Let me close this Console.

1
00:16.290 --> 00:21.630
Let's jump back to our text editor. And how would we go about coding this JavaScript? Well, if you've...

2
00:21.630 --> 00:22.330
done my JavaScript...

3
00:22.350 --> 00:26.370
course, you'll know that all JavaScript has to be placed in this <script> tag.

4
00:26.910 --> 00:31.320
And I basically want us to go through the same steps that we did in the console, but now in our file.

5
00:31.980 --> 00:35.550
So first, I want us to, let's use the standard

6
00:36.590 --> 00:40.040
window object to grab our URL 

7
00:41.530 --> 00:42.210
query string. 

8
00:44.600 --> 00:45.950
And remember what we did there?

9
00:46.160 --> 00:53.540
We defined that query string into a variable. We called it urlParams. Actually, I prefer to call it...

10
00:53.540 --> 00:56.010
queryString because that's what we are getting.

11
00:56.030 --> 00:57.740
This was returned to us by this method.

12
00:57.920 --> 01:00.800
So let's just call it into a new variable now called queryString.

13
01:02.010 --> 01:07.080
And remember, it's on our window object. On that we've got another object called location, and on that...

14
01:07.080 --> 01:12.240
we've got our URL "search" parameter object, our property, and that gives us the query string.

15
01:12.840 --> 01:13.380
So there we go.

16
01:13.390 --> 01:14.400
We've got the query string.

17
01:15.150 --> 01:15.990
What's the next step 🤷‍♂️?

18
01:16.200 --> 01:16.770
That's right.

19
01:16.770 --> 01:20.040
We're going to be using the URLSearchParams API. 

20
01:21.390 --> 01:27.600
Let's use the URLSearchParams API. And remember, this is important...

21
01:28.320 --> 01:30.720
this is not JavaScript.

22
01:31.260 --> 01:36.090
It's provided to us by the Browser API.

23
01:37.080 --> 01:41.240
A lot of people think it's JavaScript, it's not, but funny enough, you kind of have to use JavaScript...

24
01:41.240 --> 01:41.770
to use it.

25
01:42.080 --> 01:47.540
So,  they are very closely intertwined. Okay great, so let's define a new variable. 

26
01:47.660 --> 01:50.330
Let's call that variable the same as we did in the console now,

27
01:50.360 --> 01:52.430
urlParams.

28
01:52.790 --> 01:59.060
And of course, as I mentioned, in order to instantiate this object, we have to use the "new" keyword...

29
01:59.060 --> 02:02.830
in JavaScript. And the object's called URLSearchParams.

30
02:02.840 --> 02:05.600
And you can see the IDE has already given it to us.

31
02:06.020 --> 02:09.380
So it really is simple. And we're passing it in the queryString,

32
02:10.550 --> 02:10.980
right.

33
02:11.000 --> 02:12.660
So now we've got our urlParams. 

34
02:12.680 --> 02:13.660
What is the final step?

35
02:13.670 --> 02:15.710
Well that's right. The final step is...

36
02:17.030 --> 02:21.800
let's grab our first name variable, via the get() method.

37
02:22.790 --> 02:28.960
So here we can define a new variable called firstName, and we know it's going to be in the urlParams...

38
02:28.970 --> 02:33.590
that we've just created. And there's a method on there called get(), as we just saw.

39
02:33.650 --> 02:39.110
And we know we want to get the query string variables value, where the variable names'...

40
02:39.360 --> 02:41.110
value is "fname". 

41
02:41.420 --> 02:43.490
Remember, we defined our variable as "fname".

42
02:43.490 --> 02:46.220
If we go to our index file, there we go. 

43
02:46.460 --> 02:51.020
We've defined the variable's name, as fname. And that's the value we want to get.

44
02:52.290 --> 02:55.660
Which is exactly why we have "fname" here.

45
02:56.440 --> 02:58.620
Whew. Okay. There we go. We've got it right.

46
02:58.700 --> 03:00.950
So we've put it into a variable called firstName.

47
03:00.960 --> 03:01.830
I can prove it to you.

48
03:02.170 --> 03:05.460
Let's just console log 'fname' to the console.

49
03:06.000 --> 03:07.660
Let's go to our browser. Let's go back. 

50
03:09.220 --> 03:16.230
Open up our Console, let's click the "submit" button. 
(sad trombone 📯 sound). 
"fname" is not defined 😳!

51
03:16.830 --> 03:17.960
Oh sorry, why is that?

52
03:18.400 --> 03:20.230
Let's go back to our coding editor...fname...

53
03:20.530 --> 03:20.950
Sorry,

54
03:21.910 --> 03:26.950
firstName we called it. Let's go back to our browser, let's go back. Let's just clear everything.

55
03:27.100 --> 03:28.030
Get rid of all the noise.

56
03:28.870 --> 03:37.770
Submit "Gerald". There we go! (oh yeah)
We get "Gerald' to the screen. But like you can see our page still has "Hello Wally", 

57
03:37.960 --> 03:39.160
we want that to be dynamic.

58
03:39.520 --> 03:40.990
This is not a course about JavaScript...

59
03:41.020 --> 03:48.490
so I'm going to be very quick right now. A ll we have to do now is make the hello message dynamic.

60
03:49.240 --> 03:50.060
And how do we do this?

61
03:50.080 --> 03:51.660
Well, it's very simple and I'm going to be very quick.

62
03:51.670 --> 03:56.650
All we have to do is grab that <h1> element and then change it in the HTML text.

63
03:57.040 --> 03:58.630
That's all we have to do. 

64
03:58.630 --> 04:05.290
Firstly, I want to grab our heading tag and define that in a variable...

65
04:05.290 --> 04:06.130
document.getElementsByTagName().

66
04:07.780 --> 04:09.040
I know I'm going very quickly.

67
04:09.250 --> 04:14.590
The tag name is "h1", and if you've done my DOM course you'll know that getElementsByTagName() returns...

68
04:14.590 --> 04:16.120
an HTMLCollection. 

69
04:16.420 --> 04:20.880
And because there's only one H1 element in the document, we know it's the first item in the collection.

70
04:20.890 --> 04:25.240
To access that, that's why I'm using the index kind-of square-bracket [] notation.

71
04:25.690 --> 04:27.460
So now we know we've got our H1 tag.

72
04:27.910 --> 04:33.730
All we have to do then, is grab that heading tag, change its innerHTML, and I'm going to use template...

73
04:33.730 --> 04:39.580
literals here, to say hello, and we called our variable firstName.

74
04:40.940 --> 04:41.420
There we go.

75
04:41.900 --> 04:43.970
Let's save this, and let's see if it works.

76
04:44.000 --> 04:46.130
I hope so, otherwise I've done something stupid 🤦🏼‍♂️.

77
04:46.670 --> 04:49.380
So let's go to browser. So here we go, we are in the browser.

78
04:49.970 --> 04:54.790
Let's now type a name of "Wally The Second". 

79
04:55.070 --> 04:56.120
Let's submit this.
(click sound)

80
04:56.630 --> 04:57.170
"Hello Wally...

81
04:57.180 --> 04:57.920
The Second".

82
05:02.730 --> 05:08.550
This was kind-of a long lecture, but just remember, I wanted to show you how important that action

83
05:08.550 --> 05:14.340
attribute is. With the action attribute, we've just defined where we want the browser to send all the...

84
05:14.340 --> 05:15.020
form data.

85
05:15.690 --> 05:21.260
We've told it that we want it to send it to the front end, to a file called process.html. 

86
05:21.510 --> 05:28.560
We then used the browser API called URLSearchParams in order to get the query string from the

87
05:28.560 --> 05:28.990
URL. 

88
05:29.580 --> 05:33.910
We then used JavaScript with it, in order to access it and display it to the screen.

89
05:34.110 --> 05:36.200
Don't take all this information for granted.

90
05:36.210 --> 05:38.580
You really have learned a lot already.

91
05:38.850 --> 05:45.000
Don't worry if some things still confuse you, like why does the information occur in the URL, and you know, 

92
05:45.000 --> 05:47.070
is this safe? What about if the data is a password...

93
05:47.130 --> 05:49.920
for example? Don't worry, we're going to be getting into that...

94
05:49.920 --> 05:55.770
in this course. That's why I'm just trying to be as slow as possible, because it can get overwhelming.

95
05:56.040 --> 05:56.580
Don't worry.

96
05:56.580 --> 06:01.550
I'm going to be fulfilling all your, you know, your curiosities as we go on in the course.

97
06:01.650 --> 06:04.010
I really hope you're having as much fun as I am in this lecture.

98
06:04.470 --> 06:04.880
Really,

99
06:04.890 --> 06:05.270
I don't know why...

100
06:05.370 --> 06:06.960
I've just had a lot of fun putting it together.

101
06:07.080 --> 06:07.740
But we're not done.

102
06:07.920 --> 06:14.250
You know, now I want to talk about another very important attribute when it comes to forms, and that is the method

103
06:14.250 --> 06:14.760
attribute.

104
06:14.970 --> 06:19.420
And yes, this means we're going to be talking about why some of the form data is appended to the URL. 

105
06:20.220 --> 06:20.910
It's just weird.

106
06:20.970 --> 06:21.510
Just weird.

107
06:21.960 --> 06:23.870
I'm outa' here! It's too weird.