I've just got Visual Studio Code open here in front of me and I want to show you a quick example.
Just remember that all modern browsers automatically encode spaces and special characters before transmitting
the data over HTTP.
However, for various reasons, sometimes this may not work and even worse I guess some of the very old
browsers and web servers don't understand some special characters unless they are encoded in a very
specific way. And even some very old browsers don't even encode spaces in their URL at all.
And for these reasons you may explicitly want to encode or decode URL data using your preferred language.
In JavaScript, it's the encodeURIComponent() method or the decodeURIComponent() if you're wanting
to decode certain characters.
But enough said, I want to quickly draw up some code with you and I want to show you what it looks
like.
Let's get into it.
The first thing I want to do is obviously create an HTML document with a body. In here,
I don't even want to wrap this in a form.
I don't even want to waste time.
I just want to quickly go straight to a text input box, with a name attribute of ... let's call it, "message".
ID can be "message" and let's give it a value,
"hello world".
But do you notice here I've got a space.
I've done that very deliberately.
Very, very deliberately.
All right.
And then, of course, we need a way to submit this to a server.
And then here I want to go "URL Encode".
I just want the button to have some meaning.
So let's save this.
Let's open up our server.
There we go.
Very, very simple.
Now what I want to do, is I want to add an inline event listener.
I know it's not the best way to do it, but really this is just a quick, quick example.
I want to add a click event on this button and then I want to trigger our own code.
So let's just define a function called urlencode().
You know what,
let me make this text editor bigger so you can see what we're doing.
So all I've done is I've added an inline event listener called "onclick" to this button.
And when it's clicked, this function - urlencode() - is going to execute.
Then what I want to do is I want to create an empty paragraph for now, because I want to display our
result in this paragraph. And let's just give it an ID of encodingResult.
Okay.
That's all I want to do.
Now remember I said each programming language has their own methods and functions to give you more control
about the encoding.
Well, I want to use JavaScript right now. And JavaScript has to be wrapped within a <script> tag.
And of course we need to define our function called "urlencode".
If you're unsure about JavaScript, please check out my JavaScript entire series ðŸ¤©
It's really fun.
But anyway, the first thing I want to do is I want to grab our message data, right?
And I'm going to be using the document object. On there, getElementById().
We gave it an ID of message.
And of course I don't want to get the actual element - I need its value.
So let's put its value into a variable called "message".
Okay, what's the next step?
Well, the next step is I want us to use the JavaScript's encodeURIComponent() method. And that method
takes an argument.
The argument is the actual text, the actual value you want to encode.
So here, let's define a new variable called encodedMessage, and that can just be assigned the value
of what?
Well, like I mentioned, let's use the encodeURIComponent() function in JavaScript and let's pass in the
message.
So that's all I want to do.
And the next thing, in order to see this result on our page, I want to grab that paragraph,
so getElementById(), and we gave it an ID of encodingResult.
I just want to change its innerHTML to the encodedMessage.
Whew, this should work.
So let's go back to the page.
Let's click on this button and there you have it.
That space has been encoded now to a %20.
It's a special character, and that's exactly what that method does in JavaScript.
Very cool,
right?
Awesome.
Let's jump back into the lecture. Man,
I love this stuff ðŸ’•.
Wasn't that cool?
All right.
Almost finished this lecture, I promise.
I just want to quickly give a summary.
So remember we had our URL.
This is where it all began.
I don't want you to get lost in all the detail. With a GET request,
t he data is inserted directly into the URL itself. And URLs, as we have seen, have to abide by certain
rules,
for instance the RFC 3987. And these rules, they say that a URL can only contain certain characters.
Reserved characters like ? and =, they are not URL encoded
if we don't use them ourselves.
That's why when we submit a form, we see all these random characters appearing in our URL.
It's because they are reserved. And it's just a way for the browser to separate out the different parts of
our URL.
But if we use our own special characters, like a space or a reserved character, then URL encoding
has to take place.
And traditionally URLs could only accept ASCII characters.
But you know, browsers have beautified the address bar over the years and now we're able to see non-ASCII
characters in there. Wow, I know, we've been through a lot.
This entire section has been a bonus about why the URL looks like it does.
I'm just trying to shed more light ðŸ’¡ on this topic because it is very confusing.
Not many developers know about it, and it is advanced. But I hope you've enjoyed it because that's the
main thing.
That's why we're here.
We're here to have fun and we're here to really, really get better at programming.
And you can only get better by truly understanding all the pieces of the puzzle ðŸ§©.
And when we're dealing with forms, whenever you use a GET request, all the form data is going to be
appended to the URL, and you're going to be seeing weird characters.
And that's why we've spent ... well that's why I've spent a whole session describing this URL encoding process.
I hope it really has been useful to you and I can't wait to jump into the next section.
See you soon.