Menampilkan Output Javascript – Javascript tidak memiliki built-in print dan function display (echo/print) seperti PHP. Untuk menampilkan output javascript kita menggunakan beberapa cara tergantung dari lokasi display yang akan kita tampilkan.
Ada empat cara yang bisa digunakan yaitu window.alert(), document.write(), innerHTML dan console.log(). Dengan cara tersebut, kita akan memonitor alur program yang kita buat. Dan juga ketika program tidak berjalan dengan benar, kita menggunakannya untuk mencari error.
Berikut ini penjelasan dari empat cara tersebut :
Menampilkan Output Javascript Dengan window.alert()
Adalah cara menampilkan output javascript pada alert box (kotak peringatan).
Contoh menampilkan javascript dengan window.alert :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Pesan()
{
window.alert("Terima kasih telah mengklik saya");
}
</script>
</head>
<body>
<h1>Display Alert Box</h1>
Silahkan klik pada tombol
<button onclick="Pesan()">Enter</button>
</body>
</html>
Penjelasan script :
Pada contoh diatas, kita menempatkan sebuah elemen button yang saat di klik akan menampilkan alext box dengan isi “Terima kasih telah mengklik saya”.
Kita bisa belajar menggunakan alert box pada javascript disini >>
Menampilkan Output Javascript dengan document.write()
Adalah cara menampilkan output kedalam halaman html baru. Cara ini akan menghapus tampilan html sekarang dan menggantinya dengan tampilan yang ditulis pada document.alert. Metode ini biasanya dipakai saat testing program saja.
Contoh menampilkan javascript dengan document.write :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Pesan()
{
document.write("Terima kasih telah mengklik saya <button onclick='history.go(0)'>Refresh</button>");
}
</script>
</head>
<body>
<h1>Display Alert Box</h1>
Silahkan klik pada tombol
<button onclick="Pesan()">Enter</button>
</body>
</html>
Penjelasan script :
Pada contoh diatas, kita menempatkan sebuah elemen button yang saat di klik akan menampilkan halaman html baru dengan isi “Terima kasih telah mengklik saya” dan dilengkapi dengan sebuah elemen button untuk merefresh halaman untuk kembali ke tampilan awal.
Kita bisa belajar menggunakan document.write pada javascript disini >>
Menampilkan Output Javascript dengan innerHTML
Adalah cara menampilkan output didalam halaman html sekarang. Cara ini hanya menyisipkan output didalam halaman html dan tidak mengganti dengan halaman html baru.
Untuk menggunakan cara ini kita harus menempatkan output kedalam sebuah elemen dengan menggunakan identifikasi “id”. Metode innerHTML sering disebut dengan DOM (Document Object Model).
Cara penulisan innerHTML lengkap adalah :
document.getElementById("elemen_id").innerHTML = value;
Contoh menampilkan javascript dengan innerHTML :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Pesan()
{
document.getElementById("pesan").innerHTML ="<span style='color:red;'>Terima kasih telah mengklik saya</span>";
}
</script>
</head>
<body>
<h1>Display Alert Box</h1>
Silahkan klik pada tombol
<button onclick="Pesan()">Enter</button>
<p id="pesan"></p>
</body>
</html>
Penjelasan script :
Pada contoh diatas, kita menempatkan sebuah elemen button yang saat di klik akan menampilkan tulisan “Terima kasih telah mengklik saya” dibawah tampilan sekarang. Untuk menempatkan output kita menggunakan elemen <p> dengan id=”pesan.
Kita bisa belajar menggunakan innerHTML pada javascript disini >>
Menampilkan Output Javascript dengan console.log
Adalah cara menampilkan output pada console browser. Untuk melihat console browser kita tekan tombol F12 lalu klik menu untuk membuka console log.
Contoh menampilkan javascript dengan innerHTML :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Pesan()
{
console.log("Terima kasih telah mengklik saya");
}
</script>
</head>
<body>
<h1>Display Alert Box</h1>
Silahkan klik pada tombol
<button onclick="Pesan()">Enter</button>
<p id="pesan"></p>
</body>
</html>
Penjelasan script :
Pada contoh diatas, kita menempatkan sebuah elemen button yang saat di klik akan menampilkan tulisan “Terima kasih telah mengklik saya” pada console log. tampilan console log bisa dilihat seperti gambar diatas.
Lihat indeks artikel Tutorial Javascript Dasar >>
Referensi:
