خلاصه‌ی فصل

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

ساختار کد

دستورات (statementها) با نقطه‌ویرگول انگلیسی (;) از یکدیگر جدا می‌شوند.

alert('Hello'); alert('World');

معمولاً همین که به خط بعدی می‌روید نیز به منزله‌ی جداسازی دستورات در نظر گرفته می‌شود، بنابراین این کد هم به درستی کار می‌کند:

alert('Hello')
alert('World')

به این موضوع «درج خودکار ویرگول‌نقطه (automatic semicolon insertion)» گفته می‌شود. ولی گاهی اوقات درست کار نمی‌کند، مثل اینجا:

alert("There will be an error after this message")

[1, 2].forEach(alert)

در بیشتر سبک‌های کدنویسی پیشنهاد شده است که حتماً بعد از هر دستور ویر‌گول‌نقطه گذاشته شود.

لازم نیست بعد از بلاک‌های کد {…} و ساختارهایی که با این بلاک‌ها ساخته می‌شوند، مثل حلقه‌ها ویرگول‌نقطه قرار دهید.

function f() {
  // بعد از ساخت تابع، نیازی به ویرگول‌نقطه نیست.
}

for(;;) {
  // بعد از حلقه نیازی نیست ویرگول‌نقطه بگذارید.
}

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

برای اطّلاعات بیشتر اینجا را ببینید ساختار کد.

حالت Strict

برای اینکه تمام قابلیت‌های مدرن جاوااسکریپت فعّال شود لازم است که فایل جاوااسکریپت خود را با عبارت "use strict" شروع کنیم:

'use strict';

...

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

بدون نوشتن "use strict" هم کد ما کار می‌کند، ولی بعضی چیزها در حالت قدیمی خود عمل می‌کنند. ما معمولاً رفتار مدرن آن‌ها را ترجیح می‌دهیم.

بعضی از ویژگی‌های مدرن جاوااسکریپت (مثل کلاس‌ها که بعداً به آن می‌رسیم) به صورت خودکار و بدون اینکه نیازی باشد "use strict" را بنویسیم کد را در حالت strict اجرا می‌کنند.

برای اطلاعات بیشتر اینجا را ببینید: حالت مدرن، “use strict”.

متغیّرها (Variables)

می‌تواند به شکل‌های زیر ساخته شود:

• let
• const (ثابت، نمی‌توان مقدارش را تغییر داد)
• var (سبک قدیمی، که بعداً تفاوت‌هایش را می‌بینیم)

نام متغیّر می‌تواند شامل این موارد باشد: حروف و ارقام، ولی اوّلین کاراکتر نمی‌تواند رقم باشد- . کاراکترهای $ و _ هم مثل سایر حروف الفبا مجاز هستند- . حروف الفبای غیر انگلیسی و حروف تصویری هم مجاز هستند، ولی معمولاً استفاده نمی‌شوند- .

نوع متغیّر پویا است و هر نوع مقداری را می‌توان در آن نگهداری کرد:

let x = 5;
x = "John";

8 نوع داده وجود دارد:

• عدد(number) برای اعداد اعشاری و اعداد صحیح،
• bigint برای اعداد صحیح که طول دلخواه دارند،
• رشته(string) برای متن‌ها،
• بولین(boolean) برای مقادیر منطقی: true/false،
• null: نوعی که فقط دارای مقدار خاص null است و نشان‌دهنده‌ی “خالی بودن” یا "وجود نداشت"ن است.
• undefined: نوعی که فقط دارای مقدار خاص undefined است و نشان‌دهنده‌ی این است که چیزی “مقداردهی نشده”.
• شیء(object) و symbol: برای ساختارهای اطّلاعاتی پیچیده و شناسانگرهای منحصر به فرد که هنوز آنها را یاد نگرفته‌ایم.

عملگر typeof نوع هر مقداری را در قالب یک رشته به ما بر می‌گرداند با دو استثناء:

typeof null == "object" // اشتباهی در زبان جاوااسکریپت
typeof function(){} == "function" // تابع‌ها در اصل زیرمجموعه‌ای از اشیاء هستند

برای اطلاعات بیشتر متغیرها و انواع داده را ببینید

تعامل

ما از مرورگر به عنوان محیط کار خود استفاده می‌کنیم، در این محیط چند تابع برای ارتباط با کاربر وجود دارد:

prompt(question, [default])

question را به کاربر نمایش می‌دهد که از او می‌خواهد متنی را تایپ کند. بعد متن تایپ شده را بر می‌گرداند. در صورتی که کاربر روی “cancel” کلیک کند مقدار null را بر می‌گرداند.

confirm(question)

question را نشان می‌دهد و منتظر می‌ماند تا کاربر روی دکمه‌ی cancel یا ok کلیک کند. در صورت کلیک روی ok مقدار true و در صورت کلیک روی cancel یا زدن Esc مقدار false را برمی‌گرداند.

alert(message)

message را به کاربر نمایش می‌دهد

تمام این توابع modal هستند، آنها اجرای کد را متوقف می‌کنند و از تعامل کاربر با صفحه تا زمانی که جواب بدهد جلوگیری می‌کنند.

مثال:

let userName = prompt("Your name?", "Alice");
let isTeaWanted = confirm("Do you want some tea?");

alert( "Visitor: " + userName ); // Alice
alert( "Tea wanted: " + isTeaWanted ); // true

اطلاعات بیشتر در: تعاملی: alert، prompt، confirm.

عملگرها

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

عملگرهای محاسباتی

عملگرهای عادی: * + - /, و نیز % برای محاسبه‌ی باقیمانده‌ی تقسیم و ** برای به توان رساندن اعداد.

عملگر دودویی + رشته‌ها را به هم وصل می‌کند. و اگر یکی از دو طرف این عملگر از نوع رشته باشد، طرف دیگر به صورت خودکار به رشته تبدیل می‌شود.

```js run
alert( '1' + 2 ); // '12', string
alert( 1 + '2' ); // '12', string
```

مقداردهی (Assignments)

دو نوع مقداردهی داریم: مقداردهی معمولی مثل a = b و مقداردهی ترکیبی مثل a *= 2.

بیتی (Bitwise)

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

شرطی (Conditional)

تنها اپراتور 3 پارامتری: cond ? resultA : resultB. اگر cond truthy باشد، resultA را برمی‌گرداند، در غیر این صورت resultB.

عملگرهای منطقی (Logical)

عملگر منطقی “و” && با عملگر “یا” || ارزیابی کوتاه انجام می‌دهند و سپس مقداری که ارزیابی در آنجا متوقف شود را برمی‌گردانند (نه حتما true/false). عملگر منطقی “نفی” ! عملوند را به boolean تبدیل می‌کند و مقدار برعکس را برمی‌گرداند.

عملگر Nullish coalescing

عملگر ?? راهی برای انتخاب یک مقدار تعریف شده از یک لیست متغیرها را مهیا می‌کند. نتیجه‌ی a ?? b برابر با a است مگر اینکه این متغیر null/undefined باشد که در این صورت برابر با b است.

عملگرهای مقایسه‌ای

عملگر بررسی تساوی (==) برای مقادیری که نوع متفاوتی از یکدیگر دارند، هر دو را به نوع عدد تبدیل می‌کند (به استثنای null و undefined که این دو با هم برابرند و با هیچ چیز دیگر برابر نیستند)، پس اینها برابرند:

alert( 0 == false ); // true
alert( 0 == '' ); // true

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

عملگر بررسی تساوی سخت‌گیرانه === تبدیل نوع را انجام نمی‌دهد: نوع های متفاوت برای این عملگر همیشه به معنی مقدارهای متفاوت است.

مقادیر null و undefined خاص هستند. این دو مقدار با هم مساوی در نظر گرفته می‌شوند و با هیچ چیز دیگری مساوی نیستند.

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

سایر عملگرها

عملگرهای دیگری مثل کاما و غیره نیز در زبان جاوااسکریپت وجود دارند.

اطّلاعات بیشتر در: عملگرهای پایه، ریاضیات، مقایسه ها، عملگر های منطقی، عملگر Nullish coalescing '??'.

حلقه‌ها

• تا به حال با 3 نوع حلقه آشنا شدیم:

  // 1
  while (condition) {
    ...
  }
  
  // 2
  do {
    ...
  } while (condition);
  
  // 3
  for(let i = 0; i < 10; i++) {
    ...
  }

• متغیّری که درون for(let...) ساخته می‌شود فقط در درون خود حلقه دیده می‌شود و قابل استفاده است. البته شما می‌توانید کلمه‌ی let را از اینجا حذف کنید تا از یکی از متغیّرهایی که از قبل ساخته‌اید استفاده کنید.

• دستورهای break/continue به اجازه می‌دهند تا از کل حلقه یا تکرار کنونی خارج شویم. از برچسب‌ها(labels) برای شکستن حلقه‌های تو در تو استفاده کنید.

جزئیات بیشتر را در: حلقه ها: while و for .مطالعه کنید

بعداً که با اشیاء آشنا شویم چند مدل حلقه‌ی دیگر را نیز در جاوااسکریپت می‌آموزیم.

ساختار switch

ساختار “switch” می‌تواند جایگزین چند بررسی از طریق if بشود. در این ساختار به صورت خودکار از === برای مقایسه‌ها استفاده می‌شود.

برای مثال:

let age = prompt('Your age?', 18);

switch (age) {
  case 18:
    alert("Won't work"); // نتیجه عدد نیست، بلکه رشته است
    break;

  case "18":
    alert("This works!");
    break;

  default:
    alert("Any value not equal to one above");
}

جزئیات بیشتر را در دستور "switch" مطالعه کنید.

تابع‌ها (Functions)

ما تا به حال با سه روش برای ساخت تابع‌ها آشنا شدیم:

1. Function Declaration:

   function sum(a, b) {
     let result = a + b;
   
     return result;
   }

2. Function Expression:

   let sum = function(a, b) {
     let result = a + b;
   
     return result;
   };

3. تابع پیکانی (Arrow Function)

   // عبارت سمت راست
   let sum = (a, b) => a + b;
   
   // یا مدل چند خطی با {...}، که در این حالت باید return :هم بنویسید
   let sum = (a, b) => {
     // ...
     return a + b;
   }
   
   // بدون آرگومان ورودی
   let sayHi = () => alert("Hello");
   
   // فقط یک آرگومان
   let double = n => n * 2;

• تابع‌ها می‌توانند دارای متغیّرهایی باشند که داخل بدنه‌ی تابع یا پارامترهای آن ساخته می‌شوند که به آن‌ها متغیّرهای محلّی می‌گوییم. این گونه متغیّرها فقط داخل خود تابع دیده می‌شوند و فقط در تابع به آن‌ها دسترسی داریم.
• پارامترهای تابع می‌توانند مقدار پیش‌فرض بپذیرند: function sum(a = 1, b = 2) {...}
• تابع‌ها همیشه چیزی را بر می‌گردانند. اگر داخل تابع اصلاً از دستور return استفاده نشده باشد، نتیجه undefined می‌شود.

برای مشاهده‌ی جزئیات بیشتر توابع (Functions) و مقاله "function-expressions-arrows" پیدا نشد را ببینید.

هنوز خیلی مطلب باقی مانده است

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