Web APIs

Web APIs คือ API ที่ต่างๆ ที่ browser ให้มา

เราสามารถดู Web APIs ทั้งหมดได้ที่ MDN Web Docs

TODO image

Web APIs ที่ใช้บ่อย

Fetch API

ใช้สำหรับการสื่อสารกับ server

// GET request
fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// POST request
fetch("https://api.example.com/create", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ name: "John" }),
});

Storage API

ใช้สำหรับจัดเก็บข้อมูลใน browser

Local Storage

// Local Storage
localStorage.setItem("user", "John");
const user = localStorage.getItem("user");

Session Storage

ใช้สำหรับจัดเก็บข้อมูลใน session

// Session Storage
sessionStorage.setItem("token", "123456");
const token = sessionStorage.getItem("token");

DOM API

ใช้สำหรับจัดการ HTML elements

// ตัวอย่างการเข้าถึง element
const element = document.getElementById("myId");

Geolocation API

ใช้สำหรับดึงตำแหน่งของผู้ใช้

// Geolocation API
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(position => {
    const { latitude, longitude } = position.coords;
    console.log(`Lat: ${latitude}, Long: ${longitude}`);
  });
}

WebSocket API

ใช้สำหรับการสื่อสารแบบ two-way

// WebSocket API
const socket = new WebSocket("ws://example.com");

socket.onopen = () => {
  console.log("WebSocket connected");
};

socket.onmessage = event => {
  console.log("Message from server:", event.data);
};

socket.onclose = () => {
  console.log("WebSocket closed");
};

Web Workers API

ใช้สำหรับรัน JavaScript code ใน background thread

// main.js
const worker = new Worker("worker.js");
worker.postMessage({ data: "Hello Worker" });
worker.onmessage = event => console.log(event.data);

// worker.js
self.onmessage = event => {
  const result = heavyComputation(event.data);
  self.postMessage(result);
};