دوشنبه ۱۴ آذر ۱۴۰۱

Monday, December 5, 2022 GMT +3:30

تعریف و استفاده از متغیر (Variable) در جاوا اسکریپت (JavaScript)

javascript-variable

در آموزش قبل اشاره شد که جاوا اسکریپت (JavaScript) زبان اسکریپت نویسی سمت کاربر (Client-side) است که با تکیه بر قدرت برنامه نویسی در کنار تگ های HTML و استایل CSS قابلیت های تعاملی بیشتر برای صفحات وب فراهم می کند، در همین راستا و مانند بسیاری از زبان های برنامه نویسی، جاوا اسکریپت نیز قواعد و دستورات خاصی دارد که مفسر این زبان کدها را بر اساس آن پردازش کرده و نتیجه کار را در صفحه وب اجرا یا به نمایش می گذارد، از جمله این قواعد نحوه تعریف و استفاده از متغیرها در جاوا اسکریپت است که همواره باید مطابق با اصول نگارش (Syntax) آن باشد، لذا برای اینکه کدهایی کاربردی و بدون نقص بنویسیم و ایده های ذهنیمان را به راحتی و به درستی به مرورگر تفهیم کنیم، لازم است که درک صحیحی از این مباحث داشته باشیم و این موضوعی است که در آموزش پیش رو به زبان ساده در خصوص آن صحبت خواهیم کرد.

متغیر (Variable) چیست؟


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

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


متغیرها در جاوا اسکریپت با عبارت var تعریف می شوند که از واژه Variable به همین معنی گرفته شده است، به طور مثال:
var lang = 'fa';
متغیرها می توانند مقادیر عددی (Int)، رشته ای (String) یا بولین (Boolean) داشته باشند که با علامت = به آنها نسبت داده می شود، در جاوا اسکریپت هر کجا مقادیر متغیر را در بین علامت های " " (double quotation) یا ' ' (single quotation) قرار دهیم یعنی آن را به صورت رشته ای مقداردهی کرده ایم حتی اگر صرفا مقادیر متغیر یک عدد باشد، این ویژگی در هنگام استفاده از عملگرهای ریاضی مانند انجام محاسبات تاثیرگذار است، به طور مثال نتیجه کد زیر برابر با 21 خواهد بود:
<script type="text/javascript">
var num_1 = '2';
var num_2 = '1';
var result = num_1 + num_2;
alert(result);
</script>
در صورتی که اگر همین کد را به شکل زیر بنویسیم (مقادیر عددی را خارج از علامت ' ' درج کنیم) نتیجه برابر 3 خواهد بود:
<script type="text/javascript">
var num_1 = 2;
var num_2 = 1;
var result = num_1 + num_2;
alert(result);
</script>
اگر در کدهای بالا دقت کنیم متوجه می شویم که عملگر جمع (+) در جاوا اسکریپت هم برای متغیرهای عددی و هم متغیرهای رشته ای کاربرد دارد، در کد اول دو رشته با هم جمع شده و در نتیجه رشته متنی 21 بدست آمده است، در کد دوم دو عدد با هم جمع شده و در نتیجه عدد 3 بدست آمده است، در ادامه نمونه کد دیگری را به همراه پیش نمایش آنلاین آن بررسی می کنیم.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تعریف و استفاده از متغیرها در جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    text-align:justify;
    font-size:12px;
    direction:rtl;
}
</style>
<script type="text/javascript">
var name, family, age;
name = 'your name';
family = 'your family';
age = 22;
document.write('Name: ' + name + ' | Family: ' + family + ' | Age: ' + age);
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>

<hr>
به کمک عملگر جمع (+) در جاوا اسکریپت می توانیم متغیرهای رشته ای را با متغیرهای عددی ترکیب کنیم.
</body>
</html>
پیش نمایش
در نمونه کد بالا با یک عبارت var سه متغیر را تعریف کرده ایم (name, family, age)، این شیوه مختصرنویسی یا ساده سازی در تعریف متغیرها است که در عمل با شیوه عادی تفاوتی ندارد، معمولا زمانی که چند متغیر با هم مرتبط هستند یا جهت کدنویسی کوتاهتر و سریعتر از شیوه مختصرنویسی در تعریف متغیرها استفاده می شود، همچنین در کد بالا از متدی با نام document.write استفاده کرده ایم که برای چاپ مستقیم خروجی در مرورگر کاربرد دارد، در این خصوص در آموزش های بعدی بیشتر خواهیم گفت.
متغیرهای عددی (Int) و رشته ای (String) را با هم بررسی کردیم، شکل سوم متغیرها از نوع بولین (Boolean) است که می تواند دو مقدار true یا false داشته باشد، مثال زیر به درک مطلب کمک خواهد کرد.
<script type="text/javascript">
var test = true;
alert('var type is: ' + typeof(test) + ', var value is: ' + test);
</script>
با اجرای کد بالا مقدار زیر به صورت پیام هشدار نمایش داده خواهد شد.
var type is: boolean, var value is: true
همان طور که مشخص است با تابع typeof می توانیم نوع یک متغیر را بدست آوریم.

حدود دسترسی (Scope) متغیرها در جاوا اسکریپت


در هنگام تعریف متغیرها در جاوا اسکریپت باید به مبحثی تحت عنوان حدود دسترسی یا Scope آنها توجه داشته باشیم، منظور از این اصطلاح امکان دسترسی به متغیر در قسمت های مختلف برنامه است، در حالت کلی متغیرها به دو صورت Local و Global دسته بندی می شوند، متغیرهای Local متغیرهایی هستند که درون توابع تعریف و صرفا در آن تابع قابل دسترسی هستند، به طور مثال:
<script type="text/javascript">
function func1(){
    var test = 1;
}
function func2(){
    alert(test);
}
func1();
func2();
</script>
در صورت اجرای کد بالا با خطای
ReferenceError: test is not defined
مواجه خواهیم شد (در اغلب مرورگرها با فشردن کلید F12 قسمت خطایابی سورس کدها نمایش داده می شود که می توانیم فرآیند اجرای برنامه و مشکلات احتمالی را از قسمت Debugger آن دنبال کنیم)، دریافت خطای فوق به این دلیل است که متغیر test در تابع func1 تعریف اما در تابع func2 فراخوانی شده است، گفتیم متغیرهایی که در توابع تعریف می شوند به صورت Local Scope هستند و صرفا در آن تابع در دسترس می باشند، بر این اساس اگر کد بالا را به صورت زیر بازنویسی کنیم مشکل برطرف خواهد شد.
<script type="text/javascript">
var test;
function func1(){
    test = 1;
}
function func2(){
    alert(test);
}
func1();
func2();
</script>
از آنجایی که متغیر را خارج از تابع تعریف کرده ایم حدود دسترسی آن سراسری یا Global است و در اصطلاح به این نوع متغیرها Global Scope گفته می شود، متغیرهای Global در تمام قسمت های برنامه قابل دسترسی و استفاده هستند که بر این اساس با اجرای کد بالا مقدار 1 در خروجی چاپ خواهد شد.
نکته 1: متغیرهای سراسری یا Global در هر قسمت از برنامه قابل تغییر و مقداردهی مجدد هستند که در کدنویسی باید به این نکته دقت داشته باشیم.
<script type="text/javascript">
var test;
function func1(){
    test = 1;
}
function func2(){
    test = test + 1;
    alert(test);
}
func1();
func2();
</script>
با اجرای کد بالا مقدار 2 به صورت پیام هشدار نمایش داده خواهد شد.
نکته 2: در این آموزش اگرچه اشاره ای به مبحث توابع داشته ایم اما به جهت پرهیز از طولانی و پیچیده شدن مطلب، تفصیل آن را به آموزش های بعدی موکول می کنیم، برای این مرحله همین که بدانیم منظور از Scope متغیر در جاوا اسکریپت چیست، کفایت خواهد کرد.

کلمات محفوظ (Reserved Words) در جاوا اسکریپت


آخرین نکته ای که در مبحث تعریف و استفاده از متغیرها باید به آن توجه کنیم به کار نبردن کلمات محفوظ (Reserved Words) در نامگذاری متغیرها است، منظور از کلمات محفوظ عباراتی هستند که از قبل در مفسر جاوا اسکریپت برای منظور خاصی در نظر گرفته شده اند و لذا استفاده از آنها برای نامگذاری پارامترها توصیه نشده و حتی ممکن است باعث از کار افتادن برنامه شود، به طور مثال تعریف متغیر به روش زیر صحیح نیست چرا که عبارت void یک کلمه محفوظ است:
<script tytype="text/javascript">
var void = 20;
alert(boolean);
</script>
در صورت اجرای نمونه کد بالا خطای زیر در Debugger مرورگر ثبت خواهد شد:
SyntaxError: missing variable name
همان طور که گفتیم دلیل این خطا استفاده از عبارت void جهت نامگذاری متغیر است، هرچند بروز خطا در مورد تمام کلمات محفوظ صدق نمی کند اما برای جلوگیری از ایجاد مشکلات ناخواسته و خواناتر بودن سورس کدها توصیه می شود از به کار بردن آنها تحت هر عنوانی به جزء هدف اصلی خودداری نمائیم، جدول موجود در لینک زیر لیست کاملی از کلمات محفوظ در جاوا اسکریپت را نمایش می دهد.
لیست کلمات محفوظ در جاوا اسکریپت
دسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
رویدادها (Events) در جاوا اسکریپت (JavaScript)
آرایه (Array) در جاوا اسکریپت (JavaScript)
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
حلقه for و while در جاوا اسکریپت (JavaScript)
متدهای کار با آرایه در جاوا اسکریپت (JavaScript)
دیدگاه
more ۳۱ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
farnaz
۱۳:۰۳ ۱۴۰۱/۰۷/۱۲
سلام. وقت بخیر. یه سوالی داشتم. در جاوا اسکریپت متغیرهایی که با var تعریف می شوند به window اضافه می شوند. این مفهوم رو متوجه نمیشم.
این مفهوم به بحث Scope یا حدود دسترسی به آبجکت ها و متغیرها مربوط است، به طور خلاصه وقتی متغیری با var (خارج از تابع) تعریف می شود حد دسترسی Global یا سراسری دارد یعنی تمام کدهای جاوا اسکریپتی آن صفحه وب می توانند به متغیر دسترسی پیدا کنند، دسترسی به متغیر هم یا مستقیم است یا به واسطه یک آبجکت سراسری که در اینجا window یک آبجکت سراسری است و به متغیر سراسری var دسترسی دارد به فرض:
window.variableName

<script>
var number = 1;
alert(number);
alert(window.number);
</script>
اطلاعات بیشتر:
https://developer.mozilla.org/en-US/docs/Glossary/Global_object
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
3 × 1
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
میثم
سلام وقت بخیر. من برای نمایش دادن و مخفی کردن div با اسکرول کردن صفحه از کد زیر استفاده می کنم. با...
۱۴۰۱/۰۹/۱۲

پـــــرتو
سلام جناب خسته نباشید شرمنده مزاحم میشم درسته گفتم قالبم درست شده ولی درست نشده یعنی اینک از کد جدیدی دارم استفاده می کنم ولی...
۱۴۰۱/۰۹/۰۸

حسین ناصری
سلام من از نمونه کد برای نمایش قسمتی از سایت دیگه استفاده میکنم مشکلم اینه بعضی از سایت ها برداشت مطلب با این...
۱۴۰۱/۰۸/۳۰

مهدی
سلام خسته نباشید میخواهم تابع ای بنویسم که توان ۲ یک عدد را فراخوانی با ارجاع انجام دهد ؟ میشه بهم بگید...
۱۴۰۱/۰۸/۲۸

اروین
من یک بلاک html رو از یک بخشی از سایت با روش display:none برداشتم. من میخوام این بخشی که برداشتم توی...
۱۴۰۱/۰۸/۲۶

پـــــرتو
سلام جناب خسته نباشید ببخشید جناب هعی مزاحم میشم توی همین قالبی که دارم بردراش صاف و مساوی نمیشه نمی دونم مشکل از منه یا...
۱۴۰۱/۰۸/۲۳

پرتو
عه من کد رو براتون اپلود کردم توی ایمیل خالی اومده؟ مگه میشه؟ خودم اپلودش کردم توی ایمیل...! عجیبه لطفا یه چک بکنید شاید مشکل...
۱۴۰۱/۰۸/۱۹

شبنم
سلام وقت خیر، من برای وب سایتم اسلایدر ایجاد کردم از طریق سایت owl carousel و اوکی هست مشکلی از این بابت ندارم، مشکل اینجاست...
۱۴۰۱/۰۸/۱۸

پــــرتو
سلام جناب خسته نباشید من کد رو براتون ارسال کردم و دیگه اینکه یه سوال کامپیوتری داشتم من هر دفعه که لپتاپ رو خاموش روشن...
۱۴۰۱/۰۸/۱۸

پرتو
باشه فعلا لپتاپم در دسترسم نیست تا آخر هفته میفرستم
۱۴۰۱/۰۸/۰۷

پرتو
سلام خسته نباشید شرمنده مزاحم میشم اوکی ممنونم از جوابتون یه چیز میتونم بگم میخاستم بگم که برای منوی سمت راست اگر یه بردر برای...
۱۴۰۱/۰۸/۰۵

عباس
سلام خوبید جدید یک هفته ای هست تعداد آنلاین ها را فقط عدد یک نشون میده بی زحمت یه بررسی کنید البته سی‌دی‌ان سایت تغییر...
۱۴۰۱/۰۸/۰۱

پرتو
سلام جناب خسته نباشید عه بازم منظورمو متوجه نشدین اینایی که گفتینو میدونم منظورم اینک کدهایی که توی سایت شما هست همون ادرسی که بهم...
۱۴۰۱/۰۷/۲۹

پرتو
اوکی ممنونم از توضیحاتتون فقط در مورد کد یه چیز بگم من منظورم اینک کجا کدها رو قرار بدم منظورم کدوم قسمت یا اینک کدوم...
۱۴۰۱/۰۷/۲۶

sara24
سلام خسته نباشید کدی رو تو جاوا اسکریپت با if else نوشتم که وقتی روی دکمه (like) کلیک شه اون صفحه رو به لیست...
۱۴۰۱/۰۷/۲۳

پرتو
سلام جناب خسته نباشید جناب الان اون لینکی که فرستادین خوندم فقط نفهمیدم باید چیکار کنم دقیقا یعنی متوجه شدم ولی متوجه نشدم باید دقیقا...
۱۴۰۱/۰۷/۲۲

Zeinab
سلام من میخواستم بدونم که چرا توی اکثر سایت ها اول با universal selector (که با * در css انتخاب میشه) میان padding و margin...
۱۴۰۱/۰۷/۲۱

آیدا
در صفت face در تگ font کاری کنیم که فاصله رو بپذیره؟
۱۴۰۱/۰۷/۱۹

سپهر
سلام خسته نباشید من یک وبلاگ داخل بلاگ بیان دارم ،‌ فاو ایکون هم ساختم ولی نمیدونم چه جوری اپلودش کنم هاست هم ندارم خیلی...
۱۴۰۱/۰۷/۱۵

پـــرتو
سلام خسته نباشید شرمنده مزاحم میشم ببخشید اینستاگرام قطعه کلا؟ می دونم قطعه و باید با فیلترشکن رفت منظورم اینک من با فیلترشکن هم نمی...
۱۴۰۱/۰۷/۱۵
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.