1
00:00:01,750 --> 00:00:09,730
All right, in this lecture, we're ready to start talking about modules, so modules are just an organizational

2
00:00:09,730 --> 00:00:10,050
tool.

3
00:00:11,380 --> 00:00:17,260
And so it allows you to do is to divide your JavaScript application into pieces that can be distributed

4
00:00:17,410 --> 00:00:20,160
and reused and so on.

5
00:00:20,170 --> 00:00:26,390
It depends upon is being able to export content and being able to import content.

6
00:00:27,670 --> 00:00:29,220
So let's take a look at how that works.

7
00:00:32,780 --> 00:00:41,150
OK, we're going to make use of the shapes that we created in the class lecture, so to just bring up

8
00:00:41,150 --> 00:00:46,480
the speed, we have a class type of shape of a class type of rectangle that extends shape.

9
00:00:47,180 --> 00:00:49,790
We have a class type of square that extends rectangle.

10
00:00:50,390 --> 00:00:53,980
So what a model does is lets you bundle this up and use it elsewhere.

11
00:00:54,380 --> 00:00:57,130
So we're going to create a new JavaScript.

12
00:00:57,680 --> 00:00:59,900
So I'm just going to go in here and say new file, right.

13
00:00:59,900 --> 00:01:04,460
Click and create a file called Shape's That Jass.

14
00:01:07,490 --> 00:01:12,350
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

15
00:01:12,350 --> 00:01:13,400
them into the module.

16
00:01:14,900 --> 00:01:19,040
Now, what makes this a module and not just another JavaScript file?

17
00:01:21,710 --> 00:01:27,240
Well, I mentioned in the slides that what you do in a module is you export your content.

18
00:01:27,710 --> 00:01:29,180
So right now we just have classes.

19
00:01:29,180 --> 00:01:30,950
But we want to do is export them.

20
00:01:31,520 --> 00:01:37,070
So we provide a keyword export and anything we want to share with the outside world.

21
00:01:38,360 --> 00:01:45,770
So we're going to share all these export class rectangle and export class square.

22
00:01:47,390 --> 00:01:47,690
All right.

23
00:01:47,700 --> 00:01:51,030
So we've got those saved that can help the world that.

24
00:01:51,890 --> 00:01:57,530
I just want to get rid of these people, produce them in the wrong one thing we're going to use them

25
00:01:57,530 --> 00:01:59,300
in from the module.

26
00:02:00,810 --> 00:02:02,030
So get rid of those.

27
00:02:03,380 --> 00:02:09,430
So right now, if we try to run this, it's not going to work because we don't know where this rectangle

28
00:02:09,440 --> 00:02:10,550
shape is coming from.

29
00:02:11,450 --> 00:02:14,360
So let's just try to verify that

30
00:02:18,020 --> 00:02:19,730
rectangle is not defined.

31
00:02:20,190 --> 00:02:23,390
So that makes sense because it doesn't know about this rectangle.

32
00:02:24,140 --> 00:02:26,130
So how do we let it know about the rectangle?

33
00:02:26,780 --> 00:02:34,970
What we need to do is to import the rectangle information so we can do that.

34
00:02:35,360 --> 00:02:41,660
But in order to do that, we have to tell our tional our program that we're running about these modules.

35
00:02:41,870 --> 00:02:45,350
And when you start using modules, that has to be in that paradigm.

36
00:02:45,950 --> 00:02:47,330
And let me show you what I mean.

37
00:02:47,330 --> 00:02:53,500
Right now, we have a script that's imparting this whole world, that jass into the HTML.

38
00:02:54,230 --> 00:02:58,660
But when you start using modules, you can't use the JavaScript type anymore.

39
00:02:58,670 --> 00:03:00,050
You have to use the module type.

40
00:03:01,190 --> 00:03:11,990
So I'm going to start by using the script and get the shapes that I would say script type equals module.

41
00:03:12,470 --> 00:03:16,370
Source equals shapes.

42
00:03:16,610 --> 00:03:17,120
Yes.

43
00:03:19,790 --> 00:03:20,710
So that's got that.

44
00:03:21,650 --> 00:03:24,440
Now we can just import the whole world too.

45
00:03:24,440 --> 00:03:29,450
But we have a problem, which is that we're going to want to click run this click method on Hello.

46
00:03:30,320 --> 00:03:31,490
And we can't do that.

47
00:03:31,490 --> 00:03:34,500
And as soon as we turn this into a module was not going to work anymore.

48
00:03:35,000 --> 00:03:36,160
Let me show you what happens.

49
00:03:40,550 --> 00:03:41,240
Say that

50
00:03:44,360 --> 00:03:46,310
uncute reference hello is not defined.

51
00:03:46,310 --> 00:03:47,160
It doesn't know about it.

52
00:03:47,960 --> 00:03:49,900
So we have to do is tell it about it.

53
00:03:50,690 --> 00:03:55,460
The only way we can do that is to import it instead of saying with the sources.

54
00:03:56,030 --> 00:04:01,520
So we're going to just say we have a script type equals module and then we're going to import our whole

55
00:04:01,520 --> 00:04:04,300
function into this HTML.

56
00:04:05,090 --> 00:04:12,200
So we use the import keyword and then we have a couple of choices we can say in brackets.

57
00:04:13,280 --> 00:04:16,900
Curly brackets, what method or what function we want to import.

58
00:04:16,910 --> 00:04:20,360
So we import hello from.

59
00:04:22,640 --> 00:04:25,370
And it's in the same folder as I will say dot slash.

60
00:04:26,660 --> 00:04:27,560
Hello World.

61
00:04:28,790 --> 00:04:31,460
Yes, Sir.

62
00:04:31,570 --> 00:04:32,000
Michael.

63
00:04:33,200 --> 00:04:35,650
So we're in a script, so this is the script.

64
00:04:36,230 --> 00:04:39,230
Now we're going to do a little bit of something tricky here.

65
00:04:39,230 --> 00:04:42,770
We're going to use the document object model to put the unclick in here.

66
00:04:44,390 --> 00:04:46,970
So what I need to do is give it an ID name.

67
00:04:48,320 --> 00:04:50,060
So say ID equals

68
00:04:53,840 --> 00:04:54,650
hello.

69
00:04:56,090 --> 00:04:56,770
Say a call.

70
00:04:56,780 --> 00:04:57,240
Hello.

71
00:04:59,900 --> 00:05:06,560
So we have an idea for this button and what we have to do is provide it with the click function in the

72
00:05:06,560 --> 00:05:08,450
way you do that with the document object models.

73
00:05:08,450 --> 00:05:16,590
First of all, you get this element, the button element, and then you add an event listener service,

74
00:05:16,700 --> 00:05:20,840
a document that get element.

75
00:05:20,840 --> 00:05:23,090
But I'd just give you that.

76
00:05:23,090 --> 00:05:26,060
I'd name call

77
00:05:29,660 --> 00:05:30,850
and then I'll move down to.

78
00:05:30,950 --> 00:05:36,710
Next one, and I'll say that ad, Yvette Lester,

79
00:05:40,520 --> 00:05:51,440
in the event that is the Klickitat and what I want to do when it's click is Granillo and that's it.

80
00:05:52,520 --> 00:05:54,350
So let's see what happens if we run now.

81
00:05:59,240 --> 00:06:07,460
So it's give me an error to request a module that just has not provided an expert named Hello well,

82
00:06:07,730 --> 00:06:12,320
hello role has become a module as well, and we're not exploiting the function.

83
00:06:13,420 --> 00:06:15,420
So we just have that the expert keyword

84
00:06:18,400 --> 00:06:19,510
now let's see what happens.

85
00:06:23,040 --> 00:06:24,660
Rectangle is not defined.

86
00:06:25,790 --> 00:06:32,960
Now, this is because the classes have not been pulled into the helo module, and again, you do that

87
00:06:32,960 --> 00:06:33,660
with the import.

88
00:06:34,220 --> 00:06:39,020
OK, so we will import our classes into this module.

89
00:06:40,160 --> 00:06:41,600
So we'll say import.

90
00:06:42,890 --> 00:06:46,080
You know, I'm skip the curly braces for a second, I'd say, from

91
00:06:48,870 --> 00:06:49,160
that.

92
00:06:50,820 --> 00:06:52,350
And the reason I did that is because.

93
00:06:54,710 --> 00:07:04,130
Once you have the file name in, it can find things for you shape rectangle square.

94
00:07:05,630 --> 00:07:09,800
So now we've imported our classes into this module.

95
00:07:11,970 --> 00:07:15,210
So now let's save and run and now should work.

96
00:07:19,710 --> 00:07:20,420
And there we go.

97
00:07:21,390 --> 00:07:26,850
So what this has done is it's allowed us to create a new module called Shape's, which we could share

98
00:07:26,850 --> 00:07:32,040
with other modules, and as a matter of fact, when you get deeper into JavaScript, you'll find out

99
00:07:32,040 --> 00:07:35,820
that you are always including modules to build things with.

100
00:07:36,780 --> 00:07:38,670
So that's our introduction to modules.

101
00:07:38,670 --> 00:07:42,060
And we'll be using those when we get into the Putting It All Together section.