• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

coding learning websites codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JS Where To

← Previous Next →

🌐 JavaScript – Where To Place JavaScript?

JavaScript can be written in three primary locations within an HTML document:

🧠 1. Inside the <head> tag

You can place your script inside the <head> section of your HTML. This is useful when your JavaScript code must load before the page content.

<!DOCTYPE html>
<html>
<head>
  <script>
    alert("This script is in the head section.");
  </script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

🔎 Note: Scripts in the head execute before the HTML body is rendered, which may cause issues if the script tries to access elements that haven’t been loaded yet.

📦 2. Inside the <body> tag (at the bottom)

Best practice is to place JavaScript at the end of the body tag so that the HTML content is fully loaded before any JavaScript runs.

<!DOCTYPE html>
<html>
<body>
  <h1>This is my page</h1>
  <p>JavaScript is below:</p>

  <script>
    alert("This script is at the end of body.");
  </script>
</body>
</html>

✔️ Why at the bottom?
Because it allows the page to load faster, and DOM elements are available when the script runs.

📂 3. In an External File

You can write JavaScript in a separate .js file and link it in your HTML using the src attribute.

👉 HTML File:
<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>
<script src="script.js"></script>

</body>
</html>
👉 script.js:
alert("Hello from external file!");

🔒 Tip: This is the most scalable and clean method when working on large projects.

⚠️ Important Notes:

  • You can combine methods, but avoid cluttering the HTML with too much inline JavaScript.

  • Modern apps usually use external files for better organization, reuse, and performance.

Practice Questions

Q1. How do you write a JavaScript script inside the <head> tag that displays an alert saying "Page loading"?

Q2. How do you place a script inside the <body> tag that shows a welcome message when the page loads?

Q3. How can you create an external JavaScript file named main.js that displays an alert saying "External Script" and link it to your HTML file?

Q4. What happens when you try to access a DOM element in a <script> placed inside the <head> before the HTML body is rendered? Demonstrate with code.

Q5. How can you resolve the issue of accessing an element before it is rendered by moving the script to the correct location?

Q6. How do you include two JavaScript <script> tags in your HTML, one in the <head> and one at the end of the <body>? Observe and explain the execution order.

Q7. How can you write an external script that changes the background color of a webpage when it loads?

Q8. How do you create a button in HTML and attach an onclick event using an external JavaScript file that shows an alert when clicked?

Q9. How do you use the defer attribute in a <script> tag to ensure that the external script runs after the HTML document has been fully parsed?

Q10. How do you create an external script that logs a message like "Script loaded successfully" in the browser console?

← Previous Next →

JavaScript

online coding class codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

codepractice logo
Login
Go Back Top