Last Updated on November 8, 2021 by
Pada seri tutorial JavaScript sebelumnya, Codekey telah menjelaskan tentang comments atau komentar yang ada di JavaScript. Kali ini, Codekey akan mengajak Anda untuk mengenal dan menggunakan fungsi Output pada JavaScript.
Tutorial ini akan mengajarkan Anda berbagai cara mengeluarkan data, seperti window.alert (), document.write (), innerHTML, console.log (), dan lainnya.
Meskipun fungsi utama JavaScript adalah mengubah perilaku browser, teknik ouput ini banyak digunakan untuk menampilkan data tertentu. Selain itu, Anda akan mengetahui mengapa ada lebih dari satu metode untuk mencetak dalam JavaScript, di mana dan kapan harus menggunakannya.
Beberapa opsi berguna saat Anda mengalami masalah pada kode Anda. Memahami ini akan membantu Anda men-debug atau menulis ulang skrip Anda dengan lebih nyaman. Jika Anda tertarik, simak terus artikel berikut ini.
Table of Contents
JavaScript Output
Output pada JavaScript mendefinisikan cara untuk menampilkan output dari kode tertentu. Output dapat ditampilkan dengan menggunakan empat cara berbeda yang tercantum di bawah ini:
- Menulis ke dalam elemen HTML, menggunakan innerHTML.
- Menulis ke dalam output HTML menggunakan document.write ().
- Menulis ke dalam kotak peringatan, menggunakan window.alert ().
- Menulis ke konsol browser, menggunakan console.log ().
Melakukan Output Data
Ada lebih dari satu cara untuk menampilkan data dalam JavaScript. Kami sekarang akan meninjau tiga metode yang tersedia dan melihat cuplikan kode berikut ini untuk masing-masing metode.
window.alert()
Metode ini digunakan untuk mencetak dalam JavaScript menampilkan data yang diberikan dalam kotak peringatan. Kotak pop-up kecil dengan tombol tutup muncul, dan menghilang setelah tombol diklik. Metode window.alert sangat baik digunakan untuk pesan informative yang pendek dan cepat, yang mana ia dapat ditutup secara instan.
window.alert(7 + 29);
document.write()
Metode document.write() digunakan untuk menulis dokumen HTML. Namun perlu diingat bahwa Anda harus berhati-hati dengan metode output JavaScript ini karena dapat menimpa konten dalam dokumen HTML.
document.write(9 + 21);
Pada contoh di bawah ini, document.write () akan menghapus semua HTML yang ada saat mengklik tombol, saat dokumen HTML dimuat sepenuhnya:
<button type="button" onclick="document.write(9 + 21)">Klik button ini untuk mencetak hasil</button>
consol.log()
Anda harus menggunakan metode console.log () untuk mencetak ke konsol JavaScript. Fungsi log konsol JavaScript terutama digunakan untuk debugging kode karena membuat JavaScript mencetak ouput ke konsol.
console.log(3 + 11);
Untuk membuka konsol browser, klik kanan pada halaman dan pilih Inspect, lalu klik Console.
document.write vs console.log
Metode ini berbeda dalam tujuan dan kasus penggunaannya. Namun, metode console.log lebih relevan dengan pengembangan web modern untuk debugging dan logging. Penggunaan document.write tidak disarankan karena fakta bahwa metode tersebut dapat menimpa semua yang ada di elemen <header> dan <body>.
Memodifikasi Konten HTML
Ada tiga opsi untuk mengubah konten elemen HTML tertentu: innerHTML, innerText atau textContent. Ketika digunakan untuk tujuan output, fungsinya sangat mirip. Namun, ada perbedaan ketika diterapkan untuk mendapatkan konten HTML. Berikut contoh dan penjelasannya di bawah ini:
<p id="test">contoh kalimat yang berisikan <span>text lain</span> didalamnya</p>
<button onclick="getInnerText()">Mendapatkan innerText</button>
<button onclick="getInnerHTML()">Mendapatkan innerHTML</button>
<button onclick="getTextContent()">Mendapatkan textContent</button>
<script>
function getInnerText() {
alert(document.getElementByID("test").innerText)
}
function getInnerHTML() {
alert(document.getElementByID("test").innerHTML)
}
function getTextContent() {
alert(document.getElementByID("test").textContent)
}
</script>
Lihat berikut ini ouput apa yang akan diberikan masing-masing properti ini saat mendapatkan konten dari elemen <p> di atas.
– innerText hanya mengembalikan teks tanpa spasi berlebih atau tag <span>:
“This paragraph element has excess spacing and has a span element inside.”
– innerHTML mengembalikan teks dengan semua spasi berlebih dan tag <span>:
” This paragraph element has excess spacing and has <span>a span element<span> inside.”
– textContent mengembalikan teks dengan semua spasi berlebih, tetapi tanpa tag <span>:
” This paragraph element has excess spacing and has a span element inside.”
innerText
Contoh di bawah ini mencari elemen HTML dengan atribut id = “hasil”. Properti innerText mendefinisikan konten elemen HTML, sehingga konten elemen di HTML akan ditimpa oleh JavaScript dengan konten baru.
document.getElementById("hasil").innerText = (9 + 20);
innerHTML
Contoh berikut mencari elemen HTML dengan atribut id = “hasil”. properti innerHTML mendefinisikan konten HTML. Oleh karena itu, konten elemen di HTML akan ditimpa oleh JavaScript dengan konten baru.
document.getElementById("hasil").innerHTML = (1 + 24);
textContent
Contoh terakhir mencari elemen HTML dengan atribut id = “hasil”. Dalam kasus ini, properti textContent mendefinisikan konten dari node tertentu. Akibatnya, konten sebuah elemen di HTML akan digantikan oleh JavaScript dengan konten baru.
document.getElementById("hasil").textContent = (5 + 43);
Demikianlah penjelasan tentang Output JavaScript yang harus Anda ketahui. Beberapa hal yang harus Anda ingat tentang Output JavaScript:
- Anda dapat mencetak dalam JavaScript menggunakan beberapa teknik berbeda.
- Opsi paling umum yang digunakan saat men-debug adalah metode log konsol JavaScript.
3.Anda harus mempraktikkan semuanya dan belajar menggunakannya dengan tepat untuk men-debug kode Anda dengan lebih baik.
Jika Anda tertarik untuk belajar JavaScript lebih jauh atau belajar bahasa pemrograman lainnya, kami menyarankan Anda untuk membaca dan belajar dari artikel-artikel Codekey.
Situs Codekey menyediakan berbagai pembahasan, tutorial, serta tips dan trik untuk Anda belajar JavaScript dan bahasa pemrograman lainnya seperti Bahasa C dan Python. Jangan lupa untuk terus mendapatkan update artikel terbaru dari situs Codekey.
Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.
