کدهای آماده جاوا اسکریپت که به آن ها نیاز دارید – فهرست کاربردی – فرادرس

کدهای آماده جاوا اسکریپت که به آن ها نیاز دارید – فهرست کاربردی – فرادرس


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

کدهای آماده جاوا اسکریپت

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

مثالی از آرگومان در جاوا اسکریپت

«شی آرگومان‌» (Arguments Object) در جاوا اسکریپت به‌عنوان نوعی محفظه یا کانتینر تخصصی برای پارامترهایی که به تابع ارسال می‌شوند، عمل می‌کند و ساختاری آرایه مانند را نشان می‌دهد (اگرچه توجه به این نکته ضروری است که آرگومان آرایه‌ای کامل نیست زیرا ویژگی‌های شی را حفظ می‌کند). این شی منحصر به تابعی است که به آن تعلق دارد و تمام آرگومان‌های ارائه شده هنگام فراخوانی آن تابع خاص را می‌گیرد.

به عنوان مثال، تابعی به نام storeNames ()

 را بررسی می‌کنیم. هنگامی که این تابع را با سه آرگومان فراخوانی می‌شود، مانند storeNames (“Mulder”، “Scully”، “Alex Krycek”)

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

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

function storeNames() {
    return arguments;
}

// When we run the following line in the console:
storeNames("Mulder", "Scully", "Alex Krycek");

// The output will be { '0': 'Mulder', '1': 'Scully', '2': 'Alex Krycek' }

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

استفاده از آرگومان به عنوان آرایه

برای اینکه شی آرگومان را به عنوان آرایه‌ای در نظر گرفت و از عملیات مرتبط با آرایه برای آن استفاده کرد، باید آرگومان مد نظر به آرایه‌ای واقعی تبدیل شود. این تبدیل را می‌توان با تعریف نوعی متغیر و استفاده از متد Array.prototype.slice.call

به دست آورد. همچنین، می‌توان از رویکرد جاوا اسکریپت ES6 با Array.from(arguments)

استفاده کرد:

// Using the Array.prototype.slice.call method
var args = Array.prototype.slice.call(arguments);

// Or the ES6 way
var args = Array.from(arguments);

متد slice()

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

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

function getGrades() {
    var args = Array.prototype.slice.call(arguments, 1, 3);
    return args;
}

// Let's display the result!
console.log(getGrades(90, 100, 75, 40, 89, 95));

// The OUTPUT SHOULD BE: //
// (100, 75) <- Why? Because it started from index 1 and stopped at index 3,
// so, index 3 (40) wasn't included.
//
// If we remove the '3' parameter, leaving just (arguments, 1), we'd obtain
// every argument from index 1: (100, 75, 40, 89, 95).

با تبدیل شی آرگومان به آرایه با استفاده از Array.prototype.slice.call

یا ES6 Array.from()

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

مشکلات بهینه سازی با Array.slice

برای جلوگیری از مشکلات احتمالی بهینه‌سازی در موتورهای جاوا اسکریپت، استفاده از slice()

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

است که مثال زیر برای نشان دادن این موضوع بسیار اهمیت دارد:

var args = (); // Initially an empty array.
for (var i = 0; i < arguments.length; i++) {
    args.push(arguments(i));
}
// Now, 'args' is an array containing your arguments.

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

دور زدن شی آرگومان با پارامتر rest در ES6

در «ES2015 (ES6)» و فراتر از آن، برنامه نویس می‌تواند از پارامتر rest

که با (…)

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

تابع اصلی (بدون استفاده از ES6):

function getIntoAnArgument() {
    var args = arguments.slice();
    args.forEach(function(arg) {
        console.log(arg);
    });
}

حال شیوه استفاده و نوشتن این تابع با استفاده از ES6 به صورت زیر است:

function getIntoAnArgument(...args) {
    args.forEach(arg => console.log(arg));
}

در مثال بالا، شی آرگومان با پارامتر rest، …args

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

در متد ForEach در جاوا اسکریپت استفاده شده است.

توجه به این نکته مهم است که شی آرگومان در بدنه «تابع پیکان» (Arrow Functions) قابل دسترسی نیست، بنابراین اگر به طور گسترده از شی آرگومان استفاده شود، ممکن است بهتر باشد که آن را به توابع سنتی پیوند داد. همچنین، باید به این نکته توجه داشت که هنگام استفاده از پارامتر rest

، همیشه باید rest

آخرین پارامتر در تعریف تابع باشد:

function getIntoAnArgument(arg1, arg2, arg3, ...restOfArgs /* no more arguments allowed here */) {
    // Function body
}

همانطور که در کدهای آماده جاوا اسکریپت بالا نشان داده شد، با استفاده از پارامتر rest

در ES6، می‌توان کد خود را ساده کرد و از سینتکسی مدرن و مختصرتر در توابع جاوا اسکریپت بهره برد.

کدهای آماده جاوا اسکریپت برای عملیات حسابی

جاوا اسکریپت پنج عملگر محاسباتی اولیه را برای انجام عملیات‌های مختلف ریاضی ارائه می‌دهد، از جمله عملیات زیر:

  • « +

    » (جمع)

  • «

    » (تفریق)

  • « *

    » (ضرب)

  • « /

    » (تقسیم)

  • و « %

    » (باقی‌مانده)

در ادامه با کدهای آماده جاوا اسکریپت این موضوع را مورد بررسی قرار خواهیم داد.

عملیات جمع در جاوا اسکریپت

«سینتکس» (Syntax) عملیات جمع در جاوا اسکریپت به صورت زیر است:

a + b

مثال زیر نحوه استفاده از این عملیات را نشان می‌دهد:

2 + 3          // returns 5
true + 2       // interprets true as 1 and returns 3
false + 5      // interprets false as 0 and returns 5
true + "bar"   // concatenates the boolean value and returns "truebar"
5 + "foo"      // concatenates the string and the number and returns "5foo"
"foo" + "bar"  // concatenates the strings and returns "foobar"

عملیات تفریق در جاوا اسکریپت

سینتکس عملیات تفریق در جاوا اسکریپت به صورت زیر است:

a - b

مثال و کدهای آمده جاوا اسکریپت برای عملیات تفریق به صورت زیر است:

2 - 3      // returns -1
3 - 2      // returns 1
false - 5  // interprets false as 0 and returns -5
true + 3   // interprets true as 1 and returns 4
5 + "foo"  // returns NaN (Not a Number)

عملیات ضرب در جاوا اسکریپت

سینتکس عملیات ضرب در جاوا اسکریپت به صورت زیر است:

a * b

مثال استفاده از عملیات ضرب در جاوا اسکریپت به صورت زیر است:

2 * 3                // returns 6
3 * -2               // returns -6
false * 5            // interprets false as 0 and returns 0
true * 3             // interprets true as 1 and returns 3
5 * "foo"            // returns NaN (Not a Number)
Infinity * 0         // returns NaN
Infinity * Infinity  // returns Infinity

عملیات تقسیم در جاوا اسکریپت

سینتکس عملیات تقسیم در جاوا اسکریپت به صورت زیر است:

a / b

مثال استفاده از این عملیات در جاوا اسکریپت به صورت زیر است:

3 / 2                // returns 1.5
3.0 / 2/0            // returns 1.5
3 / 0                // returns Infinity
3.0 / 0.0            // returns Infinity
-3 / 0               // returns -Infinity
false / 5            // interprets false as 0 and returns 0
true / 2             // interprets true a 1 and returns 0.5
5 + "foo"            // returns NaN (Not a Number)
Infinity / Infinity  // returns NaN

عملیات باقی مانده در جاوا اسکریپت

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

a % b

همچنین مثال استفاده از این عملیات در جاوا اسکریپت به صورت زیر است:

3 % 2          // returns 1
true % 5       // interprets true as 1 and returns 1
false % 4      // interprets false as 0 and returns 0
3 % "bar"      // returns NaN

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

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

a++ or ++a

کدهای آماده جاوا اسکریپت برای استفاده از این عملیات به صورت پیشوندی و پسوندی به صورت زیر است:

// Postfix 
x = 3; // declare a variable 
y = x++; // y = 4, x = 3 

// Prefix 
var a = 2; 
b = ++a; // a = 3, b = 3

عملیات کاهشی در جاوا اسکریپت

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

a-- or --a

همچنین مثال استفاده از این عملیات به صورت پیشوندی و پسوندی به صورت زیر است:

// Postfix 
x = 3; // declare a variable 
y = x—; // y = 3, x = 3 

// Prefix 
var a = 2; 
b = —a; // a = 1, b = 1

نکته: هیچ نوع عملیات حسابی را نمی‌توان روی مقدار بی‌نهایت انجام داد.

کدهای آماده جاوا اسکریپت برای توابع پیکان

«توابع پیکان» (Arrow Functions) در ES6 سینتکسی مختصرتر و ساده‌تر برای تعریف عبارات تابع جاوا اسکریپت ارائه داده و کارایی بالایی دارند. در اصل تابع پیکان سینتکسی فشرده برای ایجاد عبارات تابع با استفاده از عبارت fat arrow (=>)

است. مثال اساسی زیر برای درک نحوه رفتار تابع پیکان اهمیت زیادی دارد.

// ES5 syntax
var multiply = function(x, y) {
  return x * y;
};

// ES6 arrow function
var multiply = (x, y) => { return x * y; };

// Or even simpler
var multiply = (x, y) => x * y;    

با توابع پیکان، دیگر نیازی به استفاده از عبارات function

، return

و براکت‌های {}

نیست.

ساده شده This در جاوا اسکریپت

قبل از به وجود آمدن توابع پیکان، توابع جدید تعریف شده دارای مقدار This در جاوا اسکریپت بودند که برای دسترسی به شی موردنظر به راه‌حل‌هایی نیاز داشتند. مثال زیر این مفهوم را بیان می‌کند:

// ES5 syntax
function Person() {
  var self = this;
  self.age = 0;

  setInterval(function growUp() {
    self.age++;
  }, 1000);
}

در مقابل، توابع پیکان خود مقدار this

ایجاد نمی‌کنند. آنها this

را از تابع احاطه‌کننده به ارث می‌برند. مثال زیر این مفهوم را بیان می‌کند:

// ES6 syntax
function Person(){
  this.age = 0;

  setInterval(() => {
    // `this` now refers to the Person object, brilliant!
    this.age++;
  }, 1000);
}

var p = new Person();

با توابع پیکان، می‌توان مستقیم به مقدار this

مورد انتظار در تابع دسترسی داشت که این کار فرایند کدنویسی را ساده خواهد کرد.

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

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

x = y;
  • x

    : متغیر (الزامی)

  • y

     : مقدار برای تخصیص به متغیر (الزامی)

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

let initialVar = 5;   // Variable initialization requires the use of an assignment operator

let newVar = 5;
newVar = 6;   // Variable values can be modified using an assignment operator

سایر عملگرهای انتسابی به عنوان میانبر برای انجام عملیات خاص با استفاده از متغیر ( x

) و مقدار ( y

) عمل می‌کنند و سپس نتیجه را به خود متغیر اختصاص می‌دهند. به عنوان مثال، عملگر تخصیص جمع دارای سینتکس زیر است:

x += y;

سینتکس فوق معادل اعمال عملگر جمع و تخصیص مجموع به متغیر اصلی ( x

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

x = x + y;

برای نشان دادن این پباصپ با مقادیر واقعی، در اینجا مثالی از استفاده از عملگر انتساب جمع آورده شده است:

let myVar = 5;   // The value of myVar: 5
myVar += 7;      // The value of myVar: 12 (5 + 7)

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

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

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

نوع عملگر سینتکس نسخه طولانی
اپراتور انتساب x = y

x = y

اپراتور تخصیص جمع x += y

x = x + y

عملگر تخصیص تفریق x – = y

x = x – y

عملگر تخصیص ضرب x *= y

x = x * y

عملگر تخصیص تقسیم x /= y

x = x / y

عملگر تخصیص باقی مانده x % = y

x = x % y

عملگر تخصیص توان x **= y

x = x ** y

عملگر تخصیص شیفت به چپ x

x = x

عملگر انتسابی شیفت به راست x >>= y

x = x >> y

عملگر انتسابی شیفت به راست بدون علامت x >>>= y

x = x >>> y

عملگر بیتی AND x &= y

x = x & y

عملگر بیتی XOR x ^= y

x = x ^ y

عملگر بیتی OR x |= y

x = x | y

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

کدهای آمده جاوا اسکریپت برای مقادیر بولی

«Booleans» یا بولی (دودویی) نوعی داده ابتدایی اساسی در زبان‌های برنامه‌ نویسی کامپیوتری محسوب می‌شود که دارای دو مقدار ممکن true

و false

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

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

var a="a string";
if (a) {
  console.log(a); // logs 'a string'
}

در جاوا اسکریپت، تنها چند مقدار وجود دارد که به false

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

  • false

    (که قبلاً نادرست است)

  • «خالی» ( null

     )

  • «تعریف‌نشده» ( undefined

    )

  • NaN
  • 0
  • رشته خالی

همه مقادیر دیگر به صورت اجباری به true

ارزیابی می‌شوند. مقادیری که به صورت اجباری به true

ارزیابی می‌شوند، به عنوان مقادیر با ارزش درست و مقادیری که به false

ارزیابی شده به عنوان مقادیر با ارزش نادرست از آن‌ها یاد می‌شود. عمل اجبار به ارزیابی با درست و نادرست معمولاً با عملگرهای منطقی جاوا اسکریپت شامل دو عملگر «منطقی OR» و «منطقی AND» استفاده می‌شود که مثال زیر این مفهوم را بیان می‌کند.

var a="word";
var b = false;
var c = true;
var d = 0
var e = 1
var f = 2
var g = null

console.log(a || b); // 'word'
console.log(c || a); // true
console.log(b || a); // 'word'
console.log(e || f); // 1
console.log(f || e); // 2
console.log(d || g); // null
console.log(g || d); // 0
console.log(a && c); // true
console.log(c && a); // 'word'

شی بولی در جاوا اسکریپت

جاوا اسکریپت شامل نوعی شی بولین بومی است که حول مقداری کار کرده و پارامتر ارائه شده را به نوعی مقدار بولی تبدیل می‌کند. اگر مقدار ارائه شده برای آن شی حذف شود یا نادرست باشد؛ مانند 0

 ، null

، false

، NaN

، تعریف نشده یا رشته خالی، مقدار شی به false

ارزیابی ارزیابی می‌شود. با این حال، هنگامی‌که مقادیر دیگر، از جمله رشته false

ارزیابی ارسال شود، مقدار شی روی true

تنظیم خواهد شد.

توجه به این نکته ضروری است که مقادیر بولی اولیه (درست و نادرست) از مقادیر شی بولی متمایز هستند. علاوه بر این، هر شی که مقدار آن تعریف نشده یا تهی نیست، زمانی که در نوعی دستور شرطی استفاده می‌شود، به true

ارزیابی خواهد شد. به عنوان مثال، حتی زمانی که شی Boolean به طور صریح روی false

تنظیم شده باشد، آن را به true

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

var greeting = new Boolean(false);
if (greeting) {
  console.log("Hello world");
}
// Hello world

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

var greeting = false;
if (greeting) {
  console.log("Hello world"); // this code will not run
}

استفاده از تابع Boolean روش ترجیحی برای دستیابی به این تبدیل است. باید از استفاده از شی Boolean برای این منظور خودداری شود.

var x = new Boolean(expression); // don't do it this way

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

مثال های آماده جاوا اسکریپت برای توابع Callback

تابع callback

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

، کدهای آماده جاوا اسکریپت زیر برای مثال آورده شده است:

function createQuote(quote, callback){ 
  var myQuote = "Like I always say, " + quote;
  callback(myQuote); // 2
}

function logQuote(quote){
  console.log(quote);
}

createQuote("eat your vegetables!", logQuote); // 1

// Result in console: 
// Like I always say, eat your vegetables!

در مثال بالا، createQuote

به عنوان تابع مرتبه بالاتر عمل کرده و دو آرگومان را دریافت می‌کند که آرگومان دومی callback

است. تابع logQuote

به عنوان پاسخ به تماس وقتی تابع createQuote (1)

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

اضافه نمی‌شود که دلیل این مسئله این است که کاربر نمی‌خواهد تابع callback

را فوراً اجرا کند.

علاوه بر این، مهم است که آرگومان‌های لازم هنگام اجرای تابع callback (2)

در صورت انتظار ارائه شوند. همچنین، توابع ناشناس را می‌توان به عنوان پاسخ تماس استفاده کرد. فراخوانی زیر برای createQuote

به همان نتیجه مثال قبلی می‌رسد:

createQuote("eat your vegetables!", function(quote){ 
  console.log(quote); 
});

شایان ذکر است که در نام پارامتر تابع callback

نیازی به خود عبارت callback

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

function createQuote(quote, functionToCall) { 
  var myQuote = "Like I always say, " + quote;
  functionToCall(myQuote);
}

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

می‌تواند متفاوت باشد. آنچه مهم است ساختار استدلال است.

چرا از توابع callback استفاده می‌کنیم؟

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

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

function serverRequest(query, callback){
  setTimeout(function(){
    var response = query + "full!";
    callback(response);
  }, 5000);
}

function getResults(results){
  console.log("Response from the server: " + results);
}

serverRequest("The glass is half ", getResults);

در مثال بالا، نوعی درخواست سرور فرضی آغاز شده است. پس از ۵ ثانیه تأخیر، پاسخ اصلاح شده و سپس تابع callback

و getResults

، اجرا می‌شود. اگر قبلاً با setTimeout

آشنا باشیم خواهیم فهمید که همیشه در آن‌ها از توابع callback

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

در مثال ارائه شده نیز نوعی فراخوانی است. بنابراین، callback

اصلی در مثال بالا به وسیله نوعی callback

دیگر اجرا می‌شود. مهم است که از قرار دادن callback

های بیش از حد زیاد پرهیز شود زیرا این امر می‌تواند منجر به وضعیتی شود که به عنوان callback hell

شناخته می‌شود و این مسئله مدیریت کد را دشوار می‌کند.

کدهای آماده Javascript برای مفهوم کلاس

جاوا اسکریپت ذاتاً مفهوم کلاس‌های سنتی را که در برخی از زبان‌های برنامه نویسی دیگر دیده می‌شود ندارد. با این حال، کاربر می‌تواند با استفاده از ماهیت نمونه اولیه یا Prototype در جاوا اسکریپت، عملکردهای کلاس مانند را شبیه‌سازی کند.

با فرض درک اولیه از نمونه‌های اولیه، بیایید بررسی کنیم که چگونه می‌توان ساختار کلاس مانند را برای دستیابی اهداف مد نظر ایجاد کرد:

var p = new Person('James', 'Bond'); // Create a new instance of the Person class
p.log(); // Output: 'I am James Bond' // Accessing a function in the class
// Using setters and getters
p.profession = 'spy';
p.profession; // Output: 'James Bond is a spy'

استفاده از کلمه کلیدی class

در جاوا اسکریپت مدرن، اکنون می‌توان از کلمه کلیدی class

برای ایجاد ساختارهای کلاس مانند استفاده کرد. این سینتکس در ECMAScript 2015 (ES6) معرفی شد و در مرورگرهای قدیمی پشتیبانی نمی‌شود. توجه به این نکته مهم است که کلمه کلیدی class

اساساً نوعی روش مختصرتر مبتنی بر ارث‌بری و نمونه اولیه جاوا اسکریپت برای استفاده از مفهومی به نام کلاس است. به طور کلی، برنامه نویسان از روش‌هایی که در ادامه این بخش ذکر خواهند شد، برای ایجاد ساختارهای کلاس مانند در جاوا اسکریپت استفاده می‌کنند.

استفاده از متدهای اضافه شده به نمونه های اولیه

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

function Person(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
}

Person.prototype.log = function() {
    console.log('I am', this._firstName, this._lastName);
}

// This line adds getters and setters for the profession object. Note that in general you could just write your own get and set functions like the 'log' method above.
// Since in this example we are trying the mimic the class above, we try to use the getters and setters property provided by JavaScript
Object.defineProperty(Person.prototype, 'profession', {
    set: function(val) {
        this._profession = val;
    },
    get: function() {
        console.log(this._firstName, this._lastName, 'is a', this._profession);
    }
})

در کد بالا تابع سازنده Person

تعریف و سپس متد log

و getters/setters

 برای ویژگی profession

به نمونه اولیه آن اضافه شده است. این متدها و خصوصیات آن‌ها به وسیله نمونه‌هایی از کلاس Person

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

است:

Person.prototype = {
    log: function() {
        console.log('I am ', this._firstName, this._lastName);
    }
    set profession(val) {
        this._profession = val;
    }

    get profession() {
        console.log(this._firstName, this._lastName, 'is a', this._profession);
    }

}

استفاده از متدهای اضافه شده به صورت داخلی

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

function Person(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;

    this.log = function() {
        console.log('I am ', this._firstName, this._lastName);
    }

    Object.defineProperty(this, 'profession', {
        set: function(val) {
            this._profession = val;
        },
        get: function() {
            console.log(this._firstName, this._lastName, 'is a', this._profession);
        }
    })
}

این بار در کد بالا تابع سازنده Person

تعریف و متد log

 و getters/setters

برای ویژگی profession

مستقیم در داخل سازنده اضافه شده است. این متدها و ویژگی‌ها اکنون بخشی از هر نمونه از کلاس Person

هستند.

پنهان کردن جزئیات در کلاس با نمادها

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

let s_firstName = Symbol();

class Person {
    constructor(firstName, lastName) {
        this(s_firstName) = firstName;
        this._lastName = lastName;
    }

    log() {
        console.log('I am', this(s_firstName), this._lastName);
    }

    // Setter
    set profession(val) {
        this._profession = val;
    }

    // Getter
    get profession() {
        console.log(this(s_firstName), this._lastName, 'is a', this._profession);
    }
}

در کد بالا نماد s_firstName

ایجاد شده و به عنوان کلید ویژگی برای ذخیره firstName

استفاده می‌شود. این نماد، دسترسی یا اصلاح ویژگی firstName

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

کدهای آماده جاوا اسکریپت برای مفهوم Closure

closure در جاوا اسکریپت ترکیبی از تابع و «محدوده واژگانی» (lexical environment) محسوب می‌شود که در آن این محدوده واژگانی در آن تابع اعلام شده است. closure در اصل نوعی ویژگی اساسی و قدرتمند جاوا اسکریپت به‌حساب می‌آید که درک آن ضرورت زیادی دارد. در ادامه ۲ مثال در این رابطه آورده شده است.

مثال اول

کدهای مثال اول در زیر آورده شده است.

//we have an outer function named walk and an inner function named fly

function walk (){
  
  var dist="1780 feet";
  
  function fly(){
    console.log('At '+dist);
  }
  
  return fly;
}

var flyFunc = walk(); //calling walk returns the fly function which is being assigned to flyFunc
//you would expect that once the walk function above is run
//you would think that JavaScript has gotten rid of the 'dist' var

flyFunc(); //Logs out 'At 1780 feet'
//but you still can use the function as above 
//this is the power of closures

مثال دوم

کدهای مثال دوم در زیر آورده شده است.

function by(propName) {
    return function(a, b) {
        return a(propName) - b(propName);
    }
}

const person1 = { name: 'joe', height: 72 };
const person2 = { name: 'rob', height: 70 };
const person3 = { name: 'nicholas', height: 66 };

const arr_ = (person1, person2, person3);

const arr_sorted = arr_.sort(by('height')); // Sorts the array of objects by the 'height' property.

مزایای closure‌ ها در جاوا اسکریپت چیست؟

closure‌ها بسیار ارزشمند هستند زیرا به کاربر امکان می‌دهند داده‌ها و محدوده اجرا را حفظ کرده و سپس با استفاده از توابع Return خاص روی آن داده‌ها کار کند. این ویژگی به جاوا اسکریپت اجازه می‌دهد تا متدهای خصوصی موجود در سایر زبان‌های برنامه‌ نویسی را شبیه‌سازی کند و برای محدود کردن دسترسی به کد و مدیریت فضای نام جهانی مفید باشد. همچنین closure ابزار قدرتمندی برای ایجاد کپسوله‌سازی و حفظ حریم خصوصی داده‌ها در برنامه‌ها است.

متغیرها و متدهای خصوصی

closure‌ها همچنین برای کپسوله‌سازی داده‌ها و متدهای خصوصی بسیار مفید هستند که مثال زیر بیانگر این مفهوم است:

const bankAccount = (initialBalance) => {
  const balance = initialBalance;

  return {
    getBalance: function() {
      return balance;
    },
    deposit: function(amount) {
      balance += amount;
      return balance;
    },
  };
};

const account = bankAccount(100);

account.getBalance(); // Returns 100
account.deposit(10); // Returns 110

در مثال فوق، دسترسی به متغیر balance

از خارج از تابع bankAccount

غیرممکن است و در واقع نوعی متغیر خصوصی ایجاد می‌کند و اینجاست که عمل closure‌ وارد می‌شود. هنگامی که ()bankAccount

 فراخوانی شود، نوعی شی حاوی توابع را بازمی‌گرداند. با وجود این، هنگامی که کاربر account.getBalance()

را فراخوانی کند، تابع مرجع اصلی به متغیر balance

اشاره خواهد داشت.

این قدرت closure‌ها است که در آن تابعی دامنه واژگانی خود (محدوده زمان کامپایل) را حتی زمانی که خارج از آن محدوده اجرا می‌شود، حفظ می‌کند. closure‌ها ابزاری برای ایجاد متغیرها و متدهای خصوصی، افزایش کپسوله‌سازی و حفظ حریم خصوصی داده‌ها در کد کاربر هستند.

شبیه سازی متغیرهای محدوده بلوکی

جاوا اسکریپت در ابتدا از متغیرهای محدوده بلوک پشتیبانی نمی‌کرد، به این معنی که متغیرهای تعریف شده در ساختارها مانند حلقه‌های for

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

۱. مثال بدون متغیرهای محدوده بلوکی

کدهای این مثال در زیر آورده شده است.

var funcs = ();

for (var i = 0; i < 3; i++) {
    funcs(i) = function() {
        console.log('My value is ' + i);
    };
}

for (var j = 0; j < 3; j++) {
    funcs(j)(); // Outputs 'My value is 3' for all three functions
}

در سناریوی فوق، متغیر i

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

مثال ٢: مثالی از متغیرهای محدوده بلوکی با استفاده از closure‌

کدهای این مثال در زیر آورده شده است.

var funcs = ();
    
    var createFunction = function(val){
	    return function() {console.log("My value: " + val);};
    }

    for (var i = 0; i < 3; i++) {
        funcs(i) = createFunction(i);
    }
    for (var j = 0; j < 3; j++) {
        funcs(j)();                 // My value is 0
                                    // My value is 1
                                    // My value is 2
    }

در جاوا اسکریپت مدرن (ES6 به بالا)، کلمه کلیدی let

متغیرهای محدوده بلوک را معرفی می‌کند. علاوه بر این، توابعی مانند forEach

و کتابخانه‌هایی مانند «Lodash.js» وجود دارند که برای رسیدگی به چنین مسائلی طراحی شده‌اند. در حالی که این ابزارها می‌توانند بهره‌وری را افزایش دهند ولی کار با آن‌ها کمی پیچیده است و طبق این گفته درک مفاهیم اساسی در هنگام توسعه برنامه‌های کاربردی پیچیده جاوا اسکریپت برای این هدف بسیار حیاتی است. همچنین شایان ذکر است که closure‌ها کاربردهای عملی مختلفی دارند، مانند شبیه‌سازی متغیرهای خصوصی، برقراری تماس‌های ناهمزمان سمت سرور و ایجاد متغیرهای محدوده بلوک. آن‌ها ابزار ارزشمندی برای ساختن برنامه‌های جاوا اسکریپت در مقیاس بزرگ هستند.

شبیه سازی متغیرهای خصوصی

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

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

نویسندگان کتابخانه و ماژول از بسته‌ها برای کپسوله کردن متدها و داده‌های ماژول استفاده می‌کنند. این تکنیک به عنوان الگوی ماژول شناخته می‌شود و شامل استفاده از «عبارت تابع فوری فراخوانی شده» (IIFE) برای صادر کردن عملکردهای خاص به محدوده خارج از بلوک و کاهش تعداد ارجاع سراسری به کد برنامه است. در اینجا مثالی ساده از ساخت ماژول با استفاده از closures آورده شده است:

var myModule = (function() {
    let privateVariable="I am a private variable";
    
    let method1 = function() { console.log('I am method 1'); };
    let method2 = function() { console.log('I am method 2, ', privateVariable); };
    
    return {
        method1: method1,
        method2: method2
    };
})();

myModule.method1(); // Outputs: I am method 1
myModule.method2(); // Outputs: I am method 2, I am a private variable

کدهای آماده جاوا اسکریپت برای مفهوم کامنت

نظرات یا همان کامنت گذاری در جاوا اسکریپت به وسیله برنامه‌نویسان برای ارائه توضیحات، یادآوری‌ها یا یادداشت‌ها در کد بدون تاثیر بر عملکرد آن استفاده می‌شود. نظرات برای درک بهتر کد برای دیگران و خود کاربر در آینده ارزشمند هستند. دو راه برای اضافه کردن نظر در جاوا اسکریپت وجود دارد که در کدهای ماده جاوا اسکریپت زیر آورده شده است:

١. استفاده از //Comment

: این نوع کامنت با //

شروع و تا انتهای خط ادامه می‌یابد. مانند مثال زیر:

function hello() {
  // This is a one-line JavaScript comment
  console.log("Hello world!");
}
hello();

۲. استفاده از /* comment */

: این نوع کامنت می‌تواند یک یا چند خط را در بر‌بگیرد. مانند مثال زیر:

function hello() {
  /* This is a one-line JavaScript comment */
  console.log("Hello world!");
}
hello();

همچنین می‌توان از نظرات برای غیرفعال کردن موقت یا نظر دادن خطوط کد استفاده کرد، مانند مثال زیر:

function hello() {
  /* console.log("Hello world!"); */
}
hello();

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

اضافه کردن کامنت به کد با کلیدهای میانبر

در بسیاری از «محیط‌های توسعه یکپارچه» (IDE)، می‌توان به سرعت خطوط کد را با استفاده از میان‌برهای صفحه‌کلید، کامنت کرد. برای کامنت کردن کد، مراحل زیر باید دنبال شود:

  • انتخاب متن مد نظر
  • برای مک، فشاردادن Command (کلید اپل) و کلید اسلش رو به جلو (/)، برای ویندوز، Control و کلید اسلش رو به جلو (/).

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

function hello() {
  // The statement below is not going to get executed
  // console.log('hi')
}
hello();

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

function hello() {
  // The statements below are not going to get executed
  /*
  console.log('hi');
  console.log('code-test');
  */
}
hello();

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

مثال های آماده جاوا اسکریپت برای عملگرهای مقایسه ای

در این بخش کدهای آماده جاوا اسکریپت برای عملگراهای مقایسه‌ای ارائه خواهند شد. جاوا اسکریپت از دو نوع مقایسه استفاده می‌کند: مقایسه دقیق و تبدیل نوع (مقایسه انتزاعی یا ضمنی).

  • مقایسه دقیق ( ===

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

  • مقایسه انتزاعی ( ==

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

برای مقایسه‌های انتزاعی رابطه‌ای ( <=

)، هر دو عملوند ابتدا به مقادیر اولیه تبدیل و سپس قبل از انجام مقایسه به یک نوع تبدیل می‌شوند.

ویژگی های عملگرهای مقایسه ای

برخی از ویژگی‌های مهم این مقایسه‌ها به شرح زیر است:

  • هنگام مقایسه رشته‌ها، اگر کاراکترهای یکسان و طول یکسان داشته باشند، کاملاً برابر هستند.
  • برای اعداد، تساوی دقیق مستلزم آن است که هر دو عملوند از نوع عددی و از نظر عددی برابر باشند. این بدان معنی است که هر دو مقدار 0

    و -0

    کاملاً برابر هستند زیرا هر دو مقدار 0

    را ارزیابی می‌کنند. با این حال، NaN (Not-a-Number) نوعی مقدار ویژه است و با هیچ چیز، حتی خودش برابر نیست.

  • هنگام مقایسه دو عملوند بولی، اگر هر دو درست یا نادرست باشند، کاملاً برابر هستند.
  • اشیا هرگز در مقایسه‌های دقیق و انتزاعی برابر در نظر گرفته نمی‌شوند، مگر زمانی که به یک مثال عینی اشاره می‌کنند.
  • تهی و تعریف نشده قوانین خاصی دارند: تهی کاملاً برابر با خودش است ( null === null

    ). همچنین تهی به طور انتزاعی برابر با undefined

    است ( null == undefined

    ).

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

مثال عملگر برابری

عملگر برابری ابتدا عملوندهایی را که از یک نوع نیستند به یک نوع تبدیل کرده و سپس آن‌ها را به صورت دقیق با یکدیگر مقایسه می‌کند. سینتکس این عملگر به صورت زیر است:

x == y

مثال استفاده از این عملگر به صورت زیر است:

1   ==  1        // true
"1"  ==  1        // true
1   == '1'       // true
0   == false     // true
0   == null      // false
0   == undefined // false
null == undefined // true

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

اگر هر دو عملوند برابر نباشند عملگر نابرابری به درستی یا به True

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

x != y

مثال استفاده از این عملگر به صورت زیر است:

1 !=   2     // true
1 !=  "1"    // false
1 !=  '1'    // false
1 !=  true   // false
0 !=  false  // false

مثال عملگر برابری دقیق

اگر هر دو عملوند از نظر مقدار و نوع کاملاً برابر باشند، عملگر برابری دقیق، True

را برمی‌گرداند. بر خلاف عملگر برابری ( ==

)، این عملگر تلاشی برای تبدیل عملوندها به همان نوع نخواهد داشت. سینتکس آن به صورت زیر است:

x === y

مثال استفاده از این عملگر به صورت زیر است:

3 === 3   // true
3 === '3' // false

مثال عملگر نابرابری دقیق

اگر هر دو عملوند از نظر مقدار یا نوع کاملاً برابر نباشند، عملگر نابرابری دقیق، True

را برمی‌گرداند که سینتکس آن به صورت زیر است:

x !== y

مثال استفاده از این عملگر به صورت زیر است:

3 !== '3' // true
4 !== 3   // true

مثال عملگر بزرگتری

در عملگر بزرگتری، اگر عملوند سمت چپ بزرگتر از سمت راست باشد True

برمی‌گرداند. سینتکس عملگر بزرگتری به صورت زیر است:

x > y

مثال این عملگر هم به صورت زیر است:

4 > 3 // true

مثال عملگر بزرگتر مساوی

اگر عملوند سمت چپ بزرگتر یا مساوی با عملوند سمت راست باشد، عملگر بزرگتر یا مساوی True

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

x >= y
4 >= 3 // true
3 >= 3 // true

مثال عملگر کوچکتری

اگر عملوند سمت چپ کمتر از سمت راست باشد، عملگر کوچکتری مقدار True

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

x < y
3 < 4 // true

مثال عملگر کمتر یا مساوی

اگر عملوند سمت چپ کمتر یا مساوی با عملوند سمت راست باشد، عملگر کمتر یا مساوی True

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

x <= y
3 <= 4 // true


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

کدهای آماده جاوا اسکریپت برای اعتبارسنجی فرم

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

اعتبار سنجی فرم به طور کلی شامل دو تابع کلیدی است:

اعتبار سنجی پایه:

  • اطمینان حاصل می‌کند که تمام فیلدهای اجباری پر شده است.
  • شامل بررسی هر فیلد در فرم برای تأیید اینکه حاوی داده است.

اعتبار سنجی فرمت داده:

  • صحت فرم و مقدار داده‌ها را تأیید می‌کند.

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

<html>
   <head>
      <title>Form Validation</title>
      <script type="text/javascript">
         function validate() {
            // Form validation code will come here.
         }
      </script>
   </head>
   <body>
      <form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return validate();">
         <table cellspacing="2" cellpadding="2" border="1">
            <tr>
               <td align="right">Name</td>
               <td><input type="text" name="Name" /></td>
            </tr>
            <tr>
               <td align="right">EMail</td>
               <td><input type="text" name="EMail" /></td>
            </tr>
            <tr>
               <td align="right">Zip Code</td>
               <td><input type="text" name="Zip" /></td>
            </tr>
            <tr>
               <td align="right">Country</td>
               <td>
                  <select name="Country">
                     <option value="-1" selected>(choose yours)</option>
                     <option value="1">USA</option>
                     <option value="2">UK</option>
                     <option value="3">INDIA</option>
                  </select>
               </td>
            </tr>
            <tr>
               <td align="right"></td>
               <td><input type="submit" value="Submit" /></td>
            </tr>
         </table>
      </form>
   </body>
</html>

خروجی کد فوق به صورت زیر است:

در مثال بالا، ویژگی onsubmit

تگ form

روی تابع validate

تنظیم شده که حاوی منطق اعتبارسنجی است. تابع validate

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

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

مثالی برای اعتبار سنجی پایه

بیایید با یادگیری نحوه انجام اعتبارسنجی اولیه فرم شروع کنیم. در فرم مثالی که قبلا ذکر شد، تابع validate

زمانی فراخوانی می‌شود که رویداد onsubmit

رخ می‌دهد. در زیر اجرای کد تابع validate

آمده است:

<script type="text/javascript">
   // Form validation code will come here.
   function validate()
      {
      
         if( document.myForm.Name.value == "" )
         {
            alert( "Please provide your name!" );
            document.myForm.Name.focus() ;
            return false;
         }
         
         if( document.myForm.EMail.value == "" )
         {
            alert( "Please provide your Email!" );
            document.myForm.EMail.focus() ;
            return false;
         }
         
         if( document.myForm.Zip.value == "" ||
         isNaN( document.myForm.Zip.value ) ||
         document.myForm.Zip.value.length != 5 )
         {
            alert( "Please provide a zip in the format #####." );
            document.myForm.Zip.focus() ;
            return false;
         }
         
         if( document.myForm.Country.value == "-1" )
         {
            alert( "Please provide your country!" );
            return false;
         }
         return( true );
      }
</script>

مثالی برای اعتبار سنجی فرمت داده

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

  • آدرس ایمیل باید حداقل دارای علامت « @

    » و یک نقطه (« .

    ») باشد.

  • نماد @

    نباید اولین کاراکتر آدرس ایمیل باشد.

  • آخرین نقطه باید حداقل یک کاراکتر بعد از علامت @

    باشد.

مثال زیر برای بیان این هدف است:

<script type="text/javascript">
    function validateEmail()
      {
         var emailID = document.myForm.EMail.value;
         atpos = emailID.indexOf("@");
         dotpos = emailID.lastIndexOf(".");
         
         if (atpos < 1 || ( dotpos - atpos < 2 )) 
         {
            alert("Please enter correct email ID")
            document.myForm.EMail.focus() ;
            return false;
         }
         return( true );
      }
</script>

محدودیت های فرم HTML5

HTML5 چندین محدودیت برای عنصر input

فراهم می‌کند، از جمله ویژگی‌هایی مانند نوع، حداکثر طول، required

، disabled

. این محدودیت‌ها به کاربر امکان می‌دهند نوع ورودی را مشخص کند، محدودیت‌های کاراکتر را تعیین کرده، ورودی را الزامی، فیلدها را غیرفعال و همچنین ورودی را تأیید کند. با اعمال این محدودیت‌ها، می‌توان اعتبارسنجی فرم و کنترل ورودی کاربر را در فرم‌های HTML خود افزایش داد.

کدهای آماده جاوا اسکریپت برای عبارت IF

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

اجرا کرد. توجه به این نکته ضروری است که عبارت else

اختیاری بوده و در صورت عدم نیاز می‌توان آن را حذف کرد. در کد زیر ساختار اصلی دستور if

آمده است:

if (condition)
    /* do something */
else
    /* do something else */

همچنین می‌توان چندین عبارت if…else

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

آمده است:

if (condition1) {
    // Do something if condition1 is true
} else if (condition2) {
    // Do something else if condition2 is true
} else if (condition3) {
    // Do something else if condition3 is true
} else {
    // Final statement if none of the conditions are true
}

شایان ذکر است که اگر کاربری بخواهد بیش از یک دستور را در قسمت if

، else

یا else if

اجرا کند، باید دستورات را در پرانتزهای {}

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

if (condition) {
    /* Do */
    /* something */
    /* with multiple statements */
} else {
    /* Do something else */
}

این عبارات if

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

مثال if…else

مثال if…else

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

// If x=5 z=7 and q=42. If x is not 5 then z=19.
    if (x == 5) {
      z = 7;
      q = 42
    else
      z = 19;

مثال else if

مثال else if

زیر نحوه استفاده از این نوع گزاره را نشان می‌دهد:

 // If x=5 z=7 and q=42. If x is not 5 then z=19.
    if (x == 5) {
      z = 7;
      q = 42
    else
      z = 19;

کدهای جاوا اسکریپت برای نشان دادن مفهوم Prototype

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

در جاوا اسکریپت ضروری است.

نمونه اولیه شی

بیایید با مثالی شروع کنیم. تابع جاوا اسکریپت زیر را در نظر بگیرید:

function Point2D(x, y) {
  this.x = x;
  this.y = y;
}

در کد فوق هنگامی که تابع Point2D

اعلام می‌شود، نوعی ویژگی پیش‌فرض به نام prototype

برای آن ایجاد خواهد شد. در جاوا اسکریپت، تابع نیز نوعی شی محسوب می‌شود. ویژگی prototype

هم به عنوان نوعی شی حاوی ویژگی سازنده و مقدار آن تابع Point2D

است. به عبارت دیگر Point2D.prototype.constructor

برابر با Point2D

خواهد بود. هنگامی که شی جدید با استفاده از کلمه کلیدی NEW

ایجاد می‌شود، شی جدید ایجاد شده تمام خصوصیات را از Point2D.prototype

به ارث می‌برد. برای نشان دادن این موضوع، باید متدی به نام move

به Point2D.prototype

اضافه کنیم:

Point2D.prototype.move = function(dx, dy) {
  this.x += dx;
  this.y += dy;
}

اکنون می‌توان نوعی نمونه اولیه از Point2D

ایجاد و از متد move

روی آن استفاده کرد:

var p1 = new Point2D(1, 2);
p1.move(3, 4);
console.log(p1.x); // 4
console.log(p1.y); // 6

از Point2D.prototype

اغلب به عنوان شی نمونه اولیه یا نمونه اولیه شی p1

و هر شی دیگری که با سینتکس Point2D (…)

جدید ایجاد شده است، می‌توان نام برد. در صورت نیاز می‌توان ویژگی‌های بیشتری را به شی Point2D.prototype

اضافه کرد. روشی متداول این است که متدها را در Point2D.prototype

اعلام کرد، در حالی که ویژگی‌های دیگر را می‌توان در تابع سازنده اعلام کرد. همچنین اشیاء داخلی در جاوا اسکریپت از الگوی مشابهی پیروی می‌کنند:

  • نمونه اولیه اشیا ایجاد شده با سینتکس جدید Object()

    یا Object.prototype{}

    است.

  • نمونه اولیه آرایه‌هایی که با دستور Array()

    یا ()

    جدید ایجاد می‌شوند Array.prototype

    است.

این الگو با سایر اشیا داخلی مانند Date

و RegExp

ادامه می‌یابد. توجه به این نکته مهم است که Object.prototype

به وسیله همه اشیا به ارث می‌رسد و نمونه اولیه خود را ندارد. نمونه اولیه آن NULL

خواهد بود. درک نمونه‌های اولیه برای کار موثر با ویژگی‌های شی‌گرای جاوا اسکریپت ضروری است.

زنجیره سازی نمونه های اولیه

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

در شی obj

دسترسی پیدا کند، موتور جاوا اسکریپت در ابتدا این ویژگی را در شی obj

جستجو خواهد کرد. اگر ویژگی را در آنجا پیدا نکرد، به جستجو در نمونه اولیه شی obj

ادامه می‌دهد و تا زمانی که به Object.prototype

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

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = Object.create(obj1);
obj2.a = 2;

console.log(obj2.a); // 2
console.log(obj2.b); // 2
console.log(obj2.c); // undefined

در کد بالا، وقتی obj2

با استفاده از Object.create(obj1)

ایجاد می‌شود، obj2

نمونه اولیه obj1

را به ارث می‌برد و آن را به نمونه اولیه obj2

تبدیل می‌کند. این بدان معنی است حتی اگر b

که یکی از ویژگی‌های obj2

هم نیست، همچنان می‌توان از طریق زنجیره‌سازی نمونه اولیه به آن دسترسی پیدا کرد. با این حال، برای ویژگی c

، که در obj1

یا در Object.prototype

یافت نمی‌شود، مقدار تعریف نشده دریافت خواهد شد.

کلاس های جاوا اسکریپت

در ES2016، کلمه کلیدی Class

وجود دارد که روشی آشناتر و ساختارمندتر برای کار با اشیا و نمونه‌های اولیه ارائه می‌دهد. مفهوم کلاس جاوا اسکریپت به گونه‌ای طراحی شده که برای توسعه‌دهندگانی که از قبل با «برنامه نویسی شی‌گرا» (OOP) آشنا هستند، قابل درک باشد اما در هسته آن، اساساً همان نتایجی را به دست می‌آورد که رویکرد سنتی مبتنی بر نمونه اولیه است. کدهای آماده جاوا اسکریپت زیر نمونه‌ای از کلاس در جاوا اسکریپت بوده که برای درک توضیحات گفته شده بسیار اهمیت دارد:

class Rectangle {
  constructor(height, width) {
    this.height = height
    this.width = width
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width
  }
}

const square = new Rectangle(10, 10)

console.log(square.area) // 100

این رویکرد مبتنی بر کلاس اساساً معادل کد مبتنی بر نمونه اولیه زیر است:

function Rectangle(height, width) {
  this.height = height;
  this.width = width;
}

Rectangle.prototype.calcArea = function calcArea() {
  return this.height * this.width;
}

در هر دو مورد، ویژگی‌ها و متدهای یکسانی تعریف شده‌اند. متدهای «دریافت‌کننده و تنظیم‌کننده» (Getter & Setter) در کلاس‌ها روشی مناسب برای پیوند دادن ویژگی شی به تابع است که هنگام دسترسی به آن ویژگی فراخوانی می‌شود. این اساساً نوعی سینتکس آسانتر بوده که دسترسی و دستکاری ویژگی‌ها را ساده می‌کند. همچنین در حالی که امکان دارد سینتکس آن‌ها متفاوت باشد ولی هر دو رویکرد به نتایج یکسانی در جاوا اسکریپت می‌رسند.

کدهای آماده جاوا اسکریپت برای مفهوم محدوده

قبلا در مطلبی جدا از مجله فرادر به مفهوم محدوده یا scope در جاوا اسکریپت پرادخته شده است اما دقیقاً دامنه یا محدوده در این زبان به چه معناست و چرا درک آن اهمیت دارد؟ در برنامه نویسی، scope

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

var foo = 'Hi, I am foo!';

var baz = function () {
  var bar="Hi, I am bar too!";
    console.log(foo);
}

baz(); // Hi, I am foo!
console.log(bar); // ReferenceError...

مثال فوق مفهومی به نام دامنه واژگانی را نشان می‌دهد. جاوا اسکریپت، مانند بسیاری از زبان‌های برنامه نویسی دیگر، از دامنه واژگانی استفاده می‌کند. شایان ذکر است که نوع دیگری از scope به نام «دامنه یا محدوده پویا» (Dynamic scope) وجود دارد، اما ما در اینجا به آن نمی‌پردازیم. در دامنه واژگانی، دو نوع اساسی از دامنه وجود دارد: دامنه جهانی و دامنه محلی.

  • دامنه یا محدوده جهانی مانند ظرف بزرگی است که همه متغیرهایی را که خارج از توابع ایجاد می‌شوند در خود جای می‌دهد.
  • دامنه یا محدوده محلی مانند ظروف کوچکتری است که متغیرها را در داخل توابع نگه می‌دارد.

در مثال بالا فرض بر این است متغیری به نام foo در دامنه جهانی داریم. این متغیر می‌تواند در هر جایی از کد استفاده شود زیرا در سطح جهانی در دسترس است. حال اگر تابعی به نام baz

داشته باشیم و در داخل آن تابع نوعی متغیر به نام bar

ایجاد کنیم, این متغیر فقط در داخل تابع baz

موجود در دسترس خواهد بود.

در جاوا اسکریپت گاهی اوقات مقدار متغیری درخواست می‌شود (مانند foo

) یا مقداری به متغیر تخصیص داده خواهد شد (مانند bar

). این اقدامات «RHS» (خواندن مقدار) یا «LHS» (تخصیص مقدار) نامیده می‌شوند. برای مثال در کدهای آمده جاوا اسکریپت بالا، اگر مقدار foo

را فراخوانی کنیم، مقدار آن نوعی مرجع RHS است. اگر مقدار را به متغیری جدید اختصاص دهیم (به عنوان مثال foo = baz

)، این نوعی مرجع LHS برای foo

و نوعی مرجع RHS برای baz

است.

حالا، وقتی داخل تابعی (مانند baz

) هستیم، اگر مقدار foo را فراخوانی کنیم، موتور جاوا اسکریپت ابتدا به داخل محدوده محلی نگاه می‌کند اما foo

را در آنجا پیدا نمی‌کند. بنابراین، برای یافتن foo

به محدوده سراسری یا جهانی می‌رود و ارزش آن را بازیابی می‌کند. همچنین اگر مقدار bar

خارج از تابع baz

درخواست شود، خطایی رخ خواهد داد زیرا bar

نوعی راز است که فقط در داخل baz

شناخته می‌شود و دامنه جهانی bar

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

کدهای آماده javascript برای حلقه FOR

حلقه For در جاوا اسکریپت راهی برای پیمایش عناصر یا انجام کارهای تکراری بوده که دارای سه بخش مهم زیر است:

  • «مقداردهی اولیه» (Initialization): مقداردهی اولیه مثل آماده شدن قبل از شروع کاری است. در مقداردهی اولیه می‌توان نوعی متغیر شمارنده ایجاد کرد.
  • «شرط» (Condition): شرط مانند سؤالی است که هر بار قبل از انجام مجدد کاری پرسیده می‌شود. اگر پاسخ درست ( True

    ) باشد، کاری انجام خواهد شد. اگر نادرست ( False

    ) باشد، حلقه متوقف می‌شود.

  • «بیانیه نهایی» (Final Expression): بعد از ارزیابی هر شرطی می‌توان کاری انجام داد، مانند افزایش یا کاهش شمارنده. در اصل بیانیه نهایی کاری است که کاربر می‌خواهد هر بار پس از ارزیابی شرط انجام دهد.

سینتکس حلقه for

در جاوا اسکریپت به صورت زیر است:

for ((initialization)); (condition); (final-expression)) {
   // statement
}

در صورت عدم نیاز می‌توان هر یک از این قسمت ها را کنار گذاشت. گاهی اوقات، از کلمه break

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

اشتباهات رایج در استفاده از حلقه for

اشتباهات زیادی در استفاه از حلقه for

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

// This will cause an error.
    // The bounds of the array will be exceeded.
    var arr = ( 1, 2, 3 );
    for (var i = 0; i <= arr.length; i++) {
       console.log(arr(i));
    }

    output:
    1
    2
    3
    undefined

در مثال فوق کاربر می‌خواهد در آرایه‌ای با سه عنصر، عنصر چهارم را بازگردانی کند که منجر به خطا می‌شود. دو راه برای رفع این خطا در کد وجود دارد که باید شرط را روی i < arr.length

یا i <= arr.length – 1

تنظیم کرد.

مثال حلقه for در جاوا اسکریپت

مثال زیر پیمیاش اعداد از صفر تا ۸ را نشان می‌دهد:

for (var i = 0; i < 9; i++) {
   console.log(i);
}

output:
0
1
2
3
4
5
6
7
8

قبل از اینکه عبارت شرط نادرست باشد، می‌توان با دستور break

در جاوا اسکریپت از حلقه خارج شد:

for (var elephant = 1; elephant < 10; elephant+=2) {
    if (elephant === 7) {
        break;
    }
    console.info('elephant is ' + elephant);
}

output:
elephant is 1
elephant is 3
elephant is 5

مثال های جاوا اسکریپت از دستور break

عبارت break

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

مثال اول

کدهای مثال اول در زیر آورده شده است.

function testBreak(x) {
  var i = 0;

  while (i < 6) {
    if (i == 3) {
      break;
    }
    i += 1;
  }

  return i * x;
}

در مثال بالا، از عبارت break

استفاده شده است تا زمانی که i

برابر با ٣ حلقه را متوقف کند. سپس، نتیجه ۳ برابر x

بازگرادنی شده است.

مثال دوم

کدهای مثال دوم در زیر آورده شده است.

for (var i = 1; i < 100; i++) {
  if (i == 15) {
    break;
  }
}

در مثال فوق هم نوعی شمارنده برای شمارش از ۱ تا ۹۹ تنظیم شده است اما زمانی که شـمارنده به ۱۵ رسید، از break

برای پایان دادن به حلقه استفاده خواهد شد.

کدهای جاوا اسکریپت برای حلقه DO While

حلقه do…while

کاملاً شبیه حلقه while در جاوا اسکریپت است اما با این تفاوت که در حلقه do…while

، شرط در انتهای حلقه بررسی می‌شود، بنابراین تضمین خواهد شد حداقل یک بار اجرا شود. سینتکس حلقه نام برده به صورت زیر است:

do {
   // Code or statement(s) to be executed
} while (condition);

در سینتکس فوق کار با کلمه کلیدی do

شروع می‌شود سپس نوعی بلوک کد یا عبارات دستوری موجود است که در داخل براکت‌های {}

محصور شده‌اند. این عبارات حداقل یک بار اجرا می‌شوند. پس از آن، کلمه کلیدی while

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

مهم هستند.

var i = 0;
do {
  i = i + 1;
  console.log(i);
} while (i < 5);

خروجی کد فوق به صورت زیر است:

1
2
3
4
5

حلقه For In در جاوا اسکریپت

دستور for…in

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

سینتکس استفاده از این حلقه به صورت زیر است:

for (variable in object) {
    // Statements to be executed for each property
}

پارامترهای سینتکس بالا به شرح زیر است:

  • «متغیر» (Variable): نام خاصیت متفاوتی که در هر پیمایش به متغیر اختصاص داده می‌شود.
  • «شی» (Object): شیئی که کاربر میخواهد ویژگی‌های شمارش‌پذیر آن را پیمایش کند.

کدهای آماده جاوا اسکریپت برای درک نحوه استفاده از این نوع حلقه در جاوا اسکریپت بسیار مهم است:

// Initialize object.
a = { "a": "Athens", "b": "Belgrade", "c": "Cairo" }

// Iterate over the properties.
var s = ""
for (var key in a) {
    s += key + ": " + a(key);
    s += "<br />";
    }
document.write (s);

// Output:
// a: Athens
// b: Belgrade
// c: Cairo

// Initialize the array.
var arr = new Array("zero", "one", "two");

// Add a few expando properties to the array.
arr("orange") = "fruit";
arr("carrot") = "vegetable";

// Iterate over the properties and elements.
var s = "";
for (var key in arr) {
    s += key + ": " + arr(key);
    s += "<br />";
}

document.write (s);

// Output:
//   0: zero
//   1: one
//   2: two
//   orange: fruit
//   carrot: vegetable

// Efficient way of getting an object's keys using an expression within the for-in loop's conditions
var myObj = {a: 1, b: 2, c:3}, myKeys = (), i=0;
for (myKeys(i++) in myObj);

document.write(myKeys);

//Output:
//   a
//   b
//   c

کدهای آماده جاوا اسکریپت برای حلقه For Of

دستور for…of

در جاوا اسکریپت برای ایجاد حلقه‌ای استفاده می شود که روی اشیای قابل پیمایش، عمل پیمایش انجام می‌دهد. این اشیاء می‌توانند شامل آرایه‌ها، نقشه‌ها، مجموعه‌ها، شی Arguments

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

سینتکس این حلقه در جاوا اسکریپت به صورت زیر است:

for (variable of object) {
    // Statements to be executed for each property
}

پارامترهای سینتکس فوق به شرح زیر است:

  • «متغیر» (Variable): نام خاصیت متفاوتی که در هر پیمایش به متغیر اختصاص داده می‌شود.
  • «شی» (Object): شیئی که کاربر میخواهد ویژگی‌های شمارش‌پذیر آن را پیمایش کند.

کدهای آماده جاوا اسکریپت برای استفاده حلقه for…of

در ادامه آماده است:

مثال ۱: پیمایش آرایه با حلقه For Of

کدهای مثال اول در زیر آورده شده است.

let arr = ( "fred", "tom", "bob" );

for (let i of arr) {
    console.log(i);
}

// Output:
// fred
// tom
// bob

مثال ۲: پیمایش نقشه با حلقه For Of

کدهای مثال دوم در زیر آورده شده است.

    var m = new Map();
    m.set(1, "black");
    m.set(2, "red");

    for (var n of m) {
        console.log(n);
    }

    // Output:
    // 1,black
    // 2,red

مثال ۳: پیمایش مجموعه با حلقه For Of

کدهای مثال سوم در زیر آورده شده است.

    var s = new Set();
    s.add(1);
    s.add("red");

    for (var n of s) {
        console.log(n);
    }

    // Output:
    // 1
    // red

مثال ۴: پیمایش Arguments با حلقه For Of

کدهای مثال چهارم در زیر آورده شده است.

    // your browser must support for..of loop
    // and let-scoped variables in for loops

    function displayArgumentsObject() {
        for (let n of arguments) {
            console.log(n);
        }
    }


    displayArgumentsObject(1, 'red');

    // Output:
    // 1
    // red

مثال های جاوا اسکریپت برای حقله While

حلقه while

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

به صورت زیر است:

while (condition)

{

  statement(s);

}

شرح سینتکس فوق به صورت زیر است:

  • «شرط» (Condition): شرط نوعی عبارت بولی است که قبل از هر پیمایش حلقه ارزیابی می شود. اگر شرط درست باشد، دستور(های) داخل حلقه اجرا و وقتی شرط نادرست شد، حلقه به پایان می رسد.
  • «دستور» (Statement): اینها عباراتی هستند که باید اجرا شوند تا زمانی که شرط به درستی ارزیابی شود.

کدهای آماده جاوا اسکریپت زیر برای درک ماهیت حلقه while

مهم هستند.

    var i = 1;
    while (i < 10) 
    {
      console.log(i);
       i++; // i=i+1 same thing
    }

    Output:
    1 
    2 
    3 
    4
    5
    6
    7
    8
    9

در مثال بالا، حلقه while

به طور مکرر مقدار i را چاپ می‌کند تا زمانی که i کمتر از ۱۰ باشد. پس از هر بار پیمایش، i با استفاده از i++

یک واحد فزایش می‌یابد. وقتی i

به مقدار ۱۰ رسید، شرط false

می‌شود و حلقه خاتمه می‌یابد. حلقه while

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

سخن پایانی

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

، کلاس‌های جاوا اسکریپت، مفهوم Clouser و نحوه کامنت گذاری سخن به میان آمد.

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