1 00:00:00,090 --> 00:00:05,670 In this lesson, we are looking at encoding, decoding, you are eyes so we can do an encode decode, 2 00:00:05,680 --> 00:00:09,150 you are a component as well as encode decode you are eyes. 3 00:00:09,150 --> 00:00:10,200 So what's the difference? 4 00:00:10,380 --> 00:00:12,410 It's the characters that get escaped. 5 00:00:12,750 --> 00:00:15,790 So with you encode, you are a component. 6 00:00:15,810 --> 00:00:21,900 So if you use that method, all the escapes, all characters except the ones below, and this is how 7 00:00:21,900 --> 00:00:22,780 you can write that. 8 00:00:22,980 --> 00:00:30,390 So getting the Windows location, you can encode you are all using the UI component and you can see 9 00:00:30,390 --> 00:00:31,530 what the difference here is. 10 00:00:32,070 --> 00:00:37,200 Also, there's some documentation, of course, that the Mozilla developer network, so they're using 11 00:00:37,200 --> 00:00:41,550 nine regular characters and you can see how this gets encoded as well as test. 12 00:00:41,910 --> 00:00:44,370 So test is probably more relevant for what you're doing. 13 00:00:44,520 --> 00:00:47,160 You can see test X equals test. 14 00:00:47,400 --> 00:00:51,960 So this is how it looks like within the string and then encode it. 15 00:00:51,960 --> 00:00:52,830 It looks like this. 16 00:00:52,980 --> 00:00:58,110 So it escapes certain characters and outputs them within a more readable format. 17 00:00:58,290 --> 00:01:03,450 So when you pick it up on the other end, you don't have characters that you might not be able to utilize. 18 00:01:03,780 --> 00:01:13,470 Also, we're able to check to see if it contains components so we can see if you are a X is not equal 19 00:01:13,470 --> 00:01:17,010 to the code, you are a component X.. 20 00:01:17,190 --> 00:01:21,190 We can see which characters are being included because of the difference between the two ways. 21 00:01:21,690 --> 00:01:23,610 So let's look at this in a little bit more depth. 22 00:01:23,950 --> 00:01:28,280 Opening up our Ed and we're going to get the window location. 23 00:01:28,300 --> 00:01:33,810 So using window object and then location, it's going to return back to the location. 24 00:01:33,810 --> 00:01:35,100 And this is the graph. 25 00:01:35,250 --> 00:01:38,370 And we can console log that out just as we take it in. 26 00:01:38,790 --> 00:01:42,810 So this is just the regular you are RL and then we can encode it. 27 00:01:42,810 --> 00:01:49,700 So encode you are L and using this time we're going to use encode you are a you are a component. 28 00:01:50,430 --> 00:01:55,230 So taking the URL and then we also have an option to decode the euro. 29 00:01:55,770 --> 00:02:00,900 So using and code or actually there should be decode of course that you are a component. 30 00:02:01,530 --> 00:02:07,260 And then here if we pass in the one that we just encoded, we should be able to retrieve back that same 31 00:02:07,260 --> 00:02:07,610 one. 32 00:02:07,620 --> 00:02:14,460 So encoding, decoding, we can put it in and encode it format and then we can also pull it out of that 33 00:02:14,460 --> 00:02:15,230 encoded format. 34 00:02:15,390 --> 00:02:22,230 And this is useful when you are programming, because you are going to find that in some cases you do 35 00:02:22,230 --> 00:02:26,690 need to transform your string into more into different types of formats. 36 00:02:26,910 --> 00:02:32,550 So you see that we get our original URL, it gets passed in and then it gets decoded again. 37 00:02:32,700 --> 00:02:34,260 So encoded, decoded. 38 00:02:34,500 --> 00:02:39,840 And there's also an option as well to use your URL and just encode the UI. 39 00:02:40,020 --> 00:02:46,170 So this one is actually more common and I'll show you how that one works so we can pass in a new URL 40 00:02:46,170 --> 00:02:46,690 for that one. 41 00:02:47,340 --> 00:02:49,110 So let's set up a new URL. 42 00:02:49,950 --> 00:02:53,370 And this is what I'm just going to use your Ellisville website. 43 00:02:53,790 --> 00:02:57,330 And then this particular website is taking in some parameters. 44 00:02:57,570 --> 00:03:01,420 So it's got an ID and it's got some other stuff. 45 00:03:01,450 --> 00:03:07,710 So more than Hello World and make sure we have a space in there and put it into the console. 46 00:03:08,100 --> 00:03:10,340 So right now we're just going to encode it directly. 47 00:03:10,920 --> 00:03:13,680 So we've got our encode, you or I. 48 00:03:13,920 --> 00:03:19,350 So this is slightly different as you're going to see, because there's different characters that are 49 00:03:19,350 --> 00:03:19,960 being escape. 50 00:03:20,310 --> 00:03:27,120 So when we encode it, then you see that the big difference here is that the space turned into a percentage 51 00:03:27,120 --> 00:03:30,160 20 and the rest of it pretty much remained intact. 52 00:03:31,020 --> 00:03:37,440 So if we were to take that and if we were to decode that, so without making any changes, if we just 53 00:03:37,440 --> 00:03:40,850 do a decode on that you URL, you're going to see that nothing changes. 54 00:03:41,070 --> 00:03:44,640 So we could pass it in and we could take it out and decode it. 55 00:03:44,640 --> 00:03:50,700 So if we want to pass in the encoded value and then decode that ARACY, nothing changes because we're 56 00:03:50,700 --> 00:03:55,200 able to encode, decode and decode obviously does the opposite of encode. 57 00:03:55,590 --> 00:03:56,730 So there is a difference. 58 00:03:56,730 --> 00:04:03,710 If we take a console log and we do an encode, you are I component. 59 00:04:03,720 --> 00:04:09,540 So there is going to be a difference in the URL and you see that it's encoded the HTTP. 60 00:04:09,570 --> 00:04:13,590 So it's gotten the call and it's gotten the Ford slashes and it's encoded everything. 61 00:04:14,130 --> 00:04:20,940 So this one might not be as useful, but they both are available in case you need them within your coding 62 00:04:21,990 --> 00:04:23,840 to restructure some of the wording. 63 00:04:24,090 --> 00:04:29,130 So the other one that encode you are I, I doesn't escape these characters. 64 00:04:29,130 --> 00:04:33,860 So there's more characters that don't get escaped as opposed to that encode. 65 00:04:33,930 --> 00:04:34,950 You are a component. 66 00:04:35,760 --> 00:04:37,710 So there is a challenge for this one. 67 00:04:37,920 --> 00:04:41,550 And that's to take your favorite website and code. 68 00:04:41,550 --> 00:04:48,680 You are with the URL and then also encode your eye component with the URL and the source code is below. 69 00:04:48,900 --> 00:04:53,010 You can try this out and it's going to be the exact same example that I've just shown.