• Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

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

JavaScript

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?

JS Where To Quiz

Q1: Which location is recommended for placing JavaScript in an HTML file for better page load performance?

A. Inside <head>
B. At the top of <body>
C. At the end of <body>
D. Inside <footer>

Q2: Which HTML tag is used to include JavaScript code in an HTML document?

A. <js>
B. <script>
C. <javascript>
D. <code>

Q3: Which attribute of the <script> tag is used to include an external JavaScript file?

A. href
B. link
C. src
D. rel

Q4: What is the correct file extension for a JavaScript file?

A. .jscript
B. .java
C. .javascript
D. .js

Q5: What will most likely happen if you place a <script> in the <head> that tries to access a DOM element in the <body>?

A. It will work normally
B. It will cause a syntax error
C. It may fail if the element hasn't loaded yet
D. It will slow down the browser

Q6: Which of the following is the correct way to include an external script in your HTML file?

A. <script href="main.js">
B. <script file="main.js">
C. <script src="main.js">
D. <js src="main.js">

Q7: What does the defer attribute do when used in a <script> tag?

A. It prevents the script from loading
B. It allows the script to run after the HTML is fully parsed
C. It makes the script load immediately
D. It converts the script to a comment

Q8: Which of the following is an advantage of using external JavaScript files?

A. Smaller page size
B. Better caching
C. Code reuse
D. All of the above

Q9: Which section of an HTML document is not recommended for placing JavaScript code?

A. <head>
B. <body>
C. External file
D. <title>

Q10: What is the correct syntax for writing a single-line comment in JavaScript?

A. <!-- This is a comment -->
B. ## This is a comment
C. // This is a comment
D. ** This is a comment **
← Previous Next →
Login
Go Back Top