Artikel kali ini terinspirasi dari pembicaraan teman-teman di
grup Pojok Programmer
tentang link download palsu yang mengarahkan ke link iklan.
Sebagian halaman web menggunakan getaran untuk mengambil perhatian dari pengunjungnya,
terutama halaman web yang penuh dengan iklan.
Membaca komentar-komentar mereka membuat saya teratrik ingin tahu
cara membuat getaran di web.
Langsunga saja saya menuju ke Google dan memasukan kata kunci “js vibrate phone”
dan hasilnya ternya menggunakan HTML5 Vibration API.
Apa itu HTML5 Vibration API?
HTML5 Vibration API adalah API (Application Programming Interface) untuk membuat
getaran pada web yang bertujuan memberikan umpan balik pada kejadian tertentu.
Menurut penjelasan MDN (Mozilla Developer Network) getaran itu sendiri
didefinisikan sebagai pola dari gelombang pulsa on-off yang memiliki panjang
dalam bentuk integer. Panjang gelombang tersebut menentukan lama getarananya.
Pada contoh gelombang pulsa di atas, getaran akan mulai (on) selama 200 ms (milidetik).
Setelah itu diam selama 250 ms, kemudian lanjut lagi selama 1000 ms atau 1 detik.
Cara Menggunakan HTML5 Vibration API
HTML5 Vibration API menyediakan fungsi vibrate() untuk membuat getaran.
Bentuk sintaksnya seperti ini:
window.navigator.vibrate(pola);
Nilai paramter pola dapat kita isi dengan nilai panjang getarannya.
Misalnya kita ingin membuat getaran selama 1 detik:
window.navigator.vibrate(1000);
Lalu bagaiaman kalau membuat lebih dari satu kali getaran?
Gampang!
Kita tinggal membuat pola dari pulsa getarannya.
window.navigator.vibrate([1000, 500, 1000]);
Artinya gelombang akan dimulai selama 1000 ms (1 detik), kemudian berhenti
selama 500 ms. Setelah itu bergetar lagi selama 1000 ms.
Untuk menghentikan getaran, kita bisa memberikan nilai nol (0) kepada
fungsi vibrate().
window.navigator.vibrate(0);
Oke paham! Cukup sudah teorinya.
Mari kita bereksperimen…
Silahkan buat file HTML baru, dan simpan di direktori htdocs atau /var/www/html.
Kemudian isi dengan kode ini:
<!DOCTYPE html><html>
<head>
<title>Tutorial HTML5 Vibration API</title>
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<scripttype="text/javascript">
// fungsi ini akan kita panggil saat tombol diklik
function buatGetaran(pola){
var getaran =window.navigator.vibrate(pola);
// tampilkan hasilnya ke console
// kalau true berarti browser mendukung untuk membuat getaran
// tapi kalau false browser tidak mendukung
console.log(getaran);
}
</script>
</head>
<body>
<p>Coba klik tombol berikut:</p>
<buttononclick="buatGetaran(1000)">Bergetar!!!</button>
<buttononclick="buatGetaran([1000, 500, 1000])">Bergetar 2x!!!</button>
<buttononclick="buatGetaran([200, 500, 300, 100, 400])">Bergetar 3x!!!</button>
</body>
</html>
Kenapa harus simpan di htdocs, kan gak ada PHP-nya?
Karena nanti agar bisa kita coba melalui HP.
Percobaan di browser Desktop
Sebelum mencoba di HP, kita coba dulu di browser desktop (menggunakan google chrome).
Jangan lupa sambil membuka console javascript pada
inspect element.
Hasilnya true, berarti browser kita mendukung untuk membuat
getaran.
Tapi kok tidak terjadi getaran?
Ya iya lah, perangkat keras (hardware) komputer atau laptopnya tidak mendukung. 😄
Percobaan di Handphone
Percobaan saya lakukan dengan tethering WiFi dari HP ke Laptop, bisa juga sebaliknya.
Laptop sebagai server web, dan HP sebagai client atau pengunjung web.
Berarti kita harus tahu IP dari laptopnya, barulah kita buka melalui browser.
Pada artikel pengenalan HTML5 Canvas sebelumnya, kita sudah belajar cara menggamabar objek-objek dasar seperti titik, garis, persegi, lingkaran, dan segitiga.
Obejek digambar hanya sekali saja.
Bagaiaman kalau kita ingin menggambar banyak objek dan digambar secara acak?
Untuk menjawab pertanyaan ini, kita harus menggunakan perulangan dan fungsi random().
Lebih jelasnya, mari kita bahas…
Menggambar Objek dengan PerulanganPada contoh di artikel sebelumnya, kita sudah pernah menggamabar persegi dua kali.
<script type="text/javascript"> var canvas = document.
Sebelum kedatangan HTML5, Game dan elemen multimedia lainnya disajikan dalam browser menggunakan Flash.
Banyak game berbasis Flash yang bisa dimainkan melalui browser. Bahkan Flash juga digunakan untuk memutar video.
Seingat saya dulu…tanpa Flash Player, kita tidak bisa memutar video di Youtube.
Namun semuanya berubah setelah kedatangan HTML5… 1
HTML5 membawa banyak elemen baru yang menggantikan tugas Flash dalam browser. Salah satunya adalah canvas.
Validasi data itu penting!
Mengapa?
Karena jika kita tidak melakukan validasi, user bisa sembarangan mengisi data dan akibatnya website kita menjadi error.
Dampak terburuknya:
Website kita bisa diambil alih atau di-hack.
Ngeri kan.
Karena itu..
Jangan percaya 100% dengan data yang diinputkan user. Bisa saja itu script jahat.
Nah, biar terhindar dari kejadian ini.. kita disarankan melakukan validasi sebelum data itu dikirim ke server.
Dulu.. validasi data di sisi client dilakukan dengan Javascript.
Sebuah elemen dalam HTML terdiri dari tag pembuka dan tag penutup. Namun, ada juga yang tidak memiliki tag penutup.
Kasihan juga ya, hehe 😄
Meskipun demikian, elemen ini tetap valid dan dapat dibaca browser. Elemen yang tidak memiliki tag penutup ini juga disebut void element, karena tidak memiliki isi.
Apa saja tag-tag yang tidak memiliki penutup itu?
mari kita simak…
1. Tag <area>Tag <area> fungsinya untuk mendefinisikan area pada image map.
Pada tulisan sebelumnya, saya pernah membahas tentang cara membuat halaman Github untuk profil individu dan organisasi. Nah, kali ini kita akan membuat halaman github untuk proyek atau repositori.
Jadi sebenarnya, setiap proyek atau respositori di Github itu bisa dijadikan halaman Github (Github Pages). Pastikan di dalam proyek berisi file web statis seperti HTML, CSS, dan Javascript.
Membuat repositoriBuatlah repositori dengan nama apa saja, kemudian di dalamnya berisi file web statis. Setelah itu, upload ke github.
Baru belajar Javascript?
..dan masih bingung dengan cara menulis Javascript di HTML?
Tenang!
Saya akan menjelaskannya.
Ada 4 cara menulis kode Javascript pada HTML.
Dari keempat cara ini, ada yang biasa dan sering digunakan..
..ada juga yang ‘aneh’, jarang digunakan sih tapi masih work!
Apa saja keempat cara itu?
Mari kita bahas:
googletag.cmd.push(function () { googletag.display('div-gpt-ad-multibanner1'); }); 1. Menulis Javascript pada Tag <script>Penulisan kode Javascript menggunakan tag <script> adalah cara umum yang digunakan.