Menampilkan Output Javascript di HTML – Output adalah sebuah tampilan program yang biasanya digunakan untuk memperlihatkan hasil Setiap bahasa pemrograman apapun biasanya ada cara masing-masing untuk menampilkan output.
Cara Menampilkan Output Javascript
Pada javascript, ada beberapa cara yang bisa digunakan untuk menampilkan output dari hasil coding yang telah di buat. Output biasanya ditampilkan dalam bentuk teks dengan fungsi print().
Berikut ini 4 cara menampilkan output pada Javascript :
- Menggunakan Fungsi console.log();
- Menerapkan Fungsi window.alert();
- Menggunakan document.write();
- Menggunakan innerHTML.
Berikut ini fungsi dan perbedaan dari keempat cara tersebut :
Menggunakan Fungsi console.log()
Fungsi console.log() adalah fungsi untuk menampilkan teks atau output dengan memanfaatkan console pada browser. console.log() biasa digunakan untuk debugging. Karena setiap pesaan error di Javascript selalu ditampilkan di dalam Console. Fungsi ini juga bisa digunakan pada Nodejs.
Contoh penggunaan fungsi console.log() :
console.log("Hello World!");
Cara menggunakan console.log() adalah sebagai berikut :
- Klik kanan pada mouse
- lalu pilih Inspect jika menggunakan Google Chrome
- Jika browser adalah Firefox pilih menu Inspect Element.
- Setelah itu klik tab Console
Maka hasilnya terlihat seperti gambar dibawah ini :
Selain console.log(), ada beberapa fungsi untuk debugging antara lain :
console.debug(), console.info(), console.error(), console.dir(), dll
Menggunakan Fungsi alert()
Fungsi alert() adalah fungsi untuk menampilkan output menggunakan jendela dialog atau pop up pada objek window. Dalam penggunaannya bisa ditulis secara lengkap ” window.alert” atau bisa juga ditulis alert() saja. Fungsi alert(), hanya bisa digunakan di dalam browser saja. Sedangkan pada Nodejs fungsi ini tidak ada.
Contoh penggunaan fungsi alert():
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Dasar Javascript</title>
<script>
alert("Selamat datang di praktekotodidak.com");
function sayHello(){
alert("Hello!");
}
</script>
</head>
<body>
<button onclick="sayHello()">Klik Disini!</button>
</body>
</html>
Fitur window.alert() ini apabila tidak di klik tombol “Ok” maka browser akan terus menampilkan status loading, dan konten tidak akan di load sebelum di klik tombol “Ok”. Hasilnya seperti gambar dibawah ini :
Menggunakan Fungsi document.write()
Fungsi document.write()adalah menampilkan output secara langsung di javascript. Document adalah objek yang mewakili dokumen HTML di dalam Javascript, yang mana terdapat fungsi write() untuk menulis sesuatu ke dokumen HTML.
Contoh penggunaan fungsi document.write() :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Dasar Javascript</title>
<script>
document.write("<h1>Selamat Datang !</h1>");
document.write("<hr>");
document.write("<p>Mari belajar Javascript</p>");
document.write("di <b>praktekotodidak.com</b>")
</script>
</head>
<body>
</body>
</html>
Hasilnya terlihat seperti gambar dibawah ini :
Selain fungsi write(), objek document juga menyediakan berbagai macam fungsi untuk manipulasi dokumen HTML.
Menggunakan innerHTML
innerHTML adalah sebuah atribut di dalam (objek) elemen HTML yang berisi string HTML. Fungsi innerHTML adalah menampilkan output ke elemen HTML yang lebih spesifik.
Contoh penggunaan fungsi innerHTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Dasar Javascript</title>
</head>
<body>
<h1>Belajar Javascript dari awal</h1>
<div id="hasil-output"></div>
<script>
var hasil = document.getElementById("hasil-output"); // membuat objek elemen
hasil.innerHTML = "<p>Mari belajar</p>"; // menampilkan output ke elemen hasil
</script>
</body>
</html>
Dari kode diatas, getElementById() metode mengembalikan elemen yang memiliki ID atribut dengan nilai yang ditentukan. Maka pada kode ini hasilnya terlihat seperti gambar dibawah:
Begitulah tutorial dasar Javascript untuk Menampilkan Output. Baca juga artikel selanjutnya yaitu Belajar Javascript #3 Cara Membuat Variabel di Javascript
