خلاصه‌ی مبانی جاوااسکریپت

بسم الله الرّحمن الرّحیم

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

ساختار کد

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

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

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

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

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

alert("بعد از نمایش این پیام خطا رخ می‌دهد.")

[۱, ۲].forEach(alert)

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

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

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

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

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

حالت Strict

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

'use strict';

...

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

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

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

متغیّرها (Variables)

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

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

نام متغیّر می‌تواند شامل این موارد باشد:

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

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

let x = 5;
x = "John";

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

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

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

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

تعامل

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

alert: پیامی را به کاربر نمایش می‌دهد.

prompt: پیامی را به کاربر نمایش می‌دهد که از او می‌خواهد متنی را تایپ کند. بعد متن تایپ شده را بر می‌گرداند. در صورتی که کاربر روی cancel کلیک کند یا کلید Esc را فشار دهد مقدار null را بر می‌گرداند.

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

این سه تابع modal هستند: به این معنا که به اجرای کد جاوااسکریپت را متوقّف می‌کنند و به کاربر اجازه نمی‌دهند که با بقیّه‌ی صفحه تعامل داشته باشد و کار کند، تا اینکه این کادرها بسته شوند. این ویژگی با طبیعت زبان جاوااسکریپت زیاد سازگار نیست، به همین دلیل سازندگان مرورگرها (به خصوص کروم) توصیه می‌کنند از روش‌های دیگری غیر از این‌ها استفاده شود و محدودیت‌هایی نیز به وجود آورده‌اند (مثلاً در کروم حتماً باید همان سربرگی که می‌خواهد این modalها را نمایش دهد در حالت focus باشد و…). ولی به دلیل سادگی این روش و سخت‌تر بودن روش‌های جایگزین، در این آموزش ما همیشه از همین‌ها استفاده می‌کنیم.

عملگرها

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

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

جمع (+)، تفریق (-)، ضرب (*)، تقسیم (/)، باقی‌مانده‌ی تقسیم (%) و توان (**).

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

انتساب

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

بیتی (bitwise)

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

سه‌تایی (ternary)

تنها عملگری است که سه پارامتر می‌گیرد: cond ? resultA : result اگر cond مقداری truthy باشد (در تبدیل به بولین معادل true باشد)، مقدار resultA را بر می‌گرداند، در غیر این صورت resultB.

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

عملگر «و» (&&): در صورتی که طرف چپ falsy باشد همان را بر می‌گرداند و در غیر این صورت طرف راست را بر می‌گرداند (در صورت اوّل کلاً طرف راست بررسی نخواهد شد که truthy است یا falsy).

عملگر «یا» (||): در صورتی که طرف چپ truthy باشد همان را بر می‌گرداند و در غیر این صورت طرف راست را بر می‌گرداند (در صورت اوّل کلاً طرف راست بررسی نخواهد شد که truthy است یا falsy).

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

کوچکتر (<)، بزرگتر (>)، کوچکتر یا مساوی (<=)، بزرگتر یا مساوی (>=)، نامساوی (!=) و…

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

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

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

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

سایر عملگرها

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

حلقه‌ها (Loops)

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

// ۱
while (شرط) {
    ...
}

// ۲
do {
    ...
} while (شرط);

// ۳
for(let i = 0; i < 10; i++) {
    ...
}

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

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

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

ساختار switch

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

برای مثال:

let age = prompt("چند سالته؟", ۱۸);

switch (age) {
    case 18:
        alert("خروجی تابع پرامپت رشته است، نه عدد"); // کار نمی‌کنه
        break;

    case "18":
        alert("این درست کار می‌کنه.");
        break;

    default:
        alert("هر مقداری که یکی از موارد بالا نباشه.");
}

تابع‌ها (functions)

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

۱. اعلام تابع (function declaration):

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

۲. عبارت تابعی (function expression):

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

عبارت تابعی می‌تواند اسم هم داشته باشد، مثلاً sum = function name(a, b) ولی این اسم فقط در داخل خود تابع مشاهده می‌شود و قابل دسترسی است.

۳. تابع پیکانی (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.

منبع اصلی:

//javascript.info/javascript-specials