Output JavaScript

View Categories

Output JavaScript

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

Tutorial sebelumnya : Cara Membuat JavaScript Di HTML
Tutorial setelahnya : Contoh Coding JavaScript
Semua Tutorial JavaScript : Tutorial JavaScript 

Tinggalkan Balasan