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

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

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

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

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

کلیک کنید

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

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

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

1function storeNames() {
2    return arguments;
3}
4
5// When we run the following line in the console:
6storeNames("Mulder", "Scully", "Alex Krycek");
7
8// The output will be { '0': 'Mulder', '1': 'Scully', '2': 'Alex Krycek' }

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

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

برای اینکه شی آرگومان را به عنوان آرایه‌ای در نظر گرفت و از عملیات مرتبط با آرایه برای آن استفاده کرد، باید آرگومان مد نظر به آرایه‌ای واقعی تبدیل شود. این تبدیل را می‌توان با تعریف نوعی متغیر و استفاده از متد Array.prototype.slice.call به دست آورد. همچنین، می‌توان از رویکرد جاوا اسکریپت ES6 با Array.from(arguments) استفاده کرد:

1// Using the Array.prototype.slice.call method
2var args = Array.prototype.slice.call(arguments);
3
4// Or the ES6 way
5var args = Array.from(arguments);

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

1function getGrades() {
2    var args = Array.prototype.slice.call(arguments, 1, 3);
3    return args;
4}
5
6// Let's display the result!
7console.log(getGrades(90, 100, 75, 40, 89, 95));
8
9// The OUTPUT SHOULD BE: //
10// [100, 75] <- Why? Because it started from index 1 and stopped at index 3,
11// so, index 3 (40) wasn't included.
12//
13// If we remove the '3' parameter, leaving just (arguments, 1), we'd obtain
14// every argument from index 1: [100, 75, 40, 89, 95].

با تبدیل شی آرگومان به آرایه با استفاده از Array.prototype.slice.call یا ES6 Array.from() ، انعطاف‌پذیری استفاده از آرگومان‌ها افزایش یافته و می‌توان از آن در کدهای خود به نحو احسن استفاده کرد.

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

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

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

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

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

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

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

1function getIntoAnArgument() {
2    var args = arguments.slice();
3    args.forEach(function(arg) {
4        console.log(arg);
5    });
6}

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

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

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

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

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

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

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

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

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

کلیک کنید

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

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

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

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

1a + b

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

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

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

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

1a - b

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

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

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

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

1a * b

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

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

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

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

1a / b

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

13 / 2                // returns 1.5
23.0 / 2/0            // returns 1.5
33 / 0                // returns Infinity
43.0 / 0.0            // returns Infinity
5-3 / 0               // returns -Infinity
6false / 5            // interprets false as 0 and returns 0
7true / 2             // interprets true a 1 and returns 0.5
85 + "foo"            // returns NaN (Not a Number)
9Infinity / Infinity  // returns NaN

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

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

1a % b

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

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

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

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

1a++ or ++a

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

1// Postfix 
2x = 3; // declare a variable 
3y = x++; // y = 4, x = 3 
4
5// Prefix 
6var a = 2; 
7b = ++a; // a = 3, b = 3

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

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

1a-- or --a

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

1// Postfix 
2x = 3; // declare a variable 
3y = x—; // y = 3, x = 3 
4
5// Prefix 
6var a = 2; 
7b = —a; // a = 1, b = 1

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

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

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

1// ES5 syntax
2var multiply = function(x, y) {
3  return x * y;
4};
5
6// ES6 arrow function
7var multiply = (x, y) => { return x * y; };
8
9// Or even simpler
10var multiply = (x, y) => x * y;    

با توابع پیکان، دیگر نیازی به استفاده از عبارات function ، return و براکت‌های {} نیست.

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

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

1// ES5 syntax
2function Person() {
3  var self = this;
4  self.age = 0;
5
6  setInterval(function growUp() {
7    self.age++;
8  }, 1000);
9}

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

1// ES6 syntax
2function Person(){
3  this.age = 0;
4
5  setInterval(() => {
6    // `this` now refers to the Person object, brilliant!
7    this.age++;
8  }, 1000);
9}
10
11var p = new Person();

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

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

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

1x = y;

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

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

کلیک کنید

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

1let initialVar = 5;   // Variable initialization requires the use of an assignment operator
2
3let newVar = 5;
4newVar = 6;   // Variable values can be modified using an assignment operator

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

1x += y;

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

1x = x + y;

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

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

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

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

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

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

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

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

1var a = 'a string';
2if (a) {
3  console.log(a); // logs 'a string'
4}

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

• false (که قبلاً نادرست است)
• «خالی» ( null  )
• «تعریف‌نشده» ( undefined )
• NaN
• 0
• رشته خالی

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

1var a = 'word';
2var b = false;
3var c = true;
4var d = 0
5var e = 1
6var f = 2
7var g = null
8
9console.log(a || b); // 'word'
10console.log(c || a); // true
11console.log(b || a); // 'word'
12console.log(e || f); // 1
13console.log(f || e); // 2
14console.log(d || g); // null
15console.log(g || d); // 0
16console.log(a && c); // true
17console.log(c && a); // 'word'

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

جاوا اسکریپت شامل نوعی شی بولین بومی است که حول مقداری کار کرده و پارامتر ارائه شده را به نوعی مقدار بولی تبدیل می‌کند. اگر مقدار ارائه شده برای آن شی حذف شود یا نادرست باشد؛ مانند 0  ، null ، false ، NaN ، تعریف نشده یا رشته خالی، مقدار شی به false ارزیابی ارزیابی می‌شود. با این حال، هنگامی‌که مقادیر دیگر، از جمله رشته false ارزیابی ارسال شود، مقدار شی روی true تنظیم خواهد شد.

توجه به این نکته ضروری است که مقادیر بولی اولیه (درست و نادرست) از مقادیر شی بولی متمایز هستند. علاوه بر این، هر شی که مقدار آن تعریف نشده یا تهی نیست، زمانی که در نوعی دستور شرطی استفاده می‌شود، به true ارزیابی خواهد شد. به عنوان مثال، حتی زمانی که شی Boolean به طور صریح روی false تنظیم شده باشد، آن را به true ارزیابی می‌کند و کد مربوطه اجرا می‌شود. مثال زیر از کدهای آماده جاوا اسکریپت برای بیان این هدف است:

1var greeting = new Boolean(false);
2if (greeting) {
3  console.log("Hello world");
4}
5// Hello world

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

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

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

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

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

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

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

1function createQuote(quote, callback){ 
2  var myQuote = "Like I always say, " + quote;
3  callback(myQuote); // 2
4}
5
6function logQuote(quote){
7  console.log(quote);
8}
9
10createQuote("eat your vegetables!", logQuote); // 1
11
12// Result in console: 
13// Like I always say, eat your vegetables!

در مثال بالا، createQuote به عنوان تابع مرتبه بالاتر عمل کرده و دو آرگومان را دریافت می‌کند که آرگومان دومی callback است. تابع logQuote به عنوان پاسخ به تماس وقتی تابع createQuote (1) اجرا شود، اجرا خواهد شد. هنگام ارسال آن به عنوان آرگومان، پرانتزی به logQuote اضافه نمی‌شود که دلیل این مسئله این است که کاربر نمی‌خواهد تابع callback را فوراً اجرا کند.

علاوه بر این، مهم است که آرگومان‌های لازم هنگام اجرای تابع callback (2) در صورت انتظار ارائه شوند. همچنین، توابع ناشناس را می‌توان به عنوان پاسخ تماس استفاده کرد. فراخوانی زیر برای createQuote به همان نتیجه مثال قبلی می‌رسد:

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

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

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

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

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

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

1function serverRequest(query, callback){
2  setTimeout(function(){
3    var response = query + "full!";
4    callback(response);
5  }, 5000);
6}
7
8function getResults(results){
9  console.log("Response from the server: " + results);
10}
11
12serverRequest("The glass is half ", getResults);

در مثال بالا، نوعی درخواست سرور فرضی آغاز شده است. پس از ۵ ثانیه تأخیر، پاسخ اصلاح شده و سپس تابع callback و getResults ، اجرا می‌شود. اگر قبلاً با setTimeout آشنا باشیم خواهیم فهمید که همیشه در آن‌ها از توابع callback استفاده می‌شود. تابع ناشناس ارسال شده به عنوان آرگومان برای فراخوانی تابع setTimeout در مثال ارائه شده نیز نوعی فراخوانی است. بنابراین، callback اصلی در مثال بالا به وسیله نوعی callback دیگر اجرا می‌شود. مهم است که از قرار دادن callback های بیش از حد زیاد پرهیز شود زیرا این امر می‌تواند منجر به وضعیتی شود که به عنوان callback hell شناخته می‌شود و این مسئله مدیریت کد را دشوار می‌کند.

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

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

فیلم آموزش پروژه محور جاوا اسکریپت – پیاده سازی سبد خرید فروشگاهی با JavaScript در فرادرس

کلیک کنید

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

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

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

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

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

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

1function Person(firstName, lastName) {
2    this._firstName = firstName;
3    this._lastName = lastName;
4}
5
6Person.prototype.log = function() {
7    console.log('I am', this._firstName, this._lastName);
8}
9
10// 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.
11// Since in this example we are trying the mimic the class above, we try to use the getters and setters property provided by JavaScript
12Object.defineProperty(Person.prototype, 'profession', {
13    set: function(val) {
14        this._profession = val;
15    },
16    get: function() {
17        console.log(this._firstName, this._lastName, 'is a', this._profession);
18    }
19})

در کد بالا تابع سازنده Person تعریف و سپس متد log و getters/setters  برای ویژگی profession به نمونه اولیه آن اضافه شده است. این متدها و خصوصیات آن‌ها به وسیله نمونه‌هایی از کلاس Person قابل‌دسترسی هستند. رویکردی جایگزین، تعریف متدهای نمونه اولیه روی Person است:

1Person.prototype = {
2    log: function() {
3        console.log('I am ', this._firstName, this._lastName);
4    }
5    set profession(val) {
6        this._profession = val;
7    }
8
9    get profession() {
10        console.log(this._firstName, this._lastName, 'is a', this._profession);
11    }
12
13}

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

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

1function Person(firstName, lastName) {
2    this._firstName = firstName;
3    this._lastName = lastName;
4
5    this.log = function() {
6        console.log('I am ', this._firstName, this._lastName);
7    }
8
9    Object.defineProperty(this, 'profession', {
10        set: function(val) {
11            this._profession = val;
12        },
13        get: function() {
14            console.log(this._firstName, this._lastName, 'is a', this._profession);
15        }
16    })
17}

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

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

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

1let s_firstName = Symbol();
2
3class Person {
4    constructor(firstName, lastName) {
5        this[s_firstName] = firstName;
6        this._lastName = lastName;
7    }
8
9    log() {
10        console.log('I am', this[s_firstName], this._lastName);
11    }
12
13    // Setter
14    set profession(val) {
15        this._profession = val;
16    }
17
18    // Getter
19    get profession() {
20        console.log(this[s_firstName], this._lastName, 'is a', this._profession);
21    }
22}

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

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

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

مثال اول

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

1//we have an outer function named walk and an inner function named fly
2
3function walk (){
4  
5  var dist = '1780 feet';
6  
7  function fly(){
8    console.log('At '+dist);
9  }
10  
11  return fly;
12}
13
14var flyFunc = walk(); //calling walk returns the fly function which is being assigned to flyFunc
15//you would expect that once the walk function above is run
16//you would think that JavaScript has gotten rid of the 'dist' var
17
18flyFunc(); //Logs out 'At 1780 feet'
19//but you still can use the function as above 
20//this is the power of closures

مثال دوم

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

1function by(propName) {
2    return function(a, b) {
3        return a[propName] - b[propName];
4    }
5}
6
7const person1 = { name: 'joe', height: 72 };
8const person2 = { name: 'rob', height: 70 };
9const person3 = { name: 'nicholas', height: 66 };
10
11const arr_ = [person1, person2, person3];
12
13const arr_sorted = arr_.sort(by('height')); // Sorts the array of objects by the 'height' property.

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

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

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

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

1const bankAccount = (initialBalance) => {
2  const balance = initialBalance;
3
4  return {
5    getBalance: function() {
6      return balance;
7    },
8    deposit: function(amount) {
9      balance += amount;
10      return balance;
11    },
12  };
13};
14
15const account = bankAccount(100);
16
17account.getBalance(); // Returns 100
18account.deposit(10); // Returns 110

در مثال فوق، دسترسی به متغیر balance از خارج از تابع bankAccount غیرممکن است و در واقع نوعی متغیر خصوصی ایجاد می‌کند و اینجاست که عمل closure‌ وارد می‌شود. هنگامی که ()bankAccount  فراخوانی شود، نوعی شی حاوی توابع را بازمی‌گرداند. با وجود این، هنگامی که کاربر account.getBalance() را فراخوانی کند، تابع مرجع اصلی به متغیر balance اشاره خواهد داشت.

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

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

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

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

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

1var funcs = [];
2
3for (var i = 0; i < 3; i++) {
4    funcs[i] = function() {
5        console.log('My value is ' + i);
6    };
7}
8
9for (var j = 0; j < 3; j++) {
10    funcs[j](); // Outputs 'My value is 3' for all three functions
11}

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

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

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

1var funcs = [];
2    
3    var createFunction = function(val){
4	    return function() {console.log("My value: " + val);};
5    }
6
7    for (var i = 0; i < 3; i++) {
8        funcs[i] = createFunction(i);
9    }
10    for (var j = 0; j < 3; j++) {
11        funcs[j]();                 // My value is 0
12                                    // My value is 1
13                                    // My value is 2
14    }

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

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

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

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

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

1var myModule = (function() {
2    let privateVariable = 'I am a private variable';
3    
4    let method1 = function() { console.log('I am method 1'); };
5    let method2 = function() { console.log('I am method 2, ', privateVariable); };
6    
7    return {
8        method1: method1,
9        method2: method2
10    };
11})();
12
13myModule.method1(); // Outputs: I am method 1
14myModule.method2(); // Outputs: I am method 2, I am a private variable

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

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

فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در فرادرس

کلیک کنید

١. استفاده از //Comment : این نوع کامنت با // شروع و تا انتهای خط ادامه می‌یابد. مانند مثال زیر:

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

۲. استفاده از /* comment */ : این نوع کامنت می‌تواند یک یا چند خط را در بر‌بگیرد. مانند مثال زیر:

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

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

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

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

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

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

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

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

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

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

1function hello() {
2  // The statements below are not going to get executed
3  /*
4  console.log('hi');
5  console.log('code-test');
6  */
7}
8hello();

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

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

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

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

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

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

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

• هنگام مقایسه رشته‌ها، اگر کاراکترهای یکسان و طول یکسان داشته باشند، کاملاً برابر هستند.
• برای اعداد، تساوی دقیق مستلزم آن است که هر دو عملوند از نوع عددی و از نظر عددی برابر باشند. این بدان معنی است که هر دو مقدار 0 و -0 کاملاً برابر هستند زیرا هر دو مقدار 0 را ارزیابی می‌کنند. با این حال، NaN (Not-a-Number) نوعی مقدار ویژه است و با هیچ چیز، حتی خودش برابر نیست.
• هنگام مقایسه دو عملوند بولی، اگر هر دو درست یا نادرست باشند، کاملاً برابر هستند.
• اشیا هرگز در مقایسه‌های دقیق و انتزاعی برابر در نظر گرفته نمی‌شوند، مگر زمانی که به یک مثال عینی اشاره می‌کنند.
• تهی و تعریف نشده قوانین خاصی دارند: تهی کاملاً برابر با خودش است ( null === null ). همچنین تهی به طور انتزاعی برابر با undefined است ( null == undefined ).

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

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

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

1x == y

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

11   ==  1        // true
2"1"  ==  1        // true
31   == '1'       // true
40   == false     // true
50   == null      // false
60   == undefined // false
7null == undefined // true

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

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

1x != y

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

11 !=   2     // true
21 !=  "1"    // false
31 !=  '1'    // false
41 !=  true   // false
50 !=  false  // false

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

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

1x === y

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

13 === 3   // true
23 === '3' // false

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

اگر هر دو عملوند از نظر مقدار یا نوع کاملاً برابر نباشند، عملگر نابرابری دقیق، True را برمی‌گرداند که سینتکس آن به صورت زیر است:

1x !== y

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

13 !== '3' // true
24 !== 3   // true

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

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

1x > y

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

14 > 3 // true

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

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

1x >= y
24 >= 3 // true
33 >= 3 // true

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

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

1x < y
23 < 4 // true

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

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

1x <= y
23 <= 4 // true
3

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

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

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

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

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

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

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

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

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

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

1<html>
2   <head>
3      <title>Form Validation</title>
4      <script type="text/javascript">
5         function validate() {
6            // Form validation code will come here.
7         }
8      </script>
9   </head>
10   <body>
11      <form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return validate();">
12         <table cellspacing="2" cellpadding="2" border="1">
13            <tr>
14               <td align="right">Name</td>
15               <td><input type="text" name="Name" /></td>
16            </tr>
17            <tr>
18               <td align="right">EMail</td>
19               <td><input type="text" name="EMail" /></td>
20            </tr>
21            <tr>
22               <td align="right">Zip Code</td>
23               <td><input type="text" name="Zip" /></td>
24            </tr>
25            <tr>
26               <td align="right">Country</td>
27               <td>
28                  <select name="Country">
29                     <option value="-1" selected>[choose yours]</option>
30                     <option value="1">USA</option>
31                     <option value="2">UK</option>
32                     <option value="3">INDIA</option>
33                  </select>
34               </td>
35            </tr>
36            <tr>
37               <td align="right"></td>
38               <td><input type="submit" value="Submit" /></td>
39            </tr>
40         </table>
41      </form>
42   </body>
43</html>

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

در مثال بالا، ویژگی onsubmit تگ form روی تابع validate تنظیم شده که حاوی منطق اعتبارسنجی است. تابع validate جایی محسوب می‌شود که باید کدهای منطق فرم را داخل آن نوشت تا بررسی کند که آیا داده‌های فرم معتبر هستند یا خیر. اگر اعتبارسنجی ناموفق بود، می‌توان برای جلوگیری از ارسال فرم، false را بازگرداند. اعتبار‌سنجی فرم بخش اساسی توسعه وب برای اطمینان از یکپارچگی داده‌ها و افزایش تجربه کاربر است.

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

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

1<script type="text/javascript">
2   // Form validation code will come here.
3   function validate()
4      {
5      
6         if( document.myForm.Name.value == "" )
7         {
8            alert( "Please provide your name!" );
9            document.myForm.Name.focus() ;
10            return false;
11         }
12         
13         if( document.myForm.EMail.value == "" )
14         {
15            alert( "Please provide your Email!" );
16            document.myForm.EMail.focus() ;
17            return false;
18         }
19         
20         if( document.myForm.Zip.value == "" ||
21         isNaN( document.myForm.Zip.value ) ||
22         document.myForm.Zip.value.length != 5 )
23         {
24            alert( "Please provide a zip in the format #####." );
25            document.myForm.Zip.focus() ;
26            return false;
27         }
28         
29         if( document.myForm.Country.value == "-1" )
30         {
31            alert( "Please provide your country!" );
32            return false;
33         }
34         return( true );
35      }
36</script>

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

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

• آدرس ایمیل باید حداقل دارای علامت « @ » و یک نقطه (« . ») باشد.
• نماد @ نباید اولین کاراکتر آدرس ایمیل باشد.
• آخرین نقطه باید حداقل یک کاراکتر بعد از علامت @ باشد.

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

1<script type="text/javascript">
2    function validateEmail()
3      {
4         var emailID = document.myForm.EMail.value;
5         atpos = emailID.indexOf("@");
6         dotpos = emailID.lastIndexOf(".");
7         
8         if (atpos < 1 || ( dotpos - atpos < 2 )) 
9         {
10            alert("Please enter correct email ID")
11            document.myForm.EMail.focus() ;
12            return false;
13         }
14         return( true );
15      }
16</script>

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

HTML5 چندین محدودیت برای عنصر input فراهم می‌کند، از جمله ویژگی‌هایی مانند نوع، حداکثر طول، required ، disabled . این محدودیت‌ها به کاربر امکان می‌دهند نوع ورودی را مشخص کند، محدودیت‌های کاراکتر را تعیین کرده، ورودی را الزامی، فیلدها را غیرفعال و همچنین ورودی را تأیید کند. با اعمال این محدودیت‌ها، می‌توان اعتبارسنجی فرم و کنترل ورودی کاربر را در فرم‌های HTML خود افزایش داد.

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

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

1if (condition)
2    /* do something */
3else
4    /* do something else */

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

1if (condition1) {
2    // Do something if condition1 is true
3} else if (condition2) {
4    // Do something else if condition2 is true
5} else if (condition3) {
6    // Do something else if condition3 is true
7} else {
8    // Final statement if none of the conditions are true
9}

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

1if (condition) {
2    /* Do */
3    /* something */
4    /* with multiple statements */
5} else {
6    /* Do something else */
7}

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

مثال if...else

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

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

مثال else if

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

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

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

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

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

کلیک کنید

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

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

1function Point2D(x, y) {
2  this.x = x;
3  this.y = y;
4}

در کد فوق هنگامی که تابع Point2D اعلام می‌شود، نوعی ویژگی پیش‌فرض به نام prototype برای آن ایجاد خواهد شد. در جاوا اسکریپت، تابع نیز نوعی شی محسوب می‌شود. ویژگی prototype هم به عنوان نوعی شی حاوی ویژگی سازنده و مقدار آن تابع Point2D است. به عبارت دیگر Point2D.prototype.constructor برابر با Point2D خواهد بود. هنگامی که شی جدید با استفاده از کلمه کلیدی NEW ایجاد می‌شود، شی جدید ایجاد شده تمام خصوصیات را از Point2D.prototype به ارث می‌برد. برای نشان دادن این موضوع، باید متدی به نام move به Point2D.prototype اضافه کنیم:

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

اکنون می‌توان نوعی نمونه اولیه از Point2D ایجاد و از متد move روی آن استفاده کرد:

1var p1 = new Point2D(1, 2);
2p1.move(3, 4);
3console.log(p1.x); // 4
4console.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 برسد، زنجیره‌سازی را ادامه خواهد داد. اگر پس از جستجو، ویژگی در هیچ نقطه‌ای از زنجیره یافت نشد، نتیجه مشخص نمی‌شود. بیایید این موضوع را با مثالی توضیح دهیم:

1var obj1 = {
2  a: 1,
3  b: 2
4};
5
6var obj2 = Object.create(obj1);
7obj2.a = 2;
8
9console.log(obj2.a); // 2
10console.log(obj2.b); // 2
11console.log(obj2.c); // undefined

در کد بالا، وقتی obj2 با استفاده از Object.create(obj1) ایجاد می‌شود، obj2 نمونه اولیه obj1 را به ارث می‌برد و آن را به نمونه اولیه obj2 تبدیل می‌کند. این بدان معنی است حتی اگر b که یکی از ویژگی‌های obj2 هم نیست، همچنان می‌توان از طریق زنجیره‌سازی نمونه اولیه به آن دسترسی پیدا کرد. با این حال، برای ویژگی c ، که در obj1 یا در Object.prototype یافت نمی‌شود، مقدار تعریف نشده دریافت خواهد شد.

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

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

1class Rectangle {
2  constructor(height, width) {
3    this.height = height
4    this.width = width
5  }
6
7  get area() {
8    return this.calcArea()
9  }
10
11  calcArea() {
12    return this.height * this.width
13  }
14}
15
16const square = new Rectangle(10, 10)
17
18console.log(square.area) // 100

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

1function Rectangle(height, width) {
2  this.height = height;
3  this.width = width;
4}
5
6Rectangle.prototype.calcArea = function calcArea() {
7  return this.height * this.width;
8}

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

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

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

1var foo = 'Hi, I am foo!';
2
3var baz = function () {
4  var bar = 'Hi, I am bar too!';
5    console.log(foo);
6}
7
8baz(); // Hi, I am foo!
9console.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 در جاوا اسکریپت راهی برای پیمایش عناصر یا انجام کارهای تکراری بوده که دارای سه بخش مهم زیر است:

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

کلیک کنید

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

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

1for ([initialization]); [condition]; [final-expression]) {
2   // statement
3}

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

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

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

1// This will cause an error.
2    // The bounds of the array will be exceeded.
3    var arr = [ 1, 2, 3 ];
4    for (var i = 0; i <= arr.length; i++) {
5       console.log(arr[i]);
6    }
7
8    output:
9    1
10    2
11    3
12    undefined

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

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

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

1for (var i = 0; i < 9; i++) {
2   console.log(i);
3}
4
5output:
60
71
82
93
104
115
126
137
148

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

1for (var elephant = 1; elephant < 10; elephant+=2) {
2    if (elephant === 7) {
3        break;
4    }
5    console.info('elephant is ' + elephant);
6}
7
8output:
9elephant is 1
10elephant is 3
11elephant is 5

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

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

مثال اول

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

1function testBreak(x) {
2  var i = 0;
3
4  while (i < 6) {
5    if (i == 3) {
6      break;
7    }
8    i += 1;
9  }
10
11  return i * x;
12}

در مثال بالا، از عبارت break استفاده شده است تا زمانی که i برابر با ٣ حلقه را متوقف کند. سپس، نتیجه ۳ برابر x بازگرادنی شده است.

مثال دوم

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

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

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

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

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

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

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

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

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

1
2
3
4
5

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

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

فیلم آموزش تعریف توابع در جاوا اسکریپت (JavaScript) (رایگان) در فرادرس

کلیک کنید

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

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

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

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

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

1// Initialize object.
2a = { "a": "Athens", "b": "Belgrade", "c": "Cairo" }
3
4// Iterate over the properties.
5var s = ""
6for (var key in a) {
7    s += key + ": " + a[key];
8    s += "<br />";
9    }
10document.write (s);
11
12// Output:
13// a: Athens
14// b: Belgrade
15// c: Cairo
16
17// Initialize the array.
18var arr = new Array("zero", "one", "two");
19
20// Add a few expando properties to the array.
21arr["orange"] = "fruit";
22arr["carrot"] = "vegetable";
23
24// Iterate over the properties and elements.
25var s = "";
26for (var key in arr) {
27    s += key + ": " + arr[key];
28    s += "<br />";
29}
30
31document.write (s);
32
33// Output:
34//   0: zero
35//   1: one
36//   2: two
37//   orange: fruit
38//   carrot: vegetable
39
40// Efficient way of getting an object's keys using an expression within the for-in loop's conditions
41var myObj = {a: 1, b: 2, c:3}, myKeys = [], i=0;
42for (myKeys[i++] in myObj);
43
44document.write(myKeys);
45
46//Output:
47//   a
48//   b
49//   c

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

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

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

کلیک کنید

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

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

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

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

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

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

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