هرز نوشته های یک توسعه دهنده

برخی از دوستان در ایمیلهاشون به کرات این سوال رو مطرح کردند که آیا می شه از jQuery در ویژوال استودیو دات نت و برنامه نویسی تحت Net Framework. با ASP.Net استفاده کرد؟

همانطور که در پست تحت عنوان “JQuery چیست” توضیح دادم ، این کتابخانه و کتابخانه های مشابه مانند Prototype و YUI و GWT  از جمله پراستفاده ترین و محبوبترین کتابخانه های جاوااسکریپتی برای توسعه سیستمهای وبی هستند و مسلمه که استفاده از کتابخانه های جاوا اسکریپیتی براحتی در ویژوال استودیو ممکنه.

خاطر نشان می کنم که پس از انتشار Ajax Framework توسط میکروسافت ، به نظر بسیاری ، این بسته بسیاری از نیازهای توسعه دهندگان رو برطرف می کنه.اما در این باره ، سه موضوع جای بحث داره.

اول اینکه این بسته یک بسته نرم افزار باز هست اما منبع باز نیست.یعنی شما بدون محدودیت می تونید از اون در نرم افزارهاتون استفاده کنید اما سورسش در دستس نیست.لذا توسعه اون محدود به خود میکروسافت هست و طبیعیه که سفارشی سازی و امکانی مانند ساخت انواع متنوع Plugins برای اون فعلا وجود نداره یا بسادگی jQuery نیست.

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

و سومین موضوع اینکه ، ساخت خود مجموعه Ajax Framework بر اساس جاوا اسکریپت و بصورت یک پروژه Class در دات نت انجام شده و ما در همین مجموعه مقالات روش ساخت یک کنترل جدید برای ویژوال استودیو ، مبتنی بر جاوا اسکریپت رو توضیح خواهیم داد و البته جالبه بدونید که اغلب پکیج های تجاری مانند Telerik و WebUI هم مبتنی بر جاوااسکریپت و پروژه کلاس ، و بروشی مشابه آنچه توضیح خواهیم داد ، تولید شدند و شما با دونستن اون ، نیازی به خرید این بسته های گران قیمت و یا زحمات استفاده از نگارشهای کرک شده اونها در ایران نخواهید داشت.

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

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

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

1- پکیج پایه که می تونید اونرو از سایت http://www.jquery.com دریافت کنید.این پکیج به دو صورت فشرده و ساده در دسترس هستند.همانطور که در یکی از پستهای قبلی درباره افزایش کارایی وب توضیح دادم ، سازندگان jQuery این کتابخونه رو بصورت فشرده هم برای دانلود در دسترس گذاشتن و با اینکار زحمت فشرده سازی اونرو از شما برداشتن.اما اگر مایلید تا اونرو شخصا توسعه بدین و کد اونرو مطالعه کنید ، می تونید که دانلود Uncompressed اونرو انجام بدین.برای تمامی کارهاییکه می خواهیم در آینده با jQuery انجام بدیم به یکی از ایندو نیاز داریم اما همانطور که گفته شد ، در صورتیکه کاربرد وب رو با jQuery توسعه دادید ، برای استفاده کاربر نهایی و یا upload سایت به میزبان اون ، حتما نسخه فشرده jQuery رو قرار بدید تا با اینکار کارایی وب هم افزایش پیدا بکنه.

2- jQuery User Interface یا jUI: این پکیج که مبتنی بر پکیج اول تولید شده ، شامل کنترلهایی برای ساخت رابط کاربری زیبا  ، جذاب و کارآمد و دارای قابلیت Ajax هست.شما میتونید مجموعه jUI رو از سایت http://code.google.com/p/jquery-ui دریافت کنید.اگر بخاطر موضوع تحریم ایران ، در دانلود اون مشکل دارید میتونید از آنتی فیلترهایی مانند Freegate استفاده کنید و یا اگر باز هم مشکلی بود ، کامنت بگذارید تا اونرو در جایی براتون بگذارم.

3- الحاقیه ها یا Plugins: همانند Firefox که یک نرم افزار آزاد با منبع باز هست ، مجموعه jQuery هم بصورت نرم افزار آزاد با منبع باز منتشر میشه و لذا کاربران زیادی اقدام به توسعه اون در قالب تولید Plugins های متعددی کردند.این الحاقیه ها رو میتونید بسته به نیازتون از سایت http://plugins.jquery.com دریافت کنید.

توصیه می کنم در پوشه پروژه وب خودتون ، و البته دنبال کردن این مباحث یک پروژه بنام Website1 در ویژوال استودیو ایجاد کرده و در همین پوشه ، یک پوشه بنام scripts ایجاد کنید و در اون هم یک پوشه دیگه بنام jq و در داخل این آخری ، سه پوشه دیگه بنامهای base برای پکیچ پایه ، یک پوشه pi جهت Plugins و نهایتا یک پوشه ui15 جهت قراردادن آخرین توزیع jUI یعنی نگارش 1.5 اون ایجاد کنید.بنابر این باید ساختاری مشابه زیر در پوشه Website1 داشته باشید:

Website1——->> jq

                         ————> base

                         ————> ui15

                         ————> pi

هر کدوم از پرونده های دانلود شده در بندهای 1 و 2 و 3 رو در پوشه خودش کپی کنید.

اولین کد خودمون رو برای دیدن نحوه کار با jQuery با نوشتن کد ساده ای در default.aspx مربوط به پروژه Website1 شروع می کنیم ، ابتدا کل کد پروژه رو یکجا می گذارم ، بعد مرحله به مرحله اونرو توضیح میدم:

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

همچنین یک تگ a هم در بدنه کد قرار دادیم که بتونیم یکی از قابلیتهای jQuery رو در مورد اون به آزمون بگذاریم.

در واقع ، کد اصلی jQuery ما ، خط 11 این صفحه هست که با تعریف یک جاوااسکریپت شروع می شه.علامت $ یک نام مستعار برای کلاس پایه شی ء jQuery هست که در این کتابخونه قبلا تعریف شده و شما به کرات از اون استفاده می کنید.بنابر این ، ترکیب ()$ کارش ، ساخت یک نمونه از کلاس jQuery هست.بزبان دیگه این ترکیب ، یک Constructor برای کلاس پایه  jQuery می باشد.

کار اصلی کتابخونه jQuery مبتنی بر شناسایی اشیای پرونده HTML بر اساس DOM هست.در واقع jQuery عملیات خودش رو با ارزیابی تگهای مربوط به این مدل بانجام میرسونه.بهمین دلیل ، لازم هست که ابتدا بررسی بشه که ساختار DOM در پرونده HTML وجود داره و اصطلاحا حضور داره یا نه؟

بنابر این ، کار با هر عملی در jQuery با فراخوانی یکی از توابع این کتابخونه بنام ready شروع میشه که یک متد برای شی ء Document متعلق به کلاس پایه jQuery هست که شما با ()$ اونرو ساختید.

لذا عبارت :

$(document).ready()

ابتدا یک کلاس پایه jQuery ایجاد میکنه و سپس متد ready از شی ء Document اونرو برای بررسی وجود مدل DOM در فایل HTML شما اجرا میکنه و اگر موفقیت آمیز بود ، ادامه کد اجرا خواهد شد.

همانطور که می بینید ، ادامه کد ، تعریف یک تابع جاوا اسکریپت برای عملی است که بعنوان نمونه ، می خواهیم انجام بدیم.این تابع که در بدنه متد ready و بنوعی بعنوان پارامتر متد  ready نوشته میشه (در این مثال ، در ادامه ،  تابعی خواهد بود که باعث میشه ، با کلیک بر روی هر لینک در این صفحه یک پنجره نمایش داده بشه که در اون متن Hello World رو خواهید دید):

function()

{

  $(“a”).click()

}

معنای عبارت فوق این هست که شما میخاید در مرحله بعدی بگید در صورت کلیک بر روی هر پیوند در این صفحه چه کاری باید انجام بشه.

عبارت (“a”)$ به معنای انتخاب هست.یعنی تمامی تگهای a در صفحه باید انتخاب بشن تا عملیاتی که بعدا قراره براشون برنامه نویسی کنید ، برای اونها اعمال بشه.در این مثال ما می خواهیم رخداد click رو برای اونها کد نویسی کنیم.توجه داشته باشید (“a”)$ تمامی تگهای a رو انتخاب می کنه ، یعنی حتی اگر بر خلاف مثال ما ، بیش از یک تگ a یا لینک در صفحه وجود داشته باشه ، تابعی که نوشته خواهد شد ، بر روی همه اونها عمل خواهد کرد.

همانند متد ready ، شما عملی که در پاسخ به کلیک click بر روی تگهای a رو می خواید انجام بدید رو باید بصورت پارمتری از متد click پیاده سازی کنید.بنابر این ، تابع خودمونرو به شکل زیر توسعه می دیم:

function()

{

  $(“a”).click

  (

    ………… here we will write our java-script code………

  )

}

اکنون ، همانطور که گفته شد ، میخایم کاری کنیم که با کلیک بر روی هر پیوندی در این صفحه ، یک پنجره نمایش داده بشه که در اون متن Hello World دیده بشه.بنابر این ، کد فوق رو بصورت زیر توسعه میدیم:

function()

{

  $(“a”).click

  (

     function()

       {  alert(“Hello World!”);  }

  )

}

خب ، حالا اگر کل کد اولیه رو که مرحله به مرحله ، توسعه اونرو توضیح دادیم ، اجرا کنید ، صفحه زیر رو خواهد دید :

و اگر بر روی لینک بالا کلیک کنید صفحه زیر رو خواهد دید:

در واقع تمامی کارهایی که تا بحال با استفاده از jQuery کردیم ، همانند اون هست که تنها یک خط زیر رو در فایلتون نوشته باشید:

<a href="" onclick="alert(’Hello world’)">Link to Display Hello</a>

شاید در این مرحله این ذهنیت خطور بکنه که وقتی تمامی تلاش فوق برای کار نمایش یک پنجره Hello World فقط با یک خط قابل انجام هست ، پس چرا از jQuery استفاده کنیم؟

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