From 01340e5d93d937ecf34feeaf87b6811a8734e234 Mon Sep 17 00:00:00 2001 From: Prasit Tongpradit Date: Sat, 23 Mar 2024 17:58:21 +0700 Subject: [PATCH] Refactor alert, prompt, and confirm functions --- .../06-alert-prompt-confirm/article.md | 68 +++++++++---------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/1-js/02-first-steps/06-alert-prompt-confirm/article.md b/1-js/02-first-steps/06-alert-prompt-confirm/article.md index 59687ffe6..426e5e506 100644 --- a/1-js/02-first-steps/06-alert-prompt-confirm/article.md +++ b/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. รูปลักษณ์ที่แน่นอนของหน้าต่างก็ขึ้นอยู่กับเบราว์เซอร์เช่นกัน เราไม่สามารถปรับแต่งได้ -นั่นคือราคาของความเรียบง่าย มีวิธีอื่นๆ ในการแสดงหน้าต่างที่สวยงามและการโต้ตอบที่หลากหลายกับผู้เข้าชม แต่ถ้าเราไม่สนใจ “ความสวยงาม” มากนัก วิธีการเหล่านี้ก็ใช้งานได้ดี +นั่นคือราคาของความเรียบง่าย มีวิธีอื่นในการแสดงหน้าต่างที่สวยงามและการโต้ตอบกับผู้ใช้ที่ซับซ้อนกว่านี้ แต่หากฟีเจอร์พิเศษไม่ใช่สิ่งสำคัญ เมธอดเหล่านี้ก็ใช้งานได้ดีเช่นกัน \ No newline at end of file