บทเรียนที่ 21 แนะนำการใช้ IF
ตัวอย่างนี้จะแนะนำคุณสู่การสร้างประโยค if(ถ้า) ซึ่งเป็นประโยคที่เป็นเงื่อนไข เช่น ถ้าถามผู้ใช้ว่าคุณชอบเล่นกีฬาไหม ? ถ้าคำตอบคือ "ใช่" เราสามารถโปรแกรม ให้บอกว่า "ฉันก็ชอบเล่นกีฬา !" ถ้าคำตอบคือ "ไม่" เราสามารถโปรแกรมให้บอกว่า "ฉันไม่ชอบเล่นกีฬาเหมือนกัน !" ผมอาจอธิบายออกมาแปลกๆไปหน่อย แต่พอสรุปตัวอย่างสั้นๆได้แบบนี้ล่ะครับ
ให้สังเกตว่าหากผู้ใช้ พิมพ์นอกเหนือไปจากคำว่า "ใช่" กับ "ไม่" โปรแกรมจะโต้กลับว่า "โปรดตอบคำว่า ไม่ หรือ ใช่ เท่านั้น" ดูมีเทคนิคซับซ้อนขึ้น..ว่าไหมครับ ?
การกำหนดประโยค if จะตามาด้วยเงื่อนไขนั้น และสิ่งที่จะทำเมื่อเงื่อนไขนั้นเป็นจริง ซึ่งอาจให้โปรแกรมทำหลายๆคำสั่ง ซึ่งโปรแกรมจะรู้ว่า จะเริ่มทำจากจุดใดและจบที่จุดใด โดยดูจากเครื่องหมายปีกกา { คำสั่ง }
สคริป...
<HTML><HEAD><SCRIPT type="text/javascript">function askuser(){var answer=" "var s="โปรดตอบคำว่า ไม่ หรือ ใช่ เท่านั้น"var answer=prompt("คุณชอบเล่นกีฬาไหม ?")if ( answer == "ใช่"){s="ฉันก็ชอบเล่นกีฬา !"}if(answer == "ไม่"){s="ฉันไม่ชอบเล่นกีฬาเหมือนกัน !"}alert(s)}</SCRIPT></HEAD><BODY><CENTER><h1>การเล่นกีฬา</h1><FORM><INPUT TYPE="button" VALUE="กดตรงนี้"onClick="askuser()"></FORM></CENTER></BODY></HTML>(เครื่องหมายเท่ากับยาวๆที่อยู่ในวงเล็บหลัง if มาจากการพิมพ์เครื่องหมายเท่ากับสองครั้งติดกันนะครับ)ผลของสคริปนี้
การเล่นกีฬา
มาแยกโครงสร้างของสคริปกันครับ
· เรามาเริ่มที่จุดแรกคือ ปุ่ม(Button)...
<FORM>
<INPUT TYPE="button" VALUE="กดตรงนี้"
onClick="askuser()">
</FORM>
<INPUT TYPE="button" VALUE="กดตรงนี้"
onClick="askuser()">
</FORM>
ไม่มีอะไรนักครับ เป็นเพียงปุ่มธรรมดาๆ ที่เรียกชุดคำสั่งชื่อ askuser ให้ทำงานเมื่อกดปุ่ม
· มาดูส่วนของชุดคำสั่งครับ...(ผมหดให้บรรทัดสั้นมากขึ้นครับ แต่ผลยังคงเดิม)
function askuser(){var answer=" "
var s="โปรดตอบคำว่า ไม่ หรือ ใช่ เท่านั้น"
var answer=prompt("คุณชอบเล่นกีฬาไหม ?")
if( answer == "ใช่"){s="ฉันก็ชอบเล่นกีฬา !"}
if(answer == "ไม่"){s="ฉันไม่ชอบเล่นกีฬาเหมือนกัน !"} alert(s)}
var s="โปรดตอบคำว่า ไม่ หรือ ใช่ เท่านั้น"
var answer=prompt("คุณชอบเล่นกีฬาไหม ?")
if( answer == "ใช่"){s="ฉันก็ชอบเล่นกีฬา !"}
if(answer == "ไม่"){s="ฉันไม่ชอบเล่นกีฬาเหมือนกัน !"} alert(s)}
· answer คือชื่อตัวแปร ที่เรากำหนดให้แทนที่ว่าง 3 ที่ ต่อมา answer จะถูกเปลี่ยนเป็นข้อความที่ผู้ใช้พิมพ์ลงในกล่องรับค่า
· สังเกตว่าตัวแปรชื่อ s จะถูกกำหนดมาให้รับหน้าที่ทุกอย่าง ไม่ว่าผู้ใช้จะพิมพ์อะไรลงไปก็ตาม
· ตัวแปร answer จะถูกแทนที่ให้เป็นข้อความในกล่องรับค่า(prompt) ซึ่งไม่ได้กำหนดอะไรไว้ในกล่องเลย(สังเกตจาก ไม่มีลูกน้ำและข้อความตามหลังในคำสั่ง prompt)
· if ถูกตามมาด้วยเงื่อนไขที่อยู่ภายในวงเล็บ ซึ่งเป็นข้อบังคับว่าต้องใส่วงเล็บเสมอไปครับ
· ในเงื่อนไขที่อยู่ในวงเล็บ ห้ามใช้เครื่องหมายเท่ากับครั้งเดียว( = ) ให้ใช้เครื่องหมายเท่ากับสองครั้งติดกันแทน( == ) เครื่องหมายเท่ากับครั้งเดียวใช้ได้เมื่ออยู่นอกวงเล็บเท่านั้น
· อย่าลืมว่าข้อความ(string) ต้องถูกหุ้มด้วยเครื่องหมายขีดเดียวหรือสองขีด อย่างคำว่า "ใช่" กับ "ไม่" ตัวแปรเท่านั้นที่ไม่ต้องหุ้ม
· กระบวนการทั้งหมดสรุปได้ดังนี้..
o กล่องรับค่ารับข้อความมา
o ข้อความจะผ่านการตรวจสอบด้วย if
o หากข้อความนั้นคือ "ใช่" ประโยค "ฉันก็ชอบเล่นกีฬา !" จะโผล่ขึ้นมา
o หากข้อความนั้นคือ "ไม่" ประโยค "ฉันไม่ชอบเล่นกีฬาเหมือนกัน !" จะโผล่ขึ้นมา
o ถ้าไม่ใช่ทั้งสองอย่าง ประโยค "โปรดตอบคำว่า ไม่ หรือ ใช่ เท่านั้น" จะโผล่ออกมา
o เข้าใจไหมครับ ? ..ประมาณว่าจะมีการแก้ไขค่า s หากเป็นจริงตามเงื่อนไข
· โปรดอย่าลืมว่าจาวาสคริปเป็นประเภทอ่อนไหว(case-sensitive) การกำหนดตัวแปรหรือข้อความต้องใช้ตัวใหญ่เล็ก ให้เหมือนกันตลอดการพิมพ์นะครับ
แบบฝึกหัด
ให้เขียนโปรแกรมใหม่ โดยถามผู้ใช้ว่าเป็นชายหรือหญิง ถ้าผู้ใช้เป็นหญิง พื้นหลังจะเปลี่ยนเป็นสีชมพู(pink) หากผู้ใช้เป็นชาย พื้นหลังจะเปลี่ยนเป็นสีฟ้าอ่อน(lightblue)
เฉลย
<HTML><HEAD><SCRIPT language="javascript">
function askuser(){
var answer=prompt("คุณเป็นชายหรือหญิง ...โปรดใส่คำว่า ชายหรือหญิงเท่านั้น")
if(answer == "หญิง"){document.bgColor="pink"}
if(answer == "ชาย"){document.bgColor="lightblue"}}
</SCRIPT></HEAD><BODY><CENTER>
<h1>คุณเป็นชายหรือหญิง</h1>
<FORM>
<INPUT TYPE="button" VALUE="กดตรงนี้"
onClick="askuser()">
</FORM></CENTER></BODY></HTML>
function askuser(){
var answer=prompt("คุณเป็นชายหรือหญิง ...โปรดใส่คำว่า ชายหรือหญิงเท่านั้น")
if(answer == "หญิง"){document.bgColor="pink"}
if(answer == "ชาย"){document.bgColor="lightblue"}}
</SCRIPT></HEAD><BODY><CENTER>
<h1>คุณเป็นชายหรือหญิง</h1>
<FORM>
<INPUT TYPE="button" VALUE="กดตรงนี้"
onClick="askuser()">
</FORM></CENTER></BODY></HTML>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น