Tutorial Belajar JavaScript Bagian 4 : Cara Menampilkan Output JavaScript

0
178

Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar JavaScript Bagian 3 : Cara Penulisan Variabel JavaScript, selanjutnya kita akan belajar cara menampilkan output JavaScript.

Menampilkan Output di JavaScript

Ada situasi tertentu di mana Anda mungkin perlu menampilkan output dari kode JavaScript Anda.

Misalnya, Anda mungkin ingin melihat nilai variabel, atau menulis pesan ke konsol browser untuk membantu Anda men-debug masalah dalam kode JavaScript yang sedang berjalan.

Dalam JavaScript ada beberapa cara berbeda untuk menghasilkan output termasuk menulis output ke jendela browser atau konsol browser, menampilkan output di kotak dialog, menulis output ke dalam elemen HTML, dll.

Menulis Output ke Konsol Browser

Anda dapat dengan mudah mengeluarkan pesan atau menulis data ke konsol browser menggunakan metode console.log ().

Ini adalah metode yang sederhana, tetapi sangat bagus untuk menghasilkan output yang rinci. Berikut contohnya:

    <script>
    // Cetak pesan sederhana
    console.log("Halo dunia!"); // Prints: Halo dunia!
    
    // Cetak nilai variabel 
    var x = 10;
    var y = 20;
    var sum = x + y;
    console.log(sum); // Prints: 30
    </script>
Tip: Untuk mengakses konsol browser web, pertama tekan tombol F12 pada keyboard untuk membuka alat pengembang lalu klik pada tab konsol. Ini terlihat seperti tangkapan layar di sini.

Menampilkan Output dalam Kotak Dialog Peringatan

Anda juga dapat menggunakan kotak dialog peringatan untuk menampilkan pesan atau data output kepada pengguna.

Kotak dialog peringatan dibuat menggunakan metode alert (). Berikut ini contohnya:

<script>
    // Tampilkan pesan sederhana
    alert("Halo dunia!"); // Outputs: Halo dunia!
    
    // Tampilkan nilai variabel 
    var x = 10;
    var y = 20;
    var sum = x + y;
    alert(sum); // Outputs: 30
</script>

Menulis Output ke Jendela Browser

Anda dapat menggunakan metode document.write () untuk menulis konten ke dokumen saat ini hanya saat dokumen tersebut sedang diurai.

Berikut contohnya:

<script>
    // Cetak seuah pesan sederhana
    document.write("Halo dunia!"); // Prints: Halo dunia!
    
    // Cetak nilai variabel 
    var x = 10;
    var y = 20;
    var sum = x + y;
    document.write(sum); // Prints: 30
</script>

Jika Anda menggunakan metode document.write () setelah halaman dimuat, ini akan menimpa semua konten yang ada di dokumen.

Lihat contoh berikut:

<body>
    <h1>Ini adalah heading</h1>
    <p>Ini adalah paragraph dari text.</p>
    
    <button type="button" onclick="document.write('Halo dunia!')">Klik Saya</button>
</body>

Memasukkan Output Di Dalam Elemen HTML

Anda juga dapat menulis atau menyisipkan output di dalam elemen HTML menggunakan properti elemen innerHTML.

Namun, sebelum menulis output, kita perlu memilih elemen menggunakan metode seperti getElementById (), seperti yang ditunjukkan pada contoh berikut:

<body>
    <p id="salam"></p>
    <p id="hasil"></p>
    
    <script>
    // Menulis string teks di dalam sebuah elemen
    document.getElementById("salam").innerHTML = "Halo Dunia!";
    
    // Menulis nilai variabel di dalam elemen
    var x = 10;
    var y = 20;
    var sum = x + y;
    document.getElementById("hasil").innerHTML = sum;
    </script>
</body>

Semoga tutorial ini membantu Anda untuk mempelajari cara menampilkan output JavaScript.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.