article.md

การโต้ตอบ: alert, prompt, confirm

เนื่องจากเราจะใช้เบราว์เซอร์เป็นสภาพแวดล้อมในการสาธิต เรามาดูฟังก์ชันสองสามตัวที่ใช้ในการโต้ตอบกับผู้ใช้กัน ได้แก่ alert, prompt และ confirm

alert

เราเคยเห็น alert มาแล้ว มันใช้ในการแสดงข้อความและรอให้ผู้ใช้กดปุ่ม "OK"

ตัวอย่างเช่น:

alert("Hello");

หน้าต่างขนาดเล็กที่แสดงข้อความนี้เรียกว่า modal window คำว่า "modal" หมายความว่าผู้ใช้จะไม่สามารถโต้ตอบกับส่วนอื่นๆ ของหน้าเว็บ กดปุ่มอื่นๆ หรือทำอย่างอื่นได้ จนกว่าจะจัดการกับหน้าต่างนี้เสร็จ ในกรณีนี้คือจนกว่าจะกดปุ่ม "OK"

prompt

ฟังก์ชัน prompt รับอาร์กิวเมนต์สองตัว:

result = prompt(title, [default]);

มันจะแสดง modal window ที่มีข้อความ ช่องให้ผู้ใช้กรอกข้อมูล และปุ่ม OK/Cancel

title : ข้อความที่จะแสดงให้ผู้ใช้เห็น

default : อาร์กิวเมนต์ที่สองซึ่งเป็นตัวเลือก ใช้เป็นค่าเริ่มต้นสำหรับช่องกรอกข้อมูล

```smart header="วงเล็บในไวยากรณ์ [...]" วงเล็บรอบๆ `default` ในไวยากรณ์ด้านบนหมายความว่าพารามิเตอร์นี้เป็นตัวเลือก ไม่จำเป็นต้องใส่ก็ได้

ผู้ใช้สามารถพิมพ์ข้อความลงในช่อง prompt แล้วกดปุ่ม OK จากนั้นเราจะได้ข้อความนั้นใน `result` หรือผู้ใช้อาจยกเลิกการป้อนข้อมูลได้โดยกดปุ่ม Cancel หรือกดปุ่ม `Esc` ซึ่งในกรณีนี้ `result` จะมีค่าเป็น `null`

การเรียกใช้ `prompt` จะคืนค่าเป็นข้อความจากช่องกรอกข้อมูล หรือเป็น `null` หากมีการยกเลิกการป้อนข้อมูล

ตัวอย่างเช่น:

```js run
let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`); // You are 100 years old!

```warn header="ใน IE: ควรระบุ default เสมอ" อาร์กิวเมนต์ที่สองเป็นตัวเลือก แต่หากเราไม่ระบุมัน Internet Explorer จะแทรกข้อความ `"undefined"` ลงในช่อง prompt

ลองรันโค้ดนี้ใน Internet Explorer เพื่อดู:

let test = prompt("Test");

ดังนั้น เพื่อให้ prompt แสดงผลได้ถูกต้องใน IE เราแนะนำให้ระบุอาร์กิวเมนต์ที่สองเสมอ:

let test = prompt("Test", ''); // <-- สำหรับ IE

## confirm

ไวยากรณ์:

```js
result = confirm(question);

ฟังก์ชัน confirm จะแสดง modal window ที่มี question และปุ่มสองปุ่มคือ OK และ Cancel

ผลลัพธ์จะเป็น true หากกดปุ่ม OK และเป็น false หากกดปุ่มอื่น

ตัวอย่างเช่น:

let isBoss = confirm("Are you the boss?");

alert( isBoss ); // true ถ้ากด OK

สรุป

เราได้กล่าวถึงฟังก์ชันเฉพาะของเบราว์เซอร์ 3 ตัวที่ใช้ในการโต้ตอบกับผู้ใช้:

alert : แสดงข้อความ

prompt : แสดงข้อความขอให้ผู้ใช้ป้อนข้อความ คืนค่าเป็นข้อความนั้น หรือคืนค่า null หากกดปุ่ม Cancel หรือ Esc

confirm
: แสดงข้อความและรอให้ผู้ใช้กดปุ่ม "OK" หรือ "Cancel" คืนค่า true สำหรับปุ่ม OK และ false สำหรับปุ่ม Cancel หรือ Esc

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

มีข้อจำกัดสองอย่างที่ใช้กับทุกเมธอดข้างต้น:

1. ตำแหน่งที่แน่นอนของ modal window จะถูกกำหนดโดยเบราว์เซอร์ โดยปกติจะอยู่ตรงกลาง
2. รูปลักษณ์ที่แน่นอนของหน้าต่างก็ขึ้นอยู่กับเบราว์เซอร์เช่นกัน เราไม่สามารถปรับแต่งได้

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