آموزش جی کوئری – قسمت اول – مقدمه

آموزش جی کوئری

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

رشته (String)

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

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

“This is JavaScript String” ‘This is JavaScript String’ ‘This is “really” a JavaScript String’ “This is ‘really’ a JavaScript String”

اعداد (Numbers)

اعداد در جاوا اسکریپت ۶۴ بیتی و اعشاری double و با فرمت IEEE 754 هستند. اعداد نیز مانند رشته ها تغییر ناپذیر هستند.

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

5350 120.27 0.26

بولین Boolean

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

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

true // true false // false 0 // false 1 // true “” // false “hello” // true

اشیاء (Objects)

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

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)
یک تابع در جاوا اسکریپت می تواند با نام یا بی نام باشد. یک تابع نام گذاری شده یا با نام می تواند با استفاده از کلمه کلیدی functionبه صورت زیر تعریف شود:

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

یک تابع بی نام را می توان با روشی مشابه تابع معمولی تعریف کرد اما آن نباید نامی داشته باشد.
یک تابع بی نام را می توان به یک متغیر اختصاص داده و یا به یک متد مانند مثال زیر داد:

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

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

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

آرگومان ها (Arguments)
آرگومان های جاوا اسکریپت از نوع آرایه است که ویژگی length دارند. مثال زیر این موضوع را به خوبی توضیح می دهد:

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

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

آرگومان های اشیا، ویژگی یا خصوصیت (property) نیز نامیده می شوند، که به داخل تابع ارجاع داده می شوند. به عنوان مثال:

function func() {
   return arguments.callee; 
}
func();                // ==> func

محتوا (Context)
کلمه کلیدی معروف جاوا اسکریپت، همیشه به محتوای فعلی اشاره دارد. در یک تابع این محتوا می تواند تغییر کند، بسته به اینکه تابع چگونه فراخوانی می شود:

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

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

شما می توانید محتوایی را برای یک فراخوانی تابع با استفاده از ایجاد توابع در متدهای call() و apply() مشخص کنید.
تفاوت میان آنها این است که چگونه آنها آرگومان ها را منتقل می کنند. 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)
محدوده ی یک متغیر منطقه از برنامه شما است که در آن تعریف شده است. متغیر جاوا اسکریپت فقط دو محدوده دارد.

متغیر های سراسری (Global Variables)
یک متغیر سراسری، دامنه یا محدوده سراسری دارد که به معنی آن است که در همه جای کد جاوا اسکریپت شما تعریف شده است.

متغیرهای محلی (Local Variables)
یک متغیر محلی تنها در یک تابع که در آن تعریف شده است قابل مشاهده خواهد بود. پارامترهای تابع همیشه به آن تابع محلی هستند.

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

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

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

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

سیستم رویداد jQuery از callbacks در همه جا استفاده می کند به عنوان مثال:

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

بسیاری از callbacks، آرگومان ها و محتوایی را فراهم می کنند. در مثال کنترل رویداد ، callbacks با یک آرگومان و یک رویداد فراخوانی می شود.

برخی از callbacks نیاز دارند تا چیزهایی را برگردانند، برگرداندن مقدار بازگشتی اختیاری است. برای جلوگیری از ارسال فرم، یک کنترل کننده رویدادsubmit می تواند مقدار false را به شرح زیر بازگشت دهد:

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

Closures
Closure ها هر زمان که یک متغیر در خارج از محدوده فعلی تعریف شود، از درون بعضی دامنه درونی قابل دسترسی باشد، ایجاد می شوند.
مثال زیر نشان میدهد که چگونه متغییر counter از داخل توابع create ، increment و print قابل مشاهده است، اما در خارج از آنها قابل مشاهده نیست –

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

این الگو به شما اجازه می دهد تا اشیاء با متد هایی ایجاد کنید که بر روی داده هایی کار می کنندکه از خارج قابل مشاهده نیست. لازم به ذکر است که پنهان کردن اطلاعات مبنای برنامه نویسی شی گرا است.
پروکسی الگو (Proxy Pattern)
پروکسی یک شی است که می تواند برای کنترل دسترسی به شی دیگری مورد استفاده قرار گیرد. پروکسی همان رابط را پیاده سازی می کند مانند این شی دیگر و هر متدی که آن را فراخوانی می کند انتقال می دهد. این شی دیگر اغلب real subject نامیده می شود.
پروکسی می تواند در محل real subject معرفی شود و به آن اجازه دهد از راه دور قابل دسترسی باشد. ما می توانیم متد setArray jQuery را در یک closure ذخیره کنیم و آن را بصورت زیر باز نویسی کنیم –

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

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

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

توابع آماده (Built-in Functions)
جاوا اسکریپت مجموعه ای مفید از توابع آماده را دارد. این متدها می توانند برای دستکاری رشته ها، اعداد و تاریخ استفاده شوند.

توابع مهم جاوا اسکریپت :

S.N. Method & Description
۱ charAt()

Returns the character at the specified index.

۲ concat()

Combines the text of two strings and returns a new string.

۳ forEach()

Calls a function for each element in the array.

۴ indexOf()

Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.

۵ length()

Returns the length of the string.

۶ pop()

Removes the last element from an array and returns that element.

۷ push()

Adds one or more elements to the end of an array and returns the new length of the array.

۸ reverse()

Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.

۹ sort()

Sorts the elements of an array.

۱۰ substr()

Returns the characters in a string beginning at the specified location through the specified number of characters.

۱۱ toLowerCase()

Returns the calling string value converted to lower case.

۱۲ toString()

Returns the string representation of the number’s value.

۱۳ toUpperCase()

Returns the calling string value converted to uppercase.

مدل شیء Document
مدل شیء Document یک ساختار درختی از عناصر مختلف HTML به شرح زیر است –

html>

   <head>
      <title>The jQuery Example</title>
   </head>
	
   <body>

<div>


This is a paragraph.



This is second paragraph.



This is third paragraph.

      </div>

   </body>
	
</html>

کد بالا نتیجه ی زیر را تولید خواهد کرد –

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

برچسب ها

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

0 دیدگاه در “آموزش جی کوئری – قسمت اول – مقدمه”

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کد امنیتی را در کادر زیر بنویسید *