การเรียกใช้ Function
ถ้าเป็น Function ที่คืนค่าได้ เราก็มองว่ามันเป็นตัวแปรตัวหนึ่ง ที่เก็บค่าๆหนึ่งอยู่ได้เลย เช่น
n = factorial(5) ;
จากตัวอย่าง เราเรียกใช้ Function factorial โดยใส่ Input 1 ตัวคือ 5 แล้วเอาค่าไปเก็บในตัวแปร n ส่วน factorial() นั้นเป็น Function ที่ไม่มีอยู่ใน JavaScript นะครับ ดังนั้นเราก็จะต้องเขียน Function ขึ้นมาใช้เองครับ ส่วน Function ที่ไม่คืนค่าเราก็เรียกใช้ได้ตรงๆเลยเช่น
display("Hello");
การประกาศ Function
ที่ผ่านมาหลายคนคงสงสัยว่า การเขียน Function ทำอย่างไร ใน Section นี้จะสอนให้คุณสามารถเขียน Function ขึ้นมาใช้เองได้ครับ
การเขียน Function ขึ้นมาใช้เองเราควรเขียนไว้ที่ส่วน Head ของ HTML และเรียกใช้ ในส่วนของ Body นะครับ เพื่อป้องกันการเกิด error ที่เกิดจากการเรียกใช้ Function ก่อน ที่จะประกาศ Function ซึ่งขณะนั้น Browser ยังไม่รู้จัก การประกาศ Function มีรูปแบบดังนี้ครับ
| <![CDATA[
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 ที่กำหนด
การประกาศ Function ที่มีจำนวนพารามิเตอร์ไม่คงที่
ทีนี้ถ้าคุณต้องการประกาศ Function แบบไม่จำกัดตัวแปรว่าต้องมีกี่ตัว JavaScript ก็สามารถทำให้คุณได้ครับ โดย function นั้นจะมี Property ที่ชื่อว่า argument เป็น Array ครับ Array ตัวนี้จะเป็นตัวเก็บข้อมูลของ Parameter หรือ Input ที่ถูกใส่ให้กับตัวแปร เช่นถ้าผมเรียกใช้ function f() ดังนี้
f("test",true,77);
เราก็จะมีข้อมูลใน f.argument ดังนี้
| <![CDATA[
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 ที่จะสอนในหัวข้อต่อไปครับ
Return Statement
ก็ได้ใช้ไปครั้งหนึ่งแล้วนะครับ Return เป็น Statement ครับแต่ผมสอนใน บท Statement ไม่ได้ เนื่องจาก Return เป็น Statement ที่ใช้กับ Function สำหรับ รูปแบบการใช้ Return ก็ใช้คำว่า return แล้วก็ตามด้วย ตัวแปรหรือค่าที่จะส่ง กลับจาก Function
return variable;
หลังจาก return ทำงาน Function นั้นจะถือว่าจบการทำงานโดยไม่สนใจ ชุดคำสั่งถัดไปใน Function นั้น
ตัวแปรแบบ Global and Local
ในการประกาศตัวแปรตัวหนึ่งขึ้นมาใช้เนี่ย มันจะเปลืองหน่วยความจำไปส่วนหนึ่ง สำหรับเก็บค่าตัวแปร ดังนั้นถ้าเราประกาศตัวแปรแบบธรรมดา แล้วเอาไปใช้แค่ใน function ตัวหนึ่ง มันจะเป็นการสิ้นเปลื่องโดยใช่เหตุ ดังนั้นคุณควรประกาศตัวแปรใช้เฉพาะ ภายใน function เมื่อ function จบการทำงานตัวแปรพวกนี้จะถูกลบออกไปจากหน่วยความจำทันที ประโยชน์อีกอย่างหนึ่งของ Local Variable ก็คือ ส่วนอื่นๆของ โปรแกรมจะไม่รู้จัก Local Variable ที่อยู่ใน Function เลย ดังนั้นคุณก็สามารถใช้ตัวแปรชื่อเดียวกันได้พร้อมกันในคนละส่วนของโปรแกรม โดยไม่เกิด error ส่วน ใน main Program เราก็ต้องใช้ตัวแปร Global อยู่แล้วครับ 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>
]]> |
ไม่มีความคิดเห็น:
แสดงความคิดเห็น