JAVASCRIPT External
JAVASCRIPT
External JavaScript is a good practice in web development projects where JavaScript code is placed in a separate file with a .js extension and linked to an HTML document.
External JavaScript
➔ External JavaScript can be placed in the head or body of an HTML document.
➔ This method is very useful for larger projects for coding organization and efficiency.
➔ Placing a script in the <head> section ensures that the script is loaded and executed before the page content is rendered.
➔ Placing scripts at the end of the <body> section to ensure scripts are executed after the HTML content is fully parsed and loaded.
Benefits of external JavaScript
➔ Readability: Since the scripting file is separate from the HTML code, it improves readability and is helpful in managing the code.
➔ Debugging: Separating JavaScript code from the HTML view helps developers easily find and debug errors in the code
➔ Redundancy: A JavaScript file is written and maintained separately, and creates links to multiple views, so code redundancy can be reduced.
➔ Page Load: External JavaScript files can be cached by the server and page loads can be faster.
➔ Reusability: Separating the script from the html file makes the html file smaller, while the script file can be reused in multiple views.
Syntax myscript.js file
document.querySelector("p").style.color="red";
alert('This message is from the external JS file.');
Syntax HTML file:
<body>
<p> External JavaScript is usually linked in the head or body of an HTML document.</p>
<!-- Link the script file just before the end of the body tag. -->
<script src="js/myscript.js"></script>
</body>
External JavaScript in head section:
Example
<!-- test.html file code -->
<!DOCTYPE html>
<html>
<head>
<title>Internal JavaScript Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<script src="js/myscript.js"></script>
</head>
<body>
<h3>Internal JavaScript Example</h3>
<p>Internal JavaScript runs in the head section just before the page content loads. So no color changes.</p>
<h1 id="demoid">Hello World</h1>
</body>
</html>
<!-- myscript.js file code -->
// ERROR: This runs immediately. #demoid does not exist yet!
document.getElementById("demoid").style.color = "red";
Click on the "Try it Now" button to see how it works.
External JavaScript in head section (using event listener):
Example
<!-- test.html file code -->
<!DOCTYPE html>
<html>
<head>
<title>External JavaScript Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<script src="js/myscript.js"></script>
</head>
<body>
<h3>External JavaScript Example</h3>
<p>External JavaScript typically runs in the head section just before the page content loads.
But event listeners like DOMContentLoaded can make the script wait until the HTML parsing is finished.</p>
<h1 id="demoid">Hello World</h1>
</body>
</html>
<!-- myscript.js file code -->
document.addEventListener("DOMContentLoaded", () => {
// SUCCESS: Because this waits for the body to load before running
document.getElementById("demoid").style.color = "red";
});
Click on the "Try it Now" button to see how it works.
External JavaScript at the end of body section:
Example
<!-- test.html file code -->
<!DOCTYPE html>
<html>
<head>
<title>External JavaScript Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h3>External JavaScript Example</h3>
<p>External JavaScript typically runs in the head section just before the page content loads.
But event listeners like DOMContentLoaded can make the script wait until the HTML parsing is finished.</p>
<h1 id="demoid">Hello World</h1>
<!-- External script is linked just before the end of body tag -->
<script src="js/myscript.js"></script>
</body>
</html>
<!-- myscript.js file code -->
/* SUCCESS: The browser already loaded the content. #demoid does exist. */
document.getElementById("demoid").style.color = "red";
Click on the "Try it Now" button to see how it works.