جاواسکریپت: ۴- دیتا
دیتا – Data
دیتا: هر گونه اطلاعاتی که از هر راهی به دست آمده باشد؛ چه عملیاتی روی آن انجام گرفته باشد یا نه و چه دسته بندی شده باشد یا نه.
به دو روش دیتا را می‌توان در حافظه کامپیوتر نگهداری کرد.
- متغیر یا Variable: هنگام اجرای برنامه مقدار آن تغییر می‌کند.
- ثابت یا Constant: هنگام اجرای برنامه مقدار آن ثابت است.
متغیر – Variable
متغیر (Variable) جایی در حافظه است که دارای یک نام می‌باشد و می‌تواند یک مقدار (Value) را در خود نگاه دارد. و همزمان با اجرای برنامه، می‌تواند مقدار آن تغییر کند.
مراحل استفاده از متغیر
- تعریف یا Declare: تعیین نام متغیر و اختصاص فضا در حافظه
- مقداردهی یا Assignment: نوشتن مقدار در آن
- دسترسی یا Access: خواندن مقدار از آن
هنگام اجرای برنامه، مراحل دوم و سوم می‌تواند بارها و بارها تکرار شود.
روش‌های استفاده از متغیر
let msg; // Declare
msg = "Hello World!"; // Assignment
alert(msg); // Access
let msg = "Hello World!"; // Declare & Assignment
alert(msg); // Access
let msg = 5 + 2; // msg = 7; // Declare & Assignment
alert(msg); // Access
چند متغیر
// Multiple var
let msg = "Hello", wrd = "World!"; // Declare & Assignment
alert(msg); // Hello // Access
alert(wrd); // World! // Access
// Multiple var
let msg = wrd = "Hello World!"; // Declare & Assignment
alert(msg); // "Hello World!" // Access
alert(wrd); // "Hello World!" // Access
تغییر مقدار متغیر
let msg = "Hello"; // Declare & Assignment
msg = "World"; // Change
alert(msg); // Access
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 (آبجکت) وجود دارد.
<button id="btn">Click Here</button>
<p id="out-box"></p>
ابتدا هر یک از آن دو را در یک متغیر قرار می دهیم. سپس می‌توانیم در طول برنامه، بارها و بارها از آنها استفاده بکنیم.
// 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 (آبجکت) وجود دارد.
<button id="btn">Click Here</button>
<p id="out-box"></p>
ابتدا هر یک از آن دو را در یک ثابت قرار می دهیم. سپس می‌توانیم در طول برنامه، بارها و بارها از آنها استفاده بکنیم.
// 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`
در استرینگ پیشرفته شما می توانید یک متغیر یا یک عبارت محاسباتی را قرار دهید. برای این کار باید آن متغیر یا عبارت را در بین {…}$ قرار دهید.
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 نوع دیتا را برمی‌گرداند.
// 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+ نیز همین کار را می‌کند.
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) می‌کند. و در صورت امکان یک عدد حقیقی برمی‌گرداند.
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) می‌کند. و در صورت امکان یک عدد صحیح برمی‌گرداند.
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}$` نیز همین کار را می‌کند.
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)
یک مقدار عددی را گرد می‌کند و سپس آن را به استرینگ تبدیل می‌کند.
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!! نیز همین کار را می‌کند.
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 یک متغیر تعریف کنید.
