So as you can see side by side, I opened my Visual Studio Code editor and my browser using lib server
extension, and I already create an HTML document named index dot HTML.
With that we create some JavaScript file Main.js library dot js and mediator dot js.
These are all empty file.
And if I show you my index dot HTML file, as you can see here we use script tag and inside the script
tag we use type module.
And also we provide a source source.
And this is the source path.
So we link our main.js file with this HTML file.
Also we have library dot js file where I'm going to create our variable function and classes.
And one most important thing you need to remember modules are work with only live servers.
If you do not use lib server then you cannot use modules.
You can use live server extensions.
Otherwise you can use Xampp or WAM.
Here.
I'm not going to explain you how we can use live servers because it's an advanced tutorial.
I hope you are already familiar with lib server extensions.
And then I'm going jump into the library dot js file.
So in this file we are going to create all the variables function and classes.
So at first I'm going to create a variable.
So I'm going to type late late.
Our variable name is message message equal to inside the double quotes.
Here I'm going to type a string which is ES6 modules.
Then semicolon to.
In this line it is a normal variable.
We cannot use this variable in other files.
And if we want to use this variable in other files for that from starting we need to type export.
Now we can use this variable in other files.
So I'm going to save this file.
And now I want to use this variable in Main.js file.
So here I'm going to import this variable.
And as I told you for import this variable we need to use import keyword import.
Then inside the curly braces we need to pass the variable name.
And the variable name is message from.
Then we need to pass the file path.
But before the file path.
As I told you it's a module.
So we need to follow this characters dot backslash dot backslash library.
This is our file and semicolon to in this line.
Now we are able to use this variable in this file.
And now I'm going to print this variable in our console.
So here I'm to type console dot log inside the round braces our variable name message and semicolon
to in this line after save this file.
As you can see it's not working because I am an idiot and I do not pass the extension of this file library.
Dot js.
It's a JavaScript file, so we need to pass the extension after save this file.
Now you can see in my console it print ES6 modules.
Not only that, if you want to print this message in your HTML page yes you can.
For that you need to use JavaScript Dom.
So I'm going to comment out this line.
And next I'm going to type document.
Dot.
Body dot inner HTML equal to the variable message.
And I'm going to save this file.
After save this file you can see in my browser it's print ES6 modules.
And now I'm going to uncomment this line and back to the library dot js file.
And here I'm going to create a function.
And I want to export this function.
So I'm going to type the export keyword export.
Then I'm going to use function keyword to create a function function.
And our function name is user.
And I don't want to pass any parameter.
Then inside the curly braces here I'm going to type console dot log.
Inside the round braces I'm going to print a statement.
Hello everyone.
And semicolon too in this line.
And now we need to import this function.
So let's back to the main dot js file.
And after message I want to import user function user.
And as I told you for function we don't need to take any parenthesis.
And if you want to call this function just you need to type the function name user and parentheses as
like function after save this file as you can see in my console.
Hello everyone.
And if you want to pass any argument to this function, you can just insert the double quotes here.
I'm going to pass the argument.
I want to pass a name which is Add1 mange Add1 means and I'm going to save this file.
Then I'm going back to the library dot js file.
And also I'm going to take this argument.
For that we need to take a variable which is name.
And I want to use it in our console.
So inside the console I'm going to use Backticks.
And inside the Backticks I'm going to type hello dollar sign inside the curly braces.
Our variable name which is name.
If I save this file you can see the result.
Hello.
And one means.
So this is work as like other functions there is no difference.
Now let's create a class in library dot js file.
So first I'm going to type export export.
Then I'm going to create a class.
So we need to use class keyword.
Then our class name.
And I'm going to say test inside the curly braces.
Here I'm going to create a constructor method constructor.
And in this constructor method I'm going to print a statement.
So I'm going to type console dot log inside the round braces.
Here I'm going to type constructor method.
Then semicolon two in this line.
So whenever we create an object using this class, it automatically calls the constructor method.
Now let's back to the Main.js file and we need to import.
This class just to pass the class name test.
And then we need to create an object using this class.
So to type late and our object name is a a equal to new object new test.
And semicolon too, in this line.
If I save this file, as you can see in my console, it's print constructor method.
Also it print hello advantage from our function.
So I'm going to comment out this line and save it again.
Now let's back to the library dot js file.
As you can see we use export keyword multiple time for variable for function for our class.
So there is another method that we can export all of these in a single line.
Let me show you how it's work.
So here I'm going to type export key export.
Then inside the curly braces we need to pass the variable and function and class names.
Our variable name is message I want to export message.
Also I want to export the function user at the same way.
I want to export class test then semicolon to in this line.
And now we need to remove the export keyword from this positions.
So first I remove export keyword from the class.
Then I remove export keyword from the function.
And at last I'm going to remove export keyword from our variable.
If I save this file.
As you can see in my browser, it returned the same result.
There is no changes.
So this is another way that we can use export keyword and export our functions variable and classes.
Not only that, also we can take allies name.
So let's back to the Main.js file.
So I want to take allies name for test.
So here I'm going to type after test as P.
Now we don't need to type test to create a new object using test class because here we take allies name.
So I'm going to remove test.
And just I'm going to type T.
So let's save the file and see.
Is it worked properly or not.
After save this file.
As you can see in our console it's also print constructor method.
It's mean.
It's worked perfectly.
But what if I type the real name.
So let's type test.
If I save this file it's going to throw an error.
Let me show you after save this file.
As you can see in my console it's return an error.
Now if we take allies name then we need to use only the allies name, not the real name.
Now let's back to the language's file.
Suppose we have a lot of variables, a lot of function, and a lot of classes.
And I want to use all of these.
Then you might think you need to type the variables name every time.
No, it is not.
If you want to import all of this variable function and classes you can do it just once.
So I'm going to duplicate this line and comment out previous one.
Here we can follow a new method to import.
Let me show you how.
So after import keyword I'm going to use assign star sign star mean everything.
Also we can take a name as m instance for module.
And you can take your any name for a name.
And now we need to use this keyword.
Let me show you how.
Suppose in our console I want to print the message.
So this time we need to use aim dot message.
With that I want to call the function user.
So in that case we need to type m dot user.
And for the class name here we need to pass m dot our class name.
If I save this file you can see in my console it's working.
Oops.
This time our class not work because oops.
This time our class is not working because here we use the name.
Now we need to use the real name because we comment out this line.
So to save this file, you can see the result.
Why?
It's an undefined.
Maybe there is a typing error.
Yes, it's a typing error.
If I remove this message and save it again, now you can see the result.
Yes.
This module.
Hello range constructor method.
So this starts to reduce our code just using one star.
We can call all of these methods classes functions variables etcetera.
So this is it for this tutorial.
In the next tutorial we are going to learn default function.