برنامه نویسی Web GIS آن قدر هم سخت نیست!
کمتر کد بنویسید و قابلیت های بیشتر داشته باشید!
برنامه نویسیWeb GIS را با سلسله نوشته های آموزشی، از طریق کلاس رایگان Web GIS با شما هستیم. این پنجمین آموزش از کلاس رایگان آموزش Web GISاست. برای مشاهده آموزش های پیشین و دانلود فیلم و PDF آن ها، می توانید به صفحه کلاس Web GIS، مراجعه نمایید.
در کلاس آموزش وب جی آی اس قرار است برنامه نویسی GIS تحت وب را در 5 بخش به شما آموزش دهیم.
ما تاکنون، در بخش مبانی و مفاهیم GIS و Web GIS به شما گفته ایم که “جی آی اس چیست؟” و “وب جی آی اس چیست؟” و در مورد چیستی و کاربرد Web GISنیز سخن گفتیم. برای اینکه شما را برای شروع برنامه نویسی Web GIS آماده کنیم، در بخش دوم به مبانی و مفاهیم برنامه نویسی Web پرداخته ایم. همان طور که در تصویر زیر می بینید، این بخش شامل 6 جلسه می باشد. ما اینک می خواهیم شما را با jQuery آشنا کنیم.
می خواهم آموزش های رایگان کلاس WEB GIS را مشاهده کنم
در این نوشته، شما را با jQuery، آشنا میکنیم و به شما یاد می دهیم که چطور با استفاده از آن، در برنامه نویسی Web، کمتر کد بنویسید و بیشتر لذت ببرید.
در انتهای این آموزش شما یاد گرفته اید چگونه با کمک کتابخانه jQuery، با استفاده از کدنویسی کوتاه و ساده، وب سایت های خود را جذاب و کاربرپسند نمایید.
jQuery چیست؟
jQuery، یک کتابخانه JavaScript است که به ما کمک می کند تا کارهای مورد نظر در برنامه نویسی تحت وب را با نوشتن کدهای کمتر، سریع تر و بهتر انجام دهیم.
jQuery، امکان دستکاری عناصر HTML، پاسخ به رویدادها، متحرک سازی عناصر و… را به منظور توسعه سریع و آسان تحت وب، فراهم می کند. jQuery، به گونه ای طراحی شده است تا روشی را که با آن، کد JavaScript را می نویسید، آسان نماید. شما می توانید jQuery را به صورت یک لایه واسط در نظر بگیرید. توسط jQuery، قابلیت های بسیاری را که می بایست در خطوط زیادی از کدهای JavaScript می نوشتید، به سادگی آن ها را در چند خط می نویسید.
نکته:
jQuery ، جایگزینی برای JavaScript نیست و کدی که هنگام استفاده از jQuery خواهید نوشت هنوز هم JavaScript می باشد..
نصب و راه اندازی jQuery
- برای اینکه بتوانیم از امکانات jQueryاستفاده کنیم بایستی آخرین نسخه کتابخانه jQuery را از سایت jQuery.comدانلود کنیم.
- بعد از دانلود، شما باید کتابخانه را در صفحات خود به صورت خارجی یا External فراخوانی و بارگذاری کنید.
حال می توانید از قابلیت های jQuery در صفحات وب خود، استفاده نمایید.
< script src =”scripts/jquery-3.1.1.min.js” > </script >
jQuery به گونهای بهینه شده که بتوانید با آسان ترین راه ممکن، عناصر HTML را انتخاب و عملی را روی آنها انجام دهید.
شروع کار با jQuery
در این بخش می خواهیم سراغ اصل مطلب برویم و سریع بگوییم چگونه باید از jQuery استفاده نمایید.
اصلی ترین دستور در jQuery :
$(selector).action()
- علامت $: مانند متد ()document.getElementById در JavaScript عمل می کند، با این تفاوت که getElementById فقط به عناصر با id مشخص دسترسی داشت ولی $ می تواند به تمام عناصر دسترسی داشته باشد .
- :selectorنام کلاس، شناسه، نام تگ، نوع، نام خصوصیت و یا مقدار خصوصیت عنصر HTMLاست.
- ()action: عملی است که روی عنصر HTML انجام می شود.
انتخابگرهای jQuery
انتخابگرهایjQuery به شما این اجازه را می دهند تا عناصر HTML را انتخاب و دستکاری کنید.
با انتخابگرهای jQuery می توانید عناصر HTML را براساس شناسه، کلاس، نوع، نام خصوصیت، مقدار خصوصیت و… پیدا کنید. این تکنیک براساس انتخابگرهای CSS است و علاوه بر این، jQuery تعدادی انتخابگر سفارشی نیز دارد. تمام انتخابگرها در jQuery با علامت “$” آغاز و با پرانتز محصور می شوند.
دو انتخابگر مهم درjQuery عبارتند از:
- انتخابگر شناسه (#id)
- انتخابگر کلاس (.classname)
انتخابگر شناسه
انتخابگر شناسه، از مقدار خصوصیت id تگ HTML برای پیدا کردن عنصر استفاده می کند.
شناسه در یک صفحه، باید یکتا باشد، بنابراین زمانی که بخواهید به یک عنصر منحصر به فرد در صفحه دسترسی داشته باشید از این روش استفاده نمایید.
برای پیدا کردن یک عنصر با شناسه مشخص، از کاراکتر “#” همراه با شناسه مورد نظر استفاده نمایید:
< div id =”test” > < / div >
$(“ #test “).hide();
انتخابگر کلاس
انتخابگر نام کلاس، عناصر با کلاس مشخص را پیدا می کند.
برای پیدا کردن عناصر با نام کلاس مشخص، از کاراکتر “.” همراه با نام کلاس مورد نظر استفاده کنید:
< div class =”test” > < / div >
$( “.test” ).hide();
رویدادها در jQuery
همه ی رویدادهای JavaScript، یک متد معادل در jQuery دارند. در ادامه، رویدادهای رایج در jQuery آورده شده اند.
$(document).ready()
این متد به شما اجازه می دهد تا یک تابع را زمانی که صفحه وب کاملاً بارگذاری شد، اجرا کنید.
$( document ).ready( function (){
// action goes here!!
});
click()
این متد، یک تابع را برای پاسخ دادن به رویداد onclick یک عنصر، به آن اختصاص می دهد. زمانی که کاربر روی یک عنصر HTML کلیک کند، رویداد onclick اتفاق می افتد.
$( “p” ).click( function (){
// action goes here!!
});
dblclick()
این متد، یک تابع را برای پاسخ دادن به رویداد ondblclick یک عنصر، به آن اختصاص می دهد. زمانی که کاربر روی یک عنصرHTML دوبار کلیک کند، رویداد ondblclick اتفاق می افتد.
$( “p” ).dblclick( function (){
// action goes here!!
});
نکته:
سایر رویدادها در فیلم رایگان این آموزش توضیح داده شده اند. برای آنکه نوشته آموزشی طولانی نشود و مختصر و مفید باشد از آوردن آنها در این نوشته خودداری می کنیم.دانلود رایگان فیلم آموزش JQUERY
افکت ها در jQuery
در jQuery، متدهایی برای ایجاد افکت های جذاب و زیبا بر روی صفحات وب سایت وجود دارد. این متدهای برای انجام کارهای زیر استفاده می شوند:
- نمایش و پنهان کردن عناصر
- محو و یا نمایان کردن عناصر
- پنهان و نمایان کردن عناصر بصورت اسلایدی
- متحرک سازی
در ادامه این متدها توضیح داده شده اند.
متدهای نمایش و پنهان کردن عناصر:
- ()hide و ()show: برای پنهان و نمایش دادن عناصر استفاده میشوند.
- ()toggle: در صورتی که عنصر مخفی باشد نمایش داده می شود و در صورتی که عنصر در حال نمایش باشد، مخفی می شود.
متدهای محو و یا نمایان کردن عناصر:
- fadeIn(): یک عنصر پنهان را با سرعتی مشخص نمایان می کند.
- fadeout(): یک عنصر را با سرعتی مشخص محو می کند.
پنهان و نمایان کردن عناصر بصورت اسلایدی:
- ()slideDown: یک عنصر پنهان را به صورت اسلایدی نمایان می کند.
- ()slideUp: یک عنصر را به صورت اسلایدی پنهان می کند.
- ()slideToggle: بین متدهای () slideDown و ()slideUp حرکت می کند.
متحرک سازی:
- ()animate: برای متحرک سازی در jQuery استفاده می شود.
- ()stop: برای متوقف کردن متحرک سازی استفاده می شود.
تابع Callback در jQuery
دستورات JavaScript، خط به خط اجرا می شوند. اما هنگام استفاده از دستورات متحرک سازی، خط بعدی می تواند بدون اجرای کامل دستور قبلی اجرا شود. این امر می تواند موجب بروز خطا شود. برای جلوگیری از بروز خطا، می توان از توابع callback استفاده نمود. تابع callback، بعد از اجرای کامل متحرک سازی، اجرا می شود و شما می توانید انجام یک عمل را منوط به اتمام متحرک سازی یک عنصر صفحه وب سایت نمایید.
$( selector ).hide( speed , callback function );
در مثال زیر، پارامتر callback در متد hide() با یک تابع تنظیم شده است، این تابع بعد از اجرای کامل افکت پنهان سازی، اجرا خواهد شد:
$( “button” ).click( function (){
$( “p” ).hide( “slow” , function (){
alert( (“The paragraph is now hidden” );
});
});
زنجیره ای کردن متدها
تا به حال، دستورات jQuery را یکی بعد از دیگری نوشتهایم. اما تکنیکی به نام زنجیره ای کردن یا chaining وجود دارد که به ما اجازه می دهد تا تنها با یک دستور، چندین متد را روی یک عنصر مشخص، اجرا کنیم.
مثال:
$( “#btn_login” ).css( “color” , “red” ) .slideUp(2000).slideDown(2000);
دستکاری عناصر
یکی از مهم ترین بخش های jQuery، امکان دستکاری عناصر صفحه HTML می باشد. در jQuery، متدهایی ساده، اما کاربردی برای دستکاری محتوای عناصر HTML وجود دارد. در ادامه، برخی از این متدها را آورده ایم.
()text
محتوای عنصر یا عناصر انتخاب شده را تنظیم یا برمی گرداند.
()html
محتوای عنصر یا عناصر انتخاب شده را که می تواند شامل تگ های HTML نیز باشد تنظیم یا برمی گرداند.
var body=$( “body” ).html();
$( “body” ).html( “<p> Web GIS Online Course </p>”);
val()
محتوای فیلد یا فیلدهای انتخاب شده داخل یک فرم را تنظیم یا برمی گرداند.
var user =$( “#user ” ).val(); // برگراندن مقدار
$( “#user” ).val( “admin“); //مقداردهی عنصر
Attr()
مقدار یک خصوصیت را تنظیم یا برمی گرداند.
$( “#user” ).attr( “class” , “textbox” );
ادامه آموزش jQuery
آنچه خواندید، گزیده ای از آموزش jQuery ، بود. از آنجایی که آموزش ها گسترده می باشند، لذا از آوردن آن ها در ادامه این نوشته، خودداری می کنیم تا نوشته آموزشی ما کوتاه و باشد و مخاطب در یک دید بداند که در این آموزش قرار است چه مواردی به وی آموزش داده شوند.
قبل از دانلود فیلم کامل، می توانید گزیده ای از آن را در زیر، مشاهده نمایید
ما برای شما یک فیلم آموزش jQuery ، تهیه کرده ایم. در این فیلم که مدت آن 1 ساعت و 16 دقیقه می باشد، ما به آموزش کامل jQuery پرداخته¬ایم و شما می توانید بصورت عملی، خروجی مثال ها را ببینید. پیشنهاد می کنیم این فیلم آموزشی را به رایگان، دانلود کرده و مراحل آموزش jQuery را فرابگیرید. در این فیلم، علاوه بر موارد آموزش داده شده در بالا، موارد زیر را هم می آموزید:
- اضافه کردن عناصر
- حذف کردن عناصر
- دستکاری ظاهر عناصر
- متدهای کار با ابعاد در jQuery
- AJAX چیست ؟
- متدهای AJAX در jQuery
- پیمایش یا Traversing چیست؟
- افزونه های jQuery
- اضافه کردن چند قابلیت به سامانه Web GIS طراحی شده
- افزایش جذابیت نمایش فرم ورود به منظور کاربرپسند نمودن آن
- احراز هویت کاربران
- کاربرپسند نمودن نمایش پیغام های خطا
- نمایش و ظاهر کردن پنل لایه ها در صفحه اصلی
- ایجاد و نمایش پنجره جستجو در سامانه
- و …
سخن پایانی
ما در 4 جلسه گذشته، به شما یاد دادیم که چگونه یک وب سایت ایجاد کنید. لازمه پیاده سازی Web GIS، داشتن یک وب سایت است که با کاربر، در تعامل بوده و زیبا و کاربرپسند باشد. شما با آموزش هایی که تا کنون از ما گرفته اید می بایست بتوانید یک وب سایت زیبا برای سامانه Web GIS طراحی نمایید.
از این به بعد می بایست بتوانید برای قدرت بخشیدن به وب سایت خود، برنامه نویسی سمت سرویس دهنده انجام دهید. لذا در جلسه آتی، ما به شما در مورد زبان برنامه نویسی C#، آموزش هایی را ارایه می کنیم. شما سومین گام بلند در برنامه نویسی Web GIS را از جلسه آتی بر می دارید. فراموش که نکرده اید دو گام قبلی چه بودند؟
به افرادی که به پرسش فوق جواب دهند، هدایایی شامل، پیکسل یا لیوان GISPlus و یا کد تخفیف خرید بسته آموزش برنامه نویسی Web GIS، تقدیم می گردد. پاسخ های خود را از طریق ایمیل، تلگرام و یا بخش تماس با ما، ارسال نمایید.