การใช้ HTML ร่วมกับ JavaScript เบื้องต้น

ในบทเรียนก่อนหน้านี้ เราได้เรียนรู้วิธีการใช้ CSS เพื่อตกแต่งหน้าเว็บของเราให้สวยงามและน่าดึงดูดยิ่งขึ้น แต่หากเราต้องการเพิ่มลูกเล่นและความสามารถในการตอบสนองต่อผู้ใช้งาน (Interactivity) ให้กับเว็บไซต์ของเรา เราจำเป็นต้องพึ่งพาภาษา JavaScript

JavaScript เป็นภาษาโปรแกรมที่ทำงานบนฝั่งไคลเอ็นต์ (Client-side scripting) ซึ่งหมายความว่าโค้ด JavaScript จะถูกประมวลผลโดยเว็บเบราว์เซอร์ของผู้ใช้งาน ทำให้เราสามารถสร้างองค์ประกอบที่เปลี่ยนแปลงได้แบบไดนามิก (Dynamic elements) เช่น การแสดงผลข้อมูลที่เปลี่ยนแปลงตามการกระทำของผู้ใช้, การตรวจสอบความถูกต้องของฟอร์ม, หรือการสร้างแอนิเมชั่น

การเพิ่ม JavaScript ใน HTML

มี 3 วิธีหลักๆ ในการเพิ่มโค้ด JavaScript ลงในไฟล์ HTML ของเรา:

Inline JavaScript: การเขียนโค้ด JavaScript ลงใน attribute ของ HTML tag โดยตรง (ไม่แนะนำให้ใช้ในระยะยาว)
Internal JavaScript: การเขียนโค้ด JavaScript ภายใน tag <script> ในส่วน <head> หรือ <body> ของไฟล์ HTML
External JavaScript: การเขียนโค้ด JavaScript ในไฟล์ .js แยกต่างหาก และทำการลิงก์ไฟล์นั้นเข้ามาในไฟล์ HTML

Inline JavaScript

วิธีนี้เป็นการเขียนโค้ด JavaScript ลงใน attribute ของ HTML tag โดยตรง มักใช้สำหรับเหตุการณ์ง่ายๆ ที่ต้องการตอบสนองต่อผู้ใช้งานทันที

<button onclick="alert('สวัสดีชาวโลก!');">คลิกฉัน</button>

เมื่อผู้ใช้คลิกปุ่ม "คลิกฉัน" ข้อความ "สวัสดีชาวโลก!" จะปรากฏขึ้นในรูปแบบของ alert box

ข้อเสีย: Inline JavaScript ทำให้โค้ด HTML ของเราดูรกและยากต่อการบำรุงรักษา นอกจากนี้ยังเป็นการยากที่จะนำโค้ด JavaScript ไปใช้ซ้ำในหลายๆ ที่ ดังนั้นจึงไม่แนะนำให้ใช้วิธีนี้ในระยะยาว

Internal JavaScript

วิธีนี้เป็นการเขียนโค้ด JavaScript ภายใน tag <script> ในส่วน <head> หรือ <body> ของไฟล์ HTML

<!DOCTYPE html>
<html>
<head>
  <title>Internal JavaScript</title>
  <script>
    function showMessage() {
      alert('สวัสดีชาวโลก!');
    }
  </script>
</head>
<body>
  <button onclick="showMessage()">คลิกฉัน</button>
</body>
</html>

ในตัวอย่างนี้ เราได้กำหนดฟังก์ชัน showMessage() ภายใน tag <script> ซึ่งจะแสดง alert box เมื่อถูกเรียกใช้ จากนั้นเราได้เรียกใช้ฟังก์ชันนี้เมื่อผู้ใช้คลิกปุ่ม "คลิกฉัน"

ข้อดี: Internal JavaScript ช่วยให้เราสามารถแยกโค้ด JavaScript ออกจากเนื้อหา HTML ได้บ้าง ทำให้โค้ดดูเป็นระเบียบมากขึ้น

ข้อเสีย: Internal JavaScript ยังคงทำให้ไฟล์ HTML ของเรามีขนาดใหญ่ขึ้น และยากต่อการนำโค้ด JavaScript ไปใช้ซ้ำในหลายๆ หน้า ดังนั้นจึงยังไม่ใช่วิธีที่ดีที่สุด

External JavaScript

วิธีนี้เป็นการเขียนโค้ด JavaScript ในไฟล์ .js แยกต่างหาก และทำการลิงก์ไฟล์นั้นเข้ามาในไฟล์ HTML โดยใช้ tag <script> พร้อมทั้งระบุ attribute src เพื่อชี้ไปยังไฟล์ .js นั้น

ตัวอย่างไฟล์ script.js:

function showMessage() {
  alert('สวัสดีชาวโลก!');
}

ตัวอย่างไฟล์ index.html:

<!DOCTYPE html>
<html>
<head>
  <title>External JavaScript</title>
</head>
<body>
  <button onclick="showMessage()">คลิกฉัน</button>
  <script src="script.js"></script>
</body>
</html>

ในตัวอย่างนี้ เราได้สร้างไฟล์ script.js ที่มีฟังก์ชัน showMessage() และทำการลิงก์ไฟล์นี้เข้ามาในไฟล์ index.html โดยใช้ tag <script> พร้อมทั้งระบุ attribute src="script.js"

ข้อดี: External JavaScript เป็นวิธีที่ดีที่สุดในการจัดการโค้ด JavaScript เนื่องจากช่วยให้เราสามารถแยกโค้ด JavaScript ออกจากเนื้อหา HTML ได้อย่างสมบูรณ์ ทำให้โค้ดดูเป็นระเบียบมากขึ้น, ง่ายต่อการบำรุงรักษา, และสามารถนำโค้ด JavaScript ไปใช้ซ้ำในหลายๆ หน้าได้

คำแนะนำ: ควรวาง tag <script> ที่ลิงก์ไปยังไฟล์ .js ไว้ที่ส่วนท้ายของ <body> tag เพื่อให้แน่ใจว่า HTML content ทั้งหมดถูกโหลดก่อนที่ JavaScript จะเริ่มทำงาน ซึ่งจะช่วยปรับปรุงประสิทธิภาพของเว็บไซต์

การใช้ Event Listeners

Event listeners เป็นกลไกที่ช่วยให้เราสามารถตรวจจับเหตุการณ์ต่างๆ ที่เกิดขึ้นบนหน้าเว็บ เช่น การคลิก, การเลื่อนเมาส์, การกดแป้นพิมพ์, และอื่นๆ จากนั้นเราสามารถกำหนดให้โค้ด JavaScript ทำงานเมื่อเกิดเหตุการณ์เหล่านั้น

มีหลายวิธีในการเพิ่ม event listeners ใน JavaScript:

Inline event handlers (ไม่แนะนำ): การใช้ attribute onclick, onmouseover, onkeydown, และอื่นๆ ใน HTML tag โดยตรง (เหมือนกับ Inline JavaScript)
Using the addEventListener() method: วิธีที่แนะนำในการเพิ่ม event listeners ใน JavaScript

Using the `addEventListener()` method

วิธีนี้เป็นวิธีที่แนะนำในการเพิ่ม event listeners ใน JavaScript เนื่องจากมีความยืดหยุ่นและง่ายต่อการจัดการมากกว่า

<!DOCTYPE html>
<html>
<head>
  <title>Event Listeners</title>
</head>
<body>
  <button id="myButton">คลิกฉัน</button>
  <script>
    const button = document.getElementById('myButton');

    button.addEventListener('click', function() {
      alert('ปุ่มถูกคลิก!');
    });
  </script>
</body>
</html>

ในตัวอย่างนี้ เราได้ใช้ document.getElementById('myButton') เพื่อเลือก HTML element ที่มี id เป็น "myButton" (ซึ่งก็คือปุ่ม "คลิกฉัน") จากนั้นเราได้ใช้ addEventListener('click', function() { ... }) เพื่อเพิ่ม event listener ที่จะทำงานเมื่อปุ่มถูกคลิก

addEventListener() รับพารามิเตอร์ 2 ตัว:

event: ชื่อของเหตุการณ์ที่เราต้องการตรวจจับ (เช่น 'click', 'mouseover', 'keydown')
listener: ฟังก์ชันที่จะถูกเรียกใช้เมื่อเกิดเหตุการณ์นั้น

การเปลี่ยนแปลงเนื้อหา HTML ด้วย JavaScript

JavaScript ช่วยให้เราสามารถเปลี่ยนแปลงเนื้อหา HTML ได้แบบไดนามิก ซึ่งหมายความว่าเราสามารถเพิ่ม, แก้ไข, หรือลบ HTML elements และ attribute ได้โดยไม่ต้องโหลดหน้าเว็บใหม่

มีหลายวิธีในการเปลี่ยนแปลงเนื้อหา HTML ด้วย JavaScript:

innerHTML: ใช้สำหรับแก้ไข HTML content ภายใน element
textContent: ใช้สำหรับแก้ไข text content ภายใน element
setAttribute(): ใช้สำหรับแก้ไข attribute ของ element
createElement(), appendChild(), removeChild(): ใช้สำหรับสร้าง, เพิ่ม, และลบ HTML elements

`innerHTML`

innerHTML property ใช้สำหรับแก้ไข HTML content ภายใน element

<!DOCTYPE html>
<html>
<head>
  <title>innerHTML</title>
</head>
<body>
  <div id="myDiv">
    <p>ข้อความเริ่มต้น</p>
  </div>
  <button id="changeButton">เปลี่ยนข้อความ</button>
  <script>
    const div = document.getElementById('myDiv');
    const button = document.getElementById('changeButton');

    button.addEventListener('click', function() {
      div.innerHTML = '<h1>ข้อความใหม่!</h1>';
    });
  </script>
</body>
</html>

ในตัวอย่างนี้ เมื่อผู้ใช้คลิกปุ่ม "เปลี่ยนข้อความ" HTML content ภายใน <div> จะถูกแทนที่ด้วย <h1>ข้อความใหม่!</h1>

`textContent`

textContent property ใช้สำหรับแก้ไข text content ภายใน element

<!DOCTYPE html>
<html>
<head>
  <title>textContent</title>
</head>
<body>
  <p id="myParagraph">ข้อความเริ่มต้น</p>
  <button id="changeButton">เปลี่ยนข้อความ</button>
  <script>
    const paragraph = document.getElementById('myParagraph');
    const button = document.getElementById('changeButton');

    button.addEventListener('click', function() {
      paragraph.textContent = 'ข้อความใหม่!';
    });
  </script>
</body>
</html>

ในตัวอย่างนี้ เมื่อผู้ใช้คลิกปุ่ม "เปลี่ยนข้อความ" text content ภายใน <p> จะถูกแทนที่ด้วย "ข้อความใหม่!"

`setAttribute()`

setAttribute() method ใช้สำหรับแก้ไข attribute ของ element

<!DOCTYPE html>
<html>
<head>
  <title>setAttribute()</title>
</head>
<body>
  <img id="myImage" src="image1.jpg" alt="รูปภาพ 1">
  <button id="changeButton">เปลี่ยนรูปภาพ</button>
  <script>
    const image = document.getElementById('myImage');
    const button = document.getElementById('changeButton');

    button.addEventListener('click', function() {
      image.setAttribute('src', 'image2.jpg');
      image.setAttribute('alt', 'รูปภาพ 2');
    });
  </script>
</body>
</html>

ในตัวอย่างนี้ เมื่อผู้ใช้คลิกปุ่ม "เปลี่ยนรูปภาพ" attribute src และ alt ของ <img> จะถูกแก้ไข

`createElement()`, `appendChild()`, `removeChild()`

createElement(), appendChild(), และ removeChild() methods ใช้สำหรับสร้าง, เพิ่ม, และลบ HTML elements

<!DOCTYPE html>
<html>
<head>
  <title>createElement(), appendChild(), removeChild()</title>
</head>
<body>
  <ul id="myList"></ul>
  <button id="addButton">เพิ่มรายการ</button>
  <button id="removeButton">ลบรายการ</button>
  <script>
    const list = document.getElementById('myList');
    const addButton = document.getElementById('addButton');
    const removeButton = document.getElementById('removeButton');

    addButton.addEventListener('click', function() {
      const newListItem = document.createElement('li');
      newListItem.textContent = 'รายการใหม่';
      list.appendChild(newListItem);
    });

    removeButton.addEventListener('click', function() {
      if (list.hasChildNodes()) {
        list.removeChild(list.firstChild);
      }
    });
  </script>
</body>
</html>

ในตัวอย่างนี้ เมื่อผู้ใช้คลิกปุ่ม "เพิ่มรายการ" <li> element ใหม่จะถูกสร้างและเพิ่มเข้าไปใน <ul> เมื่อผู้ใช้คลิกปุ่ม "ลบรายการ" <li> element แรกใน <ul> จะถูกลบออก

ในบทนี้ เราได้เรียนรู้พื้นฐานเกี่ยวกับการใช้ JavaScript ร่วมกับ HTML เพื่อเพิ่มลูกเล่นและความสามารถในการตอบสนองต่อผู้ใช้งานให้กับเว็บไซต์ของเรา ในบทเรียนต่อไป เราจะเจาะลึกในเรื่องของ JavaScript มากยิ่งขึ้น และเรียนรู้วิธีการสร้างเว็บแอปพลิเคชันที่ซับซ้อนมากยิ่งขึ้น

การใช้ HTML ร่วมกับ JavaScript เบื้องต้น