پاورپوینت مقدمه ای بر jQuery

بخشی از پاورپوینت

اسلاید 1 :

مقدمه ای بر jQuery

زبان جاوا اسکریپت یک زبان برنامه نویسی منطقی است که در طراحی صفحات وب کاربرد فراوان دارد. این زبان در برنامه نویسی سمت کلاینت مورد استفاده قرار می گیرد. زبان جاوا اسکریپت بسیار گسترده و پیچیده می باشد ویادگیری کامل آن نیاز به زمان زیاد و دانش بالایی دارد. اغلب افرادی که با زبان جاوا اسکریپ کار میکنند ( طراحان وب … ) برای راحتی کار خود از jQuery استفاده میکنند

جی کوئری یک کتابخانه جاوا اسکریپت است ( متودها و دستورات آماده جاوا اسکریپت می باشد ) که برای ساده کردن نوشتن اسکریپهای سمت-مشتری دراچ تی ام ال HTML طراحی شده و برای راحت تر شدن طراحی وب سایت می باشد.امروزه محبوبترین کتابخانه جاوا اسکریپت در حال استفاده است.

اسلاید 2 :

عملکرد جی کوئری :

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

برخی اطلاعات در مورد جی کوئری :
طراح : جان رزیگ
توسعهدهنده : تیم جیکوئری
اولین نسخه : سال ۲۰۰۶
زبان های برنامه نویسی : جاوا اسکریپت
زبانهای قابل دسترس : انگلیسی
گونه : چارچوب نرمافزاری تحت وب

اسلاید 3 :

ویژگی های جی کوئری :

۱- قابلیت اجرا بر روی کلیه مرورگرها
۲- قابلیت دستکاری و تغییر خصوصیات CSS
۳- متحرک سازی و قرار دادن افکت روی عناصر وب سایت
۴- کار با ایجکس Ajax
۵- دسترسی به عناصر موجود در پرونده و تغییر و دستکاری آنها
۶- کنترل اسان و قدرتمند تر رویدادهاEvents
۷- ایجاد افکت و حرکات انیمیشین
۸- توسعه دادن پلاگین ها
۹- برنامههای کوچک سودمند

اسلاید 4 :

نحوه استفاده :

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

روش دوم بااستفاده از Google AJAX Libraries API :

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

اسلاید 5 :

در کتابخانه jQuery به ۵ روش میشه با Ajax کار کرد:
load.
$.post
$.get
$.getJSON
$.getScript

اسلاید 6 :

متد load
یکی از ساده ترین و پر استفاده ترین راههای کار با Ajax در جی کوئری استفاده از تابع load میباشد.این تابع محتوای یک صفحه رو به صورت ای جکس بارگذاری میکنه.
مثال :

اسلاید 7 :

متد load
در کد پایین هنگامی که روی کلید کلیک میشه ابتدا در div یک عکس loadingنمایش داده میشه سپس هنگامی که اطلاعات به طور کامل از سرور دریافت شد در تگ div قرار میگیره .
با استفاده از این تابع فقط میتونیم اطلاعات رو به صورت GET به سمت سرور بفرستیم .

اسلاید 8 :

تابع $.post ارسال درخواست به صورت POST
گاهی اوقات نیاز هست که ساطلاعات به صورت POST به سمت سرور ارسال بشه . برای اینکار از تابع $.post در jQuery استفاده میکنیم.

اسلاید 9 :

تابع $.post ارسال درخواست به صورت POST
متد post چهار پارامتر میگیره.
پارامتر اول نام صفحه ای که قراره درخواست رو ارسال کنیم.
پارامتر دوم مقادیری که با POST ارسال میکنیم رو باید قرار بدیم.این مقادیر باید با فرمت json ارسال بشه.
پارامتر سوم یک تابع که هنگامی که درخواست به سرور با موفقیت ارسال و دریافت شد اجرا میشه. میبینید که این تابع یک پارامتر دارهdata در متغیر data مقادیر ارسالی از سمت سرور قرار میگیرن.
پارامتر چهارم فرمت دریافت داده ها رو مشخص میکنه.که در مثال بالا ما فرمت دریافت داده ها رو html مشخص کردیم.

اسلاید 10 :

تابع $.post ارسال درخواست به صورت POST
هنگاهی که مقادیر ارسالی از سمت سرور به صورت json باشه به صورت زیر عمل میکنیم :

اسلاید 11 :

تابع $.post ارسال درخواست به صورت POST
و در سمت سرور :

تابع json_encode یک آرایه به عنوان ورودی میگیره و تبدیل به فرمت json میکنه و برمیگردونه.

اسلاید 12 :

تابع $.get برای ارسال مقادیر به صورت GET
این تابع شبیه به تابع $.post عمل میکنه با این تفاوت که مقادیر به صورت GET به سمت سرور ارسال میشن.مزیت این تابع نسبت به تابع load اینه که میتونیم نوع دریافت داده ها رو مشخص کنیم و انعطاف بیشتری هم داره.

اسلاید 13 :

تابع $.getJSON دریافت اطلاعات به صورت JSON از سرور
این تابع اطلاعات رو به صورت JSON به سرور میفرسته و به صورت jSON هم از سرور دریافت میکنه.

این تابع اطلاعات رو به صورت GET به صمت سرور ارسال میکنه. میشه گفت مثل تابع $.get عمل میکنه با این تفاوت که تابع $.get از انعطاف بیشتری برخورداره.

اسلاید 14 :

تابع $.getScript بارگذاری یک فایل جاوااسکریپت از سرور
با استفاده از این تابع میتونیم یک فایل که حاوی دستورات جاوااسکریپت هست رو بارگذاری کنیم.این تابع دو پارامتر بیشتر نمیگیره.پارامتر اول مسیر فایل و پارامتر دوم یم تابع که هنگامی که درخواست به اتمام رسید اجرا میشه :

اسلاید 15 :

در آخر $.ajax
$.ajax هم یکی دیگه از راههای ساخت صفحات Ajax با jQuery که امکانات بیشتری در اختیار ما قرار میده.کار با این تابع به گفته خود سایت jQuery کمی سخته اما امکاناتی مثل مدیریت خطا ، before send ، کش و …. در اختیار ما قرار میده.

var myKeyVals = { A1984 : 1, A9873 : 5, A1674 : 2, A8724 : 1, A3574 : 3, A1165 : 5 }

var saveData = $.ajax({
type: 'POST',
url: "someaction.do?action=saveData",
data: myKeyVals,
dataType: "text",
error: function(xhr){
alert("An error occured: " + xhr.status + " " + xhr.statusText);
},
success: function(resultData) { alert("Save Complete") }
});

saveData.error(function() { alert("Something went wrong"); });