JavaScript Where To
Learn where to place JavaScript code in your web pages
📍 Where to Put JavaScript?
JavaScript can be placed in different locations in your HTML document. You can put it in the <head>, <body>, or in external files.
<script>
// JavaScript code goes here
console.log("Hello World!");
</script>
JavaScript Placement Options
In <head>
JavaScript in the head section
<head>
<script>
// Code here
</script>
</head>In <body>
JavaScript in the body section
<body>
<script>
// Code here
</script>
</body>External File
JavaScript in separate .js files
<script src="script.js">
</script>Inline
JavaScript in HTML attributes
<button onclick="alert('Hi!')">
Click Me
</button>🔹 JavaScript in <head> Section
Place JavaScript in the head when you want it to load before the page content:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello from head!";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">Original text</p>
<button onclick="myFunction()">Click Me</button>
</body>
</html>Result:
When button is clicked, text changes to "Hello from head!"
🔹 JavaScript in <body> Section
Place JavaScript in the body when you want it to run after HTML elements are loaded:
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">Original text</p>
<script>
// This runs immediately when page loads
document.getElementById("demo").innerHTML = "Changed by JavaScript!";
</script>
</body>
</html>Result:
Text automatically changes to "Changed by JavaScript!" when page loads
🔹 External JavaScript Files
For larger projects, put JavaScript in separate .js files:
🔸 Create a file called "script.js":
// script.js file
function greetUser() {
let name = prompt("What's your name?");
alert("Hello, " + name + "!");
}
function showDate() {
let today = new Date();
document.getElementById("date").innerHTML = today.toDateString();
}🔸 Link it in your HTML:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<h1>External JavaScript Example</h1>
<button onclick="greetUser()">Greet Me</button>
<button onclick="showDate()">Show Date</button>
<p id="date"></p>
</body>
</html>Benefits of External Files:
- 🔄 Reusable: Use same code in multiple pages
- 📖 Readable: Keeps HTML clean and organized
- ⚡ Faster: Browser caches the file
- 👥 Teamwork: Easier for multiple developers
🔹 Best Practices
🔸 Where to Place Scripts:
- End of <body>: Best for most cases (faster page loading)
- In <head>: When script must run before page content
- External files: For reusable code and larger projects
🔸 Recommended Structure:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<!-- CSS files here -->
</head>
<body>
<!-- HTML content here -->
<h1>Welcome</h1>
<p>Page content...</p>
<!-- JavaScript at the end -->
<script src="script.js"></script>
</body>
</html>🔹 Multiple Script Files
You can include multiple JavaScript files:
<!-- Include multiple scripts -->
<script src="utilities.js"></script>
<script src="main.js"></script>
<script src="animations.js"></script>
<!-- Or mix external and internal -->
<script src="external.js"></script>
<script>
// Internal JavaScript
console.log("Page loaded!");
</script>