ใน JavaScript ต่างจากภาษาอย่าง Java ตรงที่ไม่มีวิธีพิมพ์หรือส่งออกข้อมูล โดยทั่วไปสี่วิธีต่อไปนี้จะใช้ในการส่งออกข้อมูล
window.alert() เพื่อแสดงกล่องคำเตือนconsole.log()document.write()innerHTMLใช้มันด้านล่าง ขอแสดงตัวอย่าง
สร้างไฟล์ HTML ใหม่ จากนั้นใช้ VSCode เพื่อเขียนโค้ดต่อไปนี้
<!DOCTYPE html>
<html>
<หัว>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, Initial-scale=1">
<title>window.alert()</title>
</หัว>
<ร่างกาย>
<p>การแสดงหน้าต่างป๊อปอัป</p>
<script type="text/javascript">
window.alert("นี่คือการทดสอบป๊อปอัป!");
</สคริปต์>
</ร่างกาย>
</html> จากนั้นเปิดไฟล์ด้านบนด้วยเบราว์เซอร์ เมื่อเปิดขึ้น หน้าต่างป๊อปอัปต่อไปนี้จะปรากฏขึ้น หลังจากคลิกตกลง หน้าต่างป๊อปอัปจะปิดลงและเนื้อหาจะปรากฏบนหน้าเว็บ
<!DOCTYPE html>
<html>
<หัว>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, Initial-scale=1">
<title>document.write()</title>
</หัว>
<ร่างกาย>
<p>เขียนเอกสาร HTML</p>
<script type="text/javascript">
document.write(วันที่());
</สคริปต์>
</ร่างกาย>
</html> หลังจากสร้างไฟล์ HTML ใหม่และเขียนเนื้อหาข้างต้นแล้ว เบราว์เซอร์จะเปิดขึ้นและหน้าเว็บจะแสดงเนื้อหาดังต่อไปนี้ คุณจะเห็นว่าการเขียนเวลาปัจจุบันโดยใช้ document.write() สำเร็จ อย่างไรก็ตาม ควรสังเกตว่าหากโหลด document.write() ในเวลาเดียวกันกับเนื้อหาอื่น และก่อนที่จะโหลดเนื้อหา ก็สามารถแสดงพร้อมกับเนื้อหาอื่นได้ อย่างไรก็ตาม หากดำเนินการ document.write() หลังจากโหลดเนื้อหาของหน้าแล้ว เนื้อหาที่โหลดก่อนหน้านี้ทั้งหมดจะถูกเขียนทับโดยเนื้อหาที่เขียน
<!DOCTYPE html>
<html>
<หัว>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, Initial-scale=1">
<title>document.write()</title>
</หัว>
<ร่างกาย>
<p>เขียนเอกสาร HTML</p>
<button onclick="showDate()">แสดงเวลา</button>
<script type="text/javascript">
ฟังก์ชั่น showDate() {
document.write(วันที่());
-
</สคริปต์>
</ร่างกาย>
</html> ต่อไปนี้เป็นการเปรียบเทียบก่อนและหลังการดำเนินการ document.write() หลังจากโหลดเพจแล้ว ซึ่งบ่งชี้ว่าการเรียก document.write() หลังจากที่โหลดเพจแล้ว จะเขียนทับเนื้อหาของเพจก่อนหน้า
ก่อนและหลัง
JavaScript หากคุณต้องการเข้าถึงองค์ประกอบ HTML บางอย่าง คุณสามารถใช้เมธอด document.getElementById(id) จากนั้นคุณสามารถใช้ innerHTML เพื่อรับหรือแทรกเนื้อหาองค์ประกอบได้
<!DOCTYPE html>
<html>
<หัว>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, Initial-scale=1">
<title>innerHTML</title>
</หัว>
<ร่างกาย>
<p id="inner">จัดการองค์ประกอบ HTML</p>
<button onclick="changeContext()">คลิกเพื่อแก้ไขเนื้อหาด้านบน</button>
<script type="text/javascript">
ฟังก์ชั่น changeContext() {
document.getElementById("inner").innerHTML = "เนื้อหาที่ถูกแก้ไข";
-
</สคริปต์>
</ร่างกาย>
</html> ก่อนแก้ไข หลังแก้ไข
หากต้องการใช้เมธอด console.log() โดยทั่วไปแล้ว เบราว์เซอร์ของเราจำเป็นต้องรองรับการแก้ไขข้อบกพร่อง จากนั้นใช้ปุ่มลัด F12 เพื่อเปิดโหมดการดีบักและสลับไปที่เมนู Console ในหน้าต่างการดีบัก เนื่องจากฉันใช้ Edge ที่นี่ คอนโซลจึงแสดงขึ้น ตัวเลือกเบราว์เซอร์นี้จะขึ้นอยู่กับการตั้งค่าของคุณเป็นหลัก แต่โดยทั่วไปจะแนะนำให้ใช้ Chrome
<!DOCTYPE html>
<html>
<หัว>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, Initial-scale=1">
<title>console.log</title>
</หัว>
<ร่างกาย>
<p>ดูในโหมดแก้ไขข้อบกพร่องของเบราว์เซอร์</p>
<script type="text/javascript">
วาร์ num1 = 11;
วาร์ num2 = 10;
console.log(num1 + num2);
</สคริปต์>
</ร่างกาย>
</html>
ข้างต้นเป็นเรื่องเกี่ยวกับเอาต์พุตใน JavaScript แม้ว่าจะไม่มีวิธี System.out.println() สำหรับการพิมพ์และเอาต์พุตเช่น Java แต่วิธีการทั้งสี่ข้างต้นสามารถตอบสนองความต้องการของการพัฒนารายวันได้