JavaScript Function

ฟังก์ชันเป็น Code Block ที่สร้างขึ้นมาเพื่อทำงานเฉพาะ โดยฟังก์ชันจะทำงานเมื่อมีบางอย่างเรียกใช้

ไวยากรณ์ของฟังก์ชัน

function functionName(){}

การกำหนดฟังก์ชันเริ่มต้นด้วย function ตามด้วยชื่อของฟังก์ชัน และวงเล็บ () จากนั้นตามด้วยวงเล็บปีกกา {} 

  • ภายในวงเล็บสามารถมีพารามิเตอร์หรือไม่ก็ได้ เช่น (parameter1 , parameter2, …) ซึ่งในนิยามของฟังก์ชันจะเรียกว่าอาร์กิวเมนต์ที่รับค่าที่ส่งจากการเรียกใช้ฟังก์ชัน
  • ภายในวงเล็บปีกกาคือส่วนที่ใช้ในการเขียนโค้ด 

 

การสร้างและใช้งานฟังก์ชัน

<html>
 <head>
  <style>
  div{
  	padding:20px;
    margin: 10px;
  }
  div > button{
  	padding :8px;
    color:white;
    background-color : rgb(50,255,10);
    font-size:18px;
    border:0;
    border-radius:12px;
  }
  div > button:hover{
  	opacity:0.5;
  }
   div#exam{
    text-align:center;
    font-size:20px;
    font-weight:bolder;
    color: red;
    border:4px solid rgb(40,170,255);
    padding:20px;
    margin: 10px;
   }
  </style>
 </head>
 <body>
 
 <div id="exam"></div>
 
 <div>
 <button onclick="myFunction('pawin', 'khenphukhiaw')">Click</button>
 <button onclick="myFunction('pawin1', 'khenphukhiaw1')">Click</button>
 <button onclick="myFunction('pawin2', 'khenphukhiaw2')">Click</button>
 <button onclick="myFunction('pawin3', 'khenphukhiaw3')">Click</button>
 </div>
 
  <script>
    function myFunction(fname, lname){
    	document.getElementById("exam").innerHTML = fname + " " + lname;
    }
  </script>
 </body>
</html>

ไฟล์ที่ 1 ตัวอย่างการสร้างและใช้งานฟังก์ชัน

ข้อดีของฟังก์ชัน คือ แบ่งโค้ดออกเป็นสัดส่วนอย่างชัดเจน และสามารถนำมาใช้ซ้ำได้ ซึ่งจากไฟล์ที่ 1 ในบรรทัดที่ 35 – 38 ใช้ฟังก์ชัน myFunction ซ้ำเพียงเปลี่ยนค่าพารามิเตอร์เพื่อให้การแสดงผลเนื้อหาแตกต่างออกไป (ขึ้นอยู่กับความต้องการของผู้พัฒนา)

 

Return 

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

ตัวอย่างเช่น 

<html>
 <body>
 
 <div id="exam"></div>
 
 
  <script>
  var a = myFunction("Pawin" , "Khenphukhiaw");
  
  document.getElementById("exam").innerHTML = a;
  
    function myFunction(fname, lname){
    	return "My name's : " + fname + " " + lname;
    }
  </script>
 </body>
</html>

ไฟล์ที่ 2 การใช้คำสั่ง return

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: