JavaScript Introduction

JavaScript is the programming language of the web. When you click a button and something happens without the page reloading, JavaScript is usually doing the work. It can change text, show and hide elements, check what a visitor typed, and talk to servers. Every modern browser runs it, and no special setup is needed to get started.

JavaScript is not the same as HTML or CSS. HTML builds the structure of a page, and CSS styles it. JavaScript adds behavior. The browser reads the HTML from top to bottom, and when it reaches a script tag, it runs the JavaScript inside. You can change text, hide elements, and respond to user actions, all without reloading the page.

You do not need special tools. A browser and a simple text editor are enough, and every example on this page runs right here. Change a value and run it again to test your ideas. JavaScript also runs on servers through Node.js, but this track sticks to the browser, where you can see results instantly.

What JavaScript can do

The most common jobs are changing text, showing or hiding content, and reacting to clicks and typing. Anything that updates on a page without a reload is JavaScript working behind the scenes. Online stores use it to recalculate cart totals, and forms use it to check input before it is sent.

document.getElementById("demo").textContent = "Hello!";

How the browser runs your code

JavaScript runs line by line, right inside the page. When the browser hits a script tag, it runs that code immediately, in order. If a line throws an error, the rest of that same run is skipped, so the order of your code matters.

<script>
  console.log("Hello from JavaScript");
</script>

Your first likely bug

A frequent beginner mistake is expecting JavaScript to run before the page is ready. If your code runs before the elements it targets exist, it finds nothing. Putting the script at the end of the body, just before the closing tag, is the simple fix.

Syntax

const button = document.getElementById("greet");
button.onclick = function () {
  document.getElementById("message").textContent = "Hello!";
};

<script> at end of body or document.addEventListener("DOMContentLoaded", ...)