Platform under construction

JavaScript Basics

Basic

Where to Place JavaScript

JavaScript can be written inline, inside a page or in external files, but production projects usually load external scripts with a clear loading strategy.

<script type="module" src="/assets/js/app.js"></script>

// app.js
import { setupMenu } from "./menu.js";
setupMenu();

JavaScript Basics

Where you place JavaScript controls when it runs and how maintainable it becomes.

Browsers read HTML from top to bottom. A script can block parsing, run before elements exist or run after the page is ready depending on how you include it.

For tiny demos, inline scripts are acceptable. For real websites, use external files. External files are easier to cache, review, reuse and organize.

Modern frontend code often uses type="module". Modules are deferred by default, can import other files and keep variables scoped to the module instead of leaking everything globally.

Inline handler

Example: onclick on an element. Easy to start, hard to maintain.

Internal script

A script tag in the HTML page. Useful for demos or page-specific bootstrapping.

External script

A separate .js file loaded by the page. Best default for real projects.

Module script

A modern external script that can import and export code cleanly.

Examples

Good JavaScript is clear, scoped and easy to debug.

External module at the end of the head

<head>
  <link rel="stylesheet" href="/assets/css/styles.css">
  <script type="module" src="/assets/js/site.js"></script>
</head>

// site.js
import { setupNavigation } from "./navigation.js";
import { setupForms } from "./forms.js";

setupNavigation();
setupForms();

Blocking and scattered behavior

<head>
  <script src="/assets/js/site.js"></script>
</head>

<button onclick="openMenu()">Menu</button>
<script>
  var globalMenuState = false;
</script>

Rules that matter

Learn the decision before memorizing the keyword.

JavaScript becomes much easier when you understand why a pattern exists. The syntax is only the surface; the real skill is choosing the right behavior for the interface.

Prefer external files

They keep templates clean and make JavaScript easier to cache and maintain.

Use type="module" for modern code

Modules defer automatically and give you import/export structure.

Use defer for classic scripts in the head

defer lets HTML parsing continue and runs the script after the document is parsed.

Avoid inline event handlers

They mix structure and behavior and become hard to test.

Run code after elements exist

A selector returns null if the element has not been parsed yet.

Keep boot files small

A main file should set up features, not contain every detail of the entire site.

Production thinking

JavaScript quality is visible in behavior, reliability and trust.

Why does this matter?

Bad script placement causes slow pages, broken selectors and code that nobody wants to touch. Good placement makes the page faster and the project easier to reason about.

Accessibility

If JavaScript controls navigation, forms or modals, it must load reliably. A broken script can trap users or hide important controls.

Production note

Use external files, modules, bundling when needed and clear loading order. Avoid random inline snippets spread through templates.

SEO note

Important links and content should not depend on late or fragile JavaScript. Crawlers handle JavaScript better than before, but reliable HTML is still stronger.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Move the script above the HTML in the editor and notice why timing matters.
Change the data attributes and update the selectors.
Add a second button that hides the note again.

Practice assignment

Do this before moving to the next topic.

Create an HTML page with one external script tag.
Explain when you would use type="module".
Find one inline onclick example online and rewrite it with addEventListener.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Where to Place JavaScript.