یاد گرفتیم که میتوان کارهای متعدد و گوناگونی با CSS3 انجام داد. از نقطه نظر طراحی با افکتهای زیبایی مانند سایه زیرین و گوشههای منحنی آشنا شدیم و با مجموعهای از فونتهای جذاب و البته مناسب کار کردیم. علاوه بر اینها دانستیم که استفاده بیش از حد از این امکانات میتواند نتیجه نهایی کار را زشت و شلوغ نماید! در فصل 11 کار با بخش زیبای JavaScript و به طور دقیقتر jQuery را یاد میگیریم.
آماده یک بخش مهیج و جذاب در فصل 11 باشید.
افزودن فعل و انفعالات داخلی با استفاده از jQuery
احتمالا با مشاهده پروسه تغییرات سایت با گذشت فصلهای کتاب شاهد پیشرفت آن بودهاید. تا به اینجای کار تمام مباحث در رابطه با استفاده از کد مناسب HTML در جای درست آن و قرار دادن استایلهای زیبا بر این بخشها با استفاده از CSS بوده است.
در این فصل میخواهیم لایه دیگری به سایت خود اضافه کنیم: لایه "عملکرد". همانطور که بخش ارائه را در قالب CSS از بدنه HTML سایت خود جدا کردیم، حالا باید این کار را در بخش رفتار نیز انجام دهیم؛ برای این کار باید از JavaScript استفاده کنیم؛ البته به روش درست.
اما منظور از رفتار چیست؟ شاید یکی از موارد آن نگاه داشتن کلید ماوس بر روی یک بخش سایت است که به نمایش یک صفحه pop up منجر میشود. شاید پیام تاییدیهای باشد که به هنگام زدن یک لینک برای شما باز میشود و از شما میپرسد که آیا قصد انجام این کار را داشتید؛ برای مثال: "از پاک شدن تمامی آیتمهای انتخابی مطمئن هستید؟". شاید هم تعریف مناسبی از نحوه کارکرد بخش navigation سایت به هنگام قرار گرفتن ماوس بر روی این بخش باشد. در واقع واژه رفتار میتواند معنیهای متعددی با خود به همراه داشته باشد، حتما شما هم میتوانید تعدادی از آنها را نام ببرید.
JavaScript؟ jQuery؟ تفاوت این دو در چیست؟
JavaScript را خیلی گذرا معنی کردیم_این لفظ به عنوان زبان client-side script شناخته میشود. معمولا منطقها در آغاز درون سرور پردازش شده و سپس نتایج آنها درون سیستم کاربر نمایش داده میشوند اما سرویسهای Client side مستقیما در مرورگر کاربر اجرا میشوند.JavaScript تنها زبان Client side است که در تمامی مرورگرها قابل اجرا است، پس در این بخش نیازی به نگرانی نیست.
شاید لغت jQuery به گوشتان خورده باشد، jQuery در واقع کتابخانهای است که با زبان JavaScript نوشته شده و به توسعه دهندگان وب اجازه میدهد تا با صرفه جویی در زمان و پردازشهای خود به افکتهای متنوعی دست یابند. توسعه دهندگان مجموعهایی از Function ها را آماده کردهاند_کدهایی که بخشهای مرکزی JavaScript را تشکیل داده و در قسمت jQuery مسئولیت تمامی اختلافات و مغایرتهای بین تمامی مرورگرها را تقبل کرده و آنها را حل میکنند. صفحه خانه سایت jQuery را در عکس 11.1 مشاهده میکنید.
عکس 11.1: صفحه اصلی سایت jQuery
به عنوان مثال یک ماشین را در نظر بگیرید، اگر بخواهید سرعت حرکت یک ماشین را تغییر دهید نیازی نیست از نحوه عملکرد موتور تمامی ماشینها اطلاع داشته باشید، میتوانید تنها با فشردن پدال گاز خودرو سرعت آن را افزایش دهید، با انجام این کار در ماشینهای گوناگون میتوانید به هدف خود برسید. jQuery فرایندهای حدس و گمانی را در برخورد با مرورگرهای متنوع بیرون میکشد؛ این سرویس نحوه عملکرد تمامی مرورگرها را میداند و شما تنها با نوشتن یک دستور ساده میتوانید باقی کار را به او واگذار کنید؛ شما فقط پدال گاز را بیشتر فشار دهید!