القائمة الرئيسية

الصفحات

 JavaScript - Functions

A function is a group of reusable code which can be called anywhere in your program. This eliminates the need of writing the same code again and again. It helps programmers in writing modular codes. Functions allow a programmer to divide a big program into a number of small and manageable functions.

Like any other advanced programming language, JavaScript also supports all the features necessary to write modular code using functions. You must have seen functions like alert() and write() in the earlier chapters. We were using these functions again and again, but they had been written in core JavaScript only once.

JavaScript allows us to write our own functions as well. This section explains how to write your own functions in JavaScript.

Function Definition

Before we use a function, we need to define it. The most common way to define a function in JavaScript is by using the function keyword, followed by a unique function name, a list of parameters (that might be empty), and a statement block surrounded by curly braces.

Syntax

The basic syntax is shown here.

الوظيفة عبارة عن مجموعة من التعليمات البرمجية القابلة لإعادة الاستخدام والتي يمكن استدعاؤها في أي مكان في برنامجك. هذا يلغي الحاجة إلى كتابة نفس الرمز مرارًا وتكرارًا. يساعد المبرمجين في كتابة الأكواد المعيارية. تسمح الوظائف للمبرمج بتقسيم برنامج كبير إلى عدد من الوظائف الصغيرة التي يمكن التحكم فيها. مثل أي لغة برمجة متقدمة أخرى ، تدعم JavaScript أيضًا جميع الميزات اللازمة لكتابة كود معياري باستخدام الوظائف. يجب أن تكون قد شاهدت وظائف مثل التنبيه () وكتابة () في الفصول السابقة. كنا نستخدم هذه الوظائف مرارًا وتكرارًا ، لكن تمت كتابتها في Core JavaScript مرة واحدة فقط. تسمح لنا JavaScript بكتابة وظائفنا الخاصة أيضًا. يشرح هذا القسم كيفية كتابة الوظائف الخاصة بك في JavaScript. تعريف الوظيفة قبل أن نستخدم دالة ، نحتاج إلى تعريفها. الطريقة الأكثر شيوعًا لتعريف دالة في JavaScript هي استخدام الكلمة الأساسية للوظيفة ، متبوعة باسم وظيفة فريد ، وقائمة من المعلمات (قد تكون فارغة) ، وكتلة بيان محاطة بأقواس معقوفة. بناء الجملة يظهر هنا بناء الجملة الأساسي.

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

Example

Try the following example. It defines a function called sayHello that takes no parameters −

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

Calling a Function

To invoke a function somewhere later in the script, you would simply need to write the name of that function as shown in the following code.

<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>

Output

Function Parameters

Till now, we have seen functions without parameters. But there is a facility to pass different parameters while calling a function. These passed parameters can be captured inside the function and any manipulation can be done over those parameters. A function can take multiple parameters separated by comma.

معلمات الوظيفة حتى الآن ، رأينا وظائف بدون معلمات. ولكن هناك وسيلة لتمرير معاملات مختلفة أثناء استدعاء دالة. يمكن التقاط هذه المعلمات التي تم تمريرها داخل الوظيفة ويمكن إجراء أي معالجة على هذه المعلمات. يمكن أن تأخذ الوظيفة معلمات متعددة مفصولة بفاصلة.

Example

Try the following example. We have modified our sayHello function here. Now it takes two parameters.


<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>

Output

The return Statement

A JavaScript function can have an optional return statement. This is required if you want to return a value from a function. This statement should be the last statement in a function.

For example, you can pass two numbers in a function and then you can expect the function to return their multiplication in your calling program.

Example

Try the following example. It defines a function that takes two parameters and concatenates them before returning the resultant in the calling program.

يمكن أن تحتوي وظيفة الإرجاع A JavaScript على عبارة إرجاع اختيارية. هذا مطلوب إذا كنت تريد إرجاع قيمة من دالة. يجب أن تكون هذه العبارة هي العبارة الأخيرة في الوظيفة. على سبيل المثال ، يمكنك تمرير رقمين في دالة ومن ثم يمكنك توقع أن تعيد الدالة مضاعفتها في برنامج الاستدعاء الخاص بك. مثال جرب المثال التالي. وهي تحدد وظيفة تأخذ معلمتين وتسلسلهما قبل إرجاع الناتج في برنامج الاستدعاء.


<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>

Output

There is a lot to learn about JavaScript functions, however we have covered the most important concepts in this tutorial.
  • JavaScript Nested Functions
  • JavaScript Function( ) Constructor
  • JavaScript Function Literals
هل اعجبك الموضوع :

تعليقات