Complete JavaScript Tutorial for Beginners

1. What is JavaScript?

JavaScript is a dynamic, high-level programming language used to make web pages interactive. It allows you to manipulate content, handle events, and much more.

2. JavaScript Basics: Variables and Data Types

In JavaScript, we use variables to store data. These variables can hold different types of data.

let name = "John";  // string
const age = 30;     // number
let isActive = true;  // boolean
Copy

3. JavaScript Operators

Operators are symbols that perform operations on variables and values.

let sum = 5 + 3;  // Addition
let difference = 5 - 3;  // Subtraction
let product = 5 * 3;  // Multiplication
Copy

4. Functions

Functions are reusable blocks of code that perform a specific task. Functions can take parameters and return values.

function greet() {
  console.log("Hello, World!");
}

greet();  // Output: Hello, World!
Copy

5. Control Flow: Conditionals

Conditionals allow you to make decisions in your code based on certain conditions.

let number = 10;

if (number > 5) {
  console.log("Number is greater than 5");
} else {
  console.log("Number is 5 or less");
}
Copy

6. Loops in JavaScript

Loops let you run a block of code multiple times, making it useful for tasks like iterating over arrays.

for (let i = 0; i < 5; i++) {
  console.log(i);  // Output: 0, 1, 2, 3, 4
}
Copy

7. Arrays

Arrays are used to store multiple values in a single variable. You can access each item in an array by its index.

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]);  // Output: Apple
Copy

8. Objects

Objects store data in key-value pairs. Each key is unique and can hold a value of any type.

let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello!");
  }
};

console.log(person.name);  // Output: John
person.greet();  // Output: Hello!
Copy

9. DOM Manipulation

The Document Object Model (DOM) allows you to manipulate the content of a webpage.

let element = document.getElementById("myElement");
element.textContent = "New text content!";
Copy

10. Error Handling: Try, Catch, Finally

Error handling helps you catch errors in your code and handle them appropriately.

try {
  let result = 10 / 0;
  console.log(result);
} catch (error) {
  console.log("An error occurred: " + error);
} finally {
  console.log("This will run no matter what.");
}
Copy

11. JavaScript ES6 Features

ES6 (ECMAScript 2015) introduced new features like arrow functions, template literals, and more.

const add = (a, b) => a + b;
console.log(add(3, 5));  // Output: 8
Copy

12. Asynchronous JavaScript: Promises and Async/Await

Asynchronous JavaScript allows you to handle operations that take time (like API requests) without blocking other code.

let promise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve("Operation successful!");
  } else {
    reject("Operation failed.");
  }
});

promise.then(result => console.log(result)).catch(error => console.log(error));
Copy

13. JavaScript Classes and OOP

JavaScript supports Object-Oriented Programming (OOP) with classes and inheritance.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

let person1 = new Person("Alice", 25);
person1.greet();  // Output: Hello, my name is Alice.
Copy

14. Final Tips for Mastering JavaScript

• Practice by building small projects.
• Learn asynchronous JavaScript for handling real-time tasks.
• Understand the concepts of closures, scopes, and callbacks.
• Explore frameworks like React, Angular, or Vue.js.