ภาพรวมของ JavaScript

จาวาสคริปต์มีฟังก์ชั่น getElementById()  เป็นที่นิยมในการใช้เพื่อเปลี่ยนแปลงเนื้อหา HTML และการแสดงผลต่างๆ ตัวอย่างเช่น 

ตัวอย่างที่ 1 เปลี่ยนเนื้อหา HTML 

<html>
  <body>
    <h2 id="example">JavaScript in Body</h2>


    <script>
    	document.getElementById("example").innerHTML = "Hello JavaScript";
    </script>
  </body>
</html> 

ไฟล์ที่ 1 เปลี่ยนเนื้อหา HTML

อธิบายไฟล์ที่ 1 ใช้ JavaScript ในการเปลี่ยนแปลงเนื้อหาของ element ที่มีไอดีเท่ากับ example

 

ตัวอย่างที่ 2 ซ่อนและแสดง element

<html>
  <body>
    <h2>Hide and Show Element</h2>

    <p id="example">Hello JavaScript</p>
    <button onclick="document.getElementById('example').style.display = 'none'">ซ่อน</button>
    <button onclick="document.getElementById('example').style.display = 'block'">แสดง</button>

  </body>
</html> 

ไฟล์ที่ 2 ซ่อนและแสดงเนื้อหา

 

การแทรก JavaScript มี 2 รูปแบบดังนี้

1.แทรก JavaScript ภายในไฟล์

  • แทรกในส่วน <head> หรือ <body> ก็ได้ (การแทรก javascript ไว้ด้านล่างของ element <body> จะช่วยเพิ่มความเร็วในการแสดงผล เพราะไม่ต้องแปลคำสั่งของจาวาสคริปต์ก่อน)

ตัวอย่างที่ 1.1

<html>
  <body>
    <h2 id="example">Hide and Show Element</h2>

    <p >Hello World</p>

    <script>
     document.getElementById("example").innerHTML = "Hello JavaScript";
    </script>
  </body>
</html> 

ไฟล์ที่ 1.1 ตัวอย่างการแทรกจาวาสคริปต์ภายในไฟล์

 

2.แทรก JavaScript ภายนอกไฟล์

การแทรกภายจาวาสคริปต์จากภายนอกไฟล์นั้น สามารถทำได้ดังนี้

ขั้นที่ 1 สร้างไฟล์ exam-script.js (นามสกุลไฟล์ .js)

document.getElementById("example").innerHTML = "Hello JavaScript";

ไฟล์ที่ 2.1 exam-script.js

 

ขั้นที่ 2 สร้างไฟล์ test.html และแทรกจาวาสคริปต์จากไฟล์ที่ 2.1 exam-script.js

<html>
  <body>
    <h2 id="example">Insert Script</h2>

    <p >Hello World</p>

    <script src="exam-script.js"></script>
  </body>
</html> 

ไฟล์ที่ 2.2 test.html

ไฟล์ที่ 2 บรรทัดที่ 7 <script src=”exam-script.js”></script> เป็นการแทรกสคริปต์จากไฟล์ภายนอก src ใช้ระบุที่อยู่ของไฟล์

ข้อดีของจาวาสคริปต์ภายนอก 

  • ทำให้ไฟล์ HTML และ JavaScript ง่ายต่อการบำรุงรักษา เพราะโค้ดแยกกันคนไฟล์อย่างชัดเจน
  • ไฟล์จาวาสคริปต์ที่ทำการแคช (Cache) ข้อมูลจะช่วยให้สามารถโหลดหน้าเว็บได้เร็วยิ่งขึ้น

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: