برنامه نویسی Web GIS؛ آموزش jQuery

برنامه نویسی Web GIS آن قدر هم سخت نیست!

کمتر کد بنویسید و قابلیت های بیشتر داشته باشید!

برنامه نویسیWeb GIS  را با سلسله نوشته های آموزشی، از طریق کلاس رایگان Web GIS با شما هستیم. این پنجمین آموزش از کلاس رایگان آموزش Web GISاست. برای مشاهده آموزش های پیشین و دانلود فیلم و PDF آن ها، می توانید به صفحه کلاس Web GIS، مراجعه نمایید.

در کلاس آموزش وب جی آی اس قرار است برنامه نویسی GIS تحت وب را در 5 بخش به شما آموزش دهیم.

دانلود ویدیو دانلود PDF
پیشنمایش : ندارد فرمت : MP4 حجم : مگابایت منبع :ندارد

ما تاکنون، در بخش مبانی و مفاهیم 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، تقدیم می گردد. پاسخ های خود را از طریق ایمیل، تلگرام و یا بخش تماس با ما، ارسال نمایید.

دیدگاهتان را بنویسید

ورود | ثبت نام
شماره موبایل یا پست الکترونیک خود را وارد کنید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
درخواست بازیابی رمز عبور
لطفاً پست الکترونیک یا موبایل خود را وارد نمایید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
ایمیل بازیابی ارسال شد!
لطفاً به صندوق الکترونیکی خود مراجعه کرده و بر روی لینک ارسال شده کلیک نمایید.
تغییر رمز عبور
یک رمز عبور برای اکانت خود تنظیم کنید
تغییر رمز با موفقیت انجام شد
50 جلد از کتاب GIS سازمانی موجود شدخرید کتاب
+

دانلود پادکست کسب درامد از GIS

دانلود فیلم چطور برنامه نویس GIS حرفه ای شویم؟