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

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 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

قبلی »

« بعدی

مطالب بیشتر:
آرایه (Array) در جاوا اسکریپت (JavaScript)
توابع (Functions) در جاوا اسکریپت (JavaScript)
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
متدهای کار با آرایه در جاوا اسکریپت (JavaScript)
دستورات شرطی (Conditional Statements) در جاوا اسکریپت (JavaScript)

دیدگاه

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

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

شایگان شکرالهی

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

سلام خیلی ممنون میشم کمک کنید!
میخوام با جاوا اسکریپت ، ابتدا دو عدد رو دریافت کنم بعد میانگینش رو حساب کنم ممنون میشم ببینید مشکل این کد کجاست!

<script >
    var adad = parseFloat(prompt('یک عدد وارد کنید'))
	var adad2 = parseFloat(prompt('عدد دوم لطفا'))
	alert((adad + adad2) / 2)
</script>

کد اصلاح شد! مشکل از نبود پرانتز بین دو عدد بود که در واقع در این حالت مفسر اینگونه برداشت می کند که عدد اول + حاصل عدد دوم تقسیم بر 2!

pink flower

۱۴:۵۵ ۱۳۹۵/۰۴/۰۷

سلام برای اینکه تو یه ماشین حساب عملگر پرانتز استفاده کنیم چه کدی باید بنویسیم

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

آقاجانی

۱۳:۴۴ ۱۳۹۴/۱۱/۰۱

نه در HTML مثلا در کد زیر :

<script>
a = prompt("آدرس لینک","")
</script>
<a href="" >کلید کنید</a>

میخوام ادرسی که a دریافت میکنه رو جای خاصیت href لینک قرار بده .

برای این کار می توانید از نمونه کد زیر استفاده کنید:

<script type="text/javascript">
window.onload = function(){
	a = prompt("آدرس لینک", "");
	if(a != null){
		document.getElementById('test').setAttribute('href', a);
	}
}
</script>
<a id="test" href="" >کلید کنید</a>

آقاجانی

۱۹:۳۰ ۱۳۹۴/۱۰/۲۸

سلام چه جوری میشه url یک متغیر مانند x = www.xyz.com را جای خاصیت href یک لینک قرار داد ؟

سوال دقیق نیست! منظور از یک لینک در چه شرایطی است؟! آیا لینک درخروجی HTML است؟ یا در سایر متغیرهای موجود در دستورات PHP؟ در دستورات PHP:

<?php
$url = 'www.xyz.com';
$result = '<a href="http://'.$url.'>لینک</a>';
?>

سید محمد

۱۶:۲۱ ۱۳۹۴/۱۰/۱۱

ممنون بابت آموزش
من یه مشکل کوچیک ولی اساسی دارم!!

ctxt.font = "bold " + f + "pt Impact, BTitr, sans-serif";

BTitr رو میبینید، میخوام به جاش متغییری به اسم Font رو بزارم . اما هر کاری میکنم خطا میده
لطف کنید راهنمایی کنید

از نمونه زیر می توانید استفاده کنید:

<script type="text/javascript">
var Font = 'your font!';
ctxt.font = "bold " + f + "pt Impact, " + Font + ", sans-serif";
</script>

نکته: برای خطایابی دستورات جاوا اسکریپت بهتر است افزونه هایی مانند Web Developer را در مرورگر فایرفاکس نصب نمائید.

https://addons.mozilla.org/en-us/firefox/addon/web-developer

حسام

۲۱:۵۷ ۱۳۹۴/۰۸/۰۶

سلام من دو متغیر X و Y دارم وقتی هر دو رو برابر 2 میدم و براشون این عملکرد رو تعریف میکنم : X + Y به جای اینکه جواب چهار رو نمایش بده مینویسه 22 مشکلم کجا هست ؟
اینم کدش:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div align="center" style="border:solid ; border-color:#00F">
<script language="javascript">
function ZXL(){
	var X = document.getElementById('X').value;
	var Y = document.getElementById('Y').value;
	var Z = X + Y;
	document.getElementById("P").innerHTML = Z;
}
</script>
<input type="number" id="Y" />
<br />
<br />
<input type="number" id="X" />
<br />
<input type="button" value="جمع" onclick="ZXL()" />
<br/>
<p id="P"></p>
</div>
</body>
</html>

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

var Z = parseInt(X) + parseInt(Y);

سلام

۱۱:۲۱ ۱۳۹۴/۰۲/۲۲

سلام
من در مورد جاوا اسکریپت مبتدی هستم . یک صفحه وب دارم که تعدادی لینک داخل ان می خواهم ایجاد کنم . می خواهم با زدن روی لینک به یک فایل که با تاریخ روز شروع میشود برود. برای تعریف متغیر لینک تاریخ چگونه باید کد را بنویسم؟ به جز جاوا اسکریپت در خود html هم می توان چنین لینکی که متغیر تاریخ را دارد ایجاد کرد؟
ممنون اگر جواب بدهید خیلی برایم مهم است.
متشکر

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

<script type="text/javascript">
newlink = document.createElement('a');
newlink.innerHTML = 'Webgoo';
newlink.setAttribute('title', 'Webgoo');
newlink.setAttribute('href', 'http://webgoo.ir');
document.body.appendChild(newlink);
</script>

در صورت آشنایی با متدهای مربوط به تاریخ و زمان در جاوا اسکریپت می توان موارد دلخواه را به قسمت href در مثال بالا اضافه کرد.

۲۰:۵۱ ۱۳۹۴/۰۱/۰۱

سلام ممنون از سایت خوبتون. من چه جوری می تونم وقتی یه دکمه درست کردم و وقتی اونو زدم تو باکس نوشته شه؟؟؟؟؟؟؟

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

<script type="text/javascript">
function setText(id, text){
	document.getElementById(id).value = text;
}
</script>
<input type="text" id="test">
<input type="button" value="click!" onclick="setText('test', 'JavaScript is easy!');">

elmira

۰۹:۳۴ ۱۳۹۳/۱۲/۱۵

سلام
تابع set interval کارش چیه؟

این متد برای فراخوانی یک تابع (به صورت پی در پی) پس از سپری شدن زمان مشخص (به میلی ثانیه) است، برای غیرفعال کردن این روند باید از متد clearInterval استفاده کرد، همچنین برای فراخوانی تابع تنها برای یک بار می توان از متد setTimeout استفاده کرد.

hamid

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

سلام من نیاز دارم دوتا textbox داشته باشم که کاربر بتونه عدد وارد که و بعد این دوتا باهم جمع تفریق یا ضرب و تقسیم بشن و جواب رو ببینه . چیکار کنم تازه کار هستم یه مثال آماده نیس؟

می توانید از نمونه کد زیر برای جمع (تفریق ضرب تقسیم) دو مقدار در جاوا اسکریپت استفاده کنید:

<script type="text/javascript">
function numberReault(id_1, id_2){
	var value_1 = document.getElementById(id_1).value;
	var value_2 = document.getElementById(id_2).value;
	
	//result
	var result = Number(value_1) + Number(value_2);
	
	alert(value_1 + ' + ' + value_2 + ' = ' + result);
}
</script>
<input type="text" id="test_1">
<input type="text" id="test_2">
<input type="button" value="Click!" onclick="numberReault('test_1', 'test_2')">

مرتضی

۱۹:۵۴ ۱۳۹۳/۰۸/۲۲

ببخشید چه طوی میشه متغیر رو از کاربر گرفت (input)
مثلا من یه اینپوت باکس بذارم و از کاربر سنش رو بخوام
و بعدش مثلا به علاوه 10 بکنم و نتیجه رو نشون بدم
ممنون میشم اگه بگید

دوست گرامی انجام این موارد نیازمند این است که آموزش ها را قدم به قدم مطالعه و تمرین کرده باشید، دریافت اطلاعات از input نیازمند آشنایی با مبحث form در HTML است، سپس باید با بحث متد POST در PHP آشنا باشید، همچنین سشن از کاربر گرفته نمی شود و خود مبحث مفصلی دارد!

Mahdi

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

سلام.
عزیز من اینو چجوری بذارم تو فایل جاوا اسکریپتم؟

var operators = '~ ! @ # $ % ^ & * ( ) - + = ? . / ;';

چجوری باید با اسلش جداشون کنم؟

لطفا سوالتان را دقیق مطرح کنید، سوال مبهم است! از دید ما این یک متغیر است که با چند کاراکنر به صورت رشته متنی مقداردهی شده و استفاده از آن در کدهای جاوا اسکریپت مانند سایر متغیرهاست!

افسانه

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

سلام
چرا از جی کوئری چیزی نمیگین؟ چه فرقی با جاوا داره؟

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

ابوالفضل

۲۰:۱۶ ۱۳۹۲/۱۲/۱۲

سلام
من میخوام در یک فایل js این کد رو قرار بدم آیا حتما باید CDATA را قرار دهم؟

خیر، CDATA برای حالتی است که کدها در بین تگ های HTML و آن هم در نسخه های خاصی از HTML یعنی XHTML به کار می روند.

مرسی که کمکم کردین!

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

سلام. مرسی. خیلی آدم خوبی هستی. دستت درد نکنه. خدا خیرت بده.

صفحه 2 از 3

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