تعریف و استفاده از متغیر (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 مرورگر ثبت خواهد شد:
همان طور که گفتیم دلیل این خطا استفاده از عبارت void جهت نامگذاری متغیر است، هرچند بروز خطا در مورد تمام کلمات محفوظ صدق نمی کند اما برای جلوگیری از ایجاد مشکلات ناخواسته و خواناتر بودن سورس کدها توصیه می شود از به کار بردن آنها تحت هر عنوانی به جزء هدف اصلی خودداری نمائیم، جدول موجود در لینک زیر لیست کاملی از کلمات محفوظ در جاوا اسکریپت را نمایش می دهد.لیست کلمات محفوظ در جاوا اسکریپت

دستورات شرطی (Conditional Statements) در جاوا اسکریپت (JavaScript)
عملگرها (Operators) در جاوا اسکریپت (JavaScript)
متدهای کار با آرایه در جاوا اسکریپت (JavaScript)
رویدادها (Events) در جاوا اسکریپت (JavaScript)
دستور switch و case در جاوا اسکریپت (JavaScript)


window.variableName
<script>
var number = 1;
alert(number);
alert(window.number);
</script>
اطلاعات بیشتر:https://developer.mozilla.org/en-US/docs/Glossary/Global_object
من میخوام مقداری که در فیلد مربوط به تگ input وارد میشه به یک متغیر مثل var value ارسال شود سپس با value در جاوااسکریپت کار کنم. ممنون
<input type="search" id="data" name="data">
<input type="submit" value="go">
<script>
var value = 'data';
</script>
<input type="search" id="data" name="data">
<input type="submit" value="go" onclick="getValue('data');">
<script>
function getValue(id){
var value = document.getElementById(id).value;
alert(value);
}
</script>
من دو تا متغیر دارم در فایل html یکی از دیتابیس می خونه
{$item.amount}
و دیگری 9 درصد {$item.amount}
نشون میده {($item.amount|replace:'£':'' * 90.0)|string_format:"%.0f"}ریال
می خواستم این دو تا را جمع + کنم{($item.amount|replace:'£':'' * 90.0)|string_format:"%.0f"}ریال
{$item.amount}
لطفا راهنماییم کنید<span id="id-1">11</span>
<span id="id-2">22</span>
<input type="button" value="Sum" onclick="sumAmount('id-1', 'id-2');">
<script>
function sumAmount(id_1, id_2){
var value_1 = document.getElementById(id_1).innerHTML;
var value_2 = document.getElementById(id_2).innerHTML;
alert(parseInt(value_1) + parseInt(value_2));
}
</script>
قاعدتا به جای اعداد فرضی 11 و 12 باید کدهای ایجاد کننده صرفا خروجی عددی را جایگزین کنید، به فرض:<span id="id-1">{$item.amount}</span>
<span id="id-2">{($item.amount|replace:'£':'' * 90.0)|string_format:"%.0f"}</span>
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("itm");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
setTimeout(carousel, 4000);
}
</script>
من اینجوری نوشتم :<script>
var className = "itm";
var slideIndex = 0;
carousel(className);
function carousel(className) {
//const className = className;
var i;
var x = document.getElementsByClassName(className);
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
setTimeout("carousel(className)", 4000);
}
</script>
<script>
var test;
function func1(){
test = 1;
}
function func2(){
alert(test);
}
func1();
func2();
</script>
چه جوری می تونم از دو تا function باهم استفاده کنم.
مثلا میخوام توی مسیج باکس دوتا عدد دلخواه بدم و نتیجه جمع یا تفریق بشه!!!
میشه یه مثال لطف کنید ممنون
<script>
function addNumber(){
var num_1 = prompt("لطفا عدد اول را وارد کنید", "0");
var num_2 = prompt("لطفا عدد دوم را وارد کنید", "0");
if((num_1 != null && num_1 != '') && (num_2 != null && num_2 != '')){
alert(parseInt(num_1) + parseInt(num_2));
} else {
alert("لطفا در ورود اعداد دقت کنید");
}
}
</script>
<input type="button" value="کلیک کنید" onclick="addNumber();">
اسکریپتی بنویسید که نام کاربر را گرفته و آن را در صفحه چاپ کند.
<script>
function welcomeUser(result_id){
var name = prompt("Please Enter Your Name:");
var elm_result = document.getElementById(result_id);
if (name != null && name != ''){
elm_result.innerHTML = "Hi " + name + ", Welcome!";
}
}
</script>
<script>
function printUsername(input_id, result_id){
var elm_input = document.getElementById(input_id);
var elm_result = document.getElementById(result_id);
elm_result.innerHTML = elm_input.value;
}
</script>
</head>
<body>
<input type="text" id="my-input">
<input type="button" value="Print from Input" onclick="printUsername('my-input', 'my-div')">
<input type="button" value="Print from Prompt" onclick="welcomeUser('my-div')">
<div id="my-div"></div>
<div class="test-class" wpd-tooltip="تست" wpd-tooltip-position="top">
<span>تست</span>
</div>
و میخوام <span>تست</span> رو کاملا تغییر بدم، و مثلا به تست2 تغییرش بدم، چنین جاوایی نوشتم اما کار نمیکنه:var xxx = document.getElementsByClassName("test-class");
for (var i = xxx.length - 1; i >= 0; i--) {
if(xxx[i].innerHTML == 'تست')
xxx[i].innerHTML = 'تست 2'
}
میشه لطفا راهنمایی کنید مشکلش چیه؟ سپاسگزارم<script>
var xxx = document.getElementsByClassName("test-class");
for (var i = xxx.length - 1; i >= 0; i--) {
var yyy = xxx[i].getElementsByTagName('span')[0];
if(yyy.innerHTML == 'تست'){
yyy.innerHTML = 'تست 2'
}
}
</script>
اگر می خواهید تگ span در خروجی HTML حذف شود:if(yyy.innerHTML == 'تست'){
xxx[i].innerHTML = 'تست 2'
}
و اینکه کدنویسی با حالت use strict بهتره یا بدون اون یا هر کدوم راحت تریم؟
خیلی ممنون استاد عزیز و معلم بزرگوار
در خصوص حالت سختگیرانه برای کدنویسی، بهتر است همیشه این حالت فعال باشد تا اگر خطایی بود که نیاز به بررسی و رفع داشت از چشممان دور نماند، البته معمولا مفسر برنامه های IDE سختگیری های خارج از ضرورت اعمال می کنند که می توانیم آگاهانه آنها را نادیده بگیریم.
alert(a);
مقدار a را نمایش دهد<script>
var a;
$.getJSON("data-main.json", function(result) {
$.each(result, function(i, field) {
if(i == 1) {
a = field;
}
if(i == 2) {
o = field;
}
getJSONReady();
});
});
function getJSONReady() {
alert(a);
}
</script>
$.getJSON("data-main.json", function(result){
$.each(result, function(i, field){
if(i==1){
a= field;
}
if(i==2){
o= field;
}
});
});
حذف شد
سوال من اینه چطوری میتونم توی html یا javascript و یاvb script یک متغیر از نوع رشته ای تعریف کنم و بتونم از اون به عنوان یک متغیر مشترک در بین تمام صفحات سایت استفاده کنم مثلا یک سایت داریم که 3 تا صفحه داره روی صفحه اول یک textbox و یک دکمه داریم و بر روی دو صفحه دیگه روی هر کدام یک label داریم حالا من میخام کاری کنم که در صفحه اون وقتی بر روی کنترل textbox یک مقدار وارد میشه و بر روی دکمه کلیک میشه این مقدار رشته ای درون متغیر قرار بگیره و بتونم مقدار درون متغیر رو در کنترل label در صفحات 2 و 3 به نمایش در بیارم
ممنون میشم راهنمایی بفرمایید
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.