Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar JavaScript Bagian 3 : Cara Penulisan Variabel JavaScript, selanjutnya kita akan belajar cara menampilkan output JavaScript.
Menampilkan Output di JavaScript
Ada situasi tertentu di mana Anda mungkin perlu menampilkan output dari kode JavaScript Anda.
Misalnya, Anda mungkin ingin melihat nilai variabel, atau menulis pesan ke konsol browser untuk membantu Anda men-debug masalah dalam kode JavaScript yang sedang berjalan.
Dalam JavaScript ada beberapa cara berbeda untuk menghasilkan output termasuk menulis output ke jendela browser atau konsol browser, menampilkan output di kotak dialog, menulis output ke dalam elemen HTML, dll.
Menulis Output ke Konsol Browser
Anda dapat dengan mudah mengeluarkan pesan atau menulis data ke konsol browser menggunakan metode console.log ().
Ini adalah metode yang sederhana, tetapi sangat bagus untuk menghasilkan output yang rinci. Berikut contohnya:
<script>
// Cetak pesan sederhana
console.log("Halo dunia!"); // Prints: Halo dunia!
// Cetak nilai variabel
var x = 10;
var y = 20;
var sum = x + y;
console.log(sum); // Prints: 30
</script>
Menampilkan Output dalam Kotak Dialog Peringatan
Anda juga dapat menggunakan kotak dialog peringatan untuk menampilkan pesan atau data output kepada pengguna.
Kotak dialog peringatan dibuat menggunakan metode alert (). Berikut ini contohnya:
<script>
// Tampilkan pesan sederhana
alert("Halo dunia!"); // Outputs: Halo dunia!
// Tampilkan nilai variabel
var x = 10;
var y = 20;
var sum = x + y;
alert(sum); // Outputs: 30
</script>
Menulis Output ke Jendela Browser
Anda dapat menggunakan metode document.write () untuk menulis konten ke dokumen saat ini hanya saat dokumen tersebut sedang diurai.
Berikut contohnya:
<script>
// Cetak seuah pesan sederhana
document.write("Halo dunia!"); // Prints: Halo dunia!
// Cetak nilai variabel
var x = 10;
var y = 20;
var sum = x + y;
document.write(sum); // Prints: 30
</script>
Jika Anda menggunakan metode document.write () setelah halaman dimuat, ini akan menimpa semua konten yang ada di dokumen.
Lihat contoh berikut:
<body>
<h1>Ini adalah heading</h1>
<p>Ini adalah paragraph dari text.</p>
<button type="button" onclick="document.write('Halo dunia!')">Klik Saya</button>
</body>
Memasukkan Output Di Dalam Elemen HTML
Anda juga dapat menulis atau menyisipkan output di dalam elemen HTML menggunakan properti elemen innerHTML.
Namun, sebelum menulis output, kita perlu memilih elemen menggunakan metode seperti getElementById (), seperti yang ditunjukkan pada contoh berikut:
<body>
<p id="salam"></p>
<p id="hasil"></p>
<script>
// Menulis string teks di dalam sebuah elemen
document.getElementById("salam").innerHTML = "Halo Dunia!";
// Menulis nilai variabel di dalam elemen
var x = 10;
var y = 20;
var sum = x + y;
document.getElementById("hasil").innerHTML = sum;
</script>
</body>
Semoga tutorial ini membantu Anda untuk mempelajari cara menampilkan output JavaScript.
