This is where we left in the previous video whereby we wrote our first JavaScript code.
In this video we are going to learn a couple of ways to include JavaScript in HTML code and I will show
you the recommended one back to Visual Studio code.
I forgot to explain this syntax.
This is what we call comment in JavaScript and comments are ignored by the browser, meaning it is not
visible to the end user, but instead it gives more details about our code.
So we use what is called double forward slash and you can enter or type anything here.
Great.
So I'll be using comments a lot.
So back to business.
How are we going to link or how many ways we can link JavaScript in HTML?
And I'm going to add the options or the types inside the HTML as comment.
And we can add comment by using this syntax.
And I'm going to have multi-line comment.
And the first method is called inline scripting.
What does it mean?
This simply means that including your JavaScript code directly in your HTML file using the script tag.
And that is what we have implemented.
So this is what you call the inline scripting.
And this method is useful for small pieces of JavaScript code.
But in real world applications, we don't use this.
And let's say that we're going to have more lines of JavaScript code.
As you can see, this file will have more codes, including the JavaScript and then the HTML and it
will be very difficult for debugging and maintaining.
So this approach is not the ideal way.
The next option is using what is called the external JavaScript.
So inside the head tag, this is the first option.
And the second option I'm going to add the comment.
And as that which goes like this JavaScript external file inside the head tag.
Meaning that we are going to write our JavaScript code in a separate file and we link the JavaScript
to the HTML.
So I'm going to remove this comment.
And now let me comment out this.
And let me show you how we are going to use the external method.
And it goes like this.
Inside the folder structure here, we can create one folder for our JavaScript files.
But since we are getting started, I'm going to create the file in line with the HTML.
And it goes like this.
I'm going to make use of script.
The script here is the name of my JavaScript file and dot the extension in this case JS, which represents
JavaScript.
And the name here it can be anything.
But make sure that the name is descriptive, so I'll go for script dot js.
And over here we can write any JavaScript code.
So let's write our first line of JavaScript as.
This is another method.
Now, save it.
And let's have a look here.
As you can see, we don't see our JavaScript code.
So how are we going to connect the JavaScript, which is this?
And then the HTML as is done right now, these two files are independent, meaning they are not related.
So how are we going to connect?
And inside the head tag we are going to use the same script tag and it goes like this script and inside
the first angle bracket we are going to pass in couple of attributes and that is the Urswick, which
represents the source of the file.
And the file is located in the same file as the HTML.
So I can use period and forward slash and I have the file if I save this and check it out.
And now I can see my JavaScript code are being run inside the browser.
And for this approach it is not the recommended way of using JavaScript.
Let me show you what I mean here to better understand that unless you know how the browsers displaces
or render our HTML and JavaScript and any other files before we are going to see our application.
First of all, the browser will load the HTML and it will start from top to bottom.
So it will start to load these ones, these ones, and come down here and going to load the JavaScript.
And for this approach, in case you're going to have more lines of code of JavaScript, as you can see,
is going to slow down the rendering of the application.
And also it can happen that our JavaScript file will rely on the HTML document.
For example, if you want to perform some operations like deleting using the Dom and other operations,
unless the HTML load first before our JavaScript can operate on the HTML.
And if you look inside the console here, if you click on Element, as you can see, this is our HTML.
The browser has loaded our HTML.
Likewise our JavaScript.
So how are we going to avoid this calamities or problems?
Again, let me show you how the browser renders our application.
First of all, the browser will parses the HTML as we see here and it will halt or stop rendering when
it encounters a script tag.
Meaning that it will wait for the JavaScript to load, then execute the JavaScript file and then continue
to parse the HTML.
And this can lead to slower perceived load time for the user.
If the script is large or the network is slow.
So how are we going to improve this?
Well, that is why we have another option called using the external method.
But instead we are going to use additional attributes on the script tag.
Now let me copy that and comment that and here paste it here and I will say head tag, wait, defer
attribute.
So here I'm going to pass in the defer.
As the name implies, we are going to defer the JavaScript.
And this attribute indicates that the script in this case, the Java script, should be fetched asynchronously
while the HTML document is passing and be executed as soon as it is available.
And even if the person is not yet complete, this can lead to HTML passing pauses.
If the script loads and executes before the passing is complete.
So this defer attribute helps the file to load asynchronously whilst passing the HTML.
So if I save this.
Click on console.
I still see the JavaScript code here that has been displayed.
Well, for this method, we can improve upon it by passing additional attribute to the script.
So this brings us to another important option called using defer attribute.
So I'm going to copy this.
And down here, paste it, make sure you are inside the head tag.
And let me comment out this one.
And here the next option is going to be using the external file.
But instead, wait, defer attribute.
Great.
So here we are going to pass in defer attribute.
What does it mean?
This indicates that the script or the JavaScript should be executed only after the HTML document has
been fully parsed.
Unlike the previous method, the passing of HTML is not blocked.
The script is fetched asynchronously while the HTML is passing.
So for this one, the browser is not going to stop loading the HTML while waiting for the JavaScript
to load.
So if I save this, as you can see, we still see the JavaScript code.
Then another option is using the same external method but with different attributes.
So comment out this and here wait async attribute.
Now I'm going to pass in here as async.
What does it mean?
This indicates that the script should be fetched asynchronously while the HTML document is passing and
be executed as soon as it is available, even if the person is not yet complete.
So this means that it's going to work asynchronously, meaning it will not block other operation.
But for they defer.
It will wait until the estimate document are loaded before the JavaScript file.
If I save this one, everything remains the same.
The next option is using inside the body tag, so I will copy that and let me comment out this.
Now we are moving away from the head tag.
Now inside the body tag.
So here I'm going to use external method with the body tag.
And for this we are going to place the JavaScript below all the HTML.
And like I said, it loads from top to bottom.
So by the time it will get here, all our HTML code here will finish loading and let me remove the async
here.
So if I save it, everything remains the same.
So this method and then the with async and with defer work in the same way, but it depends on some
use cases.
So we will go by placing it below the body or placing it inside the head tag.
But instead we are going to use defer or async.
And let me show you a couple of ways we can use JavaScript inside HTML and we have what is called using
the event handler attribute inside the body tag here.
I'm going to add a comment.
Meaning that I'm going to write JavaScript in line with HTML attribute.
For this, if I provide a button here and I will say click me.
And on the button.
We're going to pass in a couple of attributes.
And the first one, we're going to be the onClick.
And inside here, I can provide any JavaScript code.
For the meantime, let's console dot log.
And I will say.
This is from the button or button clicked.
If I save this one.
Let's have a look.
If I click on click Me.
As you can see, we have the JavaScript code here.
The next option is using JavaScript URL.
What do I mean?
Let me show you here.
Let me put it here below this one and I will say JavaScript in the URL and we are going to use the a
link here or a attribute or a tag here and inside we are now going to provide any path, but instead
we are going to write JavaScript by providing JavaScript and colon.
After that we can write any JavaScript code.
And I will say from a tag and I'll provide something like register.
All right.
And the value I will say.
Registered successfully.
Oh, let me say registered.
Great.
So now let's see if we're going to have this message inside the console.
If I click on that, I have registered.
If I click on, click Me, I have it.
So these are a couple of ways we can use JavaScript in HTML, but the recommended ones are using inside
the body and using inside the head tag by using defer or async attribute.