ชื่อเรื่อง:

จาวาสคริ๊ปท์ คือ HTML ภาคพิศดาร
ตอน"สร้างประตูสู่ห้องลับ"
ผู้เขียน: ธีรพงษ์ สุทธิวราภิรักษ์

บทความตอนนี้ จะให้คุณเรียนรู้เรื่องหน้าต่างโต้ตอบสามชนิด
(Dialog Popup Window) และวิธีการนำไปประยุกต์ใช้
ดูชิ้นงานตัวอย่าง "คลิกที่นี่" (รหัสผ่านคือ 123)
ดาวน์โหลดชิ้นงานตัวอย่างไปศึกษา "คลิกที่นี่ (password.zip 53 kb.)"

เพื่อให้แสดงตัวอย่างการใช้งานหน้าต่างทั้งสามชนิดในคราวเดียว ผมจะเขียนเว็บเพจเพื่อให้ผู้ใช้ ป้อนรหัสลับ แล้วขอให้ยืนยันรหัสที่ป้อน และแจ้งผลการป้อนรหัส ก่อนจะเข้าสู่เว็บเพจสำหรับ สมาชิก หรือส่งผู้ที่ป้อนรหัสผิดไปยังเว็บเพจที่เตรียมไว้ล่วงหน้าแล้ว เรามาดูโค้ดกันเลยครับ

โค้ดตามที่เห็นนี้ จะเป็นส่วนของจาวาสคริ๊ปท์จากบรรทัดที่ 4 - 31 ซึ่งก็คือบรรทัดระหว่าง คู่แท็ก<script>นั่นเอง ข้อความระหว่างคู่แท็กนี้จะอยู่ภายใต้กฏเกณท์ของจาวาสคริ๊ปท์ ไม่ใช่ กฏเกณท์ของ HTML อีกต่อไป

บรรทัดที่ 6 - 13 เป็นการประกาศตัวแปร ตัวแปรในภาษาจาวาสคริ๊ปท์อาจตั้งชื่อด้วยตัวอักษร (ทั้งตัวเล็กและตัวใหญ่)หรือตัวเลขก็ได้รวมทั้งเครื่องหมาย _(under score) มีข้อจำกัดที่ต้อง ไม่มีช่องว่าง และตัวแรกจะต้องเป็นตัวอักษรหรือเครื่องหมาย _เท่านั้น ตัวอักษรส่วนใหญ่ในภาษา จาวาสคริ๊ปท์ถือสาเรื่องตัวอักษรเล็กใหญ่ด้วยนะครับ (case sensitive) ดังนั้น Abc กับ abc จะถูกมองว่าเป็นตัวแปรคนละตัวกัน

การประกาศตัวแปรเราอาจระบุค่าให้ตัวแปรไปพร้อมกันเลย(บรรทัดที่ 8 - 13) หรือเพียงแต่ตั้งชื่อ ไว้ก่อน ค่อยระบุค่าภายหลังก็ได้(บรรทัดที่ 6 - 7)

บรรทัดที่ 15 - 29 เป็นเนื้อหาของฟังก์ชั่น welcome() ที่เขียนขึ้นมาใหม่เพื่อใช้งานภายในสคริ๊ปท์นี้ เนื้อหาของฟังก์ชั่นจะต้องอยู่ภายใต้คู่เครื่องหมายปีกกาเสมอ การตั้งชื่อฟังก์ชั่นจะมีกติกาไม่ต่าง กับการตั้งชื่อตัวแปร

ขอขยายความเรื่องฟังก์ชั่นสักนิดครับ คุณที่ไม่เคยเขียนโปรแกรมมาก่อนอาจจะงงว่าฟังก์ชั่นมันคือ อะไร ภาษาโปรแกรมทุกภาษาแท้ที่จริงคือการลำดับคำสั่งให้คอมพิวเตอร์ทำงานไล่ไปทีละบรรทัด จากบรรทัดบนลงล่าง เหมือนการเขียนบทละครที่ลำดับเรื่องราวไปทีละฉากละตอน แต่การทำงาน ของโปรแกรมมันซับซ้อนกว่านั้น มีกระบวนการบางอย่างที่ต้องกระทำซ้ำหลายๆครั้ง การเขียน คำสั่งทุกคำสั่งไล่ไปทีละบรรทัดตลอดทั้งชิ้นงาน อาจทำให้โปรแกรมยาวเกินจำเป็น เพราะจะต้อง เขียนคำสั่งซ้ำเท่ากับจำนวนครั้งที่กระทำซ้ำนั้น ผู้พัฒนาภาษาจึงกำหนดให้โปรแกรมเมอร์สามารถ เขียนบรรทัดคำสั่งหลายๆบรรทัดรวมเป็นชุดได้เอง และให้ตั้งชื่อแต่ละชุดคำสั่งนั้นได้ด้วย การเขียน โปรแกรมจึงกระชับขึ้น ตรวจสอบแก้ไขได้ง่ายขึ้น ชุดคำสั่งนี้แหละที่จาวาสคริ๊ปท์เรียกว่าฟังก์ชั่น ในภาษาอื่นอาจมีคำเรียกต่างกันไป เช่น ปาสคาล จะเรียกชุดคำสั่งที่ไม่มีการรับส่งค่าเป็น procedure เป็นต้น

ตามตัวอย่างนี้ตัวแปรและฟังก์ชั่น welcome()จะถูกโหลดขึ้นสู่หน่วยความจำ ไปทีละบรรทัดและ จะเริ่มทำงานเมื่อบร๊าวเซอร์อ่านไฟล์ถึงบรรทัดที่ 33 (แท็ก <body>) ซึ่งบรรทัดนี้มีการระบุ ให้ฟังก์ชั่น welcome() เริ่มทำงานด้วยคำสั่ง onLoad="welcome();"

จาวาสคริ๊ปท์มีลักษณะของภาษาโปรแกรมเชิงวัตถุ (object oriented programming)โดยกำเนิด ภาษาสมัยใหม่แบบนี้จะมีคุณสมบัติการตรวจจับเหตุการณ์(event handling)มาให้ใช้เป็นมาตราฐาน onLoad คือหนึ่งในกระบวนการตรวจจับเหตุการณ์ที่ว่านี้ onLoad จะผูกติดกับคู่แท็ก<body> เสมอ เนื่องจากชื่อก็บอกชัดอยู่แล้วว่าเป็นเหตุการณ์ที่จะเกิดขึ้นตอนโหลดเพจนั่นเอง คู่แฝดของ onLoad ก็คือ onUnload มันมีกฎเกณท์การใช้งานคล้ายกัน เราอาจเขียนให้โปรแกรมกระทำสิ่งใดๆในตอน โหลดเพจ หรือตอนออกไปจากเพจ หรือทั้งสองอย่างได้ด้วยการแทรกคำสั่ง onLoad หรือ onUnload ลงในส่วนขยายของแท็ก <body> นี่เอง

เอาละ เรามาดูกันว่าฟังก์ชั่น welcome() มันทำงานอย่างไร เริ่มจากการวนรอบของคำสั่ง while() ในบรรทัดที่ 16 - 20 while จะทำงานตามคำสั่งระหว่างคู่ปีกกาทั้งหมด และจะทำซ้ำวนรอบไป เรื่อยหากเนื้อหาในวงเล็บเป็นจริง ตามตัวอย่างนี้การวนรอบจะเป็นในลักษณะไม่มีจุดสิ้นสุด เพราะ true ในวงเล็บจะเป็นจริงเสมอ โปรแกรมจะหลุดจากการวนรอบ (loop)ได้ต่อเมื่อเจอคำสั่ง break เท่านั้น

บรรทัดที่ 17 จะแสดงหน้าต่างรอรับข้อความ (prompt dialog) และจะนำข้อความที่ได้มา เก็บไว้ในตัวแปร pw

ผู้ใช้(user)จะเห็นหน้าต่างรอรับข้อความแสดงข้อความตามที่เรากำหนด พร้อมทั้งมีช่องกรอก ข้อความให้หนึ่งช่อง มีปุ่ม ok และ cancel หากมีการกดปุ่ม ok จาวาสคริ๊ปท์จะนำค่าในช่องกรอก ข้อความมาใส่ไว้ในตัวแปรที่ต้นบรรทัด หากมีการกดปุ่ม cancel จะส่งค่า null (แปลว่า"ไม่มีอะไร") ไปใส่ไว้ในตัวแปรแทน

หน้าต่างรอรับข้อความมีไวยากรณ์ดังนี้
ตัวแปรรับข้อมูล = window.prompt("ข้อความแสดงบนหน้าต่าง", "ข้อความที่เป็นค่าเริ่มต้น");

ตามตัวอย่างในบรรทัดที่ 17 จะเห็นว่าตัวแปร message(บรรทัดที่ 9)จะถูกนำมาแทนค่าเป็น "กรุณาป้อนรหัสผ่าน" และข้อความที่ให้เห็นเป็นค่าเริ่มต้น เรากำหนดให้ไม่มีข้อความ และตัวแปร ที่รับค่าคือ pw สมมุติว่าผู้ใช้ป้อนข้อความ "กขค" และกด ok ค่าของ pw จะเป็น "กขค" ทันที

บรรทัดที่ 18 หลังจากรับข้อความจากบรรทัดที่ 17 แล้ว บรรทัดนี้จะนำข้อความ(ซึ่งเก็บไว้ ในตัวแปร pw)นั้นมาขอคำยืนยันอีกครั้ง โดยใช้หน้าต่างขอรับการยืนยัน (comfirmation dialog) และจะเก็บผลของการยืนยันไว้ในตัวแปร confm

ผู้ใช้จะเห็นหน้าต่างย่อยที่แสดงข้อความตามที่เรากำหนด และมีปุ่มให้เลือกสองปุ่มคือ ok และ cancel หากมีการกดปุ่ม ok จะมีการส่งค่า true(หรือ 1) ให้กับตัวแปรที่ต้นบรรทัด หากผู้ใช้กดปุ่ม cancel จะเป็นการส่งค่า false(หรือ -1)

หน้าต่างขอรับการยืนยันมีไวยากรณ์ดังนี้
ตัวแปรรับข้อมูล = window.confirm("ข้อความที่แสดงบนหน้าต่าง")

ตามตัวอย่างในบรรทัดที่ 18 จะเห็นว่าตัวแปรรับค่าคือ confm ส่วนข้อความที่แสดงจะเป็นการผสม ข้อความจากตัวแปร confmsg1("คุณป้อนรหัสว่า " ตามที่เราระบุไว้แล้วจากบรรทัดที่ 10) บวกกับ ตัวแปร pw ("กขค" ที่ได้จากการป้อนของผู้ใช้) บวกกับตัวแปร confmsg2("\nกดปุ่มยืนยันอีกครั้ง" ตามที่เราระบุไว้แล้วจากบรรทัดที่ 11) ดังนั้นเมื่อแทนค่าทั้งหมดแล้ว ข้อความที่แสดงบนหน้าต่าง จะเป็นสองบรรทัด ดังภาพประกอบที่ 3 (หมายเหตุ \n คือคำสั่งขึ้นปรรทัดใหม่)

บรรทัดที่ 19 จะเป็นการตรวจค่าตัวแปร confm ด้วยคำสั่ง if() เครื่องหมายแสดงการเปรียบเทียบ จะใช้เท่ากับสองตัว (==) หากค่าทางด้านซ้ายของเครื่องหมายนี้ตรงกับค่าทางด้านขวาเงื่อนไขจะ เป็นจริง โปรแกรมจะทำงานตามคำสั่งถัดจากการเปรียบเทียบนี้(คำสั่ง break) หากเปรียบเทียบ แล้วไม่เท่ากันเงื่อนไขจะเป็นเท็จ คำสั่ง break จะไม่ถูกดำเนินการ

มาดูในแง่ของผู้ใช้ หากผู้ใช้คลิกปุ่ม cancel เงื่อนไขที่ตรวจเช็คด้วยคำสั่ง if() จะเป็นเท็จ คำสั่ง break จะไม่ถูกเรียกใช้ และโปรแกรมจะวนกลับไปเริ่มทำงานบรรทัดที่ 17 ใหม่(มีหน้าต่างให้ป้อนรหัส ผ่านใหม่) แต่ถ้าผู้ใช้คลิกปุ่ม ok ตัวแปร confm จะมีค่าเป็น true(หรือ 1) เงื่อนไขที่ตรวจเช็ค ด้วยคำสั่ง if() จะเป็นจริง จาวาสคริ๊ปท์จะเรียกใช้คำสั่ง break เพื่อกระโดดออกจากเครื่องหมาย ปีกกาบรรทัดที่ 20 เป็นการหลุดจากวนรอบของคำสั่ง while() และทำงานต่อในบรรทัดถัดไป

มาถึงบรรทัดที่ 21 มีการใช้คำสั่ง if() อีกครั้ง คราวนี้เครื่องหมายแสดงการเปรียบเทียบใช้เป็น != (อ่านว่า "ไม่เท่ากับ") การเปรียบเทียบคราวนี้เงื่อนไขจะเป็นจริง ต่อเมื่อค่าของข้อมูลทั้งสอง ด้านของเครื่องหมายเปรียบเทียบไม่เท่ากัน และเงื่อนไขจะเป็นเท็จหากข้อมูลทั้งสองด้านเท่ากัน (จะตรงข้ามกับการใช้คำสั่ง if คราวก่อน)

คำสั่งบรรทัดนี้จะทำการเปรียบเทียบค่าของตัวแปร pw (ที่ได้จากการป้อนของผู้ใช้ในบรรทัดที่ 17) กับตัวแปร password(ที่เรากำหนดไว้แล้วจากบรรทัดที่ 8) ถ้าเปรียบเทียบแล้วค่าทั้งสองไม่ตรงกัน เงื่อนไขการตรวจสอบจะเป็นจริง โปรแกรมจะทำงานบรรทัดที่อยู่ในคู่ปีกกาคือ บรรทัดที่ 22 และ 23 แต่ถ้าเปรียบเทียบแล้วค่าทั้งสองตรงกัน เงื่อนไขการตรวจสอบจะเป็นเท็จ โปรแกรมจะกระโดดไป ทำงานบรรทัดที่อยู่ในคู่ปีกกาของ else คือบรรทัดที่ 26 และ27

ตามตัวอย่างนี้ ตัวแปร pw มีค่าเท่ากับ "กขค" แต่ตัวแปร password มีค่าเท่ากับ "123" ดังนั้น เงื่อนไขเป็นจริง การทำงานที่บรรทัด 22 และ 23 จึงเกิดขึ้น

บรรทัดที่ 22 จะแสดงหน้าต่างแจ้งข่าวสาร (alert dialog) ว่ารหัสผ่านที่ป้อนนั้นไม่ถูกต้อง และมีปุ่มกด ok หนึ่งปุ่ม หน้าต่างแจ้งข่าวสารนี้จะไม่มีการคืนค่าใดๆ ดังนั้นจึงไม่ต้องมีตัวแปร มารอรับค่าเหมือนหน้าต่างสองแบบที่ผ่านมา

หน้าต่างทักทายหรือแจ้งข่าวสาร (alert dialog)มีไวยากรณ์ดังนี้
window.alert("ข้อความที่แสดงบนหน้าต่าง")

ตามตัวอย่างจะเห็นว่าตัวแปร missmsg(จากบรรทัดที่ 13)จะถูกนำมาแทนค่า ดังนั้นข้อความในหน้าต่าง แจ้งข่าวสารจึงเป็นสองบรรทัด ดังภาพประกอบที่ 5 และเมื่อผู้ใช้คลิกปุ่ม ok โปรแกรมจะทำงาน บรรทัดที่ 23 ทันที

บรรทัดที่ 23 จะเป็นการระบุให้โหลดหน้าเอกสารตาม url ที่กำหนด(ตามตัวอย่างเป็นเอกสารที่ชื่อ sorry.html) มาแสดงบนบร๊าวเซอร์ คำสั่งสำหรับการโหลดหน้าเอกสารมีไวยากรณ์ดังนี้

หากคุณทำโฮมเพจสำหรับผู้ใหญ่ และไม่ต้องการให้เด็กๆเข้ามาในเว็บไซท์ของคุณ คุณอาจระบุ url ตรงบรรทัดนี้เป็น window.location.href = "http://www.disney.com" เพื่อส่งหนูน้อยหมวกแดง ที่บังเอิญผ่านมา ให้กลับไปอยู่ในเส้นทางที่เหมาะสมกับเด็กน้อยต่อไป (วิธีนี้เห็นบ่อยๆตามเว็บไซท์ ลับเฉพาะไงละ)

มาถึงตอนสุดท้ายครับ เมื่อผู้ใช้ป้อนรหัสผ่านตรงกับค่าตัวแปร password เงื่อนไขที่เปรียบเทียบบน บรรทัดที่ 21 เป็นเท็จ โปรแกรมจะกระโดดไปทำงานบรรทัดที่อยู่ในคู่ปีกกาของ else คือบรรทัดที่ 26 และ27

บรรทัดที่ 26 จะแสดงหน้าต่างทักทายหรือแจ้งข่าวสาร (alert dialog) เหมือนกับบรรทัดที่ 22 แต่ข้อความที่แสดงจะเป็นตามตัวแปร rightmsg คือ "รหัสผ่านถูกต้อง ยินดีต้อนรับ" และเมื่อผู้ใช้คลิก ok บร๊าวเซอร์ก็จะโหลดหน้าเอกสารตามคำสั่งโหลดเพจในบรรทัดที่ 27(ตามตัวอย่างจะเป็นเอกสาร ชื่อ welcome.html)มาแสดง

สรุป
การทำงานตามจาวาสคริ๊ปท์ที่ให้เป็นตัวอย่างนี้มีเท่านี้ครับ จะเห็นว่าคุณได้เรียนรู้เรื่องการใช้ตัวแปร การเขียนฟังก์ชั่น การใช้คำสั่งวนรอบ(while) การใช้คำสั่งเปรียบเทียบข้อมูล(if) การนำหน้าต่าง โต้ตอบสามแบบมาใช้ และยังได้ทดลองใช้การดักจับเหตุการณ์ onLoad จากการศึกษาจาวาสคริ๊ปท์ เพียงตัวอย่างเดียว

จาวาสคริ๊ปท์"สร้างประตูสู่ห้องลับนี้"ที่นำมาเสนอนี้ เขียนขึ้นเพื่อใช้เป็นตัวอย่างประกอบการเรียนรู้ เรื่องจาวาสคริ๊ปท์เป็นสำคัญ หากคุณชอบจะเอาไปใช้ในเว็บไซท์ของคุณก็ได้ไม่มีข้อจำกัดอย่างใด แต่ขอแจ้งให้ทราบว่า การตรวจรหัสผ่านตามวิธีนี้ มีความมั่นคงแข็งแรงระดับหนึ่งเท่านั้น ผู้ท่องเว็บ ที่มีประสบการณ์สูงมากๆ อาจทะลวงประตูนี้เข้าไปได้ไม่ยากนัก ดังนั้นประตูนี้จึงไม่ควรใช้กับ เว็บไซท์ที่มีความสำคัญระดับสูงจ้ะ

เอาละ ขอจบลงตรงนี้ พบกันใหม่ตอนใหม่(แต่ไม่รู้จะมีเวลาเขียนเมื่อไร)ครับ