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 ครับ
<head>
<title>A function definition</title>
<script language="javascript">
<!--
function displaytagtext(tag,text)
{
document.write("<"+tag+">");
document.write(text);
document.write("</"+tag+">");
}
// -->
</script>
</head>
<script language="javascript">
<!--
displaytagtext("h1","This is a level one heading");
displaytagtext("p","This is a first paragraph of the document");
// -->
</script>
</font></font></table><form>
<input type="button" value="View Example" onclick="window.open('jsex17.html')">
</form>
<font face="CordiaUPC">จากตัวอย่าง Function ที่ผมประกาศขึ้นก็คือ function displaytagtext()
ซึ่งมี Input 2 ตัว คือ tag และ text Function จะรับ Input 2 ค่านี้ไปใช้กับ document.write()
ดังที่ได้ประกาศไว้ คือเขียน tag ลงไป เขียน text แล้วก็ปิดด้วย /tag ผลที่ได้ก็จะเป็นการเขียนข้อความแล้ว
คร่อมด้วย tag ที่กำหนด <br>
<em> <font color=00ff00 size=+2>D</font><font color=00aaff size=+2>efining</font>
<font color=00ff00 size=+2>F</font><font color=00aaff size=+2>unction</font> <font color=00ff00 size=+2>W</font><font color=00aaff size=+2>ith
a</font> <font color=00ff00 size=+2>V</font><font color=00aaff size=+2>ariable</font>
<font color=00ff00 size=+2>N</font><font color=00aaff size=+2>umber of</font>
<font color=00ff00 size=+2>P</font><font color=00aaff size=+2>arameters</font>
</em> <br>
ทีนี้ถ้าคุณต้องการประกาศ Function แบบไม่จำกัดตัวแปรว่าต้องมีกี่ตัว JavaScript
ก็สามารถทำให้คุณได้ครับ โดย function นั้นจะมี Property ที่ชื่อว่า argument เป็น
Array ครับ Array ตัวนี้จะเป็นตัวเก็บข้อมูลของ Parameter หรือ Input ที่ถูกใส่ให้กับตัวแปร
เช่นถ้าผมเรียกใช้ function f() ดังนี้ <br>
<font color="ffff00"> f("test",true,77); </font></font> <font face="CordiaUPC"><br>
เราก็จะมีข้อมูลใน f.argument ดังนี้ <br>
<font color="ffff00"> f.argument.length = 3<br>
f.argument[0] = "test"<br>
f.argument[1] = true<br>
f.argument[2] = 77<br>
</font></font> <font face="CordiaUPC"><br>
Function ต่อไปนี้จะเป็นการใช้ Parameter โดยอ่านค่าจาก Property argument ครับ <br>
<font color="ffff00" size=4> <xmp> function sum() { n = sum.argument.length total
= 0 for (i=0;i<n;++i)
{
total += sum.arguments[i];
}
return total
}
>/xmp> </font> จากตัวอย่าง ผมได้ค่าจำนวนตัวแปรจาก sum.argument.length ผมก็เลยนำมาวน
loop ด้วย statement for อ่านค่าตัวแปรทีละตัว แล้วเอามารวมกันในตัวแปร total จากนั้นก็
ส่งค่ากลับด้วย statement return ที่จะสอนใน section ต่อไปครับ </font>
<p> <font face="CordiaUPC"><em> <font color=00ff00 size=+2>R</font><font color=00aaff size=+2>eturn
</font><font color=00ff00 size=+2>S</font><font color=00aaff size=+2>tatement</font>
</em> <br>
ก็ได้ใช้ไปครั้งหนึ่งแล้วนะครับ Return เป็น Statement ครับแต่ผมสอนใน บท Statement
ไม่ได้ เนื่องจาก Return เป็น Statement ที่ใช้กับ Function สำหรับ รูปแบบการใช้
Return ก็ใช้คำว่า return แล้วก็ตามด้วย ตัวแปรหรือค่าที่จะส่ง กลับจาก Function
</font>
<p> <font face="CordiaUPC"><em> <font color=00ff00 size=+2>G</font><font color=00aaff size=+2>lobal
and </font><font color=00ff00 size=+2>L</font><font color=00aaff size=+2>ocal
</font> <font color=00ff00 size=+2>V</font><font color=00aaff size=+2>ariable</font>
</em> <br>
ในการประกาศตัวแปรตัวหนึ่งขึ้นมาใช้เนี่ย มันจะเปลืองหน่วยความจำไปส่วนหนึ่ง สำหรับเก็บค่าตัวแปร
ดังนั้นถ้าเราประกาศตัวแปรแบบธรรมดา แล้วเอาไปใช้แค่ใน function ตัวหนึ่ง มันจะเป็นการสิ้นเปลื่องโดยใช่เหตุ
ดังนั้นคุณควรประกาศตัวแปรใช้เฉพาะ ภายใน function เมื่อ function จบการทำงานค่าของตัวแปรพวกนี้จะถูกลบออกไปจากหน่วยความจำทันที
ประโยชน์อีกอย่างหนึ่งของ Local Variable ก็คือ ส่วนอื่นๆของ โปรแกรมจะไม่รู้จัก
Local Variable ที่อยู่ใน Function เลย ดังนั้นคุณก็สามารถใช้ตัวแปรชื่อเดียวกันได้พร้อมกันในคนละส่วนของโปรแกรม
โดยไม่เกิด error ตรงนี้เป็นความสะดวกของผู้ที่นึกชื่อตัวแปรไม่ออกก็เลยเหมาใช้
i เป็นชื่อหลักครับ<br>
ส่วน ใน main Program เราก็ต้องใช้ตัวแปรรวมอยู่แล้วครับ เราจะเรียกตัวแปรรวมว่า
Global Variable Global Variable เนี่ยจะเป็นที่รู้จักไปทั้งโปรแกรมดังนั้น function
ต่างๆก็สามารถเรียกใช้ได้ด้วยครับ<br>
<br>
ตัวอย่างการใช้ Global and Local Variable ครับ <br>
<font color=ffff00 size=4> <xmp> <head> </font></font><font color=ffff00 size=4 face="system">
<title>Global and Local Variables </title>
<font face="CordiaUPC">
<script language="javascript">
<!--
function displaySquared(y)
{
var x = y*y
document.write(x+"<br>")
}
// -->
</script></head>
<script language="javascript">
<!--
for (x=0;x<10;++x)
displaySquared(x)
// -->
</script>
</font></font>
<form>
<font face="CordiaUPC">
<input type="button" value="View Example" onclick="window.open('jsex18.html')">
</font>
</form>
<font face="CordiaUPC">จากตัวอย่างผมกำหนด function displaySqure() ขึ้นมาโดยมี
input 1 ตัวคือ y และกำหนด Local Variable เพิ่มอีกตัวคือ x โดยให้มีค่าเป็น y*y
แล้วเขียนค่านั้นลงบนจอ จากนั้น ในส่วนของ body ผมก็ใช้ Global Varible ชื่อว่า x
ตัวแปรคนละตัวนะแต่ใช้ชื่อซ้ำกัน สำหรับเป็นตัวเพิ่มค่าใน For loop จะเห็นได้ว่า
x ที่อยู่ใน function เป็นคนละตัวกับ x ที่อยู่ใน For loop หวังว่าคงเข้าใจนะ function
ก็มีแค่นี้ครับ </font>
<TD valign=top> <font face="CordiaUPC"> </font></TD>
<p align=right> <font face="CordiaUPC"><a href="jstuep6.html" onmouseover="document.next.src='nxcp.gif'" onmouseout="document.next.src='nxcpd.gif'"><img src="nxcpd.gif" name="next" border=0></a><br>
<a href="jstue.html" onmouseover="document.content.src='btct.gif'" onmouseout="document.content.src='btctd.gif'"><img src="btctd.gif" name="content" border=0></a><br>
<a href="index.html" onmouseover="document.indexp.src='bthp.gif'" onmouseout="document.indexp.src='bthpd.gif'"><img src="bthpd.gif" name="indexp" border=0></a><br>
</font>
<CENTER>
<font face="CordiaUPC"> </font>
</center>
<font face="CordiaUPC"><img src="../../../visit.geocities.com/visit.gifฟ1003936839" border=0 width=1 height=1>
<IMG SRC="http://geo.yahoo.com/serv?s=76001077&t=1003936839" ALT=1 WIDTH=1 HEIGHT=1>
</font>
</HTML>
