Linking JavaScript to HTML

Linking JavaScript (JS) to HTML can be done in three main ways: inline, internal, and external. Each has its own use case depending on the size, complexity, and reusability of your script.

🧷 1. Inline JavaScript

This method embeds JavaScript directly into an HTML element using event attributes like onclick, onmouseover, etc.

✅ Example:

 <!DOCTYPE html>
<html>
  <body>
    <button onclick="alert('Button clicked!')">Click Me</button>
  </body>
</html>

Use case: Quick actions or small scripts tied to specific elements.

📦 2. Internal JavaScript

Here, JavaScript is written inside a <script> tag within the HTML file, usually in the <head> or at the end of the <body>.

✅ Example:

<!DOCTYPE html>
<html>
  <head>
    <script>
      function greet() {
        alert('Hello from internal script!');
      }
    </script>
  </head>
  <body>
    <button onclick="greet()">Greet</button>
  </body>
</html>

Use case: Useful for page-specific scripts that don’t need to be reused elsewhere.

📁 3. External JavaScript

JavaScript is placed in a separate .js file and linked to the HTML using the src attribute of the <script> tag.

✅ HTML File:

<!DOCTYPE html>
<html>
  <head>
    <script src="script.js"></script>
  </head>
  <body>
    <button onclick="sayHi()">Say Hi</button>
  </body>
</html>

✅ script.js File:

function sayHi() {
  alert('Hi from external script!');
}

4. Where to place the <script> tag

• At the end of <body> (common): ensures HTML is parsed before script runs.
• In <head> with defer: downloads early, executes after parsing.
• In <head> with async: downloads and executes as soon as ready (order not guaranteed).

<!-- end of body (simple, reliable) -->
<body>
...content...
<script src="script.js"></script>
</body>


<!-- head with defer (executes after parsing, preserves order) -->
<head>
<script defer src="script.js"></script>
</head>


<!-- head with async (executes when ready, may be out-of-order) -->
<head>
<script async src="analytics.js"></script>
</head>

5. <script type="module">

Use ES modules in the browser. Modules are deferred by default and support import/export.

<script type="module" src="app.js"></script>


/* app.js */
import { greet } from './utils.js';


greet('Alice');


/* utils.js */
export function greet(name) {
console.log(`Hello, ${name}`);
}

6. DOMContentLoaded and safe DOM access

If your script runs before the DOM is ready, wrap code in a DOM ready handler:

document.addEventListener('DOMContentLoaded', function() {
const btn = document.getElementById('myBtn');
if (btn) {
btn.addEventListener('click', () => alert('Clicked'));
}
});

7. Best Practices

• Keep JavaScript in external files for caching and separation of concerns.
• Use defer for scripts that depend on DOM elements.
• Use async for independent scripts (analytics, trackers).
• Avoid inline event handlers (like onclick) — prefer addEventListener.
• For modern code, use type="module" and ES module syntax.

8. Small Example: index.html + script.js

<!-- index.html -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<h1 id="title">Hello</h1>
<button id="myBtn">Click</button>


<script src="script.js"></script>
</body>
</html>


/* script.js */
const title = document.getElementById('title');
const btn = document.getElementById('myBtn');


btn.addEventListener('click', () => {
title.textContent = 'Button clicked!';
});

Save the files and open index.html in a browser to test.

Use case: Best for large projects, reusable code, and cleaner HTML structure.

🧠 Summary Table

Method	Location	Reusability	Best For
Inline	Inside HTML tags	❌ No	Quick, one-off actions
Internal	<script> tag	⚠️ Limited	Page-specific logic
External	Separate .js	✅ Yes	Modular, scalable applications

📌 Mini Project: Hello User

This project will ask the user for their name using prompt() and then display a personalized greeting on the webpage.

✅ Example Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello User</title>
    <script>
      function sayHello() {
        var userName = prompt("What is your name?");
        if (userName) {
          document.getElementById("greeting").textContent = "Hello, " + userName + "!";
        }
      }
    </script>
  </head>
  <body onload="sayHello()">
    <h2 id="greeting"></h2>
  </body>
</html>

🎯 How it Works:

1. The sayHello() function runs when the page loads.
2. It uses prompt() to ask the user for their name.
3. If the user enters a name, the script updates the <h2 id="greeting"> element with a personalized message.

Try saving this code in an index.html file and open it in your browser.