การแสดงผลข้อมูลด้วย JavaScript

เราสามารถใช้ JavaScript แสดงผลข้อมูลได้หลากหลายวิธี ดังนี้

แสดงข้อมูลในเอลิเมนต์ของ HTML โดยใช้ innerHTML
แสดงเนื้อหาใน HTML ด้วย document.write()
แสดงข้อมูลทางกล่องข้อความแจ้งเตือนด้วย window.alert()
แสดงข้อมูลไปที่คอนโซลของเบราเซอร์ด้วย console.log()

การใช้งาน innerHTML

เราสามารถใช้เมธอด document.getElementById(id) เพื่อเข้าถึงเอลิเมนต์ของ HTML โดยการอ้างถึงแอททริบิวต์ id ดังนี้

<body>    
    <p id="content"></p>    
    <script>
        document.getElementById("content").innerHTML = "www.dcrub.com";
    </script>    
</body>

การใช้งานเมธอด document.write()

เราสามารถแสดงข้อมูลในเว็บเพจ HTML โดยใช้เมธอด document.write() ดังนี้

<body>    
    <p id="content"></p>    
    <script>
        document.write("www.dcrub.com");
    </script>    
</body>

หมายเหตุ : การใช้เมธอด document.write() หลังจากโหลดเพจเสร็จแล้ว จะเป็นการลบเนื้อหาทั้งหมดใน HTML แล้วแสดงค่าใหม่ออกมาแทน

แจ้งเตือนด้วย window.alert()

เราสามารถแสดงข้อความออกทางกล่องแจ้งเตือนด้วย window.alert() ดังนี้

<script>
	window.alert("ข้อความแจ้งเตือน");
</script>

การใช้งานเมธอด console.log()

เราสามารถตรวจสอบความถูกต้องของข้อมูลโดยการแสดงข้อมูลออกทางคอนโซลของเว็บเบราเซอร์ โดยการใช้เมธอด console.log() ดังนี้

<script>
	console.log(9 * 5);
</script>

การใช้เมธอด `window.print()`

เราสามารถใช้เมธอด window.print() เพื่อสังพิมพ์หน้าเว็บเพจปัจจุบันได้ ดังนี้

<button onclick="window.print()">พิมพ์หน้านี้</button>

การแสดงผลข้อมูลด้วย JavaScript