tutorial pengembangan web terbaru
 

JavaScript Keluaran


JavaScript TIDAK memiliki built-in print atau tampilan fungsi.


JavaScript Tampilan Kemungkinan

JavaScript dapat "display" data dalam berbagai cara:

  • Menulis dalam kotak peringatan, menggunakan window.alert() .
  • Menulis ke output HTML menggunakan document.write() .
  • Menulis ke elemen HTML, menggunakan innerHTML .
  • Menulis ke konsol peramban, menggunakan console.log() .

Menggunakan window.alert()

Anda dapat menggunakan kotak peringatan untuk menampilkan data:

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>
Cobalah sendiri "

Menggunakan document.write()

Untuk tujuan pengujian, akan lebih mudah untuk menggunakan document.write() :

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>
Cobalah sendiri "

Menggunakan document.write() setelah dokumen HTML sepenuhnya dimuat, akan menghapus semua HTML yang ada:

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<button onclick="document.write(5 + 6)">Try it</button>

</body>
</html>
Cobalah sendiri "

The document.write() metode seharusnya hanya digunakan untuk pengujian.


menggunakan innerHTML

Untuk mengakses sebuah elemen HTML, JavaScript dapat menggunakan document.getElementById(id) metode.

The id atribut mendefinisikan elemen HTML. The innerHTML properti mendefinisikan konten HTML:

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>
Cobalah sendiri "

Untuk "display data" dalam HTML, (dalam banyak kasus) Anda akan menetapkan nilai dari suatu innerHTML properti.


Menggunakan console.log()

Dalam browser Anda, Anda dapat menggunakan console.log() metode untuk menampilkan data.

Aktifkan konsol Browser dengan F12, dan pilih "Console" di menu.

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>
Cobalah sendiri "