And because we are defining this process.html file, we need to create one. So let's do that right now.
Let's call it process.html, and what do we want to happen in this file?
Well, let me just show you the file works, okay, before we get too complicated.
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...
heading, saying "Hello Wally".
Okay, we save this...
let's go back to our index file...
so let's go back...
let's now delete everything. Let's refresh the page. We know now we're starting from a clean slate. If now...
okay, we type "Wally"...
and we click submit, we get our process.html file.
The browser knows where to find it.
But can you see a flaw with what we've just done ðŸ¤”?
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...
getting the same, "Hello Wally".
In other words, we haven't used that form data in any way ðŸ˜³.
How do we do that?
Another great question.
Let's go back to our Visual Studio Code, and you can see here we've hard-coded Wally.
We don't want that to happen.
We want this to kind of be dynamic.
And let me just say straight off the bat that there are many ways to do this in coding.
And later in the course, we're going to be coding up some server side code so you can see how that...
works.
But for now, we're just dealing with front end.
We're just sending this to an html document.
In other words, we sending it just to the browser.
So we need a way to make that dynamic. In order for that to happen...
you guessed it...
we need JavaScript.
We've always had access to the URL parameters with JavaScript.
We've got the Window object. On that, we've got the "location" property.
And on that, we've got the "search" property and that will give us the URL parameters.
Let me show you what I mean.
So let's go back to the browser, let's inspect this document...
let's go to the Console.
And as I mentioned, we've got this window object ðŸ˜¬. If you don't know what the window object is, please...
check out my DOM course - it really does go into detail about what the DOM is.
Anyway, we've got this window object, which is a global object provided to us by the browser automatically
and there are a whole lot of properties and functions and methods associated on this window object.
One property is called location.
And on this location, it's also an object, there's another property called search.
I'm not typing properly ... search.
If we return that, we see that we get our URL value. We get our variable name, fname, and we get...
the value itself, which is Gerald. Okay, cool, that's all good and well...
but how do we actually get just that name part - the "Gerlad"?
Well, traditionally, we had to go and use complicated parsing techniques to parse the string itself...
and get the value.
Buuuut, after years of ugly string parsing, we now have an awesome API called URLSearchParams() ðŸ¥³.
And what does that mean? Well, the name gives it away.
We're looking at the URL, and we're searching through its parameters. And it's an awesome API because it just...
basically allows us to extract whatever we want from the URL.
It really is neat. And I don't really want to get into detail on this API for the moment, but just realize...
it does give us a lot of power ðŸ’ª. We can extract just values, name:value pairs, etc etc. So it isn't...
difficult to use, but we're going to be using the get method on this API.
We haven't defined it.
I haven't defined it. It's provided to us straight out of the box by the browsers, so it's really cool.
Let me show you how we use it, um, well actually let me use it here before we code it in Visual Studio Code.
So what do I want to do first? Well, first I want to get our URL.
So let's put it into a variable called urlText, for lack of a better word ... urlVariables...
should we just say that?
And that is going to be what we've just done...
"window.location.search"...
okay, so we're basically just putting all of our form data into this variable called urlVariables.
And what do I want to do now?
Now I want us to use this URLSearchParams API. And in order to use it, we have to instantiate it.
That's just a fancy developer word...
that means "create it".
And in order to do that in JavaScript, we have to use the "new" keyword.
So let's define a new variable called urlParams, because we're wanting to get the URL parameters...
into a variable.
And like I said, we have to use the "new" keyword and let's use this API.
And this is the cool thing.
Look at this.
You can already see the IDE here...
the console in the browser, has given us this URLSearchParams keyword.
I haven't typed anything.
I haven't coded this myself.
This is provided to us by the browser. And it takes arguments.
The argument that we need to give it is the URL string, the query string, or what...
we've defined it as, in a variable called urlVariables. And that's all there is to it...
my dear students,. We've literally now used this API and we've got all the URL parameters.
If I console this out, you can see that we get this weird object, right?
So it doesn't ... it's not enough.
We need to do something else. And remember I said that there are many different methods and properties on...
this actual object.
Well, you can open it up.
You can see. If we open its __proto__...
we've got get() methods, we've got keys(), we've got values(), we've got entries(), etc etc.
So it is really powerful, this API.
I just want us to use the get() method.
So we call our urlParams, we can just get(). And what do we want to get? Well, we want to get the...
first name and...
BOOMSHAKALAKA ðŸ’¥. (sound effect: mission completed) There we go. We've got our name...
Gerald. This is just a very long way to show you how we can get the name. Now that we know how to get...
the name, let's display it onto the screen.
I just want to mention, though, can you see how important it is for the front end developers and the...
back end developers to communicate?
Because when we use this get() method, we have to know the name of the URL variable.
We have to know the name that we sending to the server, in this case sending to the front end - "fname".
So it's just a lot easier if frontend and backend are communicating to each other. It just makes our life a lot
easier.
Everyone just knows what the variable names are called.
It's pretty handy. (background music starts)