جاوا اسکریپت به زبان ساده: جلسه پنجم - متغیرهای عددی

برای اینکه راحت‌تر و بهتر با متغیرهای عددی آشنا شویم، مسیری را که در جلسه گذشته آغاز کرده‌ایم ادامه می‌دهیم. فرض کنید همچنان ما در حال ساخت پروژه پیتزافروشی هستیم. این بار می‌خواهیم با تعریف یک متغیر عددی، قیمت محصولات را به لیست اضافه کنیم و حتی تخفیف هم برای آن در نظر بگیریم.

برای این کار یک متغیر به نام off تعریف می‌کنیم.

var off = 20;

var pizzasPrice = 29999;

عددهای ریاضی چه اعداد اعشاری چه اعداد صحیح، جزو داده‌های عددی یا اینتجرها هستند. اگر یک عدد بنویسید و آن را بین کوتیشن نگذاشته باشید، این عدد به‌عنوان اینتجر محسوب می‌شود. این نوع متغیرها را اصطلاحا متغیرهای عددی می‌گویند.

مثلا var number = 2 یک متغیر عددی با مقدار ۲ است، ولی var number = "2" یک متغیر استرینگی با مقدار ۲ است؛ چرا که در داخل کوتیشن نوشته شده است.

در متغیرهای عددی به هیچ وجه کوتیشن (سینگل یا دابل) وجود ندارد و فقط و فقط عدد مورد نظر جلوی آن نوشته می‌شود. دقت کنید، اگر عدد بنویسید ولی آن را در کوتیشن قرار دهید، جاوا اسکریپت آن را به‌عنوان استرینگ در نظر می‌گیرد!

مهمترین نکته متغیرهای عددی، امکان انجام فرمول‌ها و توابع ریاضی روی آن‌ها است.

در مثال زیر ابتدا سه متغیر بدون مقدار تعریف کرده‌ایم. این متغیرها می‌توانند بعدا عدد، استرینگ یا هر چیز دیگری بشوند. در ادامه به هر یک از آن‌ها یک عدد اختصاص داده و آن‌ها را در قالب متغیر z جمع کرده‌ایم. 

var x;

var y;

var z;

x =1

 y = 2

 z = x + y

نتیجه‌ چاپ کردن متغیر z در تب کنسول، برابر عدد ۳ خواهد بود!

حالا  دو متغیر X و Y در مثال بالا را به شکل استرینگی تعریف می‌کنیم.

var x;

var y;

var z;

x = "1"

 y = "2"

 z = x + y

در این حالت دو متغیر استرینگی را با هم جمع‌ کرده‌ایم. پس وقتی خروجی z  را در کنسول مرورگر چاپ کنیم، به‌جای عدد ۳ با استرینگ 12 مواجه خواهیم شد. استرینگی که از چسباندن دو متغیر x و y حاصل شده است.

حالا  فرض کنید قصد داریم از یک فروشگاه زنجیره‌ای بزرگ خرید کنیم! از آنجا که قرار است مقداری کدنویسی کنیم، باید چندین متغیر برای سبد خرید خود مشخص کنیم.

متغیر اول: سس کچاپ - نوع: استرینگ

var ketchup = ‘ketchup’

متغیر دوم: نوشابه - نوع: استرینگ

var soda = ‘soda’

متغیر سوم:‌ جمع مبلغ پولی که باید هزینه کنیم - نوع: عدد

var totalMoney = 1000

حالا می‌خواهیم قیمت نوشابه و قیمت سس کچاپ را در متغیرهای جداگانه ذخیره کنیم.

var ketchupPrice = 500

var sodaPrice = “500”

حالا بیاید کمی آزمون و خطا کنیم. در ابتدا بیایید دو متغیر ketchupPrice و  sodaPrice را با هم جمع کنیم. برای این کار می‌توانیم ابتدا یک متغیر جداگانه تعریف می‌کنیم که مقداری ندارد! می‌نویسیم:

var totalPrice;

حالا قیمت سس کچاپ و نوشابه را در این متغیر ذخیره می‌کنیم:

totalPrice  = ketchupPrice + soda;

برای نمایش این مقدار راه‌حل‌های بسیاری وجود دارد. دم دستی‌ترین راه حل، استفاده از console.logا(totalPrice) برای نمایش  این مقدار در کنسول مرورگر و راه حل دم دستی دیگر، استفاده از alert است. ولی از هیچ یک از این روش‌ها استفاده نمی‌کنیم. فعلا دستوری را استفاده می‌کنیم که شما قبلا یاد نگرفته‌اید ولی بعدا کامل آن را شرح خواهیم داد. فعلا فقط این دستور را در انتهای کد و بعد از متغیر totalPrice بنویسید.

console.log(totalPrice)

حالا صفحه را ریفرش کنید!‌ شاید تعجب کنید! بله! نتیجه اشتباه از آب درآمد. به‌جای اینکه جمع این دو عدد ۱۰۰۰ شود؛ شد،‌ 500۵۰۰ ! ولی چرا؟

حالا به یک نکته مهم برخورد کرده‌ایم!‌ این بار هم یک متغیر استرینگی را با یک متغیر عددی جمع کرده‌ایم! در این حالت باز هم متغیر استرینگی به متغیر عددی می‌چسبد. بنابراین دقت کنید که اگر قصد انجام اعمال ریاضی روی متغیرها دارید، همیشه نوع آن‌ها را به‌درستی مشخص کنید تا بعدا به مشکل برخورد نکنید.

برای درست شدن این مشکل دو راه حل وجود دارد:

راه حل ساده‌تر آن است که مقدار متغیر sodaPrice را تغییر دهیم. یعنی کوتیشن اطراف آن را برداریم و بدین ترتیب دوباره یک متغیر عددی خواهیم داشت و همه چیز مثل روز اول کار می‌کند.

راه حل دوم هر چند ضروری نیست ولی یک نکته آموزشی ساده دارد! آن هم این است که شما وقتی یک متغیر تعریف می‌کنید بدین معنا نیست که این متغیر وحی منزل است و جای هیچگونه تغییری در آن نیست! همانطور که گفتیم، مقدار و نوع متغیرها هر زمان که دوست داشته باشیم قابل تغییر است. پس به‌جای تغییر در متغیر اولیه، همان متغیر را با یک مقدار عددی پر می‌کنیم. یعنی یک بار دیگر نام آن را بدون کلمه var می‌نویسیم و مقدار جدید بدان می‌دهیم! بعد از این کار متغیر ما مقدارش به آخرین مقداری که ما برایش تعیین کرده‌ایم تغییر می‌کند.

کد نهایی ما بعد از این تغییر به شکل زیر درمی‌آید: 

var ketchup = ‘ketchup’

/*متغیر دوم: نوشابه- نوع : استرینگ*/

var soda = ‘soda’

متغیر سوم:‌ جمع مبلغ پولی که باید هزینه کنیم - نوع: عدد

var totalMoney = 1000

حالا می‌خواهیم قیمت نوشابه و قیمت سس کچاپ را در متغیرهای جداگانه ذخیره کنیم.

var ketchupPrice = 500

var sodaPrice = “500”

sodaPrice = 500

var totalPrice ;

totalPrice = sodaPrice +‌ketchupPrice // انگار که ما ۵۰۰ +‌۵۰۰ را نوشته باشیم

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

var ketchup;

var soda;

var ketchupPrice;

var sodaPrice;

sodaPrice;

var totalPrice ;

//بعد از ده‌ها خط برنامه می توانیم متغیرهای اولیه‌مان را فراخوانی کنیم

ketchup = "ketchup";

soda = "soda";

ketchupPrice = 500;

sodaPrice = 500;

totalPrice = ketchupPrice + sodaPrice

همچنین مانند این مثال که می‌خواهید همزمان چندین متغیر تغریف کنید، می‌توانید یکبار کلمه var را بنویسید و بین هر یک از متغیرها یک علامت , بگذارید. این عین آن است که برای هر کدام یک بار کلمه var را جدا نوشته باشید.

var ketchup , soda , ketchupPrice, sodaPrice , totalPrice ;

totalPrice = sodaPrice +‌ketchupPrice

امیدواریم که پنجمین جلسه از آموزش جاوا اسکریپت توانسته باشد برای شما لذت‌بخش باشد. در جلسه بعدی باز هم ویژگی‌های بیشتری از متغیرهای عددی را بررسی خواهیم کرد. با ما همراه باشید.