JavaScrip yang telah dibuat dapat ditampilkan dalam output menggunakan beberapa script. output merupakan informasi yang dihasilkan setelah dilakukan proses atau tampilan program yang digunakan untuk memperlihatkan hasil akhir dari coding yang telah dibuat
Terdapat 4 cara untuk menampilkan output di JavaScript yaitu:
- Menampilkan ke dalam elemen HTML, menggunakan innerHTML.
- Menampilkan ke dalam HTML, menggunakan document.write().
- Menampilkan ke dalam alert box, menggunakan window.alert().
- Menampilkan ke dalam browser console, menggunakan console.log().
1. innerHTML
innerHTML merupakan properti yang digunakan untuk memperoleh atau merubah konten dari elemen itu sendiri. Dengan innerHTML, dapat ditampilkan output ke elemen yang lebih spesifik dengan menggunakan method document.getElementById(id).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Menampilkan output Javascript Menggunakan innerHTML</title> </head> <body> <h1>innerHTML</h1> <div id="contoh"></div> <script> // membuat objek elemen var hasil = document.getElementById("contoh"); // menampilkan output ke elemen hasil hasil.innerHTML = "<p>Ini Contoh tampilan innerHTML</p>"; </script> </body> </html> |
- Tampilan InnerHTML
- Download InnerHTML
2. document.write()
document.write() digunakan untuk pengujian. Ketika kita menggunakan document.write() setelah dokumen HTML dimuat, setelah itu semua HTML yang ada akan hilang atau terhapus.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <title>Output dengan document.write</title> <script> document.write("<h1>Selamat berjumpa</h1>"); document.write("<hr>"); document.write("<p>Kali ini kita belajar document.write</p>"); document.write("<b>Di atas tadi contoh tampilannya</b>") </script> </head> <body> </body> </html> |
- Tampilan document.write
- Download document.write
3. fungsi alert()
Fungsi alert() adalah fungsi untuk menampilkan alert box. Dengan ini kita dapat menampilkan output di jendela dialog.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <title>Menampilkan output Javascript Menggunakan alert</title> <script> alert("Kali ini kita belajar alert klik tombol OK"); function tombol(){ alert("Terimakasih telah klik tombol"); } </script> </head> <body> <button onclick="tombol()">Klik disini</button> </body> </html> |
- Tampilan document.write
- Download document.write
4. console.log()
fungsi console.log() adalah fungsi untuk menampilkan teks ke console Javascript. Console.log() biasanya digunakan untuk melakukan debugging, karena pesan error pada JavaScript selalu ditampilkan dalam console.
Selain console.log(), terdapat juga beberapa fungsi untuk debugging seperti console.debug(), console.info(), console.error(), console.dir(), dsb.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <title>Output dengan console.log</title> <script> var nama = "Budi"; console.log("Nama saya adalah", nama); </script> </head> <body> </body> </html> |
Cara melihat console dengan klik kanan pilih impect element, pilih Console tampilan script diatas akan menghasilkan seperti berikut
- Tampilan console.log()
- Download console.log()
Leave a Reply