پرطرفدارترین دوره

🚀 دوره جامع JavaScript 💫

از صفر تا صد برنامه‌نویسی وب را بیاموزید. تبدیل شوید به یک توسعه‌دهنده فرانت‌اند حرفه‌ای با این دوره کامل که تمام مفاهیم از پایه تا پیشرفته را پوشش می‌دهد.

۴۲+ ساعت آموزش

۱۵۰+ تمرین عملی

۲۴ پروژه واقعی

۴.۹ رضایت دانشجویان

🎓 آموزش تعاملی گام به گام

روی هر درس کلیک کنید تا باز شود و محتوای آموزشی را مشاهده کنید. تمام درس‌ها شامل مثال‌های تعاملی هستند.

متغیرها در جاوااسکریپت

آشنایی با const, let, var و انواع داده‌ها

۱۵ دقیقه

چرا متغیرها مهم هستند؟

متغیرها مانند جعبه‌هایی هستند که اطلاعات را در حافظه کامپیوتر ذخیره می‌کنند. هر متغیر یک نام و یک مقدار دارد.

مفهوم کلیدی

در جاوااسکریپت مدرن از const و let استفاده می‌کنیم. var قدیمی است و مشکلاتی دارد.

تمرین تعاملی

script.js

// 1. تعریف متغیرهای مختلف
const userName = "مهدی"; // مقدار ثابت - قابل تغییر نیست
let userAge = 17;       // مقدار قابل تغییر
var oldWay = "منسوخ";   // روش قدیمی - استفاده نکنید!

// 2. نمایش مقادیر در کنسول
console.log("نام کاربر:", userName);
console.log("سن کاربر:", userAge);

// 3. تغییر مقدار متغیر let
userAge = 18;
console.log("سن جدید:", userAge);

// 4. تلاش برای تغییر const (خطا می‌دهد)
// userName = "علی"; // این خط کامنت است، اگر آن‌را فعال کنید خطا می‌بینید

// 5. جمع دو عدد
const x = 10;
const y = 20;
const sum = x + y;
console.log("مجموع:", sum);

تمرین:

متغیری به نام productPrice تعریف کنید و مقدار 50000 را به آن اختصاص دهید. سپس 20% تخفیف اعمال کرده و قیمت نهایی را محاسبه کنید.

برای محاسبه 20% تخفیف: price * 0.8 یا price - (price * 0.2)

نکات طلایی:

همیشه از const شروع کنید، اگر نیاز به تغییر بود از let استفاده کنید
نام متغیرها باید معنادار باشد (مثلاً userAge به جای a)
از camelCase برای نام‌گذاری استفاده کنید
جاوااسکریپت به حروف کوچک و بزرگ حساس است (age با Age متفاوت است)

آزمون پایان جلسه - متغیرها

سوال ۱: کدام روش تعریف متغیر برای مقدار ثابت مناسب است؟

الف

var

let

const

سوال ۲: کدام گزینه نام‌گذاری صحیح camelCase است؟

الف

user_name

UserName

userName

سوال ۳: مقدار متغیر زیر چیست؟ `let x = 5; x = x + 3;`

الف

undefined

نتایج آزمون

انواع داده (Data Types)

آشنایی با ۷ نوع داده اصلی و کاربرد آنها

۲۰ دقیقه

انواع داده در جاوااسکریپت

جاوااسکریپت ۷ نوع داده اصلی دارد که در دو دسته تقسیم می‌شوند:

Primitive (اولیه)

String "سلام دنیا"

Number 42, 3.14

Boolean true, false

Undefined let x; // undefined

Null null

Symbol Symbol('id')

BigInt 9007199254740991n

Object (شیء)

Object {name: "مهدی"}

Array [1, 2, 3]

Function function() {}

Date new Date()

آزمایشگاه انواع داده

dataTypes.js

// 1. بررسی typeof
console.log("typeof 'سلام':", typeof "سلام");
console.log("typeof 42:", typeof 42);
console.log("typeof true:", typeof true);
console.log("typeof undefined:", typeof undefined);
console.log("typeof null:", typeof null); // ! جالب: null => object
console.log("typeof {}:", typeof {});
console.log("typeof []:", typeof []); // ! جالب: array => object
console.log("typeof function() {}:", typeof function() {});

// 2. تبدیل انواع
const strNumber = "123";
const realNumber = 456;

console.log("strNumber + realNumber:", strNumber + realNumber); // 123456
console.log("Number(strNumber) + realNumber:", Number(strNumber) + realNumber); // 579

// 3. مقایسه با == vs ===
console.log("123 == '123':", 123 == "123"); // true (مقایسه با تبدیل)
console.log("123 === '123':", 123 === "123"); // false (مقایسه دقیق)

// 4. مقدار truthy/falsy
const values = [0, "", null, undefined, NaN, false, "text", 42, {}, []];
values.forEach(val => {
    console.log(`Boolean(${JSON.stringify(val)}) =`, Boolean(val));
});

مقایسه == و ===

مقایسه	== (برابری)	=== (برابری دقیق)
`5 == '5'`	✅ true	❌ false
`0 == false`	✅ true	❌ false
`null == undefined`	✅ true	❌ false
`'1' == true`	✅ true	❌ false

💡 توصیه: همیشه از === استفاده کنید تا از باگ‌های پنهان جلوگیری شود.

آزمون پایان جلسه - انواع داده

سوال ۱: خروجی `typeof null` چیست؟

الف

"null"

"object"

"undefined"

سوال ۲: کدام نوع داده جزء انواع اولیه (Primitive) نیست؟

الف

string

array

boolean

سوال ۳: `123 === "123"` چه مقدار برمی‌گرداند؟

الف

true

false

"123"

نتایج آزمون

توابع (Functions)

تعریف توابع، پارامترها، بازگشت مقادیر

۲۵ دقیقه

توابع: قلب جاوااسکریپت

توابع بلوک‌های کدی هستند که می‌توانید بارها آنها را فراخوانی کنید. توابع می‌توانند پارامتر بگیرند و مقداری را بازگردانند.

انواع توابع

functions.js

// 1. تعریف تابع معمولی
function greet(name) {
    return `سلام ${name}!`;
}

// 2. تابع بی‌نام (Anonymous)
const multiply = function(x, y) {
    return x * y;
};

// 3. Arrow Function (تابع پیکانی)
const add = (a, b) => a + b;

// 4. تابع با پارامتر پیش‌فرض
function createUser(name, age = 18, isActive = true) {
    return { name, age, isActive };
}

// 5. تابع بازگشتی
function factorial(n) {
    if (n <= 1) return 1;
    return n * factorial(n - 1);
}

// تست توابع
console.log(greet("مهدی")); // سلام مهدی!
console.log("ضرب 5 و 3:", multiply(5, 3)); // 15
console.log("جمع 10 و 20:", add(10, 20)); // 30
console.log("کاربر جدید:", createUser("علی"));
console.log("فاکتوریل 5:", factorial(5)); // 120

نکات طلایی توابع:

توابع می‌توانند مقداری را با return برگردانند
اگر تابع چیزی برنگرداند، undefined برمی‌گرداند
Arrow functions برای توابع کوتاه مناسب‌ترند
پارامترهای پیش‌فرض می‌توانند مقادیر اولیه داشته باشند
توابع بازگشتی برای مسائلی مانند فاکتوریل مناسبند

آزمون پایان جلسه - توابع

سوال ۱: کدام گزینه تعریف صحیح Arrow Function است؟

الف

function add(a, b) { return a + b; }

const add = (a, b) => a + b;

add(a, b) => a + b;

سوال ۲: خروجی کد زیر چیست؟ `function test() {}` سپس `console.log(test());`

الف

undefined

null

Error

سوال ۳: کدام ویژگی تابع بازگشتی (recursive) است؟

الف

خودش را فراخوانی می‌کند

پارامتر ندارد

همیشه string برمی‌گرداند

نتایج آزمون

آرایه‌ها و Objectها

مدیریت مجموعه‌های داده

۳۰ دقیقه

ساختارهای داده پیچیده

آرایه‌ها و Objectها به شما اجازه می‌دهند داده‌های پیچیده‌تری را ذخیره و مدیریت کنید.

کار با آرایه‌ها و Objectها

collections.js

// 1. آرایه‌ها (Arrays)
const fruits = ["سیب", "موز", "پرتقال"];
console.log("آرایه میوه‌ها:", fruits);

// عملیات روی آرایه‌ها
fruits.push("انگور"); // اضافه کردن
console.log("بعد از push:", fruits);

const lastFruit = fruits.pop(); // حذف آخرین
console.log("آخرین میوه:", lastFruit);

// پیمایش آرایه
fruits.forEach((fruit, index) => {
    console.log(`میوه ${index + 1}: ${fruit}`);
});

// 2. Objectها (اشیاء)
const user = {
    name: "مهدی",
    age: 17,
    email: "mhdi@example.com",
    isStudent: true,
    skills: ["JavaScript", "HTML", "CSS"]
};

console.log("Object کاربر:", user);
console.log("نام کاربر:", user.name);
console.log("ایمیل کاربر:", user["email"]);

// اضافه کردن ویژگی جدید
user.city = "تهران";
console.log("کارگر با شهر:", user);

// 3. ترکیب آرایه و Object
const products = [
    { id: 1, name: "لپ‌تاپ", price: 15000000 },
    { id: 2, name: "موبایل", price: 8000000 },
    { id: 3, name: "تبلت", price: 6000000 }
];

console.log("لیست محصولات:", products);
console.log("گران‌ترین محصول:", 
    products.reduce((max, product) => 
        product.price > max.price ? product : max
    )
);

نکات طلایی:

آرایه‌ها برای لیست‌های مرتب مناسبند
Objectها برای ذخیره داده‌های ساختاریافته
از push/pop برای افزودن/حذف از آرایه استفاده کنید
می‌توانید آرایه‌ای از Objectها داشته باشید
روش‌های زیادی مانند map, filter, reduce برای کار با آرایه‌ها وجود دارد

آزمون پایان جلسه - آرایه‌ها و Objectها

سوال ۱: کدام روش برای اضافه کردن عنصر به انتهای آرایه استفاده می‌شود؟

الف

pop()

shift()

push()

سوال ۲: چگونه به ویژگی‌های Object دسترسی پیدا کنیم؟

الف

object.property یا object['property']

object->property

object::property

سوال ۳: کدام گزینه آرایه‌ای از Objectها را تعریف می‌کند؟

الف

const data = {name: "Ali", age: 20}

const data = [{name: "Ali"}, {name: "Reza"}]

const data = "Ali,Reza,Mahdi"

نتایج آزمون

🚀 دروس بیشتر در راه است!

ما به شدت در حال تولید دروس جدید و پیشرفته‌تری هستیم. این دروس به زودی اضافه خواهند شد:

🔗

DOM Manipulation

دستکاری المان‌های صفحه وب با جاوااسکریپت

🔄

Async Programming

برنامه‌نویسی ناهمگام با Promise و Async/Await

🎯

Events & Forms

مدیریت رویدادها و اعتبارسنجی فرم‌ها

📦

ES6+ Features

ویژگی‌های جدید جاوااسکریپت مدرن

دروس جدید هر هفته منتشر می‌شوند!

🚀 دوره جامع JavaScript 💫

🎓 آموزش تعاملی گام به گام

متغیرها در جاوااسکریپت

چرا متغیرها مهم هستند؟

مفهوم کلیدی

تمرین تعاملی

تمرین:

نکات طلایی:

آزمون پایان جلسه - متغیرها

سوال ۱: کدام روش تعریف متغیر برای مقدار ثابت مناسب است؟

سوال ۲: کدام گزینه نام‌گذاری صحیح camelCase است؟

سوال ۳: مقدار متغیر زیر چیست؟ let x = 5; x = x + 3;

نتایج آزمون

انواع داده (Data Types)

انواع داده در جاوااسکریپت

Primitive (اولیه)

Object (شیء)

آزمایشگاه انواع داده

مقایسه == و ===

آزمون پایان جلسه - انواع داده

سوال ۱: خروجی typeof null چیست؟

سوال ۲: کدام نوع داده جزء انواع اولیه (Primitive) نیست؟

سوال ۳: 123 === "123" چه مقدار برمی‌گرداند؟

نتایج آزمون

توابع (Functions)

توابع: قلب جاوااسکریپت

انواع توابع

نکات طلایی توابع:

آزمون پایان جلسه - توابع

سوال ۱: کدام گزینه تعریف صحیح Arrow Function است؟

سوال ۲: خروجی کد زیر چیست؟ function test() {} سپس console.log(test());

سوال ۳: کدام ویژگی تابع بازگشتی (recursive) است؟

نتایج آزمون

آرایه‌ها و Objectها

ساختارهای داده پیچیده

کار با آرایه‌ها و Objectها

نکات طلایی:

آزمون پایان جلسه - آرایه‌ها و Objectها

سوال ۱: کدام روش برای اضافه کردن عنصر به انتهای آرایه استفاده می‌شود؟

سوال ۲: چگونه به ویژگی‌های Object دسترسی پیدا کنیم؟

سوال ۳: کدام گزینه آرایه‌ای از Objectها را تعریف می‌کند؟

نتایج آزمون

🚀 دروس بیشتر در راه است!

DOM Manipulation

Async Programming

Events & Forms

ES6+ Features

سوال ۳: مقدار متغیر زیر چیست؟ `let x = 5; x = x + 3;`

سوال ۱: خروجی `typeof null` چیست؟

سوال ۳: `123 === "123"` چه مقدار برمی‌گرداند؟

سوال ۲: خروجی کد زیر چیست؟ `function test() {}` سپس `console.log(test());`