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
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
3. Menulis ke Elemen HTML
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
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>4. Menulis ke browser window
Dengan menggunakan fungsi document.write(), kita dapat menulis ke isi dokumen.
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()
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.