Menampilkan Output Pada JavaScript

Created at by Aris Munandar

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 innerHTML yaitu 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..

menampilkan output javascript

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..

menampilakn output javascript

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.

Menampilkan output javascript

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.

Comments

Congrats, you have the opportunity to be the first commenter on this article. Have questions or suggestions? Please leave a comment to start discussion.

Leave comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Bahasaweb.com

Subscribe now to keep reading and get access to the full archive.

Continue reading