1
00:00:00,170 --> 00:00:06,440
So as you can see side by side, I opened my Visual Studio Code editor and my browser using lib server

2
00:00:06,440 --> 00:00:11,520
extension, and I already create an HTML document named index dot HTML.

3
00:00:11,540 --> 00:00:19,220
With that we create some JavaScript file Main.js library dot js and mediator dot js.

4
00:00:19,250 --> 00:00:21,050
These are all empty file.

5
00:00:21,320 --> 00:00:28,790
And if I show you my index dot HTML file, as you can see here we use script tag and inside the script

6
00:00:28,790 --> 00:00:31,210
tag we use type module.

7
00:00:31,220 --> 00:00:34,430
And also we provide a source source.

8
00:00:34,430 --> 00:00:36,280
And this is the source path.

9
00:00:36,290 --> 00:00:39,970
So we link our main.js file with this HTML file.

10
00:00:39,980 --> 00:00:46,940
Also we have library dot js file where I'm going to create our variable function and classes.

11
00:00:46,940 --> 00:00:53,020
And one most important thing you need to remember modules are work with only live servers.

12
00:00:53,030 --> 00:00:57,320
If you do not use lib server then you cannot use modules.

13
00:00:57,320 --> 00:00:59,570
You can use live server extensions.

14
00:00:59,570 --> 00:01:01,880
Otherwise you can use Xampp or WAM.

15
00:01:02,180 --> 00:01:02,810
Here.

16
00:01:02,810 --> 00:01:08,780
I'm not going to explain you how we can use live servers because it's an advanced tutorial.

17
00:01:08,960 --> 00:01:12,800
I hope you are already familiar with lib server extensions.

18
00:01:12,800 --> 00:01:16,640
And then I'm going jump into the library dot js file.

19
00:01:16,640 --> 00:01:20,960
So in this file we are going to create all the variables function and classes.

20
00:01:20,960 --> 00:01:23,390
So at first I'm going to create a variable.

21
00:01:23,390 --> 00:01:26,540
So I'm going to type late late.

22
00:01:26,780 --> 00:01:34,040
Our variable name is message message equal to inside the double quotes.

23
00:01:34,070 --> 00:01:40,340
Here I'm going to type a string which is ES6 modules.

24
00:01:41,600 --> 00:01:43,330
Then semicolon to.

25
00:01:43,340 --> 00:01:47,330
In this line it is a normal variable.

26
00:01:47,360 --> 00:01:50,330
We cannot use this variable in other files.

27
00:01:50,780 --> 00:01:57,800
And if we want to use this variable in other files for that from starting we need to type export.

28
00:01:59,540 --> 00:02:02,270
Now we can use this variable in other files.

29
00:02:02,510 --> 00:02:03,920
So I'm going to save this file.

30
00:02:03,920 --> 00:02:07,130
And now I want to use this variable in Main.js file.

31
00:02:07,830 --> 00:02:11,400
So here I'm going to import this variable.

32
00:02:11,400 --> 00:02:16,080
And as I told you for import this variable we need to use import keyword import.

33
00:02:16,110 --> 00:02:19,170
Then inside the curly braces we need to pass the variable name.

34
00:02:19,170 --> 00:02:22,470
And the variable name is message from.

35
00:02:22,710 --> 00:02:25,320
Then we need to pass the file path.

36
00:02:25,320 --> 00:02:26,610
But before the file path.

37
00:02:26,610 --> 00:02:28,830
As I told you it's a module.

38
00:02:28,830 --> 00:02:36,230
So we need to follow this characters dot backslash dot backslash library.

39
00:02:36,240 --> 00:02:39,540
This is our file and semicolon to in this line.

40
00:02:40,020 --> 00:02:43,710
Now we are able to use this variable in this file.

41
00:02:43,710 --> 00:02:47,340
And now I'm going to print this variable in our console.

42
00:02:47,340 --> 00:02:58,770
So here I'm to type console dot log inside the round braces our variable name message and semicolon

43
00:02:58,770 --> 00:03:00,990
to in this line after save this file.

44
00:03:00,990 --> 00:03:10,350
As you can see it's not working because I am an idiot and I do not pass the extension of this file library.

45
00:03:10,590 --> 00:03:12,240
Dot js.

46
00:03:12,270 --> 00:03:16,830
It's a JavaScript file, so we need to pass the extension after save this file.

47
00:03:16,830 --> 00:03:20,700
Now you can see in my console it print ES6 modules.

48
00:03:20,820 --> 00:03:25,860
Not only that, if you want to print this message in your HTML page yes you can.

49
00:03:25,980 --> 00:03:28,590
For that you need to use JavaScript Dom.

50
00:03:28,950 --> 00:03:30,660
So I'm going to comment out this line.

51
00:03:30,660 --> 00:03:34,050
And next I'm going to type document.

52
00:03:36,200 --> 00:03:37,250
Dot.

53
00:03:38,000 --> 00:03:46,610
Body dot inner HTML equal to the variable message.

54
00:03:46,970 --> 00:03:49,100
And I'm going to save this file.

55
00:03:49,590 --> 00:03:53,930
After save this file you can see in my browser it's print ES6 modules.

56
00:03:53,960 --> 00:04:00,260
And now I'm going to uncomment this line and back to the library dot js file.

57
00:04:00,380 --> 00:04:02,780
And here I'm going to create a function.

58
00:04:02,780 --> 00:04:04,790
And I want to export this function.

59
00:04:04,790 --> 00:04:09,170
So I'm going to type the export keyword export.

60
00:04:09,410 --> 00:04:13,700
Then I'm going to use function keyword to create a function function.

61
00:04:13,700 --> 00:04:15,380
And our function name is user.

62
00:04:17,030 --> 00:04:19,580
And I don't want to pass any parameter.

63
00:04:19,820 --> 00:04:27,260
Then inside the curly braces here I'm going to type console dot log.

64
00:04:27,260 --> 00:04:30,650
Inside the round braces I'm going to print a statement.

65
00:04:31,160 --> 00:04:32,570
Hello everyone.

66
00:04:34,730 --> 00:04:36,950
And semicolon too in this line.

67
00:04:36,950 --> 00:04:39,560
And now we need to import this function.

68
00:04:39,560 --> 00:04:42,110
So let's back to the main dot js file.

69
00:04:42,110 --> 00:04:47,330
And after message I want to import user function user.

70
00:04:47,690 --> 00:04:52,010
And as I told you for function we don't need to take any parenthesis.

71
00:04:52,820 --> 00:05:00,140
And if you want to call this function just you need to type the function name user and parentheses as

72
00:05:00,140 --> 00:05:04,100
like function after save this file as you can see in my console.

73
00:05:04,130 --> 00:05:05,270
Hello everyone.

74
00:05:05,510 --> 00:05:10,850
And if you want to pass any argument to this function, you can just insert the double quotes here.

75
00:05:10,850 --> 00:05:12,950
I'm going to pass the argument.

76
00:05:13,550 --> 00:05:22,430
I want to pass a name which is Add1 mange Add1 means and I'm going to save this file.

77
00:05:22,580 --> 00:05:25,580
Then I'm going back to the library dot js file.

78
00:05:25,580 --> 00:05:28,430
And also I'm going to take this argument.

79
00:05:28,460 --> 00:05:32,240
For that we need to take a variable which is name.

80
00:05:32,720 --> 00:05:35,030
And I want to use it in our console.

81
00:05:35,030 --> 00:05:38,990
So inside the console I'm going to use Backticks.

82
00:05:38,990 --> 00:05:45,320
And inside the Backticks I'm going to type hello dollar sign inside the curly braces.

83
00:05:45,350 --> 00:05:47,990
Our variable name which is name.

84
00:05:48,140 --> 00:05:50,930
If I save this file you can see the result.

85
00:05:50,960 --> 00:05:51,500
Hello.

86
00:05:51,500 --> 00:05:52,490
And one means.

87
00:05:52,640 --> 00:05:56,780
So this is work as like other functions there is no difference.

88
00:05:57,350 --> 00:06:01,250
Now let's create a class in library dot js file.

89
00:06:01,250 --> 00:06:05,300
So first I'm going to type export export.

90
00:06:05,330 --> 00:06:07,220
Then I'm going to create a class.

91
00:06:07,220 --> 00:06:09,380
So we need to use class keyword.

92
00:06:09,410 --> 00:06:10,760
Then our class name.

93
00:06:10,760 --> 00:06:14,720
And I'm going to say test inside the curly braces.

94
00:06:15,320 --> 00:06:19,640
Here I'm going to create a constructor method constructor.

95
00:06:19,850 --> 00:06:24,650
And in this constructor method I'm going to print a statement.

96
00:06:24,650 --> 00:06:31,070
So I'm going to type console dot log inside the round braces.

97
00:06:31,550 --> 00:06:33,890
Here I'm going to type constructor method.

98
00:06:39,130 --> 00:06:41,260
Then semicolon two in this line.

99
00:06:41,740 --> 00:06:47,230
So whenever we create an object using this class, it automatically calls the constructor method.

100
00:06:47,410 --> 00:06:51,730
Now let's back to the Main.js file and we need to import.

101
00:06:52,720 --> 00:06:57,220
This class just to pass the class name test.

102
00:06:57,640 --> 00:07:01,900
And then we need to create an object using this class.

103
00:07:01,900 --> 00:07:11,590
So to type late and our object name is a a equal to new object new test.

104
00:07:14,500 --> 00:07:16,120
And semicolon too, in this line.

105
00:07:16,750 --> 00:07:21,340
If I save this file, as you can see in my console, it's print constructor method.

106
00:07:22,120 --> 00:07:26,250
Also it print hello advantage from our function.

107
00:07:26,260 --> 00:07:30,250
So I'm going to comment out this line and save it again.

108
00:07:31,080 --> 00:07:33,450
Now let's back to the library dot js file.

109
00:07:33,570 --> 00:07:40,590
As you can see we use export keyword multiple time for variable for function for our class.

110
00:07:40,590 --> 00:07:45,540
So there is another method that we can export all of these in a single line.

111
00:07:46,080 --> 00:07:47,840
Let me show you how it's work.

112
00:07:47,850 --> 00:07:51,150
So here I'm going to type export key export.

113
00:07:51,180 --> 00:07:57,840
Then inside the curly braces we need to pass the variable and function and class names.

114
00:07:58,530 --> 00:08:01,800
Our variable name is message I want to export message.

115
00:08:01,800 --> 00:08:07,470
Also I want to export the function user at the same way.

116
00:08:07,470 --> 00:08:13,530
I want to export class test then semicolon to in this line.

117
00:08:13,530 --> 00:08:17,220
And now we need to remove the export keyword from this positions.

118
00:08:17,370 --> 00:08:20,100
So first I remove export keyword from the class.

119
00:08:20,100 --> 00:08:22,470
Then I remove export keyword from the function.

120
00:08:22,470 --> 00:08:26,100
And at last I'm going to remove export keyword from our variable.

121
00:08:26,490 --> 00:08:27,960
If I save this file.

122
00:08:28,320 --> 00:08:32,810
As you can see in my browser, it returned the same result.

123
00:08:32,820 --> 00:08:34,350
There is no changes.

124
00:08:34,350 --> 00:08:40,770
So this is another way that we can use export keyword and export our functions variable and classes.

125
00:08:40,770 --> 00:08:43,200
Not only that, also we can take allies name.

126
00:08:43,200 --> 00:08:45,420
So let's back to the Main.js file.

127
00:08:45,420 --> 00:08:48,690
So I want to take allies name for test.

128
00:08:48,690 --> 00:08:53,460
So here I'm going to type after test as P.

129
00:08:53,940 --> 00:09:01,440
Now we don't need to type test to create a new object using test class because here we take allies name.

130
00:09:01,440 --> 00:09:03,180
So I'm going to remove test.

131
00:09:03,180 --> 00:09:05,160
And just I'm going to type T.

132
00:09:05,490 --> 00:09:06,780
So let's save the file and see.

133
00:09:06,780 --> 00:09:08,250
Is it worked properly or not.

134
00:09:08,430 --> 00:09:09,330
After save this file.

135
00:09:09,330 --> 00:09:13,920
As you can see in our console it's also print constructor method.

136
00:09:13,950 --> 00:09:14,640
It's mean.

137
00:09:14,640 --> 00:09:16,110
It's worked perfectly.

138
00:09:16,410 --> 00:09:18,240
But what if I type the real name.

139
00:09:18,390 --> 00:09:20,670
So let's type test.

140
00:09:21,960 --> 00:09:24,660
If I save this file it's going to throw an error.

141
00:09:24,690 --> 00:09:26,880
Let me show you after save this file.

142
00:09:26,880 --> 00:09:29,130
As you can see in my console it's return an error.

143
00:09:29,160 --> 00:09:35,130
Now if we take allies name then we need to use only the allies name, not the real name.

144
00:09:36,300 --> 00:09:39,180
Now let's back to the language's file.

145
00:09:39,840 --> 00:09:44,760
Suppose we have a lot of variables, a lot of function, and a lot of classes.

146
00:09:44,760 --> 00:09:47,070
And I want to use all of these.

147
00:09:47,340 --> 00:09:51,600
Then you might think you need to type the variables name every time.

148
00:09:51,600 --> 00:09:52,740
No, it is not.

149
00:09:53,010 --> 00:09:58,200
If you want to import all of this variable function and classes you can do it just once.

150
00:09:58,350 --> 00:10:02,280
So I'm going to duplicate this line and comment out previous one.

151
00:10:02,970 --> 00:10:05,250
Here we can follow a new method to import.

152
00:10:05,280 --> 00:10:06,480
Let me show you how.

153
00:10:06,960 --> 00:10:13,350
So after import keyword I'm going to use assign star sign star mean everything.

154
00:10:13,770 --> 00:10:20,400
Also we can take a name as m instance for module.

155
00:10:21,310 --> 00:10:23,770
And you can take your any name for a name.

156
00:10:24,100 --> 00:10:26,840
And now we need to use this keyword.

157
00:10:26,860 --> 00:10:28,150
Let me show you how.

158
00:10:28,360 --> 00:10:30,910
Suppose in our console I want to print the message.

159
00:10:30,910 --> 00:10:35,260
So this time we need to use aim dot message.

160
00:10:35,860 --> 00:10:39,420
With that I want to call the function user.

161
00:10:39,430 --> 00:10:42,880
So in that case we need to type m dot user.

162
00:10:43,240 --> 00:10:48,370
And for the class name here we need to pass m dot our class name.

163
00:10:49,030 --> 00:10:52,030
If I save this file you can see in my console it's working.

164
00:10:52,810 --> 00:10:53,230
Oops.

165
00:10:53,230 --> 00:10:57,340
This time our class not work because oops.

166
00:10:57,340 --> 00:11:00,850
This time our class is not working because here we use the name.

167
00:11:00,850 --> 00:11:04,720
Now we need to use the real name because we comment out this line.

168
00:11:06,600 --> 00:11:08,910
So to save this file, you can see the result.

169
00:11:09,060 --> 00:11:09,540
Why?

170
00:11:09,540 --> 00:11:10,950
It's an undefined.

171
00:11:11,640 --> 00:11:12,930
Maybe there is a typing error.

172
00:11:12,960 --> 00:11:14,340
Yes, it's a typing error.

173
00:11:14,760 --> 00:11:19,050
If I remove this message and save it again, now you can see the result.

174
00:11:19,050 --> 00:11:19,380
Yes.

175
00:11:19,380 --> 00:11:20,050
This module.

176
00:11:20,070 --> 00:11:22,260
Hello range constructor method.

177
00:11:22,740 --> 00:11:26,310
So this starts to reduce our code just using one star.

178
00:11:26,310 --> 00:11:31,470
We can call all of these methods classes functions variables etcetera.

179
00:11:31,740 --> 00:11:33,870
So this is it for this tutorial.

180
00:11:34,020 --> 00:11:37,350
In the next tutorial we are going to learn default function.