All right, in this lecture, we're ready to start talking about modules, so modules are just an organizational
tool.
And so it allows you to do is to divide your JavaScript application into pieces that can be distributed
and reused and so on.
It depends upon is being able to export content and being able to import content.
So let's take a look at how that works.
OK, we're going to make use of the shapes that we created in the class lecture, so to just bring up
the speed, we have a class type of shape of a class type of rectangle that extends shape.
We have a class type of square that extends rectangle.
So what a model does is lets you bundle this up and use it elsewhere.
So we're going to create a new JavaScript.
So I'm just going to go in here and say new file, right.
Click and create a file called Shape's That Jass.
And then what we do is go back here to a world and I'm going to get these classes out of here and put
them into the module.
Now, what makes this a module and not just another JavaScript file?
Well, I mentioned in the slides that what you do in a module is you export your content.
So right now we just have classes.
But we want to do is export them.
So we provide a keyword export and anything we want to share with the outside world.
So we're going to share all these export class rectangle and export class square.
All right.
So we've got those saved that can help the world that.
I just want to get rid of these people, produce them in the wrong one thing we're going to use them
in from the module.
So get rid of those.
So right now, if we try to run this, it's not going to work because we don't know where this rectangle
shape is coming from.
So let's just try to verify that
rectangle is not defined.
So that makes sense because it doesn't know about this rectangle.
So how do we let it know about the rectangle?
What we need to do is to import the rectangle information so we can do that.
But in order to do that, we have to tell our tional our program that we're running about these modules.
And when you start using modules, that has to be in that paradigm.
And let me show you what I mean.
Right now, we have a script that's imparting this whole world, that jass into the HTML.
But when you start using modules, you can't use the JavaScript type anymore.
You have to use the module type.
So I'm going to start by using the script and get the shapes that I would say script type equals module.
Source equals shapes.
Yes.
So that's got that.
Now we can just import the whole world too.
But we have a problem, which is that we're going to want to click run this click method on Hello.
And we can't do that.
And as soon as we turn this into a module was not going to work anymore.
Let me show you what happens.
Say that
uncute reference hello is not defined.
It doesn't know about it.
So we have to do is tell it about it.
The only way we can do that is to import it instead of saying with the sources.
So we're going to just say we have a script type equals module and then we're going to import our whole
function into this HTML.
So we use the import keyword and then we have a couple of choices we can say in brackets.
Curly brackets, what method or what function we want to import.
So we import hello from.
And it's in the same folder as I will say dot slash.
Hello World.
Yes, Sir.
Michael.
So we're in a script, so this is the script.
Now we're going to do a little bit of something tricky here.
We're going to use the document object model to put the unclick in here.
So what I need to do is give it an ID name.
So say ID equals
hello.
Say a call.
Hello.
So we have an idea for this button and what we have to do is provide it with the click function in the
way you do that with the document object models.
First of all, you get this element, the button element, and then you add an event listener service,
a document that get element.
But I'd just give you that.
I'd name call
and then I'll move down to.
Next one, and I'll say that ad, Yvette Lester,
in the event that is the Klickitat and what I want to do when it's click is Granillo and that's it.
So let's see what happens if we run now.
So it's give me an error to request a module that just has not provided an expert named Hello well,
hello role has become a module as well, and we're not exploiting the function.
So we just have that the expert keyword
now let's see what happens.
Rectangle is not defined.
Now, this is because the classes have not been pulled into the helo module, and again, you do that
with the import.
OK, so we will import our classes into this module.
So we'll say import.
You know, I'm skip the curly braces for a second, I'd say, from
that.
And the reason I did that is because.
Once you have the file name in, it can find things for you shape rectangle square.
So now we've imported our classes into this module.
So now let's save and run and now should work.
And there we go.
So what this has done is it's allowed us to create a new module called Shape's, which we could share
with other modules, and as a matter of fact, when you get deeper into JavaScript, you'll find out
that you are always including modules to build things with.
So that's our introduction to modules.
And we'll be using those when we get into the Putting It All Together section.