Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to embed JavaScript in HTML file?
There are three main ways to embed JavaScript in an HTML file: inline scripts, internal scripts, and external scripts. Each method serves different purposes and has its own advantages.
Method 1: Inline JavaScript
You can add JavaScript directly to HTML elements using event attributes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline JavaScript</title>
</head>
<body>
<h1>Inline JavaScript Example</h1>
<button onclick="alert('Hello from inline JavaScript!')">Click Me</button>
</body>
</html>
Method 2: Internal JavaScript
Use the <script> tag within the HTML document to write JavaScript code directly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal JavaScript</title>
</head>
<body>
<h1>Internal JavaScript Example</h1>
<div class="result"></div>
<script>
let resEle = document.querySelector(".result");
resEle.innerHTML = "Internal JavaScript loaded successfully!";
</script>
</body>
</html>
Method 3: External JavaScript
Link to an external JavaScript file using the src attribute of the <script> tag:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External JavaScript</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>External JavaScript Example</h1>
<div class="result"></div>
<script src="script.js" defer></script>
</body>
</html>
script.js
let resEle = document.querySelector(".result");
resEle.innerHTML = "External JavaScript loaded successfully!";
Complete Example: All Methods Combined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Embedding Methods</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.result {
font-size: 16px;
margin: 10px 0;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>JavaScript Embedding Methods</h1>
<!-- Inline JavaScript -->
<button onclick="showInlineMessage()">Inline JavaScript</button>
<div id="inline-result" class="result"></div>
<div id="internal-result" class="result"></div>
<!-- Internal JavaScript -->
<script>
function showInlineMessage() {
document.getElementById('inline-result').innerHTML = 'Inline JavaScript executed!';
}
// Internal script execution
document.getElementById('internal-result').innerHTML = 'Internal JavaScript loaded!';
</script>
</body>
</html>
Comparison
| Method | Use Case | Advantages | Disadvantages |
|---|---|---|---|
| Inline | Simple event handlers | Quick and direct | Hard to maintain, mixes HTML and JS |
| Internal | Page-specific scripts | Self-contained | Not reusable across pages |
| External | Reusable code | Clean separation, cacheable | Additional HTTP request |
Key Points
- Use the
deferattribute with external scripts to ensure DOM is loaded first - Place scripts before the closing
</body>tag for better performance - External scripts are preferred for larger applications due to better maintainability
- Inline JavaScript should be avoided in modern development practices
Conclusion
External JavaScript files are the recommended approach for most projects as they provide better code organization and reusability. Use internal scripts for page-specific functionality and avoid inline JavaScript in production code.
Updated on: 2026-03-15T23:18:59+05:30
605 Views
Advertisements