Menu
I have two external javascript files within my html page.
I need to make sure that the first file, script1.js, is run before my second script, script2.js.
I have them within the body of my html page; how can I ensure that script2 is not used until the functions in script1 are run?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- Script 1 -->
<script src="js/script1.js"></script>
<!-- Script 2 -->
<script src="js/script2.js"></script>
</body>
</html>
403
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file.
Determining What JavaScript Will Run When Designing your web page using JavaScript requires attention to the order in which your code appears and whether you are encapsulating code into functions or objects, all of which impact the order in which the code runs.
In JavaScript, variables can be accessed from another file using the <script> tags or the import or export statement. The script tag is mainly used when we want to access variable of a JavaScript file in an HTML file.
The browser will execute the scripts in the order it finds them. If you call an external script, it will block the page until the script has been loaded and executed.
So if your code is :
<body>
<!-- Script 1 -->
<script src="js/script1.js"></script>
<!-- Script 2 -->
<script src="js/script2.js"></script>
</body>
Script 1 will be run before Script 2.
183
<script> tag manage it for you... but read on...
JavaScript is synchronous, that means things it will executed line by line by default...
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- Script 1 -->
<script src="js/script1.js"></script> <!-- first gets executed and get finished -->
<!-- Script 2 -->
<script src="js/script2.js"></script> <!-- then second gets executed and get finished -->
</body>
</html>
But at the same JavaScript could be asynchronous too...
So there is an attribute for <script> tag which make the loading asynchronous... async attribute on script tag...
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- Script 1 -->
<script src="js/script1.js" async></script> <!-- load asynchronously -->
<!-- Script 2 -->
<script src="js/script2.js" async></script> <!-- load asynchronously -->
</body>
</html>
Definition and Usage
The async attribute is a boolean attribute.When present, it specifies that the script will be executed asynchronously as soon as it is available.
Note: The async attribute is only for external scripts (and should only be used if the src attribute is present).
Note: There are several ways an external script can be executed:
If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing) If async is not present and defer is present: The script is executed when the page has finished parsing If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
