مقدمات جی کوئری

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

اگر معنای جی کوئری را نمیدانید به این مقاله مراجعه کنید.

String (رشته)

رشته در JavaScript یک شیء تغییر ناپذیر است. که هیچ کدام ، یک یا چند شخصیت را شامل نمی شود.

در زیر نمونه های معتبری از یک رشته JavaScript را مشاهده میکنید.

در مقدمات جی کوئری باید به این موضوع اشاره داشت که تمام موارد جاوا اسکریپت را می توان در جی کوئری استفاده کرد.

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

Numbers (اعداد)

اعداد موجود در JavaScript مقادیر IEEE 754 با فرمت 64 بیتی با دقت دو برابر هستند. آنها تغییرناپذیر هستند ، دقیقاً همانند رشته ها.

در زیرنمونه های معتبر از شماره های JavaScript وجود دارد.

5350
120.27
0.26

Boolean (صحیح / غلط)

یک Boolean در JavaScript می تواند true یا false درست یا نادرست باشد. اگر عدد صفر باشد ، به صورت پیش فرض غلط است. اگر یک باشد صحیح است.

در زیر نمونه های معتبری از JavaScript Boolean وجود دارد.

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

Objects (اشیاء)

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

var emp = {
   name: "Zara",
   age: 10
};

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

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

Arrays (آرایه ها)

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

var x = [];
var y = [1, 2, 3, 4, 5];

یک آرایه دارای  )lengthطول )خاص است که برای تکرار مفید است.

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

Functions (توابع)

یک عملکرد در JavaScript می تواند نامگذاری یا ناشناس باشد. یک تابع به نام زیر را می توان با استفاده از کلید واژه تابع به شرح زیر تعریف کرد.

function named(){
   // do some stuff here
}

یک عملکرد ناشناس را می توان به روش مشابه به عنوان یک عملکرد عادی تعریف کرد اما نامی ندارد.

var handler = function (){
   // do some stuff here
}

JQuery از توابع ناشناس بسیار غالباً به شرح زیر استفاده می کند.

$(document).ready(function(){
   // do some stuff here
});

Arguments (استدلال)

آرگومان های متغیر JavaScript نوعی آرایه است که دارای خاصیت طول است.

مثال زیر آن را بسیار خوب توضیح می دهد.

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string"

همچنین آرگومان دارای یک ویژگی callee است که به عملکردی که در آن قرار دارید اشاره دارد.

function func() {
   return arguments.callee; 
}

func();                // ==> func

Context (متن نوشته)

کلید واژه معروف JavaScript این همیشه به متن فعلی اشاره دارد. در یک تابع ، این متن بسته به نحوه فراخوانی عملکرد ، می تواند تغییر کند.

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

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

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

function scope() {
   console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

Scope (محدوده)

دامنه متغیر منطقه برنامه شماست که در آن تعریف شده است. متغیر JavaScript تنها دو دامنه خواهد داشت.

• Global Variablesمتغیرهای جهانی – یک متغیر جهانی دامنه جهانی دارد به این معنی که در همه جا در کد JavaScript شما تعریف شده است.
• Local Variablesمتغیرهای محلی – یک متغیر محلی فقط در یک تابع که در آن تعریف شده است قابل مشاهده خواهد بود. پارامترهای عملکرد همیشه محلی برای آن عملکرد هستند.

در بدن یک تابع ، یک متغیر محلی بر یک متغیر جهانی با همین نام ارجحیت دارد.

var myVar = "global";     // ==> Declare a global variable

function ( ) {
   var myVar = "local";   // ==> Declare a local variable
   document.write(myVar); // ==> local
}

Callback (پاسخ به تماس)

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

به عنوان مثال سیستم رویداد jQuery از چنین تماس های برگشتی به عنوان مثال در همه جا استفاده می کند.

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

بیشتر تماسهای برگشتی ، استدلال و زمینه ارائه می دهند. در مثال مدیریت رویداد ، پاسخ به تماس با یک آرگومان ، یک رویداد (فراخوانی) خوانده می شود.

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

$("#myform").submit(function() {
   return false;
});

Closures (بستن)

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

function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

این الگوی به شما امکان می دهد اشیاء را با روش هایی کار کنید که روی داده هایی کار می کنند که برای جهان خارج قابل مشاهده نیستند. لازم به ذکر است که  data hidingاساس برنامه نویسی شی گرا است.

Proxy Pattern (الگوی پروکسی)

پروکسی شیئی است که می تواند برای کنترل دسترسی به یک شی دیگر مورد استفاده قرار گیرد. این رابط کاربری مشابه این شیء را پیاده سازی می کند و فراخوانی هر روش را برای آن می گذرد. این شیء دیگر غالباً موضوع واقعی خوانده می شود.

یک پروکسی را می توان به جای این موضوع واقعی فوری کرد و به آن دسترسی از راه دور داد. ما می توانیم روش setArray jQuery را در یک بسته ذخیره کرده و آن را به شرح زیر رونویسی کنیم.

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };
	
})();

موارد فوق برای مخفی کردن متغیر پراکسی ، کد آن را در یک تابع پیچیده می کند. سپس پروکسی تمام تماسها را به متد وارد می کند و تماس را به روش اصلی واگذار می کند. استفاده از اعمال (this, arguments)تضمین می کند که تماس گیرنده قادر به مشاهده تفاوت بین روش اصلی و پراکسی نخواهد بود.

Built-in Functions (توابع داخلی)

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

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

Sr.No.	Method & Description
1	charAt() کاراکتر را در فهرست مشخص شده برمی گرداند.
2	concat() متن دو رشته را ترکیب می کند و رشته جدید را برمی گرداند.
3	forEach() تابعی را برای هر عنصر موجود در آرایه فراخوانی می کند.
4	indexOf() این شاخص را در اولین بار از مقدار مشخص شده یا در صورت عدم یافتن ، در درون شیء زنگ زنگ قرار می دهد.
5	length() طول رشته را برمی گرداند.
6	pop() آخرین عنصر را از یک آرایه حذف کرده و آن عنصر را برمی گرداند.
7	push() یک یا چند عنصر را به انتهای یک آرایه اضافه می کند و طول جدید آرایه را برمی گرداند.
8	reverse() ترتیب عناصر یک آرایه را برعکس می کند – اولین تبدیل به آخرین می شود و آخرین به اولین می رسد.
9	sort() عناصر یک آرایه را مرتب می کند.
10	substr() کاراکترها را در یک رشته در ابتدا در مکان مشخص شده از طریق شماره مشخص شده کاراکترها برمی گرداند.
11	toLowerCase() مقدار رشته فراخوانده شده تبدیل شده به پرونده کوچک را برمی گرداند.
12	toString() بازنویسی رشته مقدار عدد را برمی گرداند.
13	toUpperCase() مقدار رشته تماس را به حروف بزرگ تبدیل می کند.

Document Model Object

Document Object Model ساختار درختی از عناصر مختلف HTML به شرح زیر است.

<html>
   <head>
      <title>The jQuery Example</title>
   </head>
	
   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

نتیجه زیر را خواهد داد:

This is a paragraph.
This is second paragraph.
This is third paragraph.

در زیر نکات مهم در مورد ساختار درخت فوق

• تگ <html> جد تمام عناصر دیگر است. به عبارت دیگر ، همه عناصر دیگر فرزندان <html> هستند.
• عناصر <head> و <body> نه تنها فرزندان بلکه فرزندان <html> هستند.
• به همین ترتیب ، <html> علاوه بر اینکه جد <head> و <body> بودن است ، پدر و مادر آنها نیز هستند.
• عناصر <p> کودکان (و فرزندان) <div> ، فرزندان <body> و <html> و خواهران و برادران عناصر <p> هستند.

در ضمن در یادگیری مفاهیم مقدمات جی کوئری ، درک DOM بسیار مفید است.

منبع : tutorialspoint

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