JavaScript Basics Tutorial: A Complete Beginner Guide

Welcome to this javascript basics tutorial. If you want to build anything interactive on the web, JavaScript is the language you need to learn. It runs in every modern browser and powers everything from simple button clicks to complex single-page applications. This guide takes you from the absolute basics to working with the DOM and handling events, with real code examples you can run in your browser right now. By the end you will understand how JavaScript fits into a web page and how to start writing your own scripts.

Why This JavaScript Basics Tutorial Matters

JavaScript is the programming language of the web. Alongside HTML (which defines structure) and CSS (which defines style), JavaScript adds behavior and interactivity. It is the only language that runs natively in all major browsers.

Here is why JavaScript is worth learning:

• Everywhere: Nearly every website uses JavaScript. There are billions of devices running it.
• Full stack: With Node.js you can write server-side code in JavaScript too, so one language covers front end and back end.
• Huge ecosystem: Frameworks like React, Vue, and Angular are built on JavaScript. The npm registry has millions of packages.
• Jobs: JavaScript developers are in high demand across almost every industry.

Whether you want to build websites, create browser games, or move into full stack development, a javascript basics tutorial like this one is the right starting point.

Adding JavaScript to Web Pages

There are three ways to add JavaScript to a page.

Inline in an HTML file

Place your code inside a <script> tag:

<script>
  console.log("Hello from JavaScript");
</script>

External file (recommended)

Keep your code in a separate .js file and link it:

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

This keeps your HTML clean and lets the browser cache the script file.

In the browser console

Open Developer Tools (usually F12 or right-click and Inspect) and type JavaScript directly into the Console tab. This is perfect for experimenting.

Variables: let, const, and var

JavaScript has three ways to declare variables. Modern code uses let and const almost exclusively.

let score = 0;        // value can change
score = 10;

const playerName = "Ada";  // value cannot be reassigned

var oldWay = "avoid this"; // old syntax, function scoped

• let: Declare a variable whose value can change later.
• const: Declare a variable whose reference cannot be reassigned. Use this by default.
• var: The old way. It has confusing scoping rules and is best avoided in modern code.

The difference between let and var comes down to scope. let is block-scoped, meaning it only exists inside the nearest set of braces. var is function-scoped, which can lead to surprising bugs.

Data Types

JavaScript has several data types. They fall into two groups: primitives and objects.

Primitives:

• string: Text, like "hello".
• number: All numbers, integers and decimals, like 42 or 3.14.
• boolean: true or false.
• null: An intentional empty value.
• undefined: A variable that has been declared but not assigned.
• symbol: A unique identifier (advanced).

Objects include Object, Array, Function, and Date.

let text = "JavaScript";
let count = 100;
let isActive = true;
let nothing = null;
let notSet;              // undefined
let user = { name: "Ada", age: 30 };
let numbers = [1, 2, 3];

console.log(typeof text);    // "string"
console.log(typeof count);   // "number"
console.log(typeof isActive); // "boolean"

Strict Equality: === vs ==

Always use === (strict equality) instead of == (loose equality). The loose version performs type coercion, which produces surprising results:

console.log(5 == "5");   // true  (coercion)
console.log(5 === "5");  // false (no coercion)

Template Literals

Use backticks to embed variables inside strings:

const name = "Ada";
const message = `Hello, ${name}! You have ${5 + 3} new messages.`;
console.log(message);

Functions and Arrow Functions

Functions are reusable blocks of code. A regular function declaration:

function add(a, b) {
  return a + b;
}
console.log(add(2, 3));  // 5

An arrow function is a shorter syntax, great for simple operations:

const add = (a, b) => a + b;
console.log(add(2, 3));  // 5

const greet = name => `Hello, ${name}!`;
console.log(greet("Ada"));

Arrow functions are especially useful with array methods like map, filter, and forEach:

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]

const evens = numbers.filter(n => n % 2 === 0);
console.log(evens);    // [2, 4]

numbers.forEach(n => console.log(n));

Working with the DOM

The DOM (Document Object Model) is the in-memory representation of your HTML. JavaScript can read and change it.

// Select an element by its ID
const heading = document.getElementById("main-title");

// Change its text
heading.textContent = "Updated by JavaScript";

// Select with a CSS selector
const button = document.querySelector(".my-button");

// Add a class
button.classList.add("active");

// Create and append a new element
const para = document.createElement("p");
para.textContent = "A new paragraph.";
document.body.appendChild(para);

Common selection methods:

• document.getElementById("id") returns one element by ID.
• document.querySelector(".class") returns the first match using a CSS selector.
• document.querySelectorAll(".class") returns all matches as a list.

Events

Events let your code respond to user actions like clicks, typing, and page loading.

const button = document.querySelector("#submit-btn");

button.addEventListener("click", () => {
  console.log("The button was clicked");
});

You can listen for many event types: click, input, change, submit, keydown, mouseover, and more.

const input = document.querySelector("#name-input");

input.addEventListener("input", event => {
  console.log("User typed:", event.target.value);
});

Working with JSON

JSON (JavaScript Object Notation) is a text format for storing and exchanging data. It looks like JavaScript object literals but with double-quoted keys.

const user = { name: "Ada", age: 30 };

// Convert object to JSON string
const jsonString = JSON.stringify(user);
console.log(jsonString);  // {"name":"Ada","age":30}

// Convert JSON string back to object
const parsed = JSON.parse(jsonString);
console.log(parsed.name);  // "Ada"

Arrays and Objects

Two data structures you will use constantly are arrays and objects. Arrays hold ordered lists of values, and objects hold keyed collections of related data.

// Array
const colors = ["red", "green", "blue"];
colors.push("yellow");   // add to end
console.log(colors.length);  // 4

// Object
const user = {
  name: "Ada",
  role: "Engineer",
  skills: ["Python", "JavaScript"]
};

// Access and modify
user.role = "Lead Engineer";
console.log(user.name);      // "Ada"
console.log(user.skills[0]); // "Python"

You can loop over arrays with for...of and over objects with for...in or Object.keys(). These built-in structures form the backbone of almost every JavaScript program, so practice creating and reading them until they feel natural.

Common Mistakes to Avoid

1. Using == instead of ===: Loose equality coerces types and causes subtle bugs. Default to ===.
2. Forgetting that const is not immutable for objects: const prevents reassignment, but you can still change properties of an object declared with const.
3. Confusing undefined and null: undefined means a variable has no value yet. null means you intentionally set it to empty.
4. Ignoring hoisting: var declarations are hoisted to the top of their scope, which can cause confusing behavior. Use let and const to avoid this.
5. Not handling asynchronous code: Operations like fetch are asynchronous. Use async and await or .then() to handle them properly.

This javascript basics tutorial covered the core skills you need to start building interactive web pages: adding scripts, declaring variables, working with data types and functions, manipulating the DOM, handling events, and using JSON. The best way to learn JavaScript is to open a text editor, create an HTML file, and start experimenting. Build something small, break it, and fix it.

Ready to see how much you learned? Take the JavaScript Basics Quiz below and earn your free certificate.