Pada artikel ini kita akan mencoba 4 cara menampilkan keluaran di JavaScript.
- Merender di dalam elemen HTML, menggunakan innerHTML
- Menampilkan ke dalam HTML, menggunakan dokumen. menulis()
- Tampilkan ke dalam kotak peringatan, menggunakan jendela. peringatan()
- Tampilkan ke browser konsol, menggunakan konsol. catatan()
Dalam JavaScript salah satu cara untuk menampilkan keluaran adalah dengan menggunakan konsol. catatan(). Jika anda masih bingung apa itu console. log() atau ingin mengetahui JavaScript dasar, Anda dapat membaca terlebih dahulu artikel kami sebelumnya di "Pengantar Javascript untuk Pemula".
1. Menggunakan innerHTML
innerHTML adalah properti yang digunakan untuk mendapatkan atau mengubah konten elemen itu sendiri. Dengan innerHTML, kita dapat menampilkan output ke elemen yang lebih spesifik dengan menggunakan metode dokumen. getElementById(id).
Contoh
Lihat Pena
Menggunakan InnerHTML oleh Xsis Academy (@xsis_academy)
di CodePen
2. Menggunakan dokumen. menulis()
Biasanya dokumen. write() digunakan untuk pengujian. Ketika kita menggunakan dokumen. write() setelah dokumen HTML dimuat, setelah itu semua HTML yang ada akan hilang atau terhapus.
Contoh
Lihat Pena
menggunakan dokumen. write() oleh Xsis Academy (@xsis_academy)
di CodePen
3. Menggunakan fungsi alert()
Fungsi alert() adalah fungsi untuk menampilkan kotak peringatan. Dengan ini kita dapat menampilkan output di jendela dialog.
Contoh.
Lihat Pena
Menggunakan alert() oleh Xsis Academy (@xsis_academy)
di CodePen
4. Menggunakan konsol. catatan()
Seperti yang kita ketahui kemarin, fungsi konsol. log() adalah fungsi untuk menampilkan teks ke konsol Javascript. Menghibur. log() biasanya digunakan untuk debugging, karena pesan kesalahan JavaScript selalu ditampilkan di konsol.
Contoh.
console.log("Hallo dari console");Itulah pembahasan kita kali ini, namun jangan khawatir kita akan melanjutkan pembahasan tentang JavaScript pada artikel berikutnya. Anda dapat berlangganan artikel kami agar tidak ketinggalan artikel terbaru kami
Jika Anda tertarik untuk mempelajari lebih lanjut tentang pemrograman javascript dan bahasa pemrograman lainnya, Anda dapat mengunjungi media sosial Xsis Academy untuk informasi lebih lanjut tentang Bootcamp
Melanjutkan tutorial JavaScript di Duniailkom, kali ini kita akan belajar Cara Menampilkan Hasil Program JavaScript. Kami akan membahas tentang pesanan document.write(), innerHTML, alert(), console.log()
Menampilkan Hasil JavaScript dengan dokumen. menulis()
Cara pertama menampilkan hasil kode program JavaScript di web browser adalah dengan perintah document.write(). Berikut adalah contoh penggunaannya
<!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <script> let foo = 1+3+5+7+9; document.write(foo); document.write("<br>"); let bar = {a:'16'}; document.write(bar); </script> </body> </html>_Perintah document.write()_ akan menampilkan teks yang ditulis dalam tanda kurung (sebagai argumen)
Sejalan 10 saya membuat variabel foo yang akan menampung hasil penambahan 1+3+5+7+9. Variabel ini kemudian ditampilkan dengan perintah <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <div id="result1"></div> <div id="result2"></div> <script> let foo = 1+3+5+7+9; document.getElementById("result1").innerHTML=foo; let bar = {a:'16'}; document.getElementById("result2").innerHTML=bar; </script> </body> </html>0 pada baris 11. Alhasil, angka 25 akan muncul di web browser
Kami akan membahas lebih lanjut tentang variabel dalam tutorial terpisah. Fokus tutorial ini hanya untuk menampilkan hasil saya dengan perintah document.write()
Selanjutnya pada baris 13 terdapat perintah <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <div id="result1"></div> <div id="result2"></div> <script> let foo = 1+3+5+7+9; document.getElementById("result1").innerHTML=foo; let bar = {a:'16'}; document.getElementById("result2").innerHTML=bar; </script> </body> </html>2. Dalam HTML, tag <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <div id="result1"></div> <div id="result2"></div> <script> let foo = 1+3+5+7+9; document.getElementById("result1").innerHTML=foo; let bar = {a:'16'}; document.getElementById("result2").innerHTML=bar; </script> </body> </html>_3 digunakan sebagai ganti baris. Ini hanya untuk membuat penampilan kita lebih rapi
Pada baris 15 giliran bar variabel yang saya isi dengan objek <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <div id="result1"></div> <div id="result2"></div> <script> let foo = 1+3+5+7+9; document.getElementById("result1").innerHTML=foo; let bar = {a:'16'}; document.getElementById("result2").innerHTML=bar; </script> </body> </html>4. Lagi-lagi materi tentang objek akan dibahas pada tutorial tersendiri. Pada saat ditampilkan, hasilnya adalah <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <div id="result1"></div> <div id="result2"></div> <script> let foo = 1+3+5+7+9; document.getElementById("result1").innerHTML=foo; let bar = {a:'16'}; document.getElementById("result2").innerHTML=bar; </script> </body> </html>5
Inilah salah satu kelemahan jika ingin menampilkan hasil kode program menggunakan perintah document.write(). Jika datanya cukup kompleks, yang muncul adalah tipe data dari variabelnya, bukan nilainya
Menampilkan Hasil JavaScript dengan innerHTML
Cara kedua untuk menampilkan hasil JavaScript adalah dengan mengakses properti innerHTML dari suatu elemen. Untuk kebutuhan ini, kita juga harus meminta bantuan perintah <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <div id="result1"></div> <div id="result2"></div> <script> let foo = 1+3+5+7+9; document.getElementById("result1").innerHTML=foo; let bar = {a:'16'}; document.getElementById("result2").innerHTML=bar; </script> </body> </html>8 untuk mencari di mana hasil ini akan ditampilkan. Berikut adalah contoh kode programnya
<!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <div id="result1"></div> <div id="result2"></div> <script> let foo = 1+3+5+7+9; document.getElementById("result1").innerHTML=foo; let bar = {a:'16'}; document.getElementById("result2").innerHTML=bar; </script> </body> </html>Sama seperti contoh di document.write()_, saya ingin menampilkan isi dari variabel foo dan bar. Hasil tampilan juga akan sama persis seperti sebelumnya
Di baris 9-10, terdapat 2 tag
Caranya akses kedua elemen dengan perintah <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <div id="result1"></div> <div id="result2"></div> <script> let foo = 1+3+5+7+9; document.getElementById("result1").innerHTML=foo; let bar = {a:'16'}; document.getElementById("result2").innerHTML=bar; </script> </body> </html>8, lalu isikan property innerHTML dengan variabel foo dan bar seperti pada baris 13 dan 16
Penjelasan lebih lanjut terkait cara kerja perintah <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <div id="result1"></div> <div id="result2"></div> <script> let foo = 1+3+5+7+9; document.getElementById("result1").innerHTML=foo; let bar = {a:'16'}; document.getElementById("result2").innerHTML=bar; </script> </body> </html>8 akan kami bahas pada tutorial tersendiri. Singkatnya, perintah ini digunakan untuk mencari elemen HTM berdasarkan nilai atribut id
Menampilkan Hasil JavaScript dengan alert()
Perintah alert()_ telah digunakan beberapa kali, dan merupakan cara paling sederhana untuk menampilkan hasil program JavaScript. alert() akan menampilkan apa pun yang dimasukkan sebagai argumen
Berikut adalah contoh penggunaannya
Perintah alert() diakses pada baris 13 dan 16. Pada saat eksekusi, isi variabel foo dan bar akan muncul di jendela peringatan secara bergantian. Setelah mengklik tombol OK dari hasil <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <div id="result1"></div> <div id="result2"></div> <script> let foo = 1+3+5+7+9; alert(foo); let bar = {a:'16'}; alert(bar); </script> </body> </html>7, maka akan muncul hasil <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <div id="result1"></div> <div id="result2"></div> <script> let foo = 1+3+5+7+9; alert(foo); let bar = {a:'16'}; alert(bar); </script> </body> </html>8
Walaupun sangat praktis, perintah alert() tetap menampilkan isi variabel bar sebagai <!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <div id="result1"></div> <div id="result2"></div> <script> let foo = 1+3+5+7+9; document.getElementById("result1").innerHTML=foo; let bar = {a:'16'}; document.getElementById("result2").innerHTML=bar; </script> </body> </html>5
Menampilkan Hasil JavaScript dengan konsol. catatan()
Dari ketiga metode yang sudah kita bahas, ada sedikit masalah ketika menampilkan variabel bar yang berisi objek. Ketiganya kurang informatif untuk data JavaScript yang kompleks. Sebagai solusinya, kita dapat mengakses hasil kode JavaScript dengan perintah console.log()
perintah konsol. log akan menampilkan hasil program ke tab console pada menu Web Developer. Cara menggunakan fungsi ini sama dengan alert, Anda hanya perlu memasukkan hasil yang ingin ditampilkan sebagai argumen
Berikut contoh penggunaan perintah console.log() dalam menampilkan hasil program JavaScript
<!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript di Duniailkom</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom </p> <div id="result1"></div> <div id="result2"></div> <script> let foo = 1+3+5+7+9; console.log(foo); let bar = {a:'16'}; console.log(bar); </script> </body> </html>Akibatnya, isi variabel foo dan bar muncul dengan nilai yang ada
Opsinya adalah menggunakan perintah alert() dan konsol. log() tergantung pada kenyamanan kita sebagai programmer. Pada tutorial JavaScript di Duniailkom kali ini saya akan lebih banyak menggunakan console. log() yang lebih informatif dan tampilan hasil program menjadi lebih rapi
Tapi perintah alert() dan console. log() hanya untuk proses pengembangan. Untuk web asli nanti lebih cocok menggunakan perintah document. getElementById() dan innerHTML seperti cara kedua, karena hasilnya langsung terlihat di web browser
Pada tutorial pembelajaran JavaScript berikutnya, kita akan membahas tentang konsep inti dari JavaScript, yaitu. Memahami EmcaScript dan DOM (Document Object Model)
Saat ini di Duniailkom tersedia eBook / Uncover buku JavaScript. Dengan total lebih dari 650 halaman A4, materi dalam buku ini jauh lebih banyak dari tutorial yang ada di website Duniailkom. Penjelasan lebih lanjut bisa ke. Pengungkapan JavaScript – Panduan Pembelajaran JavaScript