Complete JavaScript Course

Master JavaScript
From Zero to Hero

A comprehensive guide to learn JavaScript with clear explanations, practical examples, and modern ES6+ features for aspiring developers.

View on GitHub What You'll Learn →

Why This Guide?

Built specifically for students and self-learners who want to understand JavaScript from the ground up with a structured approach.

  • Beginner Friendly

    No prior programming experience required

  • Real-World Examples

    Practical code you can use immediately

  • Modern JavaScript

    ES6+ features and best practices

  • Step-by-Step Learning

    Progressive difficulty with clear structure

What You'll Learn

Comprehensive curriculum covering everything from basics to advanced concepts

JavaScript Fundamentals

Master the core concepts including variables, data types, operators, and control flow structures.

Objects & Functions

Deep dive into JavaScript objects, their properties, methods, and function behavior patterns.

Modern ES6+ Features

Learn arrow functions, destructuring, spread operators, async/await, and more.

DOM Manipulation

Create interactive web pages by mastering Document Object Model manipulation techniques.

Best Practices

Write clean, maintainable code following industry-standard conventions and patterns.

Real Projects

Apply your knowledge building practical applications like form validators and dynamic UIs.

Understanding Variables

Learn the differences between var, let, and const and when to use each one

var

  • Function-scoped
  • Can be re-declared
  • Can be re-assigned
  • Hoisted to top of scope
  • Avoid in modern code

let

  • Block-scoped
  • Cannot be re-declared
  • Can be re-assigned
  • Temporal Dead Zone (TDZ)
  • Use when value changes

const

  • Block-scoped
  • Cannot be re-declared
  • Cannot be re-assigned
  • Must initialize on declaration
  • Default choice for variables

Variable Declaration Examples

// var - function scoped
var studName = 'Abdullah';
var studAge = 15;

// let - block scoped, can change
let counter = 0;
counter = 1; // ✓ Allowed

// const - block scoped, cannot change
const PI = 3.14159;
// PI = 3.14; // ✗ Error: Assignment to constant variable
Feature var let const
Scope Function Block Block
Re-declaration Allowed Not Allowed Not Allowed
Re-assignment Allowed Allowed Not Allowed
Must Initialize No No Yes
Modern Usage Avoid When value changes Default choice

JavaScript Data Types

Understanding primitive and composite data types in JavaScript

Primitive Data Types

Primitive data types contain a single literal value such as a number or a string.

Data Type Description Example
boolean Contains only two values: true or false let isActive = true;
null Represents intentional absence of value let data = null;
number Positive/negative numbers and decimals let age = 25; let pi = 3.14;
string Alphanumeric characters in quotes let name = "Abdullah";

Composite Data Types

Composite data types store collections of multiple related values.

Data Type Description
Objects Collection of properties and functions
Functions Collection of statements to achieve a specific task
Arrays Collection of values in adjacent memory locations

JavaScript Operators

Master the essential operators for calculations, comparisons, and logic

Arithmetic Operators

Perform mathematical operations

  • + Addition
  • - Subtraction
  • * Multiplication
  • / Division
  • % Modulus (remainder)
  • ** Exponentiation

Assignment Operators

Assign and update variable values

  • = Simple assignment
  • += Add and assign
  • -= Subtract and assign
  • *= Multiply and assign
  • /= Divide and assign

Comparison Operators

Compare values and return boolean

  • == Equal to (value)
  • === Strict equal (value & type)
  • != Not equal to
  • > Greater than
  • < Less than

Logical Operators

Combine conditions and logic

  • && Logical AND
  • || Logical OR
  • ! Logical NOT

Operator Examples

// Arithmetic
let sum = 10 + 5;        // 15
let power = 2 ** 3;      // 8

// Comparison
console.log(5 === "5");  // false (strict)
console.log(5 == "5");   // true (loose)

// Logical
let age = 20;
if (age >= 18 && age < 65) {
    console.log("Adult");
}

JavaScript Events

Handle user interactions with keyboard, mouse, and focus events

Understanding Events

An event occurs when a user interacts with a web page. Event handling is the process of specifying actions to be performed when an event occurs.

Keyboard Events

  • onkeydown - Key pressed down
  • onkeyup - Key released
  • onkeypress - Key pressed & released

Mouse Events

  • onclick - Mouse clicked
  • onmouseover - Mouse over element
  • onmouseout - Mouse leaves element
  • onmousemove - Mouse moves

Focus Events

  • onfocus - Element receives focus
  • onblur - Element loses focus
  • onselect - Text selected

Event Handling Example

// Button click event
document.getElementById('myBtn').onclick = function() {
    alert('Button clicked!');
};

// Mouse over event
element.onmouseover = function() {
    this.style.color = 'blue';
};

// Keyboard event
document.onkeypress = function(event) {
    console.log('Key pressed: ' + event.key);
};

Loops in JavaScript

Automate repetitive tasks with for, while, and do...while loops

for Loop

Best when you know the exact number of iterations

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

while Loop

Best when iterations are unknown or dynamic

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

do...while Loop

Executes at least once before checking condition

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);
Feature for Loop while Loop do...while Loop
Best Used When Exact number of repeats known Number of repeats unknown Code must run at least once
Check Timing Before every iteration Before every iteration After first iteration
Minimum Runs 0 (if condition false) 0 (if condition false) 1 (always runs once)

Built-in Functions

Essential JavaScript functions for common tasks

Function Description Example
alert() Displays a dialog box with a message alert("Hello!");
confirm() Shows dialog with OK and Cancel buttons confirm("Are you sure?");
prompt() Accepts user input through a text box prompt("Enter name:");
parseInt() Converts string to integer parseInt("25");
parseFloat() Converts string to decimal number parseFloat("10.33");
isNaN() Checks if value is not a number isNaN("Hello");
eval() Evaluates an expression eval("2+2");

Function Examples

// Get user input
let name = prompt("Enter your name:", "Guest");
console.log("Hello, " + name);

// Convert string to number
let age = parseInt("25");
console.log(age + 5); // 30

// Check if value is a number
if (isNaN("abc")) {
    console.log("Not a number!");
}

Start Your JavaScript Journey

Join thousands of developers learning JavaScript. Star the repo and begin coding today.

Explore on GitHub