Output JavaScript

JavaScript tidak menyediakan fungsi cetak atau tampilan bawaan apapun.

Rancangan tampilan JavaScript

JavaScript dapat "menampilkan" data dengan berbagai cara:

  • menggunakan window.alert() menulis ke kotak peringatan
  • menggunakan document.write(); menulis ke output HTML
  • menggunakan innerHTML menulis ke elemen HTML
  • menggunakan console.log(); menulis ke konsol peramban

menggunakan innerHTML

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

id Atribut menentukan elemen HTML. Atribut innerHTML menentukan konten HTML:

Contoh

<!DOCTYPE html>
<html>
<body>
<h1>Halaman Pertama Saya</h1>
<p>Paragraf Pertama Saya</p>
<p id="demo"></p>
<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

Coba Sendiri

Peringatan:Merubah atribut innerHTML elemen HTML adalah metode biasa untuk menampilkan data di HTML.

Gunakan document.write()

Untuk tujuan pengujian, gunakan document.write(); lebih mudah untuk digunakan:

Contoh

<!DOCTYPE html>
<html>
<body>
<h1>Halaman Pertama Saya</h1>
<p>Paragraf Pertama Saya</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

Coba Sendiri

Perhatian:dalam dokumen HTML yang penuh untuk dimuat document.write(); GunakanHapus semua HTML yang ada :

Contoh

<!DOCTYPE html>
<html>
<body>
<h1>Halaman Pertama Saya</h1>
<p>Paragraf Pertama Saya</p>
<button onclick="document.write(5 + 6)">Coba</button>
</body>
</html>

Coba Sendiri

Peringatan:document.write(); metode hanya untuk pengujian.

Gunakan window.alert()

Anda dapat menggunakan kotak peringatan untuk menampilkan data:

Contoh

<!DOCTYPE html>
<html>
<body>
<h1>Halaman Pertama Saya</h1>
<p>Paragraf Pertama Saya</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

Coba Sendiri

Gunakan console.log()

Dalam browser, Anda dapat menggunakan console.log(); metode untuk menampilkan data.

Aktifkan kotak kontrol browser melalui F12 dan pilih 'Kotak Kontrol' di menu.

Contoh

<!DOCTYPE html>
<html>
<body>
<h1>Halaman Pertama Saya</h1>
<p>Paragraf Pertama Saya</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>

Coba Sendiri