۱۴ مفهوم بنیادی جاوا اسکریپت — به زبان ساده

در این مقاله تلاش خواهیم کرد نقشه جامعی از مبانی بنیادی جاوا اسکریپت ارائه کنیم. این نقشه با در نظر گرفتن افراد مبتدی نوشته شده است و اساساً مفاهیم بنیادی اصلی را بدون نیاز به صرف زمان زیاد برای مطالعه تک‌تک مفاهیم در اختیار شما قرار می‌دهد. با ما همراه باشید تا با 14 مفهوم بنیادی جاوا اسکریپت آشنا شوید. هدف این مقاله آن است که تصویری کلی از همه مفاهیم این زبان ارائه کند تا بتوانید یادگیری آن را سریع‌تر آغاز کنید. با این حال این به آن معنی نیست که این یک مقاله جامع است. در این مقاله از توضیحات کوتاه استفاده شده است که امید می‌رود مورد توجه شما قرار گیرد.

ساختار کد

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

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

برای نمونه عبارت زیر یک گزاره است:

1alert('Say hi');

نقطه‌ویرگول‌ها اجباری نیستند و در مواردی که یک شکستگی خط بین خطوط اتفاق می‌افتد درج می‌شوند. در واقع معادل نقطه برای جملات هستند. اما گاهی اوقات شکستگی خطوط ما را مطمئن نمی‌سازند که گزاره‌ها نیز شکسته شده‌اند. عملگر + می‌تواند به عنوان یک اتصال‌دهنده بین خطوط استفاده شود. به مثال زیر توجه کنید:

1console.log('This ' + name + ' is gibrish');

use strict

برای مدت‌های مدیدی، جاوا اسکریپت در مورد سازگاری با نسخه‌های پیشین دغدغه‌ای نداشت، زیرا انتشار و قابلیت‌های جدید همپوشانی نداشت، اما بالاخره این همپوشانی ایجاد شد. در سال 2009، استاندارد ECMAScript 5 به اختصار ES5 انتشار یافت و قابلیت‌های جدید برخی از قابلیت‌های قبلی را اصلاح کردند. به صورت پیش‌فرض این اصلاح‌ها تا زمانی که از عبارت use strict استفاده نکنید اعمال نمی‌شوند. این عبارت use strict باید در ابتدای کد جاوا اسکریپت قرار گیرد و جز در این صورت اعمال نمی‌شود. امروزه همواره از use strict استفاده می‌کنیم، زیرا نمی‌خواهیم از پیاده‌سازی‌های قدیمی جاوا اسکریپت استفاده کنیم.

متغیرها

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

توجه کنید که این وضعیت متفاوت از null است. مقدار null به طور معمول باید به صورت دستی انتساب یابد. استفاده از مقدار null به این معنی است که به این واقعیت واقفید که مکان حافظه خالی است و فراموش نکرد‌ه‌اید آن را پر کنید و یا این که در طی کار اتفاق نادرستی رخ داده است. در اسکریپت‌های قدیمی برای اعلان متغیر از var استفاده می‌شد که تأثیر متفاوتی بر خروجی نهایی دارد.

انواع داده

جاوا اسکریپت در قیاس با زبان‌های برنامه‌نویسی دیگر، انواع داده‌های گسترده‌ای ندارد. در ادامه فهرست خلاصه‌ای از این انواع ارائه شده است.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

number

1let someNumber = 2984;
2someNumber = 29.84;

برای انواع عددی از گیومه استفاده نمی‌کنیم. امکان تعریف اعداد صحیح و اعشاری وجود دارد و عملگرهای ابتدای روی این اعداد کار می‌کنند. یک نوع عدد خاص به صورت infinity نیز وجود دارد. برای تولید آن کافی است یک را بر صفر تقسیم کنید (1/0). این عدد در واقع بزرگ‌ترین عدد است و بی‌نهایت نامیده می‌شود.

اگر مقداری به صورت NaN دریافت کردید، معنی‌اش این است که یک خطای محاسباتی دارید. همچنین به این معنی است که تلاش کرده‌اید عملیات ریاضیاتی را روی چیزی اجرا کنید که معنی ندارد، مثلاً یک رشته متنی را بر یک عدد تقسیم کنید.

BigInt

بزرگ‌ترین عددی که در جاوا اسکریپت می‌توانیم داشته باشیم، عددی با طول 16 رقم است. در اغلب موارد اپلیکیشن‌های ما از اعداد با طول کمتر از 16 رقم استفاده می‌کنند. با این حال گاه ممکن است در کاربردهایی مانند رمزنگاری به اعداد بسیار بزرگ نیاز داشته باشیم. یک مقدار BigInt با افزودن n به انتهای عدد ساخته می‌شود:

1const someMassiveNumber = 1234567890123456789012345678901234567890n;

String

String یا رشته یک متغیر متنی است که بر اساس قرارگیری درون گیومه مشخص می‌شود. 3 نوع گیومه به شرح زیر وجود دارند:

• گیومه تکی (')
• گیومه جفتی (")
• بک‌تیک (`)

گیومه‌های تکی و جفتی در جاوا اسکریپت تفاوتی ندارند. بک‌تیک بیشتر برای بسط کارکرد یک رشته جهت جاسازی متغیرها با استفاده از ساختار {} $ استفاده می‌شوند. به مثال زیر توجه کنید:

1let cat = "Tibbers";
2console.log(`Hi, ${cat}`);

اگر در مثال فوق از گیومه استفاده کنیم، صرفاً به یک رشته معمولی تبدیل می‌شود.

Boolean

متغیرهای بولی دو مقدار True یا False را نگهداری می‌کنند. به طور معمول برای نمایش نتیجه نوعی مقایسه مورد استفاده قرار می‌گیرد.

Null

Null به معنی تهی یا هیچ است. شبیه این مقدار را در زبان‌های دیگر برنامه‌نویسی ندیده‌ایم.

Undefined

Undefined به معنی این است که یک مقدار هنوز انتساب نیافته است.

Object

هر نوع داده دیگری به جز این انواع داده «ابتدایی» (Primitive) نامیده می‌شود، زیرا ساده هستند. اما اشیا یا objects امکان داشتن بیش از یک آیتم را در اختیار ما قرار می‌دهند.

تبدیل نوع

برخی اوقات‌ لازم است که بین انواع مختلف به هر دلیلی سوئیچ کنیم. روش کار به صورت زیر است:

1let someFakeBoolean = true;
2someFakeBoolean = String(someFakeBoolean);
3//using String() will convert your variable into a string
4let someFakeNumber = "3872";
5someFakeNumber = Number(someFakeNumber);
6//using Number() will convert your string into a number

لطفاً توجه داشته باشید که تبدیل کردن متن تصادفی به اعداد میسر نیست و به طور کلی انجام چنین کاری هیچ معنی هم ندارد، چون در نهایت مقدار NaN به دست می‌آید. ()Boolean هر مقدار را به خروجی true یا false تبدیل می‌کند. هر چیز خالی مانند 0، null، undefined و NaN مقدار False بازگشت می‌دهد و بقیه موارد خروجی True دارند.

عملگرها

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

AND (&) OR (|) XOR (^) NOT (~) LEFT SHIFT (<<) RIGHT SHIFT (>>) ZERO-FILL RIGHT SHIFT (>>>)

زمانی که از عملگرها استفاده می‌کنیم، می‌توانیم هر کاری را که دوست داریم روی مقادیر اجرا کنیم. به مثال زیر توجه کنید:

1printLine(line, id){
2 if(line & id){ //if both exists, run this code }
3}

مقایسه‌ها

این‌ها شامل عملگرهای مقایسه ریاضیاتی هستند:

• بزرگ‌تر یا کمتر از: a > b, a < b.
• بزرگ‌تر یا مساوی و کمتر یا مساوی: a >= b, a <= b.
• تساوی: a == b (توجه کنید که علامت مساوی منفرد به معنی انتساب است)
• نامساوی: a!=b

alert, prompt, confirm

این‌ها مواردی هستند که به صورت یک پنجره مجزا روی صفحه ظاهر می‌شوند:

1alert(yourMessageHere);

Prompt-ها دو آرگومان می‌گیرند که یکی سؤال و دیگری پاسخ است:

1let promptMe = prompt('your question here', ['blue pill', 'red pill']);
2alert(`You've taken the ${promptMe}`);

Confirm به منظور گرفتن تأیید کاربر استفاده می‌شود:

1let isOver18 = confirm("Are you over 18?");
2
3alert( isOver18 ); // true if OK is pressed

گزاره‌های شرطی

گزاره مشهور if ستون فقرات یک پروژه ابتدایی جاوا اسکریپت را تشکیل می‌دهد. ایده کار ساده است. «اگر» چیزی شرط مورد نظر را داشته باشد، کد اجرا می‌شود. به مثال زیر توجه کنید:

1if (true) alert('woot!');

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

علاوه بر گزاره if، گزاره‌های else if و esle نیز وجود دارند. Else if یک گزاره if را بسط می‌دهد. Esle صرفاً در مواردی که همه گزاره‌های دیگر برقرار نباشند، اجرا می‌شود. در مثال زیر این حالت بررسی شده است:

1if(false){
2   //this code won't run because it returned false 
3}else if(false){
4   //this also won't run
5}else if(false){
6   //still nope
7}else {
8   //final catch all
9}

حلقه‌ها

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

1let i = 0;
2while(condition){
3  //some code here
4  //don't forget to set your exit clause by modifying the condition to return false. Most people just use i++
5}

حلقه‌های do…while ساختار معکوسی دارند و شرط حلقه را پس از اجرای کد بررسی می‌کنند، چون گاهی اوقات لازم است که اول کد را اجرا کنیم و سپس شرط را بررسی نماییم. به مثال زیر توجه کنید:

1do{
2  //some code here
3}while(condition);

گزاره‌های Switch

گزاره‌های switch اساساً امکان نوشتن گزینه‌ها را فراهم می‌سازند. به مثال زیر توجه کنید:

1switch(yourValueHere){ 
2   case 'optionOne' :    
3     //your code here   
4   break; 
5   case 'optionTwo':   
6     //your code here   
7   break; 
8   case 'optionThree':   
9     //your code here   
10   break; 
11   default:   
12     //your fallback code here 
13}

همچنین می‌توان موارد مختلف را طوری گروه‌بندی کرد که نیازی به نوشتن خروجی یکسان بیش از یک بار وجود نداشته باشد.

1switch(yourValueHere){ 
2   case 'optionOne' :    
3   case 'optionTwo':   
4     //your code here   
5   break; 
6   case 'optionThree':   
7     //your code here   
8   break; 
9   default:   
10     //your fallback code here 
11}

تابع‌ها

تابع‌ها، بلوک‌های سازنده اپلیکیشن‌ها، کتابخانه‌ها، فریمورک‌ها و هر برنامه جاوا اسکریپت هستند. برخی تابع‌های داخلی از قبیل ()alert و ()prompt در زبان جاوا اسکریپت وجود دارند که قبلاً بررسی کردیم. علاوه بر این‌ها شما می‌توانید تابع‌هایی برای خودتان بنویسید:

1function functionNameHere(){
2  //your code here
3}

سپس به صورت زیر می‌توانید تابع‌تان را فراخوانی کنید:

1functionNameHere();

عبارت‌های تابعی

برای نوشتن یک تابع بیش از یک روش وجود دارد. برخی روش‌های آن در مثال زیر ارائه شده است:

1function yourFunctionName(){
2 // some code here
3}
4let anotherFunction = function(){}

تابع‌های Arrow

یک تابع arrow صرفاً ساختاری متفاوت برای نوشتن کوتاه‌تر تابع‌ها است:

1let functionNameHere = (argumentsHere) => //do something

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

1let cat = () => { 
2   //this is 
3   //a multi-line 
4   //example 
5   return someValue; //is required. Can just be a straight return; 
6}

زمانی که از آکولاد {} در تابع‌های arrow استفاده می‌کنیم، باید مطمئن شویم که از return نیز برای خروج از آن استفاده می‌کنیم. به این ترتیب به پایان این مقاله می‌رسیم.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های‌ JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش JavaScript ES6 (جاوا اسکریپت)
• آموزش جاوا اسکریپت — مجموعه مقالات جامع وبلاگ فرادرس
• کار با JSON در جاوا اسکریپت — راهنمای کاربردی
• حلقه for در جاوا اسکریپت — از صفر تا صد + مثال و کد

==