JavaScript basics

Name: FriendRewind
Author: FriendRewind

FriendRewind

Lesson 3 of 5

HTML and CSS describe a page. JavaScript lets it do things. Click a button, count visitors, fade in a quote, save a draft — that's all JavaScript.

You don't need a framework. You don't need npm. For a personal site, you often don't need more than 20 lines of vanilla JavaScript pasted at the bottom of your HTML.

Where it goes

Drop a <script> tag right before the closing </body>:

<body>
  <h1 id="greeting">Hello</h1>
  <button id="shout">Click me</button>

  <script>
    document.getElementById('shout').addEventListener('click', function () {
      document.getElementById('greeting').textContent = 'HELLO!!';
    });
  </script>
</body>

That's it. Click the button, the heading shouts. You just shipped JavaScript.

The 5 things you'll do all the time

1. Find an element

// by ID
const heading = document.getElementById('greeting');

// by CSS selector (more flexible)
const button = document.querySelector('#shout');
const links  = document.querySelectorAll('nav a');

2. Read or change its text/content

heading.textContent = 'New heading text';
heading.innerHTML   = 'New <em>styled</em> heading';
button.disabled     = true;

3. Add or remove a CSS class

heading.classList.add('flashy');
heading.classList.remove('hidden');
heading.classList.toggle('open');

4. Listen for events

button.addEventListener('click', function (event) {
  console.log('clicked!');
});

document.addEventListener('keydown', function (event) {
  if (event.key === 'Escape') {
    closeMenu();
  }
});

5. Use a variable, write a function

let count = 0;

function bump() {
  count = count + 1;
  document.getElementById('counter').textContent = count;
}

document.getElementById('plus').addEventListener('click', bump);

A complete example

A click counter. Save this as index.html, hit preview, click:

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Counter</title></head>
<body>
  <h1>Click counter</h1>
  <p>You've clicked <span id="n">0</span> times.</p>
  <button id="b">+1</button>

  <script>
    let n = 0;
    document.getElementById('b').addEventListener('click', function () {
      n++;
      document.getElementById('n').textContent = n;
    });
  </script>
</body>
</html>

Open the developer console. Right-click anywhere on a page and pick "Inspect" → "Console". Anything you put inside console.log(...) shows up there. It's the single most useful tool for figuring out why something isn't working.

External JavaScript files

When your script grows past about 20 lines, move it into its own file — just like CSS:

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

The defer attribute tells the browser "load this in the background and run it after the page is parsed." Almost always what you want.

Things to avoid

jQuery. It was great in 2009. It's not necessary now — everything jQuery did is built into modern browsers. The vanilla document.querySelector + .addEventListener pattern above replaces it.
React, Vue, etc. for personal sites. They're tools for big multi-developer apps. For a homepage, they're like buying a forklift to move a plant pot.
Pasting random scripts you don't understand. Tracking pixels, autoplay sounds, ad blocks — you don't need any of them. Less is more on the personal web.

Try it

Build the click counter. Then change it: make the button reset to zero when you double-click. Or make it count down from 10 and disable itself at zero. The browser is your sandbox — you cannot hurt it.

Where to next

Now you know HTML, CSS, and JS. Next we'll combine them into a real homepage you'd be proud to put your name on.