Free Web space and hosting from gorgai.com
Search the Web

JavaScript Tutorial

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 Program ก็จะทำงานในกรณีของ else คือการเขียนคำว่า HTML ลงไปบนหน้าจอ

For Statement
ผ่าน if ไปแล้วนะครับ ต่อไปก็เป็น for ตัว for เนี่ยก็จะใช้สำหรับวน loop หรือการให้ ทำซ้ำไปเรื่อยๆตามจำนวนรอบที่กำหนด หรืออีกนัยหนึ่งคือเราต้องรู้จำนวนรอบที่แน่นอน ถึงจะใช้ for loop ครับ
for ก็มีรูปแบบการเขียนดังนี้ครับ
for (ประกาศตัวแปรใหม่พร้อมกำหนดค่าเริ่มต้น;เงื่อนไขการหยุด;เพิ่มค่าให้ตัวแปร) { คำสั่งต่างๆ ที่จะให้ทำซ้ำ }

เช่น

<head><title>Usage for Statement</title> </head> <script language="javascript"> <!--for (var i=0;i<9;i++) { document.write(i+"<br>"); } // --> </script> </font></font></table><form> <input type="button" value="View Example" onclick="window.open('jsex14.html')"> </form> <br> <font face="CordiaUPC">จากตัวอย่างนะครับ ให้สังเกตุที่ตำแหน่งที่ขึ้นด้วย for เราได้กำหนดให้ตัวแปร i เริ่มต้นจาก 0 (var i=0)และ ทำงานขณะที่ i<9 โดยเพิ่มค่า i ทีละ 1 (i++) การทำ loop for ก็มีแค่นี้นะครับการจะใช้มันได้แค่ไหน ก็ขึ้นอยู่กับความคิดที่จะเอาไปประยุกต์ แล้ว เช่น อาจจะให้ i เพิ่มที่ละ 2 หรือจะให้มัน Start ที่ค่ามากแล้วลดทีละ 1 จนถึงอีกค่าที่น้อยกว่า ก็ได้ครับ <br> <em> <font size=+2 color=00ff00>W</font><font size=+2 color=00aaff>hile </font><font size=+2 color=00ff00>S</font><font size=+2 color=00aaff>tatement</font> </em> <br> While ก็แปลตรงๆว่าขณะที่ ซึ่งก็คือ มันจะทำงานขณะที่เงื่อนไขเป็นจริง และทำซ้ำไปเรื่อยๆจนเงื่อนไขเป็นเท็จไป While ก็มีวิธีใช้ดังนี้ครับ <br> <font color=ffff00> while (condition) { ชุดคำสั่ง } </font></font> <font face="CordiaUPC"><br> Condition ก็คือ เงื่อนไขที่จะทำการตรวจสอบว่าเป็นจริงหรือเท็จ<br> ชุดคำสั่งก็คือ ส่วนที่ทำงานซ้ำๆ โดยจะต้องมีคำสั่งที่จะทำให้ condition เป็นเท็จด้วย เพื่อให้โปรแกรมหยุดทำงานได้ ไม่งั้นจะเป็น loop forever ซึ่งมันก็คือ Bug ตัวหนี่ง ถ้ายังไม่เข้าใจลองสังเกตุจากตัวอย่างนะครับ<br> <font color=ffff00 size=4> <br><xmp> <head></font></font><font color=ffff00 face="system" size=4> <title>Usage for Statement</title> <font face="CordiaUPC"></head> <script language="javascript"> <!-- i=0; while (i<9) { document.write(i+"<br>"); i++; } // --> </script> </font></font> <form> <font face="CordiaUPC"> <input type="button" value="View Example" onclick="window.open('jsex15.html')"> </font> </form> <font face="CordiaUPC">จากตัวอย่างในส่วนของเงื่อนไขที่ให้ตรวจสอบก็คือ i<9 และส่วนที่ให้ทำงานก็จะมี 2 คำสั่งคือคำสั่งที่ให้เขียน i ลงบนจอ และคำสั่งเพื่มค่า i ซึ่งเป็นคำสั่งที่จะทำให้ i<9 สามารถเป็นเท็จได้ โปรแกรมจึงหยุดทำงาน </font> <p> <font face="CordiaUPC"><em> <font size=+2 color=00ff00>D</font><font size=+2 color=00aaff>o..</font><font size=+2 color=00ff00>W</font><font size=+2 color=00aaff>hile </font><font size=+2 color=00ff00>S</font><font size=+2 color=00aaff>tatement</font> </em> <br> Do while จะเป็นการวน loop ชนิดที่ทำจนกว่า เงื่อนไขจะเป็นจริง concept จะคล้ายๆกับ while แต่อย่าสับสนนะ while จะทำางานจนเงื่อนไขเป็นเท็จ แต่ do..while จะทำจนเงื่อนไขเป็นจริงวิธีใช้ ก็จะคล้ายๆกับ while ครับ </font> <p> <font color="ffff00" face="CordiaUPC"> do { ชุดคำสั่ง } while (condition); </font> <p><font face="CordiaUPC"> Statement นี้ลองไปเขียนเองนะครับ ไม่ยากหรอก ลองเทียบๆเคียงๆกับ while ดู ชุดคำสั่งที่เป็น loop ก็มีแค่นี้แหละ ต่อไปก็จะเป็น Statement อื่นๆ แต่ก็สำคัญนะ รู้ไว้ใช่ว่า จริงไหมครับ </font> <p> <font face="CordiaUPC"><em> <font color=00ff00 size=+2>B</font><font color=00aaff size=+2>reak </font><font color=00ff00 size=+2>S</font><font color=00aaff size=+2>tatement</font> </em> <br> Break Statement จะทำหน้าที่หยุดการทำงานของ loop แบบทันทีทันใด ดังนั้นเมื่อ break ทำงาน loop จะหยุดการทำงานอย่างกระทันหัน เช่น<br> <font color=ffff00 size=4> <xmp> </font></font> </html> Using Break Statement จากตัวอย่างเราได้ประกาศ Array ขึ้นมาตัวหนึ่งพร้อมทั้งกำหนดค่า ภายในให้เลย โดยตัวที่ 0 คือ 5 ตัวที่ 1 คือ 4 ....
จากนั้น Program ก็จะทำงานโดยการเก็นสะสมค่าจาก A[i] ไปใว้ใน sum จนกระทั่ง i มีค่าเป็น 3 ก็จะหยุดทำงาน ค่าที่อยู่ใน sum ก็จะเป็นผลรวมของ a[0] จนถึง a[2] ก็คือ 5+4+3 จะมีค่า=12 ครับ

Continue Statement
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 Statement
ขอย้อนกลับไปที่ 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ใด ชุดคำสั่งนั้นก็จะทำงาน ถ้ามันไม่ตรงเลย ชุดคำสั่งมาตรฐานก็จะทำงาน ดูตัวอย่างแล้วกันนะครับ

<head><title>Using Switch Statement</title></head> <script language="JavaScript"> 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> </font><form> <input type="button" value="View Example" onclick="window.open('jsex16.html')"> </form> <br> จบอีก 1 บทนะครับใครติดขัดตรงไหนก็ e-mail มาได้นะครับ <br> <td valign=top> <script language="javascript" src="menu.js"></script> </td> <p align=right> <a href="jstuep5.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> <CENTER> <script language="JavaScript" src="bottom.js"> </script> </center><img src="../../../visit.geocities.com/visit.gifฟ1003936828" border=0 width=1 height=1> <IMG SRC="http://geo.yahoo.com/serv?s=76001077&t=1003936828" ALT=1 WIDTH=1 HEIGHT=1> </BODY> </HTML>