บทที่ 3 JavaScript Output


 1.คำสั่งdocument.getElementById สำหรับการเข้าถึง Element Id
  ในการใช้ภาษา JavaScript ร่วมกับ HTML นั้น จำเป็นต้องใช้คำสั่ง document.getElementById(id)  ซึ่งก็คือคำสั่งสำหรับการเข้าถึง Element Id ที่ต้องการใน Form HTML
   ประโยชน์ของ document.getElementById
   1. มีไว้สำหรับเข้าถึง Element Id ต่าง ๆ ใน Form ของ HTML ใน Attribue Id
   2. ใช้สำหรับการจัดการข้อมูลต่าง ๆ ของ Element Object ใน HTML Form
   3. เป็นตัวแทนการเข้าถึง method ต่าง ๆ ของ Element Object เช่น value, focus เป็นต้น
ตัวอย่างเช่น

<html>
<body>

<h1 id="demo">My First JavaScript</h1>

<script>
document.getElementById("demo").innerHTML="Hello Nerd.";
</script>

</body>
</html>   

ผลลัพธ์คือ

    จะเห็นว่าคำสั่ง document.getElementById(id) นั้นควบคุมการแสดงผลของ แท็ก <h1> โดยให้แสดงผลตามที่ "id" กำหนด ดังตัวอย่างนี้คือ ระบุ "id" ให้แสดงข้อความ Hello Nerd.  บนแท็ก <h1> แต่ถ้าหากเราไม่ได้ใช้คำสั่ง document.getElementById(id) หรือระบุค่า "id" ไม่ถูกต้องล่ะก็ แท็ก <h1> ก็จะแสดงข้อความในแท็กตามแบบปกติ นั้นคือข้อความ My First JavaScript

 2.คำสั่ง document.write
  คือ คำสั่งสำหรับการพิมพ์ข้อความ หรือข้อมูลต่าง ๆ บนเอกสารหน้าเว็บไซต์ (Document) หรือ บน Elements ต่าง ๆ ตามที่ต้องการด้วยภาษา Javascript ซึ่งจะมีลักษณเหมือนกัยการพิมพ์ข้อความบนเอกสาร html ทั่วไป  (อ่านเพิ่มเติมที่ บทที่ 6 HTML Paragraphs การกำหนดพารากราฟ โดยใช้ tag)
ตัวอย่างเช่น

<html>
<body>

<script>
document.write("<p>My First JavaScript</p>");
</script>

</body>
</html>

 

ผลลัพธ์คือ


คลิกเพื่อดู demo file javascript
(ตัวอย่างที่1)
คลิกเพื่อดู demo file javascript (ตัวอย่างที่2)

หัวเรื่อง
javascript3
หมวดหมู่
Javascript, Javascript
ฮิต
53985
ผู้สร้างเอกสาร
วันที่สร้างเอกสาร
2016-06-03 19:32:50

javascript3.zip

ประเภทไฟล์ zip

ขนาดไฟล์ 482 bytes

ผู้อัพโหลดไฟล์

วันที่อัพโหลด 2016-06-03 12:31:46


กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การทำ natural language processing ด้วยภาษา python
โดย wightfall พ 24 เม.ย. 2024 12:54 pm บอร์ด Python Knowledge
0
6
พ 24 เม.ย. 2024 12:54 pm โดย wightfall View Topic การทำ natural language processing ด้วยภาษา python
การเขียนโปรแกรมเชิงวัตถุด้วยภาษา python
โดย wightfall อ 23 เม.ย. 2024 4:13 pm บอร์ด Python Knowledge
0
25
อ 23 เม.ย. 2024 4:13 pm โดย wightfall View Topic การเขียนโปรแกรมเชิงวัตถุด้วยภาษา python
แนะนำการเดินทางและสถานที่ท่องเที่ยวในจังหวัดตรังและการเดินทางไปกรุงเทพ
โดย wightfall จ 22 เม.ย. 2024 3:41 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
40
จ 22 เม.ย. 2024 3:41 pm โดย wightfall View Topic แนะนำการเดินทางและสถานที่ท่องเที่ยวในจังหวัดตรังและการเดินทางไปกรุงเทพ
ติดตั้ง ESXi ใหม่ จำเป็นต้อง Format Harddisk ก่อนติดตั้งไหมครับ
โดย จิ๊กโก๋ ส 20 เม.ย. 2024 2:29 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
3
161
อ 23 เม.ย. 2024 2:24 pm โดย mindphp View Topic ติดตั้ง ESXi ใหม่ จำเป็นต้อง Format Harddisk ก่อนติดตั้งไหมครับ
แจ้งปัญหาโพสบทความลงในเว็บบอร์ดส่วนตัวไม่ได้
โดย internTk21 ศ 19 เม.ย. 2024 11:56 am บอร์ด MindPHP News & Feedback
1
54
ศ 19 เม.ย. 2024 12:15 pm โดย internTk21 View Topic แจ้งปัญหาโพสบทความลงในเว็บบอร์ดส่วนตัวไม่ได้
สอบถาม Google Structure ที่เหมาะกับคอร์สเรียนควรใช้แบบไหนดีค่ะ
โดย eange08 ศ 19 เม.ย. 2024 9:56 am บอร์ด Programming - PHP
1
101
ศ 19 เม.ย. 2024 10:28 am โดย mindphp View Topic สอบถาม Google Structure ที่เหมาะกับคอร์สเรียนควรใช้แบบไหนดีค่ะ
คำสั่งรวมไฟล์ และ บีบอัดในคำสั่งเดียว tar, zip
โดย mindphp พ 17 เม.ย. 2024 7:42 pm บอร์ด Linux - Web Server
0
136
พ 17 เม.ย. 2024 7:42 pm โดย mindphp View Topic คำสั่งรวมไฟล์ และ บีบอัดในคำสั่งเดียว  tar, zip
เช็คขนาดพื้นที่ฐานข้อมูล แต่ละก้อน แต่ละฐานข้อมูลว่าใช้พื้นที่ไปเท่าไหร่ ด้วย Comamnd Line
โดย mindphp จ 15 เม.ย. 2024 11:10 pm บอร์ด PostgreSQL
1
307
จ 15 เม.ย. 2024 11:14 pm โดย mindphp View Topic เช็คขนาดพื้นที่ฐานข้อมูล แต่ละก้อน แต่ละฐานข้อมูลว่าใช้พื้นที่ไปเท่าไหร่ ด้วย Comamnd Line