WEBVTT

0
00:00.290 --> 00:04.510
I've just got Visual Studio Code open here in front of me and I want to show you a quick example.

1
00:04.520 --> 00:12.620
Just remember that all modern browsers automatically encode spaces and special characters before transmitting

2
00:12.620 --> 00:15.140
the data over HTTP.

3
00:15.290 --> 00:21.770
However, for various reasons, sometimes this may not work and even worse I guess some of the very old

4
00:21.770 --> 00:28.340
browsers and web servers don't understand some special characters unless they are encoded in a very

5
00:28.340 --> 00:35.780
specific way. And even some very old browsers don't even encode spaces in their URL at all.

6
00:35.780 --> 00:43.490
And for these reasons you may explicitly want to encode or decode URL data using your preferred language.

7
00:43.490 --> 00:50.750
In JavaScript, it's the encodeURIComponent() method or the decodeURIComponent() if you're wanting

8
00:50.750 --> 00:52.730
to decode certain characters.

9
00:52.730 --> 00:56.990
But enough said, I want to quickly draw up some code with you and I want to show you what it looks

10
00:56.990 --> 00:57.620
like.

11
00:57.620 --> 00:58.820
Let's get into it.

12
00:59.130 --> 01:04.890
The first thing I want to do is obviously create an HTML document with a body. In here, 

13
01:04.890 --> 01:06.600
I don't even want to wrap this in a form.

14
01:06.600 --> 01:07.620
I don't even want to waste time.

15
01:07.620 --> 01:15.330
I just want to quickly go straight to a text input box, with a name attribute of ... let's call it, "message".

16
01:16.610 --> 01:19.910
ID can be "message" and let's give it a value,

17
01:21.650 --> 01:22.610
"hello world".

18
01:22.610 --> 01:25.790
But do you notice here I've got a space.

19
01:26.510 --> 01:28.070
I've done that very deliberately.

20
01:28.100 --> 01:29.480
Very, very deliberately.

21
01:30.020 --> 01:30.590
All right.

22
01:30.590 --> 01:36.350
And then, of course, we need a way to submit this to a server.

23
01:36.740 --> 01:40.010
And then here I want to go "URL Encode".

24
01:40.010 --> 01:41.900
I just want the button to have some meaning.

25
01:41.900 --> 01:43.760
So let's save this.

26
01:43.790 --> 01:46.130
Let's open up our server.

27
01:46.370 --> 01:47.030
There we go.

28
01:48.050 --> 01:49.040
Very, very simple.

29
01:49.310 --> 01:52.850
Now what I want to do, is I want to add an inline event listener.

30
01:52.850 --> 01:57.050
I know it's not the best way to do it, but really this is just a quick, quick example.

31
01:57.050 --> 02:02.540
I want to add a click event on this button and then I want to trigger our own code.

32
02:02.540 --> 02:06.200
So let's just define a function called urlencode().

33
02:07.980 --> 02:08.340
You know what,

34
02:08.340 --> 02:11.580
let me make this text editor bigger so you can see what we're doing.

35
02:11.580 --> 02:16.890
So all I've done is I've added an inline event listener called "onclick" to this button.

36
02:17.010 --> 02:22.050
And when it's clicked, this function - urlencode() - is going to execute.

37
02:22.080 --> 02:27.390
Then what I want to do is I want to create an empty paragraph for now, because I want to display our

38
02:27.390 --> 02:33.630
result in this paragraph. And let's just give it an ID of encodingResult.

39
02:34.230 --> 02:34.650
Okay.

40
02:34.650 --> 02:35.700
That's all I want to do.

41
02:35.970 --> 02:42.660
Now remember I said each programming language has their own methods and functions to give you more control

42
02:42.660 --> 02:43.690
about the encoding.

43
02:43.710 --> 02:49.530
Well, I want to use JavaScript right now. And JavaScript has to be wrapped within a <script> tag.

44
02:50.040 --> 02:54.240
And of course we need to define our function called "urlencode".

45
02:55.550 --> 02:59.810
If you're unsure about JavaScript, please check out my JavaScript entire series 🤩

46
03:00.140 --> 03:01.190
It's really fun.

47
03:01.400 --> 03:06.320
But anyway, the first thing I want to do is I want to grab our message data, right?

48
03:06.470 --> 03:10.610
And I'm going to be using the document object. On there, getElementById().

49
03:12.090 --> 03:14.640
We gave it an ID of message.

50
03:15.360 --> 03:19.140
And of course I don't want to get the actual element - I need its value.

51
03:19.170 --> 03:22.350
So let's put its value into a variable called "message".

52
03:22.530 --> 03:23.460
Okay, what's the next step?

53
03:23.460 --> 03:30.180
Well, the next step is I want us to use the JavaScript's encodeURIComponent() method. And that method

54
03:30.210 --> 03:31.290
takes an argument.

55
03:31.290 --> 03:35.640
The argument is the actual text, the actual value you want to encode.

56
03:35.880 --> 03:44.880
So here, let's define a new variable called encodedMessage, and that can just be assigned the value

57
03:44.880 --> 03:45.960
of what?

58
03:45.990 --> 03:53.580
Well, like I mentioned, let's use the encodeURIComponent() function in JavaScript and let's pass in the

59
03:53.580 --> 03:54.270
message.

60
03:54.270 --> 03:55.260
So that's all I want to do.

61
03:55.260 --> 04:00.450
And the next thing, in order to see this result on our page, I want to grab that paragraph,

62
04:00.630 --> 04:07.410
so getElementById(), and we gave it an ID of encodingResult.

63
04:08.190 --> 04:14.260
I just want to change its innerHTML to the encodedMessage. 

64
04:15.620 --> 04:17.040
Whew, this should work.

65
04:17.070 --> 04:18.470
So let's go back to the page.

66
04:19.820 --> 04:24.530
Let's click on this button and there you have it.

67
04:24.830 --> 04:29.930
That space has been encoded now to a %20.

68
04:30.080 --> 04:34.510
It's a special character, and that's exactly what that method does in JavaScript.

69
04:34.520 --> 04:35.030
Very cool,

70
04:35.030 --> 04:35.550
right?

71
04:35.570 --> 04:36.140
Awesome.

72
04:36.140 --> 04:38.180
Let's jump back into the lecture. Man, 

73
04:38.270 --> 04:38.840
I love this stuff 💕.

74
04:38.840 --> 04:39.750
Wasn't that cool?

75
04:39.770 --> 04:40.430
All right.

76
04:40.460 --> 04:42.380
Almost finished this lecture, I promise.

77
04:42.380 --> 04:44.720
I just want to quickly give a summary.

78
04:44.750 --> 04:46.780
So remember we had our URL.

79
04:46.790 --> 04:48.080
This is where it all began.

80
04:48.080 --> 04:52.610
I don't want you to get lost in all the detail. With a GET request, 

81
04:52.610 --> 05:02.030
t he data is inserted directly into the URL itself. And URLs, as we have seen, have to abide by certain

82
05:02.030 --> 05:02.660
rules,

83
05:02.660 --> 05:11.930
for instance the RFC 3987. And these rules, they say that a URL can only contain certain characters.

84
05:12.860 --> 05:18.650
Reserved characters like ? and =, they are not URL encoded

85
05:18.650 --> 05:20.670
if we don't use them ourselves.

86
05:20.700 --> 05:26.460
That's why when we submit a form, we see all these random characters appearing in our URL.

87
05:26.460 --> 05:32.220
It's because they are reserved. And it's just a way for the browser to separate out the different parts of

88
05:32.220 --> 05:32.850
our URL.

89
05:32.880 --> 05:40.140
But if we use our own special characters, like a space or a reserved character, then URL encoding

90
05:40.140 --> 05:41.190
has to take place.

91
05:41.190 --> 05:45.480
And traditionally URLs could only accept ASCII characters.

92
05:45.480 --> 05:53.310
But you know, browsers have beautified the address bar over the years and now we're able to see non-ASCII

93
05:53.340 --> 05:56.460
characters in there. Wow, I know, we've been through a lot.

94
05:56.490 --> 06:02.250
This entire section has been a bonus about why the URL looks like it does.

95
06:02.250 --> 06:06.450
I'm just trying to shed more light 💡 on this topic because it is very confusing.

96
06:06.450 --> 06:11.370
Not many developers know about it, and it is advanced. But I hope you've enjoyed it because that's the

97
06:11.370 --> 06:12.000
main thing.

98
06:12.000 --> 06:12.750
That's why we're here.

99
06:12.750 --> 06:17.400
We're here to have fun and we're here to really, really get better at programming.

100
06:17.400 --> 06:22.200
And you can only get better by truly understanding all the pieces of the puzzle 🧩.

101
06:22.200 --> 06:27.060
And when we're dealing with forms, whenever you use a GET request, all the form data is going to be

102
06:27.060 --> 06:31.020
appended to the URL, and you're going to be seeing weird characters.

103
06:31.020 --> 06:38.160
And that's why we've spent ... well that's why I've spent a whole session describing this URL encoding process.

104
06:38.160 --> 06:44.400
I hope it really has been useful to you and I can't wait to jump into the next section.

105
06:44.520 --> 06:45.480
See you soon.