4 Cara Menampilkan Output pada Javascript

Kukuhs.kom 20 Mei 2020 05:40:50

Output adalah sebuah tampilan program yang biasanya digunakan untuk memperlihatkan hasil akhir.

Output biasanya ditampilkan dalam bentuk teks dengan fungsi print().

Ada 4 cara menampilkan output pada Javascript:

  1. Menggunakan Fungsi console.log();
  2. Menggunakan Fungsi alert();
  3. Menggunakan Fungsi document.write();
  4. Menggunakan innerHTML.

Apa perbedaan dari keempat cara tersebut?

Mari kita bahas…

1. Menggunakan Fungsi console.log()

Fungsi console.log() adalah fungsi untuk menampilkan teks ke console Javascript.

Contoh penggunaan:

console.log("Hello World!");

Hasilnya:

Console Javascript

Fungsi console.log() biasanya digunakan untuk debugging. Karena setiap pesaan error di Javascript selalu ditampilkan di dalam Console.

Selain console.log(), terdapat juga beberapa fungsi untuk debugging seperti console.debug()console.info()console.error()console.dir(), dsb.

Fungsi-fungsi dalam console

Fungsi-fungsi console ini juga berlaku pada console Nodejs.

Console Nodejs

2. Menggunakan Fungsi alert()

Fungsi alert() adalah fungsi untuk menampilkan jendela dialog. Fungsi sebenarnya berada pada objek window.

Secara lengkap bisa ditulis seperti ini:

window.alert("Hello World!");

Bisa juga ditulis alert() saja seperti ini:

alert("Hello World!");

Fungsi alert(), hanya bisa digunakan di dalam browser saja. Sedangkan pada Nodejs fungsi ini tidak ada.

Fungsi alert pada nodejs

Contoh penggunaan fungsi alert():

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Javascript</title>
    <script>
        alert("Selamat datang di tutorial belajar Javascript");

        function sayHello(){
            alert("Hello!");
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">Klik Aku!</button>
</body>
</html>

Hasilnya:

Contoh penggunaan alert

3. Menggunakan Fungsi document.write()

Objek document adalah objek yang mewakili dokumen HTML di dalam Javascript.

Dalam objek document, terdapat fungsi write() untuk menulis sesuatu ke dokumen HTML.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Javascript</title>
    <script>
        document.write("<h1>Hello World!</h1>");
        document.write("<hr>");
        document.write("<p>Saya sedang belajar Javascript</p>");
        document.write("di <b>petanikode.com</b>")
    </script>
</head>
<body>

</body>
</html>

Hasilnya:

Contoh output ke dokuemen HTML