JavaScript Basics for Beginners

JavaScript is the programming language that adds behavior and interactivity to web pages. It also runs outside the browser in environments such as Node.js, but this guide focuses on the browser fundamentals that beginners encounter first.

Variables

const name = "Ravi";
let count = 0;
count++;

Use const when a variable should not be reassigned and let when it needs to change. Both are block-scoped variables.

Functions

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Ravi"));

Functions group reusable behavior. They can receive parameters and return values that other code can use.

Arrays and objects

const numbers = [10, 20, 30];
const user = { name: "Ravi", active: true };

Arrays hold ordered collections of values, while objects group related properties. Modern JavaScript code frequently combines these structures when handling API data.

Changing the page

const heading = document.querySelector("h1");
heading.textContent = "Hello from JavaScript";

The browser exposes the DOM through objects such as document. JavaScript can query elements, change their content, and respond to user actions.

Events

document.querySelector("button")
  .addEventListener("click", () => {
    console.log("Button clicked");
  });

Event listeners let code react to actions such as clicks, keyboard input, and form submission.

Async JavaScript

async function loadData() {
  const response = await fetch("/data.json");
  const data = await response.json();
  console.log(data);
}

Promises and async/await are commonly used when browser code waits for network or other asynchronous operations. Production code should also handle failed requests and unexpected responses.

Common beginner mistakes

Using a variable before it has been initialized.
Forgetting that browser APIs such as document are only available in a browser context.
Assuming every HTTP response is successful without checking the response status.

Next step

Continue with the JavaScript Tutorials pillar for Fetch, promises, async/await, modules, DOM programming, and browser APIs.

💬 Comments

Comments will appear here when available.