บทเรียนที่ 13 วิธีกระทำ : Confirm (เกริ่นนำ IF และ ELSE)
คำสั่ง Confirm(แปลว่า ยืนยัน คำสั่งเต็ม คือ window.confirm( ) ) ให้ผลคล้ายกับกล่องข้อความเตือน(alert) ยกเว้นว่าคำสั่ง Confirm นั้น สร้างกล่องข้อความที่มีปุ่ม Cancel ด้วย แต่ถ้าคุณใช้คำสั่ง Confirm อย่างเดียว ผลที่ได้แทบไม่ต่างอะไรกับคำสั่ง alert เพียงแต่มีปุ่ม Cancel เพิ่มเข้ามา ซึ่งไม่ว่าคุณจะเลือกกด OK หรือ Cancel ก็ไม่มีผลอะไรเกิดขึ้นเช่นเดียวกัน แต่หากคุณใช้คำสั่ง confirm ร่วมกับชุดคำสั่ง if(แปลว่า ถ้า) และ else(แปลว่า นอกเหนือไปจากนี้) คุณสามารถสร้างผลที่ออกมาตามที่คุณต้องการได้ ว่ากด OK แล้วจะเกิดสิ่งนี้ หรือกด Cancel แล้วจะเกิดสิ่งนั้น
สคริปพื้นฐานของ confirm...
<SCRIPT type="text/javascript">
confirm("คุณแน่ใจแล้วหรือที่เข้ามา ?")
</SCRIPT>
confirm("คุณแน่ใจแล้วหรือที่เข้ามา ?")
</SCRIPT>
คุ้นๆ มั้ยครับ... เหมือนๆกับวิธีสร้างกล่องข้อความเตือน ยกเว้นเปลี่ยนจากคำว่า alert เป็น confirm ส่วนสคริปข้างล่างนี้ เพิ่มชุดคำสั่งของ if และ else
<SCRIPT type="text/javascript">
if (confirm("คุณแน่ใจแล้วหรือที่เข้ามา ?") )
{
alert("เลือกได้ถูกต้อง")
}
else
{
alert("งั้นไปไกลๆเลย")
parent.location='http://www.google.co.th'
}
</SCRIPT>
if (confirm("คุณแน่ใจแล้วหรือที่เข้ามา ?") )
{
alert("เลือกได้ถูกต้อง")
}
else
{
alert("งั้นไปไกลๆเลย")
parent.location='http://www.google.co.th'
}
</SCRIPT>
ผลของสคริปนี้
คุณได้เห็นผลของสคริปนี้ ในตอนแรกที่คุณเปิดเข้ามาแล้ว หากคุณยังไม่ได้กด Cancel เพียงดูในสคริป คุณก็จะทราบได้ว่าเมื่อกด Cancel แล้วจะเกิดอะไรขึ้น
...เจ๋ง ปะ...ต่อไปเราจะมาดูว่าสคริปนี้ทำงานได้อย่างไร
...เจ๋ง ปะ...ต่อไปเราจะมาดูว่าสคริปนี้ทำงานได้อย่างไร
มาแยกโครงสร้างของจาวาสคริปกันครับ
คุณมีทางเลือก ... กระบวนการของสคริปนี้ค่อนข้างเป็นเหตุเป็นผล ในตอนต้นของสคริป เริ่มว่า...
if (confirm("คุณแน่ใจแล้วหรือที่เข้ามา ?") )
if หมายความว่า if (คุณสามารถสร้างทางเลือกโดยใช้เงื่อนไขหรือวิธีต่างๆ)
เพราะว่ามีทางเลือกนั่นเอง จึงต้องมีตัวเลือก ในกรณีนี้เราใช้คำสั่ง Confirm ซึ่งทำให้เกิด 2 ทางเลือก ได้แก่ OK กับ Cancel ผมคิดว่ามันเป็น ใช่ กับ ไม่ใช่ โปรดสังเกตรูปแบบของวงเล็บ ซึ่งการใช้คำสั่ง if ต้องใช้วงเล็บเปิดและปิดทั้งสองด้าน แต่การใช้คำสั่ง Confirm ก็ต้องใช้วงเล็บด้วยเช่นกัน ในกรณีนี้ เราจึงต้องใช้วงเล็บเปิดและปิดเป็นสองชั้น
ถัดมาเป็นชุดคำสั่ง 2 ชุด สำหรับทางเลือกทั้งสองทาง โปรดสังเกตว่ามีปีกกาหุ้มชุดคำสั่งแต่ละชุดไว้ เช่นเดียวกับบทที่แล้วมา แต่บทนี้พิเศษตรงที่ ชุดคำสั่งไม่มีคำว่า function ซึ่งเป็นลักษณะเฉพาะของชุดคำสั่ง if และ else หากคุณกด OK ชุดคำสั่งต่อไปนี้จะทำงาน
{
alert("เลือกได้ถูกต้อง")
}
alert("เลือกได้ถูกต้อง")
}
ขึ้นกล่องข้อความเตือนว่า "เลือกได้ถูกต้อง" แต่ถ้าคุณกด Cancel ชุดคำสั่งนี้จะทำงาน
else
{
alert("งั้นไปไกลๆเลย")
parent.location='http://www.google.co.th'
}
{
alert("งั้นไปไกลๆเลย")
parent.location='http://www.google.co.th'
}
หากคุณเลือก OK ชุดคำสั่งข้างบนนี้จะไม่ทำงาน โปรดสังเกตว่า พอจบชุดคำสั่ง if จะขึ้นด้วยคำว่า else ทันที แล้วตามด้วยชุดคำสั่งที่สอง ซึ่งเมื่อกด Cancel จะขึ้นกล่องข้อความเตือนที่ค่อนข้างหยาบคาย ถ้าคุณยังจำบทเรียนก่อนๆได้ parent.location คือคำสั่งที่เป็น link แล้ว link จาวาสคริปนี้จะพาคุณไปยังเว็บอื่นทันที
นี่เป็นเพียงการเกริ่นนำของคำสั่ง if และ else ...ตั้งแต่บทที่ 21 เป็นต้นไป if และ else จะโผล่มาให้คุณเห็นอยู่บ่อยในหลายๆบท โดยทำงานร่วมกับคำสั่งอื่นๆ ตอนนี้ขอให้ตบมือดังๆต้อนรับ IF กับ ELSE หน่อยครับท่านสุภาพบุรุษและสุภาพสตรี! (ลืมๆ ไปก่อนนะครับ อีกนานกว่าจะเจอ แต่ทั้งสองตัวนี้สำคัญต่อการเขียนจาวาสคริปมากครับ)
นี่เป็นเพียงการเกริ่นนำของคำสั่ง if และ else ...ตั้งแต่บทที่ 21 เป็นต้นไป if และ else จะโผล่มาให้คุณเห็นอยู่บ่อยในหลายๆบท โดยทำงานร่วมกับคำสั่งอื่นๆ ตอนนี้ขอให้ตบมือดังๆต้อนรับ IF กับ ELSE หน่อยครับท่านสุภาพบุรุษและสุภาพสตรี! (ลืมๆ ไปก่อนนะครับ อีกนานกว่าจะเจอ แต่ทั้งสองตัวนี้สำคัญต่อการเขียนจาวาสคริปมากครับ)
แบบฝึกหัด
อย่าเพิ่งกลัวไป! คุณทำได้อยู่แล้ว...(ผมแปลออกมาตรงๆไปหน่อยรึเปล่าครับ ใครไม่อยากให้ผมเปลี่ยนแนวการแปล บอกนะครับ ผมจะเปลี่ยนตอนนี้ล่ะ รู้สึกว่ามันจะไม่ค่อยเหมาะกับคนไทยเท่าไรน่ะครับ) แบบฝึกหัดนี้จะให้คุณเปลี่ยนรวมคำสั่งข้างบน ทั้งสองชุดให้เป็นชุดคำสั่งเดียว เพื่อสร้างหน้าที่เปิดขึ้นมาแล้วจะถามผู้ใช้ว่า จะเข้าหน้านี้หรือไม่ หากผู้ใช้กด OK ก็จะมีกล่องข้อความเตือนขึ้นว่า...ยินดีต้อนรับ และเข้าหน้านี้ได้ตามปกติ หากผู้ใช้กด Cancel จะมีกล่องข้อความเตือนขึ้นว่า ลาก่อน แล้วหน้าต่างนั้นจะปิดหายไปในทันที
หากคุณอยากให้มันพิเศษกว่านี้ ให้เปลี่ยนกล่องข้อความ ยินดีต้อนรับ ไปเป็นการเปิดหน้าต่างใหม่ที่มีข้อความสีแดง(red)ว่า ยินดีต้อนรับ
หากคุณอยากให้มันพิเศษกว่านี้ ให้เปลี่ยนกล่องข้อความ ยินดีต้อนรับ ไปเป็นการเปิดหน้าต่างใหม่ที่มีข้อความสีแดง(red)ว่า ยินดีต้อนรับ
เฉลย
<script language="javascript">
a()
function a()
{
if(confirm("คุณแน่ใจแล้วหรือที่เข้ามา ?"))
{alert("ยินดีต้อนรับ");b()}
else
{alert("ลาก่อน");self.close()/*หากทดลองกับเน็ตจริงๆ คำสั่งนี้จะปิดหน้าต่างได้ทันที
โดยไม่มีคำถามขึ้นมา*/
}
}
function b() //จริงๆแล้วไม่จำเป็นต้องทำเป็นชุดคำสั่ง สามารถนำคำสั่งข้างใน ไปวางไว้หลัง self.close() ได้เลย
{var w = open("","a","height=100,width=300")
w.document.write("<html><title>ยินดีต้อนรับ</title><h1>"+
"<font color='red'>ยินดีต้อนรับ</font></h1><html>")
}
</script>
a()
function a()
{
if(confirm("คุณแน่ใจแล้วหรือที่เข้ามา ?"))
{alert("ยินดีต้อนรับ");b()}
else
{alert("ลาก่อน");self.close()/*หากทดลองกับเน็ตจริงๆ คำสั่งนี้จะปิดหน้าต่างได้ทันที
โดยไม่มีคำถามขึ้นมา*/
}
}
function b() //จริงๆแล้วไม่จำเป็นต้องทำเป็นชุดคำสั่ง สามารถนำคำสั่งข้างใน ไปวางไว้หลัง self.close() ได้เลย
{var w = open("","a","height=100,width=300")
w.document.write("<html><title>ยินดีต้อนรับ</title><h1>"+
"<font color='red'>ยินดีต้อนรับ</font></h1><html>")
}
</script>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น