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>
