آموزش برنامه نویسی وب و مهارتهای مرتبط

پنجشنبه ۰۴ اردیبهشت ۱۴۰۴

Thursday, April 24, 2025 GMT +3:30

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

در آموزش قبل اشاره شد که جاوا اسکریپت (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

برچسب ها: JavaScript

قبلی »

« بعدی

مطالب بیشتر:
حلقه for و while در جاوا اسکریپت (JavaScript)
کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
آرایه (Array) در جاوا اسکریپت (JavaScript)
کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)

دیدگاه

۳۱ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

لطفا کمکم کنید!

۰۰:۲۳ ۱۳۹۱/۱۲/۲۷

سلام من مبتدی هستم!
این برنامه را نوشتم. میخواهم در پایان تمام مقادیر p را با هم جمع کند. لطفا کمکم کنید.

<html>
<head>
<script type="text/javascript">
function total(a,b)
{
result=a+b
return result
}
function Power(a,b)
{
result=1/Math.pow(a,b);
return result
}
</script>
</head>
<body>
this program will calculate<font color=purple size=16> SUM of 1/x^2 </font>from 1 to any value of x that you want
<br><br><br><br>these are values of 1/x^2<b>:<b>
<script type="text/javascript">
var n=prompt("Enter value for x",10);
for(x=1;x<=n;x++)
{
p=Power(x,2);
document.write("<br>x :"+x + "==>   "+ p);
s=total();
}
document.write("<br><br><br><B><font size=18 color=purple><B>Final Answer for SUM(1/x^2) Is  </font></B>"+ s);
</script>
</body>
</html>

از نمونه کد تصحیح شده استفاده کنید.

<html>
<head>
<script type="text/javascript">
function total(a,b)
{
result=a+b
return result
}
function Power(a,b)
{
result=1/Math.pow(a,b);
return result
}
</script>
</head>
<body>
this program will calculate<font color=purple size=16> SUM of 1/x^2 </font>from 1 to any value of x that you want
<br><br><br><br>these are values of 1/x^2<b>:</b>
<script type="text/javascript">
var n=prompt("Enter value for x",10);
var s = 0;
for(x=1;x<=n;x++){
	p=Power(x,2);
	document.write("<br>x :"+x + "==>   "+ p);
	s += p;
	alert(s);
}
document.write("<br><br><br><B><font size=18 color=purple><B>Final Answer for SUM(1/x^2) Is  </font></B>"+ s);
</script>
</body>
</html>

نخست

قبلی

بعدی

آخر

صفحه 3 از 3

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.