@@ -1,66 +1,66 @@ ## การโต้ตอบ: alert, prompt และ confirm # การโต้ตอบ: alert, prompt, confirm เนื่องจากเราจะใช้เบราว์เซอร์เป็นสภาพแวดล้อมในการสาธิตของเรา มาดูฟังก์ชันสองสามอย่างเพื่อโต้ตอบกับผู้เข้าชม: `alert`, `prompt` และ `confirm`เนื่องจากเราจะใช้เบราว์เซอร์เป็นสภาพแวดล้อมในการสาธิต เรามาดูฟังก์ชันสองสามตัวที่ใช้ในการโต้ตอบกับผู้ใช้กัน ได้แก่ `alert`, `prompt` และ `confirm`## alert ฟังก์ชันนี้เราเคยเห็นกันมาแล้ว มันแสดงข้อความและรอผู้เข้าชมกด "OK"เราเคยเห็น `alert` มาแล้ว มันใช้ในการแสดงข้อความและรอให้ผู้ใช้กดปุ่ม "OK"ตัวอย่างเช่น: ```js run alert("hello "); alert("Hello "); ``` หน้าต่างเล็กๆ ที่มีข้อความเรียกว่า *โมดอลวินโดว์* คำว่า "โมดอล" หมายความว่าผู้เข้าชมไม่สามารถโต้ตอบกับส่วนอื่นของหน้าเว็บ กดปุ่มอื่น ฯลฯ ได้เลยจนกว่าพวกเขาจะจัดการกับหน้าต่างนี้ ในกรณีนี้ -- จนกว่าพวกเขาจะกด "OK"หน้าต่างขนาดเล็กที่แสดงข้อความนี้เรียกว่า *modal window* คำว่า "modal" หมายความว่าผู้ใช้จะไม่สามารถโต้ตอบกับส่วนอื่นๆ ของหน้าเว็บ กดปุ่มอื่นๆ หรือทำอย่างอื่นได้ จนกว่าจะจัดการกับหน้าต่างนี้เสร็จ ในกรณีนี้คือจนกว่าจะกดปุ่ม "OK"## prompt ฟังก์ชัน `prompt`ยอมรับอาร์กิวเมนต์สองอย่าง : ฟังก์ชัน `prompt`รับอาร์กิวเมนต์สองตัว : ```js no-beautify result = prompt(title, [default]); ``` มันแสดงโมดอลวินโดว์ที่มีข้อความพร้อมช่องป้อนข้อความสำหรับผู้เข้าชม และปุ่ม OK/Cancelมันจะแสดง modal window ที่มีข้อความ ช่องให้ผู้ใช้กรอกข้อมูล และปุ่ม OK/Cancel`title` :ข้อความที่จะแสดงให้ผู้เข้าชม :ข้อความที่จะแสดงให้ผู้ใช้เห็น `default` :พารามิเตอร์ที่สองเป็นทางเลือก (จะใส่หรือไม่ใส่ก็ได้) เป็นค่าเริ่มต้นสำหรับช่องป้อนข้อมูล :อาร์กิวเมนต์ที่สองซึ่งเป็นตัวเลือก ใช้เป็นค่าเริ่มต้นสำหรับช่องกรอกข้อมูล ```smart header="เครื่องหมายวงเล็บเหลี่ยมในไวยากรณ์ `[...]`" เครื่องหมายวงเล็บเหลี่ยมรอบ `default`ในไวยากรณ์ด้านบนแสดงว่าพารามิเตอร์นั้นเป็นทางเลือก (จะใส่หรือไม่ใส่ก็ได้) ไม่ใช่ข้อบังคับ ```smart header="วงเล็บในไวยากรณ์ `[...]`" วงเล็บรอบๆ `default`ในไวยากรณ์ด้านบนหมายความว่าพารามิเตอร์นี้เป็นตัวเลือก ไม่จำเป็นต้องใส่ก็ได้ ``` ผู้เข้าชมสามารถพิมพ์ข้อความลงในช่องป้อนข้อมูลของ promptและกด OKจากนั้นเราจะได้รับข้อความนั้นใน `result`หรือพวกเขาสามารถยกเลิกการป้อนข้อมูลโดยกด Cancel หรือกดปุ่ม `key: Esc`จากนั้นเราจะได้รับ `null` เป็น `result `ผู้ใช้สามารถพิมพ์ข้อความลงในช่อง promptแล้วกดปุ่ม OKจากนั้นเราจะได้ข้อความนั้นใน `result`หรือผู้ใช้อาจยกเลิกการป้อนข้อมูลได้โดยกดปุ่ม Cancel หรือกดปุ่ม `Esc`ซึ่งในกรณีนี้ `result` จะมีค่าเป็น `null `การเรียกใช้ `prompt`จะส่งคืนข้อความจากช่องป้อนข้อมูลหรือ `null`หากยกเลิกการป้อนข้อมูล การเรียกใช้ `prompt`จะคืนค่าเป็นข้อความจากช่องกรอกข้อมูล หรือเป็น `null`หากมีการยกเลิกการป้อนข้อมูล ตัวอย่างเช่น: ```js run let age = prompt('คุณอายุเท่าไหร่ ?', 100); let age = prompt('How old are you ?', 100); alert(`คุณอายุ ${age}ปี !`); //คุณอายุ 100ปี ! alert(`You are ${age}years old !`); //You are 100years old ! ``` ```` warn header="ใน IE:แนะนำให้ใส่ `default` เสมอ" พารามิเตอร์ที่สองเป็นทางเลือก แต่ถ้าเราไม่ใส่ Internet Explorerจะใส่ข้อความ `"undefined"`ลงใน prompt```warn header="ใน IE:ควรระบุ `default` เสมอ" อาร์กิวเมนต์ที่สองเป็นตัวเลือก แต่หากเราไม่ระบุมัน Internet Explorerจะแทรกข้อความ `"undefined"`ลงในช่อง promptรันโค้ดนี้ใน Internet Explorer เพื่อดู:ลองรันโค้ดนี้ใน Internet Explorer เพื่อดู:```js run let test = prompt("Test"); ``` ดังนั้น เพื่อให้ prompt แสดงผลได้ถูกต้องใน IE เราแนะนำให้ระบุอาร์กิวเมนต์ที่สองเสมอ: ดังนั้นเพื่อให้ prompts ไม่มีข้อความว่า `undefined` ลงในช่องป้อนข้อมูล สำหรับ IE แล้วเราแนะนำให้ให้พารามิเตอร์ที่สองเสมอ: js run ```js run let test = prompt("Test", ''); // <-- สำหรับ IE ``` ```` ``` ## confirm Expand All @@ -70,36 +70,36 @@ let test = prompt("Test", ''); // <-- สำหรับ IE result = confirm(question); ``` ฟังก์ชัน `confirm`แสดงโมดอลวินโดว์พร้อม `question`และปุ่มสองปุ่ม: OK และ Cancel ฟังก์ชัน `confirm`จะแสดง modal window ที่มี `question`และปุ่มสองปุ่มคือ OK และ Cancel ผลลัพธ์คือ `true`หากกด OKและ `false`หากกด Cancel/`key:Esc` ผลลัพธ์จะเป็น `true`หากกดปุ่ม OKและเป็น `false`หากกดปุ่มอื่น ตัวอย่างเช่น: ```js run let isBoss = confirm("คุณเป็นหัวหน้าหรือไม่ "); let isBoss = confirm("Are you the boss? "); alert( isBoss ); // true ถ้ากด OK ``` ## สรุป เราได้กล่าวถึงฟังก์ชันเฉพาะของเบราว์เซอร์ 3ฟังก์ชันเพื่อโต้ตอบกับผู้เข้าชม : เราได้กล่าวถึงฟังก์ชันเฉพาะของเบราว์เซอร์ 3ตัวที่ใช้ในการโต้ตอบกับผู้ใช้ : `alert` : แสดงข้อความ `prompt` : แสดงข้อความขอให้ผู้ใช้ป้อนข้อความมันจะส่งคืนข้อความหรือ `null` หากกดปุ่ม Cancel หรือ `key: Esc` : แสดงข้อความขอให้ผู้ใช้ป้อนข้อความคืนค่าเป็นข้อความนั้น หรือคืนค่า `null` หากกดปุ่ม Cancel หรือ `Esc` `confirm` :แสดงข้อความและรอให้ผู้ใช้กด "OK" หรือ "Cancel"มันจะส่งคืน `true`สำหรับ OK และ `false`สำหรับ Cancel/`key: Esc` `confirm` :แสดงข้อความและรอให้ผู้ใช้กดปุ่ม "OK" หรือ "Cancel"คืนค่า `true`สำหรับปุ่ม OK และ `false`สำหรับปุ่ม Cancel หรือ ` Esc` วิธีการทั้งหมดเหล่านี้เป็นโมดอล: โมดอลจะหยุดการทำงานของสคริปต์และไม่อนุญาตให้ผู้เข้าชมโต้ตอบกับส่วนอื่นของหน้าจนกว่าหน้าต่างจะถูกปิด เมธอดทั้งหมดนี้เป็น modal: พวกมันจะหยุดการทำงานของสคริปต์และไม่อนุญาตให้ผู้ใช้โต้ตอบกับส่วนที่เหลือของหน้าจนกว่าจะปิดหน้าต่างนั้นไป มีข้อจำกัดสองข้อที่แบ่งปันโดยวิธีการทั้งหมดข้างต้น :มีข้อจำกัดสองอย่างที่ใช้กับทุกเมธอดข้างต้น :1.ตำแหน่งที่แน่นอนของโมดอลวินโดว์ถูกกำหนดโดยเบราว์เซอร์ โดยปกติจะอยู่ตรงกลาง 2. รูปลักษณ์ที่แน่นอนของหน้าต่างก็ขึ้นอยู่กับเบราว์เซอร์เช่นกันเราไม่สามารถปรับเปลี่ยนได้ 1.ตำแหน่งที่แน่นอนของ modal window จะถูกกำหนดโดยเบราว์เซอร์ โดยปกติจะอยู่ตรงกลาง 2. รูปลักษณ์ที่แน่นอนของหน้าต่างก็ขึ้นอยู่กับเบราว์เซอร์เช่นกันเราไม่สามารถปรับแต่งได้ นั่นคือราคาของความเรียบง่ายมีวิธีอื่นๆ ในการแสดงหน้าต่างที่สวยงามและการโต้ตอบที่หลากหลายกับผู้เข้าชม แต่ถ้าเราไม่สนใจ “ความสวยงาม” มากนัก วิธีการเหล่านี้ก็ใช้งานได้ดี นั่นคือราคาของความเรียบง่ายมีวิธีอื่นในการแสดงหน้าต่างที่สวยงามและการโต้ตอบกับผู้ใช้ที่ซับซ้อนกว่านี้ แต่หากฟีเจอร์พิเศษไม่ใช่สิ่งสำคัญ เมธอดเหล่านี้ก็ใช้งานได้ดีเช่นกัน