JavaScript (Part 002: Adding JavaScript to the Website)
The browser (e.g. Chrome, Firefox, MS Edge, ...) doesn't load and execute our script by default. We should tell the browser that it should load and execute the script.
How to import JavaScript to our website?
There are a couple of ways of importing JavaScript to our website:
1.Writing the JavaScript code between the 'script' opening and closing tags:
We can go to our HTML file and in there in the head section, we can add a script opening and closing tag and we can add our JavaScript code between those script tags. The downside with that is that the longer our script gets, the longer the HTML file gets and it gets more difficult to manage our website.
Example:
Inside the head section, in line number 9, there is the script opening tag and in line number 11, there is script closing tag. Between these two, we wrote a very simple JavaScript code which shows an alert to the user. (Of course we could write more complex code there but the purpose of this example is just to demonstrate how we can import scripts.)
2.Import script's file to the HTML file:
We can import our script(s) by adding a source attribute (src) to the script tag(s) and then between single quotes or double quotes, we point to the location of our script file.
Example:
In the head section, in line number 9, we added a script tag with a src attribute which links our JavaScript file to the HTML file (It actually points to the location of the JavaScript file.)
How to load and execute our script after parsing the HTML code?
In a lot of scenarios, our script depends (uses or manipulates) on our HTML elements. To make sure that the page loads first (before the script gets executed), we can take the script out of the head and move it to the end of the body section, so the browser first parses all the HTML code and finishes rendering before it executes our script. (We'll soon see an alternative strategy to that.)
Example:
In this example, we moved our script tag to the end of the body section, so our script gets executed after the HTML code was totally parsed.
Is the order of the scripts important?
The order does matter in JavaScript, so we have to import the thing we depend on, before we use it!
Example:
领英推荐
In this example, as you see, we imported two scripts. If our main.js file is somehow depended on the application.js file (for example calls a function which is declared in the application.js file or any other kind of dependency), then we will get an error and the page will fail to load correctly. However, if there is a dependency in the opposite direction, then everything will work as expected.
We need to run the scripts after the browser parsed and rendered all the HTML code.
Introducing 'defer' and 'async' attributes
Imagine we have long scripts, that they would take longer to load and execute and we have a lot of HTML code that needs to be parsed. Then, it's not that great that we wait for all the HTML code to be parsed just to start loading the scripts. We certainly want to execute them after the code was parsed because we rely on the parsed content (we don't want to execute the scripts earlier), but loading them earlier (downloading them from the server earlier), that would be a great idea. So we want to load the scripts as early as possible and the still only execute them after everything was parsed.
Maybe putting the script tag in the head section would be a good idea, but that's not ideal again, because then we might want to access an element (in our script) which is not parsed yet and this would led to an error!
The solution is an extra attribute which we can add to the script tag and that's the 'defer' attribute (We can add it without a special value!).
...
<head>
...
<script src="mainScript.js" defer></script>
<script src="anotherScript.js" defer></script>
</head>
<body>
...
</body>
...
'defer' tells the browser that it should download the scripts right away but that it should not block parsing HTML (so that it instead should continue with parsing HTML) and only execute the scripts after everything has been parsed. So it starts downloading early but it doesn't execute the scripts right away once they've finished downloading. Instead, it guarantees us that it only executes the scripts once they were downloaded and once parsing HTML finished. This approach at the end will enhance the performance of our web page.
Sometimes we also have scripts which we want to load early but which we then also want to execute early because maybe they don't rely on the HTML code, we don't establish a connection to it and therefore we don't care whether parsing HTML finished or not. This can also be achieved by using the 'async' keyword instead of the 'defer' keyword. 'async' works a bit like 'defer'. It tells the browser to start loading the script as early as possible and then the browser is not blocked but instead continues parsing HTML but the difference to 'defer' is that with 'async', the script then executes right away once it was downloaded. So it does not wait for all the HTML code to be parsed, instead it executes as early as possible, so then parsing of HTML will be paused until it is executed and only thereafter it will pick up again.
...
<head>
...
<script src="mainScript.js" async></script>
</head>
<body>
...
</body>
...
The order of script execution with 'defer' and 'async'
One Important difference is that with 'async', a script really executes as early as possible (as soon as it was downloaded). The order of the script execution is therefore not guaranteed.
With 'defer' on the other side the browser guarantees the order. So 'async' is really just a solution if we have a standalone script that doesn't rely on our HTML content.
Two important things to keep in mind:
In the example below, the 'alert' statement will be ignored, since we combined an internal and an external script.
...
<head>
...
<script src="mainScript.js">
alert('Hello JavaScript');
</script>
</head>
<body>
...
</body>
...