Platform under construction

JavaScript Basics

Basic

JavaScript Introduction

JavaScript is the programming language that turns structured pages into interactive products, from small buttons to complete web applications.

const button = document.querySelector("[data-theme-button]");

button.addEventListener("click", () => {
  document.body.classList.toggle("is-dark");
});

JavaScript Basics

JavaScript adds behavior to HTML and CSS.

HTML gives content meaning. CSS gives that content shape, spacing, color and layout. JavaScript adds decisions, memory, interaction and communication with other systems.

A browser reads JavaScript as instructions. Those instructions can react to clicks, validate forms, fetch data, update the page, store small pieces of state and control complex user flows.

The professional mindset is simple: use JavaScript when the page needs behavior. Do not use it to replace semantic HTML or to fake things that the browser already gives you for free.

Language

JavaScript has values, variables, functions, objects, arrays, conditions, loops and modules.

Browser behavior

In the browser, JavaScript can read and update the DOM, listen to events and call web APIs.

Server runtime

With runtimes such as Node.js, JavaScript can also run outside the browser.

Progressive thinking

Good JavaScript improves the page without destroying basic usability.

Examples

Good JavaScript is clear, scoped and easy to debug.

Behavior attached from JavaScript

<button class="menu-button" type="button" data-menu-button aria-expanded="false">
  Menu
</button>

<nav data-menu hidden>
  <a href="/html/">HTML</a>
  <a href="/css/">CSS</a>
</nav>

<script>
const button = document.querySelector("[data-menu-button]");
const menu = document.querySelector("[data-menu]");

button.addEventListener("click", () => {
  const isOpen = button.getAttribute("aria-expanded") === "true";
  button.setAttribute("aria-expanded", String(!isOpen));
  menu.hidden = isOpen;
});
</script>

Behavior mixed into the HTML

<button onclick="document.querySelector('.menu').style.display = 'block'">
  Open
</button>

<div class="menu" style="display: none;">
  Links
</div>

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.

Start with working HTML

A button should be a button, a link should be a link and a form should be a form before JavaScript gets involved.

Select clear hooks

Use classes or data attributes to find elements. Keep those hooks stable and easy to search.

React to events

Most browser JavaScript starts with an event: click, input, submit, load, keydown or a custom event.

Update state intentionally

When something opens, closes, loads or fails, keep the visible state and the technical state in sync.

Respect accessibility

Interactive code should also update focus, ARIA state and readable feedback when needed.

Keep scripts organized

Small experiments can live inline. Real projects need external files and modules.

Production thinking

JavaScript quality is visible in behavior, reliability and trust.

Why does this matter?

JavaScript is often the difference between a page that looks finished and a product that actually responds. Used well, it creates speed, clarity and confidence for the user.

Accessibility

The strongest JavaScript enhances native controls instead of replacing them. If code breaks, the page should still communicate as much as possible.

Production note

Production JavaScript needs structure: small functions, predictable files, useful errors, browser support checks and no random code scattered through templates.

SEO note

Search engines can process JavaScript, but important content and links should still be available as real HTML whenever possible.

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.

Change the message text inside the click handler.
Add a second paragraph and update it from the same button.
Change the button label after it has been clicked.

Practice assignment

Do this before moving to the next topic.

Create a small HTML block with a heading, paragraph and button.
Select the paragraph with JavaScript.
Use addEventListener to update the paragraph after a click.
Explain why the button still belongs in HTML and the behavior belongs in JavaScript.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand JavaScript Introduction.