All about <script>
In this article, you’ll learn about JavaScript code injection in an HTML document, the possible ways to do it, the difference between these ways, and more!
Prerequisites
You should have some familiarity with HTML/CSS. You do not need prior programming experience.
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
<script>
// Here goes your JS code
</script>You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
Is there a difference?
I am glad you asked because there is a difference, and it’s quite important.
The best practice is to put JavaScript <script> tags just before the closing </body> tag rather than in the <head> section of your HTML.
The reason for this is that HTML loads from top to bottom. The head loads first, then the body, and then everything inside the body. If we put our JavaScript in the head section, the entire JavaScript will load before loading any of the HTML, which could cause a few problems :
- If you have code in your JavaScript that alters HTML as soon as the JavaScript code loads, there won’t actually be any HTML elements available for it to affect yet, so it will seem as though the JavaScript code isn’t working, and you may get errors.
- If you have a lot of JavaScript, it can visibly slow the loading of your page because it loads all of the JavaScript before it loads any of the HTML.
When you place your JavaScript at the bottom of your HTML body, it gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time.
Let’s understand more with an example (and don’t worry about the syntax I’m using, you just need to understand what are we trying to do).
In the above code, I tried to change the color of the paragraph to green with writing my JavaScript in the <head>tag. The result for that is:
So the code didn’t affect the color of the paragraph, because as we mentioned before, the script loaded before the paragraph itself, so at that specific moment, there is no paragraph whose color we can change.
Let’s now try the other way around, at the bottom of the body:
And sure enough, we get what we want, because now the JS code knows the paragraph.
One more thing: While it is best to include your JavaScript at the end of your HTML <body>, putting your JavaScript in the <head> of your HTML doesn’t ALWAYS cause errors.
External JavaScript
JavaScript can also be used in external files. JavaScript files have file extension ‘.js’. To use an external script put the name of the script file in the src attribute of a script tag.
|<script src="myScript.js"></script>Advantages of External JavaScript:
Placing JavaScript code in external js files has some advantages over inline scripts:
- Separating HTML and JavaScript code will help manage the code base easier.
- Designers can work along with coders parallel without code conflicts.
- Works well with modern source code version control systems such as GIT. Which means each of these files will maintain a history and it can be checked in, checked out by multiple programmers.
- Code as well as HTML is easily readable.
- External JavaScript files are cached by browsers and can speed up page load times.
- Many popular JavaScript packages are available as hosted on content delivery networks (cdn) and you can simply point to them using the URL in the src, thus avoiding copying the js file to local folder.
It’s worth mentioning that there are some other advantages, but since this article is for non advanced developers, I chose to not talk about it.
async & defer
There are ways for you to load your external JavaScript without worrying about where you should include it. This image explains how these two attributes work and what’s the difference.
That’s it for today folks! I hope you enjoyed this one and I hope it helped you understand the topic. Thank you for reading this, see ya soon for more content! 😄
