Javascript Part 4 menampilkan output data di javascript



Menampilkan atau menghasilkan output dalam bahasa pemrograman JavaScript sangat penting terutama saat mempelajari bahasa ini itu sendiri.

Misalnya, jika kita ingin melihat apakah pernyataan JavaScript atau blok kode kita benar, maka kita dapat menampilkan datanya untuk diperiksa.

Dalam JavaScript, ada 4 cara menampilkan output/data:

1. Menggunakan console

Dengan menggunakan function console.log() kita dapat menuliskan hasil output program dengan menampilkannya pada browser developer console.

Contoh penggunaan function console.log()

<!DOCTYPE html><html><head>   <title> Try It Yourself </title></head><body>      <script>      var x = 5;      var y = 5;      var sum = x + y; // adds x and y                                console.log(sum); // prints 10   </script></body></html>

Namun, output dari console. log() tidak dapat dilihat di perangkat seluler karena konsol pengembang hanya tersedia di browser desktop seperti Chrome dan Firefox.

Jika output kodingan diatas ditampilkan pada console browser akan terlihat seperti berikut

output data javascript dengan console


2. Menggunakan dialog boxes

Dengan menggunakan function alert() kita dapat menampilkan output data ke dalam box dialog browser.

Contoh menggunakan function alert()

<!DOCTYPE html><html><head>   <title> Try It Yourself </title></head><body>   <button type="button" onclick="myFunc()"> Show Dialog Box </button>   <script>      function myFunc() {         var x = 5;         var y = 5;         var sum = x + y; // adds x and y               alert(sum); // shows 10      }   </script></body></html>

Coba lihat saat menggunakan function alert() diatas ketika kita menekan sebuah button maka akan tampil sebuah dialog box dengan hasil angka 10 seperti berikut

output data javascript dengan dialog box


Dengan menggunakan properti innerHTML, kita dapat mengubah konten atau teks dari elemen yang dipilih.

Kita dapat menggunakan fungsi document.getEl ementById() untuk memilih elemen.

Contoh dengan menggunakan properti innerHTML

<!DOCTYPE html><html><head>   <title> Try It Yourself </title></head><body>   <p id="demo"></p>   <button type="button" onclick="myFunc()"> Write </button>   <script>      function myFunc() {         var x = 5;         var y = 5;         var sum = x + y; // adds x and y                                document.getElementById("demo").innerHTML = sum; // writes 10      }   </script></body></html>

Kalau kita menggunakan properti innerHTML seperti kodingan diatas saat menggunakannya di browser akan tampil sebagai berikut

output data javascript dengab innerHTML

Kita juga dapat menulis teks ke baris berikutnya jika terlalu panjang:

<!DOCTYPE html><html><head>   <title> Try It Yourself </title></head><body>   <p id="demo"></p>   <script>      document.getElementById("demo").innerHTML =      "Hello world, this text is too long.";    </script></body></html>


Dengan menggunakan fungsi document.write(), kita dapat menulis ke isi dokumen.

Catatan! Ini hanya boleh digunakan untuk tujuan pengujian karena akan menghapus semua elemen HTML yang ada di halaman saat ini.

 

contoh penggunaan function document.write()

<!DOCTYPE html><html><head>   <title> Try It Yourself </title></head><body>   <p id="demo"></p>   <button type="button" onclick="myFunc()"> Write </button>   <script>      function myFunc() {         var x = 5;         var y = 5;         var sum = x + y; // adds x and y                                                 document.write(sum); // writes 10 to the page      }   </script></body></html>

Berikut hasil yang ditampilkan ketika kita menggunakan function document.write()

output data javascript dengan document.write()

Dapat dilihat saat kita menekan button write maka angka yang tampil adalah 10 sementara button yang kita klik tadi menghilang.

Mengapa demikian? Itu karena function docmument.write() menghilangkan elemen html ketika dijalankan.

Ok semoga paham sampai disini cara menampilkan output data dengan javascript.

Perlu diketahui 4 cara diatas merupakan beberapa cara yang dapat kita lakukan ketika ingini mengecek suatu data yang ingin kita tampilkan pada bahasa pemrograman javascript.

Baiklah sekian pembahasan saya kali ini semoga bermanfaat.

0 Response to "Javascript Part 4 menampilkan output data di javascript"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel