Menampilkan Output Pada JavaScript
Dalam tutorial kali ini kita akan membahas cara menampilkan output pada javascript, biasanya di setiap bahasa pemrograman apapun ada cara masing-masing untuk menampilkan output, atau hasil yang ingin di tampilkan di device program tersebut, salah satunya javascript.
Didalam tutorial ini kita akan membahas bagaimana cara menampilkan output di browser, karena ini javascript maka ada beberapa tempat yang bisa digunakan untuk menampilkan hasil yang coding yang telah kita buat, berikut ini masing-masing penjelasannya:
- Menggunakan
innerHTMLyaitu menampilkan output didalam elemen HTML. - Menggunakan
document.write(), menampilkan output secara langsung di javascript. - Menggunakan
window.alert(), yaitu menampilkan output menggunakan semacam popup browser. - Menggunakan
console.log(), menampilkan output dengan memanfaatkan console pada browser.
Cara Menampilkan Output di JavaScript
Dari penjelasan sebelumnya diatas tadi kita akan membahas satu persatu penggunaan kode output untuk dapat menampilkan output pada javascript, masing-masing fungsi tersebut adalah murni kode javascript, sehingga kita tidak membutuhkan bantuan dari pustaka lain.
Cara 1 menggunakan innerHTML
Cara menggunakan innertHTML ini adalah dengan memanfaatkan elemen html, dimana kita perlu menentukan elemen mana yang ingin kita gunakan untuk menampilkan output.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Output Javascript</title>
</head>
<body>
<h1>Belajar Output JavaScript</h1>
<p>Teks dibawah ini dibuat oleh javascript:</p>
<p id="teks"></p>
<script>
   document.getElementById('teks').innerHTML = 'Hallo JavaScript';
</script>
</body>
</html>Code language: HTML, XML (xml)Hasilnya adalah seperti gambar dibawah ini..
Dari gambar diatas bisa kita lihat bahwa kata “Hallo JavaScript” di tampilkan di tag <p> dengan id “teks”.
Cara 2 menggunakan document.write()
Fungsi document.write() ini akan menampilkan output secara langsung ke browser setelah halaman selesai di muat..
<!DOCTYPE html>
<html>
<head>
<title>Belajar Output Javascript</title>
</head>
<body>
<h1>Belajar Output JavaScript</h1>
<p>Teks dibawah ini dibuat oleh javascript:</p>
<script>
   document.write('Halo JavaScript');
</script>
</body>
</html>Code language: HTML, XML (xml)Silahkan di jalankan di browser anda, karena fungsi document.write() diletakan di bawah maka tulisan “Halo JavaScript” akan tampil dibagian bawah halaman, begitu juga sebaliknya jika di letakan di antara <head></head> maka kata “Halo JavaScript” akan tampil di atas halaman, itu karena browser memuat dokumen html dari atas ke bawah, sehingga jika di atas selesai membuat maka akan menjalankan yang atas terlebih dahulu.
Cara 3 menggunakan window.alert()
Cara ini akan menampilkan alert atau popup bawaan browser, dimana disetiap browser sudah pasti ada fitur alert ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Output Javascript</title>
<script>
   window.alert('Ini adalah popup alert');
</script>
</head>
<body>
<h1>Belajar Output JavaScript</h1>
</body>
</html>Code language: HTML, XML (xml)
Hasil menggunakan window.alert() akan seperti gambar dibawah ini..
Perlu diketaui, fitur window.alert() ini akan apabila tidak di klik tombol “Ok” maka browser akan terus menampilkan status loading, dan konten tidak akan di load sebelum di klik tombol “Ok”.
Cara 4 menggunakan fitur console.log()
Fitur ini sebenarnya adalah fitur untuk debug, jadi setiap kali kita ingin mengetahui setiap value pada suatu variabel tanpa harus menampilkannya di halaman web kita juga bisa melakukan debug dengan menggunakan console.log() ini. berikut ini caranya.
<!DOCTYPE html>
<html>
<head>
   <title>Belajar Output Javascript</title>
   <script>
     console.log('Ini adalah console.log()');
   </script>
</head>
<body>
<h1>Belajar Output JavaScript</h1>
</body>
</html>Code language: HTML, XML (xml)Cara menggunakan console.log() ialah dengan klik kanan lalu pilih Inspect apabila menggunakan Google Chrome, namun apabila menggunakan Firefox menu yang tampil adalah Inspect Element. Setelah itu klik tab Console, lalu akan muncul seperti gambar dibawah ini.
Console ini bisa di manfaatkan untuk debug data, misalnya dari API tanpa perlu menggunakan halaman web sehingga sebelum kita menampilkan data kita sudah tahu variabel atau data apa yang akan kita gunakan.
Komentar