خانه آموزش زبان جاوااسکریپت آموزش JS مقدماتی کار با متغیرها یا Variables در جاوااسکریپت

کار با متغیرها یا Variables در جاوااسکریپت

توسط

۱۳۹۹-۰۶-۳۱

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

کار با متغیرها یا Variables در جاوااسکریپت

Free-Learn

آنچه در این جلسه میخوانید :

1 کار با متغیرها یا Variables در جاوااسکریپت
2 اعلام یا ایجاد یا Declaring کردن متغیرها
3 نحوه مقدار دادن به متغیرها
4 نحوه تعریف یا انتخاب نام متغیرها
5 مثال های آنلاین از تعریف متغیرها
6 دوباره اعلام یا Re-Declaring کردن متغیرها
7 دامنه یا Scope در جاوااسکریپت
8 کلمات کلیدی let و const چیست؟

کار با متغیرها یا Variables در جاوااسکریپت

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

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

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

Free-Learn

اعلام یا ایجاد یا Declaring کردن متغیرها

به تعریف یا ایجاد کردن یک متغیر میگن Declaring ، که شکل کلی برای تعریف متغیر در زبان جاوااسکریپت بصورت زیر می باشد :

سعی کنید همیشه متغیرهاتون رو در ابتدا ( همون اول ) برنامه تعریف نمایید تا از ایجاد هرگونه مشکل در اجرای برنامه جلوگیری شود.

روش اول برای تعریف متغیر با استفاده از کلمه کلیدی var » جدا جدا و هر کدوم در یک خط

var Name1;
var Name2;
var Name[n];

var Name1;

var Name2;

var Name[n];

روش دوم » بصورت فشرده پست سرهم ( با استفاده از کاما , متغیرها از همدیگه جدا میشن )

var Name1,Name2,Name[n] ;

1	var Name1,Name2,Name[n] ;

مثال شماره ۱ : تعریف ۳ عدد متغیر ( از طریق روش اول )

var a;
var b;
var c;

var a;

var b;

var c;

مثال شماره ۲ : تعریف ۳ عدد متغیر ( از طریق روش دوم ) – برای جداکردن متغیرها باید بین متغیرها کاما ( , ) بزاریم

var a , b , c ;

1	var a , b , c ;

Free-Learn

نحوه مقدار دادن به متغیرها

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

تعریف مستقیم مقدار
تعریف غیر مستقیم مقدار
تعریف فشرده مقدار

مثال شماره ۱ : تعریف مستقیم مقدار

var a = 2;
var b = 3;
var c = a + b;

var a = 2;

var b = 3;

var c = a + b;

خب در خط اول متغیری بنام a با مقدار ۲ تعریف کردیم و در خط دوم متغیر b با مقدار ۳ و در نهایت در خط آخر گفتیم حاصل جمع a و b ریخته بشه تو c

مثال شماره ۲ : تعریف غیر مستقیم مقدار ( این مثال هیچ فرقی با مثال بالا ندارد و یکی هستند )

var a;
var b;
var c;
a = 2;
b = 3;
c = a + b;

var a;

var b;

var c;

a = 2;

b = 3;

c = a + b;

در این مثال اول اومدیم متغیرهارو تعریف کردیم و بعدش بهشون مقدار دادیم و در نهایت گفتیم حاصل جمع a و b ریخته بشه تو متغیر c

مثال شماره ۳ :تعریف فشرده متغیرها بهمراه مقادیر ، این مثال با مثال های شماره ۱ و ۲ هیچ فرقی ندارد و یکی هستند، فقط روش نوشتن فرق میکند وگرنه ۳ تاش یکارو انجام میدن.

var a=2 , b=3 , c = a + b;

1	var a=2 , b=3 , c = a + b;

Free-Learn

نحوه تعریف یا انتخاب نام متغیرها

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

میگن باید نام یک متغیر ( Unique Name ) باشه ، یعنی منظورش اینه که نام ها باید منحصربفرد باشند ، یعنی اگه نامی برای یک متغیر تعریف میکنیم باید اون نام در تمام برنامه یکتا ( منحصربفرد ) باشه، چون اگه مثلا نام ۲ تا متغیر شبیه بهمدیگه باشه میبینی این ۲ متغیر با هم ترکیب میشن و خروجی یکی میشه.

در مثال های بالا خب دیدیم که ما مثلا متغیرهایی بنام a و b و c به راحتی تعریف کردیم و این نشون میده که نام متغیر میتونه یه نام دلخواه خودتون باشه و حتما اینجوری نیست که مثلا باید a باشه.

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

نام متغیر باید از حروف کوچک یا بزرگ انگلیسی ( a-z یا A-Z ) باشد
نام متغیر میتونه شامل اعداد ( ۰ تا ۹ ) باشد، ولی اعداد نباید در ابتدای نام متغیر باشند
نام متغیر میتونه با علامت _ ( زیر خط یا Underscore ) شروع بشه
نام متغیر میتونه با علامت $ ( دلار ) شروع بشه
نام متغیر به حروف کوچک و بزرگ حساس می باشد. ( یعنی A با a براش متفاوته )
نام متغیر نمیتونه از کلمات کلیدی یا کلمات رزرو شده خوده جاوااسکریپت باشه

چندین مثال از حالت های مختلف تعریف نام متغیر :

var Test; // قابل قبول می باشد
var test; // قابل قبول می باشد
var test2020; // قابل قبول می باشد
var _test; // قابل قبول می باشد
var $test; // قابل قبول می باشد

var 2test; // قابل قبول نمی باشد
var $$test; // قابل قبول نمی باشد
var $_test; // قابل قبول نمی باشد
var if; // قابل قبول نمی باشد چون کلمه کلیدی خوده جاوااسکریپت هست
var while; // قابل قبول نمی باشد چون کلمه کلیدی خوده جاوااسکریپت هست
var for; // قابل قبول نمی باشد چون کلمه کلیدی خوده جاوااسکریپت هست

var Test; // قابل قبول می باشد

var test; // قابل قبول می باشد

var test2020; // قابل قبول می باشد

var _test; // قابل قبول می باشد

var $test; // قابل قبول می باشد

var 2test; // قابل قبول نمی باشد

var $$test; // قابل قبول نمی باشد

var $_test; // قابل قبول نمی باشد

var if; // قابل قبول نمی باشد چون کلمه کلیدی خوده جاوااسکریپت هست

var while; // قابل قبول نمی باشد چون کلمه کلیدی خوده جاوااسکریپت هست

var for; // قابل قبول نمی باشد چون کلمه کلیدی خوده جاوااسکریپت هست

Free-Learn

مثال های آنلاین از تعریف متغیرها

مثال شماره ۱ : تعریف ۳ متغیر و دادن مقدار به آنها و در نهایت چاپ کردن مقادیر متغیرها در صفحه وب

<script>

var myname="sadegh";
var myage="27";
var mysite="Free-Learn";

document.write("My Name Is : " + myname);
document.write("<br>");
document.write("And My Age Is : " + myage);
document.write("<br>");
document.write("And My Site Is : " + mysite);

</script>

var myname="sadegh";

var myage="27";

var mysite="Free-Learn";

document.write("My Name Is : " + myname);

document.write("<br>");

document.write("And My Age Is : " + myage);

document.write("<br>");

document.write("And My Site Is : " + mysite);

</script>

امتحان کنید

مثال شماره ۲ : تعریف ۳ متغیر در حالت های مختلف

<script>

var $adad1;
var _adad2;
var haseljam;
$adad1 = 5;
_adad2 = 15;

haseljam = $adad1 + _adad2;
document.write(haseljam);

</script>

var $adad1;

var _adad2;

var haseljam;

$adad1 = 5;

_adad2 = 15;

haseljam = $adad1 + _adad2;

document.write(haseljam);

</script>

امتحان کنید

مثال شماره ۳ : چسبوندن ۳ متغیر بهمدیگه و نمایش آنها در خروجی

<script>

var a = "Free-Learn"; // متن یا رشته
var b = " "; //فضای خالی
var c = 2020; // عدد

// همه رو بهم میچسبونه و در متغیر دی میریزه
var d = a + b + c;

// در خروجی نمایش میده
document.write(d);

</script>

var a = "Free-Learn"; // متن یا رشته

var b = " "; //فضای خالی

var c = 2020; // عدد

// همه رو بهم میچسبونه و در متغیر دی میریزه

var d = a + b + c;

// در خروجی نمایش میده

document.write(d);

</script>

امتحان کنید

Free-Learn

دوباره اعلام یا Re-Declaring کردن متغیرها

کلمه Re-Declaring یعنی دوباره تعریف کردن یا دوباره ایجاد کردن ، منظورش اینه که اگه ما یه متغیر تعریف کنیم بعد بهش مقدار بدیم ولی دوباره بیایم و همون متغیر رو از نو تعریف کنیم در سطرهای بعدی ، میگه در این حالت هیچ مشکلی پیش نمیاد و همچنان همون مقدار اولیه درون متغیر وجود دارد.

مثال شماره ۱ : اول متغیر myname با مقدار Sadegh رو تعریف کردیم ، در خط بعدش دوباره اومدیم و متغیر myname رو تعریف کردیم، این رو بهش میگن Re-Declaring کردن متغیرها.

<script>

var myname="Sadegh";
var myname;
document.write(myname);

</script>

var myname="Sadegh";

var myname;

document.write(myname);

</script>

امتحان کنید

مثال شماره ۲ : دوباره تعریف کردن متغیر بهمراه مقدار جدید

<script>

var myname="Sadegh";
var myname="Reza";
var myname="Mahdi";
document.write(myname);

</script>

var myname="Sadegh";

var myname="Reza";

var myname="Mahdi";

document.write(myname);

</script>

امتحان کنید

Free-Learn

دامنه یا Scope در جاوااسکریپت

در ادامه آموزش کار با متغیرها یا Variables در جاوااسکریپت میخوایم با کلمه scope ( در لغت یعنی دامنه / وسعت ) آشنا بشیم و ببینیم این کلمه چی هست و به چه درد میخوره.

خب کلمه Scope شاید کمی گنده بنظر بیاد ولی چیزی نیست ، دامنه یا ( Scope یا وسعت یا حوزه یا میزان دسترسی ) بطور کلی به میزان وسعت یا میزان دسترسی به متغیرها گفته میشه.

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

انواع دامنه یا scope در جاوااسکریپت

دامنه سراسری یا Global Scope
دامنه محلی یا دامنه تابعی یا Function Scope
دامنه بلوکی یا Block Scope

پس دیگه بدونید اگه مثلا متغیری درون یک تابع تعریف شود میشه متغیر محلی یا ( Local ) یا درکل همون Function Scope و اگه خارج از این بلوک باشه میشه متغیر سراسری یا ( Global )

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

<script>

var myname="Sadegh"; // این میشه متغیر سراسری

// این یک تابع هست
function test(){
 var mysite="Free-Learn "; // این میشه متغیر محلی
 document.write(mysite);
 document.write(myname);
}

// چون متغیر مای سایت درون تابع می باشد پس اینجا قابل دسترسی نیست
document.write(mysite);

</script>

var myname="Sadegh"; // این میشه متغیر سراسری

// این یک تابع هست

function test(){

var mysite="Free-Learn "; // این میشه متغیر محلی

document.write(mysite);

document.write(myname);

}

// چون متغیر مای سایت درون تابع می باشد پس اینجا قابل دسترسی نیست

document.write(mysite);

</script>

امتحان کنید

توضیح مثال بالا :

در خط ۳ متغیر myname چون خارج از تابع تعریف شده پس یک متغیر سراسری می باشد ، و این یعنی هرکجای برنامه که بخوایم میتونیم فراخوانیش کنیم و ازش استفاده کنیم.

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

Free-Learn

کلمات کلیدی let و const چیست؟

تا قبل از سال ۲۰۱۵ ، تنها روشی که میشد باهاش متغیرهارو در جاوااسکریپت تعریف کرد همین کلمه کلیدی var بود که کمی قبلتر باهاش آشنا شدیم.

ورژن ( یا نسخه یا به انگلیسی Version ) 2015 زبان جاوااسکریپت که با نام رسمی ES6 – ECMAScript 2015 منتشر شد ۲ تا کلمه کلیدی بنام های let و const هم منتشر شد.

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

یعنی جلسه بعدی رو میخوایم بطور کامل در مورد let و const صحبت کنیم و اینکه چه تفاوت هایی دارند، پس لطفا در ادامه با من همراه باشید.

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

Free-Learn

دریافت PDF یا پرینت این مطلب