การแสดงผลแบบอินเตอร์แอคทีฟ (Interactive Display)

25.06.2023 — javascript — 1 min read

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

ตัวอย่างโค้ด JavaScript การแสดงผลแบบอินเตอร์แอคทีฟ:

// สร้างฟังก์ชันสำหรับแสดงข้อความบนหน้าเว็บ
function displayMessage() {
 var message = prompt("กรุณากรอกข้อความที่ต้องการแสดง");
 var output = document.getElementById("output");
 output.textContent = message;
}

// กำหนดค่าเริ่มต้นให้ปุ่มกับฟังก์ชันการแสดงผล
var button = document.getElementById("displayButton");
button.addEventListener("click", displayMessage);`

ในตัวอย่างข้างต้น เราสร้างฟังก์ชัน displayMessage เพื่อให้ผู้ใช้กรอกข้อความที่ต้องการแสดงผลผ่านกล่องข้อความ prompt จากนั้นเราใช้ document.getElementById เพื่อเลือกตัวแสดงผลที่มี id เป็น "output" และกำหนดข้อความที่ได้รับจากผู้ใช้ให้กับ textContent ของตัวแสดงผลนั้น

ในการกำหนดการทำงานของฟังก์ชัน displayMessage เราใช้ addEventListener เพื่อเชื่อมต่อฟังก์ชันกับปุ่มที่มี id เป็น "displayButton" โดยฟังก์ชันจะถูกเรียกขึ้นมาเมื่อผู้ใช้คลิกที่ปุ่มนั้น

ดังนั้น เมื่อผู้ใช้คลิกที่ปุ่ม "displayButton" จะมีกล่องข้อความแสดงขึ้นมาให้กรอกข้อความ และข้อความที่ผู้ใช้กรอกจะปรากฏอยู่ในตัวแสดงผลที่มี id เป็น "output" บนหน้าเว็บ

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

html`<button id="displayButton">แสดงผล</button>
<div id="output"></div>

<script>
 // โค้ด JavaScript ที่ได้แสดงไว้ข้างต้น
</script>`

โดยเพิ่มปุ่ม "แสดงผล" และองค์ประกอบ <div> ที่มี id เป็น "output" เพื่อแสดงผลข้อความที่ผู้ใช้กรอก

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