How to Link JavaScript to HTML Document
First, inline script into an HTML document. It is used basically for two or four lines of javascript code. That means we only use inline javascript code for a small or very tiny function for our HTML document. The only advantage of an inline script is that we don't have to load another file. But it is pretty bad for separating the website content from the JavaScript logic. There is a script tag in HTML where we can write JavaScript code. In this case, we will use the script at the end of the HTML document because the HTML document needs to fully load on a browser and then the JavaScript code will work properly. Because we know that any code will run into a web browser line by line. For example, we add a JavaScript function that can be fired with the click of a button. If we add the JavaScript code in the head section of an HTML document, the function will run before the button is visible. The below pieces of code help you to clearly understand the matter.
 |
| Output |
For example, I am using a simple HTML document with some simple CSS code. I am using the JavaScript code at the end of the body tag. The HTML document will be fully loaded into a web browser, then the Java script code will be run. This concept is very very important. Remember this concept carefully. In the script code, I take a variable with a and set its value to 5.
In JavaScript code, we usually add a semicolon to the end of each line. This will then let JavaScript know that we are done with this line. It is actually not really mandatory. I saw some people omit the semicolon. But I still consider it good coding practice, and I believe it makes the code a bit cleaner and easier to read.
Don't worry, I will describe everything in the later article. Now you just code the code and use it for practice. Then, I make a condition where I compare the value with 5. If the a value is equal to 5, the browser console shows the first block of code that "The a is defined with 5". Otherwise, it will show the next block of code in the console, which is "The a is now equal to 5". which we can see in the output picture.
Second, link a JavaScript file with an HTML document like the below example. Let's take this javascript, which I wrote into the script tag, and make a file with a js extension and put the copied code in. So what do we have right now? We need to attach the JS file to the HTML document. How can we do it? We simply need the script tag that we used before. In this script tag, we need to add an attribute in the first portion. The attribute name is src. We simply type src and wire equal sign, followed by the JS file location, as shown below. Now we have a better separation of concerns between presentation and logic. This also makes it easier to maintain code in the log. So, in that case, please make 100% sure that the script JS file is in the exact file location. If you reload the browser, the result should be the same.
So this is the second method, which is much cleaner and much easier to work with. Now you know how to link a JavaScript file to an HTML document file and then how to run it all in the browser. That means you are now finally able to really start learning the JavaScript programming language. If you have any queries about this post or article, you can simply ask me to leave a comment. I will try to respond as soon as possible.
0 Comments