JavaScript : Hasil Output JavaScript

Hasil Output Pada JavaScript

Ada situasi tertentu di mana kalian mungkin perlu menghasilkan output dari kode JavaScript kalian. Misalnya, kalian mungkin ingin melihat nilai variabel, atau menulis pesan ke browser console untuk membantu kalian men-debug masalah dalam kode JavaScript yang kalian jalankan, dan sebagainya.

Dalam JavaScript ada beberapa cara berbeda untuk menghasilkan output termasuk menulis output ke jendela browser atau konsol browser, menampilkan output dalam kotak dialog, menulis output ke dalam elemen HTML, dll.

Menulis Output ke Browser Console

Kalian dapat dengan mudah menampilkan pesan atau menulis data ke konsol browser menggunakan metode console.log (). Ini adalah metode yang sederhana, tetapi sangat baik untuk menghasilkan output detail. Berikut contohnya:

// Printing a simple text message
console.log("Hello World!"); // Prints: Hello World!

// Printing a variable value 
var x = 10;
var y = 20;
var sum = x + y;
console.log(sum); // Prints: 30
Menampilkan Output di Kotak Dialog Alert

Kalian juga dapat menggunakan kotak dialog alert untuk menampilkan pesan atau menampilkan data kepada pengguna. Kotak dialog dibuat menggunakan metode alert(). Berikut contohnya:

// Displaying a simple text message
alert("Hello World!"); // Outputs: Hello World!

// Displaying a variable value 
var x = 10;
var y = 20;
var sum = x + y;
alert(sum); // Outputs: 30
Menulis Output ke Jendela Browser

Kalian dapat menggunakan metode document.write() untuk menulis konten ke dokumen kalian yang saat ini hanya pada saat dokumen tersebut sedang diuraikan. Berikut contohnya:

// Printing a simple text message
document.write("Hello World!"); // Prints: Hello World!

// Printing a variable value 
var x = 10;
var y = 20;
var sum = x + y;
document.write(sum); // Prints: 30

Jika kalian menggunakan metode document.write() setelah halaman tersebut dimuat, hal tersebut akan menimpa semua konten yang ada dalam dokumen itu. Lihat contoh berikut:

<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>

<button type="button" onclick="document.write('Hello World!')">Click Me</button>
Memasukkan Output ke dalam Elemen HTML

Kalian juga bisa menulis atau menyisipkan output di dalam elemen HTML menggunakan properti elemen innerHTML. Namun, sebelum menulis output terlebih dahulu kita perlu memilih elemen menggunakan metode seperti getElementById(), seperti yang ditunjukkan dalam contoh berikut:

<p id="greet"></p>
<p id="result"></p>

<script>
// Writing text string inside an element
document.getElementById("greet").innerHTML = "Hello World!";

// Writing a variable value inside an element
var x = 10;
var y = 20;
var sum = x + y;
document.getElementById("result").innerHTML = sum;
</script>