آموزش جاوا اسکریپت - توابع

تابع(function) یک گروه از کد های قابل استفاده است که می‌توانید در هر جای برنامه‌ی خود فراخوانی کنید. این باعث می‌شود که نیازی به نوشتن همان کد‌ها دوباره و دوباره نباشد و برنامه‌نویسان را در نوشتن کد‌های ماژولار کمک می‌کند. توابع به برنامه‌نویس اجازه می‌دهند یک برنامه بزرگ را به تعداد کلیدی از توابع کوچک و قابل مدیریت تقسیم کند.

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

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

تعریف تابع (Function Definition)

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

نحو

نحو اصلی به صورت زیر است.

<script type = "text/javascript">
   <!--
      function functionname(parameter-list) {
         statements
      }
   //-->
</script>

مثال

برای درک بهتر مفهوم تعریف یک تابع، می‌توانید مثال زیر را امتحان کنید. این مثال یک تابع به نام sayHello را تعریف می‌کند که هیچ پارامتری را به عنوان ورودی نمی‌گیرد:

<script type = "text/javascript">
   <!--
      function sayHello() {
         alert("Hello there");
      }
   //-->
</script>

فراخوانی یک تابع (Calling a Function)

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

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello() {
            document.write ("Hello there!");
         }
      </script>
      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello">
      </form>      
      <p>Use different text in write method and then try...</p>
   </body>
</html>

پارامترهای تابع

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

مثال

با مثال زیر آشنا شوید. ما تابع sayHello را اصلاح کرده‌ایم تا دو پارامتر دریافت کند.

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello(name, age) {
            document.write (name + " is " + age + " years old.");
         }
      </script>      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">
      </form>      
      <p>Use different parameters inside the function and then try...</p>
   </body>
</html>

دستور بازگشت (The return Statement)

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

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

مثال

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

<html>
   <head>  
      <script type = "text/javascript">
         function concatenate(first, last) {
            var full;
            full = first + last;
            return full;
         }
         function secondFunction() {
            var result;
            result = concatenate('Zara', 'Ali');
            document.write (result );
         }
      </script>      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "secondFunction()" value = "Call Function">
      </form>      
      <p>Use different parameters inside the function and then try...</p>  
  </body>
</html>

کنترل حلقه - درس قبلی

درس بعدی - رویدادها