یاد بگیریم، بسازیم

← بازگشت به صفحه اصلی

جاوااسکریپت چیست؟

تا اینجا با HTML ساختار صفحه رو ساختی و با CSS ظاهرش دادی. ولی هیچ‌کدوم از این دو تا نمی‌تونن به یه کلیک واکنش نشون بدن، یه عدد رو حساب کنن، یا محتوای صفحه رو بدون رفرش کردن عوض کنن. این دقیقاً کاریه که جاوااسکریپت انجام می‌ده — همون زبانی که باعث می‌شه یه صفحه‌ی وب «زنده» باشه.

جاوااسکریپت دقیقاً چیکار می‌کنه؟

اگه HTML اسکلت و CSS ظاهره، جاوااسکریپت رفتاره. با جاوااسکریپت می‌تونی به رویدادها واکنش نشون بدی (مثل کلیک یا تایپ کردن)، محتوای صفحه رو بدون رفرش عوض کنی، با سرور ارتباط برقرار کنی (مثلاً برای گرفتن اطلاعات جدید)، یا محاسبات انجام بدی. همون اسکریپت‌هایی که تو همین سایت برای فهرست مطالب چسبان یا دکمه‌ی بازگشت به بالا نوشتیم، همه جاوااسکریپتن.

برخلاف اسمش، جاوااسکریپت ربطی به زبان Java نداره؛ فقط یه اسم تجاریه که تو دهه‌ی ۹۰ میلادی برای جذب توجه انتخاب شد.

اتصال جاوااسکریپت به HTML

دقیقاً مثل CSS، سه راه برای اضافه کردن جاوااسکریپت به یه صفحه هست:

درون‌خطی (Inline) — مستقیم رو یه تگ، با ویژگی مثل onclick:

<button onclick="alert('سلام')">کلیک کن</button>

داخلی (Internal) — داخل تگ <script> تو خود فایل HTML:

<script>
    console.log('سلام دنیا');
</script>

خارجی (External) — یه فایل جدا با پسوند .js، که معمولاً بهترین روشه:

<script src="app.js"></script>

یه نکته‌ی مهم: معمولاً تگ <script> رو درست قبل از </body> می‌ذاری (دقیقاً مثل اسکریپت‌های همین سایت)، نه تو <head>. این کار باعث می‌شه مرورگر اول کل HTML صفحه رو بخونه و نمایش بده، بعد بره سراغ اجرای جاوااسکریپت — یعنی کاربر زودتر محتوا رو می‌بینه.

متغیرها: let، const و var

متغیر یه جعبه‌ست که یه مقدار رو نگه می‌داره. جاوااسکریپت سه تا کلیدواژه برای ساختن متغیر داره:

let name = "علی";        // می‌تونه بعداً تغییر کنه
const PI = 3.14;         // هیچ‌وقت تغییر نمی‌کنه
var oldWay = "قدیمی";    // روش قدیمی، دیگه توصیه نمی‌شه

• let: وقتی مقدار متغیر قراره بعداً عوض بشه.
• const: وقتی مقدار ثابته و نباید عوض بشه (پیش‌فرض خوبیه؛ اگه بعداً نیاز به تغییر دیدی، به let تبدیلش کن).
• var: روش قدیمی‌تر که رفتار عجیب‌وغریبی با دامنه‌ی متغیر داره. تو کد جدید دیگه ازش استفاده نمی‌شه.

انواع داده‌ی پایه

• رشته (String): متن، داخل گیومه: "سلام" یا 'سلام'
• عدد (Number): 42 یا 3.14 (برخلاف خیلی از زبان‌ها، جاوااسکریپت بین عدد صحیح و اعشاری فرق نمی‌ذاره)
• بولین (Boolean): فقط true یا false
• آرایه (Array): یه لیست مرتب: ["HTML", "CSS", "JS"]
• شیء (Object): مجموعه‌ای از جفت‌های کلید-مقدار: { name: "علی", age: 25 }

توابع (Function)

تابع یه بلوک کده که می‌تونی چندین بار صداش بزنی، بدون این‌که دوباره بنویسیش. دو تا سینتکس رایج:

// تعریف ساده
function greet(name) {
    return "سلام " + name;
}

// تابع پیکانی (Arrow Function) — نوشتار کوتاه‌تر
const greet = (name) => {
    return "سلام " + name;
};

توابع پیکانی امروز خیلی رایج‌ترن، خصوصاً برای توابع کوتاه.

شرط و حلقه

برای تصمیم‌گیری، از if و else استفاده می‌کنی:

if (age >= 18) {
    console.log("بزرگسال");
} else {
    console.log("نوجوان");
}

و برای تکرار یه کار، از حلقه‌ها. رایج‌ترینش forـه:

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

DOM چیست؟

DOM (مخفف Document Object Model) یعنی نسخه‌ای از صفحه‌ی HTML‌ت که جاوااسکریپت می‌تونه بهش دسترسی داشته باشه و تغییرش بده. با DOM می‌تونی یه عنصر رو پیدا کنی، متنش رو عوض کنی، یا به رویدادهاش (مثل کلیک) گوش بدی:

// پیدا کردن یه عنصر با کلاس یا id
const button = document.querySelector('#my-button');

// گوش دادن به رویداد کلیک
button.addEventListener('click', () => {
    console.log('دکمه کلیک شد!');
});

// تغییر متن یه عنصر
document.querySelector('h1').textContent = 'عنوان جدید';

این سه تا متد (querySelector، addEventListener، textContent) احتمالاً بیشترین استفاده رو تو کارهای روزمره‌ی جاوااسکریپت دارن.

نمونه‌ی واقعی: دکمه‌ی بازگشت به بالا تو همین سایت

بیا یه نمونه‌ی واقعی از خود همین سایت رو با هم بخونیم. این دقیقاً همون کدیه که دکمه‌ی ↑ پایین صفحه رو فعال می‌کنه:

const backToTop = document.getElementById('back-to-top');

window.addEventListener('scroll', () => {
    backToTop.style.display = window.scrollY > 300 ? 'block' : 'none';
});

backToTop.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});

خط به خط:

• خط ۱: دکمه رو با idش پیدا می‌کنه و تو یه متغیر ذخیره می‌کنه.
• خط ۳-۵: هر بار که کاربر صفحه رو اسکرول می‌کنه، چک می‌کنه آیا بیشتر از ۳۰۰ پیکسل پایین رفته یا نه؛ اگه آره دکمه رو نشون می‌ده، وگرنه مخفیش می‌کنه.
• خط ۷-۹: وقتی روی دکمه کلیک می‌شه، صفحه رو با یه حرکت نرم (smooth) به بالا برمی‌گردونه.

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

کجاها جاوااسکریپت لازمه؟

• اعتبارسنجی فرم‌ها: چک کردن ورودی کاربر قبل از ارسال
• محتوای پویا: نمایش/مخفی کردن بخش‌ها، منوهای کشویی، تب‌ها
• ارتباط با سرور: گرفتن داده بدون رفرش صفحه (با fetch API)
• اپلیکیشن‌های وب کامل: فریم‌ورک‌هایی مثل React و Vue، که خودشون هم در نهایت جاوااسکریپتن

جمع‌بندی

جاوااسکریپت سومین پایه‌ی اصلی وبه، بعد از HTML و CSS. با متغیرها، توابع، و دسترسی به DOM، می‌تونی صفحه‌ای که ساختی رو واقعاً زنده کنی. این فقط قدم اوله؛ بخش‌های بعدی این مجموعه (فرم‌ها، رویدادهای پیشرفته‌تر، و کار با API) به‌زودی اضافه می‌شن.

← بازگشت به صفحه اصلی