Tutorial Javascript Dasar #02 – Cara Menampilkan Output pada JavaScript
Empat Cara Menampilkan Output pada JavaScript
Sebelum kita masuk ke cara bagaimana menampilkan sebuah output pada Javascript, mari kita samakan dahulu pemahaman tentang output yaitu informasi yang dihasilkan setelah dilakukan proses atau tampilan program yang biasanya digunakan untuk memperlihatkan hasil akhir dari coding yang telah kita buat. Sekarang mari kita mulai bahas tentang 4 cara untuk menampilkan output di JavaScript.
Pada artikel kali ini kita akan mencoba 4 cara untuk menampilkan output di JavaScript:
- Menampilkan ke dalam elemen HTML, menggunakan innerHTML.
- Menampilkan ke dalam HTML, menggunakan document.write().
- Menampilkan ke dalam alert box, menggunakan window.alert().
- Menampilkan ke dalam browser console, menggunakan console.log().
Pada JavaScript salah satu cara untuk menampilkan output adalah menggunakan console.log(). Jika kalian yang masih bingung tentang apa itu console.log() atau ingin mengetahui JavaScript secara dasar kalian bisa baca terlebih dahulu artikel kami sebelumnya di “Pengenalan Javascript untuk Pemula”.
1. Menggunakan innerHTML
innerHTML adalah properti yang digunakan untuk memperoleh atau merubah konten dari elemen itu sendiri. Dengan innerHTML, kita dapat menampilkan output ke elemen yang lebih spesifik dengan menggunakan method document.getElementById(id).
Contoh :
<html lang="en">
<head>
<title>Belajar Javascript</title>
</head>
<body>
<h1>Tutorial Javascript untuk Pemula</h1>
<div id="hasil-output-1"></div>
<hr>
<div id="hasil-output-2"></div>
<script>
// membuat objek elemen
var hasil = document.getElementById("hasil-output-1");
// menampilkan output ke elemen hasil
hasil.innerHTML = "<p>Contoh menggunakan InnerHTML 1</p>";
//atau bisa juga langsung seperti ini
document.getElementById("hasil-output-2").innerHTML = `<h1>Hello Winners!</h1>
<div>Ini adalah tutorial javascript dasar, contoh menggunakan innerHTML. untuk tutorial lebih banyak silahkan lihat
<a href="https://blog.xsis.academy" target="_blank" rel="noopener noreferrer">disini</a>.
</div>`;
</script>
</body>
</html>
2. Menggunakan document.write()
Biasanya document.write() digunakan untuk pengujian. Ketika kita menggunakan document.write() setelah dokumen HTML dimuat, setelah itu semua HTML yang ada akan hilang atau terhapus.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
<script>
document.write("<hr>");
document.write("<p>Lagi belajar JavaScript nih</p>");
document.write("di <a href='https://blog.xsis.academy'>Xsis Academy</a>")
</script>
<!-- Menggunakan document.write() setelah dokumen HTML dimuat, akan menghapus semua HTML yang ada contohnya dibawah -->
<hr>
<button type="button"
onclick="document.write('Ini contoh menggunakan document.write() setelah dokumen HTML dimuat, akan menghapus semua HTML yang ada')">Coba
deh!</button>
</body>
</html>3. Menggunakan fungsi alert()
Fungsi alert() adalah fungsi untuk menampilkan alert box. Dengan ini kita dapat menampilkan output di jendela dialog.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Javascript</title>
<script>
alert("Selamat datang di tutorial belajar Javascript bersama Xsis");
function sayHello(){
alert("Hello Winners!");
}
</script>
</head>
<body>
<button onclick="sayHello()">Coba deh!</button>
</body>
</html>
4. Menggunakan console.log()
Seperti yang kita tahu kemarin, fungsi console.log() adalah fungsi untuk menampilkan teks ke console Javascript. Console.log() biasanya digunakan untuk melakukan debugging, karena pesan error pada JavaScript selalu ditampilkan dalam console.
Contoh :
console.log("Hallo dari console");
Demikian pembahasan kita kali ini, tapi jangan khawatir kita akan melanjutkan pembahasan tentang JavaScript lainnya pada artikel berikut ya. Kalian bisa subscribe artikel kami agar tidak tertinggal artikel terbaru dari kami.
Jika kalian berminat untuk belajar lebih lanjut tentang pemrograman javascript dan bahasa pemrograman lainnya bisa coba kunjungi social media Xsis Academy untuk info lebih lanjut mengenai Bootcamp Xsis Academy.
Temukan video tutorial ngoding dari Tim Trainer Xsis Academy pada channel ETG berikut ini Youtube Equine Technologies Group
———–
Penulis : Aulia Brahmantio Diaz – Webmaster Xsis Mitra Utama
Tutorial JavaScript Dasar Lainnya
