کدنویسی جاوا اسکریپ و جی کوئری : مثال‌ها و بهترین شیوه‌ها

[Fased Shod ! 207]

هنگامی که جی کوئری به درستی مورد استفاده قرار گیرد، می‌تواند برای داشتن سایت‌های تعاملی، جالب و مهیج مفید واقع شود. این نوشته تعدادی از بهترین تمرین‌ها و مثال‌ها را برای استفاده از فریم ورک محبوب جاوا اسکریپت برای ایجاد اثرهای نامحسوس (unobtrusive) و در دسترس اسکریپتی DOM (Document Object Mode) در بر می‌گیرد. این نوشته نشان خواهد داد چه ترکیب‌هایی بهترین شیوه‌ها نسبت به جاوا اسکریپت هستند و علاوه بر آن چرا جی کوئری یک فریم ورک انتخابی خوب برای پیاده‌سازی بهترین شیوه‌ها است.

۱) چرا جی کوئری ؟

جی کوئری ایده‌آل است چون می‌تواند انیمیشن‌ها و تعاملات (interactions) موثری را ایجاد نماید. جی کوئری برای فهمیدن، ساده و برای استفاده کردن، راحت است به این معنی که منحنی یادگیری آن کوچک در حالیکه امکانات آن (تقریباً) بی نهایت است.

جاوا اسکریپت و بهترین شیوه‌ها

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

پاسخ به این سوال هنوز داده نشده، با این حال ظهور فریم ورک‌های جاوا اسکریپت مثل جی کوئری ابزارهای لازم برای ایجاد وب سایت‌های زیبا بدون نگرانی در مورد مسائل دسترس‌پذیری را فراهم آورده است.

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

اسکریپت نویسی DOM نامحسوس

در حالیکه اصطلاح “اسکریپت نویسی DOM” واقعاً فقط به استفاده از اسکریپت‌ها (در این مورد، جاوا اسکریپت‌ها) برای دسترسی به مدل شی سند (Document Object Mode) اشاره دارد، به صورت گسترده‌ای به عنوان راهی برای توصیف آنچه که واقعاً باید ” اسکریپت نویسی DOM نامحسوس” (unobtrusive DOM scripting) نامیده شود، تبدیل شده است. در واقع هنر افزودن جاوا اسکریپت به صفحه، در این روش این است که اگر جاوا اسکریپت هم وجود نداشت صفحه هنوز هم به درستی نمایش داده شود (یا حداقل تنزل کمتری داشته باشد). در دنیای وب ، اسکریپت نویسی DOM با استفاده از جاوا اسکریپت انجام می‌شود.

نتیجه: دسترس پذیری و تجزیه محتوا

هدف هر تولید کننده، طراح یا برنامه نویس وب، ایجاد محتوایی است که توسط طیف وسیعی از مخاطبان قابل دسترس باشد. با این حال این کار باید با دقت در طراحی، قابلیت تعامل و ظاهر سایت به تعادل برسد. با استفاده از نظریه های مطرح شده در این نوشته، طراحان، برنامه نویسان و تولید کنندگان وب، دانش و درک استفاده از جی کوئری برای اسکریپت نویسی DOM برای دسترسی و تجزیه را خواهند داشت.

۲) اسکریپت نویسی DOM نامحسوس؟

در یک دنیای ایده آل، وب سایت‌ها قابلیت‌ها و افکت‌های پویایی دارند که به خوبی تجزیه شده‌اند. این به چه معناست؟ این به معنی پیدا کردن راهی شامل یک ویجت متحرک کشویی (sliding) برای نمایش اخبار در یک صفحه وب است که با جاوا اسکریپت وب۲ به طرز جالبی انیمیت (animate) شده است، در حالیکه هنوز می‌توان مطمئن بود که همان اخبار به درستی نشان داده می‌شوند اگر جاوا اسکریپت در مرورگر کاربر پشتیبانی نشده یا غیر فعال شده باشد.

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

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

قابلیت‌های جاوا اسکریپت را در یک لایه رفتاری، مجزا کنید به طوریکه جدا و مستقل از (X)HTML و CSS‌ باشد. (X)HTML لایه نشانه گذاری، CSS لایه نمایش و جاوا اسکریپت لایه رفتاری است. این به معنای ذخیره کردن تمام کدهای جاوا اسکریپت در یک فایل خارجی و ایجاد صفحاتی است که به قابل استفاده بودن جاوا اسکریپت اعتماد نمی‌کنند.

تکه کد زیر را نگاه کنید:

نشانه گذاری بد:

هرگز event های جاوا اسکریپت را به عنوان ویژگی‌های درون خطی (inline) بکار نگیرید. این عمل را باید به طور کامل از ذهن خود پاک کنید.

Click! 

نشانه گذاری خوب:

همه رفتارهای جاوا اسکریپت باید در فایل اسکریپت خارجی گنجانده شده و با تگ

Click!

و کد جاوا اسکریپت در داخل فایل myscript.js (یک اسم فرضی) می‌تواند چیزی شبیه این باشد:

$('a.doSomething').click(function(){
   // Do something here!
   alert('You did something, woo hoo!');
});

متد click() در جی کوئری به ما اجازه می‌دهد تا براحتی یک event کلیک را به نتیجه(ها) انتخابگرمان نسبت دهیم. بنابراین کد بالا همه تگ‌های از کلاس doSomething را انتخاب می‌کند و یک رویداد کلیک را که یک تابع را فراخوانی می‌کند به آنها نسبت می‌دهد.

قاعده شماره ۲: هرگز به جاوا اسکریپت وابسته نشو

برای اینکه بدرستی جاوا اسکریپت نامحسوس پیاده سازی شود، برنامه نویس هرگز نباید بر پشتیبانی جاوا اسکریپت برای ارائه محتوا یا اطلاعات تکیه کند. استفاده از جاوا اسکریپت برای افزایش اطلاعات، آن را زیباتر و تعاملی‌تر می‌کند اما هرگز فرض را بر این نگذارید که جاوا اسکریپت در مرورگر کاربر فعال است. این قاعده کلی می‌تواند در واقع برای هر تکنولوژی طرف سوم (third-party) به کار برده شود مثل Flash یا Java.

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

نشانه گذاری بد:

تکه کد زیر نشان می‌دهد که جاوا اسکریپت ممکن است برای نمایش پیغام “Good Morning” (یا “Good Afternoon”) در یک بسته به زمان روز، بکار برده شود. (بدیهی است که این یک مثال ابتدایی است).

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

نشانه گذاری خوب:

راه حل درست و قابل دسترس برای پیاده سازی این باید بسیار ساده‌تر و خواناتر باشد. مثل:

Good Morning!

به وسیله ویژگی “title” این پاراگراف می‌تواند با یک انتخابگر جی کوئری انتخاب شود. همانند تکه کد زیر:

var now = new Date();
if(now.getHours() >= 12)
{
   var goodDay = $('p[title="Good Day Message"]');
   goodDay.text('Good Afternoon!');
}

زیبایی این تکه کد این است که همه جاوا اسکریپت در یک اسکریپت خارجی (external) قرار گرفته و صفحه همانند یک (X)HTML استاندارد رندر می‌شود که بدین معناست که اگر جاوا اسکریپت اجرا نشود، صفحه هنور بطور ۱۰۰%، (X)HTML خالص است. تنها مشکل این است که در بعدازظهر صفحه هنوز پیام صبح بخیر را نشان می‌دهد. به هر حال این می‌تواند به عنوان یک تنزلِ درجه قابل پذیرش دیده شود.

قاعده شماره ۳: نشانه گذاری معنایی و قابل دسترس در ابتدا بیاید

بسیار مهم است که نشانه گذاری (X)HTML ساختاری معنایی داشته باشد. قاعده کلی اینجا این است که اگر نشانه گذاری (markup) صفحه ساختاری معنایی داشته باشد، باید برای طیف وسیعی از دستگاه ها (device) قابل دسترسی باشد.

نشانه گذاری معنایی برای اسکریپت نویسی DOM نامحسوس مهم است زیرا مسیر برنامه نویس را برای ایجاد اثر اسکریپت نویسی DOM شکل خواهد داد. اولین گام برای ایجاد هر صفحه‌ای که با جی کوئری قابلیت‌هایی را به آن اضافه می‌کنید این است که نشانه‌گذاری آن نوشته شود و مطمئن شوید که آن نشانه گذاری ساختاری معنایی دارد. با دستیابی به این امر، برنامه نویس می‌تواند جی کوئری را برای تعامل با نشانه گذاری صحیح معنایی بکار بگیرد (آنچه باقی می‌ماند یک سند (X)HTML تمیز و خوانا و جدا از لایه رفتاری است).

نشانه گذاری خیلی بد:

تکه کد زیر لیستی از آیتم‌ها و توضیحات را با روشی که بطور وحشتناکی غیر معنایی است (unsemantic)، نشان می‌دهد.

>
</pre>
<table>First OptionFirst option descriptionSecond OptionSecond option description</table>

نشانه گذاری بد:

تکه کد زیر لیستی از آیتم‌ها و توضیحات را با روشی که بیشتر معنایی است، نشان می‌دهد. با این حال جاوا اسکریپت inline باعث شده این کد نیز کاملاً معنایی نباشد.

>
</pre>
<dl>First OptionFirst option descriptionSecond OptionSecond option description</dl>

نشانه گذاری خوب:

این تکه کد نشان می‌دهد که چگونه لیست بالا باید نشانه گذاری شود. هر تعاملی با جاوا اسکریپت در متد load‌ جی کوئری قابل دستیابی خواهد بود و بطور موثری همه نشانه گذاری‌های رفتاری را از کدهای (X)HTML حذف می‌کند.

>
</pre>
<dl>First OptionFirst option descriptionSecond OptionSecond option description</dl>

id=”OptionList” این توانایی را به برنامه نویس خواهد داد تا با استفاده از سلکتورهای جی کوئری به لیست بالا دسترسی داشته باشیم.

۳) درک جی کوئری برای اسکریپت نویسی DOM نامحسوس

این بخش ۳ نکته با ارزش از جی کوئری را برای پیاده سازی بهترین شیوه‌ها و افکت‌های قابل دسترس ارائه می‌کند.

درک انتخابگرها: ستون فقرات jQuery

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

اگر شما با CSS آشنا باشد پس می‌توانید انتخابگرهای جی کوئری را درک کنید. آنها تقریباً همان انتخابگرهای CSS هستند و تقریباً به همان نحو مورد استفاده قرار می‌گیرند.

جی کوئری یک تابع کاربردی مخصوص برای انتخاب عناصر تدارک دیده است که $ نام دارد.

مثال‌های خیلی ساده‌ای از انتخابگرهای جی کوئری:

$(document) // Activate jQuery for object
$(‘#mydiv’) // Element with ID “mydiv”
$(‘p.first’) // P tags with class first.
$(‘p[title="Hello"]‘) // P tags with title “Hello”
$(‘p[title^="H"]‘) // P tags title starting with H
$(document)

اولین گزینه متدهای کتابخانه جی کوئری را به یک شی DOM (در این مورد، شی document) اعمال خواهد کرد.

$(‘#mydiv’)

گزینه دوم هر تگ

که صفت id آن mydiv باشد را انتخاب خواهد کرد.

$(‘p.first’)

گزینه سوم همه تگ‌های

را انتخاب خواهد کرد که صفت class آنها برابر first‌ باشد.

$(‘p[title=Hello]‘)

این گزینه همه تگ‌های

را انتخاب خواهد کرد که صفت title آنها برابر Hello باشد. تکنیک‌هایی مانند این قادر به استفاده از نشانه گذاری معنایی صحیح (X)HTML می‌باشند در حالیکه هنوز تسهیلات اسکریپت نویسی DOM برای ایجاد فعل و انفعالات پیچیده‌تر مورد نیاز است.

$(‘p[title^=H]‘)

این ما را قادر می‌سازد تا همه تگ‌های

‌ را در صفحه که صفت title آنها با حرف H شروع می‌شود، انتخاب کنیم.

تقریباً هر چیزی که شما بتوانید با CSS3 انجام دهید در جی کوئری کار خواهد کرد به علاوه بسیاری انتخابگرهای پیچیده دیگر.

لیست کاملی از انتخابگرهای جی کوئری را می‌توانید در آدرس زیر مشاهده کنید:

http://docs.jquery.com/Selectors

همچنین مشخصات انتخابگرهای CSS3 را می‌توانید از سایت W3C از لینک زیر مشاهده بفرمایید:

http://www.w3.org/TR/css3-selectors/

آماده شدن $(document).ready()

به طور سنتی رویداد (event)های جاوا اسکریپت به یک سند با استفاده از ویژگی onload در تگ body صفحه متصل می‌شدند. آن را از ذهن خود پاک کنید.جی کوئری برای ما یک تابع ویژه بر روی شی سند تدارک دیده که ready خوانده می‌شود و به ما اجازه اجرای کد را تنها بعد از آنکه بارگذاری (loading) DOM به طور کامل به پایان رسیده باشد، می‌دهد. این کلید اسکریپت نویسی DOM نامحسوس است. این به ما اجازه می‌دهد تا به طور کامل کد جاوا اسکریپت را از نشانه گذاری (markup) جدا کنیم. با استفاده از $(document).ready() ما می‌توانیم یک سری از رویدادها را صف بندی (queue) کنیم و آنها پس از آنکه DOM مقداردهی اولیه شد اجرا شوند.

این بدان معنیست که ما می‌توانیم افکت‌های کاملی را برای صفحه‌هایمان ایجاد کنیم بدون تغییر نشانه گذاری برای عناصر مورد بحث.برای نشان دادن زیبایی این قابلیت، اجازه دهید یک کادر هشدار (alert box) که پیغام Hello World!‌ را نمایش می‌دهد با جاوا اسکریپت ایجاد نماییم.نشانه گذاری زیر نشان می‌دهد که بدون جی کوئری ممکن است چگونه ما یک پیغام Hello World! را به نمایش در آوریم.

نشانه گذاری بد:

نشانه گذاری خوب:

استفاده از این قابلیت در جی کوئری ساده است. تکه کد زیر نشان می‌دهد که ما چگونه ممکن است پس از آن که سند ما بارگذاری شده باشد کادرهای هشدار قدیمی Hello World را فراخوانی کنیم. زیبایی واقعی این نشانه گذاری این است که در یک فایل خارجی جاوا اسکریپت قرار بگیرد. هیچ تاثیری بر روی صفحه (X)HTML وجود ندارد.

$(document).ready(function()
{
   alert('Hello World');
});

تابع $(document).ready() یک تابع را به عنوان آرگومان می‌گیرد. (در این مورد یک تابع بی نام (anonymous) ایجاد شده – یک تکنیک است که در سراسر مستندات jQuery استفاده می شود.) تابع پاس داده شده به $(document).ready() بعد از آن که بارگذاری DOM به پایان رسید فراخوانی می‌شود و کد داخل آن اجرا می‌گردد. در مورد مثال ما تابع alert فراخوانی می‌شود.

ایجاد قانون CSS پویا

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

راه حل این کار در قالب پلاگینی برای جی کوئری که cssRule نامیده می‌شود، می‌آید که به ما اجازه می‌دهد تا ما با استفاد از جاوا اسکریپت به راحتی قوانین CSS را به شیوه نامه (style sheet) سند اضافه کنیم. این بدان معناست که ما می‌توانیم عناصر صفحه را با استفاده از CSS پنهان کنیم هر چند که CSS تنها در صورتی اجرا می‌شود که جاوا اسکریپت در حال اجرا باشد.

نشانه گذاری بد:

HTML:

This is a heading


This is some information about the heading.

CSS:

p.hide-me-first
{
   display: none;
}

با فرض اینکه یک پاراگراف با صفت class برابر با hide-me-first برای اولین بار توسط CSS پنهان و سپس توسط جاوا اسکریپت بعد از یک سری تعاملات با کاربر در آینده نمایش داده می‌شود، اگر جاوا اسکریپت هیچ وقت اجرا نشود محتوای این پاراگراف هیچ وقت قابل دیدن نخواهد بود.

نشانه گذاری خوب:

HTML:

This is a heading


This is some information about the heading.

jQuery Javascript:
$(document).ready(function{
   jQuery.cssRule("p.hide-me-first", "display", "none");
});

استفاده از $(document).ready() در اینجا برای پنهان کردن پاراگراف بدین معنیست که اگر جاوا اسکریپت غیر فعال باشد پاراگراف هرگز پنهان نمی‌شود بنابراین محتوای پاراگراف هنوز در دسترس است. این دلیل اصلی برای ایجاد قوانین پویای CSS مبتنی بر جاوا اسکریپت است.

۴) نتیجه

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

این نوشته مطالب زیر را پوشش داده است:

۱-چرا اسکریپت نویسی DOM نامحسوس برای دسترس پذیری اینقدر مهم است

۲-چرا جی کوئری یک انتخاب طبیعی برای پیاده سازی اثرات اسکریپت نویسی DOM نامحسوس است

۳-انتخابگرهای جی کوئری چگونه کار می‌کنند

۴-چگونه قوانین CSS نامحسوس را در جی کوئری پیاده سازی کنیم

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

وب تارگت