آموزش طراحی سایت-آرایه ها در جاوا اسکریپت

امروز با پست جدیدی از سری پست های آموزش طراحی سایت همراه شما هستیم.

در این پست آرایه ها در جاوا اسکریپت را مورد بررسی قرار می دهیم.

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

با شناسه "demo"نمایش می دهیم. همان طور که در مثال زیر مشاهده می کنید، اولین خط ، آرایه ای به نام cars ایجاد می کند. دومین خط المانی که شناسه ی آن "demo"می باشد را یافته سپس آرایه را در "innerHTML" آن المان نمایش می دهد.

مثال:

 

نمونه یک

 

Saab,Volvo,BMW

 

 

var cars = ["Saab", "Volvo", "BMW"];

document.getElementById("demo").innerHTML = cars;

 

 

خودتان امتحان کنید. یک آرایه ایجاد کرده و مقادیری به آن تخصیص دهید.

 

نمونه دو

var cars = ["Saab", "Volvo", "BMW"];

فاصله و انتهای خط (line break) از هیچ اهمیتی برخوردار نیستند. یک تعریف (declaration) می تواند در چندین خط ادامه داشته باشد.

مثال:

 

نمونه سه

var cars = [

"Saab",

"Volvo",

"BMW"

];

توجه:

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

 

آرایه چیست ؟

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

var car1 = "Saab";‎

var car2 = "Volvo";‎

var car3 = "BMW";‎

چنانچه بخواهیم درون آیتم های فوق حلقه زده (آن ها را تکرار کرده) و ماشین مورد نظر را پیدا کنیم چه اتفاقی رخ می دهد؟ اگر تعداد ماشین ها 3 تا نه بلکه 300 تا بود چه اتفاقی رخ می داد؟ این مسئله با بهره گیری از آرایه حل می شود. یک آرایه همان طور که پیش تر ذکر کردیم قادر است چندین مقدار را تحت نام یکسان در خود ذخیره کرده و از طریق اندیس به آن مقادیر دسترسی پیدا کند.

ایجاد آرایه

استفاده از یک آرایه ی متنی (array literal) بهترین و نیز آسان ترین روش برای ایجاد یک آرایه ی جاوا اسکریپت می باشد.

 

دستور نگارش (syntax)

var array-name = [item1, item2, ...];‎

مثال:

var cars = ["Saab", "Volvo", "BMW"];‎

 

استفاده از کلید واژه ی new

مثال زیر نیز یک آرایه ایجاد کرده و به آن مقادیری را تخصیص می دهد.

مثال:

 

نمونه چهار

var cars = new Array("Saab", "Volvo", "BMW");

نکته:

دو مثال بالا هر دو یک کار یکسان را انجام می دهند. نیازی به استفاده از new Array() وجود ندارد. برای آسانی، قابلیت خوانایی بیشتر و نیز افزایش سرعت اجرا توصیه می کنیم از نمونه ی اول استفاده کنید.

 

دسترسی به المان های آرایه

برای دسترسی به المان مورد نظر در آرایه از شماره ی اندیس کمک می گیریم. دستور زیر نحوه ی دسترسی به مقدار اولین المان را نمایش می هد.

var name = cars[0];‎

دستور زیر اولین المان را اصلاح می کند.

cars[0] = "Opel";‎

توجه:

دقت داشته باشید که [0] اولین المان محسوب می گردد و [1] دومین شمارنده ی آرایه ها در جاوا اسکریپت از صفر آغاز می شود.

 

امکان داشتن چندین شی مختلف در یک آرایه

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

myArray[0] = Date.now;‎

myArray[1] = myFunction;‎

myArray[2] = myCars;

 

آرایه یک شی است

آرایه یک نوع خاص شی است. عملگر (operator) typeof در جاوا اسکریپت (برای آرایه) "object" بازمی گرداند. آریه برای دسترسی به المان های خود از شماره کمک می گیرد. به عنوان مثال person[0] المان John را باز می گرداند.

Arrayمثال:

 

نمونه پنج

var person = ["John", "Doe", 46];

اشیا با استفاده از اسم (name) به اعضای ("member") خود دستیابی پیدا می کنند. برای مثال person.firstName المانJohn را بازیابی می کند.

objectمثال:

 

نمونه شش

var person = {firstName:"John", lastName:"Doe", age:46};

 

خواص property ها (خواص) و method های (توابع) مربوط به آرایه

اگر به مثال زیر دقت کنید متوجه می شوید که length property تعداد المان های موجود در cars را برمی گرداند و تابع sort()، cars را به ترتیب حروف الفبا مرتب سازی (sort) می کند.

مثال:

var x = cars.length; // The length property returns ‎the number of elements in cars

var y = cars.sort(); // The sort() method sort cars in ‎alphabetical order

 

تشریح خاصیت length

دستور length property یک آرایه، طول یا تعداد المان های موجود در یک آرایه را باز گردانی می کند.

مثال:

 

نمونه هفت

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.length; // the length of fruits is 4

 

افزودن المان جدید به یک آرایه

آسان ترین روش برای افزورن یک element جدید به آرایه، استفاده از تابع (method) push می باشد.

مثال:

 

نمونه هشت

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.push("Lemon"); // adds a new element (Lemon) to fruits

 

همچنین می توان این کار را با بهره گیری از length property انجام داد.

مثال:

 

نمونه نه

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits

 

ایجاد یک حلقه در آرایه (تکرار المان های یک آرایه به تعداد دفعات معین)

در loop for مجموعه دستورالعمل ها به تعداد معلوم و مورد نیاز، تکرار می شوند. یکی از بهترین روش های تکرار المان های یک آرایه استفاده از حلقه ی بیان شده است.

مثال:

 

نمونه ده

var index;

var fruits = ["Banana", "Orange", "Apple", "Mango"];

for (index = 0; index < fruits.length; index++) {

text += fruits[index];

}

 

آرایه ی شرکت پذیر چیست (associative arrays)؟

بسیاری از زبان های برنامه نویسی کنونی از آرایه های با اندیس های نام گذاری شده پشتیبانی می کنند. آرایه هایی که اندیس های آن ها نام گذاری شده، آرایه های شرکت پذیر یا (hashes) associative arrays نامیده می شوند. جاوا اسکریپت از آرایه هایی که دارای named index (اندیس نام گذاری شده) هستند پشتیبانی نمی کند. در عوض این زبان از قابلیت numbered indexes (اندیس های شماره گذاری شده) پشتیبانی می کند.

مثال:

 

نمونه یازده

var person = [];

person[0] = "John";

person[1] = "Doe";

person[2] = 46;

var x = person.length; // person.length will return 3

var y = person[0]; // person[0] will return "John"

توجه:

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

مثال:

 

نمونه دوازده

var person = [];

person["firstName"] = "John";

person["lastName"] = "Doe";

person["age"] = 46;

var x = person.length; // person.length will return 0

var y = person[0]; // person[0] will return undefined

 

تشریح تفاوت بین آرایه (array) و شی (object)

همان طور که پیش تر شرح داده شد، در جاوا اسکریپت آرایه ها از اندیس های شماره دار استفاده می کنند. اشیا (object) نیز از اندیس های نام دار (named indexes) استفاده می کنند.

 

چه زمانی باید از array استفاده کرد و چه زمانی از object؟

جاوا سکرپیت JavaScript از آرایه های شرکت پذیر (associative array) پشتیبانی نمی کند. اگر می خواهید اسم المان ها از نوع رشته (نوشته یا متن) باشد، در آن صورت به طور حتم باید از object استفاده کنید. چنانچه مایلید اسم المان از نوع عددی یا شماره باشد، باید از array استفاده کنید. تا حد ممکن سعی کنید از بکار گیری constructor (سازنده) پیش فرض و توکار ()JavaScript،new Array خودداری کنید. بجای استفاده از روش منسوخ بالا می توانید از روش نوین [] بهره بگیرید. هر دو دستور کاملا متفاوت نام برده، آرایه ای تهی به نام points ایجاد می کنند.

var points = new Array(); // Bad

var points = []; // Good ‎

بار دیگر هر دو دستور آرایه ای ایجاد می کنند که دربردارنده ی 6 عدد است.

 

نمونه سیزده

var points = new Array(40, 100, 1, 5, 25, 10) // Bad

var points = [40, 100, 1, 5, 25, 10]; // Good

استفاده از کلیدواژه ی new برای ایجاد آراِیه ی جدید به دلیل طولانی و پیچیده تر کردن کد منسوخ تلقی تلقی می گردد.

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

ببینید در صورت حذف کردن یکی از المان ها چه اتفاقی رخ می دهد!

 

نمونه چهارده

var points = new Array(40);       // Creates an array with 40 undefined elements !!!!!

 

چگونه یک آرایه را تشخیص دهیم؟

یکی از سوال هایی که به طور متدوال مطرح می شود این است که چگونه می توان تشخیص داد آیا یک متغیر آرایه هست یا خیر؟ یکی از مشکل هایی که با آن مواجه می شویم، این است که عملگر typeof "object" باز می گرداند.

 

نمونه پانزده

var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits; // typeof returns object

عملگر مزبور به این خاطر "object" برمی گرداند که یک JavaScript array یا آرایه ی جاوا اسکریپت خود یک شی است. جهت رفع این مشکل توصیه می کنیم isArray() function خود را ایجاد کنید.

 

نمونه شانزده

function isArray(myArray) {

return myArray.constructor.toString().indexOf("Array") > -1;

}

تابع function (تابع) بالا همیشه در صورتی که آرگومان مورد نظر یک آرایه باشد، مقدار true باز می گرداند و یا اگر بخواهیم دقیق تر توضیح بدیم اگر نوع ورودی تابع از نوع "[object array]" باشد مقدار صحیح (true) برمی گرداند.

آموزش طراحی سایت ادامه دارد

آموزش طراحی سایت-اعداد در جاوا اسکریپت

سلام عزیزان با آموزش جاوا اسکریپت از دوره آموزش طراحی سایت در خدمت شما دوستان هستیم

 

آموزش اعداد در جاوا اسکریپت

 

اعداد در جاوا اسکریپت

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

مثال:

var x = 34.00; // A number with decimals

var y = 34; // A number without decimals‎

اعداد بسیار کوچک یا کوچک را می توان با نماد علمی نوشت

مثال:

var x = 123e5; // 12300000

var y = 123e-5; // 0.00123‎

اعداد جاوا اسکریپت همیشه 64 بیتی و با ممیز شناور (در مبنای 10) هستند. برخلاف بسیاری از زبان های برنامه نویسی، جاوا اسکریپت انواع عددی از قبیل : integer (عدد صحیح)، short، long و floating-point تعریف نمی کند و این نوع اعداد در جاوا اسکریپت استفاده نمی شوند. در جاوا اسکریپت اعداد همیشه به صورت ممیز شناور با دو رقم اعشار (double precision floating-point number) ذخیره می شوند که در حقیقت دنبال رو استاندارد بین المللی IEEE 754 می باشد. در این نوع قالب دهی یا فرمت اعداد در 64 بیت ذخیره می گردند، به گونه ای که کسر (fraction) در بیت های 0 تا 51، نما یا توان (exponent) در بیت های 52 تا 62 و علامت (sign) در بیت 63 ذخیره می گردد.

 

دقت اعشار (precision)

اعداد صحیح integer در حداکثر 15 رقم و همیشه به صورت دقیق مطرح می شوند.

 

 

مثال:

 

نمونه یک

<script>

function myFunction() {

var x = 999999999999999;

var y = 9999999999999999;

document.getElementById("demo").innerHTML = x + "<br>" + y;

}

</script>

حداکثر تعداد اعشار، 17 رقم است، اما حساب ممیز شناور همیشه 100% دقیق نیست.

 

نمونه دو

<script>

function myFunction() {

var x = 0.2 + 0.1;

document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;

}

</script>

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

مثال:

 

نمونه سه

function myFunction() {

var x = (0.2 * 10 + 0.1 * 10) / 10;

document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;

}

 

آموزش طراحی سایت : اعداد شانزده شانزدهی (hexadecimal)

جاوا اسکریپت ثابت های عددی (اعداد ثابتی) را که با 0x شروع می شوند به عنوان اعداد در مبنای شانزده در نظر می گیرد (تفسیر می کند).

مثال:

 

نمونه چهار

function myFunction() {

document.getElementById("demo").innerHTML = "0xFF = " + 0xFF;

}

توجه:

هیچگاه یک عدد را با صفر مقدم ننویسید (مانند این مثال 07(.

بعضی از ویرایش های جاوا اسکریپت یک عدد را در صورتی که با صفر مقدم نوشته شوند، به صورت octal / هشت هشتی تفسیر می کند. به صورت پیش فرض، جاوا اسکریپت اعداد را به صورت اعشاری و در مبنای 10 نمایش می دهد، اما شما می توانید با استفاده از تابع toString() اعداد را به صورت مبنای 16، مبنای 8 یا مبنای 2 (دودئی) (به عنوان خروجی) نمایش دهید.

مثال:

 

نمونه پنج

function myFunction() {

var myNumber = 128;

document.getElementById("demo").innerHTML = "128 = " +

myNumber + " Decimal, " +

myNumber.toString(16) + " Hexadecimal, " +

myNumber.toString(8) + " Octal, " +

myNumber.toString(2) + " Binary."

}

 

Infinity (مقدار بی نهایت)

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

مثال:

 

نمونه شش

function myFunction() {

var myNumber = 2;

var txt = "";

while (myNumber != Infinity) {

myNumber = myNumber * myNumber;

txt = txt + myNumber + "<br>";

}

document.getElementById("demo").innerHTML = txt;

}

در صورت تقسیم عددی بر 0 نیز مقدار بی نهایت برگردانده می شود.

مثال:

 

نمونه هفت

function myFunction() {

var x = 2 / 0;

var y = -2 / 0;

document.getElementById("demo").innerHTML = x + "<br>" + y;

}

توضیح : infinity یک عدد است : typeOf infinity یک عدد برمی گرداند.

مثال:

 

نمونه هشت

function myFunction() {

document.getElementById("demo").innerHTML = typeof Infinity;

}

عبارت NaN- عبارت رزرو شده ی Not a Number

عبارت NaN یک کلمه ی رزرو شده (reserved word) است که بیان می کند یک مقدار از نوع عدد نیست. چنانچه سعی کنید با رشته ی غیر عددی عملیات محسابه ی انجام دهید، جاوا اسکریپت عبارت رزرو شده ی Not a Number را بر می گرداند.

 

نمونه نه

document.getElementById("demo").innerHTML = 100 / "Apple"

اما چنانچه رشته دربردارنده ی یک مقدار عددی باشد، نتیجه نیز یک عدد خواهد بود.

مثال:

 

نمونه ده

document.getElementById("demo").innerHTML = 100 / "10";

می توانید از تابع سراسری (global function) isNaN() برای کشف این مسئله که آیا مقدار یک عدد است یا خیر استفاده کنید.

مثال:

 

نمونه یازده

var x = 100 / "Apple";

document.getElementById("demo").innerHTML = isNaN(x);

اگر در محاسبات ریاضی از NaN استفاده کنید، نتیجه نیز NaN خواهد بود.

مثال:

 

نمونه دوازده

var x = NaN;

var y = 5;

document.getElementById("demo").innerHTML = x + y;

 

نمونه سیزده

var x = NaN;

var y = "5";

document.getElementById("demo").innerHTML = x + y;

دستور NaN یک عدد است : typeOf NaN عدد بازمی گرداند.

مثال:

 

نمونه چهارده

document.getElementById("demo").innerHTML = typeof NaN;

اعداد می توانند شی باشند. به طور معمول اعداد مقادیر اولیه ی هستند که از literal ها ایجاد می گردند.

var x = 123‎

اما اعداد را می توان با استفاده از کلیدواژه ی new به عنوان شی (object) تعریف کرد، بدین ترتیب

var y = new Number(123)‎

مثال:

 

نمونه پانزده

document.getElementById("demo").innerHTML = typeof x + "<br>" + typeof y;

از ایجاد شی number خودداری کنید، زیرا که سرعت اجرا را کاهش داده و عوارض جانبی فراوانی را منجر می شوند. عملگر == برای اعدادی بکار می رود که از لحاظ مقدار برابر باشند.

مثال:

 

نمونه شانزده

var x = 500; // x is a number

var y = new Number(500); // y is an object

document.getElementById("demo").innerHTML = (x == y);

 

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

 

نمونه هفده

var x = 500; // x is a number

var y = new Number(500); // y is an object

document.getElementById("demo").innerHTML = (x === y);

بخاطر داشته باشید که مقایسه ی اشی با هم امکان پذیر نمی باشد.

مثال:

 

نمونه هجده

var x = 500; // x is a number

var y = new Number(500); // y is an object

document.getElementById("demo").innerHTML = (x === y);

 

خواص (properties) و متدهای مربوط به اعداد در جاوا اسکریپت

مقادیر اولیه ی مثل 3.14 یا 2014، نمی توانند متد یا خاصیت داشته باشند (زیرا که در اصل این ها شی نیستند که بتوانند خاصیت یا متد داشته باشند). اما در رابطه با جاوا اسکریپت این امر صادق نیست. به این خاطر که زبان بیان شده هنگام اجرای متدها و خصوصیت ها با مقادیر اولیه به مثابه ی شی برخورد می کند. از این رو مقادیر اولیه همچنان قادر هستند در زبان جاوا اسکریپت متد و خاصیت داشته باشند.

 

مثال:

 

نمونه نوزده

document.getElementById("demo").innerHTML = Number.MAX_VALUE;

خاصیت های مربوط به اعداد در جاوا اسکریپت متعلق به دبرگیرنده یا wrapper شی number هستند که خود Number نامیده می شوند. دسترسی به خاصیت های نام برده تنها از این طریق ممکن می باشد.

Number.MAX_VALUE‎

استفاده از myNumber.MAX_VALUE در جایی که myNumber یک متغیر، عبارت یا مقدار است، باعث برگردانده شدن undefined می شود.

مثال:

 

نمونه بیست

var x = 6;

document.getElementById("demo").innerHTML = x.MAX_VALUE;

آموزش طراحی سایت ادامه دارد

آموزش طراحی سایت-event در جاوا اسکریپت

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

 

آموزش رخدادادها event در جاوا اسکریپت

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

 

رخدادهای HTML در آموزش طراحی سایت

رخداد HTML ممکن است چیزی باشد که هم از طرف مرورگر و هم از طرف کاربر روی می دهد. نمونه هایی از رخدادهای HTML به ترتیب زیر می باشند. بار گذاری یک صفحه ی وب HTMLبه پایان رسیده یکی از فیلدهای ورودی (input field) HTML تغییر یافته یا اصلاح شده یک دکمه ی HTML روی صفحه کلیک شده اغلب پس از اینکه رویدادی (event) رخ می دهد، عملیات خاصی را می خواهیم پیاده کنیم. جاوا اسکریپت به مجرد اینکه رخدادی را شناسایی کند، اجازه ی اجرای کد مورد نظر را به برنامه نویس می دهد. HTML به خصیصه های event handler (کنترل گر و مدیریت کننده ی رخداد ها) که به کد جاوا اسکریپت (javascript code) الحاق شده اند اجازه ی متصل یا ضمیمه شدن به عناصر HTML را می دهد.

 

با تک کوتیشن (' ')

<some-html-element some-event='some JavaScript'>

 

با دابل کوتیشن (" ")

<some-html-element some-event="some JavaScript">

در مثال زیر خصیصه (attribute) onClick (به همراه کد)، به المان دکمه (تگ </button>) افزوده می شود.

مثال:

 

نمونه یک

<button onclick="getElementById('demo').innerHTML=Date()">The time is?</button>

همان طور که در مثال بالا مشاهده می کنید، کد جاوا اسکریپت محتوای المان مربوط را به وسیله ی شناسه ی "demo" تغییر می دهد. حال توجه خود را به نمونه ی بعدی جلب کنید که در آن کد محتوای المان خود را با استفاده از this.innerHTML تغییر می دهد.

مثال:

 

نمونه دو

<button onclick="this.innerHTML=Date()">The time is?</button>

نکته:

کد جاوا اسکریپت معمولا چندین خط ادامه دارد. رایج تر این است (بیشتر می بینید) که خصیصه ی رخدادها (event attribute) توابع را فراخوانی کنند.

مثال:

 

نمونه سه

<script>

function displayDate() {

document.getElementById("demo").innerHTML = Date();

}

</script>

 

رخدادهای معمول و پرکاربرد HTML

 

جاوا اسکریپت چه نقشی را ایفا می کند؟

اداره کننده ی رخدادها Event handler ها به منظور کنترل، بررسی، تایید درستی ورودی کاربر (user input) و عملیاتی که توسط کاربر انجام می شود و همچنین عملیات مرورگر مورد استفاده قرار می گیرد. کارهایی که باید با هر بار بارگذاری صفحه، انجام شود. کارهایی که باید با بسته شدن صفحه / هنگامی که صفحه بسته می شود، انجام گیرد. عملیاتی که باید پس از اینکه کاربر یک دکمه را فشار داد، پیاده شوند. محتوا (content) که باید به هنگام وارد شدن داده توسط کاربر، بررسی و تایید درستی شود و غیره..... روش های مختلفی هست که از طریق آن ها می توان به جاوا اسکریپت امکان همکاری و انجام عملیات با رخداد ها را داد، از جمله خصیصه های رخداد HTML خود می توانند (به طور) مستقیم کد جاوا اسکریپت را اجرا کنند. خصیصه های رخداد HTML می توانند توابع جاوا اسکریپت را صدا بزنند.(فراخوانی کنند) برنامه نویس می تواند توابع اداره کننده ی رخداد خود را به المان های HTML تخصیص دهد. برنامه نویس می تواند از ارسال، مدیریت و دستکاری رخدادها جلوگیری کند و غیره.....

 

 

آموزش حوزه ی دسترسی در جاوا اسکریپت / JavaScript Scope

 

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

 

متغیرهای محلی جاوا اسکریپت

متغیرهایی که داخل یک تابع تعریف می شوند، در واقع متغیرهای محلی / local آن تابع محسوب می شوند. متغیرهای محلی (local variables)، حوزه دسترسی یا scope آن ها نیز محلی تلقی می گردد، بدین معنا که دسترسی به آن ها تنها داخل خود تابع امکان پذیر می باشد.

مثال:

 

نمونه یک

<script>

myFunction();

document.getElementById("demo").innerHTML =

"I can display " + typeof carName;

 

function myFunction() {

var carName = "Volvo";

}

</script>

 

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

 

متغیرهای سراسری / عمومی (global variables)

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

مثال:

 

نمونه دو

var carName = "Volvo";

myFunction();

 

function myFunction() {

document.getElementById("demo").innerHTML =

"I can display " + carName;

}

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

مثال:

 

نمونه سه

<script>

myFunction();

document.getElementById("demo").innerHTML =

"I can display " + carName;

 

function myFunction() {

carName = "Volvo";

}

</script>

 

طول عمر متغیرها (Lifetime of varabiles)

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

 

آرگومان های تابع (function arguments)

آرگومان (پارامتر) های یک تابع به عنوان متغیرهای محلی داخل آن تابع عمل می کنند.

 

متغیرهای سراسری در HTML

حوزه دسترسی سراسری (global scope) در جاوا اسکریپت شامل کل محیط جاوا اسکریپت می شود (از هرجای جاوا اسکریپت یا نقطه ی صفحه می توان به متغیرها دسترسی پیدا کرد). در HTML، حوزه ی عمومی یا سراسری (Global Scope) شی window را شامل می شود: تمامی متغیرهای سراسری متعلق به شی window هستند و از این رو می توان از هر نقطه ی از شی window به متغیرهای عمومی دسترسی پیدا کرد.

مثال:

 

نمونه چهار

<script>

myFunction();

document.getElementById("demo").innerHTML =

"I can display " + window.carName;

 

function myFunction() {

carName = "Volvo";

}

</script>

توجه:

آیا می دانستید که متغیرها (یا توابع) سراسری می تواند متغیرها و توابع متعلق به شی window را بازنویسی / overwrite کنند؟ هر تابعی، حتی خود شی window، قادر است متغیرها و توابع سراسری را بازنویسی کند.

در قسمت بعد رشته ها در جاوا اسکریپت را فرا می گیرید