⚡ JavaScript چیست؟

جاوااسکریپت زبان برنامه‌نویسی وب است که به صفحات جان می‌بخشد. با آن می‌توانید عناصر را تغییر دهید، با کاربر تعامل کنید، داده‌ها را پردازش کنید و برنامه‌های پیچیده بسازید. این دوره توسط Arpam Studio شما را از صفر به یک برنامه‌نویس جاوااسکریپت تبدیل می‌کند.

💡 هر مثال دارای دکمه ▶ اجرا است که کد را واقعاً اجرا کرده و خروجی آن را نمایش می‌دهد.

📦 متغیرها

برای ذخیره داده‌ها از let، const و var استفاده می‌کنیم. let و const روش‌های مدرن هستند.

let name = "Arpam";
const year = 2026;
console.log(`نام: ${name}، سال: ${year}`);

📊 انواع داده

انواع اصلی: string، number، boolean، undefined، null، object و symbol.

let str = "سلام";
let num = 42;
let isActive = true;
let nothing;
console.log(typeof str, typeof num, typeof isActive, typeof nothing);

➕ عملگرها

عملگرهای ریاضی، مقایسه‌ای و منطقی.

let a = 10, b = 3;
console.log(a + b, a - b, a * b, a / b, a % b);
console.log(a > b, a === 10, a !== b);
console.log(a > 5 && b < 5);

🔀 شرط‌ها

if، else if، else و عملگر سه‌گانه ? :.

let score = 85;
if (score >= 90) {
    console.log("عالی");
} else if (score >= 75) {
    console.log("خوب");
} else {
    console.log("نیاز به تلاش");
}
console.log(score >= 50 ? "قبول" : "رد");

🔁 حلقه‌ها

for، while و for...of.

let result = "";
for (let i = 1; i <= 3; i++) {
    result += i + " ";
}
console.log(result);

let fruits = ["سیب", "موز"];
for (let fruit of fruits) {
    console.log(fruit);
}

⚙️ توابع

تعریف تابع با function یا arrow function.

function sum(a, b) {
    return a + b;
}
const multiply = (x, y) => x * y;
console.log(sum(4, 5));
console.log(multiply(3, 7));

📋 آرایه‌ها

مجموعه‌ای مرتب از داده‌ها با متدهای قدرتمند.

let nums = [2, 4, 6];
nums.push(8);
console.log(nums);
console.log(nums.map(x => x * 2));
console.log(nums.filter(x => x > 3));

📦 اشیاء (Objects)

جفت‌های کلید-مقدار برای ساختارهای پیچیده.

const car = {
    brand: "Tesla",
    model: "Model 3",
    year: 2026,
    start() { return "روشن شد"; }
};
console.log(car.brand);
console.log(car.start());

🖥️ کار با DOM

دسترسی و تغییر عناصر HTML.

let h1 = document.createElement("h2");
h1.textContent = "سلام از JS";
h1.style.color = "blue";
document.body.appendChild(h1);
console.log("عنوان جدید اضافه شد (خروجی در صفحه اصلی)");

⚠️ این کد در بدنه اصلی صفحه اجرا می‌شود و یک المان به پایین صفحه اضافه می‌کند.

🖱️ رویدادها

واکنش به کلیک، ورودی و...

document.body.addEventListener("click", () => {
    console.log("کلیک شد!");
});
console.log("شنونده کلیک فعال شد (یکبار کلیک کن)");

🚀 ES6+ مدرن

امکانات جدید: let/const، Arrow Functions، Template Literals، Destructuring.

const user = { name: "Arpam", age: 5 };
const { name, age } = user;
console.log(`نام: ${name}، سن: ${age}`);
const greet = (person) => `سلام ${person}`;
console.log(greet("دنیا"));

⏳ برنامه‌نویسی ناهمگام

کار با setTimeout، Promise و async/await.

async function fetchData() {
    return new Promise(resolve => {
        setTimeout(() => resolve("داده دریافت شد"), 500);
    });
}
fetchData().then(console.log);
console.log("منتظر داده...");

🏛️ کلاس‌ها

برنامه‌نویسی شیءگرا با class.

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} صدا می‌دهد`);
    }
}
let cat = new Animal("گربه");
cat.speak();

🛠️ پروژه نهایی: To-Do List ساده

یک لیست کارهای تعاملی با استفاده از DOM و رویدادها.

// ساخت یک ورودی و دکمه اضافه کردن
let input = document.createElement("input");
input.placeholder = "کار جدید...";
let btn = document.createElement("button");
btn.textContent = "افزودن";
let list = document.createElement("ul");
document.body.appendChild(input);
document.body.appendChild(btn);
document.body.appendChild(list);

btn.addEventListener("click", () => {
    if (input.value.trim()) {
        let li = document.createElement("li");
        li.textContent = input.value;
        list.appendChild(li);
        input.value = "";
    }
});
console.log("پروژه To-Do در پایین صفحه فعال شد!");

این کد یک ورودی و دکمه به صفحه اضافه می‌کند. می‌توانید آیتم‌ها را اضافه کنید.