Membuat Output Dengan Javascript

Membuat Output Dengan Javascript


Output merupakan sebuah tampilan dari proses program yang biasanya kita gunakan untuk memperlihatkan hasil akhir dari program yang dibuat.

Output pada Pemrograman lain biasanya ditampilkan dalam bentuk teks dengan fungsi print().

Ada 4 cara yang akan saya bahas untuk menampilkan output dari program Javascript:


Cara Pertama :  Menggunakan Fungsi console.log()

Fungsi console.log() adalah fungsi yang ada pada pemrograman javascript yang berguna untuk menampilkan teks ke console browser atau console javascript.

Contoh untuk menggunakannya silakan kalian salin coding dibawah berikut, dan coba DISINI :

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<script>
console.log("Ini Adalah Output dari console.log");
</script>
</body>
</html>


Lalu silakan klik ctrl+sift+j untuk membuka console browser dan silakan run program, hasilnya akan seperti ini :

Membuat Output Dengan Javascript
lihat output sebelah kanan yang ada pada console,akan muncul output setiap coding di running


Biasanya console.log() digunakan untuk debugging. Karena setiap pesan error yang ada pada Javascript selalu ditampilkan di dalam Console.

Selain console.log(), terdapat juga beberapa fungsi untuk debugging seperti console.debug(), console.info(), console.error(), console.dir(), dan sebagainya.

Membuat Output Dengan Javascript

Semua fungsi console ini juga berlaku pada console Nodejs.


Cara Kedua : Menggunakan Fungsi alert()

Fungsi alert() merupakan fungsi yang berguna untuk menampilkan jendela dialog yang biasa kita lihat dalam tampilan pop up pada browser. Fungsi ini sebenarnya berada pada objek Windows.

Penulisan lengkapnya adalah seperti ini:
window.alert("Ini Output dari Window Alert");
Bisa juga hanya alert() saja seperti berikut :
alert("Ini Output dari Alert");
Fungsi alert(), hanya berfungsi pada browser saja. Sedangkan pada Nodejs fungsi ini tidak ada.


Berikut ini contoh coding penggunaan fungsi alert():

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Javascript</title>
    <script>
        alert("Selamat datang di tutorial belajar Javascript FajarYusuf.Com");
        function sayHello(){
            alert("Semangat Belajar!");
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">Klik Ini Donk!</button>
</body>
</html>



Hasilnya:
Membuat Output Dengan Javascript


Cara Ketiga : Menggunakan Fungsi document.write()

Objek document merupakan objek yang mewakili sebuah dokumen HTML di dalam Javascript.

Didalam objek document, terdapat fungsi write() untuk menulis sesuatu ke dokumen HTML.

Contoh codingnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Javascript di FajarYusuf.Com</title>
    <script>
        document.write("<h1>Saya Tampan</h1>");
        document.write("<hr>");
        document.write("<p>Dan Saya sedang belajar Javascript</p>");
        document.write("di <b>FajarYusuf.Com</b>")
    </script>
</head>
<body>
</body>
</html>



Hasilnya:
Membuat Output Dengan Javascript


Bukan hanya fungsi write(), objek document juga menyediakan berbagai macam fungsi untuk memanipulasi dokumen HTML.

Cara Keempat : Menggunakan innerHTML

innerHTML merupakan sebuah atribut di dalam (objek) elemen HTML yang berisi string HTML.

Dengan menggunakan innerHTML, kita dapat menampilkan output ke elemen yang lebih spesifik.

Contoh Codingnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Javascript FajarYusuf.Com</title>
</head>
<body>
    <h1>Tutorial Javascript Lengkap</h1>
    <div id="hasil_output"></div>
    <script>
        //membuat objek elemen
        var hasil = document.getElementById("hasil_output");
        //menampilkan output ke elemen hasil
        hasil.innerHTML = "<p>Ini adalah Output dari InnerHTML</p>";
    </script>
</body>
</html>



Hasilnya:

Membuat Output Dengan Javascript
Disqus Comments