script.js

ไฟล์ script.js ใน Backstage ใช้เพิ่มฟังก์ชันการทำงานแบบโต้ตอบให้กับโมดูล ไฟล์นี้ประกอบด้วย JavaScript code ที่จัดการเหตุการณ์ผู้ใช้ เช่น การคลิกปุ่ม การเปลี่ยนแปลงค่าอินพุต และการโหลดหน้าเพจ

ไฟล์ script.js ใน Backstage: ตัวอย่างและการใช้งาน

ตัวอย่าง:

JavaScript

// ฟังก์ชันสำหรับจัดการการคลิกปุ่ม "Submit"
document.getElementById('submitBtn').addEventListener('click', function() {
  // รับข้อมูลจากฟอร์ม
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const message = document.getElementById('message').value;

  // ตรวจสอบข้อมูล
  if (name === '' || email === '' || message === '') {
    alert('กรุณากรอกข้อมูลให้ครบถ้วน');
    return;
  }

  // ส่งข้อมูลไปยังเซิร์ฟเวอร์
  const data = {
    name: name,
    email: email,
    message: message
  };

  fetch('blabla', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => response.json())
  .then(data => {
    if (data.status) {
      alert(data.title + ': ' + data.msg);
      // รีเซ็ตฟอร์ม
      document.getElementById('form').reset();
    } else {
      alert('เกิดข้อผิดพลาด: ' + data.msg);
    }
  })
  .catch(error => {
    console.error(error);
  });
});

การใช้งาน:

สำหรับไฟล์ script.js คุณไม่จำเป็นต้องเรียกใช้ใดๆ ระบบจะเรียกใช้คุณโดยอัตโนมัติ

1. ใช้ JavaScript code เพื่อจัดการเหตุการณ์ผู้ใช้:

HTML

<button id="submitBtn">Submit</button>

หมายเหตุ:

• ตัวอย่างนี้แสดง JavaScript code พื้นฐาน คุณสามารถปรับแต่งโค้ดนี้ให้เหมาะกับโมดูลของคุณเอง

• คุณสามารถใช้ JavaScript libraries เช่น jQuery หรือ Bootstrap เพื่อจัดการ DOM และเพิ่มฟังก์ชันการทำงาน

• ตรวจสอบให้แน่ใจว่าคุณใช้ JavaScript selectors ที่ถูกต้องและเฉพาะเจาะจง

• ทดสอบโค้ดของคุณบนอุปกรณ์และเบราว์เซอร์ที่แตกต่างกัน