jQuery چیست؟/معرفی پرطرفدارترین فریم ورک جاوااسکریپت
ارسال شده: چهارشنبه ۳۰ شهریور ۱۳۹۰, ۶:۴۵ ب.ظ
سالهای متمادی، جاوااسکریپت به چندش معروف بود! چون هم یادگیریش سخت بود و منبع آموزشی خوب براش کم پیدا می شد، هم کاربرد قابل قبولی براش نبود و هم باعث مشکلات امنیتی میشد.
اما با گذشت زمان، رونق گرفتن AJAX، بیشتر شدن ایده های سمت کلاینت افزایش امنیت مرورگرها که به دلیل توسعه مرورگرها بود، جاوااسکریپت خواهان بیشتری پیدا کرد.
(توسعه مرورگرها رو مدیون اتحادهای ضد اینترنت اکسپلورر هستیم که بخاطر پدرسوختگی و دشمنی با مایکروسافت، فایرفاکس رو پایه گذاری کردند مثل اپل و گوگل و اوراکل و بقیه که رشد و رقابتی شدن بازار مرورگرها رو باعث شد).
اما وقتی jQuery متولد شد، اوضاع کلی فرق کرد. jQuery گفت برای اعمال تغییر در اجزای صفحه با جاوااسکریپت، انیمیشن سازی و AJAX و غیره، نیازی به بلد بودن جاوااسکریپت نداری. من همه اش رو با یه سری توابع هلو شکل واست حل کردم اونم بصورت Cross-Browser یعنی در همه مرورگرها یه نتیجه داره!
چه حرف باحالی. ولی مگه میشه بدون بلد بودن یه زبان ازش استفاده کرد؟ راستش بله! کافیه کار با سینتکس خود jQuery رو یاد بگیریم و بعدش همه چی حله. این یادگیری فقط سه چهار ساعت (حتی کمتر) طول میکشه.
طریقه نصب و بکارگیری جی کوئری به این صورته که به سایت jQuery.com مراجعه می کنیم. آخرین نسخه اش رو داونلود می کنیم که یک فایل JS خواهد بود. این فایل رو توسط تگ <SCRIPT> به صفحه اضافه می کنیم و کدهای شخصی خودمون رو هم توسط یه تگ <SCRIPT> دیگه، بعد از <SCRIPT> قبلی قرار میدیم.
Please Login or Register to see this code
یه نکته ای وجود داره بعضی جاها میگن jQuery رو بجای <HEAD>، در آخر <BODY> بذاریم. می دونی که اون فایل jquery حدود 50 کیلوبایته و وقتی در <HEAD> قرار بگیره تا کامل لود و پردازش نشه، ادامه صفحه و <BODY> نمایش داده نمیشه و برای سرعتهای پایین، مدت زمانی وجود داره که باید صفحه سفید تماشا کنند اما وقتی این فایل در آخر <BODY> بذاریم، صفحه مسلما زودتر ظاهر میشه. اما این روش استاندارد و همیشه خوبی نیست. چون اولا یه استانداردی میگه همه تگهای <SCRIPT> باید در <HEAD> قرار بگیرند و دوما اینکه تصور کن ما کدهایی رو در جی کوئری نوشتیم که قراره با شروع صفحه دیده بشن و صفحه طولانی باشه اونوقت کاربر باید منتظر بمونه تا همه صفحه کامل لود شه و بعد بتونه افکتها و امکانات جی کوئری رو استفاده کنه که اصلا جالب نیست. در کل این بستگی به ساختار صفحه و سایت داره که کدوم روش براش بهتره.
جی کوئری بر پایه اجزای DOM بنا شده (اجزا یا Elementهای DOM بصورت خیلی خلاصه، همون اجزا و تگهای موجود در صفحه است). یعنی اولین قدم استفاده ازش انتخاب و پیدا کردن بخشی از صفحه است که می خوایم باهاش کار کنیم. به این صورت که تقریبا همه توابع جی کوئری به Elementها متصل میشن.
یک تابع Global به نام jQuery وجود داره که اجزای DOM رو بهمون میده. در حالت عادی تابع $ هم وجود داره که دقیقا با تابع jQuery برابره. این تابع برای گرفتن Elementها از دو روش استفاده می کنه یه روش استفاده از Selectorهای معتبر در CSS است که جی کوئری برای این کار از یک Selector آماده(Standalone) به نام Sizzle بهره میبره. روش دوم دادن خود Elementهای جاوااسکریپت به این تابع است.
مثلا می خوایم یه <DIV> که ID به نام myDiv داره رو انتخاب کنیم:
Please Login or Register to see this code
هر چهار خط بالا یه نتیجه داره که اون دو تا آخری جالب نیست ولی گاهی اوقات لازم میشه.
حالا Element رو پیدا کردیم و میخوایم توابعش رو استفاده کنیم. برای کسانیکه هیچی از جاوااسکریپت نمی دونن. این توابع با نقطه از هم جدا میشن. اصلی ترین تابع ready نام داره که خیلی پر کاربرده و کارش اینه که یک تابع (که ما میسازیم) رو میگیره و درست موقعیکه همه اجزای DOM کامل شناخته شدند، اجرا میشه یعنی زودترین موقعی که ما میتونیم مطمئن شیم همه تگهای موجود در صفحه رو مرورگر لود کرده و شناخته. گفته بودم که این فریم ورک به Elementها متصل میشه و این تابع هم باید به body متصل بشه. می تونیم body رو توسط Selectorها بگیریم ولی روش راحتتر استفاده از document.body است که یک مقدار استاندارد در مرورگرهاست که باید به روش دومی که بالا گفتم استفاده شه یعنی روش جاوااسکریپت:
Please Login or Register to see this code
برای مبتدی ها، تابع در جاوااسکریپت به این شکل ها ساخته میشه:
myFunction = function() {
// Functions codes here
}
// Or
function myFunction() {
// Functions codes here
}
و اینجوری استفاده میشن:
myFunction();
و می تونن مقادیری رو به عنوان پارامتر بگیرند:
Please Login or Register to see this code
اینجا someText به عنوان پارامتر قرار گرفته. پارامتر هر چی می تونه باشه. حتی میتونه خودش یک تابع باشه:
Please Login or Register to see this code
که می تونیم بجای اینکه یه تابع بسازیم و نامش رو به عنوان پارامتر بدیم، خود تابع رو بین پرانتزها تعریف کنیم و مشکلی هم پیش نیاد:
Please Login or Register to see this code
ادامه دارد ......
اما با گذشت زمان، رونق گرفتن AJAX، بیشتر شدن ایده های سمت کلاینت افزایش امنیت مرورگرها که به دلیل توسعه مرورگرها بود، جاوااسکریپت خواهان بیشتری پیدا کرد.
(توسعه مرورگرها رو مدیون اتحادهای ضد اینترنت اکسپلورر هستیم که بخاطر پدرسوختگی و دشمنی با مایکروسافت، فایرفاکس رو پایه گذاری کردند مثل اپل و گوگل و اوراکل و بقیه که رشد و رقابتی شدن بازار مرورگرها رو باعث شد).
اما وقتی jQuery متولد شد، اوضاع کلی فرق کرد. jQuery گفت برای اعمال تغییر در اجزای صفحه با جاوااسکریپت، انیمیشن سازی و AJAX و غیره، نیازی به بلد بودن جاوااسکریپت نداری. من همه اش رو با یه سری توابع هلو شکل واست حل کردم اونم بصورت Cross-Browser یعنی در همه مرورگرها یه نتیجه داره!
چه حرف باحالی. ولی مگه میشه بدون بلد بودن یه زبان ازش استفاده کرد؟ راستش بله! کافیه کار با سینتکس خود jQuery رو یاد بگیریم و بعدش همه چی حله. این یادگیری فقط سه چهار ساعت (حتی کمتر) طول میکشه.
طریقه نصب و بکارگیری جی کوئری به این صورته که به سایت jQuery.com مراجعه می کنیم. آخرین نسخه اش رو داونلود می کنیم که یک فایل JS خواهد بود. این فایل رو توسط تگ <SCRIPT> به صفحه اضافه می کنیم و کدهای شخصی خودمون رو هم توسط یه تگ <SCRIPT> دیگه، بعد از <SCRIPT> قبلی قرار میدیم.
Please Login or Register to see this code
یه نکته ای وجود داره بعضی جاها میگن jQuery رو بجای <HEAD>، در آخر <BODY> بذاریم. می دونی که اون فایل jquery حدود 50 کیلوبایته و وقتی در <HEAD> قرار بگیره تا کامل لود و پردازش نشه، ادامه صفحه و <BODY> نمایش داده نمیشه و برای سرعتهای پایین، مدت زمانی وجود داره که باید صفحه سفید تماشا کنند اما وقتی این فایل در آخر <BODY> بذاریم، صفحه مسلما زودتر ظاهر میشه. اما این روش استاندارد و همیشه خوبی نیست. چون اولا یه استانداردی میگه همه تگهای <SCRIPT> باید در <HEAD> قرار بگیرند و دوما اینکه تصور کن ما کدهایی رو در جی کوئری نوشتیم که قراره با شروع صفحه دیده بشن و صفحه طولانی باشه اونوقت کاربر باید منتظر بمونه تا همه صفحه کامل لود شه و بعد بتونه افکتها و امکانات جی کوئری رو استفاده کنه که اصلا جالب نیست. در کل این بستگی به ساختار صفحه و سایت داره که کدوم روش براش بهتره.
جی کوئری بر پایه اجزای DOM بنا شده (اجزا یا Elementهای DOM بصورت خیلی خلاصه، همون اجزا و تگهای موجود در صفحه است). یعنی اولین قدم استفاده ازش انتخاب و پیدا کردن بخشی از صفحه است که می خوایم باهاش کار کنیم. به این صورت که تقریبا همه توابع جی کوئری به Elementها متصل میشن.
یک تابع Global به نام jQuery وجود داره که اجزای DOM رو بهمون میده. در حالت عادی تابع $ هم وجود داره که دقیقا با تابع jQuery برابره. این تابع برای گرفتن Elementها از دو روش استفاده می کنه یه روش استفاده از Selectorهای معتبر در CSS است که جی کوئری برای این کار از یک Selector آماده(Standalone) به نام Sizzle بهره میبره. روش دوم دادن خود Elementهای جاوااسکریپت به این تابع است.
مثلا می خوایم یه <DIV> که ID به نام myDiv داره رو انتخاب کنیم:
Please Login or Register to see this code
هر چهار خط بالا یه نتیجه داره که اون دو تا آخری جالب نیست ولی گاهی اوقات لازم میشه.
حالا Element رو پیدا کردیم و میخوایم توابعش رو استفاده کنیم. برای کسانیکه هیچی از جاوااسکریپت نمی دونن. این توابع با نقطه از هم جدا میشن. اصلی ترین تابع ready نام داره که خیلی پر کاربرده و کارش اینه که یک تابع (که ما میسازیم) رو میگیره و درست موقعیکه همه اجزای DOM کامل شناخته شدند، اجرا میشه یعنی زودترین موقعی که ما میتونیم مطمئن شیم همه تگهای موجود در صفحه رو مرورگر لود کرده و شناخته. گفته بودم که این فریم ورک به Elementها متصل میشه و این تابع هم باید به body متصل بشه. می تونیم body رو توسط Selectorها بگیریم ولی روش راحتتر استفاده از document.body است که یک مقدار استاندارد در مرورگرهاست که باید به روش دومی که بالا گفتم استفاده شه یعنی روش جاوااسکریپت:
Please Login or Register to see this code
برای مبتدی ها، تابع در جاوااسکریپت به این شکل ها ساخته میشه:
myFunction = function() {
// Functions codes here
}
// Or
function myFunction() {
// Functions codes here
}
و اینجوری استفاده میشن:
myFunction();
و می تونن مقادیری رو به عنوان پارامتر بگیرند:
Please Login or Register to see this code
اینجا someText به عنوان پارامتر قرار گرفته. پارامتر هر چی می تونه باشه. حتی میتونه خودش یک تابع باشه:
Please Login or Register to see this code
که می تونیم بجای اینکه یه تابع بسازیم و نامش رو به عنوان پارامتر بدیم، خود تابع رو بین پرانتزها تعریف کنیم و مشکلی هم پیش نیاد:
Please Login or Register to see this code
ادامه دارد ......