متدهای جاوا اسکریپت که باید بدانید – توضیح ۴۰ متد کاربردی + کد

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

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

«عبارت تابع» (Function Expression) جاوا اسکریپت شامل ذخیره تابع به عنوان نوعی «متغیر» (Variable) است. می‌توان بعداً با استفاده از نام این متغیر آن را فراخوانی کرد. در اینجا مثالی از عبارت تابع جاوا اسکریپت آمده است:

1let greeting = function(){
2  console.log('Hello');
3};
4
5greeting();

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

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

برای ایجاد توابع یا متدهای جاوا اسکریپت، می‌توان از کلمه کلیدی functionو به دنبال آن نام تابع موردنظر و مجموعه‌ای از پرانتزها و بریس‌ها استفاده کرد. در داخل بریس‌های {} ، کد اصلی تابع را می‌توان نوشت که این کد اقدامات موردنظر برنامه‌نویس را در هنگام فراخوانی تابع مشخص می‌کند. در اینجا مثالی از «سینتکس» (Syntax) تابع جاوا اسکریپت آمده است:

1function myFunction() {
2  // This is where you would put your code
3}

در مثال فوق، تابعی به نام myFunction تعریف شده است. هنگامی‌که این تابع در جای دیگری از کد فراخوانی می‌شود، دستورات داخل بریس‌های {}تابع اجرا می‌شوند و وظایف خاصی را که کاربر تعریف کرده است، انجام می‌دهند.

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

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

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

1function greeting(name = "Faradars") {
2  return `Hello ${name}`;
3}
4
5console.log(greeting());

در مثال فوق تابعی به نام greetingبا پارامتری به نام nameموجود بوده و همچنین مقدار پیش‌فرض Faradarsبرای پارامتر نام آن تنظیم شده است. هنگامی که تابع بدون هیچ آرگومانی برای nameفراخوانی می‌شود، از مقدار پیش‌فرض Faradarsاستفاده می‌کند و پیام Hello Faradarsرا بازمی‌گرداند.

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

تابع جاوا اسکریپت با پارامترهای اختیاری

توابع و متدهای جاوا اسکریپت می‌توانند پارامترهای اختیاری داشته باشند، به این معنی که این پارامترها می‌توانند به صورت اختیاری هنگام فراخوانی تابع استفاده شوند. در مثال زیر تابعی به نام greetingموجود است که دو پارامتر nameو messageدارد. پارامتر messageاختیاری بوده و دارای مقدار پیش‌فرض Welcome to Faradarsاست.

1function greeting(name, message = "Welcome to Faradars!") {
2  return `Hello ${name}, ${message}`;
3}
4
5console.log(greeting("John"));

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

در این سناریو، تابع greetingتنها با آرگومان nameارائه شده، فراخوانی می‌شود. از آنجا که آرگومان messageاختیاری بوده و به‌صراحت ارسال نشده است، این تابع از مقدار پیش‌فرض خود یعنی Welcome to Faradarsاستفاده می‌کند. با این حال، اگر کاربری بخواهد پیام را سفارشی کند، می‌تواند آرگومان پیام را هنگام فراخوانی تابع ارائه کرده و مقدار پیش‌فرض را لغو کند. مانند مثال زیر:

1console.log(greeting("John", "Greetings from HubSpot!"));

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

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

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

1function addTwoNumbers(num1, num2) {
2  return num1 + num2;
3}
4
5function calculateResult(firstNumber, secondNumber, func) {
6  let result = func(firstNumber, secondNumber);
7  console.log("The result is", result);
8}
9
10calculateResult(5, 10, addTwoNumbers);

در مثال فوق دو تابع addTwoNumbersو CalculResultموجود هستند. تابع addTwoNumbersبه سادگی دو عدد را با هم جمع می‌کند و نتیجه را برمی‌گرداند. تابع CalculResultسه پارامتر دارد:firstNumber، secondNumber وfunc. پارامتر funcبرای دریافت تابعی به عنوان آرگومان در نظر گرفته شده است. در داخلaccountResult، تابع ارسال شده با firstNumberو secondNumberفراخوانی شده و سپس نتیجه The result is 15را در کنسول ثبت می‌کند.

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

وقتی CalculResult(5, 10, addTwoNumbers)فراخوانی شود، تابع addTwoNumbersبه عنوان آرگومان تابع ارسال خواهد شد. درنتیجه، تابع addTwoNumbersبا اعداد ارائه شده (15 ، 10)اجرا شده و خروجی در کنسول چاپ می‌شود. این رویکرد برای ایجاد کد انعطاف‌پذیرتر و قابل ‌استفاده مجدد در استفاده از توابع و متدهای جاوا اسکریپت بسیار مفید است. با ارسال توابع به عنوان پارامتر، می‌توان رفتار تابع را بدون تغییر منطق اصلی آن سفارشی کرد و نوعی سبک کدنویسی ماژولار و قابل نگهداری به وجود آورد.

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

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

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

۱. عبارت تابع

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

1const greeting = function() {
2  console.log('Hello Reader!');
3};
4
5greeting();

در مثال بالا، تابعی بدون نام تعریف و به متغیر greetingاختصاص یافته است. بدنه تابع حاوی کد چاپ Hello Reader!‎به کنسول است که وقتی تابع با استفاده از greetingفراخوانی می‌شود، تابع ناشناس را اجرا می‌کند و در نتیجه خروجی Hello Reader!‎خواهد بود.

٢. ویژگی نام تابع

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

1function sayHello() {
2  console.log('Hello Reader!');
3}
4
5console.log(sayHello.name);

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

sayHello

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

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

٣. توابع درون خطی جاوا اسکریپت

در جاوا اسکریپت، سینتکس «تابع درون‌خطی» (Inline Function) به کاربر امکان می‌دهد یک خط کد مختصر برای تعریف تابعی بنویسد. همچنین این تابع به عنوان تابع پیکان (Arrow Function) و تابع لامبدا (Lambda Function) نیز شناخته می‌شود. در اینجا مثالی از تابع درون‌خطی آورده شده است:

1let sayHello = () => console.log('Hello Reader!');
2sayHello();

در مثال بالا، از دستور تابع درون‌خطی برای تعریف تابعی جدید استفاده می‌شود. توابع درون‌خطی می‌توانند برای توابع کوتاه و ساده که در آن کوتاهی موردنظر است بسیار مفید باشند. همچنین «تابع ناشناس» (Anonymous Function)، همان‌طور که از نام آن پیداست، نام خاصی با آن تابع مرتبط نیست. در مقابل، تابع درون‌خطی به متغیری نسبت داده می‌شود و درواقع به آن نامی می‌دهد. توابع ناشناس می‌توانند هر تعدادی از پارامترها را که در داخل پرانتز تابع مشخص شده‌اند، بپذیرند. مانند مثال زیر:

1let addNumbers = (num1, num2) => console.log(num1 + num2);
2
3addNumbers(5, 10); // Output: 15

در این حالت، نوعی تابع ناشناس از نوع تابع درون‌خطی وجود دارد که دو پارامتر num1و num2را می‌گیرد و مجموع آن‌ها را در کنسول ثبت می‌کند. وقتی این تابع با آرگومان‌های 5 و 10فراخوانی می‌شود، خروجی 15در کنسول ثبت خواهد شد.

۴. متد console.log در جاوا اسکریپت

یکی از مهم‌ترین و ابتدایی‌ترین متدهای جاوا اسکریپت متد console.log()است که برای نمایش پیام‌ها یا مقادیر در کنسول به منظور اشکال‌زدایی یا ورود به سیستم استفاده می‌شود. در اینجا مثالی از استفاده از متد console.log()آورده شده است:

1console.log('My name is Faradars');

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

My name is Faradars

در مثال بالا، از متد console.log()برای چاپ پیام My name is Faradarsدر کنسول استفاده می‌شود. هنگامی که این کد اجرا شود، خروجی در کنسول نمایش داده شده و به کاربر امکان می‌دهد پیامی را که ثبت کرده است مشاهده کند. متد console.log()ابزاری ضروری برای توسعه‌دهندگان هنگام کار با کدهای جاوا اسکریپت است.

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

۵. متد Print در جاوا اسکریپت

در جاوا اسکریپت، از متد print()برای نمایش محتوا در صفحه استفاده می‌شود. این متد در اصل به کاربر امکان می‌دهد محتوای صفحه وب را چاپ کند. مثال زیر نحوه استفاده از این متد را نشان می‌دهد:

1print('Hello Reader!');

با این کار پنجره‌ای باز می‌شود که Hello Reader!را نشان می‌دهد. در این مثال، از متد print()برای باز کردن نوعی دیالوگ چاپ استفاده می‌شود که رشته Hello Reader!را نمایش می‌دهد. سپس کاربر می‌تواند انتخاب کند که محتوا را چاپ کرده یا آن را به عنوان نوعی فایل ذخیره کند. خروجی کد بالا در کنسول مرورگر نوعی صفحه خالی باز خواهد کرد که امکان پرینت گرفتن از آن فراهم است.

توجه به این نکته مهم است که متدprint()مختص مرورگرهای وب است و برای چاپ محتوای صفحه وب در نظر گرفته شده است. برای ورود به سیستم یا اشکال‌زدایی عمومی مانند متد console.log()که پیام‌ها را در کنسول مرورگر نمایش می‌دهد، استفاده نمی‌شود. متد print()راهی برای تعامل با عملکرد چاپ مرورگر ارائه می‌کند و معمولاً برای چاپ اسناد یا محتوای وب استفاده می‌شود.

۶. تابع Callback در جاوا اسکریپت

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

1function greetUser(callback) {
2  console.log('Hello User');
3  callback();
4}
5
6greetUser(function() {
7  console.log('Welcome to Faradars!');
8});

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

Hello User
Welcome to Faradars!

در مثال بالا، تابعی به نام greetUserوجود دارد که پارامتر callbackرا می‌گیرد. در داخلgreetUser، ابتدا پیغام Hello Userوارد شده است و سپس تابع callbackکه به عنوان نوعی تابع ناشناس ارائه می‌شود و پیغام ‎Welcome to HubSpot!را ثبت می‌کند. توابع callbackمعمولاً در جاوا اسکریپت برای دستیابی به رفتار ناهم‌زمان، مدیریت رویدادها، انجام عملیات پس از تکمیل وظایف خاص و ایجاد کدهای ماژولارتر و انعطاف‌پذیرتر استفاده می‌شوند. آن‌ها به کاربر اجازه می‌دهند تا جریان اجرا را کنترل کرده و رفتار پویا را در برنامه‌های خود پیاده‌سازی کند.

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

متد Callback همراه با پارامتر

در زبان برنامه نویسی جاوا اسکریپت، توابع callbackمی‌توانند شامل پارامترهایی باشند که امکان پردازش پویا و رفتار چندمنظوره‌تر را فراهم می‌کنند. توجه به مثال زیر در این رابطه مهم است:

1function doSomething(param, callback) {
2  let result = param + 5;
3  callback(result);
4}
5
6doSomething(10, function(res) {
7  console.log("Result is", res);
8});

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

Result is 15

در مثال بالا، تابعی به نام doSomethingموجود است که دو پارامتر paramو callbackرا می‌گیرد. در داخل تابع، مقداری محاسبات روی مقدار paramانجام می‌شود (مقدار 5 به آن اضافه شده است) و سپس نتیجه به عنوان یک آرگومان به تابع callbackمنتقل خواهد شد. هنگامی که doSomething(10, function(res) {...})فراخوانی می‌شود، مقدار 10به عنوان مقدار paramو تابعی ناشناس به عنوانcallbackارسال می‌شوند. تابع ناشناس نتیجه resرا به عنوان پارامتر می‌گیرد و Result isرا ثبت می‌کند و به دنبال آن مقدارresکه در این مورد 15است، خواهد آمد.

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

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

سینتکس function*برای تعریف نوعی «تابع مولد» (Generator Functions) استفاده می‌شود که شیئی تکرارکننده را بازمی‌گرداند. توابع مولد یا ژنراتور توابع خاصی هستند که می‌توانند در حین اجرای خود متوقف و از سر گرفته شوند و به کاربر امکان می‌دهند دنباله‌ای از مقادیر را در طول زمان تولید کند. مثال زیر این موضوع را نشان می‌دهد:

1function* myGenerator() {
2  yield 'Hello';
3  yield 'Reader!';
4}
5
6const generator = myGenerator();
7console.log(generator.next().value);

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

Hello

در مثال ارائه شده، نوعی تابع مولد myGeneratorبا استفاده از سینتکس function*تعریف شده است. در داخل تابع مولد، از کلمه کلیدی yieldبرای تولید دو رشته Helloو Reader!استفاده شده که کلمه کلیدی yieldاجرای تابع مولد را متوقف می‌کند و مقدار مشخص شده را برمی‌گرداند. سپس با فراخوانی myGeneratorنوعی شی مولد generatorایجاد می‌شود. هنگامی که generator.next.valueفراخوانی شود، تابع مولد را شروع می‌کند و با اولین yield Helloمواجه می‌شود و مقدارHelloرا بازمی‌گرداند.

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

٨. توابع فراخوانی فوری در جاوا اسکریپت

به زبان ساده در جاوا اسکریپت، «عبارت تابع فوری فراخوانی شده» (Immediately-Invoked Function Expression) به کاربران امکان می‌دهد تابعی را بلافاصله پس از تعریف آن اجرا کنند. در اینجا نمونه‌ای از IIFE آورده شده است:

1(function() {
2  console.log('Hello Reader!');
3})();

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

Hello Reader!

در کد بالا نوعی تابع ناشناس با استفاده از سینتکس (function() {...}‎)تعریف شده و بلافاصله پس از اعلان آن، با افزودن ()در پایان، تابع فراخوانی شده است. IIFE این تابع را بلافاصله اجرا می‌کند و در نتیجه خروجی Hello Reader!در کنسول نمایش داده می‌شود. IIFE- ها اغلب برای ایجاد محدوده خصوصی برای متغیرها استفاده می‌شوند و از درگیر کردن متغیرها در دامنه یا محدوده سراسری جلوگیری می‌کنند. آن‌ها همچنین زمانی مفید هستند که کاربر نیاز دارد بلوک کدی را فقط یک بار اجرا کند.

Scope در جاوا اسکریپت چیست ؟ – توضیح به زبان ساده + مثال و کد

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

۹. متدهای بازگشتی در جاوا اسکریپت

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

1function factorial(n) {
2  if (n === 1) {
3    return 1;
4  } else {
5    return n * factorial(n - 1);
6  }
7}
8
9console.log(factorial(3));

خروجی مثال فوق به صورت زیر است:

در مثال بالا، تابعی بازگشتی به نام factorial تعریف شده است. تابع فاکتوریل عدد معین nرا محاسبه می‌کند. حالت پایه برای بازگشت زمانی است کهnبرابر با1باشد. در این حالت، تابع مقدار 1را بازمی‌گرداند. در غیر این صورت، nرا با فاکتوریل n-1ضرب می‌کند. این بازگشت تا زمانی ادامه می‌یابد که nبه 1تبدیل می‌شود و سپس مقادیر بازگردانده می‌شوند. متدهای جاوا اسکریپت از نوع بازگشتی برای حل انواع خاصی از مسائل، به ویژه آن‌هایی که می‌توانند به زیرمسائل کوچک‌تر از همان نوع تقسیم شوند، قدرتمند و مفید هستند.

١٠. توابع لامبدا در جاوا اسکریپت

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

1const addNumbers = (a, b) => a + b;
2
3console.log(addNumbers(1, 2));

خروجی مثال فوق به صورت زیر است:

در مثال ارائه شده نوعی تابع لامبدا به نام addNumbersتعریف شده است که دو پارامتر aو bرا گرفته و با استفاده از عبارت a + bآن‌ها را با هم جمع و علامت پیکان =>پارامترهای تابع و بدنه تابع را از هم جدا می‌کند. وقتی addNumbers(1، 2)فراخونی می‌شود، تابع مقدار 1 + 2را محاسبه کرده و نتیجه را بازمی‌گرداند. توجه به این نکته مهم است که توابع لامبدا در مقایسه با توابع معمولی تفاوت‌هایی دارند، به خصوص در نحوه مدیریت آن‌ها با زمینه مورد استفاده که می‌تواند تفاوت ایجاد کند.

١١. متدهای جاوا اسکریپت از نوع تاخیر - setTimeout

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

1setTimeout(function() {
2  console.log('Hello Reader!');
3}, 3000);

در مثال بالا، از setTimeout()برای به تأخیر انداختن اجرای تابع ناشناس (تابع بدون نام) ٣٠٠٠ میلی‌ثانیه (٣ ثانیه) استفاده شده است. پس از تأخیر مشخص شده، تابع اجرا شده و Hello Reader!در کنسول نمایش داده می‌شود. تابع setTimeout()معمولاً برای رسیدگی به کارهای ناهم‌زمان در جاوا اسکریپت، مانند انیمیشن‌ها، مدیریت رویداد و برقراری تماس‌های API با تأخیر استفاده می‌شود. با معرفی تأخیر زمانی، می‌توان زمان‌بندی اعمال خاصی را در کد کنترل کرده و برنامه‌های وب تعاملی و واکنش‌گرای بهتری ایجاد کرد.

١٢. متد Set Interval در جاوا اسکریپت

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

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

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

1let i = 0;
2const intervalId = setInterval(function() {
3  console.log(i++);
4}, 1000);

خروجی (پس از ١ ثانیه):

0
1

در مثالی که در بالا ارائه شد، متغیر iبا مقدار اولیه 0تعریف شده و سپس از setIntervalبرای برنامه‌ریزی اجرای تابعی ناشناس هر ١٠٠٠ میلی‌ثانیه (١ ثانیه) استفاده شده است. تابع، مقدار فعلی iرا ثبت کرده و با هر فراخوانی آن را افزایش می‌دهد. در نتیجه، تابع به طور مکرر با تأخیر زمانی ١ ثانیه بین هر تماس یا فراخوانی اجرا می‌شود. متد setInterval معمولاً برای انیمیشن‌ها، به‌روزرسانی داده‌های بلادرنگ در صفحات وب و انجام بررسی‌ها یا به‌روزرسانی‌های منظم در کارهای خاص استفاده می‌شود.

١٣. متد Alert در جاوا اسکریپت

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

1alert('Hello Reader!');

خروجی به صورت زیر خواهد بود:

با اجرای متد نام برده پنجره هشدار باز می‌شود که Hello Reader!را نمایش می‌دهد و از کاربر می‌خواهد که قبل از ادامه آن را رد کند. در این مثال، از متد alert()برای نمایش یک پنجره هشدار حاوی پیام Hello Reader!استفاده شده است. هنگامی‌که این کد اجرا می‌شود، پنجره پاپ‌آپ با پیام مشخص شده در مرورگر ظاهر می‌شود و کاربر باید قبل از ادامه روی دکمه OKکلیک کند تا هشدار رد شود. متد alert()معمولاً برای ارائه پیام‌ها یا هشدارهای مهم به کاربران استفاده می‌شود، اما در صورت استفاده بیش‌ازحد می‌تواند مخرب باشد. بنابراین، توصیه می‌شود از آن با احتیاط و فقط در مواقع ضروری برای اطمینان از تجربه کاربری مثبت استفاده شود.

۱۴. متد remove در جاوا اسکریپت

یکی از متدهای جاوا اسکریپت که می‌توان از آن برای حذف عنصر از «Document Object Model (DOM)» استفاده کرد، متد removeاست. مثال زیر به درک نحوه کار متد نام برده کمک می‌کند:

1let div = document.getElementById('div');
2div.remove();
3
4console.log(document.body);

خروجی مثال بالا به صورت زیر است:

<body></body>

در این مثال، ابتدا از document.getElementById('div')برای دریافت ارجاع به عنصر با شناسه divدر DOM استفاده شده است. سپس، متد removeروی آن عنصر فراخوانی شده تا آن را از DOM حذف کند. پس از حذف عنصر، وقتی document.bodyبه کنسول وارد می‌شود، یک تگ خالی bodyرا نشان می‌دهد. این به این دلیل است که عنصر با شناسه divبا موفقیت از DOM حذف شده است.

۱۵. متد Import در جاوا اسکریپت

در جاوا اسکریپت، متد import()برای واردکردن پویای ماژول‌ها از اسکریپت‌های دیگر استفاده می‌شود. این متد به کاربر امکان می‌دهد ماژول‌ها را بر اساس درخواست بارگیری کند که می‌تواند برای بهینه‌سازی زمان بارگذاری اولیه برنامه وب مفید باشد. مثال زیر در این رابطه آورده شده است:

1import('./hello.js').then(module => {
2  console.log(module.sayHello);
3});

خروجی به صورت زیر خواهد بود:

Hello Faradars

در مثال فوق، از متد import()برای واردکردن پویا ماژول hello.jsاز اسکریپت دیگر استفاده شده است. متد import()نوعی «وعده» (Promise) را برمی‌گرداند. در مثال فوق و در بلوک then()به تابع sayHelloاز ماژول وارد شده دسترسی پیدا می‌شود و آن را به کنسول وارد می‌کند. وارد کردن ماژول به صورت پویا پویا زمانی مفید است که کاربر بخواهد ماژول‌ها را به‌صورت مشروط یا ناهم‌زمان بر اساس رویدادهای خاص یا تعاملات کاربر بارگیری کند. آن‌ها به کاهش اندازه اولیه بسته نرم‌افزاری و بهبود عملکرد کلی برنامه کمک می‌کنند.

Promise در جاوا اسکریپت و کاربردهای آن — به زبان ساده

۱۶. متد document.write در جاوا اسکریپت

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

1document.write('Hello Faradars!');

خروجی مثال فوق به صورت زیر است:

Hello Faradars

در مثال بالا از متد document.write()برای نوشتن رشته Hello Faradars!‎در جریان خروجی صفحه وب استفاده شده است. سپس محتوا مستقیماً در صفحه وب جایی که اسکریپت اجرا می‌شود چاپ خواهد شد.

١٧. متد Bind در جاوا اسکریپت

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

1function sayHello() {
2  console.log('Hello Faradars');
3}.bind(this);
4
5sayHello();

خروجی مثال بالا به صورت زیر است:

Hello Faradars

در مثال بالا تابع sayHello()برای ثبت پیام Hello HubSpotter!تعریف شده است. همچنین متد bind(this)برای ایجاد تابعی جدید که با مقدار فعلی thisمرتبط بوده استفاده می‌شود. با استفاده از bind(this)، تابع جدید به زمینه یا شی خاص متصل شده و اطمینان حاصل می‌شود که مقدار thisدر هنگام فراخوانی تابع به آن زمینه یا شی خاص ارجاع داده خواهد شد. استفاده از bind()مخصوصاً هنگام برخورد با مقدار thisدر متدهای شی یا زمانی که کاربر بخواهد تابعی را به عنوان نوعی فراخوان ارسال و در عین حال زمینه آن را حفظ کند، مفید است.

This در جاوا اسکریپت – توضیح و کاربرد + مثال

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

١٨. تابع خالی در جاوا اسکریپت

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

1let sayHello = () => {};
2sayHello();

خروجی مثال بالا به صورت زیر است:

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

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

١٩. تابع Math.min در جاوا اسکریپت

در جاوا اسکریپت، از متد Math.min()برای یافتن و بازگردانی کوچک‌ترین عدد در میان فهرستی معینی از اعداد یا عناصر استفاده می‌شود که مثال زیر این موضوع را نشان می‌دهد.

1let numbers = [-1, 2, 3, -4];
2
3console.log(Math.min(...numbers));

خروجی مثال فوق به صورت زیر است:

-4

در این مثال، آرایه‌ای از اعداد [ -1، 2، 3، -4]موجود است که در آن از عملگر spread (`...`)استفاده شده تا هر عنصر آرایه را به عنوان آرگومان جداگانه به متد Math.min()ارسال کند. سپس متدMath.min()کوچک‌ترین عدد را در بین این آرگومان‌ها پیدا کرده و آن را بازمی‌گرداند. متد Math.min()به عنوان یکی از متدهای جاوا اسکریپت زمانی مفید است که کاربر نیاز دارد حداقل مقدار را در آرایه بدون نیاز به پیمایش دستی عناصر پیدا کند. می‌توان از آن برای اهداف مختلفی مانند یافتن کمترین مقدار در مجموعه‌ای از داده‌ها یا حداقل مقدار در محدوده‌ای از اعداد استفاده کرد.

٢٠. متد Math.max در Javascript

متد Math.max()در جاوا اسکریپت برای یافتن و بازگردانی بزرگ‌ترین عدد در میان فهرستی معینی از اعداد یا عناصر استفاده می‌شود که مثال زیر نحوه استفاده از آن را نشان می‌دهد.

1let numbers = [-1, 2, 3, 4];
2
3console.log(Math.max(...numbers));

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

در این مثال، آرایه‌ای از اعداد [ -1، 2، 3، 4]موجود است که از عملگر spread (`...`)برای ارسال هر عنصر آرایه به عنوان آرگومان جداگانه به متد Math.max()استفاده شده است. سپس متد Math.max()بزرگ‌ترین عدد را در بین این آرگومان‌ها پیدا کرده و آن را بازمی‌گرداند. در این مورد، بزرگ‌ترین عدد در آرایه 4است، بنابراین مقدار چاپ شده در کنسول 4خواهد بود. متدMath.max()هم‌ زمانی مناسب است که کاربر نیاز دارد حداکثر مقدار را در آرایه بدون نیاز به پیمایش دستی از طریق عناصر پیدا کند و تقریباً رسالتی مانند متد Math.min()به عهده دارد اما به جای کوچک‌ترین عدد، بزرگ‌ترین عدد را از لیست یا آرایه‌ای معین بازمی‌گرداند.

٢١. متد Math.floor در جاوا اسکریپت

یکی دیگر از متدهای جاوا اسکریپت Math.floor()است که برای گرد کردن عددی معین به نزدیک‌ترین عدد صحیح استفاده می‌شود. این متد به طور مؤثر بخش اعشاری عدد را حذف می‌کند و بزرگ‌ترین عدد صحیح کمتر یا مساوی با مقدار اصلی را بازمی‌گرداند. مثال زیر برای نشان دادن این موضوع است:

1let fraction = 3.6;
2console.log(Math.floor(fraction));

خروجی مثال بالا به صورت زیر است:

در این مثال، متغیری با مقدار 3.6داریم. وقتیMath.floor()روی این مقدار اعمال و فراخوانی می‌شود این متد عدد 3.6را به نزدیک‌ترین عدد صحیح که 3است، گرد می‌کند و آن را بازمی‌گرداند. توجه به این نکته مهم است که Math.floor()همیشه مقدار صحیح برمی‌گرداند، حتی اگر عدد اصلی منفی باشد.

فیلم آموزش برنامه نویسی جاوا اسکریپت در ادوبی انیمیت Adobe Animate در فرادرس

٢٢. متد Console Count در جاوا اسکریپت

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

1console.count('Hello');
2
3console.count('World');
4
5console.count('Hello');

خروجی مثال فوق به صورت زیر است:

Hello: 1
World: 1
Hello: 2

در این مثال، متد console.count()برای پیگیری وقوع خطوط خاصی از کد در حال اجرا استفاده می‌شود. این متد نوعی برچسب را به عنوان آرگومان می‌گیرد (به عنوان مثال، "Hello یا World ) و هر بار که با آن برچسب مواجه می‌شود، تعداد آن را افزایش می‌دهد. این متد خروجی برچسب را به همراه مقدار شمارش مرتبط نمایش خواهد داد. استفاده ازconsole.count()می‌تواند بینش‌های ارزشمندی در مورد فراوانی اجرای کد ارائه دهد و به کاربر در شناسایی الگوها یا رفتارهای غیرمنتظره کمک می‌کند.

٢٣. متد Init در Javascript

کار متد initبه عنوان یکی از متدهای جاوا اسکریپت شامل اعلان متغیر و دادن مقدار اولیه به آن است که مثال زیر نحوه کار آن را نشان می‌دهد:

1let varName = value;

در این مثال، متد initبرای اعلام متغیری به نام varNameو اختصاص مقدار اولیه به آن استفاده می‌شود.

۲۴. متد Prompt در جاوا اسکریپت‎

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

1let name = prompt("What is your name?");
2
3console.log(name);

خروجی مثال بالا به صورت تصویر زیر است:

در مثال ارائه شده، متد prompt()کادر محاوره‌ای با پیام What is your name? را نمایش می‌دهد. کاربر می‌تواند متنی را در کادر محاوره‌ای وارد و سپس روی OK یا Cancelکلیک کند. مقدار وارد شده به وسیله کاربر در متغیر name ذخیره و محتوای آن با استفاده از console.log()در کنسول چاپ می‌شود. متد prompt()به عنوان یکی از متدهای جاوا اسکریپت اغلب برای جمع‌آوری ورودی کاربر استفاده می‌شود و می‌تواند برای ایجاد عناصر تعاملی در برنامه‌های کاربردی وب مفید باشد.

۲۵. متد Number در Javascript

در جاوا اسکریپت، متد Number()برای تبدیل نوعی مقدار داده شده به نوع داده Number در جاوا اسکریپت استفاده می‌شود که مثال زیر شیوه استفاده از آن را بیان می‌کند:

1let numberString = '10';
2console.log(Number(numberString));

خروجی مثال بالا به صورت زیر است:

در مثال فوق، متد Number()رشته 10را به نوعی مقدار عددی تبدیل می‌کند. خروجی حاصل عدد 10است که سپس در کنسول چاپ می‌شود. متد Number()زمانی مفید است که کاربر بخواهد که مقداری خاص به عنوان مقدار عددی در نظر گرفته شود، حتی اگر به صورت «رشته» (استرینگ | String) از اول ارائه شده باشد. این متد در اصل تبدیل خودکار نوع را انجام می‌دهد و سعی می‌کند انواع مختلف ورودی را به اعداد معتبر تبدیل کند. اگر تبدیل امکان‌پذیر نباشد (به عنوان مثال، هنگام تبدیل رشته‌های غیر عددی)، متد مقدار Nanبازمی‌گرداند.

تبدیل رشته به عدد در جاوا اسکریپت – به زبان ساده + مثال و کد

۲۶. متد Then، از متدهای جاوا اسکریپت برای عملیات ناهمزمانی

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

1asyncFunc()
2    .then(value => console.log(value));

خروجی مثال فوق به صورت زیر است:

Output from asyncFunc()

در مثال بالا، متد then()برای تعریف دنباله‌ای از اقدامات (در این مورد، console.log(value)) استفاده می‌شود که پس از تکمیل یک عملیات ناهم‌زمان (asyncFunc() ) اجرا خواهد شد و سپس نتیجه یا مقدار به دست آمده از عملیات ناهم‌زمان در کنسول ثبت می‌شود. متد then()معمولاً همراه با وعده‌ها و عملیات ناهم‌زمان استفاده می‌شود. این متد به عنوان یکی از مهم‌ترین متدهای جاوا اسکریپت برای عملیات ناهم‌زمان به کاربر امکان می‌دهد عملیات‌هایی را که به تکمیل وظایف قبلی بستگی دارد، انجام دهد. این کار مکانیسم کنترل بهتری بر جریان کدهای ناهم‌زمان را امکان‌پذیر کرده و به جلوگیری از رخداد callback hell کمک می‌کند.

Async و Await در جاوا اسکریپت – توضیح به زبان ساده + مثال و کد

٢٧. متد Every در جاوا اسکریپت

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

1let numbers = [];
2numbers.push(1);
3numbers.push(2);
4numbers.push(3);
5
6let check = numbers.every(number => number < 4);
7
8console.log(check);

خروجی مثال بالا به صورت زیر است:

true

در مثال ارائه شده، متد every()به آرایه numbersاعمال می‌شود تا بررسی کند که آیا همه عناصر آرایه کمتر از 4هستند یا خیر. این شرط برای هر عنصر داخل آرایه ارائه شده صادق است و بنابراین مقدار خروجی نهایی در کنسول trueخواهد بود. اگر هر عنصری در آرایه نتواند شرط را برآورده کند، متد نام برده مقدار falseرا بازمی‌گرداند. این متد مخصوصاً در هنگام برخورد با اعتبارسنجی داده‌ها یا فیلتر کردن عناصر بر اساس معیارهای خاص مفید است.

متدهای آرایه در جاوا اسکریپت – هر آنچه باید بدانید + مثال و کد

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

٢٨. ReferenceError در جاوا اسکریپت

«ReferenceError» در جاوا اسکریپت نوعی خطا است و زمانی رخ می‌دهد که تلاش برای دسترسی به متغیر یا تابعی که تعریف نشده، انجام شود. مثال زیر برای بیان این موضوع است:

1console.log(sayHello);

خروجی مثال بالا به صورت زیر است:

در مثال ارائه شده، ReferenceErrorرخ می‌دهد زیرا کاربر می‌خواهد به متغیر sayHelloدسترسی داشته باشد اما در کد اعلان یا تعریف نشده است. ReferenceErrorمعمولاً نشان می‌دهد که متغیر یا تابعی که به آن ارجاع داده می‌شود در محدوده فعلی وجود ندارد.

٢٩. امضای تابع در جاوا اسکریپت

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

1function add(a, b) {
2    return a + b;
3}

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

٣٠. تابع ng-click در انگولار جی اس

در فریمورک «انگولار جی اس» (Angularjs)، دستورالعمل ng-clickاجرای کد سفارشی را هنگامی‌که روی عنصری مشخص کلیک می‌شود، فعال می‌کند. مثالی از استفاده از تابعng-clickبه صورت زیر است:

1<button ng-click="myFunction()">Click Me</button>

در مثال ارائه شده، دستورالعمل ng-clickبه عنصر دکمه اعمال می‌شود. هنگامی‌که روی دکمه کلیک صورت بگیرد، کد سفارشی تعریف شده به وسیله تابع myFunction()اجرا می‌شود. در این موارد خروجی مستقیماً روی کنسول چاپ نمی‌شود زیرا تابع ng-clickمعمولاً خروجی مستقیم کنسول ندارد. تابع ng-clickبرای افزودن تعامل به برنامه‌های وب بسیار تابعی ارزشمند است. این تابع به توسعه‌دهندگان این امکان را می‌دهد تا رفتار سفارشی را هنگامی‌که روی عناصر خاصی کلیک می‌شود، تعریف کنند.

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

٣١. متد submit در جاوا اسکریپت

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

1<form>   
2 <input type="submit" onclick="myFunction()"> 
3</form>

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

در این مثال، از متد submit()برای شروع ارسال فرم HTML استفاده شده است. هنگامی‌که روی دکمه «Submit» کلیک صورت بگیرد، تابع مشخص شده myFunction()اجرا خواهد شد. استفاده از متد submit()به کاربر این امکان را می‌دهد که داده‌های فرم را به سرور ارسال کند یا سایر اقدامات مرتبط با ارسال فرم را انجام دهید. در زمینه برنامه‌های کاربردی وب، این متد نقش مهمی در مدیریت ورودی و تعامل کاربر ایفا می‌کند.

٣٢. ویژگی Form Action در جاوا اسکریپت

در HTML، ویژگی Form Actionنشانی اینترنتی صفحه را مشخص می‌کند که باید هنگام ارسال فرم بارگیری شود. مثالی از استفاده از ویژگی نام برده به صورت زیر است:

1<form action="/process-data">    
2 <input type="text" name="name" />   
3 <input type="submit" value="Submit" />   
4</form>

خروجی HTML کد بالا به صورت زیر است:

در مثال ارائه شده، ویژگی action با مقدار ‎/process-dataتنظیم شده که وقتی فرم ارسال شد، این URL بارگیری می‌شود. این یعنی هر داده‌ای که در فیلدهای فرم وارد می‌شود در درخواست HTTP به آن URL گنجانده خواهد شد. ویژگی Action بخشی اساسی از فرم‌های HTML است که به کاربر امکان می‌دهد تعیین کند که داده‌های فرم برای پردازش کجا ارسال شوند.

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

٣٣. متد If Else در جاوا اسکریپت

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

1let num = 10;
2
3if (num > 5) {
4    console.log('Number is greater than 5');
5} else {
6    console.log('Number is not greater than 5');
7}

خروجی مثال فوق به صورت زیر است:

Number is greater than 5

در مثال بالا، ساختار If Else شرط num > 5را ارزیابی می‌کند. بسته به درست یا نادرست بودن این شرط، دستورالعمل‌های مربوطه در بلوک ifیا بلوک elseاجرا می‌شوند. از آنجا که مقدار num برابر با 10 و بزرگ‌تر از 5است، پیام Number is greater than 5در کنسول چاپ می‌شود.

۳۴. تابع Greet در جاوا اسکریپت

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

1function greet(name) {
2    return "Hello " + name;
3}
4
5console.log(greet('John'));

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

Hello John

در این مثال، تابع greetبرای پذیرش پارامتر nameتعریف شده است. سپس با ترکیب رشته Helloبا پارامتر nameارائه شده، نوعی پیغام ایجاد می‌کند. هنگامی‌که تابع با آرگومان Johnفراخوانی می‌شود، خروجی Hello Johnدر کنسول چاپ خواهد شد.

فیلم آموزش مقدماتی نود جی اس Node.js در فرادرس

۳۵. متد Require در جاوا اسکریپت

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

1let moment = require("moment");
2let time = moment().format("Do MMMM YYYY, hh:mm a");
3
4console.log(time);

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

در مثالی که ارائه شد، متد require()برای واردکردن کتابخانه momentبه برنامه استفاده می‌شود. این کتابخانه اغلب برای مدیریت و قالب‌بندی تاریخ و زمان مورد استفاده قرار می‌گیرد. پس از واردکردن ماژول moment، برنامه از آن برای تولید برچسب زمانی قالب‌بندی شده استفاده می‌کند. متد require()معمولاً در محیط‌های «نود جی اس» (Node.js) برای واردکردن کتابخانه‌ها یا ماژول‌های خارجی استفاده می‌شود و عملکرد آن‌ها را در کد کاربر در دسترس قرار می‌دهد.

۳۶. متد Private در جاوا اسکریپت

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

1class Greeter {
2   constructor(name) {
3      this.name = name;
4   }
5
6   #sayHello() {
7      console.log(`Hello ${this.name}!`);
8   }
9
10   greet() {
11      this.#sayHello();
12   }
13}
14
15let greeter = new Greeter('Reader');
16greeter.greet();

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

Hello Reader!

در مثال بالا، نوعی متد خصوصی به نام sayHelloبا استفاده از نماد #تعریف شده است. این متد خصوصی فقط در کلاس Greeterقابل دسترسی است و از خارج از کلاس قابل دسترسی نیست. متد عمومی greet()در همان کلاس، متد خصوصی #sayHello()را برای چاپ پیام تبریک Hello Reader!به کنسول می‌دهد. متدهای خصوصی، که با نماد #نشان داده می‌شوند، کپسوله‌سازی را فراهم کرده و به مخفی نگه‌داشتن قابلیت‌های خاص در کلاس کمک می‌کنند. این متد می‌تواند از دسترسی ناخواسته و دست‌کاری متدهای جاوا اسکریپت دیگر یا داده‌های حیاتی جلوگیری کند.

٣٧. دستورالعمل یا بیانیه خالی در جاوا اسکریپت

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

1console.log('Hello Faradars!');
2;  //empty statement
3console.log('Goodbye Farasars!');

خروجی مثال بالا به صورت زیر است:

Hello Faradars!
Goodbye Faradars!

در مثال ارائه شده، دستورالعمل خالی برای ایجاد نوعی خط خالی عمدی در کد استفاده می‌شود. این دستورالعمل بر رفتار یا خروجی برنامه تأثیری ندارد. عبارات یا دستورالعمل‌های خالی معمولاً در بیشتر موارد ضروری نیستند و کمتر مورد استفاده قرار می‌گیرند.

۳۸. توابع پیکان در جاوا اسکریپت

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

1const greeting = (name) => {
2    return `Hello ${name}`;
3}
4
5console.log(greeting("Faradars"));

خروجی مثال بالا به صورت زیر است:

Hello Faradars

در مثال فوق، از تابع پیکان یا فلش برای تعریف تابع Helloاستفاده می‌شود که پارامتر nameرا می‌گیرد و پیام greetingرا بازمی‌گرداند. سینتکس آن کوتاه‌تر و ساده‌تر از اعلان تابع سنتی است. در نتیجه‌ی اجرای تابع پیکان بالا، خروجی Hello Faradarsدر کنسول چاپ می‌شود که این در اثر فراخوانی تابع greetingبا آرگومان Faradarsاتفاق افتاده است. توابع پیکان مخصوصاً زمانی مفید هستند که برای کارهای ساده به عبارات تابع مختصر نیاز باشد. این توابع برای بسیاری از موارد استفاده رایج در برنامه نویسی جاوا اسکریپت مدرن مناسب هستند.

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

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

۳۹. دستورالعمل Break در جاوا اسکریپت

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

1for (let i = 0; i < 10; i++) {
2    if (i == 5) {
3        break;
4    }
5    console.log(i);
6}

خروجی مثال بالا به صورت:

در این مثال، دستور breakاجرای حلقه (در این مورد، حلقه for) را هنگامی‌که مقدار i برابر 5می‌شود متوقف می‌کند. سپس خروجی اعداد 0 تا 4را نشان می‌دهد.

استفاده از Break برای خروج از تابع

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

1function findNumber(array, num) {
2    for (let i = 0; i < array.length; i++) {
3        if (array[i] == num) {
4            return "Number found";
5            break;
6        }
7    }
8    return "Number not found";
9}

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

Number found or Number not found.

در مثال بالا، عبارت breakدر تابع findNumberاستفاده می‌شود تا از تابع خارج شده و نوعی مقدار (Number found or Number not found) ایجاد شود. سپس خروجی نتیجه فراخوانی تابع را نشان می‌دهد. دستور breakبه‌ویژه برای کنترل جریان حلقه‌ها و پایان ناگهانی اجرای آن‌ها در صورت برآورده شدن شرایط خاص مفید است.

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

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

٤٠. رویداد Onload در جاوا اسکریپت

نوعی رویداد یا Event در جاوا اسکریپت، onloadاست که به کد کاربر اجازه می‌دهد تا بلافاصله پس از اتمام بارگیری یک صفحه وب، توابع یا متدهای جاوا اسکریپت مدنظر اجرا شوند. مثال زیر نحوه استفاده از این رویداد را نشان می‌دهد:

1<button onload="functionName()">
2</button>

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

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

٤١. سازنده در جاوا اسکریپت

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

1function Person(name, age) {
2    this.name = name;
3    this.age = age;
4}
5
6let person = new Person('John', 18);
7console.log(person);

خروجی مثال فوق به صورت زیر است:

Person {name: "John", age: 18}

در این مثال، سازنده Personشیئی تازه با ویژگی‌های name و ageتولید می‌کند. همچنین مثال زیر نمونه سازنده کلاس را نشان می‌دهد:

1class Car {
2    constructor(make, model) {
3        this.make = make;
4        this.model = model;
5    }
6}
7
8let car = new Car('Ford', 'Mustang');
9console.log(car);

خروجی مثال بالا هم به صورت زیر است:

Car {make: "Ford", model: "Mustang"}

در مثال فوق، سازنده کلاس Carشیئی جدید با ویژگی‌های makeو modelایجاد می‌کند. سازنده‌ها برای برنامه نویسی شی گرا در جاوا اسکریپت اساسی هستند. آن‌ها به کاربر این امکان را می‌دهند که به طور موثر نمونه‌هایی از اشیا با ویژگی‌ها و رفتارهای مشخص ایجاد کند.

سخن پایانی

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