tutorial javascript – bisasoftware.id https://www.bisasoftware.id/2026 bisasoftware.id melayani dengan sepenuh hati Wed, 07 Jan 2026 04:39:39 +0000 id hourly 1 https://wordpress.org/?v=6.9.4 https://www.bisasoftware.id/2026/wp-content/uploads/2025/12/cropped-cropped-logo_bs-copy-32x32.png tutorial javascript – bisasoftware.id https://www.bisasoftware.id/2026 32 32 BAB 2 – Output Data https://www.bisasoftware.id/2026/bab-2-output-data/ https://www.bisasoftware.id/2026/bab-2-output-data/#respond Mon, 22 Dec 2025 05:14:32 +0000 http://localhost/2026/?p=139 Indikator Materi :
1. Menjelaskan pengertian output data javascript
2. Menerapkan fungsi console.log() untuk output data javascript
3. Menerapkan fungsi alert() untuk output data javascript
4. Menerapkan fungsi document.write() untuk output data javascript
5. Menerapkan fungsi innerHTML untuk output data javascript

Output adalah sebuah tampilan program yang biasanya digunakan untuk memperlihatkan hasil akhir.

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

Ada 4 cara menampilkan output pada Javascript:

  1. Menggunakan Fungsi console.log();
  2. Menggunakan Fungsi alert();
  3. Menggunakan Fungsi document.write();
  4. Menggunakan innerHTML.

Apa perbedaan dari keempat cara tersebut?

1. Menggunakan Fungsi console.log()

Fungsi console.log() adalah fungsi untuk menampilkan teks ke console Javascript.

Contoh penggunaan:

console.log("Hello World!");

Hasilnya:

Console Javascript

Fungsi console.log() biasanya digunakan untuk debugging. Karena setiap pesaan error di Javascript selalu ditampilkan di dalam Console.

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

Fungsi-fungsi dalam console

Fungsi-fungsi console ini juga berlaku pada console Nodejs.

Console Nodejs

2. Menggunakan Fungsi alert()

Fungsi alert() adalah fungsi untuk menampilkan jendela dialog. Fungsi sebenarnya berada pada objek window.

Secara lengkap bisa ditulis seperti ini:

window.alert("Hello World!");

Bisa juga ditulis alert() saja seperti ini:

alert("Hello World!");

Fungsi alert(), hanya bisa digunakan di dalam browser saja. Sedangkan pada Nodejs fungsi ini tidak ada.

Fungsi alert pada nodejs

Contoh penggunaan fungsi alert():

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Javascript</title>
    <script>
        alert("Selamat datang di tutorial belajar Javascript");

        function sayHello(){
            alert("Hello!");
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">Klik Aku!</button>
</body>
</html>

Hasilnya:

Contoh penggunaan alert

3. Menggunakan Fungsi document.write()

Objek document adalah objek yang mewakili dokumen HTML di dalam Javascript.

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

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Javascript</title>
    <script>
        document.write("<h1>Hello World!</h1>");
        document.write("<hr>");
        document.write("<p>Saya sedang belajar Javascript</p>");
        document.write("di <b>petanikode.com</b>")
    </script>
</head>
<body>

</body>
</html>

Hasilnya:

Contoh output ke dokumen HTML

Selain fungsi write(), objek document juga menyediakan berbagai macam fungsi untuk manipulasi dokumen HTML.

4. Menggunakan innerHTML

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

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

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Javascript</title>
</head>
<body>

    <h1>Tutorial Javascript untuk Pemula</h1>
    <div id="hasil-output"></div>


    <script>
        // membuat objek elemen
        var hasil = document.getElementById("hasil-output");

        // menampilkan output ke elemen hasil
        hasil.innerHTML = "<p>Aku suka Javascript</p>";
    </script>

</body>
</html>

Hasilnya:

Conto penggunaan innerHTML

Sumber : www.petanikode.com

See the Pen project by deka wildan (@deka-wildan) on CodePen.

TUGAS !
1. Buatlah program dari javascript menggunakan keempat fungsi output tersebut untuk menampilkan kalimat “Belajar javascript itu menyenangkan !” !
2. Berikan kesimpulan untuk penggunaan dari 4 fungsi output data javascript !

]]> https://www.bisasoftware.id/2026/bab-2-output-data/feed/ 0 BAB 1 – Pengenalan Javascript https://www.bisasoftware.id/2026/bab-1-pengenalan-javascript/ https://www.bisasoftware.id/2026/bab-1-pengenalan-javascript/#respond Mon, 22 Dec 2025 05:10:49 +0000 http://localhost/2026/?p=137 Indikator Materi :
1. Menjelaskan Pengertian Javascript
2. Menjelaskan Sejarah singkat Javascript
3. Menjelaskan Generasi Ecma Script
4. Menjelaskan Tools Javascript

Javascript adalah bahasa pemrograman yang awalnya dirancang untuk berjalan di atas browser.

Namun, seiring perkembangan zaman, javascript tidak hanya berjalan di atas browser saja. Javascript juga dapat digunakan pada sisi Server, Game, IoT, Desktop, dsb.

Javascript awalnya bernama Mocha, lalu berubah menjadi LiveScript saat browser Netscape Navigator 2.0 rilis versi beta (September 1995). Namun, setelah itu dinamai ulang menjadi Javascript.

Terinspirasi dari kesuksesan Javascript, Microsoft mengadopsi teknologi serupa. Microsoft membuat ‘Javascript’ versi mereka sendiri bernama JScript. Lalu di tanam pada Internet Explorer 3.0.

Akhirnya pada tahun 1996, Netscape mengirimkan standarisasi ECMA-262 ke Ecma International

. Sehingga lahirlah standarisasi kode Javascript bernama ECMAScript atau ES. Saat ini ECMAScript sudah mencapai versi 8 (ES8).

Versi ECMAScriptTahun Rilis
ES 1Juni 1997
ES 2Juni 1998
ES 3Desember 1999
ES 4Terbengkalai
ES 5Desember 2009
ES 5.1Juni 2011
ES 6Juni 2015
ES 7Juni 2016
ES 8Juni 2017

Peralatan untuk Belajar Javascript

Apa saja peralatan yang harus disiapkan untuk belajar Javascript?

  1. Web Browser (Google Chrome, Firefox, Opera, dll)
  2. Teks Editor (rekomendasi: VS Code)

TUGAS !
1. Tonton video di youtube tentang perbedaan dari ES 1 sampai ES 8 !
2. Rangkum perbedaannya !

]]> https://www.bisasoftware.id/2026/bab-1-pengenalan-javascript/feed/ 0