Menampilkan Data JavaScript

Ada beberapa cara untuk menampilkan data menggunakan JavaScript, diantaranya yaitu:

  • Menggunakan window.alert()
  • Menggunakan document.write()
  • Menggunakan innerHTML
  • Menggunakan console.log()

window.alert()

Code window.alert() akan memunculkan sebuah window popup untuk menampilkan data:

Contoh 1:

<script>
    window.alert(2 + 3);
</script>

Hasil contoh 1:

document.write()

Code document.write() akan menampilkan tulisan atau data yang diinginkan pada HTML:

Contoh 2:

<script>
    document.write(2 + 3);
</script>

Hasil contoh 2:

5

Gunakan code document.write() hanya untuk testing saja. Karena menggunakan code document.write() setelah elemen HTML ditampilkan akan menghapus semua elemen HTML yang ada:

Contoh 3:

<html>
<head>
</head>
<body>
<h3>Title blog</h3>
<p>Paragraph pertama disini.</p>
<button type="button" onclick="document.write(2 + 3)">Pencet disini!</button>
</body>
</html>

Hasil contoh 3:

Title blog

Paragraph pertama disini.

innerHTML

JavaScript menggunakan method document.getElementById(id) untuk mengakses sebuah elemen HTML.

Atribut id menentukan elemen HTML yang ingin diakses.

Property innerHTML yang akan menentukan content yang ingin ditampilkan.

Contoh 4:

<html>
<head>
</head>
<body>
<h3>Title blog</h3>
<p>Paragraph pertama disini.</p>
<p id="coba"></p>
    <script>
    document.getElementById("coba").innerHTML = 2 + 3;
    </script>
</body>
</html>

Hasil contoh 4:

Title blog

Paragraph pertama disini.

5

Berikut ini adalah penjelasan code di atas:

document.getElementById("coba").innerHTML = 2 + 3;

Code di atas artinya cari elemen HTML dengan [id="coba"]. Kemudian ganti elemen HTML tersebut dengan [2 + 3].

console.log()

Method console.log() bisa digunakan untuk menampilkan data di browser.

Contoh 5:

<script>
    console.log(2 + 3);
</script>

Hasil contoh 5:

Untuk bisa melihat hasil dari method console.log(), lakukan langkah berikut ini:

  1. Buka browser console (Chrome, IE, Firefox) dengan menekan tombol F12.
  2. Pilih tab Console.
  3. Lihat ada hasil dari (2 + 3) di sana.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>