JavaScript for Beginners: What It Does on a Web Page

Start with a simple output

JavaScript is a programming language used throughout the web. Developers often use console.log() to inspect information while building.

const message = "Hello from JavaScript!";
console.log(message);

Variables and conditions

Variables let a program keep track of values. let is useful when a value may change, while const is useful when you do not plan to reassign it.

let score = 8;

if (score >= 7) {
  console.log("Great job!");
} else {
  console.log("Keep practicing!");
}

Arrays, loops, and functions

const subjects = ["JavaScript", "Python", "Chess"];

for (const subject of subjects) {
  console.log(subject);
}

A function gives a reusable process a name.

function makeGreeting(name) {
  return "Hello, " + name + "!";
}

What is the DOM?

The DOM, or Document Object Model, is the browser’s representation of a webpage. JavaScript can find page elements and change them.

<button id="helloButton">Say hello</button>
<p id="message"></p>

const button = document.querySelector("#helloButton");
const message = document.querySelector("#message");

button.addEventListener("click", function () {
  message.textContent = "Hello!";
});

When the button is clicked, the paragraph changes. That is a small example of an event-driven webpage.

Events and interactive projects

An event is something that happens in the browser, such as a click, key press, form submission, or change to an input. JavaScript can listen for events and run code in response.

Accessibility still matters

Interactive code should work for more than one kind of user. Buttons need meaningful labels, keyboard users should be able to reach important controls, text should remain readable, and color should not be the only way information is communicated.

Debugging JavaScript

1. Check the browser console for errors.
2. Confirm the JavaScript file loaded.
3. Check spelling in variables and selectors.
4. Confirm an element exists before trying to use it.
5. Use console.log() to inspect values.
6. Test one small change at a time.