Section Artikel
JavaScript Display Possibilities
JavaScript dapat “menampilkan” atau menghasilkan output data dengan berbagai cara, contohnya seperti berikut :
- Penulisan ke dalam elemen HTML, menggunakan innerHTML.
- Penulisan ke dalam output HTML menggunakan document.write ().
- Penulisan ke dalam kotak peringatan, menggunakan window.alert ().
- Penulisan ke konsol browser, menggunakan console.log ().
Penggunaan innerHTML
Untuk mengakses elemen HTML, JavaScript dapat menggunakan method document.getElementById (id).
Atribut id mendefinisikan elemen HTML. Properti innerHTML mendefinisikan konten HTML.
Contohnya :
<!DOCTYPE html>
<html>
<body>
<h2>Halaman web pertamaku</h2>
<p>Paragraf pertamaku</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
Mengubah properti innerHTML dari elemen HTML adalah cara umum untuk menampilkan data dalam HTML.
Penggunaan document.write()
Untuk tujuan pengujian, maka akan lebih mudah menggunakan document.write ().
Contoh :
<!DOCTYPE html> <html> <body> <h2>Halaman web pertamaku</h2> <p>Paragraf pertamaku</p> <p>Jangan pernah memanggil document.write setelah dokumen selesai dimuat. Ini akan menimpa seluruh dokumen.</p> <script> document.write(5 + 6); </script> </body> </html>
Menggunakan document.write () setelah dokumen HTML dimuat, akan menghapus semua HTML yang ada.
Contoh :
<!DOCTYPE html> <html> <body> <h2>Halaman web pertamaku</h2> <p>Paragraf pertamaku</p> <button type="button" onclick="document.write(5 + 6)">Klik disini</button> </body> </html>
Metode document.write () sebaiknya hanya digunakan untuk tujuan pengujian.
Penggunaan windows.alert()
Untuk menampilkan sebuah data, dapat dilakukan dengan menggunakan alert box.
Contoh :
<!DOCTYPE html> <html> <body> <h2>Halaman web pertamaku</h2> <p>Paragraf pertamaku</p> <script> window.alert(5 + 6); </script> </body> </html>
Penggunaan keyword window dapat diskip.
Dalam JavaScript, objek window adalah objek cakupan global, yang berarti bahwa variabel, properti, dan metode secara default dimiliki oleh objek window. Ini juga berarti bahwa menentukan keyword window adalah pilihan opsional.
Contoh :
<!DOCTYPE html> <html> <body> <h2>Halaman web pertamaku</h2> <p>Paragraf pertamaku</p> <script> alert(5 + 6); </script> </body> </html>
Penggunaan console.log()
Untuk tujuan debugging dapat dilakukan dengan cara memanggil metode console.log () di browser untuk menampilkan data.
Contoh :
<!DOCTYPE html> <html> <body> <h2>Activate Debugging</h2> <p>F12 pada keyboard akan mengaktifkan debugging.</p> <p>Lalu klik "Console" pada menu debugger.</p> <p>Kemudian click Run kembali.</p> <script> console.log(5 + 6); </script> </body> </html>
JavaScript Print
JavaScript tidak memiliki object print atau method print apapun untuk mencetak data.
Kita tidak dapat mengakses perangkat output dari JavaScript.
Satu-satunya pengecualian adalah kita dapat memanggil method window.print () di browser untuk mencetak konten window saat ini.
Contoh :
<!DOCTYPE html> <html> <body> <h2>Method window.print()</h2> <p>Klik tombol untuk mencetak halaman saat ini.</p> <button onclick="window.print()">cetak halaman ini</button> </body> </html>
