Output JavaScript


JavaScript dapat "menampilkan" data dengan cara yang berbeda:

  • Menulis ke dalam elemen HTML menggunakan innerHTML.
  • Menulis ke dalam output HTML menggunakan document.write().
  • Menulis ke dalam alert box, menggunakan window.alert().
  • Menulis ke konsol browser, menggunakan console.log().

Menggunakan innerHTML

Untuk mengakses elemen HTML, JavaScript dapat menggunakan metode document.getElementById(id).

Atribut id mendefinisikan elemen HTML. Properti innerHTML mendefinisikan konten HTML.


Contoh

<!DOCTYPE html>
<html>
  <body>
    <h2>Halaman Web Pertama Saya</h2>
    <p>Paragraf pertama saya.</p>

    <p id="demo1"></p>

    <script>
      document.getElementById("demo1").innerHTML = 5 + 2;
    </script>
  </body>
</html>

Hasil

Halaman Web Pertama Saya

Paragraf pertama saya.


Catatan: Mengubah properti innerHTML dari elemen HTML adalah cara umum untuk menampilkan data dalam HTML.


Menggunakan document.write()

Untuk tujuan pengujian, akan lebih mudah untuk menggunakan document.write().


Contoh

<!DOCTYPE html>
<html>
  <body>
    <h2>Halaman Web Pertama Saya</h2>
    <p>Paragraf pertama saya.</p>

    <script>
      document.write(5 + 3);
    </script>
  </body>
</html>

Hasil

Halaman Web Pertama Saya

Paragraf pertama saya.



Menggunakan document.write() setelah dokumen HTML dimuat, akan menghapus semua HTML yang ada.


Contoh

<!DOCTYPE html>
<html>
  <body>
    <h2>Halaman Web Pertama Saya</h2>
    <p>Paragraf pertama saya.</p>

    <button type="button" onclick="document.write(5 + 4)">Coba</button>
  </body>
</html>

Hasil

Halaman Web Pertama Saya

Paragraf pertama saya.



Catatan: Metode document.write() hanya boleh digunakan untuk pengujian.


Menggunakan window.alert()

Anda dapat menggunakan alert box (kotak peringatan) untuk menampilkan data.


Contoh

<!DOCTYPE html>
<html>
  <body>
    <h2>Halaman Web Pertama Saya</h2>
    <p>Paragraf pertama saya.</p>

    <script>
      window.alert(5 + 5);
    </script>
  </body>
</html>

Kita dapat skip keyword window.

Dalam JavaScript, objek window adalah objek lingkup global, yang berarti bahwa variabel, properti, dan metode secara default milik objek window. Ini juga berarti bahwa menentukan keyword window adalah opsional.


Contoh

<!DOCTYPE html>
<html>
  <body>
    <h2>Halaman Web Pertama Saya</h2>
    <p>Paragraf pertama saya.</p>

    <script>
      alert(5 + 6);
    </script>
  </body>
</html>

Menggunakan console.log()

Untuk tujuan debugging, kita dapat memanggil metode console.log() di browser untuk menampilkan data.


Contoh

<!DOCTYPE html>
<html>
  <body>
    <h2>Mengaktikan Debugging</h2>

    <script>
      console.log(5 + 6);
    </script>
  </body>
</html>

Print JavaScript

JavaScript tidak memiliki objek print atau metode print.

Kita tidak dapat mengakses perangkat keluaran dari JavaScript.

Satu-satunya pengecualian adalah kita dapat memanggil metode window.print() di browser untuk mencetak konten dari window saat ini.


Contoh

<!DOCTYPE html>
<html>
  <body>
    <h2>Metode window.print()</h2>

    <p>Klik tombol dibawah ini untuk menampilkan halaman print.</p>

    <button onclick="window.print()">Print halaman ini</button>
  </body>
</html>

Hasil

Metode window.print()

Klik tombol dibawah ini untuk menampilkan halaman print.



Sumber referensi: w3schools

Komentar

Posting Komentar