Panduan Lengkap JavaScript Output: Cara Menampilkan Data di Website (Tutorial JavaScript Part 3)
 |
| Gambar 3.0 : Gambar JavaScript |
Kalau lo lagi belajar JavaScript, pasti lo bakal sering banget butuh cara buat menampilkan output ke user. Nah, di artikel ini, gue bakal jelasin berbagai cara buat nge-display hasil dari kode JavaScript lo.
Mulai dari innerHTML, innerText, document.write(), alert(), console.log(), sampai cara buat nge-print halaman pake JavaScript. Cus, kita bahas satu-satu!
1. Cara Menampilkan JavaScript
Di JavaScript, ada beberapa cara buat nampilin data:
✅ innerHTML → Buat ngeubah isi elemen HTML.
✅ innerText → Mirip innerHTML, tapi cuma teks (tanpa HTML).
✅ document.write() → Buat langsung nulis ke halaman.
✅ window.alert() → Nampilin pop-up alert ke user.
✅ console.log() → Buat nampilin output di console browser.
✅ window.print() → Buat nge-print halaman lewat browser.
Masing-masing punya kegunaan yang beda, jadi lo harus tau kapan pake yang mana.
2. Menggunakan innerHTML
Atribut innerHTML sering dipake buat ngubah isi elemen HTML. Lo bisa masukin teks, angka, bahkan kode HTML ke dalam elemen.
Contoh Penggunaan:
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "<b>Halo, Dunia!</b>";
</script>
Hasilnya:
 |
| Gambar 3.1 : Contoh innerHTML |
Teks "Halo, Dunia!" bakal muncul di dalam paragraf <p> dengan format bold.
⚠ Catatan: innerHTML bisa dipake buat masukin HTML, tapi hati-hati sama XSS (Cross-Site Scripting) kalau data berasal dari user.
3. Menggunakan innerText
Kalau innerHTML bisa nampilin teks + HTML, innerText cuma nampilin teks biasa tanpa interpretasi HTML.
Contoh Penggunaan:
<p id="demo"></p>
<script>
document.getElementById("demo").innerText = "<b>Halo, Dunia!</b>";
</script>
Output di halaman:
 |
| Gambar 3.2 : Contoh innerText |
Teks gak bakal di-bold, karena <b> dianggap teks biasa, bukan HTML.
4. Menggunakan document.write()
document.write() biasanya dipake buat nulis langsung ke dalam halaman. Tapi ini gak disarankan buat dipake setelah halaman dimuat, karena bisa ngehapus seluruh konten halaman.
Contoh Penggunaan:
<script>
document.write("Selamat datang di website gue!");
</script>
Hasilnya:
 |
| Gambar 3.3 : Contoh document.write |
Teks bakal langsung muncul di halaman saat halaman dimuat.
⚠ Catatan: Kalau lo pake document.write() setelah halaman dimuat (misalnya lewat event onclick), itu bakal ngehapus semua konten di halaman.
5. Menggunakan window.alert()
Kalau lo pengen nampilin pesan ke user dalam bentuk pop-up, lo bisa pake window.alert().
Contoh Penggunaan:
<script>
alert("Halo, selamat datang!");
</script>
Hasilnya:
 |
| Gambar 3.4 : Contoh window.alert() |
Begitu halaman dibuka, user bakal lihat pop-up dengan teks "Halo, selamat datang!".
⚠ Catatan: Jangan kebanyakan pake alert(), karena bisa ganggu user experience.
6. Menggunakan console.log()
Buat nge-debug atau ngecek nilai suatu variabel, lo bisa pake console.log(). Output-nya cuma muncul di console browser, jadi gak bakal keliatan di halaman.
Contoh Penggunaan:
<script>
console.log("Ini pesan di console");
</script>
Hasilnya:
 |
| Gambar 3.5 : Contoh console.log() |
Lo bisa buka DevTools (F12 > Console) buat lihat outputnya.
console.log() sering dipake sama developer buat ngecek kode tanpa ganggu tampilan website.
7. JavaScript Print (window.print())
Kalau lo butuh fitur buat nge-print halaman web, JavaScript punya fungsi window.print().
Contoh Penggunaan:
<button onclick="window.print()">Print Halaman Ini</button>
Hasilnya:
 |
| Gambar 3.6 : Contoh window.print() |
Pas tombol diklik, browser bakal ngebuka pop-up print.
Kesimpulan
Lo udah belajar beberapa cara buat nampilin output di JavaScript. Biar gampang diingat:
✅ innerHTML → Ubah isi elemen dengan HTML.
✅ innerText → Ubah isi elemen dengan teks biasa.
✅ document.write() → Tulis langsung ke halaman (gak disarankan setelah load).
✅ alert() → Tampil pop-up alert ke user.
✅ console.log() → Debugging di console browser.
✅ window.print() → Nge-print halaman lewat browser.
Semoga artikel ini bermanfaat buat lo yang lagi belajar JavaScript! Kalau ada pertanyaan, tulis aja di kolom komentar. Selamat ngoding!
Posting Komentar untuk "Panduan Lengkap JavaScript Output: Cara Menampilkan Data di Website (Tutorial JavaScript Part 3)"