Belajar Javascript #2 Menampilkan Output pada Javascript

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 :

  1. Menggunakan Fungsi console.log();
  2. Menerapkan Fungsi window.alert();
  3. Menggunakan document.write();
  4. 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 :

Menampilkan Output Javascript

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.

Menampilkan Output Javascript

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 :

Menampilkan Output Javascript

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 :

Menampilkan Output Javascript

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:

Menampilkan Output Javascript

Begitulah tutorial dasar Javascript untuk Menampilkan Output. Baca juga artikel selanjutnya yaitu Belajar Javascript #3 Cara Membuat Variabel di Javascript

Tinggalkan Balasan

Scroll to Top