Function ก็คือคำสั่งต่างๆใน JavaScript นั่นเอง
ซึ่ง Function อาจจะเป็นคำสั่งหลายๆคำสั่งที่เราเรียบเรียงขึ้นเอง
แล้วกำหนดให้มันเป็น Function ก็ได้ Function ใน JavaScript
ก็มีอยู่ 2 แบบคือ สามารถคืนค่ากลับมาในรูปของ ตัวแปรได้
เช่น factorial() (ผมสมมุติเองนะ ถ้าจะใช้ต้องเขียนเอง)ที่ใช้ในการคูณเลขจาก 1ถึง n
และ Function ที่ไม่คืนค่ากลับเช่น Function showdata() (เหมือนกันครับ function สมมุติ)
ที่ใช้ในการแสดงข้อมูลบนหน้าจอ
Function Call
การเรียกใช้ Function นะครับ
ถ้าเป็น Function ที่คืนค่าได้ เราก็มองว่ามันเป็นตัวแปรตัวหนึ่ง
ที่เก็บค่าๆหนึ่งอยู่ได้เลย เช่น
n = factorial(5)
จากตัวอย่าง เราเรียกใช้ Function factorial โดยใส่ Input 1 ตัวคือ 5
แล้วเอาค่าไปเก็บในตัวแปร n ส่วน factorial() นั้นเป็น Function ที่ไม่มีอยู่ใน
JavaScript นะครับ ดังนั้นเราก็จะต้องเขียน Function ขึ้นมาใช้เองครับ
ส่วน Function ที่ไม่คืนค่าเราก็เรียกใช้ได้ตรงๆเลยเช่น
display("Hello");
Defining Function
ที่ผ่านมาหลายคนคงสงสัยว่า การเขียน Function ทำอย่างไร
ใน Section นี้จะสอนให้คุณสามารถเขียน Function ขึ้นมาใช้เองได้ครับ
การเขียน Function ขึ้นมาใช้เองเราควรเขียนไว้ที่ส่วน Head ของ HTML
และเรียกใช้ ในส่วนของ Body นะครับ เพื่อป้องกันการเกิด error ที่เกิดจากการเรียกใช้ Function ก่อน
ที่จะประกาศ Function ซึ่งขณะนั้น Browser ยังไม่รู้จัก
การประกาศ Function มีรูปแบบดังนี้ครับ
function functionname(p1,p2,...,pn)
{
ชุดคำสั่งต่างๆ
}
functionname ก็คือชื่อ function ที่คุณตั้งเอง
p1,p2,..pn ก็คือ Parameter หรือ Input ที่ใส่ลงไปใน Function ซึ่งจะมีกี่ตัวก็ได้ หรือไม่มีก็ได้
ตัวอย่างการเรียกใช้ Function ครับ
<![CDATA[
<html>
<head>
<title>A function definition</title>
<script language="javascript">
<!--
function displaytagtext(tag,text)
{
document.write("<"+tag+">");
document.write(text);
document.write("</"+tag+">");
}
// -->
</script>
</head>
<body>
<script language="javascript">
<!--
displaytagtext("h1","This is a level one heading");
displaytagtext("p","This is a first paragraph of the document");
// -->
</script>
</body>
</html>
]]>
จากตัวอย่าง Function ที่ผมประกาศขึ้นก็คือ function displaytagtext() ซึ่งมี Input 2 ตัว
คือ tag และ text Function จะรับ Input 2 ค่านี้ไปใช้กับ document.write() ดังที่ได้ประกาศไว้
คือเขียน tag ลงไป เขียน text แล้วก็ปิดด้วย /tag ผลที่ได้ก็จะเป็นการเขียนข้อความแล้ว
คร่อมด้วย tag ที่กำหนด
Defining
Function
With a
Variable
Number of
Parameters
ทีนี้ถ้าคุณต้องการประกาศ Function แบบไม่จำกัดตัวแปรว่าต้องมีกี่ตัว
JavaScript ก็สามารถทำให้คุณได้ครับ โดย function นั้นจะมี
Property
ที่ชื่อว่า argument เป็น Array ครับ
Array ตัวนี้จะเป็นตัวเก็บข้อมูลของ Parameter หรือ Input ที่ถูกใส่ให้กับตัวแปร เช่นถ้าผมเรียกใช้ function f() ดังนี้
f("test",true,77);
เราก็จะมีข้อมูลใน f.argument ดังนี้
f.argument.length = 3
f.argument[0] = "test"
f.argument[1] = true
f.argument[2] = 77
Function ต่อไปนี้จะเป็นการใช้ Parameter โดยอ่านค่าจาก Property argument ครับ
<![CDATA[
function sum()
{
n = sum.argument.length
total = 0
for (i=0;i<n;++i)
{
total += sum.arguments[i];
}
return total
}
]]>
จากตัวอย่าง ผมได้ค่าจำนวนตัวแปรจาก sum.argument.length
ผมก็เลยนำมาวน loop ด้วย statement for อ่านค่าตัวแปรทีละตัว แล้วเอามารวมกันในตัวแปร total
จากนั้นก็ ส่งค่ากลับด้วย statement return ที่จะสอนใน section ต่อไปครับ
Return Statement
ก็ได้ใช้ไปครั้งหนึ่งแล้วนะครับ Return เป็น Statement ครับแต่ผมสอนใน
บท Statement ไม่ได้ เนื่องจาก Return เป็น Statement ที่ใช้กับ Function
สำหรับ รูปแบบการใช้ Return ก็ใช้คำว่า return แล้วก็ตามด้วย ตัวแปรหรือค่าที่จะส่ง
กลับจาก Function
Global and
Local
Variable
ในการประกาศตัวแปรตัวหนึ่งขึ้นมาใช้เนี่ย มันจะเปลืองหน่วยความจำไปส่วนหนึ่ง
สำหรับเก็บค่าตัวแปร ดังนั้นถ้าเราประกาศตัวแปรแบบธรรมดา แล้วเอาไปใช้แค่ใน function ตัวหนึ่ง
มันจะเป็นการสิ้นเปลื่องโดยใช่เหตุ ดังนั้นคุณควรประกาศตัวแปรใช้เฉพาะ
ภายใน function เมื่อ function จบการทำงานค่าของตัวแปรพวกนี้จะถูกลบออกไปจากหน่วยความจำทันที
ประโยชน์อีกอย่างหนึ่งของ Local Variable ก็คือ ส่วนอื่นๆของ โปรแกรมจะไม่รู้จัก Local Variable
ที่อยู่ใน Function เลย ดังนั้นคุณก็สามารถใช้ตัวแปรชื่อเดียวกันได้พร้อมกันในคนละส่วนของโปรแกรม
โดยไม่เกิด error ตรงนี้เป็นความสะดวกของผู้ที่นึกชื่อตัวแปรไม่ออกก็เลยเหมาใช้ i เป็นชื่อหลักครับ
ส่วน ใน main Program เราก็ต้องใช้ตัวแปรรวมอยู่แล้วครับ เราจะเรียกตัวแปรรวมว่า Global Variable
Global Variable เนี่ยจะเป็นที่รู้จักไปทั้งโปรแกรมดังนั้น function ต่างๆก็สามารถเรียกใช้ได้ด้วยครับ
ตัวอย่างการใช้ Global and Local Variable ครับ
<![CDATA[
<html>
<head>
<title>Global and Local Variables
</title>
<script language="javascript">
<!--
function displaySquared(y)
{
var x = y*y
document.write(x+"<br>")
}
// -->
</script>
</head>
<body>
<script language="javascript">
<!--
for (x=0;x<10;++x)
displaySquared(x)
// -->
</script>
</body>
</html>
]]>
จากตัวอย่างผมกำหนด function displaySqure() ขึ้นมาโดยมี input 1 ตัวคือ y
และกำหนด Local Variable เพิ่มอีกตัวคือ x โดยให้มีค่าเป็น y*y แล้วเขียนค่านั้นลงบนจอ
จากนั้น ในส่วนของ body ผมก็ใช้ Global Varible ชื่อว่า x ตัวแปรคนละตัวนะแต่ใช้ชื่อซ้ำกัน
สำหรับเป็นตัวเพิ่มค่าใน For loop จะเห็นได้ว่า x ที่อยู่ใน function เป็นคนละตัวกับ x ที่อยู่ใน
For loop หวังว่าคงเข้าใจนะ function ก็มีแค่นี้ครับ
