JAVASCRIPT Internal
JAVASCRIPT
Internal JavaScript is the embedding of JavaScript code directly into an HTML file using script tags.
Internal JavaScript
➔ Internal JavaScript is usually placed in the head or body of an HTML document.
➔ Internal JavaScript is suitable for small, page-specific scripts.
➔ 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.
Disadvantages of Inline JavaScript:
➔ Readability: Since scripting code is contained within the HTML code, it reduces readability and is not helpful in code management.
➔ Debugging: JavaScript code within the HTML view makes it difficult for developers to find and debug errors in the code.
➔ Redundancy: A JavaScript file is not written and maintained separately, and each HTML file uses the same script separately, so code redundancy can occur.
➔ Page load: Internal JavaScript code is combined with HTML code, so the server has to load larger HTML files and loading delays may occur.
➔ Reusability: Since there is no separate JavaScript file, reusability across multiple HTML views is not possible.
Syntax
<head>
<script>
// Script goes here.
</script>
</head>
Internal JavaScript in head section:
Example
<!DOCTYPE html>
<html>
<head>
<title>Internal JavaScript Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<script>
// ERROR: This runs immediately. #demoid does not exist yet!
document.getElementById("demoid").style.color = "red";
</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>
Click on the "Try it Now" button to see how it works.
Internal JavaScript in head section (using event listener):
Example
<!DOCTYPE html>
<html>
<head>
<title>Internal JavaScript Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<script>
document.addEventListener("DOMContentLoaded", () => {
// SUCCESS: Because this waits for the body to load before running
document.getElementById("demoid").style.color = "red";
});
</script>
</head>
<body>
<h3>Internal JavaScript Example</h3>
<p>Internal 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>
Click on the "Try it Now" button to see how it works.
Internal JavaScript at the end of body section:
Example
<!DOCTYPE html>
<html>
<head>
<title>Internal JavaScript Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h3>Internal JavaScript Example</h3>
<p>Internal JavaScript runs after the page content loads. So color changes.</p>
<h1 id="demoid">Hello World</h1>
<script>
// SUCCESS: The browser already loaded the content. #demoid does exist.
document.getElementById("demoid").style.color = "red";
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.