author Ahmad Muhardian

4 Cara Menampilkan Output pada Javascript


Cara Menampilkan Output pada Javascript

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

Selain fungsi write(), objek document juga menyediakan berbagai macam fungsi untuk manipulasi dokumen HTML.

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

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Javascript</title>
</head>
<body>

    <h1>Tutorial Javascript untuk Pemula</h1>
    <div id="hasil-output"></div>


    <script>
        // membuat objek elemen
        var hasil = document.getElementById("hasil-output");

        // menampilkan output ke elemen hasil
        hasil.innerHTML = "<p>Aku suka Javascript</p>";
    </script>

</body>
</html>

Hasilnya:

Conto penggunaan innerHTML

Akhir Kata…

Bagaimana?

Sudah paham ‘kan perbedaan dari keempat fungsi tersebut. Kalau kita ringkas akan seperti ini:

  1. Fungsi console.log() untuk menampilkan output ke console Javascript;
  2. Fungsi alert() untuk menampilkan output ke jendela dialog;
  3. Fungsi document.write() untuk menulis output ke dokumen HTML;
  4. Atribut innerHTML untuk menampilkan output ke elemen HTML yang lebih spesifik.

Fungsi yang manakah yang sering kamu gunakan?

Baca Juga ini

Memahami Variabel dan Tipe Data dalam Javascript

Memahami Variabel dan Tipe Data dalam Javascript

Variabel adalah sebuah nama yang mewakili sebuah nilai. Variabel bisa diisi dengan berbagai macam nilai seperti string (teks), number (angka), objek, array, dan sebagainya.

Belajar Nodejs #03: Cara Menggunakan Modul dalam Aplikasi Nodejs

Belajar Nodejs #03: Cara Menggunakan Modul dalam Aplikasi Nodejs

Saat mengembangkan aplikasi dengan Nodejs, kita tidak akan bisa lepas dari penggunaan Modul. Pada artikel ini akan dibahas cara penggunaan Modul di Nodejs

Belajar Javascript: Memahami Fungsi di Javascript dan Contoh Programnya

Belajar Javascript: Memahami Fungsi di Javascript dan Contoh Programnya

Fungsi merupakan hal yang wajib dipahami di dalam Javascript, karena kedepan kita akan banyak bekerja dengan fungsi baik dalam membuat objek, manipulasi HTML, melakukan ajax dan sebagainya.

Belajar Nodejs #02: Mengenal NPM untuk Manajemen Project Javascript

Belajar Nodejs #02: Mengenal NPM untuk Manajemen Project Javascript

Salah satu tool yang sering digunakan dalam Nodejs adalah NPM. Apa peran dan fungsi NPM dalam project Nodejs?

Belajar Nodejs #01: Pengenalan Dasar Nodejs (untuk Pemula)

Belajar Nodejs #01: Pengenalan Dasar Nodejs (untuk Pemula)

Tutorial Nodejs dari Nol untuk pemula. Dimulai dari cara install Nodejs di Linux hingga Membuat webserver dan aplikasi lainnya

Menggambar Objek dengan Perulangan dan Fungsi Random di HTML5 Canvas

Menggambar Objek dengan Perulangan dan Fungsi Random di HTML5 Canvas

Pada artikel pengenalan HTML5 Canvas sebelumnya, kita sudah belajar cara menggamabar objek-objek dasar seperti titik, garis, persegi, lingkaran, dan segitiga. Obejek digambar hanya sekali saja. Bagaiaman kalau kita ingin menggambar banyak objek dan digambar secara acak? Untuk menjawab pertanyaan ini, kita harus menggunakan perulangan dan fungsi random(). Lebih jelasnya, mari kita bahas… Menggambar Objek dengan PerulanganPada contoh di artikel sebelumnya, kita sudah pernah menggamabar persegi dua kali. <script type="text/javascript"> var canvas = document.