JavaScript Fundamentals: A Beginner's Guide to Programming

JavaScript is the programming language of the web. It adds interactivity, handles user input, and brings websites to life. In this guide, we'll cover the fundamentals you need to start writing JavaScript.

What is JavaScript?

JavaScript (JS) is a versatile programming language that runs in web browsers. Unlike HTML (structure) and CSS (styling), JavaScript handles logic and behavior:

• Respond to user clicks and input
• Update content without refreshing the page
• Validate forms before submission
• Create animations and interactive features
• Fetch data from servers (APIs)

Variables: Storing Data

Variables are containers for storing data. JavaScript has three ways to declare variables:

let (Recommended)

let name = "John";
let age = 25;
let isStudent = true;
// You can change the value
name = "Jane";

const (For Constants)

const PI = 3.14159;
const MAX_SIZE = 100;
// This will cause an error:
// PI = 3; // Cannot reassign a constant

var (Old Way — Avoid)

var oldVariable = "Don't use var";
// var has scoping issues, prefer let instead

Data Types

JavaScript has several data types:

Primitive Types

// String - text
let greeting = "Hello, World!";
// Number - integers and decimals
let count = 42;
let price = 19.99;
// Boolean - true or false
let isActive = true;
let isLoggedIn = false;
// Null - intentionally empty
let empty = null;
// Undefined - not yet assigned
let notDefined;

Objects and Arrays

// Object - key-value pairs
let person = {
    name: "John",
    age: 25,
    email: "john@example.com"
};
// Array - ordered list
let colors = ["red", "green", "blue"];
let numbers = [1, 2, 3, 4, 5];

Functions

Functions are reusable blocks of code:

Function Declaration

function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("Alice")); // "Hello, Alice!"

Arrow Functions (Modern)

const add = (a, b) => a + b;
const square = (x) => x * x;
console.log(add(2, 3));    // 5
console.log(square(4));    // 16

Conditional Statements

Make decisions in your code:

let age = 18;
if (age >= 18) {
    console.log("You are an adult");
} else if (age >= 13) {
    console.log("You are a teenager");
} else {
    console.log("You are a child");
}

Loops

Repeat actions multiple times:

for Loop

for (let i = 0; i < 5; i++) {
    console.log("Count:", i);
}

forEach (for Arrays)

const fruits = ["apple", "banana", "orange"];
fruits.forEach((fruit) => {
    console.log(fruit);
});

DOM Manipulation

The DOM (Document Object Model) lets you interact with HTML:

Selecting Elements

// By ID
const title = document.getElementById("title");
// By class (returns NodeList)
const items = document.querySelectorAll(".item");
// By CSS selector
const firstButton = document.querySelector("button");

Changing Content

const heading = document.getElementById("heading");
// Change text
heading.textContent = "New Heading";
// Change HTML
heading.innerHTML = "Styled Heading";
// Change styles
heading.style.color = "blue";
heading.style.fontSize = "24px";

Adding Event Listeners

const button = document.getElementById("myButton");
button.addEventListener("click", () => {
    alert("Button clicked!");
});
// Other events: "mouseover", "keydown", "submit", etc.

Practical Example

Let's build a simple counter in ProLiveEditor:

HTML:

    
0

    +
    -
    Reset

CSS:

.counter {
    text-align: center;
    padding: 20px;
}
button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 18px;
    cursor: pointer;
}

JavaScript:

let count = 0;
const countDisplay = document.getElementById("count");
document.getElementById("increment").addEventListener("click", () => {
    count++;
    countDisplay.textContent = count;
});
document.getElementById("decrement").addEventListener("click", () => {
    count--;
    countDisplay.textContent = count;
});
document.getElementById("reset").addEventListener("click", () => {
    count = 0;
    countDisplay.textContent = count;
});

What's Next?

Once you're comfortable with these basics, explore:

• ES6+ Features — Destructuring, spread operator, modules
• Async JavaScript — Promises, async/await, fetch API
• Frameworks — React, Vue, Svelte for building complex apps

Practice makes perfect! Use ProLiveEditor to experiment with these concepts and build your own projects.