HTML Lanjutan | #1 HTML API

HTML5 API

HTML5 memperkenalkan berbagai API baru yang memungkinkan pengembang membuat aplikasi web yang lebih dinamis dan interaktif. Berikut adalah beberapa API penting yang ditawarkan oleh HTML5.

Canvas API untuk Grafis

Canvas API memungkinkan kita menggambar grafis langsung di dalam halaman web menggunakan elemen <canvas>. Dengan Canvas API, kita bisa membuat grafik 2D seperti diagram, animasi, bahkan game sederhana. Berikut adalah contoh sederhana menggunakan Canvas API untuk menggambar persegi panjang.

<canvas id="myCanvas" width="200" height="100">
  Your browser does not support the canvas element.
</canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#ffa726";
  ctx.fillRect(20, 20, 150, 75);
</script>

        

Drag and Drop API

Dengan **Drag and Drop API**, kita bisa memindahkan elemen dalam halaman web dengan cara menyeret dan meletakkannya. Fitur ini sering digunakan untuk interaksi yang lebih kaya, seperti mengatur ulang item di halaman.

<div id="drag1" draggable="true" ondragstart="drag(event)">
  Drag me!
</div>

<script>
function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}
</script>

        

Web Storage (localStorage dan sessionStorage)

Web Storage API menyediakan cara untuk menyimpan data di browser tanpa menggunakan cookie. Terdapat dua tipe penyimpanan: localStorage dan sessionStorage. Data yang disimpan di localStorage tidak akan hilang saat browser ditutup, sementara sessionStorage akan hilang begitu sesi browser berakhir.

Contoh penggunaan localStorage:

<script>
  localStorage.setItem("username", "Rizky");
  var user = localStorage.getItem("username");
  alert(user); // Output: Rizky
</script>

        

Contoh penggunaan sessionStorage:

<script>
  sessionStorage.setItem("sessionId", "123456");
  var session = sessionStorage.getItem("sessionId");
  alert(session); // Output: 123456
</script>

        

Geolocation API

Geolocation API memungkinkan aplikasi web untuk mendapatkan lokasi geografis pengguna dengan izin mereka. API ini berguna untuk aplikasi yang memerlukan informasi lokasi, seperti layanan navigasi atau penentuan lokasi berdasarkan perangkat.

<script>
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      alert("Latitude: " + position.coords.latitude + 
            "\nLongitude: " + position.coords.longitude);
    });
  } else {
    alert("Geolocation is not supported by this browser.");
  }
</script>

        

Dengan adanya HTML5 API ini, kita bisa membuat halaman web yang lebih interaktif, dinamis, dan sesuai dengan kebutuhan modern. Setiap API ini memungkinkan kita memanfaatkan berbagai fitur yang sebelumnya hanya bisa dilakukan dengan plugin eksternal atau bahasa pemrograman lainnya.