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>คุณจะได้รับผลลัพธ์ต่อไปนี้ -