← Back to JavaScript Course | Chapter 1: Basics & Syntax | Lesson 2 of 12

JS Where To

Imagine you're writing a note to leave for a colleague, you could scribble it directly on their desk, stick it on a notepad next to them, or mail it separately to arrive whenever it's convenient. JavaScript can be placed in a page the same three ways: written inline directly on an element, written inside a script tag within the page itself, or kept in a completely separate file that the page links to. On a real project like cookiescursor.com, where scripts control many pages, keeping JavaScript in separate external files is almost always the cleanest and most maintainable choice.

In this page:

  1. Inline JavaScript
  2. Internal Script Tag
  3. External JavaScript Files
  4. Head vs Body Placement
  5. The defer and async Attributes
Syntax
javascript 
<script>
  // inline JavaScript
</script>

<script src="file.js"></script>

Inline JavaScript

Inline JavaScript is written directly inside an HTML element's attribute, such as onclick, running only when that specific event happens on that specific element.

Note: Inline JavaScript is fine for tiny, one-off demos, but should be avoided in real applications in favor of separating structure from behavior.
Warning: Inline event handlers mix HTML and JavaScript together, making the code harder to read, reuse, and debug as a project grows.

Example: Inline JavaScript

javascript 
<button onclick="console.log('Button clicked')">Click Me</button>

Internal Script Tag

An internal script tag places JavaScript inside the HTML document itself, wrapped in <script></script>, keeping the code separate from individual elements while still living in the same file.

Note: Internal scripts are useful for quick prototypes or single-page demos where creating a separate file feels unnecessary.
Warning: Internal scripts cannot be reused across multiple pages the way an external file can, leading to duplicated code in larger sites.

Example: Internal Script Tag

javascript 
<script>
  // Print "Running from an internal script tag." to the console
  console.log("Running from an internal script tag.");
</script>

External JavaScript Files

An external file keeps all JavaScript in its own .js file, linked into the HTML page with a script tag's src attribute, which keeps HTML clean and lets multiple pages share the exact same code.

Note: Name external files descriptively, like main.js or validation.js, so their purpose is clear at a glance across a whole project.
Warning: The browser cannot run an external script until it successfully downloads the file, a broken path silently means the script never runs.

Example: External JavaScript Files

javascript 
<script src="main.js"></script>

Head vs Body Placement

A script placed in the head runs before the browser has parsed the body, which can cause errors if it tries to access elements that don't exist yet, while a script placed just before the closing body tag runs after all HTML above it has already loaded.

Note: As a simple rule for beginners, place your script tag right before </body> unless you have a specific reason to load it earlier.
Warning: A script in the head that directly manipulates body elements without waiting for them will fail, since those elements are not yet part of the page.

Example: Head vs Body Placement

javascript 
<head>
  <script>
    console.log(document.body); // null - body not parsed yet
  </script>
</head>
<body>
  <p>Content</p>
</body>

The defer and async Attributes

defer tells the browser to download the script in the background and run it only after the whole page has been parsed, in order, while async downloads in the background and runs the script as soon as it's ready, regardless of parsing order.

Note: Use defer for scripts that need the full page structure to exist, and async for independent scripts, like analytics, that don't depend on other content.
Warning: Multiple async scripts can run in any order relative to each other, which can cause bugs if one script secretly depends on another.

Example: The defer and async Attributes

javascript 
<script src="main.js" defer></script>
<script src="analytics.js" async></script>
Live Example
Related Topics

JS Introduction · JS Output · JS Statements · JS Syntax

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Writing large amounts of JavaScript inline on HTML elements, which becomes very hard to read and maintain as a page grows.
  2. Placing a script tag before the elements it needs to access without deferring it, causing errors because those elements don't exist yet.
  3. Forgetting the src attribute points to the correct relative or absolute path when linking an external JavaScript file.
Chapter Summary
  • JavaScript can live inline on an element, inside an internal <script> tag, or in an external linked file.
  • External files are the most maintainable approach for real projects, since the same file can be reused across many pages.
  • The defer and async attributes control when an external script actually executes relative to page parsing.
Browser Support

All three placement methods, inline, internal, and external scripts, along with defer and async attributes, are supported by every modern browser.

🔒

Chapter Quiz — Complete all 12 topics to unlock

0/12 topics done

Complete these topics first:

← Previous Lesson JS Introduction Next Lesson → JS Output

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.