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

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

1) چرا جي كوئري ؟

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

جاوا اسكريپت و بهترين شيوه‌ها

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

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

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

اسكريپت نويسي DOM نامحسوس

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

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

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

2) اسكريپت نويسي DOM نامحسوس؟

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

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

قاعده شماره 1: كاركرد جداگانه جاوا اسكريپت

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

تكه كد زير را نگاه كنيد:

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

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

<a href="#" onclick="doSomething()">Click! </a>

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

همه رفتارهاي جاوا اسكريپت بايد در فايل اسكريپت خارجي گنجانده شده و با تگ <script> در قسمت head‌ صفحه به سند لينك شوند. بنابراين تگ بالا به شكل زير در مي‌آيد:

<a href="backuplink.html" class="doSomething">Click!</a>

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

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

متد click() در جي كوئري به ما اجازه مي‌دهد تا براحتي يك event كليك را به نتيجه(ها) انتخابگرمان نسبت دهيم. بنابراين كد بالا همه تگ‌هاي <a> از كلاس doSomething را انتخاب مي‌كند و يك رويداد كليك را كه يك تابع را فراخواني مي‌كند به آنها نسبت مي‌دهد.

قاعده شماره 2: هرگز به جاوا اسكريپت وابسته نشو

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

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

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

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

<script language="javascript">
    var now = new Date();
    if (now.getHours() < 12) document.write('Good Morning!');
    else document.write('Good Afternoon!');
</script>

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

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

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

<p title="Good Day Message">Good Morning!</p>

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

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

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

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

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

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

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

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

<table>
    <tr>
        <td onclick="doSomething();">First Option</td>
        <td>First option description</td>
    </tr>
    <tr>
        <td onclick="doSomething();">Second Option</td>
        <td>Second option description</td>
    </tr>
</table>

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

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

<dl>
    <dt onclick="doSomething();">First Option</dt>
    <dd>First option description</dd>
    <dt onclick="doSomething();">Second Option</dt>
    <dd>Second option description</dd>
</dl>

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

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

<dl id="OptionList">
    <dt>First Option</dt>
    <dd>First option description</dd>
    <dt>Second Option</dt>
    <dd>Second option description</dd>
</dl>

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

3) درك جي كوئري براي اسكريپت نويسي DOM نامحسوس

اين بخش 3 نكته با ارزش از جي كوئري را براي پياده سازي بهترين شيوه‌ها و افكت‌هاي قابل دسترس ارائه مي‌كند.

درك انتخابگرها: ستون فقرات 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')

گزينه سوم همه تگ‌هاي <p> را انتخاب خواهد كرد كه صفت class آنها برابر first‌ باشد.

$('p[title="Hello"]')

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

$('p[title^="H"]')

اين ما را قادر مي‌سازد تا همه تگ‌هاي <p>‌ را در صفحه كه صفت 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! را به نمايش در آوريم.

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

<script language="javascript">
    alert('Hello World');
</script>

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

استفاده از اين قابليت در جي كوئری ساده است. تكه كد زير نشان مي‌دهد كه ما چگونه ممكن است پس از آن كه سند ما بارگذاري شده باشد كادرهاي هشدار قديمي 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:

<h2>This is a heading</h2>
<p class="hide-me-first"> This is some information about the heading. </p>

CSS:

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

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

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

HTML:

<h2>This is a heading</h2>
<p class="hide-me-first"> This is some information about the heading. </p>

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

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

4) نتيجه

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

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

• 1-چرا اسكريپت نويسي DOM نامحسوس براي دسترس پذيري اينقدر مهم است
• 2-چرا جي كوئری يك انتخاب طبيعي براي پياده سازي اثرات اسكريپت نويسي DOM نامحسوس است
• 3-انتخابگرهاي جي كوئری چگونه كار مي‌كنند
• 4-چگونه قوانين CSS نامحسوس را در جي كوئری پياده سازي كنيم

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

اميدوارم ترجمه اين مطلب مورد توجه عزيزان قرار بگيرد و با نظرات خوب و سازنده و همچنين بحث‌هايي كه در مورد اين نوشته مطرح مي‌فرماييد به رفع ابهام و پاسخ به سوالات عزيزاني كه در مورد اين مطلب نظرات خود را اينجا مطرح مي‌كنند كمك نماييد.

این مطلب توسط جناب آقای سوران خضری برای وب تارگت آماده شده است