ข้อมูลองค์ความรู้โดย
กฤษณี โภโต
ตำแหน่ง ผู้จัดการ

บทที่ 5 Function

ประเภททางด้าน IT หลัก :   Development & Integration
ประเภททางด้าน IT ย่อย :   Java
  ลงข้อมูลเมื่อ 16:04:43 10/05/2013
  Page View (1806) แบ่งปัน

บทที่ 5 Function

 Function ก็คือคำสั่งต่างๆใน JavaScript นั่นเอง ซึ่ง Function อาจจะเป็นคำสั่งหลายๆคำสั่งที่เราเรียบเรียงขึ้นเอง แล้วกำหนดให้มันเป็น Function ก็ได้ Function ใน JavaScript ก็มีอยู่ 2 แบบคือ สามารถคืนค่ากลับมาในรูปของ ตัวแปรได้ เช่น factorial() (ผมสมมุติเองนะ ถ้าจะใช้ต้องเขียนเอง)ที่ใช้ในการคูณเลขจาก 1ถึง n และ Function ที่ไม่คืนค่ากลับเช่น Function showdata() (เหมือนกันครับ function สมมุติ) ที่ใช้ในการแสดงข้อมูลบนหน้าจอ

การเรียกใช้ 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 มีรูปแบบดังนี้ครับ

function functionname(p1,p2,...,pn)
{
ชุดคำสั่งต่างๆ
}

functionname ก็คือชื่อ function ที่คุณตั้งเอง p1,p2,..pn ก็คือ Parameter หรือ Input ที่ใส่ลงไปใน Function ซึ่งจะมีกี่ตัวก็ได้ หรือไม่มีก็ได้ ตัวอย่างการเรียกใช้ Function ครับ

<html>
<head>
<title>A function definition</title>
<script >
 
<!--
function displaytagtext(tag,text)
{
document.write("<"+tag+">");
document.write(text);
document.write("</"+tag+">");
}
// -->
 
</script>
</head>
<body>
<script >
 
<!--
   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 ดังนี้

f.argument.length = 3
f.argument[0] = "test"
f.argument[1] = true

f.argument[2] = 77

 

Function ต่อไปนี้จะเป็นการใช้ Parameter โดยอ่านค่าจาก Property argument ครับ

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 ครับ

<html>
<head>
<title>Global and Local Variables
</title>
<script >
 
<!--
function displaySquared(y)
{
var x = y*y
document.write(x+"<br>")
}
// -->
 
</script>
</head>
<body>
<script >
 
<!--
for (x=0;x<10;++x)
  displaySquared(x)
// -->
 
</script>
</body>
</html>

ที่มาจาก : http://realdev.truehits.net



องค์ความรู้ที่มีผู้อ่านมากสุด
บทที่ 3 Operator in JavaScript
บทที่ 3 Operator in JavaScript

โดย... กฤษณี โภโต

สร้าง BarCode จาก Java โดยใช้ lib ของ ZXing ( Open Source )
สร้าง BarCode จาก Java โดยใช้ lib ของ ZXing ( Open Source )

โดย... กฤษณี โภโต

บทที่ 13 Math Function
ในการเขียนโปรแกรม มีบางครั้งที่เราต้องอาศัยการคำนวณทางคณิตศาสตร์ JavaScript ก็มีคุณสมบัติในการคำนวณทางคณิตศาสตร์กะเค้าเหมือนกันครับ

โดย... กฤษณี โภโต

บทที่ 2 เรื่องของตัวแปร JavaScript
JavaScript ก็เหมือนภาษาที่ใช้เขียนโปรแกรมทั่วไป ตรงที่มีตัวแปรสำหรับเก็บค่า จากส่วนหนึ่งของ Program แล้วก็เอาไปใช้ในส่วนอื่นๆได้ ตัวแปรก็คือ ชื่อที่เรากำหนดขึ้นมาสำหรับเก็บค่า อย่างเช่น เราอาจกำหนดตัวแปรชื่อว่า imageName เพื่อไปเก็บชื่อไฟล์ภาพๆหนึ่ง หรือ อาจกำหนดให้ amount ไปเก็บจำนวนเต็ม เป็นต้น

โดย... กฤษณี โภโต

บทที่ 9 Document Object
Document object คืออะไร Document Object หมายถึงเอกสาร HTML ที่เป็นเวบเพจที่กำลังแสดงอยู่ในหน้าต่างหลัก เป็น Propertiy ของ window (window.document) Document Object เปรียบเสมือนหน้าหนังสือ หากคุณลองเปิดหนังสือดูจะเห็น หมายเลขหน้า และ หมายเลขบท ในทาง OOP หมายเลขหน้าและหมายเลขบทเหล่านั้นก็เป็น Properties สำหรับบอกคุณสมบัติ ของหน้านั้น ว่าอยู่ในหน้าที่เท่าไหร่ บทใด นอกจากนี้ ในหน้าหนังสือยังมีเนื้อหาสาระที่ประกอบอยู่ภายใน ไม่ว่าจะเป็นเนื้อหา หัวข้อ ย่อหน้า รูปภาพ ตาราง ฯลฯ สิ่งเหล่านี้ก็นับเป็น Properties ของหน้าหนังสือเช่นกันครับ

โดย... กฤษณี โภโต

บทที่ 14 String
ไม่ว่าจะเขียนโปรแกรมด้วยภาษาใด การจัดการกับ String ก็เป็นความสามารถที่ขาดไม่ได้ ใน JavaScript ก็เช่นกัน

โดย... กฤษณี โภโต

บทที่ 10 Form Java
คุณคงเคยพบกับ Banner ข้างบนนี้มาก่อนนะครับ เจ้านี่แหละ มันเกิดจากการนำ object form ไปประยุกต์ ใช้ กับ setTimeout ในบทที่ผ่านมา และ นอกจากนี้แล้ว Form ยังมีคุณสมบัติน่าสนใจอีกมาก ทั้ง Button Checkbox radio ฯลฯ รวมทั้ง text ที่อยู่ข้างบนนี้ด้วยครับ

โดย... กฤษณี โภโต

บทที่ 6 Event Java
Event คืออะไร

โดย... กฤษณี โภโต

บทที่ 12 Images
บทที่ 12 Images

โดย... กฤษณี โภโต

บทที่ 11 Links
บทที่ 11 Links

โดย... กฤษณี โภโต