⚡ 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 در پایین صفحه فعال شد!");
این کد یک ورودی و دکمه به صفحه اضافه میکند. میتوانید آیتمها را اضافه کنید.