# جاوااسکریپت ضروری برای برنامه‌نویس وردپرس و لاراول

- آدرس: https://di9.ir/blog/%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%B6%D8%B1%D9%88%D8%B1%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A8%DA%A9-%D8%A7%D9%86%D8%AF-%DA%A9%D8%A7%D8%B1
- نویسنده: danidiba
- انتشار: 2026-08-30T08:46:00+03:30
- به‌روزرسانی: 2026-08-30T08:46:00+03:30
- دسته: جاوااسکریپت
- برچسب‌ها: ES6، جاوااسکریپت، فرانت‌اند، لاراول، وردپرس

> برنامه‌نویس بک‌اند لازم نیست همه‌ی جاوااسکریپت را بداند. در این راهنما فقط بخش‌هایی را مرور می‌کنیم که در کار روزمره با وردپرس و لاراول لازم است: متغیرها، توابع، آرایه‌ها، DOM، رویدادها و async.

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

این راهنما فقط همان بخش را پوشش می‌دهد و فرض می‌کند از PHP آشنایی با متغیر، تابع و شرط دارید.

## جاوااسکریپت کجا اجرا می‌شود

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

## متغیرها و نوع‌ها

از `var` فاصله بگیرید. در کد امروزی دو کلمه کافی است:

```js
const siteName = 'دیباگ';   // مقدارش عوض نمی‌شود
let count = 0;             // مقدارش عوض می‌شود
count += 1;

const user = { name: 'سارا', age: 30 };
const tags = ['php', 'js'];
```

قاعده: همه‌چیز را `const` تعریف کنید و فقط وقتی لازم شد `let` بگذارید. توجه کنید `const` یعنی خود متغیر دوباره مقدار نمی‌گیرد، نه اینکه محتوای شیء یا آرایه ثابت شود. مقایسه را با `===` انجام دهید نه `==`. مقدارهای `0`، رشته‌ی خالی، `null`، `undefined` و `NaN` در شرط «نادرست» حساب می‌شوند، که بعضی وقت‌ها غافلگیر می‌کند.

## توابع

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

const double = (n) => n * 2;          // تابع فلشی
const greet = (name = 'مهمان') => `سلام ${name}`; // مقدار پیش‌فرض و رشته‌ی الگو
```

رشته‌ی الگو (با پشت‌نقل‌قول) هم متغیر را داخل متن می‌گذارد و هم چندخطی می‌شود.

## آرایه‌ها و شیءها

سه متد آرایه جای بیشتر حلقه‌های دستی را می‌گیرند:

```js
const prices = [1000, 2500, 4000];

const withTax = prices.map((p) => Math.round(p * 1.1));
const expensive = prices.filter((p) => p > 2000);
const total = prices.reduce((sum, p) => sum + p, 0);
```

برای شیءها، تجزیه (destructuring) و عملگر گسترش کار را کوتاه می‌کنند:

```js
const { name, age } = user;
const updated = { ...user, age: 31 }; // کپی با تغییر
const all = [...tags, 'laravel'];
```

مثل PHP، آرایه‌ی انجمنی همان شیء ساده است؛ فقط کلیدها بدون `=>` و با دونقطه نوشته می‌شوند.

## DOM و رویدادها

DOM درخت عناصر صفحه است. انتخاب و تغییر آن:

```js
const btn = document.querySelector('#save');
const list = document.querySelector('.items');

btn.addEventListener('click', () => {
  const li = document.createElement('li');
  li.textContent = 'مورد تازه'; // به‌جای innerHTML، امن‌تر
  list.append(li);
});
```

به `textContent` دقت کنید. اگر متنی که از کاربر یا سرور می‌آید را با `innerHTML` در صفحه بگذارید، همان حفره‌ی XSS می‌شود که در [امنیت کد PHP](https://di9.ir/blog/%D8%A7%D9%85%D9%86%DB%8C%D8%AA-%DA%A9%D8%AF-php) دیدیم. برای متن ساده از `textContent` استفاده کنید.

برای فرم‌ها معمولاً رویداد `submit` را می‌گیرید و با `event.preventDefault()` ارسال معمول را متوقف می‌کنید تا خودتان درخواست بفرستید. اسکریپت را هم با `defer` بارگذاری کنید تا DOM آماده باشد:

```js
document.addEventListener('DOMContentLoaded', () => {
  // اینجا مطمئن هستیم عنصرها وجود دارند
});
```

## کد غیرهم‌زمان: Promise و async/await

درخواست شبکه فوری نیست. جاوااسکریپت منتظر نمی‌ماند؛ به‌جایش یک Promise می‌گیرد. `async/await` خواندن آن را شبیه کد معمولی می‌کند:

```js
async function loadUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error(`خطای ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error(err);
    return null;
  }
}
```

نکته‌ی مهم: `fetch` فقط وقتی خطا می‌دهد که شبکه قطع باشد؛ پاسخ ۴۰۴ یا ۵۰۰ خطا نیست و باید `res.ok` را خودتان بسنجید. جزئیات بیشتر در [درخواست AJAX با fetch](https://di9.ir/blog/%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA-ajax-%D8%A8%D8%A7-fetch) آمده است.

## ماژول‌ها

کد را به فایل‌های کوچک تقسیم کنید:

```js
// utils.js
export const formatPrice = (n) => n.toLocaleString('fa-IR');

// main.js
import { formatPrice } from './utils.js';
```

در صفحه، اسکریپت را با `type="module"` بارگذاری کنید. در وردپرس هم اسکریپت را همیشه با `wp_enqueue_script` ثبت کنید و داده‌ی PHP را با `wp_localize_script` یا `wp_add_inline_script` به آن بدهید، نه با چسباندن دستی داخل قالب.

## جدول معادل‌ها برای برنامه‌نویس PHP

| در PHP | در جاوااسکریپت |
| --- | --- |
| `array_map` | `arr.map()` |
| `array_filter` | `arr.filter()` |
| `in_array` | `arr.includes()` |
| `json_encode` | `JSON.stringify()` |
| `json_decode` | `JSON.parse()` |
| `strlen` | `str.length` |
| `$a ?? 'x'` | `a ?? 'x'` |

عملگر `??` در هر دو زبان تقریباً یک کار می‌کند.

## چه چیزی را فعلاً کنار بگذارید

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

## اشتباه‌های رایج برنامه‌نویس‌های PHP در جاوااسکریپت

چند عادت از PHP به جاوااسکریپت نمی‌آید و سردرگمی می‌سازد. اول اینکه مقایسه‌ی آرایه‌ها و شیءها با `===` فقط مرجع را مقایسه می‌کند: دو آرایه‌ی هم‌محتوا برابر شناخته نمی‌شوند مگر یک شیء باشند. دوم اینکه `this` در توابع معمولی و فلشی رفتار متفاوت دارد؛ تابع فلشی `this` پیرامون خودش را نگه می‌دارد و برای callbackها امن‌تر است. سوم اینکه جمع رشته و عدد، رشته می‌سازد: `'5' + 3` برابر `'53'` است، ولی `'5' - 3` برابر ۲.

دیگر اینکه خطاهای بی‌صدا در جاوااسکریپت فراوان‌اند. اگر چیزی کار نکرد، اول کنسول مرورگر را باز کنید (معمولاً با کلید F12) و پیام قرمز را بخوانید. بیشتر مشکل‌ها همان‌جا نوشته شده‌اند، مثلاً «Cannot read properties of null» که یعنی `querySelector` عنصری پیدا نکرده است.

## چطور تمرین کنیم

بهترین راه یادگیری ساختن یک کار کوچک و واقعی است. مثلاً یک فرم تماس که بدون بارگذاری مجدد پیام بفرستد و نتیجه را نشان دهد. این تمرین تقریباً همه‌ی موضوع‌های این مقاله را درگیر می‌کند: انتخاب عنصر، رویداد، `fetch`، `async/await` و نمایش امن نتیجه. هر وقت گیر کردید، فقط همان مفهوم را جست‌وجو کنید و ادامه بدهید. مستندات MDN مرجع معتبر و همیشه به‌روزی برای هر تابع و ویژگی مرورگر است.

## خلاصه

- جاوااسکریپت در مرورگر اجرا می‌شود؛ اعتبارسنجی و دسترسی را فقط به آن نسپارید.
- به‌جای `var` از `const` و `let` استفاده کنید و با `===` مقایسه کنید.
- `map`، `filter` و `reduce` جای بیشتر حلقه‌ها را می‌گیرند.
- برای متن ساده از `textContent` استفاده کنید نه `innerHTML`.
- `async/await` با `fetch` را یاد بگیرید و `res.ok` را بسنجید.
- در وردپرس اسکریپت را با `wp_enqueue_script` ثبت کنید.

## پرسش‌های متداول

### برنامه‌نویس PHP برای شروع جاوااسکریپت از کجا شروع کند؟

از مفاهیم پایه‌ی زبان مثل const و let، توابع و آرایه شروع کنید و سپس سراغ DOM و رویدادها بروید. بعد از آن fetch و async/await را یاد بگیرید، چون ارتباط با سرور بیشترین کاربرد را دارد.

### آیا برای کار با وردپرس باید حتماً jQuery بلد باشم؟

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

### تفاوت == و === در جاوااسکریپت چیست؟

عملگر `==` پیش از مقایسه نوع‌ها را تبدیل می‌کند و نتیجه‌های عجیب می‌دهد، ولی `===` نوع و مقدار را با هم می‌سنجد. تقریباً همیشه `===` را به کار ببرید.

### چرا کد جاوااسکریپتم قبل از لود شدن صفحه کار نمی‌کند؟

چون عنصری که می‌خواهید هنوز در DOM نیست. اسکریپت را با ویژگی `defer` یا در انتهای صفحه بارگذاری کنید، یا کدتان را داخل رویداد `DOMContentLoaded` بگذارید.