ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 9 Javascript Functions


   Functions คือ ชุดคำสั่งที่ใช้ในการทำงานอย่างใดอย่างหนึ่ง ซึ่งจะทำงานเมื่อถูกเรียกใช้งาน
JavaScript Functions Syntax
   ลักษณะของฟังก์ชั่นเป็นดังนี้
function  ชื่อฟังกชั่น (อาร์กิวเมนต์)
{ //  คำสั่งต่างๆ  }
   -ชื่อฟังก์ชั่น การตั้งชื่อฟังก์ชั่นมีหลักการคล้ายกับการตั้งชื่อตัวแปร โดยนิยมเขียนด้วยตัวพิมพ์เล็ก หรือหากมีหลายคำอาจขึ้นต้นด้วยตัวพิมพ์เล็ก คำต่อๆไปให้ขึ้นต้นด้วยตัวพิมพ์ใหญ่ก็ได้ เช่น submitForm() , blockInvalidChar() เป็นต้น
  -อาร์กิวเมนต์ (argument) หรือพารามิเตอร์คือข้อมูลบางอย่างที่ฟังก์ชั่นต้องใช้ในการประมวลผล ซึ่งอาร์กิวเมนต์จะมีหรือไม่มีก็ได้ขึ้นอยู่กับความจำเป็น

การเรียกใช้ฟังก์ชั่น
   สำหรับการเรียกใช้ฟงัก์ชันนั้นให้ระบุชื่อฟังก์ชั่นพร้อมอาร์กิวเมนต์ (ถ้ามี) ไว้ ณ จุดที่ต้องการใช้ฟังก์ชั่น ทั้งนี้ส่วนที่เรียกใช้ฟังก์ชั่นไม่จำเป็นต้องอยู่ในแท็ก <script> เดียวกันกับส่วนที่เขียนฟังก์ชั่น หรือบางที่ส่วนที่เรียกใช้ฟังก์ชั่นอาจอยู่ในแท็กของ HTML ก็ได้ แต่การเรียกใช้ฟังก์ชั่นในแท็กของ HTML ส่วนใหญ่จะเกิดจากการตอบสนองต่อการกระทำบางอย่าง เช่น การคลิกเมาส์ การพิมอักขระ เป็นต้น ตัวอย่างเช่น


<html>
<body>
<p>Click the button to call a function with arguments</p>
<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

<script>
function myFunction(name,job)
{alert("Welcome " + name + ", the " + job);}
</script>

</body>
</html>

 

ผลลัพธ์คือ
คลิกเพื่อดูตัวอย่าง <exam28>

  *** จากตัวอย่างด้านบนนี้เมื่อคลิกที่ปุ่ม จะปรากฏข้อความ 'welcome Harry Potter the Wizard'

ฟังก์ชั่นแบบส่งค่ากลับ (Functions With a Return Value)

   ฟังก์ชั่นแบบส่งค่ากลับก็สร้างเหมือนฟังก์ชั่นปกติ แต่ก่อนสิ้นสุดฟังก์ชั่นจะใช้คำสั่ง return เพื่อส่งค่าบางอย่างกลับออกมา ตัวอย่างเช่น


<html>
<body>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="demo"></p>

<script>
function myFunction(a,b)
{return a*b; // ส่งค่าผลคูณของ a คูณ b กลับออกไป}

document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
</body>
</html>

 

ผลลัพธ์คือ

***จะเห็นว่าฟังชั่นนั้นมีการส่งค่ากลับคืนมา ซึ่งค่าที่ว่านั้นก็คือคำตอบของผลคูณของ a กับ b หรือ 3x4 ซึ่งก็คือ 12 นั้นเอง
   ในการเรียกใช้ฟังก์ชั่นที่มีค่าส่งกลับ หากเราต้องการนำค่านั้นไปใช้งานอื่นๆ ต่อไป ก็ให้สร้างตัวแปรขึ้นมารับค่าที่ส่งกลับมานั้น เช่น


var a =oddorEven(99); // เก็บค่าที่ได้จากฟังก์ชั่นไว้ในตัวแปร a
var b =oddorEven(100);


ฟังก์ชั่นและขอบเขตของตัวแปร
  ขอบเขตของฟังก์ชั่นถูกกำหนดไว้ด้วยบล็อก {} ดังนั้นการประกาศหรือใช้งานตัวแปรต่างๆ เราต้องคำนึงขอบเขตของตัวแปรและขอบเขตของฟังก์ชั่นด้วย โดยพิจารณาดังนี้
  1.ตัวแปรที่ประกาศไว้ในฟังก์ชั่น (local variable)
ตัวแปรที่ประกาศไว้ในฟังก์ชั่นใดก็จะใช้ได้เฉพาะในฟังก์ชั่นนั้น เราไม่สามารถเรียกใช้ตัวแปรที่ประกาศขึ้นในฟังก์ชั่นจากนอกฟังก์ชั่นได้ เช่น


function f () {
var x = 123;
}
document.write(x); // Error!
  

 

เกิด Error เพราะในตัวแปร x ประกาศเอาไว้ในบล็อกของฟังก์ชั่น f() ซึ่งเมื่อสิ้นสุดฟังก์ชั่นแล้ว ตัวแปรดังกล่าวก็เป็นอันถูกยกเลิกไป เราจึงไม่สามารถอ้างถึงตัวแปรดังกล่าวได้

2.ตัวแปรที่ต้องใช้ร่วมกัน (global variable)

อาจมีข้อมูลบางอย่างที่เราจำเป็นต้องใช้ร่วมกันทั้งในและนอกฟังก์ชั่น กรณีแบบนี้ต้องสร้างตัวแปรแบบ global เพื่อเก็บข้อมูลดังกล่าว ซึ่งตัวแปรแบบนี้ต้องสร้างเอาไว้นอกฟังก์ชั่น และไม่อยู่ในฟังก์ชั่นใดๆ เช่น


var gv =123;
function f() {
   gv++; // ok!, }
document .write (gv); //123
f();
document .write (gv); //124


คลิกเพื่อดู demo file javascript (ตัวอย่างที่ 1)
คลิกเพื่อดู demo file javascript (ตัวอย่างที่ 2)

ข้อมูลอ้างอิง
http://www.w3schools.com

ชื่อ
javascript9
หมวดหมู่
Javascript, Javascript
ฮิต
8140
ผู้สร้างเอกสาร
วันที่สร้างเอกสาร
2016-06-03 13:27:12

javascript9.zip

ประเภทไฟล์ zip

ขนาดไฟล์ 554 bytes

ผู้อัพโหลดไฟล์

วันที่อัพโหลด 2016-06-03 06:21:39


กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
checkbox พร้อมกรองจำนวน
โดย Ittichai_chupol พ 19 ก.ย. 2018 5:49 pm บอร์ด Programming - PHP
0
10
พ 19 ก.ย. 2018 5:49 pm โดย Ittichai_chupol
การทำแผ่นรองเมาส์สำหรับวัยทำงานแบบง่าย
โดย Ittichai_chupol พ 19 ก.ย. 2018 4:53 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
พ 19 ก.ย. 2018 4:53 pm โดย Ittichai_chupol
การทำข้าวขย้ำกล้วย ให้เด็ก อายุ 3 - 6 เดือน
โดย Ittichai_chupol พ 19 ก.ย. 2018 4:51 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
พ 19 ก.ย. 2018 4:51 pm โดย Ittichai_chupol
สถานที่ท่องเทียวน่าสนใจ อุทยานแห่งชาติน้ำตกพลิ้ว จังหวัดจันทบุรี
โดย Ittichai_chupol พ 19 ก.ย. 2018 4:48 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
พ 19 ก.ย. 2018 4:48 pm โดย Ittichai_chupol
R - mod_jshopping_shipping_method โมดูลการจัดส่งสินค้า
โดย pprn พ 19 ก.ย. 2018 4:42 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
4
พ 19 ก.ย. 2018 4:42 pm โดย pprn
การจัดเตรียมแปลงเพาะผักไร้ดิน แบบแปลงน้ำไม่ไหลเวียน
โดย Ittichai_chupol พ 19 ก.ย. 2018 4:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
พ 19 ก.ย. 2018 4:25 pm โดย Ittichai_chupol
การเพาะปลูกผักสลัดแบบไร้ดิน
โดย Ittichai_chupol พ 19 ก.ย. 2018 4:19 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
พ 19 ก.ย. 2018 4:19 pm โดย Ittichai_chupol
Q- ไม่สามารถพิมพ์ข้อความลงบน Google chrom ได้
โดย tatiya พ 19 ก.ย. 2018 12:36 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
30
พ 19 ก.ย. 2018 1:02 pm โดย tatiya
VDO - การทำงานของโปรแกรมเมอร์และการอัพเดทงานในเเต่ละวัน
โดย prakon พ 19 ก.ย. 2018 11:56 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
4
พ 19 ก.ย. 2018 11:56 am โดย prakon
การเดินทางจากเพชรบุรี มา กรุงเทพฯ
โดย Ittichai_chupol พ 19 ก.ย. 2018 11:39 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
พ 19 ก.ย. 2018 11:39 am โดย Ittichai_chupol
งานประจำวันที่ 19 กันยายน 2561
โดย Ittichai_chupol พ 19 ก.ย. 2018 11:03 am บอร์ด M070 - อิทธิชัย ชูผล
3
20
พ 19 ก.ย. 2018 7:08 pm โดย Ittichai_chupol
Work's on Hand อิทธิชัย ชูผล M070
โดย Ittichai_chupol พ 19 ก.ย. 2018 11:01 am บอร์ด M070 - อิทธิชัย ชูผล
0
5
พ 19 ก.ย. 2018 11:01 am โดย Ittichai_chupol
งานประจำวันที่ 19 กันยายน 2561
โดย muneela พ 19 ก.ย. 2018 10:57 am บอร์ด M068 - มุนีลา หมัดบาซา
1
10
พ 19 ก.ย. 2018 7:08 pm โดย muneela
งานประจำวันที่ 19 กันยายน 2561
โดย pprn พ 19 ก.ย. 2018 10:21 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
12
พ 19 ก.ย. 2018 7:15 pm โดย pprn
งานประจำวันที่ 19 กันยายน 2561
โดย tai14 พ 19 ก.ย. 2018 10:00 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
3
พ 19 ก.ย. 2018 7:02 pm โดย tai14
งานประจำวันที่ 19 กันยายน 2561
โดย prakon พ 19 ก.ย. 2018 9:53 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
10
พ 19 ก.ย. 2018 10:01 am โดย prakon
งานประจำวันที่ 19 กันยายน 2561
โดย tatiya พ 19 ก.ย. 2018 9:26 am บอร์ด M065 - ตติยะ นาชัย
1
6
พ 19 ก.ย. 2018 8:29 pm โดย tatiya
B - ระบบแสดงยอดสต็อค On Hand ของ product set ไม่ถูกต้อง
โดย rinrada พ 19 ก.ย. 2018 8:36 am บอร์ด Hachanna - Testter
0
9
พ 19 ก.ย. 2018 8:36 am โดย rinrada
งานประจำวันที่ 18 กันยายน 2561
โดย muneela อ 18 ก.ย. 2018 10:22 am บอร์ด M068 - มุนีลา หมัดบาซา
1
8
อ 18 ก.ย. 2018 7:08 pm โดย muneela
B - ไม่ปรากฏในแดชบอร์ดคำสั่งซื้อที่ส่ง [2018-09][006]
โดย muneela อ 18 ก.ย. 2018 10:14 am บอร์ด Hachanna - Testter
2
15
อ 18 ก.ย. 2018 6:00 pm โดย muneela