Coding Newbie

website, sitemap, plan-3407280.jpg

How to add JavaScript to your website?

Adding JavaScript to your website is quite a simple process. We will take a closer look how can you do it and what is the preferable way.

If you are unsure what JavaScript is and you are interested to read more about it first, you definitely should read an article “What Is JavaScript? Complete Beginners Guide”.

How can you add JavaScript to your code?

There are two possible ways to integrate JavaScript to a website: Internal Script and External File.

Internal Script

The internal way to add JavaScript is to include it directly in your HTML code.

Internal adding of JavaScript code is done by using the <script> tag within <head> or <body> section of HTML document. And entire JavaScript code is written inside <script> tags.

JavaScript code added within the HEAD section:

<!DOCTYPE html>
<html>

  <head>
    <script>
        // JAVASCRIPT CODE
    </script>
  </head>

  <body>

  </body>

</html>

JavaScript code added within the BODY section:

<!DOCTYPE html>
<html>

  <head>

  </head>

  <body>

    <script>
        // JAVASCRIPT CODE
    </script>
  </body>

</html>

External JavaScript File

Usually you want to place all your JavaScript code in a separate file. How do you create such a file?

However, now we need to connect our HTML file with a .js file. How do we do that?

To connect our JavaScript file with our HTML file, we must add a <script> tag in the head area. Here, we will set the source path toward our .js file:

<head>
    <script src="filelocation/javascriptfile.js"></script>
</head>

Now, our HTML and JavaScript files are connected, and we are ready to start writing our JavaScript code.

Since I started learning JavaScript, I have preferred keeping JS code in a separate file. It has always made more sense to me to keep my HTML, CSS, and JS code in different files. And it appears that this was a better choice, because keeping the code separate is better for browsers’ performance, especially if you have more lines of code.

However, having multiple files creates more https requests, which can increase response time of your website and make it load slower.

Taking all that into consideration, general practice would clearly be:

If you have just a few lines of JavaScript code, maybe a better choice is internal JS. In other cases, it is still recommended to have an external .js document.

Conclusion

To summarize, there are two possible ways to add JavaScript in your code: internal and external. Internal practice means adding JavaScript code within your HTML file, with the use of <script> tags. Unlike internal way, external practice represents creating separate JavaScript file, and then connecting it with your HTML file.

Which one you choose, depends without a doubt of the complexity of your code and the way you find more suitable to your coding style. With this in mind, if you have a simple JavaScript code consisted of few lines, without a doubt you should pick internal script practice. On the other hand, if you have a complex code, especially if it is long code, clearly the better option would be external JavaScript file.

%d bloggers like this: