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

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

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

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

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

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

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

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

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

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

توابع#

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

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

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

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

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

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) و عملگر گسترش کار را کوتاه می‌کنند:

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

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

DOM و رویدادها#

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

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 دیدیم. برای متن ساده از textContent استفاده کنید.

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

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

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

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

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 آمده است.

ماژول‌ها#

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

// 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#

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

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

برای شروع نیازی به 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 ثبت کنید.