Keluaran JavaScript
Kemungkinan Tampilan 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 kotak peringatan, menggunakan
window.alert(). - Menulis ke konsol browser, menggunakan
console.log().
Menggunakan innerHTML
Untuk mengakses elemen HTML, JavaScript dapat menggunakan document.getElementById(id)metode.
Atribut idmendefinisikan elemen HTML. Properti innerHTML mendefinisikan konten HTML:
Contoh
<!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>
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>
<h1>My First Web Page</h1>
<p>My first paragraph.</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>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
Metode document.write() hanya boleh digunakan untuk pengujian.
Menggunakan window.alert()
Anda dapat menggunakan kotak peringatan untuk menampilkan data:
Contoh
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Anda dapat melewatkan windowkata kunci.
Dalam JavaScript, objek jendela adalah objek lingkup global, yang berarti bahwa variabel, properti, dan metode secara default milik objek jendela. Ini juga berarti bahwa menentukan windowkata kunci adalah opsional:
Contoh
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
Menggunakan console.log()
Untuk tujuan debugging, Anda dapat memanggil console.log()metode di browser untuk menampilkan data.
Anda akan mempelajari lebih lanjut tentang debugging di bab selanjutnya.
Contoh
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Cetak JavaScript
JavaScript tidak memiliki objek cetak atau metode cetak.
Anda tidak dapat mengakses perangkat keluaran dari JavaScript.
Satu-satunya pengecualian adalah Anda dapat memanggil window.print()metode di browser untuk mencetak konten dari jendela saat ini.
Contoh
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>