← Back to Chapters

JavaScript – Where to Place Your Code

? JavaScript – Where to Place Your Code

? Quick Overview

JavaScript can be added to a web page in three main ways: inline (directly on an element), internal (inside a <script> tag in the HTML file), or external (in a separate .js file linked from your HTML). Choosing the right place affects readability, reusability, and performance.

For small demos, inline or internal JavaScript is fine. For real projects, external JavaScript is preferred so that code is organized and reusable across multiple pages.

? Key Concepts

  • Inline JavaScript: Code is written directly inside HTML tags using event attributes like onclick.
  • Internal JavaScript: Code is written inside a <script>...</script> block within the same HTML file.
  • External JavaScript: Code is stored in a separate .js file and linked using the src attribute of the <script> tag.
  • Placement in HTML: Scripts are usually placed at the bottom of <body> or loaded with defer so that HTML content loads first.

? Syntax & Theory

The basic way to include JavaScript is with the <script> tag:

? Basic <script> tag syntax 
<!-- Internal script -->
<script>
  // JavaScript code here
</script>

<!-- External script -->
<script src="app.js"></script>

To improve performance, scripts are often loaded at the end of <body> or with the defer or async attributes:

<!-- Recommended: load after HTML is parsed -->
<script src="app.js" defer></script>

defer loads the script in the background and executes it after the HTML is fully parsed, which is ideal for most normal page scripts.

? Code Examples

? Inline JavaScript

Inline JavaScript is written directly in the HTML element using event attributes like onclick. This is simple but not recommended for large projects because it mixes structure (HTML) and behavior (JavaScript).

? View Inline JavaScript Example 
<button onclick="alert('Hello!')">Click Me</button>

? Internal JavaScript

Internal JavaScript is written inside a <script> tag in the same HTML file. It is usually placed in the <head> or at the end of the <body>.

? View Internal JavaScript Example 
<!-- HTML file -->
<script>
  function showMessage() {
    alert("Internal JavaScript Example");
  }
</script>

<button onclick="showMessage()">Click Me</button>

? External JavaScript

External JavaScript is stored in a separate .js file and linked using the src attribute. This is the preferred way in real-world applications.

? View External JavaScript Example

HTML file (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>External JS Example</title>
</head>
<body>
  <button onclick="showMessage()">Click Me</button>

  <!-- Load JavaScript from an external file -->
  <script src="script.js" defer></script>
</body>
</html>

script.js:

// script.js
function showMessage() {
  alert("Hello from external file!");
}

? Output & Explanation

? What happens when you run these examples?

  • In the inline example, clicking the button immediately triggers alert('Hello!') because the JavaScript is written directly in the onclick attribute.
  • In the internal example, clicking the button calls the showMessage() function defined inside the <script> tag in the same HTML file.
  • In the external example, the HTML file loads script.js. When the button is clicked, showMessage() from the external file runs and shows an alert.

Although all three give similar output (an alert box), the organization of your code becomes much cleaner and easier to manage when you move logic into an external file.

Mini interactive check: Where would you place JavaScript for a larger real-world project?

Click one of the buttons to see a suggestion.

? Tips & Best Practices

  • Prefer external scripts for better organization, caching, and reuse across multiple pages.
  • Place internal or external scripts near the end of <body> or use defer so that HTML content loads first.
  • Avoid putting too much logic in inline attributes like onclick — keep HTML and JavaScript separate for cleaner code.
  • Use meaningful file names like main.js, app.js, or form-validation.js to describe the purpose of the script.

? Try It Yourself

  • Explain the difference between inline, internal, and external JavaScript in your own words.
  • Create a simple HTML page that shows an alert using inline JavaScript, then rewrite it using internal JavaScript.
  • Move your internal JavaScript into a separate file named main.js and link it using <script src="main.js" defer></script>.
  • Experiment with placing your <script> tag in the <head> vs just before </body>. Notice when errors appear if the script runs before elements exist.
  • Add another button that calls a different function from the same external file to practice reusing JavaScript code.