HTML <script> Tag – Adding JavaScript
📌 Introduction
The <script> tag is used to add JavaScript to your HTML page.
JavaScript makes your website interactive, allowing you to:
- Handle user actions (clicks, inputs)
- Modify content dynamically
- Create animations and logic
🧱 Basic Syntax
1. Internal JavaScript
<script>
// JavaScript code here
</script>
2. External JavaScript
<script src="app.js"></script>
✔ Loads JavaScript from another file
💡 Example (Internal)
<!DOCTYPE html>
<html>
<head>
<title>Script Example</title>
</head>
<body>
<h1 id="title">Hello</h1>
<script>
document.getElementById("title").innerText = "Hello, anyName!";
</script>
</body>
</html>
🖥️ Output Explanation
- The page initially has: Hello
- JavaScript changes it to: Hello, anyName!
💡 Example (External)
HTML file:
<script src="app.js"></script>
app.js file:
alert("Welcome to my website!");
✔ Shows a popup when the page loads
🎯 Where to Place <script>
Option 1: Inside <head>
<head>
<script src="app.js"></script>
</head>
⚠️ May load before the page content
Option 2: Before </body> (Recommended)
<body>
<h1>Hello</h1>
<script src="app.js"></script>
</body>
✔ Ensures HTML loads first ✔ Better performance
⚡ Using defer
<script src="app.js" defer></script>
✔ Loads script in background ✔ Runs after HTML is parsed
🎯 Common Use Cases
- Handling button clicks
- Form validation
- Dynamic content updates
- API calls
⚠️ Tips & Best Practices
- Prefer external JavaScript files
- Place scripts before
</body>or usedefer - Keep JavaScript separate from HTML for clean code
🚫 Common Mistakes
- Forgetting
srcpath ❌ - Placing script too early (before elements exist) ❌
- Mixing too much JS inside HTML ❌
🧪 Mini Exercise
- Create a button:
<button onclick="showMessage()">Click me</button>
- Add script:
<script>
function showMessage() {
alert("Hello!");
}
</script>
👉 Click the button and see what happens