เอาต์พุตจาวาสคริปต์
JavaScript แสดงความเป็นไปได้
JavaScript สามารถ "แสดง" ข้อมูลได้หลายวิธี:
- การเขียนลงในองค์ประกอบ HTML โดยใช้
innerHTML
. - การเขียนลงในเอาต์พุต HTML โดยใช้
document.write()
. - เขียนลงในกล่องแจ้งเตือนโดยใช้
window.alert()
. - เขียนลงในคอนโซลเบราว์เซอร์โดยใช้
console.log()
.
ใช้ innerHTML
ในการเข้าถึงองค์ประกอบ HTML JavaScript สามารถใช้document.getElementById(id)
วิธีการ
แอตทริบิวต์id
กำหนดองค์ประกอบ HTML คุณสมบัติinnerHTML
กำหนดเนื้อหา HTML:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
การเปลี่ยนคุณสมบัติ innerHTML ขององค์ประกอบ HTML เป็นวิธีทั่วไปในการแสดงข้อมูลใน HTML
ใช้ document.write()
เพื่อวัตถุประสงค์ในการทดสอบ สะดวกในการใช้document.write()
:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
การใช้ document.write() หลังจากโหลดเอกสาร HTML จะเป็นการลบ HTML ที่มีอยู่ทั้งหมด :
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
ควรใช้เมธอด document.write() สำหรับการทดสอบเท่านั้น
ใช้ window.alert()
คุณสามารถใช้กล่องแจ้งเตือนเพื่อแสดงข้อมูล:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
คุณสามารถข้ามwindow
คำสำคัญ
ใน JavaScript อ็อบเจ็กต์ window เป็นออบเจ็กต์ขอบเขตส่วนกลาง ซึ่งหมายความว่าตัวแปร คุณสมบัติ และเมธอดเป็นค่าเริ่มต้นของอ็อบเจ็กต์หน้าต่าง นี่ยังหมายความว่าการระบุwindow
คีย์เวิร์ดเป็นทางเลือก:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
ใช้ console.log()
เพื่อจุดประสงค์ในการดีบัก คุณสามารถเรียกใช้console.log()
เมธอดในเบราว์เซอร์เพื่อแสดงข้อมูลได้
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับการดีบักในบทต่อไป
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
พิมพ์จาวาสคริปต์
JavaScript ไม่มีวัตถุการพิมพ์หรือวิธีการพิมพ์
คุณไม่สามารถเข้าถึงอุปกรณ์ส่งออกจาก JavaScript
ข้อยกเว้นเพียงอย่างเดียวคือคุณสามารถเรียกใช้window.print()
เมธอดในเบราว์เซอร์เพื่อพิมพ์เนื้อหาของหน้าต่างปัจจุบัน
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>