آرایه (Array) چندین متغیر با یک نام است. هر یک از متغیرهای درون آرایه با یک شماره که به آن ایندکس (Index) می‌گوییم؛ از یکدیگر متمایز می‌شوند. هر یک از متغیرهای درون آرایه را اِلمنت‌، می‌نامند.

قواعد نام گذاری آرایه

• قواعد نامگذاری آرایه همانند متغیر است.
• ایندکس درون […] بِرَکِت Square Bracket نوشته می‌شود.
• ایندکس همیشه از عدد صفر آغاز می‌شود.

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

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

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

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Access
alert(color[0]);    // red
alert(color[1]);    // gold
alert(color[2]);    // olive
alert(color[3]);    // beige
alert(color[4]);    // khaki

// Declare
let color = [];

// Assignment
color[0] = "red";
color[1] = "gold";
color[2] = "olive";
color[3] = "beige";
color[4] = "khaki";

// Access
alert(color[0]);    // red
alert(color[1]);    // gold
alert(color[2]);    // olive
alert(color[3]);    // beige
alert(color[4]);    // khaki

تغییر مقدار یک المنت

شما همیشه می‌توانید مقدار درون هر یک از المنت‌های آرایه را تغییر دهید.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Access
alert(color[2]);    // olive

// Change
color[2] = "lime";

// Access
alert(color[2]);    // lime

افزودن یک المنت

شما همیشه می‌توانید یک المنت، به انتهای آرایه بیفزایید.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige"];

// Access
alert(color[4]);    // undefined 

// Add Element
color[4] = "khaki";

// Access
alert(color[4]);    // khaki

arr.length

تعداد المنت‌های آرایه را ارائه می‌کند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
color[5] = "lime";

// Count
alert(color.length);    // 6

حفره تعریف نشده

افزودن المنت می‌تواند در بین آرایه حفره تعریف نشده (undefined holes) ایجاد کند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
color[7] = "lime";

// Count
alert(color.length);    // 8

arr.push(elm1, elm2, …)

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

این فانکشن تعداد جدید المنت‌های آرایه را برمی‌گرداند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let n = color.push("lime");

// Access
alert(n);    // 6
alert(color) // red, gold, olive, beige, khaki, lime

arr.pop( )

آخرین المنت آرایه را حذف می‌کند و مقدار آن را برمی‌گرداند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let c = color.pop();

// Access
alert(c);    // khaki
alert(color) // red, gold, olive, beige

arr.shift( )

اولین المنت آرایه را حذف می‌کند و مقدار آن را برمی‌گرداند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let c = color.shift();

// Access
alert(c);    // red
alert(color) // gold, olive, beige, khaki

arr.unshift(elm1, elm2, …)

یک یا چند المنت به ابتدای آرایه می‌افزاید. و تعداد جدید المنت‌های آرایه را برمی‌گرداند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let n = color.unshift("lime");

// Access
alert(n);    // 6
alert(color) // lime, red, gold, olive, beige, khaki

arr.splice(start, delCount, elm1, elm2, …)

یک یا چند المنت در میان آرایه حذف یا اضافه می‌کند. المنت‌های حذف شده را برمی‌گرداند.

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3);

// Access
alert(color1);    // red, gold, olive
alert(color2);    // beige, khaki, lime

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3,2);

// Access
alert(color1);    // red, gold, olive, lime
alert(color2);    // beige, khaki

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3,2, "pink", "blue", "tan");

// Access
alert(color1);    // red, gold, olive, pink, blue, tan, lime
alert(color2);    // beige, khaki

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3, 0, "pink", "tan");

// Access
alert(color1);  // red, gold, olive, pink, tan, beige, khaki, lime
alert(color2);  // []

arr.concat(arrX, arrY, …)

دو یا چند آرایه را به هم پیوند می‌دهد و یک آرایه برمی‌گرداند.

// Declare & Assignment
let color = [];
let color1 = ["red", "gold", "olive"];
let color2 = ["beige", "khaki", "lime"];

color = color1.concat(color2);

// Access
alert(color1);    // red, gold, olive
alert(color2);    // beige, khaki, lime
alert(color);    // red, gold, olive, beige, khaki, lime

arr.sort( )

المنت‌های یک آرایه را به ترتیب الفبا، مرتب می‌کند. و المنت‌های تعریف نشده را حذف می‌کند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki", "lime"];

color.sort();

// Report
alert(color);  // beige, gold, khaki, lime, olive, red

arr.sort(function(a, b) {…})

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

• اگر function(a, b) < 0 بود؛ a قبل از b
• اگر function(a, b) = 0 بود؛ جای a و b تغییر نمی‌کند.
• اگر function(a, b) > 0 بود؛ a بعد از b

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

const compare = function(a, b) {

  if (a < b) { return -1; }

  if (a > b) { return 1;  }

  // a = b
  return 0;
}

// Short form
const compare = function(a, b) {
  return a - b;
}

// Arrow form
const compare = (a, b) => a - b;

این فانکشن را می توانید مستقیما در sort تعریف کنید.

// Declare & Assignment
let num = [4, 2, 5, 1, 3];

num.sort((a, b) => a - b);

// Report
alert(num);  // 1, 2, 3, 4, 5

arr.filter(function(value, index) {…})

با المنت‌هایی که تست را پاس کنند، یک آرایه جدید می سازد.

• متد filter یک فانکشن را به عنوان پارامتر می‌گیرد.
• این فانکشن دو پارامتر می‌تواند داشته باشد. اولی مقدار المنت و دومی ایندکس آن.
• باید این فانکشن مقدار true یا false را برگرداند.

مثال زیر المنت‌های فرد را حذف می‌کند.

// Declare & Assignment
let num = [4, 2, 5, 1, 3];

let result = num.filter(val => val % 2 == 0);

// Report
alert(result);  // 4, 2

arr.map(function(value, index) {…})

یک فانکشن را روی همه المنت‌های آرایه اجرا می‌کند و آرایهٔ جدید می‌سازد.

• متد map یک فانکشن را به عنوان پارامتر می‌گیرد.
• این فانکشن دو پارامتر می‌تواند داشته باشد. اولی مقدار المنت و دومی ایندکس آن.
• مقدار بازگشتی این فانکشن در آرایه جدید قرار می‌گیرد.

مثال زیر مقدار هر المنت‌ را دو برابر می‌کند.

// Declare & Assignment
let num = [4, 2, 5, 1, 3];

let result = num.map(val => val * 2);

// Report
alert(result);  // 8, 4, 10, 2, 6

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• تنها فایل script.js را می‌توانید تغییر دهید.
• ابتدا تعدادی عدد را بگیرد سپس میانه آنها را محاسبه و گزارش کند. (تعداد اعداد از پیش معلوم نیست.)

حلقه تکرار – Iterative Loop

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

جاواسکریپت نیز مانند بسیاری از زبان‌های دیگر می‌تواند به هنگام اجرا، از موس، کیبرد یا … اطلاعاتی را دریافت کند و بر اساس آن بی درنگ (Real-time) عملیاتی را انجام دهد.

واژه ایونت (Event) به معنای رویداد است. هرگاه بر روی یک آبجکت چیزی رخ دهد، مثلا با موس روی آن کلیک شود، یا دکمه‌ای از کیبرد زده شود؛ آن آبجکت، یک سیگنال می‌فرستد. و به وسیله آن نشان می‌دهد، که چه چیزی روی داده است. در جاواسکریپت به آن سیگنال، ایونت گفته می‌شود. صدها نوع ایونت وجود دارد که شما می‌توانید از آنها در پروژه خود استفاده کنید. ایونت‌های ماوس، کیبرد، تاچ، شبکه … که در اینجا نمی‌توان به همه آنها پرداخت.

چند نمونه از ایونت‌های پرکاربرد موس:

• click – کلیک چپ
• dblclick – دابل کلیک
• contextmenu – کلیک راست
• mousedown / mouseup – هنگامی که دکمه ماوس فشرده / رها می‌شود.
• mouseenter / mouseleave – هنگامی که نشانگر ماوس بر روی آبجکت وارد / خارج می‌شود.
• mousemove – هنگامی که نشانگر ماوس جابجا می‌شود.

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

• مختصات مکان کلیک
• زمان دقیق کلیک
• کلیدهای همراه (Shift یا Ctrl یا Alt) کلیک
• …

واژه هَندِل (Handle) به معنای گوش به زنگ بودن و واکنش مناسب نشان دادن است. گاهی رسیدگی کردن یا مدیریت کردن نیز ترجمه می‌شود. در برنامه نویسی، به فانکشنی که هنگام رخ دادن یک ایونت اجرا می‌شود، Event Handler می‌گویند.

در جاواسکریپت به ۳ روش می‌توان آن را راه‌اندازی کرد.

• HTML Attribute
• Element Property
• Element Method

هر کدام از این روش‌ها کاربرد ویژه‌ای دارد. و در جای خودش باید به کار گرفته شود.

HTML Attribute

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

<tag onclick="myFunc()">...</tag>        

const myFunc = function() {
    ...
};

تنها برای نوشتن کدهای کوتاه، مانند نمونه زیر، مناسب است.

<tag onclick="alert('Click!')">...</tag>        

Element Property

در همه آبجکت‌ها، به ازای هر ایونت، یک پراپرتی (برای هندل کردن آن ایونت) وجود دارد.

myElem.onclick = function() { ... };

اما بیش از یک فانکشن نمی‌توان به آن نسبت داد. و تنها آخرین فانکشن اجرا می‌شود.

myElem.onclick = myFunc1;
myElem.onclick = myFunc2;    // replaces myFunc1

Element Method

در این روش از متد addEventListener استفاده می‌شود.

myElem.addEventListener("click", myFunc);

این راه از راه‌های قبلی کمی پیچیده‌تر است. اما در عوض توانایی‌های بیشتری دارد. برای نمونه:

با یک ایونت چند فانکشن می‌تواند اجرا شود.

myElem.addEventListener("click", myFunc1);
myElem.addEventListener("click", myFunc2);

در بین برنامه با کمک متد removeEventListener می‌توان آن را از کار انداخت.

myElem.addEventListener("click", myFunc);
...
myElem.removeEventListener("click", myFunc);

ایونت: نخستین آرگومان

در همه روش‌ها فانکشن می‌تواند ایونت را به عنوان نخستین آرگومان دریافت کند. و از این راه در درون فانکشن شما به پراپرتی‌های ایونت دسترسی دارید.

myElem.onclick = function(e) { ... };

// Or

myElem.addEventListener("click", function(e) { ... });

ایونت‌ها

Events Reference

ایونت‌های ماوس

پراپرتی‌های ایونت ماوس

• مکان
  • screenX, screenY: نسبت به مانیتور
  • pageX, pageY: نسبت به صفحه
  • clientX, clientY: نسبت به بروزر
  • offsetX, offsetY: نسبت به المنت
  • movementX, movementY: نسبت به جای قبلی
• دکمه ماوس
  • چپ: button = 0
  • میانی: button = 1
  • راست: button = 3
• کیبرد
  • shiftKey: true | false
  • ctrlKey: true | false
  • altKey: true | false
  • metaKey: true | false

مثال click

<section id="in-box"></section>
<section id="out-box"></section>

const inBox = document.getElementById("in-box");
const outBox = document.getElementById("out-box");

inBox.addEventListener('click', function(e) {
    let msg = "<p><b>click</b><hr>"
    msg += "screenX=" + e.screenX + "/screenY=" + e.screenY + "<br>";
    msg += "pageX  =" + e.pageX   + "/pageY  =" + e.pageY   + "<br>";
    msg += "clientX=" + e.clientX + "/clientY=" + e.clientY + "<br>";
    msg += "offsetX=" + e.offsetX + "/offsetY=" + e.offsetY + "<br>";
    msg += "<br>";
    msg += "altKey   = " + e.altKey   + "<br>";
    msg += "ctrlKey  = " + e.ctrlKey  + "<br>";
    msg += "shiftKey = " + e.shiftKey + "<br>";
    msg += "metaKey  = " + e.metaKey  + "<br>";
    msg += "<br>";
    msg += "button = " + e.button + "</p>";
    outBox.innerHTML = msg;
});

مثال mousedown / mouseup

<section id="in-box"></section>
<section id="out-box"></section>
                

const inBox = document.getElementById("in-box");
const outBox = document.getElementById("out-box");
let msg = "";

const log = function(e) {
    msg += "<p><b>" + e.type + "</b>";
    msg += " button = " + e.button + "</p>";
    outBox.innerHTML = msg;
};

inBox.addEventListener('click', log);
inBox.addEventListener('dblclick', log);
inBox.addEventListener('contextmenu', log);
inBox.addEventListener('mousedown', log);
inBox.addEventListener('mouseup', log);

مثال mouseenter / mouseleave

<section id="in-box"><div></div></section>
<section id="out-box"></section>

const inBox = document.getElementById("in-box");
const outBox = document.getElementById("out-box");
let msg = "";

const log = function(e) {
    msg += "<p>" + e.type + "</p>";
    outBox.innerHTML = msg;
};

inBox.addEventListener('mouseenter', log);
inBox.addEventListener('mouseleave', log);

مثال mousemove

<section id="in-box"></section>
<section id="out-box"></section>

const inBox = document.getElementById("in-box");
const outBox = document.getElementById("out-box");

const log = e => {
    let msg = "<p><b>mousemove</b><hr>";
    msg += "offsetX = " + e.offsetX + "<br>";
    msg += "offsetY = " + e.offsetY + "</p>";

    outBox.innerHTML = msg;
};

inBox.addEventListener('mousemove', log);

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• تنها فایل script.js را می‌توانید تغییر دهید.
• در صفحه هر جا mousedown کردید، توپ به آنجا منتقل شود.

اختیاری: در تمرین بالا، هنگامیکه mousedown است به دنبال ماوس حرکت کند تا mouseup شود.

فانکشن – Functions

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

به کارگیری فانکشن، در هر زبانی دو مرحله دارد:
۱- تعریف – Define
۲- فراخوانی – Call

تعریف فانکشن

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

Statement

در این روش یک فانکشن، با‌نام ویژه‌ای، تعریف می‌شود. سپس با همان نام نیز فراخوانده می‌شود.

// Define
function showMessage() {
    msg = 'Hello world!';
    alert(msg);
}

// Call
showMessage();        // Hello world!

Expression

در این روش یک فانکشن، بی‌نام، تعریف می‌شود. اگرچه می‌توان آن را در یک متغیر یا ثابت گذاشت. سپس با نام آن متغیر یا ثابت، فانکشن را فراخواند.

// Define
const showMessage = function() {
    msg = 'Hello world!';
    alert(msg);
};

// Call 
showMessage();        // Hello world!

داد و ستد دیتا

الف – ورود دیتا:

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

• پارامتر – Parameter: متغیرهایی هستند که همراه با تعریف فانکشن، تعریف می‌شوند و از طریق آن اطلاعات به فانکشن داده می‌شود. (هنگام تعریف)
• آرگومان – Argument: مقادیری هستند که هنگام فراخوانی فانکشن، درون پارامترها گذاشته می‌شوند. و پردازش روی آنها انجام می‌گیرد. (هنگام فراخوانی)

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

Statement

// Define
function showMessage(name) {    // Parameter: name
    msg = 'Hello ' + name;
    alert(msg);
}

// Call
showMessage('bulbul');          // Argument: 'Hello bulbul'

Expression

// Define
const showMessage = function(name) {  // Parameter: name
    msg = 'Hello ' + name;
    alert(msg);
};

// Call 
showMessage('bulbul');                // Argument: 'Hello bulbul'

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

Statement

// Define
function showMessage(name = 'world!') {
    msg = 'Hello ' + name;
    alert(msg);
}

// Call
showMessage();                // Hello World!
showMessage('bulbul');        // Hello bulbul

Expression

// Define
const showMessage = function(name = 'world!') {
    msg = 'Hello ' + name;
    alert(msg);
};

// Call
showMessage();                // Hello World!
showMessage('bulbul');        // Hello bulbul

ب – خروج دیتا

فانکشن می‌تواند با دستور return یک مقدار را برگرداند.

Statement

// Define
function sum(a, b) {
    return a + b;
}

// Call
let a = sum(2, 3);

alert(a);    // 5

Expression

// Define
const sum = function(a, b) {
    return a + b;
};

// Call
let a = sum(2, 3);

alert(a);    // 5

در دستور return از آپریتور ترنری نیز می‌توانید استفاده کنید.

Statement

// Define
function min(a, b) {
    return a < b ? a : b;
}

// Call
let a = min(2, 3);

alert(a);    // 2

Expression

// Define
const min = function(a, b) {
    return a < b ? a : b;
};

// Call
let a = min(2, 3);

alert(a);    // 2

تفاوت‌های دو روش تعریف

الف – فراخوانی پیش از تعریف – Hoisting

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

Statement

// Call
let a = sum(2, 3);    // a = 5



// Define
function sum(a, b) {
    return a + b;
}

Expression

// Call
let a = sum(2, 3);    // Error



// Define
const sum = function(a, b) {
    return a + b;
};

ب – اسکوپ

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

Statement

let time = 10;

// conditionally declare a function
if (time < 12) {

    function welcome() { alert("Good morning"); }

} else {

    function welcome() { alert("Good afternoon"); }

}

// ...use it later
welcome(); // Error: welcome is not defined

Expression

let time = 10;
let welcome;

// conditionally declare a function
if (time < 12) {

    welcome = function() { alert("Good morning"); };

} else {

    welcome = function() { alert("Good afternoon"); };

}

// ...use it later
welcome(); // Good morning

مثال بالا را با آپریتور ترنری نیز می‌توانید بنویسید.

Expression

let time = 10;

// Define
const welcome = (time < 12) ?
    function() { alert('Good morning'); } :
    function() { alert("Good afternoon"); };

// Call 
welcome();        // Good morning

توصیه‌ها

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

هر فانکشن، تنها یک کار

هیچیک از فانکشن‌ها بیش از یک کار را انجام ندهد.

فانکشن، جایگزین کامنت

فانکشن برای اینست که فهم برنامه را آسان کند. به جای اینکه قدم به قدم با گذاشتن کامنت روند برنامه را نشان دهید، از فانکشن استفاده کنید.

فانکشن برای دیباگ

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

نامگذاری فانکشن

کاری که فانکشن انجام می‌دهد را در قالب یک فعل در نام آن بگنجانید.

• getAge( ) – return the age.
• calcSum( ) – calculate a sum.
• createForm( ) – creates a form.
• showMessage( ) – show a message.
• isLogin( ) – checks the user is logged in.
• hasRole( ) – checks the user permission.

مثال

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

<input type="text" id="in-box">
<button id="btn">OK</button>        
<h1 id="out-box"></h1>    

const inBox = document.getElementById("in-box");
const outBox = document.getElementById("out-box");
const btn = document.getElementById("btn");

const isEven = function(n) {
    return (n % 2) ? false : true;
};

btn.onclick = function() {
    let n = inBox.value;
    outBox.innerHTML = isEven(n);
};

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• تنها فایل script.js را می‌توانید تغییر دهید.
• هرگاه روی دکمه کلیک شد، از خانه بالا شعاع دایره خوانده شود و محیط دایره را در خانه پایین بنویسد. (برای محاسبه محیط یک فانکشن بنویسید.)

اَرو فانکشن – Arrow Function

اَرو فانکشن کوتاه شده فانکشن اکسپرشن است.

در این روش، بجای کلمه function از علامت <= استفاده می‌شود.

Expression

// Define
const sum = function(a, b) {
    let c = a + b;
    return c;
};

// Call 
let n = sum(2, 3);        // n = 5

Arrow

// Define
const sum = (a, b) => {
    let c = a + b;
    return c;
};

// Call 
let n = sum(2, 3);        // n = 5

اگر بدنه فانکشن تنها یک خط داشته باشد، به کرلی برکت {} نیازی نیست.

Expression

// Define
const showMessage = function() { alert('Hello, World!'); };

// Call 
showMessage();        // Hello, World!

Arrow

// Define
const showMessage = () => alert('Hello, World!');

// Call 
showMessage();        // Hello, World!

اگر بدنه فانکشن تنها یک دستور return باشد، نیازی به نوشتن آن نیست.

Expression

// Define
const sum = function(a, b) { return a + b; };

// Call 
let n = sum(2, 3);        // n = 5

Arrow

// Define
const sum = (a, b) => a + b;

// Call 
let n = sum(2, 3);        // n = 5

اگر فانکشن تنها یک پارامتر داشته باشد، به پرانتز نیازی نیست.

Expression

// Define
const half = function(a) { return a / 2 };

// Call 
let n = half(10);        // n = 5

Arrow

// Define
const half = a => a / 2;

// Call 
let n = half(10);        // n = 5

Immediately Invoked Function Expressions (IIFE)

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

// Define & Call immediately

( function(msg) { alert(msg); } ('Hello, World!') );

// Or

( function(msg) { alert(msg); } ) ('Hello, World!');

تمرین ۲

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• تنها فایل script.js را می‌توانید تغییر دهید.
• همان تمرین یک را این بار با اَرو فانکشن بنویسید.

تایمر

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

setTimeout(function, delay, arg1, …)

یک فانکشن را پس از زمان خاصی (به میلی ثانیه)، اجرا می‌کند.
در مثال‌های زیر پس از ۱۰۰۰ میلی ثانیه، فانکشن اجرا می‌شود.

// Functions without arguments
setTimeout(welcome, 1000);

// Functions with arguments
setTimeout(alret, 1000, 'Hello');

// Anonymous Functions without arguments
setTimeout(function() { ... }, 1000);

// Anonymous Functions with arguments
setTimeout(function(2, 5) { ... }, 1000);

clearTimeout(Timeout)

تایمر را از کار می‌اندازد؛ و پس از آن فانکشن اجرا نمی‌شود

// Set Timeout
const myFunc = setTimeout(...);

// Stop Timeout
clearTimeout(myFunc);

مثال

در این مثال اگر روی OK کلیک کنید؛ یک ثانیه بعد، یک عدد رندم بین ۰ تا ۱۰۰ را نمایش می‌دهد. و اگر قبل از اجرای فانکشن، روی Cancel کلیک کنید؛ تایمر کار نخواهد کرد.

<button id="ok-btn"">OK</button">
<button id="cancel-btn"">Cancel</button">
<h1 id="out-box""></h1">

const okBtn = document.getElementById("ok-btn");
const cancelBtn = document.getElementById("cancel-btn");
const outBox = document.getElementById("out-box");

const myFunc = function() {
    n =  Math.trunc(Math.random()*1000);
    outBox.innerHTML = n;
}

let myTimer;

okBtn.onclick = function(){
    myTimer = setTimeout(myFunc, 1000);
}

cancelBtn.onclick = function(){
    clearTimeout(myTimer);
};

// Functions without arguments
setInterval(welcome, 1000);

// Functions with arguments
setInterval(alret, 1000, 'Hello');

// Anonymous Functions without arguments
setInterval(function() { ... }, 1000);

// Anonymous Functions with arguments
setInterval(function(2, 5) { ... }, 1000);

// Set Interval
const myFunc = setInterval(...);

// Stop Interval
clearInterval(myFunc);

<button id="ok-btn"">OK</button">
<button id="cancel-btn"">Cancel</button">
<h1 id="out-box""></h1">

const okBtn = document.getElementById("ok-btn");
const cancelBtn = document.getElementById("cancel-btn");
const outBox = document.getElementById("out-box");

const myFunc = function() {
    n =  Math.trunc(Math.random()*1000);
    outBox.innerHTML = n;
}

let myTimer;

okBtn.onclick = function(){
    myTimer = setInterval(myFunc, 1000);
}

cancelBtn.onclick = function(){
    clearInterval(myTimer);
};

شرط – Conditions

در جاواسکریپت شرط را به سه گونه می‌توان نوشت.

• ?
• if
• Switch

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

سوئیچ – Switch

Switch جایگزین چند if می‌شود.

if (exp === val1) {

    ...

} else if (exp === val2) {

    ...

} else if (exp === val3) {

    ...

}

...

} else {
    ...
}

switch (exp) {
    case val1: // if (exp === val1)
        ...
        break;
    
    case val2: // if (exp === val2)
        ...
        break;

    case val3: // if (exp === val3)
        ...
        break;

    ...
    
    default: // else
        ...
    }

اگر break را ننویسید، کد تا break بعدی بدون توجه به شرط‌ها اجرا می‌شود.

مثال

<input type="text" id="in-box">
<button id="btn">OK</button>        
<h1 id="out-box"></h1>    

const inBox = document.getElementById("in-box");
const outBox = document.getElementById("out-box");
const btn = document.getElementById("btn");

btn.onclick = function() {
    let grade = inBox.value;
    let msg; 
    switch (grade) {
        case 'A':
            msg = "Excellent";
            break;
        case 'B':
            msg = "Good";
            break;
        case 'C':
            msg = "Fair";
            break;
        case 'D':
            msg = "Poor";
            break;
        case 'E':
        case 'F':
            msg = "Failed";
            break;
        default:
            msg = "Unknown grade";
    }
    outBox.innerHTML = msg;
}

<input type="text" id="in-box">
<button id="btn">OK</button>        
<h1 id="out-box"></h1>    

const inBox = document.getElementById("in-box");
const outBox = document.getElementById("out-box");
const btn = document.getElementById("btn");

btn.onclick = function() {
    let point = inBox.value;
    let msg; 
    switch (true) {
        case point > 100 || point < 0:
            msg = "Out of range";
            break;
        case point >= 90:
            msg = "Excellent";
            break;
        case point >= 80:
            msg = "Good";
            break;
        case point >= 70:
            msg = "Fair";
            break;
        case point >= 60:
            msg = "Poor";
            break;
        case point >= 0:
            msg = "Failed";
            break;
        default:
            msg = "Not a number";
    }
    outBox.innerHTML = msg;
}

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• تنها فایل script.js را می‌توانید تغییر دهید.
• اسکریپتی بنویسید تا مثل ویدیوی زیر عمل کند.

تمرین ۲

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• تنها فایل script.js را می‌توانید تغییر دهید.
• اسکریپتی بنویسید تا مانند یک ماشین حساب کار کند.

String

آبجکت String با مقادیر استرینگ کار می‌کند.

String.length

تعداد کاراکترهای استرینگ را برمی‌گرداند

s = "Nikparvar High School";

l = s.length;        // l = 21
//-------------------------------------
n = 20;

l = n.length;        // l = undefined
//-------------------------------------
b = true;

l = b.length;        // l = undefined

String.trim( )

فضای خالی دو طرف استرینگ را حذف می‌کند.

• افقی: space, tab
• عمودی: LF, CR

String.trim( )

s = "      Nikparvar";

t = s.trim();        // t = "Nikparvar"
//-------------------------------------
s = "Nikparvar      ";

t = s.trim();        // t = "Nikparvar"
//-------------------------------------
s = "   Nikparvar   ";

t = s.trim();        // t = "Nikparvar"
//-------------------------------------
s = `
Nikparvar
High
School`;

t = s.trim();        // t = `Nikparvar
                     //      High
                     //      School`  

String.substr(start, length)

بخشی از استرینگ را برمی‌گرداند.

• شمارش کاراکترها از عدد صفر آغاز می‌شود.
• اعداد منفی از انتها شمرده می‌شود.

s = "Nikparvar High School";

t = s.substr(0,3);         // t = "Nik"

t = s.substr(-4,3);        // t = "hoo"

t = s.substr(25,1);        // t = ""

t = s.substr(5,-1);        // t = ""

String.search(str)

جای str را در میان استرینگ مشخص می‌کند.

s = "Nikparvar";

p = s.search("Nik");         // p = 0

p = s.search("nik");         // p = -1

p = s.search("a");           // p = 4

String.replace(str1,str2)

str1 را با str2 جایگزین می‌کند.

s = "Nikparvar";

new = s.replace("Nik", "nik");         // new = "nikparvar"

new = s.replace("a", "_");             // new = "Nikp_rvar"

new = s.replace("M", "_");             // new = "Nikparvar"

تمرین ۳

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• تنها فایل script.js را می‌توانید تغییر دهید.
• یک عدد را بگیرد و چک کند، آن می‌تواند یک کد ملی باشد یا نه.
• الگوریتم تشخیص درستی شماره ملی