JavaScript의 API: 정의 및 HTML 페이지에서 API를 사용하는 방법

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web APIs in one page</title>
<style>
  body { margin: 0; padding: 18px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  button { font: inherit; padding: 9px 16px; border: 0; border-radius: 8px; background: #2563eb; color: #fff; cursor: pointer; }
  table { margin-top: 14px; width: 100%; max-width: 460px; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
  td { padding: 8px 10px; border-bottom: 1px solid #eceef2; font-size: 14px; }
  td code { font-size: 12.5px; color: #6b7280; }
  td:last-child { font-weight: 600; text-align: right; }
</style>
</head>
<body>
<button id="ask">Ask the browser</button>

<table>
  <tr><td>Language<br><code>navigator.language</code></td><td id="lang">?</td></tr>
  <tr><td>Window width<br><code>window.innerWidth</code></td><td id="width">?</td></tr>
  <tr><td>Online<br><code>navigator.onLine</code></td><td id="online">?</td></tr>
  <tr><td>Page title<br><code>document.title</code></td><td id="title">?</td></tr>
</table>

<script>
  // document, navigator and window are objects the browser gives every page
  const show = (id, value) => document.getElementById(id).textContent = value;

  function ask() {
    show('lang', navigator.language);
    show('width', window.innerWidth + 'px');
    show('online', navigator.onLine ? 'yes' : 'no');
    show('title', document.title);
  }

  document.getElementById('ask').addEventListener('click', ask);
  // APIs also send events: update the width when the window is resized
  window.addEventListener('resize', () => show('width', window.innerWidth + 'px'));
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Feature detection</title>
<style>
  body { margin: 0; padding: 18px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  p { margin: 0 0 12px; font-size: 14px; }
  ul { list-style: none; margin: 0; padding: 0; max-width: 460px; background: #fff; border-radius: 10px; }
  li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #eceef2; font-size: 14px; }
  li code { font-size: 13px; }
  .yes { color: #0f5132; font-weight: 600; }
  .no { color: #9a3412; font-weight: 600; }
</style>
</head>
<body>
<p>Secure context: <b id="secure"></b></p>
<ul id="list"></ul>

<script>
  // Each check asks: does this object have this property?
  const checks = [
    ['fetch', 'fetch' in window],
    ['navigator.geolocation', 'geolocation' in navigator],
    ['navigator.clipboard', 'clipboard' in navigator],
    ['navigator.share', 'share' in navigator],
    ['navigator.vibrate', 'vibrate' in navigator],
    ['navigator.serviceWorker', 'serviceWorker' in navigator],
    ['Notification', 'Notification' in window],
    ['IntersectionObserver', 'IntersectionObserver' in window],
  ];

  const list = document.getElementById('list');
  for (const [name, ok] of checks) {
    const li = document.createElement('li');
    li.innerHTML = '<code>' + name + '</code><span class="' + (ok ? 'yes">available' : 'no">missing') + '</span>';
    list.append(li);
  }
  document.getElementById('secure').textContent = window.isSecureContext ? 'yes' : 'no';
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Show API data</title>
<style>
  body { margin: 0; padding: 18px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .bar { display: flex; flex-wrap: wrap; gap: 8px; }
  button { font: inherit; font-size: 14px; padding: 8px 12px; border: 1px solid #d5d9e0; border-radius: 8px; background: #fff; cursor: pointer; }
  button.main { background: #2563eb; border-color: #2563eb; color: #fff; }
  #status { margin: 12px 0 8px; font-size: 14px; color: #6b7280; }
  #status.error { color: #9a3412; font-weight: 600; }
  ul { list-style: none; margin: 0; padding: 0; max-width: 460px; }
  li { display: flex; justify-content: space-between; padding: 9px 12px; margin-bottom: 6px; background: #fff; border-radius: 8px; font-size: 14px; }
</style>
</head>
<body>
<div class="bar">
  <button class="main" data-case="ok">Load products</button>
  <button data-case="404">Server says 404</button>
  <button data-case="offline">Network fails</button>
</div>
<p id="status">Press a button.</p>
<ul id="list"></ul>

<script>
  // Stand-in for fetch(url): it returns a real Response object, without the network.
  // On your own site, replace fakeFetch(...) with fetch('/api/products').
  function fakeFetch(kind) {
    return new Promise((resolve, reject) => setTimeout(() => {
      if (kind === 'offline') reject(new TypeError('Failed to fetch'));
      else if (kind === '404') resolve(new Response('Not found', { status: 404 }));
      else resolve(new Response(JSON.stringify([
        { name: 'Notebook', price: 4.5 },
        { name: 'Pen set', price: 7 },
        { name: 'Desk lamp', price: 24.99 },
      ]), { headers: { 'Content-Type': 'application/json' } }));
    }, 600));
  }

  const status = document.getElementById('status');
  const list = document.getElementById('list');

  async function load(kind) {
    status.className = '';
    status.textContent = 'Loading...';
    list.innerHTML = '';
    try {
      const response = await fakeFetch(kind);
      // a 404 or 500 does not throw by itself, so check ok
      if (!response.ok) throw new Error('Server answered ' + response.status);
      const products = await response.json();  // text -> objects
      for (const p of products) {
        const li = document.createElement('li');
        li.innerHTML = '<span></span><b></b>';
        li.firstChild.textContent = p.name;  // textContent: data is never run as HTML
        li.lastChild.textContent = '$' + p.price.toFixed(2);
        list.append(li);
      }
      status.textContent = products.length + ' products loaded.';
    } catch (err) {
      status.className = 'error';
      status.textContent = 'Could not load: ' + err.message;
    }
  }

  document.querySelectorAll('[data-case]').forEach((btn) =>
    btn.addEventListener('click', () => load(btn.dataset.case)));
</script>
</body>
</html>