Let me close this Console.
Let's jump back to our text editor. And how would we go about coding this JavaScript? Well, if you've...
done my JavaScript...
course, you'll know that all JavaScript has to be placed in this <script> tag.
And I basically want us to go through the same steps that we did in the console, but now in our file.
So first, I want us to, let's use the standard
window object to grab our URL
query string.
And remember what we did there?
We defined that query string into a variable. We called it urlParams. Actually, I prefer to call it...
queryString because that's what we are getting.
This was returned to us by this method.
So let's just call it into a new variable now called queryString.
And remember, it's on our window object. On that we've got another object called location, and on that...
we've got our URL "search" parameter object, our property, and that gives us the query string.
So there we go.
We've got the query string.
What's the next step 🤷‍♂️?
That's right.
We're going to be using the URLSearchParams API.
Let's use the URLSearchParams API. And remember, this is important...
this is not JavaScript.
It's provided to us by the Browser API.
A lot of people think it's JavaScript, it's not, but funny enough, you kind of have to use JavaScript...
to use it.
So, they are very closely intertwined. Okay great, so let's define a new variable.
Let's call that variable the same as we did in the console now,
urlParams.
And of course, as I mentioned, in order to instantiate this object, we have to use the "new" keyword...
in JavaScript. And the object's called URLSearchParams.
And you can see the IDE has already given it to us.
So it really is simple. And we're passing it in the queryString,
right.
So now we've got our urlParams.
What is the final step?
Well that's right. The final step is...
let's grab our first name variable, via the get() method.
So here we can define a new variable called firstName, and we know it's going to be in the urlParams...
that we've just created. And there's a method on there called get(), as we just saw.
And we know we want to get the query string variables value, where the variable names'...
value is "fname".
Remember, we defined our variable as "fname".
If we go to our index file, there we go.
We've defined the variable's name, as fname. And that's the value we want to get.
Which is exactly why we have "fname" here.
Whew. Okay. There we go. We've got it right.
So we've put it into a variable called firstName.
I can prove it to you.
Let's just console log 'fname' to the console.
Let's go to our browser. Let's go back.
Open up our Console, let's click the "submit" button. (sad trombone 📯 sound). "fname" is not defined 😳!
Oh sorry, why is that?
Let's go back to our coding editor...fname...
Sorry,
firstName we called it. Let's go back to our browser, let's go back. Let's just clear everything.
Get rid of all the noise.
Submit "Gerald". There we go! (oh yeah) We get "Gerald' to the screen. But like you can see our page still has "Hello Wally",
we want that to be dynamic.
This is not a course about JavaScript...
so I'm going to be very quick right now. A ll we have to do now is make the hello message dynamic.
And how do we do this?
Well, it's very simple and I'm going to be very quick.
All we have to do is grab that <h1> element and then change it in the HTML text.
That's all we have to do.
Firstly, I want to grab our heading tag and define that in a variable...
document.getElementsByTagName().
I know I'm going very quickly.
The tag name is "h1", and if you've done my DOM course you'll know that getElementsByTagName() returns...
an HTMLCollection.
And because there's only one H1 element in the document, we know it's the first item in the collection.
To access that, that's why I'm using the index kind-of square-bracket [] notation.
So now we know we've got our H1 tag.
All we have to do then, is grab that heading tag, change its innerHTML, and I'm going to use template...
literals here, to say hello, and we called our variable firstName.
There we go.
Let's save this, and let's see if it works.
I hope so, otherwise I've done something stupid 🤦🏼‍♂️.
So let's go to browser. So here we go, we are in the browser.
Let's now type a name of "Wally The Second".
Let's submit this. (click sound)
"Hello Wally...
The Second".
This was kind-of a long lecture, but just remember, I wanted to show you how important that action
attribute is. With the action attribute, we've just defined where we want the browser to send all the...
form data.
We've told it that we want it to send it to the front end, to a file called process.html.
We then used the browser API called URLSearchParams in order to get the query string from the
URL.
We then used JavaScript with it, in order to access it and display it to the screen.
Don't take all this information for granted.
You really have learned a lot already.
Don't worry if some things still confuse you, like why does the information occur in the URL, and you know,
is this safe? What about if the data is a password...
for example? Don't worry, we're going to be getting into that...
in this course. That's why I'm just trying to be as slow as possible, because it can get overwhelming.
Don't worry.
I'm going to be fulfilling all your, you know, your curiosities as we go on in the course.
I really hope you're having as much fun as I am in this lecture.
Really,
I don't know why...
I've just had a lot of fun putting it together.
But we're not done.
You know, now I want to talk about another very important attribute when it comes to forms, and that is the method
attribute.
And yes, this means we're going to be talking about why some of the form data is appended to the URL.
It's just weird.
Just weird.
I'm outa' here! It's too weird.