ฟังฉัน ฟังก์ชันในภาษา JavaScript เป็นคำสั่งที่ใช้ในการโปรแกรมย่อย รูปแบบจะเป็นแบบนี้
Function functionName (Variables1, Variable2, Variable3){
..........................
}มาดูตัวอย่างกันเน้อ
ครั้งนี้เราจะเขียนไว้ในส่วนของแท็ก <body></body> เพื่อที่จะให้โหลดไวๆ จะหน้าเว็บไวๆ เพราะถ้าเอาไว้ตรงแท็ก <head></head> ต้องรอให้เขาโหลดเสร็จเราจึงจะเห็นหน้างามๆ ของน้องนาง .
!!! อย่าลืมบันทึกเป็นไฟล์นามสกุล nameFile.html เน้อ วิธีการเปิดให้ไปดับเบิ้ลคลิกที่ไฟล์ที่บันทึกไว้ และไปจะแสดงที่หน้าเบราว์เซอร์ให้เรา
<html>
<head>
<title>function</title><style>
button{
font-size: 2em; //ขนาดของตัวอักษร
width:auto; //ความกว้าง
height: 10%; //ความสูง
border-radius: 10px; //ความโค้งของขอบ
color: maroon; //สีตัวอักษร
background-color:mistyrose; //สีพื้นหลังกรอบ
}
</style></head>
<body><button onclick="funcName()">Show_Name</button><script>
function funcName() {
document.write("<h1>Tawan_Ait</h1>");
}
</script></body>
</html>
ผลลัพธ์ที่ได้ก็จะเป็นแบบนี้ เมื่อเราคลิกที่ปุ่ม Show_Name จะปรากฏชื่อของเราขึ้นมา
การผ่านค่าให้ Function
การผ่านค่าให้กับฟังก์ชัน คือบางครั้งเราต้องการข้อมูลจากภายนอกส่งเข้ามา เพื่อนำมาใช้ในฟังก์ชัน . มาดูโค้ดกัน [เราจะแก้ไขและเพิ่มเติมที่ส่วนที่แล้ว]
เราจะสร้างตัวแปรมาตัวหนึ่ง ไว้รับค่าที่ผ่านเข้ามา คือตัวแปรชื่อ name ; ทำการต่อสตริง เรียบร้อย และในส่วนของแท็ก <button></button> จะเรียกใช้ฟังก์ชัน funcName ผ่านค่า ‘EasyJung’ เข้าสู่ฟังก์ชันเก็บไว้ในตัวแปร name และนำตัวแปร name ไปใช้งาน
<body>
<button onclick="funcName('EasyJung')">Show_Name</button><script>
function funcName(name) {
document.write(`<h1>My name is ${name}</h1>`);
}
</script></body>
ผลลัพธ์ที่ได้ อย่างที่ตั้งใจไว้เลย ตรงตามที่เราผ่านค่าเข้ามา และเรียกใช้งานได้
การคืนค่าจาก Function
เมื่อฟังก์ชันทำงานเสร็จ สามารถคืนผลลัพธ์กลับมาให้ภายนอกได้ มาดูโค้ดกัน
เมื่อเราเรียกใช้ฟังก์ชัน returnDate() จะคืนค่าจากฟังก์ชันออกมาให้เราเห็น ตรงคำสั่ง [document.write(`Today is : ${returnDate()}] ชึ่งเราจะเห็นที่เบราว์เซอร์ของเราว่า [Today is : 5] คือวันที่ในปัจจุบัน
<script>
function returnDate(){ //ฟังก์ชัน returnDate()
var day = new Date(); //ตัวแปร day เป็น Object Date คือ Object แสดงวันที่
return day.getDate(); //นำค่าวันที่ส่งออกมาภายนอก
}
document.write(`Today is : ${returnDate()} `)
//คืนค่าจากฟังก์ชันออกมา
</Script>ผลลัพธ์ที่ได้ จะตรงกับวันที่ปัจจุบันของเรา
การกำหนดค่าเริ่มต้นให้กับParameter
คือการกำหนดค่าให้กับพารามิเตอร์ เพราะในฟังก์ชันของ JavaScript ไม่ได้กำหนดชนิดของข้อมูล จะมีผลทำให้ค่าในพารามิเตอร์ผิดเพี้ยน อาจแสดงผลเป็น undefined
<script>
function color(color = 'green'){
console.log(`my color is ${color}`);
}
color();
color('blue');
</script>ผลลัพธ์ที่ได้จะเป็นได้จาก console คลิกขวา Inspact และหา Console
ถ้าเราไม่ได้กำหนด จะเป็นแบบนี้
<script>
function color(color){
console.log(`my color is ${color}`);
}
color();
color('blue');
</script>ผลลัพธ์ที่ได้จะเป็น undefined ต่างจากอีกตัวหนึ่งที่กำหนดให้ผ่านค่าให้กับฟังก์ชัน
ไว้มาต่อกันที่ ep ต่อไป น่าจะเป็นคุณสมบัติใหม่ของฟังก์ชันใน JavaScript ES6 ขึ้นไปเท่านั้นที่ใช้ได้ บ๊ายยยยย
