JavaScript, first steps

JavaScript runs in the browser after the HTML is there. Use it for small truths: adding numbers, showing “updated just now”, hiding a note. Do not start with a framework.

<p>Items: <span id="count">3</span></p>
<button id="add" type="button">Add a line</button>
<ul id="list">
  <li>Tomatoes — 25</li>
</ul>
<script>
  const button = document.querySelector("#add");
  const count = document.querySelector("#count");
  const list = document.querySelector("#list");

  button.addEventListener("click", () => {
    const item = document.createElement("li");
    item.textContent = "New item — 0";
    list.append(item);
    count.textContent = String(list.children.length);
  });
</script>

Read it in order: find the button, listen for a click, create a list item, update the count.

Words you will hear

• Variable — a name for a value (const count = ...).
• Function — a set of steps you can run (() => { ... }).
• Event — something the user did (click, type, submit).

If the script runs before the HTML exists, querySelector returns nothing and the page looks “broken”. Put the script at the bottom of body, or wait for the page to load.

JavaScript is easy to overuse. If the text can live in HTML, leave it there. Scripts fail on old phones; HTML usually does not.