Beranda>Tutorial Desain Web>Tutorial Javascript

Kode contoh merinci berbagai cara mengeluarkan data dalam JavaScript

Penulis：Eve Cole Waktu Pembaruan：2022-08-05 09:45:26
Artikel ini memberi Anda pengetahuan yang relevan tentang JavaScript. Dalam JavaScript, tidak seperti bahasa seperti Java, ia tidak memiliki metode pencetakan atau keluaran apa pun. Di js, empat metode digunakan untuk menampilkan data secara detail, semoga bermanfaat bagi semuanya.

Kata Pengantar

Dalam JavaScript, tidak seperti bahasa seperti Java, ia tidak memiliki metode pencetakan atau keluaran apa pun. Empat metode berikut biasanya digunakan untuk mengeluarkan data.

  • Gunakan window.alert() untuk memunculkan kotak peringatan.
    • Gunakan document.write() untuk menulis konten ke HTML. Gunakan
  • console.log()
  • innerHTML menulis ke elemen HTML
  • document.write() dokumen.

Gunakan di bawah ini. Mari kita tunjukkan sebuah contoh.

window.alert()

membuat file HTML baru, dan kemudian menggunakan VSCode untuk menulis kode berikut.

<!DOCTYPEhtml>
<html>
    <kepala>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=lebar perangkat, skala awal=1">
        <title>window.alert()</title>
    </kepala>
    <tubuh>
        <p>Tampilan jendela pop-up</p>
        <skrip tipe="teks/javascript">
            window.alert("Ini adalah tes pop-up!");
        </skrip>

    </tubuh>
</html>

Kemudian buka file di atas dengan browser. Saat dibuka, jendela pop-up berikut akan ditampilkan. Setelah mengklik OK, jendela pop-up akan ditutup dan konten akan ditampilkan di halaman web.

dokumen.write()

<!DOCTYPE html>
<html>
    <kepala>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=lebar perangkat, skala awal=1">
        <title>dokumen.tulis()</title>
    </kepala>
    <tubuh>
        <p>Menulis dokumen HTML</p>
        <skrip tipe="teks/javascript">
            dokumen.write(Tanggal());
        </skrip>

    </tubuh>
</html>

Setelah membuat file HTML baru dan menulis konten di atas, browser dibuka dan halaman akan menampilkan konten berikut. Anda dapat melihat bahwa penulisan waktu saat ini menggunakan document.write() berhasil. Namun perlu diperhatikan bahwa jika document.write() dimuat bersamaan dengan konten lain dan sebelum konten dimuat, konten tersebut dapat ditampilkan bersama dengan konten lain. Namun, jika document.write() dijalankan setelah konten halaman dimuat, semua konten yang dimuat sebelumnya akan ditimpa oleh konten tertulis.

Tampilkan secara bersamaan

<!DOCTYPEhtml>
<html>
    <kepala>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=lebar perangkat, skala awal=1">
        <title>dokumen.tulis()</title>
    </kepala>
    <tubuh>
        <p>Menulis dokumen HTML</p>
        <button onclick="showDate()">Tampilkan waktu</button>
        <skrip tipe="teks/javascript">
            fungsi tampilkanTanggal() {
                dokumen.write(Tanggal());
            }
        </skrip>
    </tubuh>
</html>

Berikut perbandingan sebelum dan sesudah mengeksekusi document.write() setelah halaman dimuat, yang menunjukkan bahwa memanggil document.write() setelah halaman dimuat akan menimpa konten halaman sebelumnya.

sebelum dan sesudah

gambar-20220228153609330

JavaScript

innerHTML

Jika Anda ingin mengakses elemen HTML tertentu, Anda dapat menggunakan metode document.getElementById(id) , lalu Anda dapat menggunakan innerHTML untuk mendapatkan atau menyisipkan konten elemen.

<!DOCTYPEhtml>
<html>
    <kepala>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=lebar perangkat, skala awal=1">
        <title>HTML dalam</title>
    </kepala>
    <tubuh>
        <p id="inner">Memanipulasi elemen HTML</p>
        <button onclick="changeContext()">Klik untuk mengubah konten di atas</button>

        <skrip tipe="teks/javascript">
            fungsi perubahanKonteks() {
                document.getElementById("inner").innerHTML = "Konten yang dimodifikasi";
            }
        </skrip>

    </tubuh>
</html>

Sebelum modifikasi Setelah modifikasi

console.log()

Untuk menggunakan metode console.log() , browser kita perlu mendukung proses debug Chrome. Kemudian gunakan tombol pintas F12 untuk membuka mode debugging dan beralih ke menu Console di jendela debugging. Karena saya menggunakan Edge di sini, konsol ditampilkan. Pilihan browser ini terutama didasarkan pada preferensi Anda sendiri, tetapi Chrome umumnya disarankan.

<!DOCTYPEhtml>
<html>
    <kepala>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=lebar perangkat, skala awal=1">
        <title>konsol.log</title>
    </kepala>
    <tubuh>
        <p>Lihat dalam mode debug browser</p>
        <skrip tipe="teks/javascript">
            var angka1 = 11;
            var angka2 = 10;
            console.log(angka1 + angka2);
        </skrip>
    </tubuh>
</html>

Singkatnya

, hal di atas adalah tentang keluaran dalam JavaScript. Meskipun tidak ada metode System.out.println() untuk pencetakan dan keluaran seperti Java, keempat metode di atas pada dasarnya dapat memenuhi kebutuhan pengembangan sehari-hari.
Artikel Terkait