مقدمه‌ای بر جاوا اسکریپت: از صفر تا مفاهیم پایه

در دنیای پویای توسعه وب امروز، هیچ زبانی به اندازه جاوا اسکریپت (JavaScript) فراگیر و تأثیرگذار نبوده است. از انیمیشن‌های ساده در صفحات وب گرفته تا برنامه‌های پیچیده تحت وب، اپلیکیشن‌های موبایل، دسکتاپ و حتی توسعه بک‌اند، جاوا اسکریپت در قلب بسیاری از نوآوری‌های دیجیتال قرار دارد. این زبان، که زمانی تنها برای افزودن تعامل به مرورگرها استفاده می‌شد، اکنون به یک اکوسیستم عظیم تبدیل شده است که مرزهای توسعه نرم‌افزار را در هم می‌شکند.

هدف از این مقاله، ارائه یک مقدمه جامع و عمیق به جاوا اسکریپت است؛ مسیری که از صفر آغاز شده و شما را با مفاهیم پایه و اساسی این زبان آشنا می‌کند. این مقاله برای کسانی طراحی شده است که یا هیچ پیش‌زمینه‌ای در برنامه‌نویسی جاوا اسکریپت ندارند و یا به دنبال سازماندهی و تقویت دانش پایه‌ای خود هستند. ما نه تنها به “چگونه” کارها را انجام دهیم، بلکه به “چرا” آنها را به این شیوه انجام می‌دهیم، خواهیم پرداخت. با مطالعه این راهنما، شما نه تنها با سینتکس و ساختار جاوا اسکریپت آشنا می‌شوید، بلکه بینشی عمیق‌تر نسبت به فلسفه و رویکرد این زبان برای حل مسائل خواهید یافت.

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

مقدمه: چرا جاوا اسکریپت را یاد بگیریم؟

جاوا اسکریپت، بیش از یک زبان برنامه‌نویسی، یک ستون فقرات برای وب مدرن است. در ابتدا، در سال 1995 توسط برندن آیک در Netscape با نام LiveScript توسعه یافت و بعداً به JavaScript تغییر نام داد تا از محبوبیت جاوا بهره‌برداری کند. در آن زمان، هدف اصلی آن افزودن تعاملات و پویایی به صفحات وب ایستا بود. اما امروزه، دامنه کاربرد آن بسیار گسترده‌تر شده است.

تأثیر و فراگیری جاوا اسکریپت

امروزه، جاوا اسکریپت در سه حوزه اصلی وب حضور پررنگی دارد:

• توسعه سمت کاربر (Client-Side Development): این همان چیزی است که جاوا اسکریپت با آن شناخته شد. تمامی تعاملات کاربر با صفحه وب، از جمله اعتبارسنجی فرم‌ها، انیمیشن‌های رابط کاربری، بارگذاری محتوای پویا و… توسط جاوا اسکریپت مدیریت می‌شود. مرورگرهای وب مانند کروم، فایرفاکس، سافاری و اج همگی موتورهای جاوا اسکریپت داخلی خود را دارند (مانند V8 در کروم) که کد جاوا اسکریپت را اجرا می‌کنند.
• توسعه سمت سرور (Server-Side Development): با معرفی Node.js در سال 2009، جاوا اسکریپت از محدودیت مرورگر فراتر رفت و توانست در سمت سرور نیز اجرا شود. این قابلیت، به توسعه‌دهندگان اجازه می‌دهد تا کل پشته نرم‌افزاری (Full-Stack) یک برنامه را تنها با یک زبان (جاوا اسکریپت) توسعه دهند. Node.js امکان ساخت APIها، سرویس‌های وب، و حتی ابزارهای خط فرمان را فراهم می‌کند.
• توسعه موبایل و دسکتاپ: فریم‌ورک‌هایی مانند React Native برای ساخت اپلیکیشن‌های موبایل Native و Electron برای ساخت اپلیکیشن‌های دسکتاپ چندپلتفرمی، نشان‌دهنده گستردگی نفوذ جاوا اسکریپت فراتر از وب هستند. این به معنای آن است که با یادگیری جاوا اسکریپت، درهای زیادی به روی فرصت‌های شغلی مختلف باز می‌شود.

تکامل جاوا اسکریپت: ECMAScript

جاوا اسکریپت یک زبان استاندارد شده است. استاندارد آن توسط ECMA International تحت عنوان ECMAScript (ES) منتشر می‌شود. هر سال، نسخه‌های جدیدی از ECMAScript با قابلیت‌ها و ویژگی‌های جدید منتشر می‌شوند که به بهبود کارایی، خوانایی و قابلیت‌های زبان کمک می‌کنند. از ES6 (ES2015) به بعد، تغییرات قابل توجهی در زبان ایجاد شد که آن را مدرن‌تر و قدرتمندتر کرد. این تکامل مداوم، جاوا اسکریپت را همواره در خط مقدم فناوری نگه داشته است.

با توجه به این گستردگی و تکامل بی‌وقفه، یادگیری جاوا اسکریپت نه تنها یک مهارت ارزشمند است، بلکه یک سرمایه‌گذاری بلندمدت در مسیر شغلی هر توسعه‌دهنده‌ای محسوب می‌شود. این زبان پلی است بین ایده‌های شما و پیاده‌سازی عملی آن‌ها در دنیای دیجیتال.

اولین گام‌ها: راه‌اندازی محیط و Hello World

یکی از زیبایی‌های جاوا اسکریپت، سهولت شروع به کار با آن است. برای نوشتن و اجرای اولین کد جاوا اسکریپت، در اکثر موارد، نیازی به نصب نرم‌افزار خاصی ندارید، زیرا مرورگر وب شما (مانند کروم، فایرفاکس) ابزارهای لازم را در خود دارد.

استفاده از کنسول توسعه‌دهنده مرورگر (Browser Developer Console)

ساده‌ترین راه برای شروع آزمایش کدهای جاوا اسکریپت، استفاده از کنسول توسعه‌دهنده مرورگر است. برای باز کردن آن:

• در کروم یا فایرفاکس: کلید F12 را فشار دهید یا راست کلیک کرده و گزینه “Inspect” (یا “Inspect Element”) را انتخاب کنید، سپس به تب “Console” بروید.

در این کنسول، می‌توانید کدهای جاوا اسکریپت را مستقیماً وارد کرده و نتیجه را مشاهده کنید. بیایید اولین برنامه خود را بنویسیم:

console.log("Hello, World!");

این دستور، رشته “Hello, World!” را در کنسول نمایش می‌دهد. console.log() یک تابع پرکاربرد برای نمایش اطلاعات و اشکال‌زدایی (debugging) در جاوا اسکریپت است.

الحاق جاوا اسکریپت به فایل HTML

برای اینکه جاوا اسکریپت بتواند با محتوای صفحه وب تعامل داشته باشد، باید آن را به فایل HTML خود اضافه کنیم. سه روش اصلی برای این کار وجود دارد:

1. جاوا اسکریپت درون‌خطی (Inline JavaScript)

می‌توانید کد جاوا اسکریپت را مستقیماً درون تگ‌های HTML با استفاده از ویژگی onclick یا سایر ویژگی‌های رویدادی (event attributes) بنویسید. این روش برای کدهای بسیار کوتاه مناسب است، اما برای کدهای پیچیده‌تر توصیه نمی‌شود، زیرا خوانایی و نگهداری کد را کاهش می‌دهد و اصول جداسازی نگرانی‌ها (separation of concerns) را نقض می‌کند.

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

2. جاوا اسکریپت داخلی (Internal JavaScript)

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

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>اولین صفحه جاوا اسکریپت</title>
</head>
<body>
    <h1>خوش آمدید!</h1>
    <script>
        console.log("این یک کد جاوا اسکریپت داخلی است.");
        document.querySelector('h1').style.color = 'blue';
    </script>
</body>
</html>

3. جاوا اسکریپت خارجی (External JavaScript)

این روش، که بهترین روش برای پروژه‌های بزرگ‌تر و قابل نگهداری است، شامل نوشتن کدهای جاوا اسکریپت در یک فایل جداگانه (با پسوند .js) و سپس لینک دادن آن به فایل HTML با استفاده از ویژگی src در تگ <script> است.

فایل script.js:

// script.js
console.log("این یک کد جاوا اسکریپت خارجی است.");
document.getElementById("myButton").addEventListener("click", function() {
    alert("دکمه کلیک شد!");
});

فایل index.html:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>جاوا اسکریپت خارجی</title>
</head>
<body>
    <h1>صفحه با فایل جاوا اسکریپت خارجی</h1>
    <button id="myButton">کلیک کنید</button>
    <script src="script.js"></script>
</body>
</html>

نکته مهم: ویژگی‌های defer و async در تگ <script>.
defer: اسکریپت را به صورت غیرهمگام بارگذاری می‌کند، اما اجرای آن را تا زمانی که HTML کاملاً تجزیه شود (DOM آماده شود) به تأخیر می‌اندازد. ترتیب اجرای اسکریپت‌ها با defer حفظ می‌شود.
async: اسکریپت را به صورت کاملاً غیرهمگام بارگذاری و اجرا می‌کند، بدون اینکه منتظر تجزیه HTML یا اجرای اسکریپت‌های دیگر بماند. ترتیب اجرا تضمین شده نیست.
استفاده از defer یا قرار دادن تگ <script> قبل از </body> برای اسکریپت‌هایی که نیاز به دسترسی به DOM دارند، توصیه می‌شود.

سینتکس و ساختار پایه: قواعد نوشتاری جاوا اسکریپت

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

1. حساسیت به حروف (Case Sensitivity)

جاوا اسکریپت حساس به حروف کوچک و بزرگ است. به این معنی که myVariable با myvariable یا MyVariable متفاوت است. کلمات کلیدی، نام متغیرها، نام توابع و… باید دقیقاً با حروف کوچک و بزرگ تعریف شده نوشته شوند.

let userName = "علی";
// username و UserName متغیرهای متفاوتی هستند
// console.log(Username); // خطا

2. نقطه‌ویرگول (Semicolons)

در جاوا اسکریپت، نقطه‌ویرگول (;) برای جدا کردن دستورات استفاده می‌شود. اگرچه در بسیاری از موارد اجباری نیست و مفسر جاوا اسکریپت می‌تواند آن را به صورت خودکار اضافه کند (Automatic Semicolon Insertion – ASI)، اما اکیداً توصیه می‌شود برای وضوح و جلوگیری از خطاهای احتمالی، همیشه دستورات خود را با نقطه‌ویرگول به پایان برسانید. این کار به خصوص در هنگام ترکیب و فشرده‌سازی کد (minification) اهمیت پیدا می‌کند.

let x = 10;
let y = 20; // این خط بدون نقطه‌ویرگول هم کار می‌کند، اما با آن خواناتر و امن‌تر است
console.log(x + y);

3. توضیحات (Comments)

توضیحات بخش‌هایی از کد هستند که توسط مفسر جاوا اسکریپت نادیده گرفته می‌شوند و فقط برای افزایش خوانایی و درک کد برای برنامه‌نویسان به کار می‌روند.

• توضیحات تک خطی: با دو اسلش (//) آغاز می‌شوند.
• توضیحات چندخطی: با /* آغاز و با */ پایان می‌یابند.

// این یک توضیح تک خطی است

/*
این یک توضیح چندخطی است.
می‌تواند شامل چندین خط باشد.
*/

let age = 30; // تعریف متغیر سن

4. کلمات کلیدی (Keywords) و نام‌گذاری (Naming Conventions)

جاوا اسکریپت دارای کلمات کلیدی رزرو شده‌ای است که نمی‌توان از آن‌ها به عنوان نام متغیرها، توابع یا شناسه‌ها استفاده کرد (مانند if, else, function, let, const, var و…).

برای نام‌گذاری متغیرها و توابع، یک قرارداد عمومی به نام Camel Case استفاده می‌شود: اولین کلمه با حرف کوچک شروع شده و کلمات بعدی با حرف بزرگ. (مثال: myVariableName, calculateTotalPrice).

5. متغیرها (Variables)

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

• var (قدیمی‌تر): قبل از ES6، تنها راه تعریف متغیر بود. دارای Scope تابعی (function scope) است و می‌تواند دوباره اعلان (re-declared) و مقداردهی مجدد (re-assigned) شود. مشکلات مربوط به Hoisting و Scope باعث شده‌اند که امروزه کمتر توصیه شود.
• let (ES6 به بعد): دارای Block Scope است. نمی‌تواند دوباره اعلان شود اما می‌تواند مقداردهی مجدد شود. این کلمه کلیدی برای متغیرهایی استفاده می‌شود که مقدار آن‌ها ممکن است در طول زمان تغییر کند.
• const (ES6 به بعد): دارای Block Scope است. نمی‌تواند دوباره اعلان یا مقداردهی مجدد شود. برای تعریف ثابت‌ها یا متغیرهایی که مقدار آن‌ها پس از تخصیص اولیه تغییر نخواهد کرد، استفاده می‌شود.

// var
var oldVariable = "من قدیمی هستم";
var oldVariable = "می‌توانم دوباره اعلان شوم"; // مجاز

// let
let newVariable = "من جدید هستم";
// let newVariable = "اینجا خطا می‌دهد"; // غیر مجاز: Cannot redeclare block-scoped variable
newVariable = "می‌توانم مقداردهی مجدد شوم"; // مجاز

// const
const myConstant = 3.14;
// myConstant = 3.15; // غیر مجاز: Assignment to constant variable
const myArray = [1, 2, 3];
myArray.push(4); // مجاز: محتوای آرایه یا شیء const قابل تغییر است، اما خود ارجاع به آرایه/شیء خیر

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

جاوا اسکریپت یک زبان با تایپ پویا (dynamically typed) است، به این معنی که نیازی نیست نوع داده یک متغیر را هنگام اعلان آن مشخص کنید. نوع داده به صورت خودکار بر اساس مقداری که به آن اختصاص داده می‌شود، تعیین می‌گردد.

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

الف. انواع داده اولیه (Primitive Data Types)

اینها مقادیر ساده و غیر قابل تغییر هستند:

• String: برای نمایش متن. می‌توانند در نقل قول تکی (')، دابل (") یا بک‌تیک (`) قرار گیرند. بک‌تیک‌ها امکان استفاده از Template Literals (جاسازی متغیرها و عبارات) را می‌دهند.

  let name = "وحید";
  let greeting = `سلام، ${name}!`; // Template Literal

• Number: هم برای اعداد صحیح و هم اعشاری.

  let age = 25;
  let price = 19.99;

• Boolean: فقط دو مقدار true یا false. برای منطق شرطی.

  let isActive = true;

• Undefined: نشان‌دهنده متغیری که اعلان شده اما مقداری به آن اختصاص داده نشده است.

  let city; // city اکنون undefined است

• Null:
  : یک مقدار “تهی” یا “هیچ” را نشان می‌دهد که به صورت صریح تخصیص داده شده است.

  let car = null;

• Symbol (ES6): برای ایجاد شناسه‌های یکتا و خصوصی.

  const id = Symbol('شناسه');

• BigInt (ES11): برای کار با اعداد صحیح بسیار بزرگتر از آنچه Number می‌تواند مدیریت کند.

  const largeNumber = 9007199254740991n;

ب. انواع داده غیر اولیه (Non-Primitive Data Type)

اینها مقادیر پیچیده هستند که به جای مقدار مستقیم، به یک محل در حافظه اشاره می‌کنند (Reference Type).

• Object: پایه و اساس تمامی ساختارهای داده پیچیده در جاوا اسکریپت است. آرایه‌ها، توابع و حتی null به عنوان نوعی از شیء در نظر گرفته می‌شوند (البته typeof null به صورت "object" برمی‌گردد که یک باگ تاریخی است).

  let person = {
      firstName: "سارا",
      lastName: "محمدی",
      age: 30
  };

درک تفاوت بین انواع داده اولیه و غیر اولیه (به ویژه رفتار pass-by-value در مقابل pass-by-reference) برای برنامه‌نویسی موثر جاوا اسکریپت حیاتی است.

عملگرها و عبارات: منطق برنامه‌نویسی

عملگرها نمادهایی هستند که یک عملیات را روی یک یا چند مقدار (عملوندها) انجام می‌دهند و یک مقدار جدید تولید می‌کنند. عبارات نیز ترکیب عملگرها، متغیرها و مقادیر هستند که نتیجه‌ای را تولید می‌کنند.

1. عملگرهای حسابی (Arithmetic Operators)

برای انجام عملیات ریاضی استفاده می‌شوند:

• + (جمع)
• - (تفریق)
• * (ضرب)
• / (تقسیم)
• % (باقیمانده تقسیم)
• ** (توان – ES7)
• ++ (افزایش: num++ یا ++num)
• -- (کاهش: num-- یا --num)

let a = 10;
let b = 3;
console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.333...
console.log(a % b); // 1
console.log(a ** b); // 1000 (10 به توان 3)
a++; // a اکنون 11 است
b--; // b اکنون 2 است

نکته: عملگر + می‌تواند برای الحاق رشته‌ها نیز استفاده شود. اگر یکی از عملوندها رشته باشد، جاوا اسکریپت سعی می‌کند عملوند دیگر را به رشته تبدیل کرده و سپس آنها را به هم بچسباند.

console.log("سلام" + " دنیا"); // "سلام دنیا"
console.log(10 + "20"); // "1020"

2. عملگرهای انتسابی (Assignment Operators)

برای تخصیص مقدار به یک متغیر استفاده می‌شوند:

• = (تخصیص ساده)
• += (جمع و تخصیص: x += y معادل x = x + y)
• -= (تفریق و تخصیص)
• *= (ضرب و تخصیص)
• /= (تقسیم و تخصیص)
• %= (باقیمانده و تخصیص)
• **= (توان و تخصیص)

let x = 5;
x += 3; // x اکنون 8 است

3. عملگرهای مقایسه‌ای (Comparison Operators)

برای مقایسه دو مقدار و بازگرداندن یک مقدار Boolean (true یا false) استفاده می‌شوند:

• == (برابری ضعیف/نرم: فقط مقدار را مقایسه می‌کند، نوع را خیر. تبدیل نوع انجام می‌دهد)
• === (برابری سخت/قوی: هم مقدار و هم نوع را مقایسه می‌کند. تبدیل نوع انجام نمی‌دهد)
• != (نابرابری ضعیف)
• !== (نابرابری سخت)
• > (بزرگتر از)
• < (کوچکتر از)
• >= (بزرگتر یا مساوی)
• <= (کوچکتر یا مساوی)

console.log(10 == "10"); // true (تبدیل نوع: "10" به 10)
console.log(10 === "10"); // false (نوع‌ها متفاوتند)
console.log(5 != "5");  // false
console.log(5 !== "5"); // true
console.log(7 > 5);     // true

توصیه: همیشه از === و !== استفاده کنید تا از رفتارهای غیرمنتظره ناشی از تبدیل نوع ضمنی (implicit type coercion) جلوگیری کنید.

4. عملگرهای منطقی (Logical Operators)

برای ترکیب یا معکوس کردن عبارات Boolean استفاده می‌شوند:

• && (و منطقی – AND): اگر هر دو عملوند true باشند، true برمی‌گرداند.
• || (یا منطقی – OR): اگر حداقل یکی از عملوندها true باشد، true برمی‌گرداند.
• ! (نقیض منطقی – NOT): مقدار Boolean یک عملوند را معکوس می‌کند.

let isAdult = true;
let hasLicense = false;
console.log(isAdult && hasLicense); // false
console.log(isAdult || hasLicense); // true
console.log(!isAdult); // false

5. عملگر سه‌تایی (Ternary Operator)

یک شکل مختصر از عبارت if-else است:

condition ? expressionIfTrue : expressionIfFalse;

let age = 18;
let status = (age >= 18) ? "بزرگسال" : "نوجوان";
console.log(status); // "بزرگسال"

6. عملگر typeof

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

console.log(typeof "hello");   // "string"
console.log(typeof 123);      // "number"
console.log(typeof true);     // "boolean"
console.log(typeof undefined);// "undefined"
console.log(typeof null);     // "object" (یک باگ تاریخی)
console.log(typeof {});       // "object"
console.log(typeof []);       // "object"
console.log(typeof function(){}); // "function"

7. تقدم عملگرها (Operator Precedence)

در عبارات پیچیده، ترتیب انجام عملیات توسط قواعد تقدم عملگرها تعیین می‌شود (مشابه ریاضیات که ضرب و تقسیم قبل از جمع و تفریق انجام می‌شوند). می‌توانید از پرانتز () برای تغییر تقدم پیش‌فرض استفاده کنید.

let result = 2 + 3 * 4;     // 14 (3 * 4 انجام می‌شود، سپس +2)
let result2 = (2 + 3) * 4;  // 20 (2 + 3 انجام می‌شود، سپس *4)

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

ساختارهای کنترلی: تصمیم‌گیری و تکرار در کد

ساختارهای کنترلی بلوک‌های اساسی هر زبان برنامه‌نویسی هستند که به شما امکان می‌دهند جریان اجرای برنامه را بر اساس شرایط مختلف تغییر دهید یا عملیات خاصی را به دفعات تکرار کنید. اینها “مغز” منطقی برنامه شما هستند.

1. دستورات شرطی (Conditional Statements)

برای اجرای بلوک‌های کد بر اساس اینکه یک شرط خاص true یا false است، استفاده می‌شوند.

الف. if...else if...else

اصلی‌ترین ساختار شرطی:

if (condition1) {
    // کد اجرا می‌شود اگر condition1 صحیح باشد
} else if (condition2) {
    // کد اجرا می‌شود اگر condition1 غلط و condition2 صحیح باشد
} else {
    // کد اجرا می‌شود اگر هیچ یک از شرایط بالا صحیح نباشند
}

let temperature = 25;

if (temperature > 30) {
    console.log("هوا بسیار گرم است.");
} else if (temperature > 20) {
    console.log("هوا مطبوع است.");
} else {
    console.log("هوا خنک است.");
}
// خروجی: "هوا مطبوع است."

ب. switch

برای زمانی که می‌خواهید یک متغیر را با چندین مقدار مختلف مقایسه کنید، switch می‌تواند خواناتر از چندین if...else if تو در تو باشد.

switch (expression) {
    case value1:
        // کد اگر expression == value1
        break; // مهم: برای جلوگیری از "fall-through"
    case value2:
        // کد اگر expression == value2
        break;
    default:
        // کد اگر هیچ یک از case ها مطابقت نداشتند
}

let day = "دوشنبه";

switch (day) {
    case "شنبه":
    case "یکشنبه":
        console.log("روز کاری آغاز می‌شود.");
        break;
    case "پنجشنبه":
    case "جمعه":
        console.log("نزدیک به آخر هفته.");
        break;
    default:
        console.log("روز معمولی هفته.");
}
// خروجی: "روز معمولی هفته."

استفاده از break پس از هر case بسیار مهم است تا از اجرای کدهای caseهای بعدی (“fall-through”) جلوگیری شود.

2. حلقه‌ها (Loops)

حلقه‌ها به شما امکان می‌دهند تا یک بلوک از کد را به دفعات تکرار کنید تا یک شرط خاص برآورده شود یا تا زمانی که برآورده نباشد.

الف. for Loop

برای زمانی که می‌دانید چند بار می‌خواهید یک بلوک کد را تکرار کنید، ایده‌آل است. شامل سه بخش است: 1. مقداردهی اولیه، 2. شرط پایان، 3. عبارت افزایش/کاهش.

for (initialization; condition; increment/decrement) {
    // کد اجرا می‌شود
}

for (let i = 0; i < 5; i++) {
    console.log("شمارش: " + i);
}
// خروجی:
// شمارش: 0
// شمارش: 1
// ...
// شمارش: 4

ب. while Loop

یک بلوک کد را تا زمانی که یک شرط true باشد، تکرار می‌کند. اگر شرط از ابتدا false باشد، حلقه هرگز اجرا نمی‌شود.

while (condition) {
    // کد اجرا می‌شود
}

let count = 0;
while (count < 3) {
    console.log("تکرار: " + count);
    count++;
}
// خروجی:
// تکرار: 0
// تکرار: 1
// تکرار: 2

ج. do...while Loop

مشابه while است، با این تفاوت که بلوک کد حداقل یک بار اجرا می‌شود، حتی اگر شرط از ابتدا false باشد، زیرا شرط در پایان حلقه بررسی می‌شود.

do {
    // کد اجرا می‌شود
} while (condition);

let num = 5;
do {
    console.log("عدد: " + num);
    num++;
} while (num < 5);
// خروجی:
// عدد: 5 (چون حداقل یک بار اجرا شد)

د. for...in Loop (برای اشیاء)

برای پیمایش بر روی ویژگی‌های قابل شمارش یک شیء استفاده می‌شود. این حلقه برای پیمایش آرایه‌ها توصیه نمی‌شود، زیرا ممکن است ویژگی‌های غیر عددی (مانند متدها یا ویژگی‌های ارث‌بری شده) را نیز شامل شود و ترتیب عناصر تضمین شده نیست.

let person = { name: "علی", age: 30, city: "تهران" };
for (let key in person) {
    console.log(key + ": " + person[key]);
}
// خروجی:
// name: علی
// age: 30
// city: تهران

ه. for...of Loop (برای مجموعه‌های قابل پیمایش)

معرفی شده در ES6، برای پیمایش بر روی مقادیر مجموعه‌های قابل پیمایش (iterable objects) مانند آرایه‌ها، رشته‌ها، Mapها، Setها و NodeListها طراحی شده است. این بهترین روش برای پیمایش آرایه‌ها است.

let colors = ["قرمز", "سبز", "آبی"];
for (let color of colors) {
    console.log(color);
}
// خروجی:
// قرمز
// سبز
// آبی

3. break و continue

• break: برای خروج فوری از یک حلقه یا دستور switch استفاده می‌شود.
• continue: اجرای تکرار فعلی حلقه را متوقف کرده و به تکرار بعدی می‌رود.

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // حلقه در 5 متوقف می‌شود
    }
    if (i % 2 !== 0) {
        continue; // اگر عدد فرد باشد، به تکرار بعدی می‌رود
    }
    console.log(i);
}
// خروجی:
// 0
// 2
// 4

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

توابع: بلوک‌های قابل استفاده مجدد کد

توابع (Functions) بلوک‌هایی از کد هستند که برای انجام یک وظیفه خاص طراحی شده‌اند. آنها به شما امکان می‌دهند کد را سازماندهی کنید، قابلیت استفاده مجدد (reusability) را افزایش دهید و کد را خواناتر و قابل نگهداری‌تر کنید. توابع یکی از اساسی‌ترین و قدرتمندترین مفاهیم در جاوا اسکریپت هستند.

تعریف تابع (Function Definition)

چندین راه برای تعریف یک تابع در جاوا اسکریپت وجود دارد:

1. اعلان تابع (Function Declaration)

این روش رایج‌ترین راه برای تعریف یک تابع است. توابع تعریف شده به این روش، تحت تأثیر Hoisting قرار می‌گیرند، به این معنی که می‌توانند قبل از تعریف شدن در کد فراخوانی شوند.

function greet(name) {
    return `سلام، ${name}!`;
}

2. عبارت تابع (Function Expression)

یک تابع را می‌توان به عنوان یک عبارت تعریف کرد و به یک متغیر اختصاص داد. این توابع Hoisted نمی‌شوند و باید قبل از فراخوانی تعریف شوند. می‌توانند نام‌گذاری شده یا بی‌نام (anonymous) باشند.

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

// تابع نام‌گذاری شده به عنوان عبارت تابع
const multiply = function calculateMultiply(x, y) {
    return x * y;
};
// calculateMultiply() فقط در داخل تابع خودش قابل دسترسی است، نه خارج از آن.

3. توابع پیکانی (Arrow Functions – ES6)

یک روش کوتاه‌تر برای نوشتن توابع، به خصوص برای توابع یک خطی و Callback Functions. آنها دارای سینتکس کوتاه‌تر هستند و نحوه مدیریت this در آنها متفاوت است (this را از Scope پدر به ارث می‌برند). توابع پیکانی نیز Hoisted نمی‌شوند.

const subtract = (a, b) => a - b;

const sayHello = name => console.log(`سلام ${name}`); // اگر یک آرگومان باشد، پرانتز اختیاری است

const calculateArea = (width, height) => {
    // برای توابع چند خطی نیاز به آکولاد و return صریح است
    const area = width * height;
    return area;
};

فراخوانی تابع (Function Invocation)

برای اجرای کد درون یک تابع، باید آن را “فراخوانی” یا “صدا” بزنید:

let message = greet("مریم"); // فراخوانی تابع greet
console.log(message); // خروجی: "سلام، مریم!"

console.log(add(5, 3)); // خروجی: 8

پارامترها و آرگومان‌ها (Parameters and Arguments)

• پارامترها: نام‌هایی هستند که در تعریف تابع لیست می‌شوند (مثال: name در greet(name)).
• آرگومان‌ها: مقادیر واقعی هستند که هنگام فراخوانی تابع به پارامترها ارسال می‌شوند (مثال: "مریم" در greet("مریم")).

مقادیر برگشتی (Return Values)

توابع می‌توانند مقداری را پس از اتمام کار خود “برگردانند”. کلمه کلیدی return برای این منظور استفاده می‌شود. اگر return صریحاً مشخص نشود، تابع undefined برمی‌گرداند.

function calculateSum(num1, num2) {
    let sum = num1 + num2;
    return sum; // مقدار sum را برمی‌گرداند
}

let total = calculateSum(10, 20);
console.log(total); // خروجی: 30

function doNothing() {
    // این تابع undefined برمی‌گرداند
}
console.log(doNothing()); // خروجی: undefined

هر کدی بعد از return در یک تابع، اجرا نخواهد شد.

Scope (محدوده)

Scope به دسترسی متغیرها، توابع و اشیاء در بخش‌های مختلف کد شما اشاره دارد. در جاوا اسکریپت، دو نوع اصلی Scope وجود دارد:

• Global Scope: متغیرهای تعریف شده در بیرون از هر تابع، در Global Scope هستند و از هر جای کد قابل دسترسی‌اند.
• Local (Function) Scope: متغیرهای تعریف شده درون یک تابع، دارای Local Scope هستند و فقط درون همان تابع قابل دسترسی‌اند.
• Block Scope (با let و const): متغیرهای تعریف شده با let و const درون بلوک‌های کد (مثلاً داخل if، for، while یا {} ساده) فقط درون همان بلوک قابل دسترسی‌اند.

let globalVar = "من سراسری هستم"; // Global Scope

function myFunction() {
    let functionVar = "من محلی تابع هستم"; // Function Scope
    console.log(globalVar); // قابل دسترسی
    if (true) {
        let blockVar = "من محلی بلوک هستم"; // Block Scope
        console.log(functionVar); // قابل دسترسی
        console.log(blockVar); // قابل دسترسی
    }
    // console.log(blockVar); // خطا: blockVar در اینجا تعریف نشده است
}

myFunction();
// console.log(functionVar); // خطا: functionVar در اینجا تعریف نشده است

درک Scope برای جلوگیری از تداخل نام‌گذاری متغیرها و مدیریت صحیح حافظه حیاتی است.

توابع به عنوان شهروندان درجه اول (First-Class Citizens)

در جاوا اسکریپت، توابع به عنوان “شهروندان درجه اول” تلقی می‌شوند، به این معنی که می‌توانند:

• به متغیرها اختصاص داده شوند.
• به عنوان آرگومان به توابع دیگر ارسال شوند (Callback Functions).
• از توابع دیگر به عنوان مقدار برگشتی بازگردانده شوند (Higher-Order Functions).

این ویژگی جاوا اسکریپت را بسیار قدرتمند و انعطاف‌پذیر می‌کند و پایه بسیاری از الگوهای طراحی مدرن مانند برنامه‌نویسی تابعی (Functional Programming) است.

// تابع به عنوان آرگومان (Callback Function)
function executeOperation(operation, x, y) {
    return operation(x, y);
}

const result = executeOperation(add, 10, 5); // add از بالا تعریف شده است
console.log(result); // خروجی: 15

// تابع برگرداننده تابع دیگر (Higher-Order Function)
function multiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

const multiplyBy5 = multiplier(5);
console.log(multiplyBy5(10)); // خروجی: 50 (10 * 5)

توابع ستون فقرات هر برنامه جاوا اسکریپت هستند. توانایی ساخت و استفاده مؤثر از توابع، مهارت شما را به عنوان یک توسعه‌دهنده به شدت ارتقا می‌دهد.

آرایه‌ها و اشیاء: کار با مجموعه‌ها و داده‌های پیچیده

در برنامه‌نویسی، اغلب نیاز به ذخیره و سازماندهی مجموعه‌ای از داده‌ها داریم. آرایه‌ها (Arrays) و اشیاء (Objects) دو ساختار داده بنیادی در جاوا اسکریپت هستند که این امکان را فراهم می‌کنند. در حالی که آرایه‌ها برای لیست‌های مرتب از آیتم‌ها عالی هستند، اشیاء برای ذخیره داده‌های ساختاریافته به صورت جفت‌های کلید-مقدار (key-value pairs) مناسب‌اند.

آرایه‌ها (Arrays)

یک آرایه یک لیست مرتب از مقادیر است. هر مقدار در آرایه یک “عنصر” نامیده می‌شود و دارای یک “شاخص” (index) عددی است که از صفر شروع می‌شود.

تعریف آرایه

آرایه‌ها را می‌توان با استفاده از براکت‌های مربعی [] یا با سازنده Array() تعریف کرد:

// روش رایج و توصیه شده
const fruits = ["سیب", "موز", "پرتقال"];

// با سازنده (کمتر رایج)
const numbers = new Array(1, 2, 3, 4, 5);

// آرایه خالی
const emptyArray = [];

یک آرایه می‌تواند شامل انواع داده مختلف باشد:

const mixedArray = [1, "سلام", true, { key: "value" }];

دسترسی به عناصر آرایه

با استفاده از شاخص می‌توان به عناصر آرایه دسترسی پیدا کرد:

console.log(fruits[0]); // خروجی: "سیب"
console.log(fruits[2]); // خروجی: "پرتقال"

// طول آرایه
console.log(fruits.length); // خروجی: 3

// دسترسی به آخرین عنصر
console.log(fruits[fruits.length - 1]); // خروجی: "پرتقال"

متدهای رایج آرایه

آرایه‌ها دارای متدهای داخلی قدرتمندی برای دستکاری و پیمایش عناصر هستند:

• push(): یک یا چند عنصر را به انتهای آرایه اضافه می‌کند.
• pop(): آخرین عنصر آرایه را حذف کرده و برمی‌گرداند.
• shift(): اولین عنصر آرایه را حذف کرده و برمی‌گرداند.
• unshift(): یک یا چند عنصر را به ابتدای آرایه اضافه می‌کند.
• splice(): عناصر را از یک شاخص مشخص حذف/اضافه/جایگزین می‌کند (آرایه اصلی را تغییر می‌دهد).
• slice(): زیرمجموعه‌ای از آرایه را به عنوان یک آرایه جدید برمی‌گرداند (آرایه اصلی را تغییر نمی‌دهد).
• concat(): دو یا چند آرایه را به هم متصل کرده و یک آرایه جدید برمی‌گرداند.
• indexOf(): اولین شاخص یک عنصر مشخص را برمی‌گرداند.
• includes() (ES6): بررسی می‌کند که آیا آرایه شامل یک عنصر مشخص است یا خیر (برمی‌گرداند true/false).
• forEach() (ES5): برای پیمایش بر روی عناصر آرایه و اجرای یک تابع callback برای هر عنصر.
• map() (ES5):: یک آرایه جدید با نتایج فراخوانی یک تابع callback برای هر عنصر در آرایه اصلی ایجاد می‌کند.
• filter() (ES5): یک آرایه جدید با تمام عناصری که شرط مشخص شده توسط تابع callback را برآورده می‌کنند، ایجاد می‌کند.
• reduce() (ES5): یک تابع callback را برای هر عنصر آرایه (از چپ به راست) اعمال می‌کند و آن را به یک مقدار واحد کاهش می‌دهد.

const numbers = [1, 2, 3, 4, 5];

numbers.push(6); // [1, 2, 3, 4, 5, 6]
numbers.pop();   // 6، numbers: [1, 2, 3, 4, 5]

const evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]

const doubledNumbers = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 15

اشیاء (Objects)

اشیاء مجموعه‌ای از جفت‌های کلید-مقدار نامرتب (unordred collection of key-value pairs) هستند. آنها برای نمایش موجودیت‌های دنیای واقعی با ویژگی‌ها و رفتارهای خود (متدها) استفاده می‌شوند.

تعریف شیء

اشیاء را می‌توان با استفاده از براکت‌های مجعد {} (Object Literal) یا با سازنده Object() تعریف کرد:

// روش رایج و توصیه شده
const user = {
    firstName: "علی",
    lastName: "نوری",
    age: 28,
    isStudent: false,
    hobbies: ["ورزش", "مطالعه"],
    address: {
        street: "خیابان آزادی",
        city: "تهران"
    },
    greet: function() { // یک متد (تابع درون یک شیء)
        return `سلام، من ${this.firstName} هستم.`;
    }
};

// با سازنده (کمتر رایج)
const car = new Object();
car.make = "تویوتا";
car.model = "کمری";

نکته: this در یک متد شیء به شیئی که متد را فراخوانی کرده است، اشاره دارد.

دسترسی به ویژگی‌های شیء

می‌توان با دو روش به ویژگی‌های یک شیء دسترسی پیدا کرد:

• Dot Notation (نقطه): رایج‌ترین روش، به خصوص زمانی که نام ویژگی ثابت است و کاراکترهای خاص ندارد.

  console.log(user.firstName); // خروجی: "علی"
  console.log(user.address.city); // خروجی: "تهران"

• Bracket Notation (براکت): زمانی که نام ویژگی متغیر است (مثلاً از یک متغیر می‌آید) یا شامل کاراکترهای خاص (مانند فاصله) است، استفاده می‌شود.

  console.log(user["lastName"]); // خروجی: "نوری"
  let prop = "age";
  console.log(user[prop]); // خروجی: 28

اضافه کردن، تغییر و حذف ویژگی‌ها

// اضافه کردن ویژگی جدید
user.email = "ali.nouri@example.com";

// تغییر مقدار ویژگی موجود
user.age = 29;

// حذف ویژگی
delete user.isStudent;

پیمایش اشیاء

برای پیمایش بر روی ویژگی‌های یک شیء، می‌توانید از حلقه for...in یا متدهای Object.keys()، Object.values() و Object.entries() استفاده کنید (معرفی شده در ES8):

// با for...in
for (let key in user) {
    console.log(`${key}: ${user[key]}`);
}

// با Object.keys() - برگرداندن یک آرایه از کلیدها
Object.keys(user).forEach(key => {
    console.log(key);
});

// با Object.values() - برگرداندن یک آرایه از مقادیر
Object.values(user).forEach(value => {
    console.log(value);
});

// با Object.entries() - برگرداندن یک آرایه از آرایه‌های [کلید, مقدار]
Object.entries(user).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});

JSON (JavaScript Object Notation)

JSON یک فرمت متنی سبک برای تبادل داده است که بر اساس سینتکس شیء جاوا اسکریپت ساخته شده است. این فرمت در ارتباطات شبکه (APIها) بسیار رایج است.

• JSON.parse(): یک رشته JSON را به یک شیء جاوا اسکریپت تجزیه می‌کند.
• JSON.stringify(): یک شیء جاوا اسکریپت را به یک رشته JSON تبدیل می‌کند.

const jsonString = '{"name":"رضا", "age":22}';
const parsedObject = JSON.parse(jsonString);
console.log(parsedObject.name); // خروجی: "رضا"

const myObject = { id: 1, product: "لپ‌تاپ" };
const convertedToJson = JSON.stringify(myObject);
console.log(convertedToJson); // خروجی: '{"id":1,"product":"لپ‌تاپ"}'

تسلط بر آرایه‌ها و اشیاء برای مدیریت داده‌های پیچیده در برنامه‌های جاوا اسکریپت ضروری است. این دو ساختار داده پایه و اساس بسیاری از الگوهای طراحی پیشرفته‌تر را تشکیل می‌دهند و توانایی شما را در کار با اطلاعات ساختاریافته به شدت افزایش می‌دهند.

مقدمه‌ای بر DOM و تعامل با صفحه وب

جاوا اسکریپت نه تنها برای منطق برنامه، بلکه برای تعامل با ساختار و محتوای یک صفحه وب نیز استفاده می‌شود. این تعامل از طریق مدل شیء سند (Document Object Model – DOM) صورت می‌گیرد. DOM یک رابط برنامه‌نویسی (API) برای اسناد HTML و XML است که ساختار صفحه را به صورت یک درخت از اشیاء نشان می‌دهد. هر گره در این درخت، بخشی از سند است (مانند عناصر HTML، متن، ویژگی‌ها).

DOM چیست؟

تصور کنید صفحه HTML شما یک ساختمان است. DOM نقش نقشه‌ای از این ساختمان را ایفا می‌کند که به جاوا اسکریپت اجازه می‌دهد به هر آجر، پنجره یا در دسترسی پیدا کند، آنها را تغییر دهد یا آیتم‌های جدیدی به آن اضافه کند. مرورگر هنگام بارگذاری یک صفحه وب، یک مدل DOM از آن ایجاد می‌کند که جاوا اسکریپت می‌تواند آن را دستکاری کند.

<!DOCTYPE html>
<html>
<head>
    <title>مثال DOM</title>
</head>
<body>
    <h1 id="mainTitle">سلام DOM!</h1>
    <p class="description">این یک پاراگراف است.</p>
    <ul id="myList">
        <li>عنصر 1</li>
        <li>عنصر 2</li>
    </ul>
    <button>تغییر عنوان</button>
</body>
</html>

در این مثال، document ریشه DOM است. html، head، body، h1، p، ul و li همه گره‌های DOM هستند.

انتخاب عناصر (Selecting Elements)

اولین گام برای دستکاری DOM، انتخاب عناصر مورد نظر است. متدهای مختلفی برای این کار وجود دارد:

• document.getElementById('id'): یک عنصر را با id منحصر به فردش انتخاب می‌کند.
• document.querySelector('selector') (ES6): اولین عنصری که با سلکتور CSS مشخص شده مطابقت دارد را برمی‌گرداند.
• document.querySelectorAll('selector') (ES6): یک NodeList از تمام عناصری که با سلکتور CSS مشخص شده مطابقت دارند را برمی‌گرداند.
• document.getElementsByClassName('class'): یک HTMLCollection از تمام عناصری با کلاس مشخص شده را برمی‌گرداند.
• document.getElementsByTagName('tag'): یک HTMLCollection از تمام عناصری با نام تگ مشخص شده را برمی‌گرداند.

const title = document.getElementById('mainTitle');
const firstParagraph = document.querySelector('.description');
const allListItems = document.querySelectorAll('#myList li');
const buttons = document.getElementsByTagName('button');
const descElements = document.getElementsByClassName('description');

console.log(title.textContent); // خروجی: "سلام DOM!"

تفاوت NodeList و HTMLCollection:
NodeList (برگردانده شده توسط querySelectorAll) شامل هر نوع گره (عنصر، متن، کامنت) است و می‌توان آن را با forEach پیمایش کرد.
HTMLCollection (برگردانده شده توسط getElementsBy...) فقط شامل گره‌های عنصر HTML است و برای پیمایش مستقیم نیاز به تبدیل به آرایه (مثلاً با Array.from()) دارد، اگرچه می‌توان با حلقه for سنتی پیمایش کرد.

تغییر محتوا و ویژگی‌ها

پس از انتخاب یک عنصر، می‌توانید محتوا و ویژگی‌های آن را تغییر دهید:

• element.textContent: محتوای متنی یک عنصر (بدون HTML) را تنظیم یا دریافت می‌کند.
• element.innerHTML: محتوای HTML داخلی یک عنصر را تنظیم یا دریافت می‌کند. (توجه: استفاده از آن با ورودی کاربر خطر امنیتی XSS دارد).
• element.setAttribute('attribute', 'value'): یک ویژگی (مانند href, src, class) را برای یک عنصر تنظیم می‌کند.
• element.getAttribute('attribute'): مقدار یک ویژگی را دریافت می‌کند.
• element.style.propertyName: سبک‌های CSS داخلی یک عنصر را تغییر می‌دهد (مثال: element.style.color = 'red';).

title.textContent = "عنوان جدید جاوا اسکریپت";
firstParagraph.innerHTML = "<strong>این پاراگراف</strong> توسط JS تغییر یافت.";
buttons[0].setAttribute('data-action', 'change-title');
buttons[0].style.backgroundColor = 'lightgreen';
buttons[0].style.padding = '10px';

دستکاری کلاس‌های CSS

برای اضافه یا حذف کلاس‌های CSS به یک عنصر، از خاصیت classList استفاده می‌شود:

• element.classList.add('className'): یک کلاس را اضافه می‌کند.
• element.classList.remove('className'): یک کلاس را حذف می‌کند.
• element.classList.toggle('className'): اگر کلاس وجود دارد آن را حذف و در غیر این صورت اضافه می‌کند.
• element.classList.contains('className'): بررسی می‌کند که آیا عنصر شامل کلاس مشخص است یا خیر.

firstParagraph.classList.add('highlight');
// فرض کنید کلاسی به نام .highlight در CSS وجود دارد که متن را برجسته می‌کند

if (firstParagraph.classList.contains('description')) {
    console.log("این عنصر دارای کلاس description است.");
}

ایجاد و حذف عناصر

می‌توانید عناصر HTML جدید را به صورت پویا ایجاد و به DOM اضافه کنید، یا عناصر موجود را حذف کنید:

• document.createElement('tagName'): یک عنصر HTML جدید ایجاد می‌کند.
• parentNode.appendChild(childElement): یک عنصر را به عنوان آخرین فرزند به والد اضافه می‌کند.
• parentNode.insertBefore(newElement, referenceElement): یک عنصر را قبل از یک عنصر مرجع اضافه می‌کند.
• parentNode.removeChild(childElement): یک عنصر فرزند را حذف می‌کند.

const newListItem = document.createElement('li');
newListItem.textContent = "عنصر جدید لیست";
document.getElementById('myList').appendChild(newListItem);

const outdatedItem = document.querySelector('#myList li:first-child');
// myList.removeChild(outdatedItem); // حذف اولین عنصر

مدیریت رویدادها (Event Handling)

رویدادها اتفاقاتی هستند که در مرورگر رخ می‌دهند، مانند کلیک کاربر روی یک دکمه، ارسال فرم، بارگذاری صفحه، یا حرکت ماوس. جاوا اسکریپت به شما اجازه می‌دهد به این رویدادها “گوش دهید” و کدهای خاصی را در پاسخ به آنها اجرا کنید.

روش توصیه شده برای مدیریت رویدادها استفاده از addEventListener() است:

element.addEventListener('eventName', function() {
    // کد اجرا می‌شود وقتی رویداد رخ می‌دهد
});

const changeTitleButton = document.querySelector('button');

changeTitleButton.addEventListener('click', function() {
    title.textContent = "عنوان با کلیک تغییر کرد!";
    changeTitleButton.style.backgroundColor = 'orange';
});

// مثال دیگر: رویداد ماوس
title.addEventListener('mouseover', function() {
    title.style.color = 'red';
});

title.addEventListener('mouseout', function() {
    title.style.color = 'black'; // برگرداندن به رنگ اصلی
});

انواع رویدادهای رایج:
click, mouseover, mouseout, keydown, keyup, submit, load, change, input.

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

چشم‌انداز آینده: گام‌های بعدی در مسیر جاوا اسکریپت

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

1. فریم‌ورک‌ها و کتابخانه‌های جاوا اسکریپت (Frameworks & Libraries)

در دنیای واقعی، توسعه‌دهندگان به ندرت برنامه‌های بزرگ و پیچیده وب را با جاوا اسکریپت “خالص” (Vanilla JavaScript) می‌سازند. برای افزایش بهره‌وری، سازماندهی کد، و حل مشکلات رایج، از فریم‌ورک‌ها و کتابخانه‌های قدرتمندی استفاده می‌شود:

• React.js: یک کتابخانه رابط کاربری که توسط فیس‌بوک توسعه یافته است. به شما امکان می‌دهد رابط‌های کاربری پیچیده را با استفاده از رویکرد مبتنی بر کامپوننت بسازید. بسیار محبوب و پرکاربرد در صنعت.
• Angular: یک فریم‌ورک کامل و جامع (Full-fledged framework) که توسط گوگل نگهداری می‌شود. برای ساخت اپلیکیشن‌های تک‌صفحه‌ای (Single-Page Applications – SPAs) بزرگ و پیچیده مناسب است. دارای یک اکوسیستم داخلی شامل مسیریابی، مدیریت حالت و…
• Vue.js: یک فریم‌ورک پیش‌رونده (Progressive framework) که برای سادگی و انعطاف‌پذیری طراحی شده است. برای پروژه‌های کوچک تا متوسط و همچنین ادغام تدریجی در پروژه‌های موجود، انتخاب عالی است.

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

2. Node.js و توسعه بک‌اند (Backend Development)

همانطور که پیش‌تر اشاره شد، Node.js به جاوا اسکریپت این امکان را داد که در خارج از مرورگر (سمت سرور) نیز اجرا شود. با Node.js می‌توانید:

• APIهای RESTful بسازید.
• سرورهای وب قدرتمند و مقیاس‌پذیر راه‌اندازی کنید.
• با پایگاه‌های داده (مانند MongoDB, PostgreSQL, MySQL) ارتباط برقرار کنید.
• ابزارهای خط فرمان (CLI tools) بنویسید.

فریم‌ورک‌هایی مانند Express.js، NestJS و Koa.js توسعه بک‌اند با Node.js را بسیار ساده‌تر می‌کنند.

3. TypeScript

TypeScript یک ابرمجموعه (superset) از جاوا اسکریپت است که قابلیت‌های تایپ استاتیک (static typing) را به آن اضافه می‌کند. این به معنای آن است که می‌توانید نوع داده متغیرها، پارامترهای توابع و… را در زمان توسعه مشخص کنید. TypeScript به شما کمک می‌کند تا:

• خطاها را زودتر (در زمان کامپایل، نه اجرا) شناسایی کنید.
• کدهای خواناتر و قابل نگهداری‌تر بنویسید.
• توسعه پروژه‌های بزرگ را آسان‌تر کنید، به خصوص در تیم‌های بزرگ.
• قابلیت تکمیل خودکار (autocompletion) و بازآرایی (refactoring) بهتری در محیط‌های توسعه (IDEs) داشته باشید.

TypeScript در حال حاضر به یک استاندارد دوفاکتو در پروژه‌های بزرگ و سازمانی جاوا اسکریپت تبدیل شده است.

4. قابلیت‌های پیشرفته ECMAScript (ES6+)

از ES6 (ES2015) به بعد، جاوا اسکریپت هر ساله با ویژگی‌های جدید و قدرتمندی به‌روز می‌شود. برخی از مهم‌ترین آن‌ها عبارتند از:

• Promises و Async/Await: برای مدیریت کد ناهمگام (asynchronous) به شیوه‌ای خواناتر و کارآمدتر. اینها برای کارهایی مانند فراخوانی APIها بسیار حیاتی هستند.
• Destructuring Assignment: روشی آسان برای استخراج مقادیر از آرایه‌ها و اشیاء.
• Spread/Rest Operator: برای گسترش (spreading) عناصر آرایه‌ها/اشیاء یا جمع‌آوری (rest) آرگومان‌ها در یک تابع.
• Modules (ES Modules): یک سیستم ماژول بومی برای جاوا اسکریپت که به شما امکان می‌دهد کد خود را به فایل‌های کوچک‌تر و قابل استفاده مجدد تقسیم کنید.
• Classes: شکر پوششی (syntactic sugar) برای برنامه‌نویسی شی‌گرا مبتنی بر Prototype در جاوا اسکریپت.

آشنایی با این ویژگی‌ها نه تنها کد شما را مدرن‌تر می‌کند، بلکه درک کدهای سایر توسعه‌دهندگان را نیز آسان‌تر می‌سازد.

5. ابزارهای ساخت (Build Tools) و مدیریت بسته (Package Managers)

برای پروژه‌های جاوا اسکریپت مدرن، ابزارهایی مانند Webpack (ماژول باندلر)، npm یا Yarn (مدیریت بسته) و Babel (ترانس‌پایلر کد ES6+ به ES5 برای مرورگرهای قدیمی) ضروری هستند. این ابزارها به شما کمک می‌کنند تا پروژه خود را به صورت کارآمد مدیریت، بهینه‌سازی و آماده تولید کنید.

6. تست‌نویسی (Testing)

نوشتن تست برای کدهای جاوا اسکریپت (Unit Tests, Integration Tests, End-to-End Tests) برای اطمینان از صحت عملکرد برنامه و جلوگیری از رگرسیون‌ها (regressions) بسیار مهم است. فریم‌ورک‌هایی مانند Jest و Mocha ابزارهای محبوبی برای این منظور هستند.

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