Lv.3 JavaScript Output

JavaScript Output การแสดงผลภาษาจาวาสคริปต์สามารถทำได้ดังนี้

  • เขียนในอิลิเมนต์ HTML โดยใช้ innerHTML
  • เขียนใน HTML Output โดยใช้ document.write()
  • เขียนใน Alert box โดยใช้ alert()
  • เขียนในเว็บเบราว์เซอร์ Console โดยใช้ console.log()

เขียนใน HTML โดยใช้ innerHTML

ในการเข้าถึงอิลิเมนต์ของ HTML นั้น JavaScript สามารถใช้เมธอด document.getElementById(id) ในการเข้าถึงอิลิเมนต์ของ HTML ได้เลย

หลังจากที่เราเข้าถึง id ของ HTML ได้แล้ว ทีนี้ก็ใช้ Property innerHTML แทรกเนื้อหาเข้าไปได้เลย

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | JavaScript Output</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		

	</head>
	<body>
		
		<h1>เขียนใน HTML โดยใช้ innerHTML</h1>
		
		<p id="demo"></p>

		<script>
			document.getElementById("demo").innerHTML = "สวัสดีชาวโลก";
		</script>

	</body>
</html>

เขียนใน HTML Output โดยใช้ document.write()

ดูตัวอย่างน่าจะเข้าใจง่ายกว่า

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | JavaScript Output</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		

	</head>
	<body>
		
		<h1>เขียนใน HTML Output โดยใช้ document.write()</h1>
		
		<script>
			document.write(777 * 999);
		</script>


	</body>
</html>

เขียนใน Alert box โดยใช้ window.alert()

ใช้ Alert box เพื่อแสดงข้อมูล

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | JavaScript Output</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		

	</head>
	<body>
		
		<h1>เขียนใน Alert box โดยใช้ window.alert()</h1>
		
		<script>
			alert(333 + 777);
		</script>


	</body>
</html>

เขียนในเว็บเบราว์เซอร์ Console โดยใช้ console.log()

การใช้ console.log จะไม่แสดงผลผ่านทางหน้าจอนะครับ ต้องเข้าไปดูในส่วนของ Developer tools เอาเอง

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | JavaScript Output</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		

	</head>
	<body>
		
		<h1>เขียนในเว็บเบราว์เซอร์ Console โดยใช้ console.log()</h1>
		
		<script>
			console.log(777 - 123);
		</script>


	</body>
</html>
Console log
Console log

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น

Top