Cara menggunakan innerhtml &

Question

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.

Table of Contents Show

Cara Menampilkan Output di JavaScript
Apa fungsi dari innerHTML?
Apa itu output JavaScript?
Bagaimana cara membuat fungsi di JavaScript?
Apakah fungsi alert () dalam 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..

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

<!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)

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

Apa fungsi dari innerHTML?

innerHTML adalah sebuah atribut di dalam (objek) elemen HTML yang berisi string HTML. Dengan innerHTML , kita dapat menampilkan output ke elemen yang lebih spesifik.

Apa itu output JavaScript?

Output adalah sebuah tampilan program yang biasanya digunakan untuk memperlihatkan hasil akhir. Output biasanya ditampilkan dalam bentuk teks dengan fungsi print() .

Bagaimana cara membuat fungsi di JavaScript?

untuk membuat function, penulisannya harus di awali oleh syntax “function” dan kemudian di lanjutkan dengan nama function yang mau di buat. dan isi dari function di tuliskan di dalam tanda kurung kurawal pembuka “{” dan tanda kurung kurawal penutup “}”.

Apakah fungsi alert () dalam JavaScript?

Alert : Pengertian dan Penggunaan Jendela dialog alert() biasanya digunakan pada kasus ketika kita ingin meyakinkan informasi kepada user atau pengguna. Fungsi alert() menampilkan jendela dialog dengan sebuah pesan dan tombol “OK”. Ketika jendela alert() muncul pengguna harus menekan tombol “OK” untuk melanjutkannya.

kode html