آموزش JQuery

مفاهیم و مبانی اصلی jQuery (جی کوئری) – آموزش jQuery

  • سه شنبه ۲۳ مرداد ۱۳۹۷
  • بازدید ۴۴۰ نفر

jquery basics 3073 تصویر

مفاهیم و مبانی اصلی jQuery

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

رشته (string)

یک رشته در جاوا اسکریپت، یک شیء تغییر ناپذیر است که می تواند شامل هیچ، یک یا چند کاراکتر باشد. در زیر چند نمونه از رشته های مجاز در جاوا اسکریپت را مشاهده می کنید:

اعداد (Numbers)

مقادیر عددی در جاوا اسکرپیت، طبق IEEE 754 در قالب اعشاری ۶۴ بیتی هستند. مانند رشته ها، اعداد هم غیر قابل تغییر می باشند. در زیر نمونه های معتبر مقادیر عددی در جاوا اسکریپت را مشاهده می کنید:

بولین (Boolean)

یک بولین در جاوا اسکریپت می تواند true یا false باشد. اگر یک عدد صفر باید، به صورت پیشفرض false است و همچنین زمانی که یک رشته خالی باشد، پیشفرض false است.

در زیر چند نمونه معتبر از بولین ها را مشاهده می کنید:

اشیاء (Objects)

جاوا اسکریپت مفهوم شیء را بسیار خوب پشتیبانی می کند.  شما می توانید یک شیء را  به صورت زیر ایجاد کنید:

شما می توانید property های یک شیء را با استفاده از نماد نقطه به صورت زیر بخوانید یا بنویسید:

آرایه ها (Arrays)

در جاوا اسکریپت، می توانید آرایه ها را به صورت زیر تعریف کنید:

یکی از Property های پر استفاده در آرایه ها، length می باشد که می توان در حلقه از آن استفاده کرد:

توابع (Functions)

یک تابع در جاوا اسکریپت، هم می تواند نام داشته باشد و هم می تواند به صورت ناشناس (Anonymous) تعریف شود. یک تابع که دارای نام است، به صورت زیر تعریف می شود:

یک تابع ناشناس به تقریبا مشابه با تابع دارای نام تعریف می شود و هیچ نامی برای آن مشخص نمی شود. یک تابع ناشناس می تواند به یک متغیر تخصیص داده شود و یا به عنوان یک پارامتر به یک تابع دیگر فرستاده شود. مانند نمونه زیر:

jQuery از تابع های ناشناس اغلب به صورت زیر استفاده می کند:

آرگومان ها (Arguments)

متغیر arguments در جاوا اسکریت، نوعی آرایه است که دارای خاصیت length می باشد. به مثال زیر توجه کنید:

متغیر arguments یم خاصیت دیگر به نام callee دارد که به تابعی که درون آن قرار دارد اشاره می کند. مثال:

مفهوم (Context)

کلمه کلیدی مشهور this در جاوا اسکریپت همه به Context جاری اشاره می کند. این Context در درون یک تابع می تواند بر اساس فراخوانی توابع تغییر کند. به مثال زیر توجه کنید:

در بخش اول کد کلمه کلیدی this به window.document اشاره دارد و در بخش دوم به div اشاره می کند.

شما می توانید با استفاده از متدهای درون ساخت call() و apply()، Context یک تابع را  زمانی که فراخوانی می شود، مشخص کنید.

تفاوت call() و apply()

تفاوت این دو متد در این است که متد call()، تمام آرگومان ها را از طریق arguments به تابع ارسال می کند در حالی که متد apply()، یک آرایه به عنوان arguments می پذیرد.

محدوده (Scope)

محدوه متغیر، ناحیه ای است که متغیر در آن تعریف شده است. متغیرهای جاوا اسکریپت فقط دو محدوده دارند:

  • متغیرهای سراسری (Global Variables): متغیر سراسری، در محدوده سراسری قرار می گیرد. به این معنی که در همه جای اسکریپت در دسترس است.
  • متغیرهای محلی (Local Variables): یک متغیر محلی تنها در محدوده ای که در آن تعریف شده اند (مثلا داخل یک تابع) در دسترس هستند. پارامترهای یک تابع در محدوده محلی قرار می گیرند.

توجه! زمانی یک متغیر محلی هم نام با یک متغیر سراسری تعریف می کنید، آن متغیر محلی بر متغیر سراسری اولویت دارد.

مثال زیر به خوبی این مسئله را نشان می دهد:

Callback

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

مثال:

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

برخی از callback ها نیاز دارند تا یک چیزی را به عنوان خروجی باز گردانند. شما می توانید این مقدار بازگشتی را تغییر دهید. برای نمونه، به منظور جلوگیری از ارسال فرم هنگام کلیک بر روی دکمه submit، می توانید به صورت زیر عمل کنید:

Closures

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

به مثال زیر توجه کنید:

در مثال بالا، توابع داخلی که قسمت return نوشته اند می توانند به متغیری که در خارج از محدوده آن ها تعریف شده است، دسترسی داشته باشند.

توابع درون ساخت (Built-in)

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

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

ردیفمتد و توضیحات
۱charAt()

کاراکتری که در index مشخص شده قرار دارد را باز میگرداند.

۲concat()

متن دو رشته را با ترکیب می کند و یک رشته جدید باز میگرداند.

۳forEach()

یک تابع را برای هر یک از عناصر آرایه فراخوانی می کند.

۴indexOf()

برای پیدا کردن موقعیت یک رشته یا کارارکتر در داخل یک رشته دیگر استفاده می شود. اگر پیدا نشود مقدار -۱ را باز میگرداند.

۵length()

طول یک رشته را باز میگرداند.

۶pop()

آخرین عنصر یک آرایه را حذف کرده و مابقی را را باز میگرداند.

۷push()

یک یا چند عنصر به انتهای یک آرایه اضافه می کند و آرایه جدید را باز می گرداند.

۸reverse()

ترتیب یک آرایه را برعکس می کند. یعنی اولین عنصر در جای آخرین عنصر قرار می گیرد و بلعکس.

۹sort()

عناصر یک آرایه را مرتب می کند.

۱۰substr()

کاراکترهای یک رشته را در index و تعداد مشخص باز میگرداند. مثلا substr(5, 3)، سه کاراکتری که در خانه ۵، ۶ و ۷ هستند را باز میگرداند.

۱۱toLowerCase()

کاراکترهای یک رشته را به حرف کوچک تبدیل می کند.

۱۲toString()

یک مقدار غیر رشته را به رشته تبدیل می کند. مثلا یک عدد را.

۱۳toUpperCase()

کاراکترهای یک رشته را به حرف بزرگ تبدیل می کند.

Document Object Model یا DOM

DOM یک ساختار درختی از عناصر مختلف HTML به صورت زیر است:

امتحان کنید

نتیجه:

نکات مربوط به ساختار درختی مثال بالا:

  • <html> اجداد همه عناصر دیگر است؛ به عبارت دیگر همه عناصر دیگر از نسل <html> هستند.
  • عنصر <head> و عنصر <body> علاوه بر این که از نسل <html> هستند، فرزندان <html> نیز محسوب می شوند.
  • به همین ترتیب عنصر <html> پدر عناصر <head> و <body> می باشد.
  • عنصر <p> به عنوان فزرند عنصر <div>، <body> و <html> می باشد. همچنین با سایر عناصر <p> رابطه برادری دارد.
ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است