Data yang dihasilkan oleh JavaScript dapat ditampilkan melalui beberapa cara :
- Ditulis pada elemen HTML memakai innerHTML
- Ditulis langsung pada dokumen HTML memakai fungsi documen.write()
- Ditampilkan sebagai alert memakai fungsi alert()
- Ditulis pada console web browser memakai fungsi console.log()
Memakai innerHTML #
Elemen HTML mempunyai properti innerHTML. Properti innerHTML adalah konten elemen HTML itu sendiri. Kita bisa mengubah nilai properti innerHTML dengan data yang ingin ditampilkan.
Kita harus mendapatkan akses kepada elemen HTML sebelum mengakses properti innerHTML. Fungsi document.getElementById dipakai untuk mendapatkan akses kepada suatu elemen HTML. Parameter fungsi ini adalah atribut id dari elemen HTML yang ingin kita akses. Setelah akses kepada elemen HTML didapatkan baru kita bisa mengubah nilai properti innerHTML.
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>Properti innerHTML paling banyak digunakan untuk menampilkan data memakai JavaScript.
Memakai document.write() #
Cara lain untuk menampilkan data adalah memakai fungsi document.write(). Parameter fungsi ini adalah data yang ingin kita tampilkan.
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>Fungsi document.write akan menghapus semua elemen HTML yang sudah ditampilkan sebelumnya apabila dipanggil setelah dokumen HTML ditampilkan. Perhatikan contoh di bawah ini.
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>Fungsi document.write() biasanya dipakai untuk keperluan testing.
Memakai window.alert() #
Cara lain untuk menampilkan data adalah memakai fungsi window.alert(). Parameter fungsi ini adalah data yang ingin kita tampilkan. Alert akan ditampilkan dalam bentuk kotak informasi pada web browser.
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>Untuk kemudahan, alert bisa ditampilkan cukup dengan memanggil fungsi alert().
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>Memakai console.log() #
Log digunakan untuk keperluan debugging. Kita akan membahas debugging lebih mendalam pada topik selanjutnya. Fungsi console.log() akan menampilkan data di dalam tab log pada web browser.
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
