4 Cara Mudah Menampilkan Output pada JavaScript

Javascript adalah bahasa pemrograman yang sering digunakan untuk membuat halaman web interaktif. Javascript dapat digunakan untuk menampilkan output berupa teks, angka, gambar, dan lainnya.

Ada beberapa cara untuk menampilkan output pada Javascript. Berikut adalah beberapa cara yang umum digunakan:

{getToc} $title={Table of Contents}

Menggunakan console.log()

Fungsi console.log() digunakan untuk menampilkan output ke konsol. Output yang ditampilkan menggunakan fungsi console.log() akan terlihat di konsol peramban.

Baca juga: Memahami Variabel dan Tipe Data dalam Javascript

Berikut adalah contoh penggunaan fungsi console.log() untuk menampilkan output teks:

console.log("Hello, world!"); {codeBox}

Output:

Hello, world!

Berikut adalah contoh penggunaan fungsi console.log() untuk menampilkan output angka:

console.log(123); {codeBox}

Output:

123 

Berikut adalah contoh penggunaan fungsi console.log() untuk menampilkan output gambar:

const image = document.getElementById("image");

console.log(image); {codeBox}

Output:

<img src="image.png" alt="Image">

Menggunakan alert()

Fungsi alert() digunakan untuk menampilkan dialog box. Output yang ditampilkan menggunakan fungsi alert() akan terlihat di dialog box.

Berikut adalah contoh penggunaan fungsi alert() untuk menampilkan output teks:

alert("Hello, world!"); {codeBox}

Output:

Hello, world!

Berikut adalah contoh penggunaan fungsi alert() untuk menampilkan output angka:

alert(123); {codeBox}

Output:

123

Berikut adalah contoh penggunaan fungsi alert() untuk menampilkan output gambar:

const image = document.getElementById("image");

alert(image); {codeBox}

Output:

<img src="image.png" alt="Image">

Menggunakan document.write()

Fungsi document.write() digunakan untuk menulis output ke halaman web. Output yang ditampilkan menggunakan fungsi document.write() akan terlihat di halaman web.

Berikut adalah contoh penggunaan fungsi document.write() untuk menampilkan output teks:

document.write("Hello, world!"); {codeBox}

Output:

Hello, world!

Berikut adalah contoh penggunaan fungsi document.write() untuk menampilkan output angka:

document.write(123); {codeBox}

Output:

123

Berikut adalah contoh penggunaan fungsi document.write() untuk menampilkan output gambar:

const image = document.getElementById("image");

document.write(image); {codeBox}

Output:

<img src="image.png" alt="Image">

Menggunakan HTML element

Output pada Javascript juga dapat ditampilkan menggunakan HTML element. Untuk melakukannya, kita dapat menggunakan fungsi innerHTML() untuk mengisi konten HTML element.

Baca juga: Perbedaan Antara Bahasa Pemrograman Java dan JavaScript

Berikut adalah contoh penggunaan fungsi innerHTML() untuk menampilkan output teks:

const element = document.getElementById("element");

element.innerHTML = "Hello, world!"; {codeBox}

Output:

Hello, world!

Berikut adalah contoh penggunaan fungsi innerHTML() untuk menampilkan output angka:

const element = document.getElementById("element");

element.innerHTML = 123; {codeBox}

Output:

123

Berikut adalah contoh penggunaan fungsi innerHTML() untuk menampilkan output gambar:

const element = document.getElementById("element");

const image = document.createElement("img");

image.src = "image.png";

image.alt = "Image";

element.innerHTML = image; {codeBox}

Output:

<img src="image.png" alt="Image">

Kesimpulan

Ada beberapa cara untuk menampilkan output pada Javascript. Cara yang dipilih tergantung pada kebutuhan dan preferensi Anda.

Jika Anda ingin menampilkan output ke konsol, Anda dapat menggunakan fungsi console.log(). Jika Anda ingin menampilkan output ke dialog box, Anda dapat menggunakan fungsi alert(). Jika Anda ingin menampilkan output ke halaman web, Anda dapat menggunakan fungsi document.write() atau HTML element.