Cara menggunakan konten teks javascript

Pada seri tutorial JavaScript sebelumnya, Codekey telah menjelaskan tentang komentar pada JavaScript. Kali ini Codekey akan mengajak Anda untuk mengenal dan menggunakan fungsi Output di JavaScript

Tutorial ini akan mengajarkan Anda berbagai cara untuk mengekstrak data, seperti window. peringatan (), dokumen. tulis (), innerHTML, konsol. log(), dan lain-lain

Meskipun fungsi utama JavaScript adalah mengubah perilaku browser, teknik keluaran ini banyak digunakan untuk menampilkan data tertentu. Selain itu, Anda akan belajar mengapa ada lebih dari satu metode untuk mencetak dalam JavaScript, di mana dan kapan menggunakannya

Beberapa opsi berguna saat Anda mengalami masalah dengan kode Anda. Memahami ini akan membantu Anda men-debug atau menulis ulang skrip Anda dengan lebih nyaman. Jika Anda tertarik, simak artikel berikut ini

Daftar isi

Keluaran JavaScript

Keluaran dalam JavaScript menentukan cara untuk menampilkan keluaran dari kode tertentu. Output dapat ditampilkan menggunakan empat metode berbeda yang tercantum di bawah ini

1. Menulis ke elemen HTML, menggunakan innerHTML
2. Menulis ke keluaran HTML menggunakan dokumen. menulis()
3. Tulis ke kotak pengingat, menggunakan jendela. peringatan()
4. Tulis ke konsol browser, menggunakan konsol. catatan()

Artikel Terkait   Tutorial JavaScript 8. Array Javascript, Panduan Lengkap Membuatnya

Lakukan Keluaran Data

Ada lebih dari satu cara untuk menampilkan data dalam JavaScript. Kami sekarang akan meninjau tiga metode yang tersedia dan melihat cuplikan kode berikut untuk setiap metode

jendela. peringatan()

Metode ini digunakan untuk mencetak dalam JavaScript yang menampilkan data yang diberikan di kotak peringatan. Kotak pop-up kecil dengan tombol tutup muncul, dan menghilang setelah tombol diklik. Metode jendela. peringatan paling baik digunakan untuk pesan informatif singkat dan cepat, yang dapat ditutup secara instan

window.alert(7 + 29);

dokumen. menulis()

Metode dokumen. write() digunakan untuk menulis dokumen HTML. Namun perlu diingat bahwa Anda harus berhati-hati dengan metode keluaran 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 tombol diklik, saat dokumen HTML dimuat sepenuhnya

<button type="button" onclick="document.write(9 + 21)">Klik button ini untuk mencetak hasil</button>

menghibur. catatan()

Anda harus menggunakan metode konsol. log() untuk mencetak ke konsol JavaScript. Fungsi log konsol JavaScript terutama digunakan untuk debugging kode karena membuat keluaran cetak JavaScript ke konsol

console.log(3 + 11);

Untuk membuka konsol browser, klik kanan pada halaman dan pilih Periksa, lalu klik Konsol

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

<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>

document.getElementById("hasil").innerText = (9 + 20);

document.getElementById("hasil").innerHTML = (1 + 24);

document.getElementById("hasil").textContent = (5 + 43);