دانلود فایل pdf نوشته
دانلود فایل فیلم نوشته

سامانه Web GIS نیازمند یک وب سایت قدرتمند است

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

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

برای آن که مروری بر آموزش های قبلی داشته باشیم، به صورت گذرا، آنچه تا کنون گذشته است را بیان می کنیم. در نوشته “چگونه برنامه نویس Web GIS شویم؟” درباره مراحل برنامه نویسی Web GIS و طراحی و پیاده سازی Web GIS، با شما سخن گفتیم و توضیح دادیم که برای برنامه نویسی سامانه Web GIS، می بایست اقدامات زیر را انجام دهیم:

ما اینک در اولین مرحله، یعنی طراحی و تولید یک وب سایت، هستیم. برای آن که از مزایای GIS تحت وب، بهرمند شوید، ابتدا باید یک وب سایت مناسب، طراحی کنید. برای طراحی یک وب سایت، از تکنولوژی های HTML, CSS و JavaScript، استفاده می شود. توسط HTML، شاکله و چارچوب یک وب سایت را ایجاد می کنیم. ما آموزش HTML در برنامه نویسی Web GIS را به شما اریه کردیم. سپس توسط CSS، آن را زیبا و کاربرپسند می کنیم. ما آموزش CSS در برنامه نویسی Web GIS را هم به شما ارایه کردیم. در نهایت، توسط JavaScript، امکانات پیشرفته تعامل با کاربر را به وب سایت اضافه می کنیم. ما در آموزش های پیشین، مبانی و مفاهیم Web GIS را آموزش داده ایم. نحوه استفاده از HTML برای ایجاد وب سایت را توضیح دادیم و گفتیم که چگونه با استفاده از CSS، وب سایت ایجاد شده را زیبا طراحی کنید. تمامی این آموزش ها، به همراه فیلم آن ها و فایل PDF، به رایگان در اختیار شما قرار گرفته است. اگر هنوز این آموزش ها را مشاهده نکرده اید، به شما پیشنهاد می کنیم نگاهی به آن ها بیاندازید.

می خواهم آموزش های رایگان کلاس Web GIS را مشاهده کنم

در این نوشته، شما را با JavaScript، آشنا می­کنیم و به شما یاد می دهیم که چطور با استفاده از آن، وب سایت خود را توانمندتر کرده و قابلیت های تعاملی، مثل اعتبارسنجی کاربران هنگام ورود به سایت و یا ایجاد افکت های جذاب و… را در صفحه اصلی سامانه Web GIS، پیاده سازی کنید.

در انتهای این آموزش شما یاد گرفته اید چگونه یک صفحه ورود به سایت، برای کاربران سامانه Web GIS، ایجاد کنید.

JavaScript چیست ؟

برای قدرت بخشیدن به وب سایت ها می توان از زبان برنامه نویسی JavaScript استفاده کرد. این زبان از نوع اسکریپتی می باشد. بدین معنا که برنامه نوشته شده توسط آن، بصورت خط به خط و از بالا به پایین اجرا می شود و نیاز نیست که برای اجرای آن، عملیات تبدیل به زبان کامپیوتر (به انگلیسی Compile) انجام شود. برای آشنایی کوتاه و مفید با JavaScript به نکات زیر توجه کنید.

  • JavaScript در میلیون ها صفحه وب برای اضافه کردن تعامل، جذابیت، اعتبارسنجی فرم ها، ارتباط برقرار کردن با سرور و … استفاده شده است.
  • JavaScript محبوب ترین زبان اسکریپت نویسی تحت وب است و با عمده مرورگرها، مانند Firefox, Chrome, Opera ,Internet Explorer و Safari کار می کند.
  • JavaScriptبرای اضافه کردن تعامل بیشتر در صفحات HTML، بوجود آمده است.
  • JavaScriptمعمولاً در بین کدهای HTML قرار می گیرد.
  • هر کسی می تواند از JavaScriptاستفاده کند، بدون این که نیاز به خرید مجوز آن باشد.

محل قرار گیری کدها

از تگ < script >، برای وارد کردن کدهای JavaScript در صفحه HTML استفاده می شود. تگ های باز و بسته< script > و < script /> ، به مرورگر وب می گویند، کدهای JavaScript کجا شروع و کجا پایان یافته است. خطوط بین < script > و < script /> شامل کدهای JavaScript است.

کدهای JavaScript هم مانند CSS می توانند به سه روش زیر استفاده شوند:

Internal یا داخلی

در این روش، کدهای JavaScript را می توان داخل صفحه HTML نوشت. اغلب، این کدها درون تگ head قرار می گیرند، اما می توان هر جایی از بدنه html، کدهای JavaScript را پیاده سازی نمود:

مثال:

< script>

alert (“Welcome To Web GIS Online Course”)

< script/>

External یا خارجی

در این روش، کدهای JavaScript را می توان به صورت خارجی استفاده نمود. به این شکل که کدها را در درون یک فایل با پسوند js، پیاده سازی و درون صفحه html فراخوانی می کنیم.

مثال:

[code lang=”js”]&gt;&lt;script src=&quot;scripts/jquery-3.1.1.min.js&quot;&gt;&lt;/script&gt;[/code]

Inline یا درون خطی

در این روش، کدهای JavaScript را می توان به صورت درون خطی، درون تگ های شروع و پایان JavaScript نوشت.

مثال:

[code lang=”js”]&gt;&lt;input type=&quot;button&quot; value=&quot;جستجو&quot; onclick=&quot;alert(‘Welcome To Web GIS Online Course’)&quot; /&gt;[/code]

دستورات اولیه برای شروع

دسترسی به یک عنصر

در JavaScript برای دسترسی به یک عنصر HTML از طریق ID، می توان از دستور () document.getElementById استفاده کرد.

نمایش متن روی صفحه وب

با استفاده از دستور ()document.write ، می توان بر روی صفحه وب، متن دل خواه را نمایش داد.

نمایش پیغام بر روی صفحه

با استفاده از دستور ()alert ، می توان بر روی صفحه وب، پیغام دل خواه را نمایش داد.

قوانین JavaScript

JavaScript، ترتیبی از دستورات است که توسط مرورگر اجرا می شود. در زیر، برخی قوانین مهم این زبان برنامه نویسی، آورده شده است.

  • حساس به حروف کوچک و بزرگ

برخلاف HTML، کدهای JavaScript، به حروف کوچک و بزرگ حساس هستند. (به انگلیسیCase Sensitive). بنابراین، هنگامی که کد می نویسید به کوچکی و بزرگی حروف توجه کنید.

  • پایان دستورات

در پایان هر دستور قابل اجرا، یک کاراکتر ; (به انگلیسی Semicolon) اضافه می کنیم.

  • بلوکی از دستورات

دستورات JavaScript می توانند با هم در یک بلوک باشند. بلوک ها با “}” شروع و با “{” خاتمه می یابند. هدف از این بلوک ها این است که ترتیبی از دستوراتی که با هم اجرا می شوند ایجاد شود. یک مثال خوب برای گروه بندی دستورات در یک بلوک، توابع هستند که در ادامه توضیح خواهیم داد.

  • توضیحات

توضیحات را می توان برای شرح چگونگی انجام یک بلوک از دستورات، به کد JavaScript اضافه کرد، در این صورت کد خواناتری خواهیم داشت. توضیحات یک خطی با “//” شروع می شوند و توضیحات چند خطی با */ شروع شده و با /* تمام می شوند.

رویداد ها

یکی از قابلیت های بسیار مفید و کاربردی استفاده از JavaScript در طراحی صفحات و برنامه های تحت وب، واکنش های تعاملی آن، متناسب با رفتار کاربر است. برای مثال، هنگامی که روی یک دکمه در صفحه ای کلیک می شود، می توان هم زمان یا پس از آن، تابعی مبتنی بر JavaScript را در سمت کاربر اجرا کرد و پیش از ارسال درخواست به سرور، پردازش های اولیه را بر روی آن انجام داد. این قدرت JavaScript، بیشتر متکی بر عناصری به نام رویداد (به انگلیسی Event) است که با وقوع آن ها، عملیات تعریف شده خاصی در مرورگر اجرا می شود.

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

رویدادها در واقع حکم استارت، برای موتور توابع را بازی می کنند و یک تابع، بدون رویداد، معمولا قابل اجرا نیست.
مهمترین رویداد ها عبارتند از:

  • onclick

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

  • onchange

این رویداد در حالتی اجرا می شود که مقادیر یکی از فیلدهای فرم در صفحات وب تغییر کند.

  • onload

پس از بارگذاری کامل عنصر و محتویات آن، اتفاق می افتد.

  • onmousemove

هنگامی که ماوس بر روی عنصر حرکت می کند اتفاق می افتد.

  • onmouseout

هنگامی که ماوس از روی عنصر خارج می شود اتفاق می افتد.

مثال:

[code lang=”js”]&gt;&lt;input class=&quot;submit-button&quot; type=&quot;button&quot; value=&quot;جستجو&quot; onclick=&quot;search()&quot; /&gt;[/code]

توابع

يک تابع، مجموعه ای از دستورات است که یک کار مشخص را انجام می دهند. از توابع، برای شکستن و تقسيم کردن کل برنامه به واحدهای کوچکتر و مستقل، استفاده می شود. استفاده از توابع در صفحات و اسکريپت ها، امکانات زير را به برنامه نويس می دهد:

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

[code lang=”js”]function functionname(var1,var2,…,varX)
{
کدهای جاوااسکریپت
}[/code]

مثال: تابعی که یک پیام خوش آمدگویی نمایش می دهد.

[code lang=”js”] function show_msg() {
alert(&quot;Welcome To Web GIS Online Course&quot;);
}[/code]

متغیرها

يک تابع، مجموعه ای از دستورات است که یک کار مشخص را انجام می دهند. از توابع، برای شکستن و تقسيم کردن کل برنامه به واحدهای کوچکتر و مستقل، استفاده می شود. استفاده از توابع در صفحات و اسکريپت ها، امکانات زير را به برنامه نويس می دهد:

  • متغیرها، ظرفی برای ذخیره اطلاعات اند. مانند x=2
  • متغیرها می بایست، دارای اسم باشند. مانند X و یا کمی توصیفی باشند مانند car_name
  • نام متغیرها، به حروف کوچک و بزرگ حساس است. برای مثال، y وY دو متغیر متفاوت اند.
  • نام متغیر می تواند با حروف و یا کاراکتر _ (به انگلیسی Underline) و یا کارکتر $ شروع شود.

انواع متغیرها

متغیرها در حالت کلی به دو نوع محلی و سراسری دسته بندی می شوند:

  • متغیرهای محلی

متغیرهایی که داخل یک تابع، تعریف شده اند، تنها داخل همان تابع، قابل دسترسی اند. شما می توانید در توابع مختلف، متغیرهای محلی با نام های یکسان داشته باشید. متغیرهای محلی، تنها به وسیله تابعی که آن ها را تعریف کرده است، شناخته می شوند. متغیرهای محلی، به محض اینکه عملیات تابع تکمیل شد، حذف می شوند.

  • متغیرهای سراسری
متغیرهایی که خارج از توابع، تعریف شده اند، عمومی می شوند و در تمام اسکریبت و توابع داخل یک صفحه، به آن ها دسترسی خواهد بود. زمانی که یک صفحه وب را ببندید، متغیرهای عمومی حذف خواهند شد.
مثال: تعریف دو متغیر که یکی به صورت محلی (متغیر x) و یکی به صورت سراسری تعریف شده است.

[code lang=”js”]&gt;&lt;script&gt;
var x=10;//متغیر سراسری
function show_msg() {
var url = &quot;GISPlus&quot;;// متغیر محلی
alert(&quot;Welcome To Web GIS Online Course&quot;);
}
&lt;/script&gt;[/code]

انواع داده ها

در JavaScript، به طور کلی، سه نوع داده داریم که عبارتند از:

  • متغیرهای رشته ای (String)
در متغیرهای رشته ای، یک سری از کاراکترها ذخیره می شود. زمانی که یک مقدار رشته ای را به یک متغیر انتساب می دهید، باید آن را در کوتیشن یا دابل کوتیشن (‘ یا “) قرار دهید.
  • متغیرهای عددی (Number)
متغیرهای عددی می توانند اعشاری یا صحیح باشند.

  • متغیرهای Boolean

متغیرهای Boolean تنها دو مقدار True یا False می توانند داشته باشند و اغلب برای تست یک شرط استفاده می شود.

مثال: تعریف دو متغیر عددی و یک متغیر رشته ای

[code lang=”js”]var x=10, y =0; //نوع داده عددی
var url = &quot;GISPlus&quot;; //نوع داده رشته ای[/code]

عملگرها در JavaScript

در JavaScript انواع عملگرها وجود دارند:

  • عملگرهای محاسباتی مانند + ، – ، * ، /
  • عملگرهای انتساب مانند = ، =+ ، =-
  • عملگرهای مقایسه ای مانند == ، =! ، < ، > ، => ، =<
  • عملگرهای شرطی یا منطقی مانند &&, ||, !

مثال: تعریف دو متغیر عددی و نمایش مجموع آن ها

[code lang=”js”]var x=10, y =0;نوع داده عددی//
alert(x + y);//نمایش جمع دو متغیر عددی[/code]

ساختارهای شرطی

اغلب اوقات، هنگام نوشتن یک اسکریپت، شما نیاز دارید که تصمیم های متفاوتی در مقابل نتایج مختلف بگیرید، برای تحقق این موضوع از جملات شرطی استفاده می کنیم.

انواع جملات شرطی در JavaScript عبارتند از:

  • If…: هنگامی که شرط درست باشد، دستور مقابل if اجرا می شود.
  • if … else: اگر شرط درست باشد دستور مقابلif اجرا می شود وگرنه دستور مقابل else اجرا می شود.
  • if … elseif … else: برای اجرای یک دستور از بین چند دستور کاربرد دارد.
  • Switch: برای انتخاب و اجرای یک دستور از بین چند دستور، استفاده می شود.

مثال: پیاده سازی تابع ورود به سامانه برای احراز هویت کاربران هنگام ورود

[code lang=”js”] function login() {
var user = document.getElementById(&quot;user&quot;).value;
var pass = document.getElementById(&quot;pass&quot;).value;
if(user==&quot;admin&quot; &amp;amp;&amp;amp; pass==&quot;123456&quot;)
{
location.href=&quot;index.html&quot;;
}
else
{
alert(&quot;لطفا نام کاربری و کلمه عبور را وارد کنید&quot;);
}

}[/code]

ادامه آموزش JavaScript

آنچه خواندید، گزیده ای از آموزش JavaScript، بود. از آنجایی که آموزش ها گسترده می باشند، لذا از آوردن آن ها در ادامه این نوشته، خودداری می کنیم. ما برای شما یک فیلم آموزش JavaScript، تهیه کرده ایم. در این فیلم که مدت آن ۱ ساعت و ۱۰ دقیقه می باشد، ما به آموزش کامل JavaScript پرداخته­ایم و شما می توانید بصورت عملی، خروجی مثال ها را ببینید. پیشنهاد می کنیم این فیلم آموزشی را به رایگان، دانلود کرده و مراحل آموزش JavaScript را فرابگیرید. در این فیلم، علاوه بر موارد آموزش داده شده در بالا، موارد زیر را هم می آموزید:

  • آرایه ها
  • حلقه ها
  • مدیریت خطا ها
  • اعتبارسنجی فرم
  • برنامه نویسی شی گرا
  • و …

قبل از دانلود فیلم کامل، می توانید گزیده ای از آن را در زیر، مشاهده نمایید.

می خواهم فیلم کامل آموزش JavaScript را رایگان دانلود کنم

کلاس رایگان آموزش برنامه نویسی Web GIS

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

می خواهم آموزش های رایگان کلاس WEB GIS را مشاهده کنم

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

سخن پایانی

تا کنون در کلاس Web GIS، تلاش کردیم برای آموزش برنامه نویسی Web GIS شما را با مباحث زیر، آشنا کنیم:

ما در نوشته­ بعدی، شما را با jQuery که یک کتابخانه JavaScript می باشد، آشنا می­کنیم و به شما یاد می دهیم که چگونه با استفاده از jQuery، به سادگی، کدهای JavaScriptی بنویسید که با کاربر، در تعامل باشند و با استفاده از افکت های زیبا، سایت خود را کاربرپسند تر نمایید.

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

پیشنهاد ما برای خواندن

علی درخشان
علی درخشان، برنامه نویس سامانه های اطلاعات مکانی تحت وب و موبایل است. او تجربه حضور در پروژه های بزرگ WebGIS و MobileGIS را در کارنامه خود دارد. از جمله فعالیت های او، مدیریت تیم های برنامه نویسی سامانه های اطلاعات مکانی می باشد.