Menampilkan Data Javascript
Bagaimana cara menampilkan output atau hasil perhitungan dari kode javascript?
Dari sekian banyak cara untuk menampilkan data keluaran javascript, beberapa diantaranya yang paling mudah adalah menggunakan:
Untuk sekarang, mari kita bahas satu persatu.
innerHTML
Ini adalah cara yang paling mudah dan paling banyak di gunakan, apabila kita ingin menuliskan output javascript ke halaman website.
Pertama kita harus menulis seluruh document htmlnya secara penuh, kemudian kita tulis tag yang ingin dijadikan container/pembungkusnya. Jangan lupa pula untuk menambahkan tag script di bagian paling bawah sebelum tag body.
Kemudian kita pilih container yang telah dibuat sebelumnya, kemudian cetak data yang ingin ditampilkan menggunakan innerHTMl seperti contoh dibawah.
<html>
<head>
<title>My Website</title>
</head>
<body>
<div class="container"></div>
<script>
document.querySelector("container").innerHTML = "Hello My Site!"
</script>
</body>
</html>
Quick Tips
document.querySelector adalah salah satu cara untuk kita menyeleksi tag html yang kita inginkan. Apabila kita cetak dalam console, maka akan terlihat tag yang telah diseleksinya.
Karena innerHTML akan membaca semuanya sebagai HTML, ini akan membuat situs kita mudah terserang XSS atau Cross Site Scripting. Untuk menghindarinya, kita harus benar-benar tahu bahwa data yang akan ditampilkan harus benar-benar bersih dari tag html.
/**
* akan tercetak sebagai tag html
*/
document.querySelector("container").innerHTML = "<script> alert('HACKED!!') </script>"
innerText
Selain InnerHTML, InnerText adalah cara lain untuk menampilkan data dari javascript. Perbedaannya InnerText hanya menjadikan text saj, bukan tag html. Sehingga apabila terdapat script jahat di dalamnya, maka hanya akan tercetak sebagai plain text.
<html>
<head>
<title>My Website</title>
</head>
<body>
<div class="container"></div>
<script>
/**
* Tercetak sebagai plain text, bukan tag html
*/
document.querySelector("container").innerText = "<script> alert('HACKED!!') </script>"
</script>
</body>
</html>
document.write()
Apabila ingin menggunakan cara ini, kita hanya harus menuliskan di dalam tag script seperti contoh dibawah.
<html>
<head>
<title>My Website</title>
</head>
<body>
<div class="container"></div>
<script>
document.write("Hello World")
// Bisa juga seperti ini
document.querySelector("container").write("Hello World")
</script>
</body>
</html>
Namun document.write dianggap salah satu praktik buruk dalam menuliskan javascript ke dalam html kita.
Kalian bisa membaca bisa membaca diskusi tentang hal tersebut disini, mengapa document write adalah praktik buruk
alert()
Alert sebenarnya adalah pop-up, tidak seperti ketiga cara sebelumnya. Cara menggunakannya hanya tinggal menuliskan alert, diikuti tanda kurung dan apa yang ingin di tuliskan di dalamnya.
<script>
alert("Hello World")
</script>
Karena sangat buruk dari segi ui/ux, alert kini mulai di tinggalkan untuk pengembangan website-website modern. Namun kalian tetap bisa menggunakan alert buatan sendiri atau dari pihak ketiga, seperti sweet alert yang akan segera saya buat tutorialnya.
Console Browser
Console browser sering digunakan para pengembang atau developer web sebagai sarana untuk debugging, atau hanya sekedar melihat apa isi sebuah variabel.
Untuk menggunakan console browser, kalian hanya perlu membuka developer tools di dalam browser teman-teman. Dengan klik kanan lalu inspect element atau ctrl + shift + i, kemudian klik bagian console.
console.log("Hello World")
console.warn("Bagian ini warning, harus diperiksa lagi.")
console.error("Arghh, error!")
Ada beberapa jenis console yang bisa kita pakai selain yang saya contohkan diatas, lebih lengkapnya kalian dapat membacanya di sini.
Akhir Kata
Ada begitu banyak cara untuk menampilkan data output javascript, dan masing-masing cara tersebut memiliki kelebihan dan kekurangannya tersendiri.
Sebagai seorang developer, kita seharusnya tidak memperdebatkan cara apa yang terbaik. Namun kita hanya harus memilih cara yang sesuai untuk kasus yang kita miliki, karena tiap kasus akan memiliki cara yang berbeda pula.
Terimakasih dan sampai jumpa di artikel selanjutnya.