Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / JavaScript

Metode Atau Cara Menampilkan Output Pada Javascript

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

Agar hasil selesai dapat terlihat, kita harus memakai fungsi Output Javascript.


Metode atau Cara Menampilkan Output Pada Javascript


Ada 4 cara untuk menampilkan Output Javascript, yakni :
  • Menampilkan Output di Console Browser, memakai fungsi console.log().
  • Menampilkan Output di dalam kotak peringatan, memakai fungsi window.alert().
  • Menampilkan Output ke dalam elemen Output HTML, memakai fungsi document.write().
  • Menampilkan Output  ke dalam elemen HTML, memakai fungsi innerHTML


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


Metode atau Cara Menampilkan Output Pada Javascript 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 ibarat gambar dibawah ini.
Metode atau Cara Menampilkan Output Pada Javascript Metode atau Cara Menampilkan Output Pada Javascript
Tampilan di Console Browser

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

Tidak hanya fungsi console.log() saja, ada aneka macam fungsi console yang masing-masing mempunyai fungsi yang berbeda, diantaranya ialah :
  • console.assert
  • console.clear
  • console.context
  • dll.

Metode atau Cara Menampilkan Output Pada Javascript Metode atau Cara Menampilkan Output Pada Javascript



2. Menggunakan Fungsi alert()

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

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

Penulisan lengkapnya ibarat berikut ini,
window.alert("Halo sayang!");


Atau dapat juga ditulis ibarat berikut ini,
alert("Halo sayang!");


Latihan!

Cobalah buat file html ibarat 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 kesudahannya akan ibarat gambar berikut ini.

Metode atau Cara Menampilkan Output Pada Javascript Metode atau Cara Menampilkan Output Pada Javascript



3. Menggunakan Fungsi document.write()

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

Latihan!

Buatlah file HTML yang sudah diberi teladan 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 berguru Javascript</p>");         document.write("di <b>www.galihdesign.com</b>")     </script> </head> <body>  </body> </html>>

Hasil!

Metode atau Cara Menampilkan Output Pada Javascript Metode atau Cara Menampilkan Output Pada Javascript



4. Menggunakan Fungsi innerHTML

innerHTML biasa dipakai bersama dengan fungsi document.getElementById.

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

Latihan!

Silahkan coba arahan 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!

Metode atau Cara Menampilkan Output Pada Javascript Metode atau Cara Menampilkan Output Pada Javascript

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