So it's time to turn our attention to JavaScript and JavaScript, the people that write JavaScript primarily
as their main language, love to point out that JavaScript is the most popular programming language
in the world.
And technically they're right, but they're not right because people use it to build the most professional
applications or it's used in the vast majority of large scale projects.
It's the most commonly used because people copy and paste JavaScript off the Internet without even knowing
what it does, or they use something like Jake Query and don't really understand the underlying structures
and principles behind JavaScript.
And instead, again, they just copy and paste.
And there's nothing wrong with copying and pasting good code and using it or using external packages
that are well written, well maintained and well supported.
But we're going to use JavaScript in a slightly different fashion.
We're going to learn the basics of the language so we can do some useful things.
So the very first thing I'm going to do, I have this is where I was working the last time I was working
on this project.
I'm going to close that.
And if I have the text editor still open, which I probably do, I'm going to close all the files in
that and quit out of it.
And I'm going to take this working HTML folder.
I'm going to rename it.
This is this is the folder that holds all the files we've been working on for our building of the HTML
files.
I want to rename that.
I'm going to rename it to the HTML source and then I'm going to move that into my actual git repository
just so I have a copy of it and I can work and work from it right within my I.D., which happens to
be goaland in my world.
So I need to find those and let's go here and go up one level, find my visual studio project through
there and working on bookings and I'm going to drag that folder right into the root level of my project.
And then I'm going to go over to my I.D., which is right here, and it should show up on this side
as something that needs to be added to my git repository.
So I will find it, which is right here, and I will add the whole folder and I could have right.
Clicked and chosen get add, but I just know the keyboard shortcut and then I will commit and push commit
adding html source files.
Give it a push.
And if it goes so, now that that is committed, I'll wait for the push to finish there, it's pushed.
So now I'm going to start working with JavaScript.
I'm going to do so by opening up.
Well, I'll just create a new page in my e-mail and we'll use an existing one.
I don't have to rebuild one from scratch then.
So I'll go to that book file.
Not that one.
That one should have been deleted, was deleted.
It's now called reservation.
I go to the reservation file and what I'm going to do is just hide a few things so I can see what's
going on.
Hide the head and I'm going to come down here to the container and clean it up a little bit and format
the whole thing good.
OK, and clearly spaces out and hide this div.
All I'm doing is collapsing into my ID so it collapses it and then I can bring it back by clicking here
or clicking here, but it just gets it out of my way and I'll hide my list of files on the right to
give me more screen real estate.
All right.
We're going to write some JavaScript actually technically speaking, we've already written some JavaScript.
I see.
I have some left in here that doesn't need to be there.
Let me give it to that.
I'm getting ahead of myself.
All right.
So this is where you should be right now.
You should have a file that's more or less the same as what I have.
And what I'm going to do is write some JavaScript and I'll start with really basic stuff.
First thing to bear in mind is that JavaScript files usually go at the bottom of your page just before
the closing body tag.
You'll see a lot of tutorials online that tell you to put them at the top of the page.
There are certain circumstances where that's a good idea.
But in the vast majority of cases, in order to improve your page loading time, you put them at the
bottom.
And every JavaScript that exists in a Web page has an embedded part of the Web page, has to have script
tags around it.
And you notice we already have script tags here.
And technically speaking, if I was to go and open this file, which I can do right now, if I copy
this URL and I go to my Web browser and I just paste that part in there, it actually shows me the JavaScript
file and it's compressed to make it faster, to download faster.
But this is just JavaScript and this the contents of that file actually exist within a script tag on
my page.
And we're doing the same thing here.
But instead of having the file stored on a remote server somewhere, we're making it a part of this
file.
And all I'm going to do is write a basic JavaScript directive and it's not going to do anything on the
page.
But I'll show you that it does, in fact, run.
I will write console log.
I am printing from JavaScript and it ends with a semicolon.
So I'm writing console log and then in parentheses with quotation marks around it.
Some text printing apparently can't type that.
Now when I save this file and go to my web browser and open it and now it's in my visual studio code
project.
So where is that?
TC's Visual Studio code right there.
And Bookings and HTML source and I'm working on reservation.
Nothing appeared to happen.
But if I go over here and click on the open menu and it's a little bit different in Chrome, but I think
it's in the same spot and try to find the console, which is probably under the web developer and look
for console is probably at there.
Yes.
Notice that it printed.
I am printing from JavaScript to the console, so I just wrote a little bit of JavaScript that wrote
to the console.
I can go back here and say, I don't want to do that or I don't want to just do that.
I want to display an alert.
One of those little pop ups alert.
Hi.
Hello.
All that's going to do is pop it alert.
So let's go back here, reload the page and it says hello, ugly alert, but it is an alert.
So that's how JavaScript basically works.
You have to put it within the script text.
Now, none of this is useful at all.
Nothing about this is useful.
So let's try doing something a little more useful.
Let's go back to our page and think about what we want to do.
Well, to start with, let's put a few things on this page.
I'll put it outside of the form and it's important that you do that.
Don't overlap tags.
I'm going to create a new I shall make it right outside of the row.
So here's the row and the closing tag for that row is down here.
I'll create a zero div class equals row div class equals call.
I'm using my Emet now because I'm back in my ID, so I have it installed here.
Div Classic was relative classic call and now I will pray.
Oh let me put a what shall I put in here.
A paragraph of text.
So P and I'm going to give this one an ID, I'd.
Equals my paragraph and I'll put some text in here.
This is some text.
All right, save the page, go back, reload it, make sure it appears there it does.
Get rid of that alert because it's going to bother me every time I reload the page.
So let's get rid of that.
Save it, go back, reload the page.
There it is.
And it's still printing to the console because I didn't remove that.
And there's my paragraph of text and that paragraph of text happens to have an ID.
And one of the things you do an awful lot in JavaScript is say, I want to effect something on the page.
I want to make a change to the the element with a particular ID or a particular class or whatever it
may be.
I need to have some means of selecting that text.
So I'm going to look at this again.
I have a paragraph with an idea of my paragraph, which I want to copy, and I want to select that paragraph
of text using JavaScript.
And you do that using a really unusual but not that difficult to learn syntax in my document.
That's the key word.
I want to get an element by I'd get element by ID, OK?
And inside of that I have to have a string and it has to be the name of the element.
And my element is going to be my paragraph.
I've now selected that document or that that element, OK.
Now it looks like I have an error here.
Was saying unresolved function get element by ID.
I didn't capitalize the B get element by ID.
That's better now I selected that element.
OK, and what am I going to do with that.
Well I am going to store that selection into a particular variable and I'm going to name the variable
with the keyword.
Let let my L equal document get element by ID.
Now I can say that and I can run it and I think have happened.
I still just print to the console.
OK, but if I want to make a change to that element now, I can do it because I started it in the variable.
I can actually say my l dot and look at all the things that I can do here at event listener access,
killable, whatever it may be, I'm going to actually add a class to it.
OK, I haven't done that yet because I want to come up here to the very top and create in my head another
style and I'm going, I left this P one blank.
I'm going to delete it already because I never did it do anything with it.
But let me actually add a new style here, OK?
And I'm going to call it red text like that.
And then I define it and I'm just going to say color.
Right.
OK, so I've got this this document here right now, this is black text.
And what I want to have happen is as soon as this document loads, I want to change the color of the
text that's stored in the element named my L so a paragraph.
So it's a PAETEC and I'm going to assign a class to it.
So I address it or I do that by typing my variable name, my L and because my URL is a reference to
a particular ID in the DOM, the document object model, I actually have some methods available to me
and the one I want is class list and class list actually just just gets the classes, the CSS classes
that are assigned to that P tag.
And right now there are none.
And that I want to add one.
So I'll choose add and my token, my string will be the name of my class which I believe was read text
with a lowercase and I say that now if I go back to my web browser and reload the page right now, it's,
it's, it's actually just black text.
But as soon as I reload it, that should fire and it does so it is signed a class to that.
Now if I view source on this page and look for my paragraph, there it is.
It doesn't have the class assigned to it at all.
But if I inspect this element and if you never use this, this is a really useful tool.
Right.
Clicked on the error on your page where you want to inspect and say inspect element and it will open
this up.
It will show that it is ID my paragraph and here it has class read text that was actually assigned by
our JavaScript.
Now that's not terribly useful.
You'll be more useful if I clicked a button or took some action and then the color changed.
Well, we can do that too.
Let's go here.
Let's just comment this out, OK?
This whole section right now and I'll just come in this one
and I will now I want to add a button, so I'll put it right up here below this.
Um, I'll put p put it in a paragraph and I'll put a oh button class equals button button outline I
spelled out.
Right.
So.
And dairy, which I believe is one of the ones built into a bootstrap and click me, I think to give
it an ID idea equals color button.
OK, so I got that saved or I've got that entered and I have no JavaScript firing.
When I go back and reload the page, I should just get a button underneath it and clicking.
It does nothing at all.
OK, so now we need to add a listener, a JavaScript listener that says, listen, as soon as you've
loaded this document, I want you to look for a particular element and I want you to listen for certain
actions.
And we do that in much the same way that we did before we go document get element by ID.
And this time the IDs that I want to affect is my click me button, which has the ID of color button.
And we want to add an event listener and the event listener is a type click.
And what do I want you to do.
Function.
And this is a function that's built right into it's just an anonymous function whenever anybody clicks
that button.
Here's what I want you to do.
I want to say, well, this stuff right here.
So I'll copy this, paste it in here uncommented and save this text or save my document.
And I want to go back to my Web page and reload it and we'll go to the console again just so we can
make sure there's no errors thrown up when I click this.
This now has a listener associated with it.
And what it should do when I click it is look for this element and add a cost to it.
And it does.
Perfect.
Can I make that a toggle?
Well, quite possibly.
Let's see if we could figure out how to do it.
So this time, rather than just changing the text or adding the class every time that button is clicked,
what I want to do is test and see if it has that particular a particular class associated with it.
All right.
So how do we do that?
Well, let's try it out like this.
What an if statement in JavaScript is pretty straightforward.
If document if my URL.
My old class list.
Dot.
And we can say, does it contain if it contains the string read text, then we want to undertake a particular
action otherwise, else we want to take a different action.
So we need to close our curly brackets here.
So the syntax for an IF statement in JavaScript is very much like the syntax for an if statement engo.
The difference is Go doesn't have these parentheses around it and JavaScript insists that you have them.
In fact, if I leave them out, it'll just throw an error.
It won't even run.
So here if we were saying go to this element, which is my paragraph, see it, if it's a list of classes,
contains red text, if it does, then I want to remove it so I can do it now.
My classless dot remove and the token I want to remove is red text.
Otherwise edit.
So when I save it now and go back here and reload the page, this should become a toggle and it is that
works perfectly.
So JavaScript is not that difficult to learn.
It's really easy to write bad JavaScript and we're going to try to avoid doing that at all costs.
So what can we do that's more useful than just changing the colors of things?
Well, let's go back just for fun to get bootstrap dotcom and let's go to the documentation and let's
look for forms which are under components, I think forms, and let's look at form validation.
And it's right here.
Validation so.
The way that this works is pretty straightforward if you come down here, I mean, it'll show you right
here I try to submit this form and it says, oh, look, this is all nicely red.
It's got an error message here.
As I type something in, it turns back to green.
This is far more attractive and I argue far more useful than the kind of built-In browser validation
that we have now.
The way that this works is you have to add no validate to our form, which is easy enough to do.
We can add that.
And we also need to put these things, the error messages or the success messages, straightforward.
So these are success messages.
They have the class valid feedback, which is part of the bootstrap framework.
This is invalid feedback, which is part of the bootstrap framework.
This is the part that we have to add.
So example, starter JavaScript for disabling form submissions.
If there are invalid fields, when we can use this as a starting point, I can actually copy this entire
anonymous function and I can go back to my HTML in my editor and I can actually put it right here.
So I don't need this anymore so I can delete that.
And what is it saying here?
Let's go through it and make sure it's all right.
Window add event listener.
Well Window just says that's what the document lives in, so that's a very top level.
It's the just before the document window added, even at an event, listener onload when the web page
loads execute this function.
And again, it's an anonymous function.
So the first thing it says is fetch all the forms.
We want to apply custom bootstrap validation to no problem.
So we'll have to add the class needs validation.
Let's go do that right now so that no validate here, no validated class equals needs validation.
OK, and scroll back down and read some more comments so we get our form so that stores that form that
has the class need validation in this variable, which I'm going to call let because I don't like the
VA keyword, I'm going to use it, let instead of years old and then loop over them and prevent submission.
So if there's one form on the page that has the class needs validation, it will load just one form
into the variable forms.
If there are three, it will load all three into the variable forms, then it actually will loop through
this, this and and it's actually creating an unnecessary variable there.
So we don't really need that.
So I don't know.
These guys are kind of sloppy.
We're just going to look through our forms and perform a actions upon each individual form.
So what we're doing here is add event listeners submit on that form when the submit is called execute
this.
If the form check validity is equal to false, then stop and add the form add was validated.
So we're just looping through this and we're checking to see if something is valid or not.
Now where does this come from.
Returns whether reform will validate when it is submitted without having to submit it.
OK, so that's built in.
No problem.
And then we add our class list was validated to this and bootstrap is smart enough.
When we're adding that class, we can determine whether or not we should add the one that turns it red
or the one that turns it green.
So it's kind of like magic.
And we're kind of doing exactly the sort of thing I talked about earlier, which is to say copying and
pasting someone else's JavaScript.
But we're just getting started.
So let's see if this does anything.
I'm going to save this.
I'm going to go back to my page.
I'm going to make sure the JavaScript console is open and clear it.
So if there's any errors, they should show up here.
So let's reload the page.
This RAM.
No, no errors so far.
Let's try searching availability.
Oh, look at this.
It gave me an error, but it actually made everything wide enough that it pushed it onto two lines.
Well, that's not good.
Maybe we can make our column a little bit wider.
Or maybe it's just because this JavaScript console's.
Yeah, that's just because my JavaScript console is open.
So I don't care about that right now.
Perfect.
Now let's choose a date.
Let's choose the good and let's choose the twenty third good that works beautifully.
Now I should be able to submit the form and I can.
So that little tiny bit of javascript made this ever so much better.
Now in the next lecture, I want to get rid of this kind of built in calendar picture that's browser's
specific.
So it's different from in Chrome than it is in Firefox and so on.
I want to put a different date picture in here and we'll use a third party package for that and then
we'll get on to moving some more writing some more custom JavaScript.