JavaScript үндэс / Вэбийн API-ууд (Clipboard, Geolocation)

Вэбийн API-ууд (Clipboard, Geolocation)

Хөтөч нь JavaScript-д зориулсан олон бэлэн хэрэгслүүдийг агуулдаг — тэдгээрийг Web API гэнэ. Та өмнө нь document.querySelector(), localStorage, fetch() зэргийг үзсэн — бүгд Web API. Энэ хичээлд хэрэглэгчийн байршлыг тогтоох Geolocation API болон санах ойноос текст хуулж буулгах Clipboard API-г үзнэ. Хоёулаа практик, өдөр тутмын аппликейшнд байнга хэрэглэгддэг.

Geolocation API — байршил тогтоох

navigator.geolocation нь хэрэглэгчийн GPS байршлыг асуух боломж олгоно. Хэрэглэгч зөвшөөрөл өгсөн тохиолдолд өргөрөг (latitude), уртраг (longitude) утгуудыг буцаана.

javascript
function байршил_авах() {
  // хөтөч дэмждэг эсэхийг шалгана
  if (!navigator.geolocation) {
    console.log("Таны хөтөч байршил дэмждэггүй байна.");
    return;
  }

  navigator.geolocation.getCurrentPosition(
    function (байршил) {
      // амжилттай үед
      const өргөрөг = байршил.coords.latitude;
      const уртраг = байршил.coords.longitude;
      console.log(`Өргөрөг: ${өргөрөг}`);
      console.log(`Уртраг: ${уртраг}`);
    },
    function (алдаа) {
      // зөвшөөрөөгүй эсвэл алдаа гарсан үед
      console.log("Байршил авах боломжгүй:", алдаа.message);
    },
  );
}

байршил_авах();

watchPosition() ашиглан хэрэглэгч хөдлөх бүрд байршлыг шинэчилж болно — явган зочлолт, хүргэлт хянах апп зэрэгт хэрэгтэй:

javascript
const хяналтын_id = navigator.geolocation.watchPosition(
  (байршил) => {
    console.log(
      "Шинэ байршил:",
      байршил.coords.latitude,
      байршил.coords.longitude,
    );
  },
  (алдаа) => console.log("Алдаа:", алдаа.message),
  { enableHighAccuracy: true, timeout: 5000 },
);

// Хянахаа зогсоохдоо:
// navigator.geolocation.clearWatch(хяналтын_id);

Clipboard API — хуулж буулгах

navigator.clipboard нь хэрэглэгчийн санах ойд текст бичих, унших боломж олгоно. "Хуулах" товч бүтээхэд маш тохиромжтой.

javascript
// Текст хуулах
async function текст_хуулах(текст) {
  try {
    await navigator.clipboard.writeText(текст);
    console.log("Хуулагдлаа!");
  } catch (алдаа) {
    console.log("Хуулах боломжгүй:", алдаа.message);
  }
}

// Санах ойгоос текст унших
async function санах_ойноос_авах() {
  try {
    const текст = await navigator.clipboard.readText();
    console.log("Санах ойн агуулга:", текст);
  } catch (алдаа) {
    console.log("Унших боломжгүй:", алдаа.message);
  }
}

текст_хуулах("Сайн уу, дэлхий!");

DOM-тэй хамтран ашиглах бодит жишээ — "Хуулах" товч:

javascript
document.querySelector("#хуулах_товч").addEventListener("click", async () => {
  const код = document.querySelector("#код_блок").textContent;

  try {
    await navigator.clipboard.writeText(код);

    const товч = document.querySelector("#хуулах_товч");
    товч.textContent = "Хуулагдлаа ✓";
    setTimeout(() => {
      товч.textContent = "Хуулах";
    }, 2000);
  } catch {
    console.log("Хөтөч зөвшөөрөхгүй байна.");
  }
});

Бусад хэрэгтэй Web API-ууд

javascript
// Notification API — мэдэгдэл илгээх
async function мэдэгдэл_илгээх(гарчиг, текст) {
  const зөвшөөрөл = await Notification.requestPermission();
  if (зөвшөөрөл === "granted") {
    new Notification(гарчиг, { body: текст });
  }
}

// Vibration API — чичрүүлэх (гар утас)
navigator.vibrate(200); // 200мс чичрэнэ
navigator.vibrate([100, 50, 100]); // чичрэх, зогсох, чичрэх

// Page Visibility API — таб нуугдсан эсэхийг мэдэх
document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    console.log("Хэрэглэгч өөр таб руу шилжлээ.");
  } else {
    console.log("Хэрэглэгч буцаж ирлээ.");
  }
});

Web API-ууд нь хөтчийн хүч чадлыг шууд ашиглах боломж олгодог — нэмэлт сан суулгах шаардлагагүй. MDN Web Docs (developer.mozilla.org) дээр нийт API-уудын жагсаалт ба жишээнүүд байдаг тул лавлагаа болгон хэрэглэж сурах нь зүйтэй.

Дараагийн хичээлд:

Гүйцэтгэлийн оновчлол — JavaScript код хурдан, санах ой хэмнэмж ажиллуулах арга техникүүдийг үзнэ.

← Өмнөх хичээлDesign Pattern үндэсДараах хичээл →Гүйцэтгэлийн оновчлол