Output JavaScript


JavaScript tidak mempunyai sebarang fungsi pencetakan atau output.

JavaScript untuk memaparkan data

JavaScript boleh mengeluarkan data dengan cara yang berbeza:

  • Gunakan window.alert() untuk pop atas Kotak amaran.

  • Gunakan kaedah document.write() untuk menulis kandungan ke dalam dokumen HTML.

  • ditulis pada elemen HTML menggunakan innerHTML.

  • Gunakan console.log() untuk menulis ke konsol penyemak imbas.

Gunakan window.alert()

Anda boleh muncul kotak amaran untuk memaparkan data:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>
	
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
	
</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Memanipulasi elemen HTML

Untuk mengakses elemen HTML daripada JavaScript, anda boleh menggunakan kaedah document.getElementById(id).

Sila gunakan atribut "id" untuk mengenal pasti elemen HTML dan innerHTML untuk mendapatkan atau memasukkan kandungan elemen:

Contoh

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
	
</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Pernyataan JavaScript di atas (dalam teg <skrip>) boleh dilaksanakan dalam pelayar web:

document.getElementById("demo") ialah kod JavaScript yang menggunakan atribut id untuk mencari elemen HTML .

innerHTML = "Perenggan telah diubah suai digunakan untuk mengubah suai kandungan HTML (innerHTML) elemen kod JavaScript.

Dalam tutorial ini

Dalam kebanyakan kes, dalam tutorial ini kita akan menggunakan kaedah yang diterangkan di atas untuk mengeluarkan:

Contoh berikut terus Tulis <p> ; elemen dengan id="demo" ke output dokumen HTML:

Tulis ke dokumen HTML

Untuk tujuan ujian, anda boleh menulis JavaScript terus dalam HTML Dalam dokumen:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
	
</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat dalam talian instance


Note
Note

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

Sila gunakan document.write() untuk hanya mengeluarkan kandungan bertulis kepada dokumen. <🎜><🎜>Jika document.write dilaksanakan selepas dokumen selesai dimuatkan, keseluruhan halaman HTML akan ditimpa. <🎜>


Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() 
{
    document.write(Date());
}
</script>
	
</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Tulis ke konsol

Jika penyemak imbas anda menyokong penyahpepijatan, anda boleh menggunakan kaedah console.log() untuk memaparkannya dalam nilai JavaScript pelayar.

Gunakan F12 dalam penyemak imbas untuk mendayakan mod nyahpepijat, klik dalam tetingkap penyahpepijatan Menu "Konsol".

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
	
</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Tangkapan skrin konsol instance:

QQ截图20161017131243.png

Tahukah anda?

Note程序中调试是测试，查找及减少bug(错误)的过程。