JavaScript چیست؟ آموزش جامع جاوااسکریپت از صفر تا پیشرفته

مقدمه

در مقاله‌های قبلی یاد گرفتیم HTML اسکلت صفحه وب را می‌سازد و CSS به آن ظاهر می‌دهد. اما هر دوی اینها ساکن هستند — صفحه‌ای که می‌سازید ثابت است، واکنشی نشان نمی‌دهد و هوشمند نیست.

JavaScript همان چیزی است که وب را زنده می‌کند. وقتی روی دکمه‌ای کلیک می‌کنید و منو باز می‌شود، وقتی فرمی را پر می‌کنید و بلافاصله خطا نشان می‌دهد، وقتی بدون reload صفحه محتوای جدید می‌آید — همه اینها JavaScript است.

امروز JavaScript فراتر از مرورگر رفته: سرور (Node.js)، اپلیکیشن موبایل (React Native)، دسکتاپ (Electron) و حتی هوش مصنوعی (TensorFlow.js) با JavaScript ساخته می‌شوند. یادگیری JavaScript یعنی داشتن یک زبان برای همه جا.

JavaScript چیست؟

JavaScript یک زبان برنامه‌نویسی تفسیرشده، پویا و چندپارادایمی است که در سال ۱۹۹۵ توسط Brendan Eich در ۱۰ روز (!) ساخته شد. اگر برخی رفتارهای عجیب JavaScript را دیدید، حالا می‌دانید چرا.

• تفسیرشده (Interpreted): کد مستقیماً توسط موتور مرورگر اجرا می‌شود، نیاز به کامپایل ندارد.

• پویا (Dynamic): نوع متغیرها در زمان اجرا مشخص می‌شود، نه زمان نوشتن کد.

• چندپارادایمی: هم رویه‌ای، هم شی‌گرا، هم تابعی می‌توانید بنویسید.

JavaScript را با Java اشتباه نگیرید — فقط اسم مشابهی دارند و هیچ ربط فنی به هم ندارند. این اشتباه نامگذاری یکی از بزرگترین سردرگمی‌های دنیای برنامه‌نویسی است!

JavaScript کجا اجرا می‌شود؟

JavaScript توسط یک موتور (Engine) اجرا می‌شود. هر مرورگر موتور خودش را دارد:

Node.js هم از همان موتور V8 گوگل استفاده می‌کند — به همین دلیل JavaScript در سرور هم اجرا می‌شود.

اولین برنامه JavaScript

JavaScript را می‌توانید مستقیم در مرورگر تست کنید — F12 بزنید، تب Console را باز کنید و بنویسید:

console.log('سلام دنیا!');
// خروجی: سلام دنیا!

یا در HTML با تگ script اضافه کنید:

<!-- در انتهای body — بعد از لود HTML -->
<script src="app.js"></script>
 
<!-- یا مستقیم -->
<script>
    console.log('سلام دنیا!');
</script>

متغیرها در JavaScript

متغیر ظرفی است برای نگهداری داده. JavaScript سه روش تعریف متغیر دارد:

// let — متغیر قابل تغییر (توصیه‌شده)
let age = 25;
age = 26;  // مجاز
 
// const — ثابت (بیشتر استفاده کنید)
const name = 'رضا';
// name = 'علی';  // خطا! قابل تغییر نیست
 
// var — قدیمی، از آن اجتناب کنید
var city = 'تهران';  // مشکلات scoping دارد

قانون ساده: همیشه const استفاده کنید. اگر نیاز به تغییر داشتید، let. هرگز var.

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

JavaScript هفت نوع داده اصلی (Primitive) دارد:

// String — متن
const firstName = 'رضا';
const lastName = "احمدی";
const fullName = `${firstName} ${lastName}`;  // Template Literal
 
// Number — عدد (هم صحیح، هم اعشاری)
const age = 25;
const pi = 3.14;
 
// Boolean — درست یا نادرست
const isLoggedIn = true;
const isPremium = false;
 
// null — عمداً خالی
const user = null;
 
// undefined — هنوز مقدار ندارد
let score;
console.log(score);  // undefined
 
// Symbol — شناسه یکتا (پیشرفته)
const id = Symbol('id');
 
// BigInt — اعداد خیلی بزرگ
const bigNumber = 9007199254740991n;

عملگرها (Operators)

// حسابی
console.log(10 + 3);   // 13
console.log(10 - 3);   // 7
console.log(10 * 3);   // 30
console.log(10 / 3);   // 3.333...
console.log(10 % 3);   // 1 (باقی‌مانده)
console.log(2 ** 8);   // 256 (توان)
 
// مقایسه
console.log(5 == '5');   // true  (فقط مقدار)
console.log(5 === '5');  // false (مقدار + نوع) ← همیشه این را استفاده کنید
console.log(5 !== 3);    // true
console.log(10 > 5);     // true
 
// منطقی
console.log(true && false);  // false (AND)
console.log(true || false);  // true  (OR)
console.log(!true);          // false (NOT)
 
// Nullish Coalescing — اگر null یا undefined بود
const username = null ?? 'کاربر مهمان';
console.log(username);  // 'کاربر مهمان'
 
// Optional Chaining — دسترسی امن به property
const user = null;
console.log(user?.name);  // undefined (نه خطا)

ساختارهای کنترلی

شرط‌ها

const score = 85;
 
// if / else if / else
if (score >= 90) {
    console.log('عالی');
} else if (score >= 70) {
    console.log('خوب');
} else {
    console.log('نیاز به تلاش بیشتر');
}
 
// Ternary (سه‌گانه) — برای شرط‌های ساده
const result = score >= 60 ? 'قبول' : 'مردود';
 
// Switch
const day = 'شنبه';
switch (day) {
    case 'شنبه':
    case 'یکشنبه':
        console.log('آخر هفته');
        break;
    default:
        console.log('روز کاری');
}

حلقه‌ها

// for — وقتی تعداد تکرار مشخص است
for (let i = 0; i < 5; i++) {
    console.log(i);  // 0, 1, 2, 3, 4
}
 
// while — وقتی شرط مشخص است
let count = 0;
while (count < 3) {
    console.log(count);
    count++;
}
 
// for...of — روی آرایه‌ها (مدرن و تمیز)
const languages = ['HTML', 'CSS', 'JavaScript'];
for (const lang of languages) {
    console.log(lang);
}
 
// for...in — روی کلیدهای آبجکت
const user = { name: 'رضا', age: 25 };
for (const key in user) {
    console.log(`${key}: ${user[key]}`);
}

توابع (Functions)

توابع بلوک‌های قابل استفاده مجدد از کد هستند — یکی از مهم‌ترین مفاهیم

// Function Declaration
function greet(name) {
    return `سلام ${name}!`;
}
console.log(greet('رضا'));  // سلام رضا!
 
// Function Expression
const add = function(a, b) {
    return a + b;
};
 
// Arrow Function — مدرن‌ترین روش (ES6+)
const multiply = (a, b) => a * b;
const square = n => n ** 2;
 
// پارامتر پیش‌فرض
function createUser(name, role = 'کاربر') {
    return { name, role };
}
 
// Rest Parameters — تعداد نامحدود پارامتر
function sum(...numbers) {
    return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4, 5));  // 15

آرایه‌ها (Arrays)

آرایه‌ها یکی از پرکاربردترین ساختارهای داده در JavaScript هستند:

const courses = ['HTML', 'CSS', 'JavaScript', 'React'];
 
// دسترسی (index از صفر شروع می‌شود)
console.log(courses[0]);        // HTML
console.log(courses.length);    // 4
console.log(courses.at(-1));    // React (آخرین)
 
// اضافه و حذف
courses.push('Node.js');        // اضافه به آخر
courses.unshift('Git');         // اضافه به اول
courses.pop();                  // حذف از آخر
courses.splice(1, 1);           // حذف از index مشخص
 
// متدهای پرکاربرد — اینها را حفظ کنید!
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
// map — تبدیل هر عنصر به چیز دیگری
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
 
// filter — فیلتر کردن با شرط
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4, 6, 8, 10]
 
// reduce — تجمیع به یک مقدار
const total = numbers.reduce((sum, n) => sum + n, 0);
// 55
 
// find — پیدا کردن اولین عنصر
const firstBig = numbers.find(n => n > 7);
// 8
 
// some / every
console.log(numbers.some(n => n > 9));   // true
console.log(numbers.every(n => n > 0));  // true
 
// includes
console.log(courses.includes('React'));  // true

آبجکت‌ها (Objects)

آبجکت‌ها ساختار داده‌ای هستند که داده‌های مرتبط را در قالب key-value نگه می‌دارند:

// تعریف آبجکت
const article = {
    title: 'JavaScript چیست؟',
    slug: 'what-is-javascript',
    readingTime: 15,
    tags: ['JavaScript', 'فرانت‌اند'],
    author: {
        name: 'رضا احمدی',
        avatar: '/images/reza.jpg',
    },
    isPublished: true,
};
 
// دسترسی به property
console.log(article.title);
console.log(article['slug']);        // با براکت
console.log(article.author.name);   // تودرتو
 
// Destructuring — یکی از مفیدترین قابلیت‌های ES6
const { title, readingTime, author: { name } } = article;
console.log(title, readingTime, name);
 
// Spread Operator — کپی یا merge
const updatedArticle = {
    ...article,
    readingTime: 20,
    updatedAt: new Date(),
};
 
// متدها در آبجکت
const counter = {
    count: 0,
    increment() { this.count++; },
    decrement() { this.count--; },
    getCount() { return this.count; },
};
counter.increment();
console.log(counter.getCount());  // 1

DOM — قلب تپنده JavaScript در مرورگر

DOM مخفف Document Object Model است. مرورگر HTML صفحه را به یک درخت از آبجکت‌ها (DOM) تبدیل می‌کند که JavaScript می‌تواند آن را بخواند و تغییر دهد:

// انتخاب عنصر
const btn = document.querySelector('#submit-btn');
const title = document.querySelector('h1');
const cards = document.querySelectorAll('.card');
 
// تغییر محتوا
title.textC 'عنوان جدید';
title.innerHTML = '<strong>عنوان جدید</strong>';
 
// تغییر استایل
btn.style.backgroundColor = '#6c63ff';
btn.style.display = 'none';
 
// کلاس‌ها
btn.classList.add('active');
btn.classList.remove('hidden');
btn.classList.toggle('dark');
btn.classList.contains('active');  // true
 
// ساختن عنصر جدید
const newCard = document.createElement('div');
newCard.className = 'card';
newCard.textC 'کارت جدید';
document.querySelector('.cards-grid').appendChild(newCard);
 
// حذف عنصر
newCard.remove();

رویدادها (Events)

رویدادها آنچه‌ای هستند که کاربر انجام می‌دهد — کلیک، تایپ، اسکرول — و JavaScript می‌تواند به آنها واکنش نشان دهد:

const btn = document.querySelector('#my-btn');
 
// اضافه کردن Event Listener
btn.addEventListener('click', function(event) {
    console.log('دکمه کلیک شد!');
    console.log(event.target);  // همان دکمه
});
 
// Arrow function
btn.addEventListener('click', (e) => {
    e.preventDefault();  // جلوگیری از رفتار پیش‌فرض (مثلاً submit فرم)
    e.stopPropagation(); // جلوگیری از بالا رفتن رویداد
});
 
// رویدادهای پرکاربرد
element.addEventListener('click', handler);       // کلیک
element.addEventListener('mouseover', handler);   // هاور
element.addEventListener('keydown', handler);     // فشردن کلید
element.addEventListener('submit', handler);      // ارسال فرم
element.addEventListener('change', handler);      // تغییر input
element.addEventListener('scroll', handler);      // اسکرول
window.addEventListener('load', handler);         // لود کامل صفحه
window.addEventListener('resize', handler);       // تغییر اندازه
 
// مثال واقعی: فرم ورود
const form = document.querySelector('#login-form');
form.addEventListener('submit', (e) => {
    e.preventDefault();
 
    const email = document.querySelector('#email').value;
    const password = document.querySelector('#password').value;
 
    if (!email || !password) {
        showError('لطفاً همه فیلدها را پر کنید');
        return;
    }
 
    // ارسال به سرور...
});

JavaScript ناهمزمان (Async JavaScript)

یکی از مفاهیم کلیدی JavaScript که خیلی‌ها در ابتدا با آن دست‌وپنجه نرم می‌کنند — Async است. JavaScript تک‌رشته‌ای است (Single-threaded) یعنی فقط یک کار را در یک لحظه انجام می‌دهد. اما می‌تواند کارهای طولانی (مثل درخواست به سرور) را غیرهمزمان انجام دهد تا برنامه قفل نشود.

Callback — روش قدیمی

function fetchData(callback) {
    setTimeout(() => {
        callback(null, { name: 'رضا' });
    }, 1000);
}
 
fetchData((error, data) => {
    if (error) {
        console.error(error);
        return;
    }
    console.log(data);  // { name: 'رضا' }
});
// مشکل: Callback Hell — تودرتو شدن callbackها

Promise — روش مدرن‌تر

function fetchUser(id) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (id > 0) {
                resolve({ id, name: 'رضا' });
            } else {
                reject(new Error('ID نامعتبر است'));
            }
        }, 1000);
    });
}
 
fetchUser(1)
    .then(user => console.log(user))
    .catch(error => console.error(error))
    .finally(() => console.log('تمام شد'));

Async/Await — بهترین روش (ES8)

// با async/await کد ناهمزمان مثل کد همزمان خوانده می‌شود
async function loadUserData(userId) {
    try {
        const userResp await fetch(`/api/users/${userId}`);
        const user = await userResponse.json();
 
        const postsResp await fetch(`/api/posts?userId=${userId}`);
        const posts = await postsResponse.json();
 
        return { user, posts };
    } catch (error) {
        console.error('خطا در بارگذاری:', error);
        throw error;
    }
}
 
// استفاده
const data = await loadUserData(1);
console.log(data.user.name);

Fetch API — درخواست به سرور

در دنیای واقعی، JavaScript اطلاعات را از سرور می‌گیرد. Fetch API ابزار اصلی این کار است:

// GET — دریافت داده
async function getArticles() {
    const resp await fetch('https://api.codeloop.ir/articles');
 
    if (!response.ok) {
        throw new Error(`خطای HTTP: ${response.status}`);
    }
 
    const articles = await response.json();
    return articles;
}
 
// POST — ارسال داده
async function createComment(articleId, text) {
    const resp await fetch('/api/comments', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`,
        },
        body: JSON.stringify({ articleId, text }),
    });
 
    return response.json();
}
 
// مثال کامل: نمایش مقالات در صفحه
async function renderArticles() {
    const c document.querySelector('#articles-grid');
    container.innerHTML = '<p>در حال بارگذاری...</p>';
 
    try {
        const articles = await getArticles();
        container.innerHTML = articles
            .map(a => `
                <div class="card">
                    <h2>${a.title}</h2>
                    <p>${a.summary}</p>
                </div>
            `)
            .join('');
    } catch (error) {
        container.innerHTML = '<p>خطا در بارگذاری مقالات</p>';
    }
}
 
renderArticles();

مفاهیم پیشرفته ES6+

نسخه‌های جدید JavaScript قابلیت‌های قدرتمندی اضافه کردند که کد را تمیزتر و کوتاه‌تر می‌کنند:

// Destructuring پیشرفته
const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first=1, sec2, rest=[3,4,5]
 
const { name, age = 25, ...others } = user;
 
// Modules — کدتان را تقسیم کنید
// math.js
export const add = (a, b) => a + b;
export default function multiply(a, b) { return a * b; }
 
// app.js
import multiply, { add } from './math.js';
 
// Class — شی‌گرایی در JavaScript
class Article {
    #views = 0;  // Private field
 
    constructor(title, author) {
        this.title = title;
        this.author = author;
        this.createdAt = new Date();
    }
 
    get summary() {
        return `${this.title} توسط ${this.author}`;
    }
 
    incrementViews() {
        this.#views++;
        return this;  // برای method chaining
    }
 
    getViews() {
        return this.#views;
    }
}
 
class TechArticle extends Article {
    constructor(title, author, techStack) {
        super(title, author);
        this.techStack = techStack;
    }
 
    getTechInfo() {
        return `${this.summary} | تکنولوژی: ${this.techStack.join(', ')}`;
    }
}
 
const myArticle = new TechArticle(
    'JavaScript چیست؟',
    'رضا احمدی',
    ['ES6+', 'Node.js', 'React']
);
 
myArticle.incrementViews().incrementViews();
console.log(myArticle.getViews());    // 2
console.log(myArticle.getTechInfo()); // JavaScript چیست؟ توسط رضا احمدی | تکنولوژی: ES6+, Node.js, React

Local Storage — ذخیره داده در مرورگر

// ذخیره
localStorage.setItem('theme', 'dark');
localStorage.setItem('user', JSON.stringify({ name: 'رضا', role: 'admin' }));
 
// خواندن
const theme = localStorage.getItem('theme');  // 'dark'
const user = JSON.parse(localStorage.getItem('user'));  // { name: 'رضا', ... }
 
// حذف
localStorage.removeItem('theme');
localStorage.clear();  // همه را پاک کنید

Error Handling

// try/catch/finally
function parseJSON(str) {
    try {
        return JSON.parse(str);
    } catch (error) {
        if (error instanceof SyntaxError) {
            console.error('JSON نامعتبر:', error.message);
        } else {
            console.error('خطای ناشناخته:', error);
        }
        return null;
    } finally {
        console.log('عملیات parse تمام شد');
    }
}
 
// خطای سفارشی
class ApiError extends Error {
    constructor(message, statusCode) {
        super(message);
        this.name = 'ApiError';
        this.statusCode = statusCode;
    }
}
 
async function fetchWithError(url) {
    const resp await fetch(url);
    if (!response.ok) {
        throw new ApiError(`خطا در API`, response.status);
    }
    return response.json();
}

یک مثال کامل: سیستم لایک مقاله

بریم همه چیزی که یاد گرفتیم را در یک مثال واقعی ببینیم — دقیقاً مثل آنچه در کدلوپ استفاده می‌شود:

class LikeSystem {
    #articleId;
    #count;
    #isLiked;
    #btn;
 
    constructor(articleId, initialCount, initialIsLiked) {
        this.#articleId = articleId;
        this.#count = initialCount;
        this.#isLiked = initialIsLiked;
        this.#btn = document.querySelector(`[data-article="${articleId}"]`);
 
        this.#render();
        this.#attachEvents();
    }
 
    #render() {
        if (!this.#btn) return;
        this.#btn.textC `❤️ ${this.#count}`;
        this.#btn.classList.toggle('liked', this.#isLiked);
    }
 
    #attachEvents() {
        this.#btn?.addEventListener('click', () => this.#toggle());
    }
 
    async #toggle() {
        // Optimistic Update — اول UI را تغییر بده، بعد API
        this.#isLiked = !this.#isLiked;
        this.#count += this.#isLiked ? 1 : -1;
        this.#render();
 
        try {
            await fetch(`/api/articles/${this.#articleId}/like`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
            });
        } catch (error) {
            // اگر خطا خورد، برگرد به حالت قبل
            this.#isLiked = !this.#isLiked;
            this.#count += this.#isLiked ? 1 : -1;
            this.#render();
            console.error('خطا در ثبت لایک');
        }
    }
}
 
// استفاده
new LikeSystem('article-123', 42, false);

تفاوت JavaScript با TypeScript

وقتی پروژه‌ها بزرگ می‌شوند، اکثر تیم‌ها به TypeScript می‌روند:

توصیه: ابتدا JavaScript را کاملاً یاد بگیرید. بعد TypeScript یاد گرفتنش بسیار راحت‌تر است.

نکات مهم برای نوشتن JavaScript خوب

• همیشه const اول، بعد let: از var اجتناب کنید — مشکلات scoping و hoisting ایجاد می‌کند.

• === به جای ==: مقایسه سختگیرانه (strict equality) اشتباهات پنهان را حذف می‌کند.

• همیشه خطاها را handle کنید: هر await احتیاج به try/catch دارد.

• کد را ماژولار بنویسید: توابع کوچک با یک وظیفه مشخص بهتر از یک تابع بزرگ است.

• Console.log دوست شماست: در مرحله یادگیری هر چیزی که مطمئن نیستید را log کنید.

JavaScript تنها زبانی است که می‌توانید آن را بدون هیچ نصبی، همین الان در مرورگرتان تمرین کنید. F12 بزنید، Console را باز کنید و شروع کنید. بهترین روش یادگیری، نوشتن کد است — نه خواندن درباره کد. اگر می‌خواهید مسیر یادگیری فرانت‌اند را ساختارمند طی کنید، نقشه راه کدلوپ نقطه شروع خوبی است.

نتیجه‌گیری

JavaScript قلب وب مدرن است. از یک فریم‌ورک UI مثل React که روی آن بنا شده، تا Node.js که سرور شما را اجرا می‌کند، تا ابزارهای build مثل Vite — همه JavaScript هستند.

مسیر یادگیری پیشنهادی بعد از این مقاله:

• DOM Manipulation: پروژه‌های کوچک بسازید — یک todo list، یک تایمر، یک آب‌وهوا‌سنج با API.

• Async/Await + Fetch: با APIهای عمومی کار کنید و داده واقعی نمایش دهید.

• یک فریم‌ورک: بعد از تسلط بر پایه، React یا Vue یاد بگیرید.

• Node.js: همان JavaScript، حالا در سرور — با Express می‌توانید API بسازید.

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