JavaScript Basics for Beginners

JavaScript Intro & Variables

JavaScript web pages me dynamic behavior add karta hai. Variables data store karte hain.

let name = "Zubair";
const age = 25;

Data Types & Operators

JavaScript me strings, numbers, booleans common data types hain. Operators values ko manipulate karte hain.

let sum = 5 + 10;
let isAdult = age >= 18;

Conditions

Conditions se code decision le sakta hai based on values.

if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

Loops

Loops repetitive tasks ke liye use hote hain.

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

Functions

Functions reusable blocks of code hote hain.

function greet(name) {
  return `Hello ${name}`;
}
console.log(greet("Zubair"));

Arrays

Arrays multiple values store karte hain.

let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[1]); // Banana

Objects

Objects key-value pairs store karte hain.

let person = { name: "Zubair", age: 25 };
console.log(person.name); // Zubair

JS Practice Problems

Basic JS problems solve karne se understanding strong hoti hai.

// Sum of array
let numbers = [1, 2, 3];
let total = numbers.reduce((a, b) => a + b, 0);
console.log(total); // 6

Scope & Hoisting

Variables ka scope define karta hai access aur hoisting unko upar move kar deta hai.

function test() {
  console.log(a); // undefined
  var a = 10;
}
test();

Arrow Functions

Arrow functions concise syntax provide karte hain.

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

Array Methods

Array methods like map, filter, reduce data manipulate karte hain.

let nums = [1, 2, 3];
let squared = nums.map(n => n * n);
console.log(squared); // [1,4,9]

String Methods

Strings ko manipulate karne ke liye JavaScript methods use hote hain.

let text = "hello world";
console.log(text.toUpperCase()); // HELLO WORLD

Destructuring

Destructuring se arrays aur objects se values easily extract hoti hain.

let [a, b] = [1, 2];
let { name, age } = { name: "Zubair", age: 25 };

Spread & Rest

Spread aur rest operators elements ko expand ya collect karte hain.

let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1,2,3,4]

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // 6

Callbacks

Callbacks functions hoti hain jo dusre functions ke andar pass hoti hain aur asynchronous tasks handle karne me use hoti hain.

function greet(name, callback) {
  console.log(`Hello ${name}`);
  callback();
}

function sayBye() {
  console.log("Goodbye!");
}

greet("Zubair", sayBye);

Promises

Promises asynchronous operations handle karte hain aur success/failure ko manage karte hain.

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

promise.then(msg => console.log(msg))
       .catch(err => console.log(err));

Async/Await

Async/Await asynchronous code ko synchronous style me likhne ke liye use hota hai.

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => resolve("Data fetched"), 1000);
  });
}

async function getData() {
  let data = await fetchData();
  console.log(data);
}

getData();

Error Handling

JavaScript me try/catch blocks errors ko safely handle karne ke liye use hote hain.

try {
  let result = riskyOperation();
  console.log(result);
} catch (error) {
  console.log("Error occurred:", error);
} finally {
  console.log("Operation complete");
}

JS Mini Projects

Mini projects JS skills ko strengthen karte hain, jaise Todo list, Calculator etc.

// Simple Todo
let todos = [];
function addTodo(task) {
  todos.push(task);
}
addTodo("Learn JS");
console.log(todos);

DOM Basics

DOM (Document Object Model) HTML elements ko manipulate karne ke liye JS interface provide karta hai.

let heading = document.querySelector("h1");
heading.textContent = "Hello DOM!";

Events

Events user actions (click, hover) ko capture karte hain aur functions trigger karte hain.

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

Forms Handling

Forms se user input le kar JS me process karna.

let form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Form submitted");
});

LocalStorage

LocalStorage browser me data store karne ke liye use hota hai.

localStorage.setItem("username", "Zubair");
console.log(localStorage.getItem("username"));

Fetch API

Fetch API asynchronous requests ke liye use hota hai.

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(response => response.json())
  .then(data => console.log(data));

Build JS Apps

JS apps banake real-world projects practice karna.

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