4 Cara Menampilkan Data di JavaScript

Ada 4 Cara menampilkan data di JavaScript, yaitu:
1. Menggunakan perintah document.write()
2. Menggunakan alert()
3. Menggunakan console.log()
4. Menggunakan innerHTML()

document.write()

Anda dapat menampilkan data di JavaScript dengan menggunakan perintah document.write(). Untuk lebih jelasnya, perhatikan contoh di bawah ini.

Nama File: dokumen_write.html

<!DOCTYPE html>
<html>
<body>
<p>Hasil dari Perkalian 10 * 15 adalah</p>

<script>
document.write(10 * 15);
</script>

</body>
</html>

Apabila Anda jalankan di web browser, maka akan menampilkan output seperti di bawah ini:

alert()

Anda juga dapat menampilkan data di JavaScript dengan menggunakan alert, yaitu jendela popup pada JavaScript. Untuk lebih jelas perhatikan contoh di bawah ini:

Nama File: alert.html

<!DOCTYPE html>
<html>
<body>
<h1>Hasil dari perkalian 10 * 15 adalah </h1>

<script>
window.alert(10 * 15);
</script>

</body>
</html>

Apabila Anda jalankan di browser, maka akan menampilkan output berikut ini:

console.log()

Anda juga dapat menampilkan data di JavaScript dengan menggunakan metode console.log(). Untuk lebih jelasnya, dapat Anda lihat pada contoh di bawah ini:

Nama File: console_log.html

<!DOCTYPE html>
<html>
<body>
<h1>Ini adalah Heading</h1>
<p>Ini adalah paragraf</p>
<p>
Untuk menampilkan console di browser Chrome & Firefox dapat menggunakan shortcut CTL+SHIFT+J
</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

Coba Anda jalankan script diatas, dan lihat hasilnya dengan menekan tombol CTRL+SHIFT+J untuk menampilkan Browser console. Hasilnya terlihat seperti gambar di bawah ini:

innerHTML

Langkah terakhir untuk menampilkan data di JavaScript adalah menggunakan innerHTML. innerHTML digunakan untuk menampilkan data pada elemen HTML. Tapi sebelumnya elemen harus diakses terlebih dahulu dengan menggunakan fungsi document.getElementById().

Untuk lebih jelasnya, Anda dapat langsung lihat pada contoh di bawah ini:

Nama File: inner_html.html

<!DOCTYPE html>
<html>
<body>

<h1>Ini adalah contoh Heading</h1>
<p>Hasil dari perkalian dari 10 * 15 adalah...</p>

<p id="kali"></p>

<script>
document.getElementById("kali").innerHTML = 10 * 15;
</script>

</body>
</html>

Jika Anda jalankan di browser kesayangan Anda, maka akan terlihat output seperti di bawah ini:

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

4 comments:

Unknown4 June 2018 at 21:18
Terimakasih.. tulisannya sangat bermanfaat..
My blog
My Name
My Email
My Campus
Unknown21 September 2018 at 20:25
innerHTML. innerHTML digunakan untuk menampilkan data pada elemen HTML.dengan menggunakan metode console.log() itu berfungsi sebagai apa ya..mhn informasinya
Kunjungi website saya:https://yuliyani.mahasiswa.atmaluhur.ac.id
Dan website kmps sy:http://www.atmaluhur.ac.id
Unknown21 September 2018 at 20:28
trmksh artikelnya, Dalam menampilkan data di javascript innerHTML digunakan untuk menampilkan data pada elemen HTML.

Kunjungi website saya:https://yuliyani.mahasiswa.atmaluhur.ac.id
Dan website kmps sy:http://www.atmaluhur.ac.id
Bareh25 January 2023 at 19:42
Menarik, kebetulan blog saya juga membahas hal yang serupa. Seperti Source Code Web