۴- متغیر

متغیر – Variable

متغیر (Variable) یک جایی در حافظه است که دارای یک نام می‌باشد و می‌تواند یک مقدار (Value) را در خود نگاه دارد.

مراحل استفاده از متغیر

  • Declare: تعیین نام متغیر و اختصاص فضا در حافظه
  • Assignment: نوشتن مقدار در آن
  • Access: خواندن مقدار از آن

مراحل دوم و سوم می‌تواند بارها و بارها تکرار شود.

روش‌های استفاده از متغیر

1.

let msg; // Declare

msg = "Hello World!"; // Assignment

alert(msg); // Access

2.

let msg = "Hello World!"; // Declare & Assignment

alert(msg); // Access

3.

let msg = 5 + 2; // msg = 7;  // Declare & Assignment

alert(msg); // Access 

چند متغیر

4.

// Multiple var
let msg = "Hello", wrd = "World!"; // Declare & Assignment

alert(msg); // Hello    // Access
alert(wrd); // World!   // Access

5.

// Multiple var
let msg = wrd = "Hello World!";  // Declare & Assignment

alert(msg); // "Hello World!"    // Access
alert(wrd); // "Hello World!"    // Access

تغییر مقدار متغیر

6.

let msg = "Hello"; // Declare & Assignment

msg = "World"; // Change

alert(msg);   // Access

7.

let msg = "Hello", wrd = "World"; // Declare & Assignment

msg = wrd;    // Change

alert(msg);   // Access

قواعد نامگذاری متغیر

مواردی که باید رعایت شود:

  • نام متغیر تنها می‌تواند شامل حروف، ارقام، $ و _ باشد.
  • نام متغیر نباید با عدد شروع شود.

مواردی که بهتر است رعایت شود:

  • نام‌های چند کلمه‌ای camelCase نوشته شود.
  • نام متغیر، با معنا باشد. (نمونه نامناسب: lorem)
  • نام متغیر، توصیفی از محتوا باشد. (نمونه نامناسب: data)
  • از نام‌های کوتاه بپرهیزید. (نمونه نامناسب: x)
  • برای هر کاری، یک متغیر جداگانه تعریف کنید و از متغیر قبلی استفاده نکنید.

نمونه‌هایی از نام‌های معتبر و نامعتبر

Valid Invalid
usrName usr-name
usr_name usr name
user5 5user
_user #user
$ @
age let

مثال

در مثال زیر دو المنت HTML (آبجکت) وجود دارد.

HTML

<button id="btn">Click Here</button>
<p id="out-box"></p>    

ابتدا هر یک از آن دو را در یک متغیر قرار می دهیم. سپس می‌توانیم در طول برنامه، بارها و بارها از آنها استفاده بکنیم.

JS

// Declare & Assignment
let btn = document.getElementById("btn");
let outBox = document.getElementById("out-box");

// Access
btn.onclick = function() {
    outBox.innerHTML = "Hello, World!";
}

تمرین ۱

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • فایل script.js را طوری کامل کنید که مقدار وارد شده زیر آن نمایش داده شود.
  • برای هر المنت HTML یک متغیر تعریف کنید.


ثابت – Constant

ثابت (Constant) همانند متغیر است با این تفاوت که پس از مقدار دهی اولیه دیگر قابل تغییر نیست و مقدار آن تا پایان اجرای برنامه ثابت باقی می‌ماند.


const COLOR_ORANGE = "#FF7F00"; // Declare & Assignment

alert(COLOR_ORANGE); // Access

COLOR_ORANGE = "007F00"; // Error: invalid assignment

قواعد نامگذاری ثابت

قواعد نامگذاری ثابت همانند متغیر است.

مواردی که بهتر است رعایت شود:

  • از حروف بزرگ استفاده شود. (UPPER_CASE)
  • نام‌های چند کلمه‌ای SNAKE_CASE نوشته شود.

مثال

در مثال زیر دو المنت HTML (آبجکت) وجود دارد.

HTML

<button id="btn">Click Here</button>
<p id="out-box"></p>    

ابتدا هر یک از آن دو را در یک ثابت قرار می دهیم. سپس می‌توانیم در طول برنامه، بارها و بارها از آنها استفاده بکنیم.

JS

// Declare & Assignment
const BTN = document.getElementById("btn");
const OUT_BOX = document.getElementById("out-box");

// Access
BTN.onclick = function() {
    OUT_BOX.innerHTML = "Hello, World!";
}

تمرین ۲

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • فایل script.js را طوری کامل کنید که مقدار وارد شده زیر آن نمایش داده شود.
  • برای هر المنت HTML یک ثابت تعریف کنید.


انواع داده – Data Types

داده‌ها در جاواسکریپت، از نظر جنس به چند دسته تقسیم می‌شوند.

  • ساده (Primitive)
    • عدد (Numbers)
    • رشته (Strings)
    • منطقی (Boolean)
  • مرکب (Composite)
    • شیء (Objects)
    • آرایه (Arrays)
    • تابع (Functions)
  • بی‌ارزش (Trivial)
    • تهی (null)
    • نامعین (undefined)

رشته (String)

استرینگ به دنباله‌ای از کاراکترها گفته می‌شود. بنابراین هر کلمه یا جمله و حتی پاره‌ای از یک متن، استرینگ به شمار می‌آید.

همیشه استرینگ باید بین دو علامت کوت (quote) قرار گیرد.

  • استرینگ ساده (Simple):
    • سینگل کوت (Single quotes): ‘Hello’
    • دابل کوت (Double quotes): “Hello”
  • استرینگ پیشرفته (Extended):
    • بک تیک (Backticks): `Hello`

در استرینگ پیشرفته شما می توانید یک متغیر یا یک عبارت محاسباتی را قرار دهید. برای این کار باید آن متغیر یا عبارت را در بین {…}$ قرار دهید.

JS

let usrName = "bulbul";

// embed a variable
alert (`Hello ${usrName}!`); // Hello bulbul!

// embed an expression
alert (`The result is ${1 + 2}.`); // the result is 3.

عدد (Number)

مقادیر عددی در جاواسکریپت چند نوع می‌تواند باشد.

  • عدد صحیح (Integer): مثل 7
  • عدد حقیقی (float): مثل 1.618
  • بی‌نهایت (Infinity): n / 0
  • مبهم (NaN): 0 / 0 , ∞ - ∞ , ∞ / ∞ , ∞ * 0 , ∞ % n , 1

منطقی (Boolean)

مقادیر منطقی دو نوع است.

  • درست (true): 1
  • نادرست (false): 0

تهی (null)

محتوای متغیر پس از پاک کردن مقدار درون آن

نامعین (undefined)

محتوای متغیر قبل از نوشتن مقدار درون آن

شیء (Objects)

المنت‌های HTML

آرایه (Arrays)

تعدادی داده هم نوع که با ترتیب خاصی قرار گرفته‌اند.

تابع (Functions)


typeof

تابع typeof نوع داده را برمی‌گرداند.

JS

//   typeof(x);   Or   typeof x;
//======================================
t = typeof(1);            // t = 'number'

t = typeof(NaN);          // t = 'number'

t = typeof(Infinity);     // t = 'number'

t = typeof('foo');        // t = 'string'

t = typeof(true);         // t = 'boolean'

t = typeof(null);         // t = 'object'

t = typeof(window);       // t = 'object'

t = typeof(alert);        // t = 'function'

t = typeof(undefined);    // t = 'undefined'

تمرین ۳

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • فایل script.js را طوری کامل کنید که نوع مقدار وارد شده زیر آن نمایش داده شود.
  • برای هر المنت HTML یک متغیر تعریف کنید.


تبدیل نوع

برای تبدیل نوع توابع مختلفی در جاواسکریپت وجود دارد.

Number(x)

یک داده غیر عددی را به عدد تبدیل می‌کند. x+ نیز همین کار را می‌کند.

JS

n = Number('12.5');      // n = 12.5

n = Number('  12.5  ');  // n = 12.5

n = Number(' ');         // n = 0

n = Number('');          // n = 0

n = Number('Infinity');  // n = Infinity

n = Number('12.5px');    // n = NaN

n = Number('a12');       // n = NaN

n = Number('true');      // n = NaN

n = Number(true);        // n = 1

n = Number(false);       // n = 0

n = Number(null);        // n = 0

n = Number(undefined);   // n = NaN

n = Number(undeclared);  // Error

parseFloat(string)

یک استرینگ را تجزیه (Parse) می‌کند. و در صورت امکان یک عدد حقیقی برمی‌گرداند.

JS

n = parseFloat('12.5');      // n = 12.5

n = parseFloat('  12.5  ');  // n = 12.5

n = parseFloat(' ');         // n = NaN

n = parseFloat('');          // n = NaN

n = parseFloat('Infinity');  // n = NaN

n = parseFloat('12.5px');    // n = 12.5

n = parseFloat('a12');       // n = NaN

n = parseFloat('true');      // n = NaN

n = parseFloat(true);        // n = NaN

n = parseFloat(false);       // n = NaN

n = parseFloat(null);        // n = NaN

n = parseFloat(undefined);   // n = NaN

n = parseFloat(undeclared);  // Error

parseInt(string)

یک استرینگ را تجزیه (Parse) می‌کند. و در صورت امکان یک عدد صحیح برمی‌گرداند.

JS

n = parseInt('12.5');      // n = 12

n = parseInt('  12.5  ');  // n = 12

n = parseInt(' ');         // n = NaN

n = parseInt('');          // n = NaN

n = parseInt('Infinity');  // n = NaN

n = parseInt('12.5px');    // n = 12

n = parseInt('a12');       // n = NaN

n = parseInt('true');      // n = NaN

n = parseInt(true);        // n = NaN

n = parseInt(false);       // n = NaN

n = parseInt(null);        // n = NaN

n = parseInt(undefined);   // n = NaN

n = parseInt(undeclared);  // Error

String(x)

یک داده را به استرینگ تبدیل می‌کند. `{x}$` نیز همین کار را می‌کند.

JS

s = String(110);         // s = '110'

s = String(0);           // s = '0'

s = String(Infinity);    // s = 'Infinity'

s = String(NaN);         // s = 'NaN'

s = String(true);        // s = 'true'

s = String(false);       // s = 'false'

s = String(null);        // s = 'null'

s = String(undefined);   // s = 'undefined'

s = String(undeclared);  // Error

number.toFixed(x)

یک مقدار عددی را گرد می‌کند و سپس به استرینگ تبدیل می‌کند.

JS

let n = 2.3456;

s = n.toFixed();                // s = "2"
s = n.toFixed(0);               // s = "2"
s = n.toFixed(1);               // s = "2.3"
s = n.toFixed(2);               // s = "2.35"
s = n.toFixed(3);               // s = "2.346"
s = n.toFixed(7);               // s = "2.3456000"

s = 2.45.toFixed(1);            // s = "2.5"
s = 2.55.toFixed(1);            // s = "2.5"

s = -2.45.toFixed(1);           // s = -2.5
s = (-2.45).toFixed(1);         // s = "-2.5"

نکته: به علت تبدیل اعداد به باینری گاهی نتایج غیر منتظره پیش می‌آید. مثل

0.1 + 0.2 -> 0.30000000000000004
0.1 + 0.2 ≠ 0.3

با کمک toFixed از بروز این خطاها جلوگیری کنید.

Boolean(x)

یک داده را به مقدار منطقی تبدیل می‌کند. x!! نیز همین کار را می‌کند.

JS

r = Boolean(0);          // r = false

r = Boolean(5);          // r = true    Any non-zero number

r = Boolean(Infinity);   // r = true

r = Boolean(NaN);        // r = false

r = Boolean('');         // r = false

r = Boolean('bulbul');   // r = true    Any non-zero string

r = Boolean('0');        // r = true

r = Boolean(' ');        // r = true

r = Boolean('null');     // r = true

r = Boolean(null);       // r = false

r = Boolean(undefined);  // r = false

r = Boolean(undeclared); // Error

تمرین ۴

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • فایل script.js را طوری کامل کنید که نوع مقدار وارد شده را به استرینگ، عدد و منطقی تغییر دهد.
  • برای هر المنت HTML یک متغیر تعریف کنید.

تمرین ۵

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • فایل script.js را طوری کامل کنید که مقدار عرض و طول المنت را بدون واحد px نمایش دهد.
  • برای هر المنت HTML یک متغیر تعریف کنید.