Metode atau Cara Menampilkan Output Pada Javascript

Oleh Galih Budi Prakoso - Oktober 07, 2018

Metode atau Cara Menampilkan Output Pada Javascript - Output dalam Javascript adalah hasil akhir dari proses kerja Javascript yang ditampilkan pada Browser. Biasanya dalam bentuk teks atau fungsi print().

Agar hasil akhir bisa terlihat, kita harus menggunakan fungsi Output Javascript.

Metode atau Cara Menampilkan Output Pada Javascript

Ada 4 cara untuk menampilkan Output Javascript, yakni :

Menampilkan Output di Console Browser, menggunakan fungsi console.log().
Menampilkan Output di dalam kotak peringatan, menggunakan fungsi window.alert().
Menampilkan Output ke dalam elemen Output HTML, menggunakan fungsi document.write().
Menampilkan Output ke dalam elemen HTML, menggunakan fungsi innerHTML

Pertanyaannya, apa bedanya keempat cara diatas? Nah, ayo baca penjelasan Galih berikut ini!

Metode atau Cara Menampilkan Output Pada Javascript

1. Menggunakan fungsi console.log()

Fungsi conlose.log() adalah sebuah fungsi javascript untuk menampilkan output pada Console Browser. Biasanya berupa teks atau angka.

Misalnya, coba tuliskan javascript berikut ini pada Console browser :

console.log("Aku_ganteng")

Tekan Enter, maka hasil yang terlihat pada Console Browser seperti gambar dibawah ini.

Tampilan di Console Browser

Console sendiri berfungsi untuk memudahkan para programmer untuk melakukan debugging. Biasanaya yang sering saya lakukan adalah untuk mengetahui apakah Javascript yang saya buat berhasil atau error.

Tidak hanya fungsi console.log() saja, ada banyak sekali fungsi console yang masing-masing memiliki fungsi yang berbeda, diantaranya adalah :

console.assert
console.clear
console.context
dll.

2. Menggunakan Fungsi alert()

Sebenarnya, alert() adalah subfungsi dari window.alert(). Namun, dengan hanya menulis alert() saja sudah cukup.

Fungsi ini digunakan untuk menampilkan Jendela (window) Dialog pada Browser.

Penulisan lengkapnya seperti berikut ini,

window.alert("Halo sayang!");

Atau bisa juga ditulis seperti berikut ini,

alert("Halo sayang!");

Latihan!

Cobalah buat file html seperti berikut ini, yang sudah diberi Javascript dengan fungsi alert().

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Alert</title>
    <script>
        alert("Contoh Penggunaan Fungsi Alert");

        function sayHello(){
            alert("Halo Sayang!");
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">Klik Adek Bang!</button>
</body>
</html>

Maka hasilnya akan seperti gambar berikut ini.

3. Menggunakan Fungsi document.write()

Fungsi document.write() adalah untuk menampilkan elemen atau objek kedalam dokumen HTML.

Latihan!

Buatlah file HTML yang sudah diberi contoh penggunaan fungsi document.write() berikut ini!

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

</body>
</html>>

Hasil!

4. Menggunakan Fungsi innerHTML

innerHTML biasa digunakan bersama dengan fungsi document.getElementById.

Keduanya digunakan bersama untuk menampilkan konten kedalam elemen HTML dengan ID tertentu.

Latihan!

Silahkan coba kode HTML berikut ini!

<!DOCTYPE html>
<html>
<body>

    <h1>Contoh Penggunaan innerHTML</h1>
    <hr>

    <p id="contoh"></p>

    <script>
        document.getElementById("contoh").innerHTML = "Konten ada disini";
    </script>

</body>
</html>

Penjelasan :
Kode Javascript diatas akan memindahkan kalimat "Konten ada disini" kedalam elemen <p> dengan id "contoh".

Hasil!

Bisa dicermati, bahwa awalnya didalam elemen <p> tidak ada konten-nya. Namun, dengan penambahan Javascript tersebut, hasil akhir menunjukkan bahwa elemen <p> mempunyai konten.

GalihDesign

Cari Blog Ini