Kod contoh memperincikan pelbagai cara untuk mengeluarkan data dalam JavaScript-tutorial js-php.cn

Kod contoh memperincikan pelbagai cara untuk mengeluarkan data dalam JavaScript

WBOY

Lepaskan： 2022-08-03 17:00:32

ke hadapan

2075 orang telah melayarinya

Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript Dalam JavaScript, tidak seperti bahasa seperti Java, ia tidak mempunyai sebarang kaedah pencetakan atau output. Terdapat 4 kaedah dalam js Untuk mengeluarkan data, ini artikel akan memperkenalkannya kepada anda secara terperinci melalui contoh kod saya harap ia akan membantu anda.

Kod contoh memperincikan pelbagai cara untuk mengeluarkan data dalam JavaScript

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Kata Pengantar

Dalam JavaScript, tidak seperti bahasa seperti Java, ia tidak mempunyai sebarang kaedah pencetakan atau output Empat kaedah berikut biasanya digunakan untuk mengeluarkan data.

Gunakan window.alert() untuk muncul kotak amaran
Gunakan document.write() untuk menulis kandungan ke dalam dokumen HTML
Gunakan innerHTML untuk menulis ke dalam Elemen HTML
gunakan console.log() untuk menulis ke konsol penyemak imbas

Ia digunakan di bawah untuk menunjukkan contoh.

window.alert()

Buat fail HTML baharu, kemudian gunakan VSCode untuk menulis kod berikut.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>window.alert()</title>
    </head>
    <body>
        <p>弹窗显示</p>
        <script type="text/javascript">
            window.alert("这是一条弹窗测试！");
        </script>

    </body>
</html>

Salin selepas log masuk

Kemudian buka fail di atas dengan penyemak imbas Apabila membuka, tetingkap pop timbul berikut akan dipaparkan Klik OK untuk menutup tetingkap timbul, dan kemudian memaparkan kandungan pada halaman web .

document.write()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>document.write()</title>
    </head>
    <body>
        <p>写入 HTML 文档</p>
        <script type="text/javascript">
            document.write(Date());
        </script>

    </body>
</html>

Salin selepas log masuk

Selepas mencipta fail HTML baharu dan menulis kandungan di atas, penyemak imbas akan dibuka dan halaman akan dipaparkan kandungan berikut Anda boleh Lihat bahawa menggunakan document.write() untuk menulis masa semasa berjaya. Walau bagaimanapun, perlu diingat bahawa jika document.write() dimuatkan pada masa yang sama dengan kandungan lain dan sebelum kandungan dimuatkan, ia boleh dipaparkan bersama dengan kandungan lain. Tetapi jika document.write() dilaksanakan selepas kandungan halaman selesai dimuatkan, maka semua kandungan yang telah dimuatkan pada halaman sebelumnya akan ditimpa oleh kandungan bertulis.

Kod contoh memperincikan pelbagai cara untuk mengeluarkan data dalam JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>document.write()</title>
    </head>
    <body>
        <p>写入 HTML 文档</p>
        <button onclick="showDate()">展示时间</button>
        <script type="text/javascript">
            function showDate() {
                document.write(Date());
            }
        </script>
    </body>
</html>

Salin selepas log masuk

Berikut ialah perbandingan sebelum dan selepas melaksanakan document.write() selepas halaman dimuatkan, menunjukkan bahawa memanggil document.write() selepas halaman dimuatkan akan menimpa kandungan halaman sebelumnya.

Sebelum dan selepas

Kod contoh memperincikan pelbagai cara untuk mengeluarkan data dalam JavaScript

innerHTML

JavaScript Jika anda ingin mengakses elemen HTML tertentu , anda boleh Gunakan kaedah document.getElementById(id), dan kemudian anda boleh gunakan innerHTML untuk mendapatkan atau memasukkan kandungan elemen.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>innerHTML</title>
    </head>
    <body>
        <p id="inner">操纵 HTML 元素</p>
        <button onclick="changeContext()">点击修改上述内容</button>

        <script type="text/javascript">
            function changeContext() {
                document.getElementById("inner").innerHTML = "修改后的内容";
            }
        </script>

    </body>
</html>

Salin selepas log masuk

Sebelum pengubahsuaian Selepas pengubahsuaian

console.log()

Untuk digunakan Kaedah console.log() memerlukan penyemak imbas kami untuk menyokong penyahpepijatan Chrome biasanya disyorkan. Kemudian gunakan kekunci pintasan F12 untuk membuka mod nyahpepijat dan beralih ke menu Console dalam tetingkap nyahpepijat. Oleh kerana saya menggunakan Edge di sini, konsol ini dipaparkan terutamanya berdasarkan pilihan anda sendiri, tetapi Chrome biasanya disyorkan.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>console.log</title>
    </head>
    <body>
        <p>浏览器调试模式查看</p>
        <script type="text/javascript">
            var num1 = 11;
            var num2 = 10;
            console.log(num1 + num2);
        </script>
    </body>
</html>

Salin selepas log masuk

Ringkasan

Di atas adalah mengenai output dalam JavaScript, walaupun tiada kaedah System.out.println() serupa untuk mencetak seperti Java dan output, tetapi menggunakan empat kaedah di atas pada asasnya dapat memenuhi keperluan pembangunan harian.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Kod contoh memperincikan pelbagai cara untuk mengeluarkan data dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!