MooTools - ฟังก์ชั่น

ฟังก์ชั่นใน MooTools เป็นแนวคิดจาก JavaScript เรารู้วิธีใช้ฟังก์ชันใน JavaScript แล้ว โดยทั่วไปควรเก็บฟังก์ชันไว้นอกส่วนเนื้อหาของหน้าในแท็กสคริปต์ ใน MooTools เราทำตามรูปแบบเดียวกัน ที่นี่คุณสามารถออกแบบฟังก์ชันของคุณเองตามความต้องการ ตอนนี้เราต้องเรียกใช้ฟังก์ชันที่ผู้ใช้กำหนดเองทั้งหมดในไฟล์domready ฟังก์ชัน

ดูไวยากรณ์ต่อไปนี้เพื่อทำความเข้าใจเกี่ยวกับการใช้ฟังก์ชันทั่วไปใน MooTools

ไวยากรณ์

<script type = "text/javascript">
   /*
   Function definitions go here
   */
   window.addEvent('domready', function() {
      /* Calls to functions go here */
   });
</script>

โครงสร้างพื้นฐาน

มีสองสามวิธีพื้นฐานในการกำหนดฟังก์ชันใน MooTools ไม่มีความแตกต่างระหว่างไวยากรณ์ของฟังก์ชันของ JavaScript และ MooTools แต่ความแตกต่างอยู่ที่การเรียกใช้ฟังก์ชัน ให้เรายกตัวอย่างเล็ก ๆ ที่กำหนดฟังก์ชันชื่อ demo_function ดูรหัสต่อไปนี้

ตัวอย่าง

<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         //Define simple_function as a function
         var simple_function = function(){
            document.write('This is a simple function');
         }
         
         window.addEvent('domready', function() {
            //Call simple_function when the dom(page) is ready
            simple_function();
         });
      </script>
   </head>
   
   <body>
   </body>
   
</html>

คุณจะได้รับผลลัพธ์ต่อไปนี้ -

เอาต์พุต

ฟังก์ชันพารามิเตอร์เดียว

คุณยังสามารถสร้างฟังก์ชันที่ยอมรับพารามิเตอร์ ในการใช้พารามิเตอร์กับฟังก์ชันคุณต้องเพิ่มชื่อตัวแปรในวงเล็บ เมื่อคุณระบุแล้วตัวแปรจะพร้อมใช้งานภายใน ให้เรายกตัวอย่างที่กำหนดฟังก์ชันที่ใช้พารามิเตอร์เดียวและพิมพ์ข้อความพร้อมกับพารามิเตอร์

ดูรหัสต่อไปนี้

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var single_parameter_function = function(parameter){
            document.write('The parameter is : ' + parameter);
         }
         
         window.addEvent('domready', function(){
            single_parameter_function('DEMO PARAMETER');
         });
      </script>
   </head>
   
   <body>
   </body>
   
</html>

คุณจะได้รับผลลัพธ์ต่อไปนี้ -

เอาต์พุต

การส่งคืนค่า

เมื่อใดก็ตามที่คุณต้องการใช้ผลลัพธ์ของฟังก์ชันหนึ่งเป็นอินพุตสำหรับตัวแปรอื่นคุณจะต้องใช้ค่าส่งคืนสำหรับฟังก์ชันนั้น คุณสามารถใช้คีย์เวิร์ด return เพื่อส่งคืนค่าจากฟังก์ชัน ให้เรายกตัวอย่างที่กำหนดฟังก์ชันที่จะรับค่าพารามิเตอร์สองค่าและส่งคืนผลรวมของพารามิเตอร์ทั้งสองนั้น ดูรหัสต่อไปนี้

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var two_parameter_returning_function = function(first_number, second_number){
            var third_number = first_number + second_number;
            return third_number;
         }
         
         window.addEvent('domready', function(){
            var return_value = two_parameter_returning_function(10, 5);
            document.write("Return value is : " + return_value);
         });
      </script>
   </head>
   
   <body>
   </body>
   
</html>

คุณจะได้รับผลลัพธ์ต่อไปนี้ -

เอาต์พุต