One place for hosting & domains

      dan

      Cara Mengakses Kamera Depan dan Belakang dengan getUserMedia() dari JavaScript


      Pengantar

      Kehadiran HTML5 memperkenalkan API dengan akses ke peranti keras perangkat, termasuk API MediaDevices. API ini memberikan akses ke perangkat masukan media seperti audio dan video.

      Dengan bantuan API ini, pengembang dapat mengakses perangkat audio dan video untuk mengalirkan dan menampilkan umpan video langsung di peramban. Dalam tutorial ini, Anda akan mengakses umpan video dari perangkat pengguna dan menampilkannya di peramban menggunakan metode getUserMedia.

      API getUserMedia memanfaatkan perangkat masukan media untuk menghasilkan MediaStream. MediaStream ini berisi jenis media yang diminta, baik audio atau video. Menggunakan aliran yang dikembalikan dari API, umpan video dapat ditampilkan di peramban, yang berguna untuk komunikasi waktu nyata di peramban.

      Ketika digunakan bersama API Rekaman MediaStream, Anda dapat merekam dan menyimpan data media yang ditangkap di peramban. API ini hanya bekerja di asal yang aman seperti API lainnya yang baru diperkenalkan, tetapi API ini juga bekerja di localhost dan URL berkas.

      Prasyarat

      Tutorial ini pertama-tama akan menjelaskan konsep dan mendemonstrasikan contoh dengan Codepen. Di langkah terakhir, Anda akan menciptakan umpan video yang berfungsi untuk peramban.

      Langkah 1 — Memeriksa Dukungan Perangkat

      Pertama-tama, Anda akan melihat cara memeriksa apakah peramban pengguna mendukung API mediaDevices. API ini ada di dalam antarmuka navigator dan berisi keadaan dan identitas saat ini dari agen pengguna. Pemeriksaan dilakukan dengan kode berikut yang dapat ditempelkan ke Codepen:

      if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
        console.log("Let's get this party started")
      }
      

      Pertama-tama, ini memeriksa apakah API mediaDevices ada di dalam navigator, lalu memeriksa apakah API getUserMedia tersedia di dalam mediaDevices. Jika ini menampilkan true, Anda dapat memulai.

      Langkah 2 — Meminta Izin Pengguna

      Setelah mengonfirmasi dukungan peramban untuk getUserMedia, Anda perlu meminta izin untuk menggunakan perangkat masukan media pada agen pengguna. Biasanya, setelah pengguna memberikan izin, Promise diberikan yang terselesaikan menjadi aliran media. Promise ini tidak diberikan ketika izin ditolak oleh pengguna, yang memblokir akses ke perangkat ini.

      Tempelkan baris berikut ke Codepen untuk meminta izin:

      navigator.mediaDevices.getUserMedia({video: true})
      

      Objek yang diberikan sebagai argumen untuk metode getUserMedia disebut constraints. Ini menentukan perangkat masukan media yang Anda minta izinnya untuk diakses. Misalnya, jika objek berisi audio: true, pengguna akan diminta memberikan akses ke perangkat masukan audio.

      Bagian ini akan membahas tentang konsep umum dari constraints. Objek constraints adalah suatu objek MediaStreamConstraints yang menentukan jenis media yang diminta dan persyaratan dari setiap jenis media. Anda dapat menentukan persyaratan untuk aliran yang diminta menggunakan objek constraints, seperti resolusi dari aliran yang digunakan (front, back).

      Anda harus menentukan baik audio atau video saat membuat permintaan. NotFoundError akan dihasilkan jika jenis media yang diminta tidak dapat ditemukan di peramban pengguna.

      Jika Anda berniat meminta aliran video dari resolusi 1280 x 720, Anda dapat memperbarui objek constraints agar terlihat seperti ini:

      {
        video: {
          width: 1280,
          height: 720,
        }
      }
      

      Dengan pembaruan ini, peramban akan mencoba mencocokkan pengaturan kualitas yang ditentukan untuk aliran tersebut. Jika perangkat video tidak dapat memberikan resolusi ini, peramban akan memberikan resolusi lain yang tersedia.

      Untuk memastikan peramban memberikan resolusi yang tidak lebih rendah dari yang disediakan sebelumnya, Anda harus memastikan untuk menggunakan properti min. Berikut ini adalah cara Anda dapat memperbarui objek constraints untuk menyertakan properti min:

      {
        video: {
          width: {
            min: 1280,
          },
          height: {
            min: 720,
          }
        }
      }
      

      Ini akan memastikan bahwa resolusi aliran tersebut setidaknya akan sebesar 1280 x 720. Jika persyaratan minimum ini tidak dapat terpenuhi, promise akan ditolak dengan OverconstrainedError.

      Dalam beberapa kasus, Anda mungkin khawatir tentang menyimpan data dan perlu membuat aliran tidak melampaui resolusi yang ditetapkan. Ini dapat menjadi berguna ketika pengguna berada dalam paket yang terbatas. Untuk mengaktifkan fungsionalitas ini, perbarui objek constraints untuk memuat bidang max:

      {
        video: {
          width: {
            min: 1280,
            max: 1920,
          },
          height: {
            min: 720,
            max: 1080
          }
        }
      }
      

      Dengan pengaturan ini, peramban akan memastikan bahwa aliran yang diberikan tidak lebih kecil dari 1280 x 720 dan tidak melebihi 1920 x 1080.

      Ketentuan lain yang dapat digunakan mencakup exact dan ideal. Pengaturan ideal biasanya digunakan bersama properti min dan max untuk menemukan kemungkinan pengaturan terbaik yang paling dekat dengan nilai ideal yang disediakan.

      Anda dapat memperbarui constraints untuk menggunakan kata kunci ideal:

      {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          }
        }
      }
      

      Untuk memberi tahu peramban agar menggunakan kamera depan atau belakang (di perangkat mobil) pada perangkat, Anda dapat menentukan properti facingMode dalam objek video:

      {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
          facingMode: 'user'
        }
      }
      

      Pengaturan ini akan menggunakan kamera yang selalu menghadap depan di semua perangkat. Untuk menggunakan kamera belakang di perangkat mobil, Anda dapat mengubah properti facingMode menjadi environment.

      {
        video: {
          ...
          facingMode: {
            exact: 'environment'
          }
        }
      }
      

      Langkah 4 — Menggunakan Metode enumerateDevices

      Ketika metode enumerateDevices digunakan, metode ini merespons dengan semua perangkat media masukan yang ada dan tersedia di PC pengguna.

      Dengan metode ini, Anda dapat memberi pengguna opsi-opsi tentang perangkat media yang digunakan untuk mengalirkan konten audio atau konten video. Metode ini menghasilkan Promise yang terselesaikan menjadi larik MediaDeviceInfo yang berisi informasi tentang setiap perangkat.

      Contoh cara menggunakan metode ini ditampilkan dalam cuplikan kode di bawah ini:

      async function getDevices() {
        const devices = await navigator.mediaDevices.enumerateDevices();
      }
      

      Respons sampel untuk setiap perangkat akan terlihat seperti yang berikut:

      {
        deviceId: "23e77f76e308d9b56cad920fe36883f30239491b8952ae36603c650fd5d8fbgj",
        groupId: "e0be8445bd846722962662d91c9eb04ia624aa42c2ca7c8e876187d1db3a3875",
        kind: "audiooutput",
        label: "",
      }
      

      Catatan: Label tidak akan diberikan kecuali ada aliran yang tersedia, atau jika pengguna telah memberikan izin akses perangkat.

      Langkah 5 — Menampilkan Aliran Video di Peramban

      Anda telah melewati proses meminta dan mendapatkan akses ke perangkat media, mengonfigurasi constraints untuk menyertakan resolusi yang diperlukan, dan memilih kamera yang Anda perlukan untuk merekam video.

      Setelah melewati semua langkah ini, setidaknya Anda ingin melihat apakah aliran tersebut bekerja sesuai dengan pengaturan yang dikonfigurasi. Untuk memastikan ini, Anda akan menggunakan elemen <video> untuk menampilkan aliran video di peramban.

      Seperti disebutkan sebelumnya, metode getUserMedia memberikan Promise yang dapat diselesaikan menjadi aliran. Aliran yang dihasilkan dapat dikonversi menjadi URL objek dengan metode createObjectURL. URL ini akan diatur sebagai sumber video.

      Anda akan menciptakan demo singkat yang membiarkan pengguna memilih dari daftar perangkat video mereka yang tersedia, yang menggunakan metode enumerateDevices.

      Ini adalah metode navigator.mediaDevices. Ini membuat daftar perangkat media yang tersedia, seperti mikrofon dan kamera. Ini memberikan Promise yang dapat diselesaikan menjadi larik objek yang memerinci perangkat media yang tersedia.

      Ciptakan berkas index.html dan perbarui konten dengan kode di bawah ini:

      index.html

      <!doctype html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport"
                content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
          <link rel="stylesheet" href="style.css">
          <title>Document</title>
      </head>
      <body>
      <div class="display-cover">
          <video autoplay></video>
          <canvas class="d-none"></canvas>
      
          <div class="video-options">
              <select name="" id="" class="custom-select">
                  <option value="">Select camera</option>
              </select>
          </div>
      
          <img class="screenshot-image d-none" alt="">
      
          <div class="controls">
              <button class="btn btn-danger play" title="Play"><i data-feather="play-circle"></i></button>
              <button class="btn btn-info pause d-none" title="Pause"><i data-feather="pause"></i></button>
              <button class="btn btn-outline-success screenshot d-none" title="ScreenShot"><i data-feather="image"></i></button>
          </div>
      </div>
      
      <script src="https://unpkg.com/feather-icons"></script>
      <script src="script.js"></script>
      </body>
      </html>
      

      Dalam cuplikan kode di atas, Anda telah menyiapkan elemen yang Anda perlukan dan beberapa kontrol untuk video. Yang juga disertakan adalah tombol untuk mengambil tangkapan layar dari umpan video saat ini.

      Sekarang, mari kita hias komponen ini sedikit.

      Ciptakan berkas style.css dan salin gaya berikut ke dalamnya. Bootstrap disertakan untuk mengurangi jumlah CSS yang harus ditulis agar komponennya berjalan.

      style.css

      .screenshot-image {
          width: 150px;
          height: 90px;
          border-radius: 4px;
          border: 2px solid whitesmoke;
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
          position: absolute;
          bottom: 5px;
          left: 10px;
          background: white;
      }
      
      .display-cover {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 70%;
          margin: 5% auto;
          position: relative;
      }
      
      video {
          width: 100%;
          background: rgba(0, 0, 0, 0.2);
      }
      
      .video-options {
          position: absolute;
          left: 20px;
          top: 30px;
      }
      
      .controls {
          position: absolute;
          right: 20px;
          top: 20px;
          display: flex;
      }
      
      .controls > button {
          width: 45px;
          height: 45px;
          text-align: center;
          border-radius: 100%;
          margin: 0 6px;
          background: transparent;
      }
      
      .controls > button:hover svg {
          color: white !important;
      }
      
      @media (min-width: 300px) and (max-width: 400px) {
          .controls {
              flex-direction: column;
          }
      
          .controls button {
              margin: 5px 0 !important;
          }
      }
      
      .controls > button > svg {
          height: 20px;
          width: 18px;
          text-align: center;
          margin: 0 auto;
          padding: 0;
      }
      
      .controls button:nth-child(1) {
          border: 2px solid #D2002E;
      }
      
      .controls button:nth-child(1) svg {
          color: #D2002E;
      }
      
      .controls button:nth-child(2) {
          border: 2px solid #008496;
      }
      
      .controls button:nth-child(2) svg {
          color: #008496;
      }
      
      .controls button:nth-child(3) {
          border: 2px solid #00B541;
      }
      
      .controls button:nth-child(3) svg {
          color: #00B541;
      }
      
      .controls > button {
          width: 45px;
          height: 45px;
          text-align: center;
          border-radius: 100%;
          margin: 0 6px;
          background: transparent;
      }
      
      .controls > button:hover svg {
          color: white;
      }
      

      Langkah selanjutnya adalah menambahkan fungsionalitas pada demo. Dengan menggunakan metode enumerateDevices, Anda akan mendapatkan perangkat video yang tersedia dan mengaturnya sebagai opsi di dalam elemen pilihan. Ciptakan berkas bernama script.js dan perbarui dengan cuplikan kode berikut:

      script.js

      feather.replace();
      
      const controls = document.querySelector('.controls');
      const cameraOptions = document.querySelector('.video-options>select');
      const video = document.querySelector('video');
      const canvas = document.querySelector('canvas');
      const screenshotImage = document.querySelector('img');
      const buttons = [...controls.querySelectorAll('button')];
      let streamStarted = false;
      
      const [play, pause, screenshot] = buttons;
      
      const constraints = {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
        }
      };
      
      const getCameraSelection = async () => {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoDevices = devices.filter(device => device.kind === 'videoinput');
        const options = videoDevices.map(videoDevice => {
          return `<option value="${videoDevice.deviceId}">${videoDevice.label}</option>`;
        });
        cameraOptions.innerHTML = options.join('');
      };
      
      play.onclick = () => {
        if (streamStarted) {
          video.play();
          play.classList.add('d-none');
          pause.classList.remove('d-none');
          return;
        }
        if ('mediaDevices' in navigator && navigator.mediaDevices.getUserMedia) {
          const updatedConstraints = {
            ...constraints,
            deviceId: {
              exact: cameraOptions.value
            }
          };
          startStream(updatedConstraints);
        }
      };
      
      const startStream = async (constraints) => {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        handleStream(stream);
      };
      
      const handleStream = (stream) => {
        video.srcObject = stream;
        play.classList.add('d-none');
        pause.classList.remove('d-none');
        screenshot.classList.remove('d-none');
        streamStarted = true;
      };
      
      getCameraSelection();
      

      Dalam cuplikan kode di atas, ada beberapa hal yang terjadi. Mari kita uraikan:

      1. feather.replace(): metode ini memanggil instans feather, yang merupakan ikon yang diatur untuk pengembangan web.
      2. Variabel constraints menyimpan konfigurasi awal untuk aliran. Ini akan diperluas untuk menyertakan perangkat media yang dipilih pengguna.
      3. getCameraSelection: fungsi ini memanggil metode enumerateDevices. Kemudian, Anda memfilter larik dari Promise yang terselesaikan dan memilih perangkat masukan video. Dari hasil yang terfilter, Anda membuat <option> untuk elemen <select>.
      4. Memanggil metode getUserMedia terjadi di dalam pendengar onclick dari tombol play. Di sini, Anda akan memeriksa apakah metode ini didukung oleh peramban pengguna sebelum memulai aliran.
      5. Selanjutnya, Anda akan memanggil fungsi startStream yang mengambil argumen constraints. Ini memanggil metode getUserMedia dengan constraints yang disediakan. handleStream dipanggil menggunakan aliran dari Promise yang terselesaikan. Metode ini mengatur aliran yang diberikan ke srcObject dari elemen video.

      Selanjutnya, Anda akan menambahkan pendengar ke tombol kontrol pada laman untuk melakukan pause (jeda), stop (berhenti), dan mengambil screenshots (tangkapan layar). Juga, Anda akan menambahkan pendengar ke elemen <select> untuk memperbarui constraints aliran dengan perangkat video yang dipilih.

      Perbarui berkas script.js dengan kode di bawah ini:

      script.js

      ...
      cameraOptions.onchange = () => {
        const updatedConstraints = {
          ...constraints,
          deviceId: {
            exact: cameraOptions.value
          }
        };
        startStream(updatedConstraints);
      };
      
      const pauseStream = () => {
        video.pause();
        play.classList.remove('d-none');
        pause.classList.add('d-none');
      };
      
      const doScreenshot = () => {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        screenshotImage.src = canvas.toDataURL('image/webp');
        screenshotImage.classList.remove('d-none');
      };
      
      pause.onclick = pauseStream;
      screenshot.onclick = doScreenshot;
      

      Sekarang, saat Anda membuka berkas index.html di peramban, mengeklik tombol Play akan memulai aliran.

      Berikut adalah demo yang lengkap:

      https://codepen.io/chrisbeast/pen/ebYwpX

      Kesimpulan

      Tutorial ini memperkenalkan API getUserMedia. Ini adalah tambahan yang menarik untuk HTML5 yang mempermudah proses penangkapan media di web.

      API menggunakan parameter (constraints) yang dapat digunakan untuk mengonfigurasi akses ke perangkat masukan audio dan video. Ini juga dapat digunakan untuk menentukan resolusi video yang diperlukan untuk aplikasi Anda.

      Anda dapat memperpanjang demo lebih lanjut untuk memberi pengguna dengan suatu opsi untuk menyimpan tangkapan layar yang diambil, begitu juga dengan merekam dan menyimpan data video serta audio dengan bantuan dari API Rekaman MediaStream.



      Source link

      Cara Membuat Efek Seret dan Letakkan dengan JavaScript Vanilla dan HTML


      Pengantar

      Menyeret-dan-meletakkan adalah interaksi pengguna umum yang dapat Anda temukan dalam banyak antarmuka pengguna.

      Ada beberapa pustaka JavaScript yang sudah ada untuk menambahkan fitur seret-dan-letakkan ke aplikasi Anda. Namun, mungkin ada situasi ketika pustaka tidak tersedia atau menimbulkan overhead atau dependensi yang tidak diperlukan proyek Anda. Dalam situasi ini, pengetahuan API yang tersedia untuk Anda di peramban web modern dapat menawarkan solusi alternatif.

      HTML Drag and Drop API bergantung pada model kejadian DOM untuk mengambil informasi tentang apa yang sedang diseret atau diletakkan serta memperbarui elemen itu saat menyeret atau meletakkan. Dengan penangan kejadian JavaScript, Anda dapat mengubah elemen apa saja menjadi item yang dapat diseret atau item yang dapat diletakkan ke dalamnya.

      Dalam tutorial ini, kita akan membuat contoh seret-dan-letakkan menggunakan HTML Drag and Drop API bersama JavaScript vanilla untuk menggunakan penangan kejadian.

      Prasyarat

      Untuk menyelesaikan tutorial ini, Anda akan memerlukan:

      • Peramban web modern yang mendukung Drag and Drop API (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

      Langkah 1 — Membuat Proyek dan Markup Awal

      Proyek kita akan terdiri dari kontainer dengan dua tipe elemen anak:

      • Elemen anak yang dapat Anda seret
      • Elemen anak yang dapat memiliki elemen yang diletakkan ke dalamnya

      Pertama, buka jendela terminal Anda dan buat direktori proyek baru:

      • mkdir drag-and-drop-example

      Selanjutnya, navigasikan ke direktori itu:

      Kemudian, buat berkas index.html dalam direktori itu:

      Selanjutnya, tambahkan kode boilerplate untuk halaman web HTML:

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My Drag-and-Drop Example</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
        </head>
        <body>
        </body>
      </html>
      

      Lalu, di antara tag <body> tambahkan item draggable dan dropzone (target peletakan):

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Simpan dan tutup berkas. Kemudian, buat berkas style.css:

      Selanjutnya, tambahkan gaya untuk elemen dalam berkas index.html:

      style.css

      .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
      }
      
      .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      
      .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
      }
      
      .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      

      Ini akan menambahkan beberapa pemformatan pada aplikasi. Sekarang Anda dapat melihat index.html di peramban dan mengamati bahwa ini menghasilkan draggable <div> dan dropzone <div>.

      Tangkapan layar draggable div dan dropzone div

      Selanjutnya, kita secara eksplisit akan membuat <div> pertama yang dapat diseret dengan menambahkan atribut draggable:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Simpan dan tutup berkas.

      Terakhir, lihat lagi index.html di peramban. Jika kita mengklik draggable <div> dan menyeretnya di layar, akan ada indikasi visual yang bergerak.

      Nilai asali untuk atribut draggable adalah auto. Artinya, perilaku asali peramban Anda akan menentukan apakah elemen dapat diseret atau tidak. Biasanya, ini berarti pemilihan teks, gambar, dan tautan dapat diseret tanpa menetapkan draggable="true".

      Kini Anda memiliki berkas HTML dengan elemen yang dapat diseret. Kita lanjutkan dengan menambahkan penangan onevent.

      Langkah 2 — Menangani Kejadian Seret-dan-Letakkan dengan JavaScript

      Saat ini, jika kita melepaskan mouse saat menyeret elemen yang dapat diseret, tidak ada yang terjadi. Untuk memicu tindakan pada penyeretan atau peletakan di elemen DOM, kita perlu menggunakan Drag and Drop API:

      • ondragstart: Penangan kejadian ini akan dipasang ke elemen draggable kita dan aktif bila ada kejadian dragstart.
      • ondragover: Penangan kejadian ini akan dipasang ke elemen dropzone kita dan aktif bila ada kejadian dragover.
      • ondrop: Penangan kejadian ini juga akan dipasang ke elemen dropzone kita dan aktif bila ada kejadian drop.

      Catatan: Seluruhnya ada delapan penangan kejadian: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, dan ondrop. Untuk contoh, kita tidak akan memerlukan semuanya.

      Pertama, mari kita merujuk berkas script.js baru dalam index.html:

      index.html

      <body>
        ...
        <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
      </body>
      

      Selanjutnya, buat berkas script.js yang baru:

      Objek DataTransfer akan terus melacak informasi terkait penyeretan yang terjadi saat ini. Untuk memperbarui elemen kita saat menyeret dan meletakkan, kita perlu mengakses langsung objek DataTransfer. Caranya, kita dapat memilih properti dataTransfer dari DragEvent elemen DOM.

      Catatan: Objek DataTransfer secara teknis dapat melacak informasi untuk beberapa elemen yang sedang diseret secara bersamaan. Untuk contoh, kita akan fokus pada penyeretan satu elemen.

      Metode setData objek dataTransfer dapat digunakan untuk mengatur informasi status penyeretan pada elemen yang diseret saat ini. Dibutuhkan dua parameter:

      • string yang mendeklarasikan format parameter kedua
      • data sebenarnya yang ditransfer

      Tujuan kita adalah memindahkan elemen draggable ke elemen induk baru. Kita harus dapat memilih elemen draggable dengan id unik. Kita dapat mengatur id elemen yang diseret dengan metode setData sehingga dapat digunakan nanti.

      Mari kita tinjau kembali berkas script.js dan membuat fungsi baru untuk menggunakan setData:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      }
      

      Catatan: Internet Explorer 9 hingga 11 dilaporkan mengalami masalah saat menggunakan 'text/plain'. Formatnya harus 'text' untuk peramban itu.

      Untuk memperbarui penataan gaya CSS item yang diseret, kita dapat mengakses gayanya menggunakan kejadian DOM lagi dan mengatur gaya apa pun yang kita inginkan untuk currentTarget.

      Mari kita tambahkan ke fungsi dan ubah backgroundColor menjadi yellow:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      
        event
          .currentTarget
          .style
          .backgroundColor="yellow";
      }
      

      Catatan: Gaya yang Anda ubah perlu diperbarui lagi secara manual saat peletakan jika Anda ingin gaya seret-saja. Jika Anda mengubah sesuatu saat mulai menyeret, elemen yang diseret akan mempertahankan gaya baru itu kecuali jika Anda mengubahnya kembali.

      Sekarang, kita memiliki fungsi JavaScript untuk saat penyeretan dimulai.

      Kita dapat menambahkan ondragstart ke elemen draggable di index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div class="example-dropzone">
          dropzone
        </div>
      </div>
      

      Lihat index.html di peramban Anda. Jika Anda mencoba menyeret item sekarang, penataan gaya yang dideklarasikan dalam fungsi kita akan diterapkan:

      Gif beranimasi yang menggambarkan elemen yang diseret tetapi tidak diletakkan

      Namun, tidak akan terjadi apa pun saat Anda melepaskan klik.

      Penangan kejadian selanjutnya yang akan terpicu dalam urutan ini adalah ondragover.

      Perilaku peletakan asali untuk elemen DOM tertentu seperti <div> di peramban biasanya tidak menerima peletakan. Perilaku ini akan mencegat perilaku yang berusaha kita implementasikan. Untuk memastikan kita mendapatkan perilaku peletakan yang diinginkan, kita akan menerapkan preventDefault.

      Mari kita kembali ke berkas script.js dan membuat fungsi baru untuk menggunakan preventDefault. Tambahkan kode ini ke akhir berkas:

      script.js

      function onDragOver(event) {
        event.preventDefault();
      }
      

      Sekarang, kita dapat menambahkan ondragover ke elemen dropzone di index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
        >
          dropzone
        </div>
      </div>
      

      Di titik ini, kita masih belum menulis kode yang menangani peletakan sesungguhnya. Penangan kejadian akhir yang akan terpicu dalam urutan ini adalah ondrop.

      Mari kita kembali ke berkas script.js dan membuat fungsi baru.

      Kita dapat merujuk data yang kita simpan sebelumnya dengan metode setData objek dataTransfer. Kita akan menggunakan metode getData objek dataTransfer. Data yang kita atur adalah id, jadi itulah yang akan dikembalikan kepada kita:

      script.js

      function onDrop(event) {
        const id = event
          .dataTransfer
          .getData('text');
      }
      

      Pilih elemen draggable dengan id yang kita ambil:

      script.js

      function onDrop(event) {
        // ...
      
        const draggableElement = document.getElementById(id);
      }
      

      Pilih elemen dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        const dropzone = event.target;
      }
      

      Tambahkan elemen draggable ke dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        dropzone.appendChild(draggableElement);
      }
      

      Atur ulang objek dataTransfer kita:

      script.js

      function onDrop(event) {
        // ...
      
        event
          .dataTransfer
          .clearData();
      }
      

      Sekarang, kita dapat menambahkan ondrop ke elemen dropzone di index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          dropzone
        </div>
      </div>
      

      Setelah itu selesai, kita memiliki fitur seret-dan-letakkan lengkap. Lihat index.html di peramban Anda dan seret elemen draggable ke dropzone.

      Gif beranimasi yang menggambarkan elemen yang diseret dan diletakkan ke dalam target peletakan

      Contoh kita menangani skenario dari item tunggal yang dapat diseret dan target peletakan tunggal. Anda dapat memiliki beberapa item yang dapat diseret, beberapa target peletakan, dan menyesuaikannya dengan semua penangan kejadian Drag and Drop API lainnya.

      Langkah 3 — Membuat Contoh Lanjutan dengan Beberapa Item yang Dapat Diseret

      Berikut ini satu lagi contoh cara menggunakan API ini: daftar agenda berisi beberapa tugas yang dapat diseret yang dapat Anda pindahkan dari kolom "To-do" ke kolom "Done".

      Gif beranimasi yang menggambarkan beberapa tugas To-do yang diseret dan diletakkan ke dalam kolom Done

      Untuk membuat daftar agenda sendiri, tambahkan lagi elemen yang dapat diseret dengan id unik ke index.html:

      index.html

      <div class="example-parent">
        <h1>To-do list</h1>
        <div class="example-origin">
          To-do
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 1
          </div>
          <div
            id="draggable-2"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 2
          </div>
          <div
            id="draggable-3"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 3
          </div>
          <div
            id="draggable-4"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 4
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          Done
        </div>
      </div>
      

      Lihat index.html di peramban Anda dan seret item di kolom To-do ke kolom Done. Anda telah membuat aplikasi agenda dan menguji fungsionalitasnya.

      Kesimpulan

      Dalam artikel ini, Anda telah membuat aplikasi agenda untuk mendalami fungsionalitas seret-dan-letakkan yang tersedia di peramban web modern.

      Drag and Drop API menyediakan beberapa opsi untuk menyesuaikan tindakan Anda selain menyeret dan meletakkan. Misalnya, Anda dapat memperbarui penataan gaya CSS item yang diseret. Selain itu, alih-alih memindahkan item, Anda dapat menyalin item yang dapat diseret agar direplikasi saat peletakan.

      Ingatlah bahwa walaupun banyak peramban web yang mendukung teknologi ini, Anda mungkin tidak dapat bergantung padanya jika audiens Anda terdiri dari perangkat yang tidak mendukung fungsionalitas ini.

      Untuk mempelajari lebih lanjut tentang semua yang dapat Anda letakkan dengan Drag and Drop API, lihat dokumentasi MDN tentang hal itu.



      Source link

      Cara Menggunakan JSON.parse() dan JSON.stringify()


      Pengantar

      Objek JSON, yang tersedia di semua peramban modern, memiliki dua metode berguna untuk menangani konten yang berformat JSON: parse dan stringify. JSON.parse() mengambil string JSON dan mengubahnya menjadi objek JavaScript. JSON.stringify() mengambil objek JavaScript dan mengubahnya menjadi string JSON.

      Berikut adalah contohnya:

      const myObj = {
        name: 'Skip',
        age: 2,
        favoriteFood: 'Steak'
      };
      
      const myObjStr = JSON.stringify(myObj);
      
      console.log(myObjStr);
      // "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"
      
      console.log(JSON.parse(myObjStr));
      // Object {name:"Sammy",age:6,favoriteFood:"Tofu"}
      

      Meskipun metode itu biasanya digunakan pada objek, tetapi dapat juga digunakan pada larik:

      const myArr = ['bacon', 'lettuce', 'tomatoes'];
      
      const myArrStr = JSON.stringify(myArr);
      
      console.log(myArrStr);
      // "["shark","fish","dolphin"]"
      
      console.log(JSON.parse(myArrStr));
      // ["shark","fish","dolphin"]
      

      JSON.parse()

      JSON.parse() dapat mengambil fungsi sebagai argumen kedua yang dapat mengubah nilai objek sebelum mengembalikannya. Di sini, nilai-nilai objek diubah menjadi huruf besar dalam objek yang dikembalikan dari metode parse:

      const user = {
        name: 'Sammy',
        email: 'Sammy@domain.com',
        plan: 'Pro'
      };
      
      const userStr = JSON.stringify(user);
      
      JSON.parse(userStr, (key, value) => {
        if (typeof value === 'string') {
          return value.toUpperCase();
        }
        return value;
      });
      

      Catatan: Koma di akhir tidak valid di JSON, jadi JSON.parse() menghasilkan pesan kesalahan jika string yang diberikan padanya memiliki koma di akhir.

      JSON.stringify()

      JSON.stringify() dapat mengambil dua argumen tambahan, yang pertama menjadi fungsi replacer dan yang kedua menjadi nilai String atau Number yang digunakan sebagai space dalam string yang dikembalikan.

      Fungsi replacer dapat digunakan untuk menyaring nilai, karena nilai yang dikembalikan sebagai undefined akan dikeluarkan dari string yang dikembalikan:

      const user = {
        id: 229,
        name: 'Sammy',
        email: 'Sammy@domain.com'
      };
      
      function replacer(key, value) {
        console.log(typeof value);
        if (key === 'email') {
          return undefined;
        }
        return value;
      }
      
      const userStr = JSON.stringify(user, replacer);
      // "{"id":229,"name":"Sammy"}"
      

      Contoh dengan argumen space yang disalurkan:

      const user = {
        name: 'Sammy',
        email: 'Sammy@domain.com',
        plan: 'Pro'
      };
      
      const userStr = JSON.stringify(user, null, '...');
      // "{
      // ..."name": "Sammy",
      // ..."email": "Sammy@domain.com",
      // ..."plan": "Pro"
      // }"
      

      Kesimpulan

      Dalam tutorial ini, Anda telah mendalami cara menggunakan metode JSON.parse() dan JSON.stringify(). Jika Anda ingin mempelajari lebih lanjut tentang menggunakan JSON di Javascript, lihat tutorial Cara Menggunakan JSON di JavaScript dari kami.

      Untuk informasi lebih lanjut tentang pengodean di JavaScript, lihat seri Cara Melakukan Pengodean di JavaScript dari kami, atau lihat halaman topik JavaScript kami untuk latihan dan proyek pemrograman.



      Source link