JavaScript FoundationsBeginner⏱ 8 min01 / 12

What is JavaScript?

Discover how JavaScript transforms static web pages into living, interactive experiences — and write your first lines of code.

You've probably clicked a button on a website and watched something happen — a menu slides open, a form checks your email before you submit it, or a photo carousel glides to the next image. None of that is HTML or CSS. That's JavaScript at work.

JavaScript is the programming language of the web. Every modern web page is built from three layers: HTML provides the structure (headings, paragraphs, images), CSS handles the presentation (colors, fonts, layout), and JavaScript drives the behavior — it makes things move, react, and think. In this lesson you'll learn what JavaScript is, where it runs, and how to add it to a page.

Think of it like

Think of building a house

HTML pours the concrete and puts up the walls. CSS paints and decorates them. JavaScript installs the lights, the automatic door opener, and the smart thermostat — the parts that respond to what's happening around them.

#Where Does JavaScript Run?

JavaScript was invented in 1995 to run inside web browsers. Chrome, Firefox, Safari, and Edge all have a JavaScript engine built right in, so your code runs on the visitor's computer with zero installation required.

Since 2009, JavaScript also runs on servers via a runtime called Node.js. The same language covers front-end (what users see) and back-end (servers, databases). Learning it once opens doors everywhere.

#Your First JavaScript: console.log

console.log() prints a message to the browser's developer console — a hidden panel you can open with F12 (or Cmd+Option+J on Mac). It's the programmer's sticky note: quick, disposable, and indispensable for checking what your code is doing.

You can log text (in quotes), numbers, or expressions. JavaScript evaluates them all.
console.log("Hello, JavaScript!");
console.log(42);
console.log(2 + 2);

#Adding JavaScript to a Web Page

Use a <script> tag to embed JavaScript in HTML. For small experiments, write code inline inside the tag. For real projects, keep code in a separate .js file and link it with <script src="app.js"></script>. Either way, place the tag just before `</body>` so the HTML elements load before your script tries to interact with them.

Both <script> tags sit at the bottom of <body>. The browser reads HTML top-to-bottom, so elements are ready by the time scripts execute.
<!DOCTYPE html>
<html lang="en">
  <body>
    <h1>Hello!</h1>

    <!-- Inline: code goes directly here -->
    <script>
      console.log("Inline script running!");
    </script>

    <!-- External: code lives in app.js -->
    <script src="app.js"></script>
  </body>
</html>
Common mistake

Don't put <script> in the <head> without defer

If you place <script> in <head>, the browser runs your JavaScript before the page elements exist — so any code that tries to find a button or a paragraph will come up empty. Always place scripts just before </body>, or add the defer attribute: <script src="app.js" defer></script>.

## Responding to Clicks and Changing the Page

JavaScript's real power is reacting to what the user does and updating what they see — without reloading the page. It does this by reading and editing the DOM (Document Object Model), the browser's live, in-memory version of your HTML.

Here's a small but complete example:

getElementById finds an element by its id. addEventListener waits for a click, then runs your function.
<button id="greet-btn">Click me!</button>
<p id="message"></p>

<script>
  const button = document.getElementById("greet-btn");
  const message = document.getElementById("message");

  button.addEventListener("click", function () {
    message.textContent = "Hello from JavaScript!";
    console.log("Button was clicked!");
  });
</script>
Quick check

Where should you place a <script> tag when your code needs to interact with page elements?

Key takeaways

  • JavaScript is the behavior layer of the web — it makes pages interactive and dynamic.
  • It runs natively in every modern browser, and also on servers via Node.js.
  • Use console.log() to print values and debug your code in the browser's developer console.
  • Add JavaScript with a <script> tag placed just before </body> so the HTML is ready first.
  • JavaScript can respond to clicks, update page content (the DOM), and fetch data — all without a page reload.
Practice challenges
Test yourself · earn XP
0/4
Predict the output#1

The lesson shows that console.log can print text, numbers, and expressions. What appears in the developer console when this runs?

predict-output
console.log("Hello, JavaScript!");
console.log(42);
console.log(2 + 2);
Fix the bug#2

This code has a bug — what's wrong?

fix-bug
<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      const button = document.getElementById("greet-btn");
      button.addEventListener("click", function () {
        console.log("Clicked!");
      });
    </script>
  </head>
  <body>
    <button id="greet-btn">Click me!</button>
  </body>
</html>
Fill in the blank#3

Complete this snippet from the lesson. Fill in the method that prints to the developer console, and the method that finds an element by its id.

("Hello, JavaScript!");

const message = document.("message");
message.textContent = "Hi!";
Reorder the lines#4

Put these lines in order to build the lesson's click example: grab the button, grab the paragraph, then attach a click listener that updates the page and logs a message.

1
  console.log("Button was clicked!");
2
const button = document.getElementById("greet-btn");
3
const message = document.getElementById("message");
4
button.addEventListener("click", function () {
5
});
6
  message.textContent = "Hello from JavaScript!";
Your turn
Practice exercise

Build a simple counter page. It should have an <h1> with the text 'My Counter', a <p> showing a count starting at 0, and a <button> labeled 'Add 1'. Each click should increase the count by 1, update the paragraph, and console.log the new value.

Try it live — edit the code and hit Run to see the output:

solution.js · editable