ویرایشگر (Editor)

این صفحه درباره ویرایشگر آنلاین jQuery است؛ یک محیط ساده که تو می توانی کدهای jQuery را بنویسی، اجرا کنی و نتیجه را همان لحظه در مرورگر ببینی؛ شبیه وقتی در یک بازی، دکمه شروع را می زنی و سریع نتیجه حرکتت را می بینی.

آشنایی با ویرایشگر آنلاین jQuery

ویرایشگر آنلاین jQuery مثل یک دفتر تمرین دیجیتالی است. بالا کد jQuery را می نویسی، پایین نتیجه را می بینی. لازم نیست چیزی نصب کنی؛ فقط مرورگر کافی است.

در مثال این صفحه، چند پاراگراف با کلاس trex داریم. وقتی روی هر پاراگراف کلیک می کنی، با کمک jQuery همان عنصر مخفی می شود؛ دقیقا مثل غول هایی که با یک کلیک از صحنه بازی حذف می شوند.

کد نمونه در ویرایشگر آنلاین jQuery

در کد زیر، ابتدا صبر می کنیم صفحه آماده شود، بعد برای پاراگراف هایی با کلاس trex رویداد کلیک می گذاریم. رویداد (Event) یعنی اتفاقی مثل کلیک کاربر.

$(document).ready(function() {
  $("p.trex").click(function() {
    $(this).hide();
  });
});

مشاهده در ادیتور

وقتی کاربر روی یک پاراگراف کلیک می کند، $(this) به همان پاراگراف اشاره می کند و متد hide() آن را مخفی می کند. این رفتار در لحظه در ویرایشگر آنلاین jQuery نمایش داده می شود.

چطور با ویرایشگر تمرین کنیم؟

برای تمرین مؤثر، بهتر است با چند گام ساده پیش بروی. مثل حل تمرین های مدرسه اما اینجا همه چیز زنده و فوری است.

1. روی دکمه «مشاهده در ادیتور» کلیک کن تا مثال باز شود.
2. متن داخل پاراگراف ها را عوض کن و دوباره اجرا کن.
3. به جای .trex یک کلاس دیگر امتحان کن و نتیجه را ببین.

نکته: اگر می خواهی مثال های بیشتری ببینی، صفحه مثال ها (Examples) در jQuery را هم باز کن و از همان جا با ویرایشگر آنلاین jQuery تمرین را ادامه بده.

انتشار و تست مداوم کدها

در متن منبع، سرویس W3Schools Spaces معرفی شده است. با این سرویس می توانی پروژه های ساده را بسازی، تست کنی و روی وب منتشر کنی. این کار کمک می کند کدهای jQuery را فقط در حد تمرین نگه نداری و واقعا در یک سایت کوچک استفاده کنی.

با ترکیب صفحه مثال ها (Examples) و صفحه ویرایشگر آنلاین jQuery می توانی سریع از یک تکه کد نمونه به یک پروژه کوچک شخصی برسی.

جمع بندی سریع

• ویرایشگر آنلاین jQuery محیطی برای نوشتن و اجرای فوری کد است.
• مثال این صفحه روی پاراگراف های با کلاس trex کار می کند.
• با کلیک روی پاراگراف، همان عنصر با hide() مخفی می شود.
• دکمه «مشاهده در ادیتور» کد را در ادیتور زنده W3Schools باز می کند.
• برای تمرین بیشتر، از صفحه مثال ها (Examples) کمک بگیر.