JavaScript merupakan bahasa yang diciptakan untuk browser alias bahasa pemrograman sisi client pada awalnya, oleh sebab itu JavaScript sudah pasti mendukung untuk dijalankan dalam browser ataupun dalam sebuah web.

Salah satu cara melihatnya ialah dengan membuak inspect element dan pilih tab/menu console. Di dalam console, kita bisa menulis fungsi atau kode-kode javascript dan hasilnya akan langsung ditampilkan.

Misalnya, seperti kode berikut:

1
2
console.log("Hi apa kabar!");
alert("Saya sedang belajar javascript");

JavaScript pada HTML

buatlaht file baru bernama hello_world.html pada editor dan isi dengan kode berikut:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <title>Hello World Javascript</title>
</head>
<body>
    <script>
        console.log("Saya belajar Javascript");
        document.write("Hello World!");
    </script>
</body>
</html>

Sebelumnya kita telah menulis perintah

console.log(“Saya belajar Javascript”);
Mengapa tidak ditampilkan?

Karena perintah atau fungsi console.log() akan menampilkan pesan ke dalam console javascript. Sedangkan perintah document.write() berfungsi untuk menulis ke dokumen HTML, maka dia akan ditampilkan ke sana.

Sekarang coba saja buka console javascript.

Maka kita akan melihat pesan “Saya belajar Javascript”.

Pada contoh di atas, kita sudah menulis kode javascript di dalam HTML.

Cara tersebut merupakan cara penulisan embeded (ditempel).

Masih ada beberapa cara lagi yang perlu kita ketahui yaitu:

  • Embed (Kode Javascript ditempel langsung pada HTML. Contoh: seperti diatas)
  • Inline (kode Javascript ditulis pada atribut HTML)
  • Eksternal (Kode Javascript ditulis terpisah dengan file HTML)

  1. Penulisan Kode javascript dengan Embed
    Pada cara ini, kita menggunakan tag script untuk menempelkan (embed) kode Javascript pada HTML. Tag ini dapat ditulis di dalam tag dan .

    Contoh:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html>
        <head>
            <title>Belajar Javascript dari Nol</title>
            <script>
                // ini adalah penulisan kode javascript
                // di dalam tag <head>
                console.log("Hello JS dari Head");
            </script>
        </head>
        <body>
            <p>Tutorial Javascript untuk Pemula</p>
            <script>
                // ini adalah penulisan kode javascript
                // di dalam tag <body>
                console.log("Hello JS dari body");
            </script>
        </body>
    </html>

    Mana yang lebih bagus, ditulis di dalam tag head atau body?

    Banyak yang merekomendasikan menuliskannya di dalam body, karena akan membuat web di-load lebih cepat.

  2. Penulisan Kode javascript Inline
    Pada cara ini, kita akan menulis kode javascript di dalam atribut HTML. Cara ini biasanya digunakan untuk memanggil suatu fungsi pada event tertentu.

    Misal: saat link diklik.

    Contoh:

    1
    <a href="#" onclick="alert('Yey!')">Klik aku!</a>

    atau bisa juga seperti ini:

    1
    <a href="javascript:alert('Yey!')">Klik aku!</a>

    Pada atribut onclick dan href kita menuliskan fungsi javascript di sana.

    Atribut onclick merupakan atribut HTML untuk menyatakan fungsi yang akan dieksekusi saat elemen itu diklik.

    Pada contoh di atas, kita menjalankan fungsi alert(). Fungsi ini merupakan fungsi untuk menampilkan dialog.

    Lalu pada atribut href, kita juga memanggil fungsi alert() dengan didahului javascript:.

    Atribut href sebenarnya digunakan untuk mengisi alamat link atau URL.

    Karena kita ingin memanggil kode javascript di sana, maka alamat link tersebut kita ubah menjadi javascript: lalu diikuti dengan fungsi yang akan dipanggil.

  3. Penulisan Kode javascript Eksternal
    Pada cara ini, kita akan menulis kode javascript secara terpisah dengan file HTML.

    Cara ini biasanya digunakan pada proyek-proyek besar, karena diyakini—dengan cara ini—dapat lebih mudah mengelola kode project.

    Mari kita lihat contohnya.

    Kita buat dua file, yaitu: file HTML dan Javascript.

    📂 belajar-js/
    ├── 📜 kode-program.js
    └── 📜 index.html

    Isi dari file kode-program.js:

    1
    alert("Hello, ini adalah program JS eksternal!");

    Isi dari file index.html:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html>
        <head>
            <title>Belajar Javascript dari Nol</title>
        </head>
        <body>
            <p>Tutorial Javascript untuk Pemula</p>

            <!-- Menyisipkan kode js eksternal -->
            <script src="kode-program.js"></script>
        </body>
    </html>

    Pada contoh di atas, kita menulis kode javascript terpisah dengan kode HTML.

    Lalu, pada kode HTML…

    Kita menyisipkannya dengan memberikan atribut src pada tag script.

    1
    2
    <!-- Menyisipkan kode js eksternal -->
    <script src="kode-program.js"></script>

    Maka, apapun yang ada di dalam file kode-program.js akan dapat dibaca dari file index.html.

    Bagaimana kalau file JavaScript-nya berada di folder yang berbeda?

    Kita bisa menuliskan alamat lengkap folder-nya.

    Contoh:

    Misal kita punya struktur folder seperti ini:

    📂 belajar-js/
    ├── 📂 js/
    | └── 📜 kode-program.js
    └── 📜 index.html

    Maka untuk menyisipkan file kode-program.js ke dalam HTML, kita bisa menuliskannya seperti ini:

    1
    <script src="js/kode-program.js"></script>

    Karena file kode-program.js berada di dalam direktori js.

    Kita juga bisa menyisipkan javascript yang ada di internet dengan memberikan alamat URL lengkapnya.

    Contoh:

    1
    <script src="https://www.petanikode.com/js/kode.js"></script>

4 Cara Menulis Kode Javascript pada HTML

Ada 4 cara menulis kode Javascript pada HTML. Dari keempat cara ini, ada yang biasa dan sering digunakan. ada juga yang ‘aneh’, jarang digunakan sih tapi masih work!

Apa saja keempat cara itu?

  1. Menulis Javascript pada Tag script
    Penulisan kode Javascript menggunakan tag script adalah cara umum yang digunakan.

    Tag script dapat kita buat di dalam tag head maupun body.

    Contoh:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Penulisan Javascript</title>
            <script>
                console.log("Hi, ini kode Javascript");
            </script>
        </head>
        <body>
       
            <script>
                document.write("Javascript itu keren!");
            </script>
        </body>
    </html>

    Mana sih yang lebih baik?

    ditulis di dalam head atau di body?

    Kedua cara ini memang sah-sah saja dilakukan, namun ada juga pendapat yang mengatakan:

    Placing scripts at the bottom of the body element improves the display speed, because script interpretation slows down the display.

    Penulisan di akhir bod akan meningkatkan kecepatan display atau tampilannya konten di web.

    Karena, jika kita tulis di dalam , script tersebut akan dieksekusi terlebih dahulu sebelum konten ditampilkan.

    Jadi, disarankan menulis kode Javascript di dalam body, tepatnya sebelum tutup /body.

  2. Menulis Javascript pada File Eksternal
    Cara kedua, kita bisa menulis Javascript di File yang terpisah dengan HTML.

    Biasanya digunakan jika kita tidak ingin kode Javascript bercampur dengan kode HTML.

    Bagaimana caranya?

    Caranya, buatlah sebuah file yang berekstensi .js. File ini kita isi dengan kode Javascript.

    Sebagai contoh, saya akan membuat file eksternal dengan nama kode-script.js dan file-external.html sebagai kode HTML-nya.

    file javascript dan html
    Berikut ini isi file kode-script.js :

    1
    document.write("Kode Javascript dari File Eksternal");

Lalu isi file-external.html adalah sebagai berikut:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Penulisan Javascript</title>
    </head>
    <body>
        <script src="kode-script.js"></script>
    </body>
</html>

Pada kode HTML file-external.html, kita tetap menggunakan tag script. Akan tetapi, tag ini tidak kita isi dengan kode Javascript. Melainkan kita menggunakan atribut src untuk menggunakan kode Javascript yang ada di file kode-script.js.

O ya, perlu diperhatikan juga:

Tag script tetap harus ditutup dengan /script walaupun tidak punya isi.

Salah: ❌

1
<script src="kode-script.js">

Benar: ✅

1
<script src="kode-script.js"></script>

Lalu gimana jika kode Javascript-nya berada di folder yang berbeda dengan dokumen HTML-nya?

Atau JavaScript-nya berada di internet?

Itu gimana?

Untuk kode Javascript yang berada di folder yang berbeda, kita menulisnya mengikuti alamat path folder-nya.

Misalnya struktur folder-nya seperti ini:
📂 belajar-js/
├── 📂 js/
| └── 📜 kode-program.js
└── 📜 index.html

Karena file kode-program.js berada di dalam folder js, maka kita harus menulisnya:

1
<script src="js/kode-script.js"></script>

Gimana paham kan?

Nah, untuk kode Javascript yang diambil dari internet, kita cukup tuliskan alamat URL dari Javascript tersebut.

Contoh:

1
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  1. Menulis Javascript pada Atribut
    Penulisan Javascript pada atribut bisanya dilakukan pada atribut event.

    Contoh:

    1
    <button onclick="alert('Ok Terima kasih!')">Klik donk!</button>

    Pada contoh ini, kita membuat elemen button dan memiliki atribut onclick yang berisi kode Javascript.

    Nantinya, kode javascript yang ada di dalam atribut onclick akan dieksekusi saat event klik terjadi pada elemen button.

    Apakah Javascript hanya bisa ditulis pada atribut onclick saja?

    Atribut onclick adalah salah satu atribut event yang ada di HTML, kode Javascript bisa ditulis di semua atribut event.

    Ingat atribut event!

    Bukan atribut biasa.

    Jika kamu ingin lihat semua atribut event, silakan cek di Event Reference pada materi HTML.

    Penulisan atribut event di HTML diawali dengan on, misalnya untuk event click, maka pada atribut HTML ditulis onclick.

    Contoh lagi biar makin paham:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Penulisan Javascript di Atribut</title>
        </head>
        <body>
            <textarea onkeyup="document.getElementById('counter').innerText = this.value.length" cols="30" rows="10"></textarea>
            <p>Panjang: <span id="counter">0</span> karakter</p>
        </body>
    </html>

    Pada contoh ini, kita menggunakan event keyup, maka ditulis onkeyup. Event ini terjadi saat kita melepas tombol di keyboard.

    Jadi nantinya saat kita mengetik pada elemen textarea, kode Javascript yang ada di onkeyup akan dieksekusi.

    Kode Javascript tersebut berfungsi untuk menampilkan jumlah karakter yang diketik.

  2. Penulisan Javascript pada URL
    Nah ini yang menurut saya cara yang cukup aneh.

    Cara ini memang jarang digunakan dan hampir tidak ada yang menggunakannya di dalam aplikasi.

    Tapi tetap bisa.

    Caranya, pada URL kita gunakan javascript: lalu diikuti dengan kode Javascript yang ingin dieksekusi.

    Contoh:

    1
    javascript:alert("Nah! ini Javascript")

    Ini di ketik pada address bar browser.

    Catatan: Cara ini tidak bekerja di web browser versi terbaru, karena ini merupakan sebuah celah yang bisa dipakai untuk serangan XSS.

    Lalu, bagaimana kita menggunakan cara ini di HTML?

    Cara ini bisa kita gunakan pada tag a, lalu mengisinya di atribut href.

    Contoh:

    1
    <a href="javascript:alert('Wih! hebat bukan?')">Coba Klik</a>

    Jadi saat link a diklik, ia akan membuka URL javascript: dan menjalankan kode Javascript yang ada di sana.

    Mirip seperti event onclick ya.

4 Cara Menampilkan Output pada Javascript

Cara Menampilkan Output pada 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 yaitu:

  • Menggunakan Fungsi console.log();
  • Menggunakan Fungsi alert();
  • Menggunakan Fungsi document.write();
  • Menggunakan innerHTML.

Apa perbedaan dari keempat cara tersebut?

Mari kita bahas

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

    Contoh penggunaan:

    1
    console.log("Hello World!");

    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.

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

    Secara lengkap bisa ditulis seperti ini:

    1
    window.alert("Hello World!");

    Bisa juga ditulis alert() saja seperti ini:

    1
    alert("Hello World!");

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

    Contoh penggunaan fungsi alert():

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!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>

  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:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!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>

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

    Menyisipkan variabel pada document write

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Belajar Variabel dalam Javascript</title>
        <script>
            // membuat variabel
            let name = "Zulma Blog";
            let visitorCount = 1000000;
            let isActive = true;
            let url = "https://blog.zulma.id";

            // menampilkan variabel ke jendela dialog (alert)
            alert("Selamat datang di " + name);
     
            // menampilkan variabel ke dalam HTML
            document.write("Nama Situs: " + name + "<br>");
            document.write("Jumlah Pengunjung: " + visitorCount + "<br>");
            document.write("Status Aktif: " + isActive + "<br>");
            document.write("Alamat URL: " + url + "<br>");
        </script>
    </head>
    <body>
       
       
    </body>
    </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:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!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
            let hasil = document.getElementById("hasil-output");

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

    </body>
    </html>

Akhir Kata
Bagaimana?

Sudah paham ‘kan perbedaan dari keempat fungsi tersebut. Kalau kita ringkas akan seperti ini:

Fungsi console.log() untuk menampilkan output ke console Javascript;
Fungsi alert() untuk menampilkan output ke jendela dialog;
Fungsi document.write() untuk menulis output ke dokumen HTML;
Atribut innerHTML untuk menampilkan output ke elemen HTML yang lebih spesifik.

Mengenal 3 Macam Jendela Dialog Javascript

Pada tutorial sebelumnya, kita sudah belajar 4 cara menampilkan output pada Javascript

Salah satunya dengan menggunakan fungsi alert(). Fungsi merupakan sebuah fungsi yang akan menampikan jendela dialog.

Lalu pertanyaannya:

Bagaimana cara mengambil input?

Ada dua cara yang bisa kita lakukan:
Menggunakan form dan menggunakan jendela dialog.

Pada artikel ini, kita akan membahas cara menggunakan jendela dialog.

Jendela dialog merupakan jendela yang digunakan untuk berinteraksi dengan pengguna.

Ada tiga macam jendela dialog pada Javascript:

  • Jendela dialog alert();
  • Jendela dialog confirm();
  • Jendela dialog prompt();

Ketiga dialog ini memiliki perilaku dan kegunaan yang berbeda-beda.

Untuk lebih jelasnya, mari kita bahas

  1. Dialog Alert
    Dialog alert() biasanya digunakan untuk menampilkan sebuah pesan peringatan atau informasi.

    Fungsi alert() berada dalam objek window.

    Kita bisa menggunakannya seperti ini:

    1
    window.alert("Hello World!");

    Atau seperti ini:

    1
    alert("Hello kawan");

    Karena objek window bersifat global, kita boleh tidak menulisnya.

    Dialog alert() tidak akan mengembalikan nilai apa-apa saat dieksekusi.

    Mari kita coba:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
        <head>
            <title>Dialog Alert</title>
        </head>
        <body>
        <script>
            alert("Selamat datang di tutorial Javascript");
        </script>
        </body>
    </html>

    Dialog alert() memiliki satu parameter yang harus diberikan, yaitu: teks yang akan ditampilkan pada dialog.

    Pada contoh di atas, kita memberikan teks “Selamat datang di tutorial Javascript”.

    Pertanyaannya:
    Bagaimana cara menampilkan dialog alert() pada event tertentu, misalnya saat sebuah tombol diklik?

    Ini bisa kita lakukan dengan menambahkan fungsi dialog pada event listener.

    Pada HTML, kita bisa masukan fungsi alert() pada atribut onClick agar nanti ditampilkan saat sebuah elemen diklik.

    Contoh:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
       <!DOCTYPE html>
       <html>
           <head>
               <title>Dialog Alert</title>
           </head>
           <body>
               <button onClick="alert('Tombol diklik!')">Klik Saya</button>
           </body>
       </html>

    2. Dialog Confirm
       Dialog confirm() digunakan untuk melakukan konfirmasi dalam melakukan tindakan tertentu.

       Misalnya:
       Saat kita menghapus sesuatu, maka ada baiknya menampilkan dialog confirm(). Karena tindakan tersebut cukup berbahaya.

       Dialog confirm dapat dibuat dengan fungsi confirm().

       Contoh:

       ```javascript
       confirm("Apakah anda yakin akan menghapus?");

    Dialog confirm() akan mengembalikan nilai true apabila kita memilih tombol OK dan akan mengembalikan nilai false apabila kita memilih Cancel.

    Nilai kembalian ini dapat kita tampung dalam variabel untuk diproses.

    Contoh:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
       <!DOCTYPE html>
       <html>
           <head>
               <title>Dialog Confirm</title>
           </head>
           <body>
           <script>
               let yakin = confirm("Apakah kamu yakin akan mengunjungi petanikode?");

               if (yakin) {
                   window.location = "https://www.petanikode.com";
               } else {
                   document.write("Baiklah, tetap di sini saja ya :)");
               }
           </script>
           </body>
       </html>

    3. Dialog Prompt
       Dialog prompt() berfungsi untuk mengambil sebuah inputan dari pengguna.

       Dialog prompt() akan mengembalikan sebuah nilai string dari apa yang diinputkan oleh pengguna.

       Contoh:

       ```html
       <!DOCTYPE html>
       <html>
           <head>
               <title>Dialog Prompt</title>
           </head>
           <body>
           <script>
               let nama = prompt("Siapa nama kamu?", "");
               document.write("<p>Hello "+ nama +"</p>");
           </script>
           </body>
       </html>

    Dialog prompt() memiliki beberapa parameter yang harus diberikan:

    Teks yang akan ditampilkan pada form;
    Nilai default untuk field input.
    Pada contoh di atas, kita memberikan nilai default-nya berupa string kosong dengan tanda petik “”.

    Kapan Waktu yang Tepat Menggunakan Alert, Confirm, dan Prompt?
    Berdasarkan contoh-contoh di atas, kita bisa mengetahui Kapan waktu yang tepat untuk menggunakan alert(), confirm() dan prompt().

    Saat kita hanya ingin menampilkan informasi saja, maka gunakan alert().

    Saat kita ingin jawaban konfirmasi dari pengguna, maka gunakan confirm().

    dan apabila kita ingin mengambil data teks dari pengguna, maka gunakan prompt().

    Itulah tiga macam jendela dialog yang ada pada Javascript.

    Selanjutnya, kita akan banyak menggunakan jendela dialog ini untuk membuat aplikasi.

    Karena itu, pahami fungsi ketiga dialog ini.

Document Object Model

Saat kamu memutuskan akan belajar Javascript, maka wajib hukumnya memahami tentang DOM.

Karena, Salah satu tugas utama Javascript di dalam web adalah membuat halaman web agar terlihat dinamis.

Hal ini bisa dilakukan oleh Javascript dengan bantuan DOM.

Apa itu DOM API? dan bagaimana cara menggunakannya?

Mari kita bahas

Apa itu DOM API?

DOM merupakan singkatan dari Document Object Model.

Artinya, dokumen (HTML) yang dimodelkan dalam sebuah objek.

Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data yang bisa kita manfaatkan dalam membuat program Javascript. Inilah yang disebut API (Application Programming Interface).

Javascript DOM dan HTML
DOM tidak hanya untuk dokumen HTML saja. DOM juga bisa digunakan untuk dokumen XML dan SVG, dan DOM juga tidak hanya ada di Javascript saja, DOM juga ada pada bahasa pemrograman lain.

Bagaimana Cara Menggunakan DOM?
Seperti yang kita sudah ketahui, DOM adalah sebuah objek untuk memodelkan dokumen HTML.

Objek DOM di javascript bernama document. Objek ini berisi segala hal yang kita butuhkan untuk memanipulasi HTML.

Jika kita coba ketik document pada console Javascript, maka yang akan tampil adalah kode HTML.

Di dalam objek document, terdapat fungsi-fungsi dan atribut yang bisa kita gunakan untuk memanipulasi dokumen HTML.

Sebagai contoh fungsi document.write().

Fungsi ini digunakan untuk menulis sesuatu ke dokumen HTML.

Contoh:

Coba ketik kode berikut di dalam console Javascript.

1
2
document.write("Hello World");
document.write("<h2>Saya Sedang Belajar Javascript</h2>");

Hasilnya akan langsung berdampak pada dokumen HTML.

Mengakses Elemen Tertentu dengan DOM

Objek document adalah model dari dokumen HTML. Objek ini berisi kumpulan fungsi dan atribut berupa objek dari elemen HTML yang bisa digambarkan dalam bentuk pohon seperti ini:

Objek DOM HTML
Struktur pohon ini akan memudahkan kita dalam menggunakan elemen tertentu.

Mari kita coba mengakses objek head dan body.

Coba ketik kode berikut pada Console:

1
2
3
4
5
6
7
8
// mengakses objek head
document.head;

// mengakses objek body
document.body;

// melihat panjang judul pada objek title
document.title.length

Apabila kita ingin mengakses elemen yang spesifik, terdapat beberapa fungsi yang bisa digunakan:

  • getElementById() fungsi untuk memilih elemen berdasarkan atribut id.
  • getElementByName() fungsi untuk memilih elemen berdasarkan atribut name.
  • getElementByClassName() fungsi untuk memilih elemen berdasarkan atribut class.
  • getElementByTagName() fungsi untuk memilih elemen berdasarkan nama tag.
  • getElementByTagNameNS() fungsi untuk memilih elemen berdasarkan nama tag.
  • querySelector() fungsi untuk memilih elemen berdasarkan query.
  • querySelectorAll() fungsi untuk memilih elemen berdasarkan query.
    dan lain-lain.

Fungsi-fungsi di atas cukup sering digunakan untuk mengakses elemen tertentu.

Contoh:

Misalkan kita punya kode HTML seperti ini:

1
<div id="tutorial"></div>

Maka untuk memilih element tersebut di Javascript, kita bisa gunakan fungsi getElementByI() seperti ini:

1
2
// memilih elemen dengan id 'tutorial'
let tutorial = document.getElementById('tutorial');

Variabel tutorial akan menjadi sebuah objek DOM dari elemen yang kita pilih.

Contoh yang lebih lengkap:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
    <title>Memilih Elemen Berdasarkan ID</title>
</head>
<body>

    <!-- Elemen div yang akan kita pilih dari JS -->
    <div id="tutorial"></div>


    <script type="text/javascript">
        // mengakses elemen tutorial
        let tutorial = document.getElementById("tutorial");

        // mengisi teks ke dalam elemen
        tutorial.innerText = "Tutorial Javascript";

        // memberikan CSS ke elemen
        tutorial.style.backgroundColor = "gold";
        tutorial.style.padding = "10px";

    </script>

</body>
</html>

Pada contoh di atas, kita memilih elemen dengan fungsi document.getElementById(). Lalu membuatkan objek untuk elemen tersebut. Setelah itu, kita bisa lakukan apapun yang diinginkan seperti mengubah teks dan style CSS.

Lalu pertanyaannya:

Bagaimana kalau ada lebih dari satu elemen yang dipilih?

Misalkan kita memilih elemen berdasarkan nama tag atau atribut class.

Jawabannya:

Elemen yang akan terpilih akan menjadi sebuah array. Karena kita memilih sekumpulan elemen.

Array tersebut akan berisi objek DOM dari elemen-elemen yang terpilih.

Contohnya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM API Javascript</title>
</head>

<body>

    <p class="paragraf">Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Quo quaerat recusandae qui ullam eaque cumque ea fugit,
        debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,
        maiores in?</p>

    <p class="paragraf">Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Quo quaerat recusandae qui ullam eaque cumque ea fugit,
        debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,
        maiores in?</p>

    <p class="paragraf">Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Quo quaerat recusandae qui ullam eaque cumque ea fugit,
        debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,
        maiores in?</p>


    <script>
        let paragraf = document.getElementsByClassName("paragraf");
        console.log(paragraf);
    </script>

</body>

</html>

Pada contoh di atas, kita memiliki tiga buah paragraf dengan nama class paragraf.

Lalu kita mencoba memilih ketiga paragraf tersebut melalui javascript dengan method atau fungsi getElementByClassName().

Kemudian, hasilnya kita tampilkan ke dalam console Javascript.

Variabel paragraf akan berisi sebuah array yang di dalamnya terdapat tiga buah objek DOM dari paragraf.

Mari kita coba bereksperimen dengan mengubah warna teks dari paragraf pertama.

Paragraf pertama akan berada pada posisi indeks ke-0 di dalam array.

Coba ketik perintah berikut di dalam console Javascript:

1
paragraf[0].style.color = "red"

Maka hasilnya, paragraf pertama akan berwarna merah.

Mengubah warna paragraf pertama
Mari kita coba buat sebuah animasi warna.

Ubahlah kode javascript di atas menjadi seperti ini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <script>
    var paragraf = document.getElementsByClassName("paragraf");
    setInterval(function () {
        paragraf[0].style.color = "red";
        paragraf[1].style.color = "green";
        paragraf[2].style.color = "blue";

        setTimeout(function () {
            paragraf[0].style.color = "black";
            paragraf[1].style.color = "black";
            paragraf[2].style.color = "black";
        }, 500)
    }, 1000);
</script>

Kita memanfaatkan fungsi setInterval() dan fungsi setTimeOut() untuk menentukan waktu animasinya.

Pada kode di atas, rentang waktu (interval) kita berikan 1000 milidetik atau 1 detik.

Sedangkan untuk mengubah warnanya menjadi hitam, kita berikan waktu 500 milidetik atau 0.5 detik.

Membuat Elemen dengan DOM API

DOM juga menyediakan fungsi untuk membuat elemen HTML.

Salah satunya adalah fungsi createElement().

Contoh:

1
document.createElement('p');

Maka, akan tercipta elemen p baru. Namun tidak akan ditampilkan ke dalam halaman web.

Mengapa tidak ditampilkan?

Karena kita belum menambahkannya ke dalam body dokumen.

Cara menambahkannya ke body dokumen, kita bisa gunakan fungsi append().

Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM API Javascript</title>
</head>

<body>

    <script>
        // membuat element h1
        var judul = document.createElement("h1");
        
        // mengisi konten elemen
        judul.textContent = "Belajar Javascript";

        // menambahkan elemen ke dalam tag body
        document.body.append(judul);
    </script>

</body>
</html>

Menghapus Elemen dengan DOM API

Kalau tadi kita menggunakan fungsi append() untuk menambahkan elemen, maka untuk menghapusnya kita menggunakan fungsi remove().

Berikut ini contohnya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM API Javascript</title>
</head>

<body>

    <h2 id="judul2">Delete Saya!</h2>

    <script>
        // memilih elemen berdasarkan ID
        var h2 = document.getElementById('judul2');

        // menghapus elemen yang sudah dipilih
        h2.remove();

        console.log("Elemen sudah dihapus");
        console.log(h2);
    </script>

</body>
</html>

Elemen berhasil dihapus dari halaman web, namun elemen masih berada di dalam memori.

Contoh Program yang Memanfaatkan DOM

Kita sudah tahu cara mengakses elemen dengan DOM dan kita juga sudah paham cara menambahkan dan menghapus elemen.

Biar pemahamannya semakin mantap, coba contoh program berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM API Javascript</title>
</head>

<body>

    <h1>Aplikasi Ubah Warna</h1>
    <label>Warna latar: </label>
    <input type="color" id="bg-color" />
    <br>
    <label>Warna teks: </label>
    <input type="color" id="text-color" />

    <script>
        var bgColor = document.getElementById('bg-color');
        var txtColor = document.getElementById('text-color');

        bgColor.addEventListener("change", (event) => {
            document.body.style.backgroundColor = bgColor.value;
        });

        txtColor.addEventListener("change", (event) => {
            document.body.style.color = txtColor.value;
        });
    </script>

</body>
</html>

Program ini berfungsi untuk mengubah warna latar belakang dari elemen body dan mengubah warna teksnya.

Kita menggunakan event “change” pada elemen bgColor dan txtColor. Artinya nanti setiap nilai dari elemen ini berubah, kode di dalamnya akan dieksekusi.

Ke depannya kita akan banyak menggunakan DOM untuk membuat aplikasi dengan Javascript.

Mengenal Objek Math untuk Perhitungan Matematika

Pernahkah kamu membuat program yang di dalamnya ada perhitungan matematika?

Misalnya seperti menghitung akar kuadrat, pangkat, log, sin, cos, tan, dan lain-lain.

Ini bisa saja dibuat dengan operator dan beberapa variabel.

Tapi itu tidak mudah

Karena, Kita harus memikirkan sendiri algoritmanya.

Tapi tenang saja, di Javascript sudah ada objek Math yang akan membantu kita membuat perhitungan matematika menjadi lebih mudah.

Mari kita bahas lebih detail tentang objek ini

Mengenal Objek Math

Objek Math adalah objek yang berisi fungsi-fungsi matematika dan beberapa konstanta untuk melakukan perhitungan matematika seperti sin, cos, tan, eksponen, akar kuadrat, dll.

Mari kita bahas lebih dalam lagi untuk tiap-tiap fungsi tersebut.

Pertama kita mulai dari:

Fungsi Trigonometri di Javascript

Trigonometri adalah cabang ilmu matematika yang mempelajari tentang sudut dan panjang pada segitiga.

Dalam dunia komputer, ilmu ini biasanya diimplementasikan dalam komputer grafis.

Kamu mungkin pernah membaca tutorial pembuatan game dengan Python.

Di sana kita menggunakan trigonometri untuk tracking pergerakan pointer.

Nah, di objek Math terdapat fungsi-fungsi untuk menghitung trigonometri.

Misalkan kita ingin menghitung nilai sin dari 10, maka pada program kita bisa tulis seperti ini:

1
let n = Math.sin(10);

Variabel n akan berisi -0.5440211108893698 karena sin 10 adalah 0.5.

Kamu bisa mencobanya sendiri melalui console Javascript:

Fungsi Logaritma, Pangkat, dan Eksponensial di Javascript

Logaritma adalah operasi matematika yang merupakan kebalikan (atau inverse) dari eksponen atau pemangkatan.

Objek Math di Javascript juga menyediakan fungsi log() untuk logaritma dan pow() untuk pemangkatan.

Kemudian untuk menghitung eksponensial, kita dapat menggunakan fungsi exp().

Fungsi Pembulatan di Javascript

Apabila kita membutuhkan bilangan bulat (integer), kita bisa gunakan fungsi pembulatan di objek Math.

Ada beberapa fungsi yang sering digunakan:

  • floor() membulatkan ke bawah;
  • round() membulatkan ke yang terdekat, bisa ke bawah dan ke atas;
  • ceil() membulatkan ke atas.

Fungsi Akar di Javascript

Nah, kalau fungsi akar kuadrat…

Kita bisa menghitungnya dengan fungsi sqrt().

Lalu untuk akar kubik gimana?

Kita bisa gunakan fungsi cbrt().

Nah untuk akar n atau nth root, kita bisa akali dengan menggunakan fungsi pow().

Contoh:

1
Math.pow(n, 1/root);

n adalah nilai yang akan kita cari, lalu root adalah akar n-nya.

Fungsi Random dan Mutlak di Javascript

Fungsi random adalah fungsi yang mengahilkan nilai acak antara 0.0 sampai 1.0.

Jika ingin membuat nilai acak dari rentang nilai tertentu, maka kita bisa menggunakan bantuan fungsi floor() untuk membulatkan lalu dikali dengan nilai min dan max.

Rumusnya akan seperti ini:

1
Math.floor(Math.random() * (max - min) ) + min;

Ini bisa kita bungkus dalam fungsi seperti ini:

1
2
3
function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min) ) + min;
}

Fungsi Mutlak

Fungsi mutlak adalah fungsi yang menghasilkan nilai mutlak atau absolute.

Contoh:

1
let x = Math.abs(-2);

Variabel x akan bernilai 2, karena fungsi abs() akan selalu memberikan nilai mutlak atau positif.

Fungsi Minimum dan Maksimum di Javascript

Fungsi minimum dan maksimum adalah fungsi untuk menentukan nilai paling kecil dan paling besar pada sekumpulan nilai.

Fungsi ini bisa kita berikan input berupa urutan bilangan.

Apabila kita ingin memberikan input array, maka array tersebut harus kita pecah isinya.

Perhatikan operator …, ini adalah operator yang ditambahkan pada ES2015 yang berfungsi untuk memecah isi array dan string.

Konstanta di Objek Math

Selain menyediakan fungsi-fungsi matematika, objek Math juga menyediakan konstanta seperti PI, E, LN10, dll. yang bisa kita manfaatkan untuk perhitungan rumus tertentu.

1
2
3
4
5
6
7
8
Math.E        // returns Euler's number
Math.PI       // returns PI
Math.SQRT2    // returns the square root of 2
Math.SQRT1_2  // returns the square root of 1/2
Math.LN2      // returns the natural logarithm of 2
Math.LN10     // returns the natural logarithm of 10
Math.LOG2E    // returns base 2 logarithm of E
Math.LOG10E   // returns base 10 logarithm of E

Objek Math memang objek yang khusus digunakan untuk perhitungan atau operasi matematika.

Kamu akan banyak menggunakannya dalam membuat beberapa program yang membutuhkan perhitungan matematika.

Seperti membuat aplikasi Game, kecerdasan buatan, akuntansi, program fisika, dll.