Cara Menampilkan Output di JS untuk Pemula

Cara Menampilkan Output di JS adalah keterampilan dasar untuk memeriksa hasil kode, debugging, dan menampilkan informasi kepada pengguna.

Halo teman-teman, di artikel ini kita akan bahas cara paling praktis untuk menunjukkan hasil program JavaScript, baik saat belajar maupun saat membangun fitur web yang nyata. Pada artikel ini analiswinter.com akan membahas teknik-teknik inti, kapan menggunakannya, beserta contoh singkat yang mudah dicoba.

Cara Menampilkan Output Di JS

1. Console.log Untuk Developer

console.log() cocok untuk menampilkan output ke konsol pengembang pada browser. Ini ideal untuk belajar dan debugging karena tidak mengganggu UI.

const nama = "analiswinter";
const umur = 3;
console.log("Halo, "+ nama +"! Umur: ", umur);
// Alternatif:
console.log(`Halo, ${nama}! Umur: ${umur}`);

Kalian bisa membuka Developer Tools (biasanya dengan F12 atau Ctrl+Shift+I), lalu pilih tab Console untuk melihat output.

2. Alert Untuk Pesan Cepat

alert() menampilkan kotak dialog sederhana. Gunakan hanya jika kalian perlu memastikan pengguna melihat pesan singkat karena dialog ini memblokir interaksi sampai ditutup.

alert("Data berhasil disimpan!");

3. Menulis Ke DOM (innerText / InnerHTML)

Menampilkan output langsung pada halaman membuat hasil program terlihat oleh pengguna. Cara umum adalah memanipulasi elemen DOM menggunakan innerText atau innerHTML.

<div id="output"></div>
<script>
  const total = 42;
  const el = document.getElementById('output');
  el.innerText = `Total: ${total}`; // aman untuk teks
</script>

Jika kalian perlu memasukkan markup, gunakan innerHTML namun tetap hati-hati terhadap input dari pengguna demi keamanan.

<div id="hasil"></div>
<script>
  const item = "<strong>Produk</strong>";
  document.getElementById('hasil').innerHTML = `Item: ${item}`;
</script>

4. Document.write (Jarang Direkomendasikan)

document.write() menulis langsung ke dokumen saat proses loading. Metode ini jarang direkomendasikan karena bisa menimpa seluruh halaman bila dipanggil setelah load selesai.

document.write("<p>Halo dari document.write()</p>");

5. Output Ke Elemen Form Atau Komponen UI

Kalian juga bisa mengisi nilai input, paragraf, atau bahkan komponen modern (misalnya framework) untuk menampilkan hasil.

<input id="display" readonly>
<script>
  const skor = 98;
  document.getElementById('display').value = `Skor: ${skor}`;
</script>

Perbandingan Singkat Metode Output

Metode	Kegunaan	Kelebihan	Kekurangan
console.log	Debugging developer	Tidak ganggu UI, detail	Tidak terlihat oleh pengguna biasa
alert	Pesan penting	Pasti terlihat	Mengganggu, memblokir interaksi
innerText/innerHTML	Tampilkan di halaman	User-facing, fleksibel	Perlu jaga keamanan (XSS) bila pakai HTML
document.write	Legacy	Mudah untuk demo lama	Tidak direkomendasikan, berpotensi menimpa halaman

Praktik Terbaik

Selalu pilih metode sesuai konteks. Untuk pengembangan gunakan console.log(). Untuk antarmuka, tampilkan lewat DOM. Hindari document.write() pada aplikasi modern. Validasi dan escape data dari pengguna sebelum menaruhnya di halaman, agar aman dari injeksi.

Contoh Mini Proyek

Contoh berikut menggabungkan input pengguna dan output ke halaman.

<input id="nama" placeholder="Masukkan nama">
<button id="tampil">Tampilkan</button>
<p id="sapaan"></p>
<script>
  const btn = document.getElementById('tampil');
  btn.addEventListener('click', () => {
    const nama = document.getElementById('nama').value.trim();
    const sapaan = nama ? `Halo, ${nama}!` : 'Silakan isi nama dulu.';
    document.getElementById('sapaan').innerText = sapaan;
    console.log('Sapaan ditampilkan:', sapaan);
  });
</script>

DEMO

Kesimpulan

Cara Menampilkan Output di JS bisa dilakukan lewat konsol, dialog, manipulasi DOM, hingga metode legacy seperti document.write(). Pilih sesuai kebutuhan: gunakan konsol untuk debugging, DOM untuk tampilan ke pengguna, dan hindari teknik yang berisiko. Sekian artikel dari analiswinter.com, semoga membantu dan selamat bereksperimen!

AnalisWinter