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

บทที่ 4 Statement

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

บทที่ 4 Statement

 Statement ก็คือลักษณะโครงสร้างของการเขียนโปรแกรมนะครับ โดยทั่วไปแล้ว ภาษาที่ใช้ในการเขียนโปรแกรมก็จะมี การวน loop การตรวจสอบเงื่อนไข และ การใช้ Function ต่างๆ สำหรับผู้ที่เคยศึกษาภาษาที่ใช้เขียนโปรแกรมมาก่อน เช่น C,Pascal,Basic ไม่ว่าVersion ไหนก็คงจะร้องอ๋อทันที แต่ผู้ที่ยังไม่เคยเขียนโปรแกรมมาก่อนก็ไม่ต้องตกใจนะครับ เราจะเริ่มศึกษาเรื่องพวกนี้จาก JavaScript ก็ได้ ถ้ายังนึกภาพไม่ออกว่า Statement คืออะไร ก็ดูต่อไปเลยนะครับ ของอย่างนี้จำเป็นต้องมีตัวอย่าง อยู่แล้ว

Data Declarations

  แปลตรงๆว่า การประกาศตัวแปรครับ ใน JavaScript คุณสามารถประกาศตัวแปรพร้อมใส่ค่า ให้มันได้เลยเช่น Statement a=58 ก็จะเป็นการกำหนดให้ a เป็นเลขจำนวนเต็มมีค่าเท่ากับ 58 (JavaScript สามารถรู้ชนิดของตัวแปรได้เอง) แต่ในการกำหนดตัวแปรพิเศษเช่น Array และ Object เราต้องกำหนดชนิดให้มัน ดูตัวอย่างวิธีการกำหนดครับ

Customers = new Array()
Days = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
Img1 = new Image() 

จากตัวอย่างนะครับเรากำหนดให้ Customers เป็น Array ชุดหนึ่ง กำหนดให้ Day เป็น Array เก็บ String 7 ค่า และกำหนดให้ Img1 เป็น Object ชนิด Image() ซึ่งก็คือภาพครับ (สามตัวอย่างนี้ไม่เกี่ยวข้องกันนะ แค่ยกตัวอย่างให้ดูเท่านั้นเอง)

If...else

Statement If ก็เป็น Statement ที่ใช้ในการตรวจสอบเงื่อนไขครับ ถ้าเงื่อนไขที่ตรวจสอบเป็นจริง จึงจะให้ทำงานตามที่เรากำหนดไว้ แต่ภ้าเงื่อนไขไม่เป็นจริงก็จะข้ามคำสั่งในส่วนนั้นไป เช่น


if (A==1000) 
document.write("JavaScript"); 

โปรแกรมนี้จะทำการตรวจสอบค่าในตัวแปร A ว่ามีค่าเป็น 1000 หรือไม่ ถ้าใช่ ก็จะเขียนคำว่า JavaScript ลงบนหน้าจอ ถ้าไม่ใช่ก็ไม่มีอะไรเกิดขึ้น เมื่อเราต้องการให้ Program ทำงานตามคำสั่งในกรณีที่เงื่อนไขเป็นเท็จเราก็จะ เพิ่ม else ลงไป ดังตัวอย่าง

if (A==1000) 
document.write("JavaScript"); 
else { document.write("HTML"); 

โปรแกรมนี้จะทำการตรวจสอบค่าในตัวแปร A ว่ามีค่าเป็น 1000 หรือไม่ ถ้าใช่ ก็จะเขียนคำว่า JavaScript ลงบนหน้าจอ ถ้าไม่ใช่ก็ไม่มีอะไรเกิดขึ้น เมื่อเราต้องการให้ Program ทำงานตามคำสั่งในกรณีที่เงื่อนไขเป็นเท็จเราก็จะ เพิ่ม else ลงไป ดังตัวอย่าง

if (A==1000) 
document.write("JavaScript"); 
else { document.write("HTML"); 

ถ้าค่าในตัวแปร A ไม่เท่ากับ 1000 Program ก็จะทำงานในกรณีของ else คือการเขียนคำว่า HTML ลงไปบนหน้าจอ


for

ผ่าน if ไปแล้วนะครับ ต่อไปก็เป็น for ตัว for เนี่ยก็จะใช้สำหรับวน loop หรือการให้ ทำซ้ำไปเรื่อยๆตามจำนวนรอบที่กำหนด หรืออีกนัยหนึ่งคือเราต้องรู้จำนวนรอบที่แน่นอน ถึงจะใช้ for loop ครับ for ก็มีรูปแบบการเขียนดังนี้ครับ

for (ประกาศตัวแปรใหม่พร้อมกำหนดค่าเริ่มต้น;เงื่อนไขการหยุด;เพิ่มค่าให้ตัวแปร) { คำสั่งต่างๆ ที่จะให้ทำซ้ำ }

ตัวอย่าง

<html>
<head><title>Usage for Statement</title>
</head>
<body>
<script language="javascript">
<!--
for (var i=0;i<9;i++) {
document.write(i+"<br>");
}
//  -->
</script>
</body>
</html>

 

  จากตัวอย่างนะครับ ให้สังเกตุที่ตำแหน่งที่ขึ้นด้วย for เราได้กำหนดให้ตัวแปร i เริ่มต้นจาก 0 (var i=0)และ ทำงานขณะที่ i<9 โดยเพิ่มค่า i ทีละ 1 (i++) การทำ loop for ก็มีแค่นี้นะครับการจะใช้มันได้แค่ไหน ก็ขึ้นอยู่กับความคิดที่จะเอาไปประยุกต์ แล้ว เช่น อาจจะให้ i เพิ่มที่ละ 2 หรือจะให้มัน Start ที่ค่ามากแล้วลดทีละ 1 จนถึงอีกค่าที่น้อยกว่า ก็ได้ครับ

While

While ก็แปลตรงๆว่า "ขณะที่" ซึ่งก็คือ มันจะทำงานขณะที่เงื่อนไขเป็นจริง และทำซ้ำไปเรื่อยๆจนเงื่อนไขเป็นเท็จไป While ก็มีวิธีใช้ดังนี้ครับ

while (condition) { ชุดคำสั่ง }

Condition ก็คือ เงื่อนไขที่จะทำการตรวจสอบว่าเป็นจริงหรือเท็จ ชุดคำสั่งก็คือ ส่วนที่ทำงานซ้ำๆ โดยจะต้องมีคำสั่งที่จะทำให้ condition เป็นเท็จด้วย เพื่อให้โปรแกรมหยุดทำงานได้ ไม่งั้นจะเป็น loop forever ซึ่งมันก็คือ Bug ตัวหนี่ง ถ้ายังไม่เข้าใจลองสังเกตุจากตัวอย่างนะครับ

<html>
<head><title>Usage for Statement</title>
</head>
<body>
<script >
 
<!--
i=0;
while (i<9) 
{
document.write(i+"<br>");
i++;
}
//  -->
</script>
</body>
</html>

จากตัวอย่างในส่วนของเงื่อนไขที่ให้ตรวจสอบก็คือ i<9 และส่วนที่ให้ทำงานก็จะมี 2 คำสั่งคือคำสั่งที่ให้เขียน i ลงบนจอ และคำสั่งเพื่มค่า i ซึ่งเป็นคำสั่งที่เมื่อทำไปเรื่อยๆจะทำให้ i<9 สามารถเป็นเท็จได้ โปรแกรมจึงหยุดทำงาน

Do..While

Do while จะเป็นการวน loop ชนิดที่ทำจนกว่า เงื่อนไขจะเป็นจริง concept จะคล้ายๆกับ while แต่อย่าสับสนนะ while จะทำางานจนเงื่อนไขเป็นเท็จ แต่ do..while จะทำจนเงื่อนไขเป็นจริงวิธีใช้ ก็จะคล้ายๆกับ while ครับ

do { ชุดคำสั่ง } while (condition);

Statement นี้ลองไปเขียนเองนะครับ ไม่ยากหรอก ลองเทียบๆเคียงๆกับ while ดู ชุดคำสั่งที่เป็น loop ก็มีแค่นี้แหละ ต่อไปก็จะเป็น Statement อื่นๆ แต่ก็สำคัญนะ รู้ไว้ใช่ว่า จริงไหมครับ

Break

 Break Statement จะทำหน้าที่หยุดการทำงานของ loop แบบทันทีทันใด ดังนั้นเมื่อ break ทำงาน loop จะหยุดการทำงานอย่างกระทันหัน เช่น

</html>
<head>
<title>Using Break Statement</title>
</head>
<body>
<script >
 
a = new Array(5,4,3,2,1)
sum = 0
for (i=0;i<a.length;i++)
{
if (i==3) break;
sum+=a[i]
}
document.write(sum);
 
</script>
</body>
</html>

จากตัวอย่างเราได้ประกาศ Array ขึ้นมาตัวหนึ่งพร้อมทั้งกำหนดค่า ภายในให้เลย โดยตัวที่ 0 คือ 5 ตัวที่ 1 คือ 4 .... จากนั้น Program ก็จะทำงานโดยการเก็นสะสมค่าจาก A[i] ไปใว้ใน sum จนกระทั่ง i มีค่าเป็น 3 ก็จะหยุดทำงาน ค่าที่อยู่ใน sum ก็จะเป็นผลรวมของ a[0] จนถึง a[2] ก็คือ 5+4+3 จะมีค่า=12 ครับ

Continue

Continue ก็ทำงานคล้ายๆกับ Break คือเข้ามาขัดขวางกาทำงานแต่ก็มีข้อแตกต่างตรงที่ Break ใช้หยุด loop ทั้งหมด แต่ Continue ใช้เพื่อหยุดแค่ loop ปัจจุบันเพียง loop เดียว หรือจะเรียกการทำงานของมันว่า Skip ก็ได้ เช่น

i = 1 ;
sum = 0;
while (i<10)
{
i*=2;
if (i==4) continue;
sum += i+1;
}

จากตัวอย่าง เราได้กำหนดให้โปรแกรมทำงานในขณะที่ i มีค่าน้อยกว่า 10 โดยจะให้ i เพิ่มเป็น 2 เท่า (จาก i*=2 ) แล้วเอาไปรวมไว้ใน sum แต่ถ้า i มีค่าเป็น 4 ก็จะไม่เอาไปรวมใน sum เพราะถูก Skip ด้วย Statement continue แล้ว

Switch

 ขอย้อนกลับไปที่ If Statement นะครับ ใน If Statement เราสามารถตรวจสอบได้แค่เพียง 2 กรณีคือ เงื่อนไขที่ตรวจสอบเป็นจริงหรือเท็จ ตอนนี้ผมขอแนะนำ Statement ตัวใหม่ ก็คือ Switch ครับ Switch เป็นความสามารถของ JavaScript 1.2 ซึ่งอาจจะมีปัญหากับ Browser บางตัว แต่ก็เรียนรู้ไว้เถอะครับ เวลาไปแอบดู Source Code ของเขาจะได้ไม่งง Switch จะสามารถตรวจสอบเงื่อนไขได้หลายกรณี เพราะเงื่อนไขที่ตรวจสอบ ไม่ใช่ Boolean แต่อาจเป็น Integer หรือ String ก็ได้ Switch จะมีวิธีการใช้ดังนี้ครับ

switch(expression)
{
case value1:
ชุดคำสั่ง1
break
case value2:
ชุดคำสั่ง2
break
case value3:
ชุดคำสั่ง3
break
...
...
...
default:
ชุดคำสั่งมาตรฐาน
}

Expression ก็คือตัวแปรที่เราจะ Check มันว่ามีค่าเป็นเท่าไหร่ ก็ตรงกับ valueใด ชุดคำสั่งนั้นก็จะทำงาน ถ้ามันไม่ตรงเลย ชุดคำสั่งมาตรฐานก็จะทำงาน ดูตัวอย่างแล้วกันนะครับ

<html>
<head><title>Using Switch Statement</title></head>
<body>
<script >
 
i = 2;
switch(i)
{
case 1:
  document.write('One');
break
case 2:
  document.write('Two');
break
case 3:
  document.write('Three');
break
default:
  document.writeln("I don't know");
break
}
 
</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 ของหน้าหนังสือเช่นกันครับ

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

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

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

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

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

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

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

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

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

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

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