4 Cara menampilkan Output dari Kode-Kode Javascript

Ada 4 Metode yang bisa Anda gunakan untuk menampilkan output/hasil olahan dari kode javascript. Salah satu yang populer adalah menggunakan metode document.getElementById() yang digunakan bersamaan dengan properti innerHTML.

Daftar isi

1. innerHTML

innerHTML merupakan properti yang digunakan untuk menginputkan kode yang dibuat dengan Javascript kedalam elemen HTML. Sebelum menginputkan kedalam elemen HTML, tentunya Javascript juga membutuhkan akses kedalam elemen HTML tersebut.

Untuk mengakses Elemen HTML, Anda bisa menggunakan method document.getElementById("id_tujuan"). Method tersebut akan mencari Elemen yang memiliki attribute id dengan nilai "id_tujuan" pada dokumen HTML. Setelah elemen Html diakses, hasil olahan javascript akan ter-input kedalam elemen tersebut dengan properti innerHTML.

Berikut adalah contoh program untuk menampilkan hasil olahan javascript dengan innerHTML.

contoh kode/program/sintaks javascript
<!DOCTYPE html>
    <html>
        <head>
            <title> menampilkan output dengan innerHTML </title>
            <script>
                window.onload = function() {
                    var x = document.getElementById("id_tujuan");    
                    x.innerHTML = "Halo, Nama Saya Fizi";
                }
            </script>
        </head>
    <body>
        <div id="id_tujuan"></div>
    </body>
</html>

2. document.write()

Metode document.write() berfungsi untuk menampilkan output secara langsung pada halaman Html. dimana pada objek document terdapat fungsi write yang berguna untuk menulis langsung ke dalaman html. berikut contoh kodenya.

contoh kode/program/sintaks javascript
<body>
    <p> Halo Indonesia! </p>

    <script>
        document.write("<h3>Belajar Javascript itu Menyenangkan</h3>");
    </script>
</body>

3. console.log()

Fungsi console.log() digunakan untuk menampilkan output didalam console. Cara ini biasanya digunakan hanya untuk pengujian atau debugging agar programmer dapat mengetahui hasil output apakah sudah benar atau masih salah.

dengan menggunakan console.log(), Anda tidak akan melihat apapun pada halaman web. untuk melihat hasilnya, Anda harus masuk ke mode Web Console. berikut contoh program untuk menampilkan hasil penjumlahan dengan console.log().

contoh kode/program/sintaks javascript
<body>
    <script>
   
        var x = 20;
        var y = 30;
        var jumlah = x + y;

        console.log(x+ " + " +y+ " = ");
        console.log(jumlah);

    </script>
</body>

4. window.Alert()

Method window.Alert() merupakan metode yang digunakan untuk menulis hasil olahan dari kode javascript pada kotak dialog/popup. Sintaks : window.alert("sometext");. untuk lebih jelasnya berikut contoh kodenya.

contoh kode/program/sintaks javascript
<!DOCTYPE html>
<html>

    <head>
        <title> Menampilkan output pada kotak dialog </title>
        <script>
            function welcome() {
                window.alert("Selamat Datang di www.gotutorid.com");
            }
        </script>
    </head>
    
    <body>
        <button onclick="welcome()">Klik</button>
    </body>

</html>