Interaction: alert, prompt, confirm

1-js/02-first-steps/06-alert-prompt-confirm/article.md

@@ -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 100 years 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
 
@@ -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. รูปลักษณ์ที่แน่นอนของหน้าต่างก็ขึ้นอยู่กับเบราว์เซอร์เช่นกัน เราไม่สามารถปรับแต่งได้
 
-นั่นคือราคาของความเรียบง่าย มีวิธีอื่นๆ ในการแสดงหน้าต่างที่สวยงามและการโต้ตอบที่หลากหลายกับผู้เข้าชม แต่ถ้าเราไม่สนใจ “ความสวยงาม” มากนัก วิธีการเหล่านี้ก็ใช้งานได้ดี
+นั่นคือราคาของความเรียบง่าย มีวิธีอื่นในการแสดงหน้าต่างที่สวยงามและการโต้ตอบกับผู้ใช้ที่ซับซ้อนกว่านี้ แต่หากฟีเจอร์พิเศษไม่ใช่สิ่งสำคัญ เมธอดเหล่านี้ก็ใช้งานได้ดีเช่นกัน