Dasar JavaScript: Variabel Global & Lokal, Menghubungkan ke HTML, dan DOM

JavaScript adalah bahasa pemrograman yang kuat yang memungkinkan Anda membuat halaman web interaktif dan dinamis. Memahami dasar-dasarnya sangat penting untuk setiap pengembang web. Artikel ini akan membahas konsep-konsep penting seperti variabel global dan lokal, cara menghubungkan JavaScript ke HTML, dan Model Objek Dokumen (DOM).

Mengapa Mempelajari Dasar-Dasar JavaScript?

• Landasan yang Kuat: Memahami dasar-dasarnya menyediakan landasan yang kuat untuk mempelajari konsep JavaScript yang lebih maju.
• Pengembangan Web Interaktif: JavaScript memungkinkan Anda menambahkan interaktivitas ke situs web Anda, menjadikannya lebih menarik bagi pengguna.
• Pengembangan Front-End: JavaScript adalah bahasa utama untuk pengembangan front-end, yang memungkinkan Anda mengontrol perilaku dan tampilan antarmuka pengguna.
• Pengembangan Back-End (Node.js): Dengan Node.js, Anda dapat menggunakan JavaScript untuk mengembangkan aplikasi back-end, menjadikannya bahasa yang serbaguna.
• Banyak Kerangka Kerja dan Pustaka: Memahami dasar-dasarnya akan membantu Anda bekerja secara efektif dengan berbagai kerangka kerja dan pustaka JavaScript seperti React, Angular, dan Vue.js.

Variabel di JavaScript

Variabel adalah wadah untuk menyimpan nilai data. Di JavaScript, Anda dapat mendeklarasikan variabel menggunakan kata kunci `var`, `let`, atau `const`. Pemahaman tentang cakupan variabel sangat penting untuk menulis kode yang bebas kesalahan.

Variabel Global

Variabel global dideklarasikan di luar fungsi atau blok kode apa pun. Mereka dapat diakses dari bagian mana pun dari kode Anda.

Cara Mendeklarasikan Variabel Global

Anda dapat mendeklarasikan variabel global dengan dua cara:

1. Di luar fungsi:

   var globalVariable = "Saya adalah variabel global";
   
         function myFunction() {
           console.log(globalVariable); // Dapat diakses di sini
         }
   
         myFunction();

2. Tanpa mendeklarasikan (tidak disarankan): Jika Anda menetapkan nilai ke variabel tanpa menggunakan `var`, `let`, atau `const` di dalam fungsi, itu akan secara otomatis menjadi variabel global. Ini **sangat tidak disarankan** karena dapat menyebabkan masalah yang tidak terduga.

   function myFunction() {
           imAVariable = "Saya secara tidak sengaja menjadi global"; // JANGAN LAKUKAN INI
         }
   
         myFunction();
   
         console.log(imAVariable); // Dapat diakses di sini

   Menggunakan pendekatan ini dapat dengan mudah menyebabkan bentrokan dengan variabel lain dan membuat kode Anda sulit di-debug.

Keuntungan dan Kerugian Variabel Global

• Keuntungan:
  • Mudah diakses dari seluruh kode Anda.
• Kerugian:
  • Dapat menyebabkan bentrokan nama jika Anda menggunakan nama variabel yang sama di tempat yang berbeda dalam kode Anda.
  • Dapat membuat kode Anda sulit di-debug karena nilai variabel dapat berubah di mana saja dalam kode Anda.
  • Dapat mengurangi kinerja karena JavaScript harus mencari variabel di seluruh cakupan global.

Variabel Lokal

Variabel lokal dideklarasikan di dalam fungsi atau blok kode. Mereka hanya dapat diakses dari dalam fungsi atau blok tempat mereka dideklarasikan.

Cara Mendeklarasikan Variabel Lokal

Anda mendeklarasikan variabel lokal menggunakan `var`, `let`, atau `const` di dalam fungsi atau blok kode.

1. Menggunakan `var`:

   function myFunction() {
           var localVariable = "Saya adalah variabel lokal";
           console.log(localVariable); // Dapat diakses di sini
         }
   
         myFunction();
   
         // console.log(localVariable); // Akan menghasilkan kesalahan (tidak terdefinisi)

2. Menggunakan `let` dan `const` (cakupan blok): `let` dan `const` memiliki cakupan blok, artinya mereka hanya dapat diakses di dalam blok kode tempat mereka dideklarasikan (biasanya di dalam kurung kurawal `{}`).

   function myFunction() {
           if (true) {
             let blockVariable = "Saya adalah variabel blok";
             const blockConstant = 10;
             console.log(blockVariable); // Dapat diakses di sini
             console.log(blockConstant);  // Dapat diakses di sini
           }
           // console.log(blockVariable); // Akan menghasilkan kesalahan (tidak terdefinisi)
           // console.log(blockConstant);  // Akan menghasilkan kesalahan (tidak terdefinisi)
         }
   
         myFunction();

Keuntungan dan Kerugian Variabel Lokal

• Keuntungan:
  • Membantu menghindari bentrokan nama karena variabel hanya dapat diakses di dalam fungsi atau blok tempat mereka dideklarasikan.
  • Membuat kode Anda lebih mudah di-debug karena Anda tahu di mana variabel dapat berubah.
  • Meningkatkan kinerja karena JavaScript hanya perlu mencari variabel di cakupan lokal.
• Kerugian:
  • Tidak dapat diakses dari luar fungsi atau blok tempat mereka dideklarasikan, yang mungkin membatasi dalam beberapa kasus.

`var`, `let`, dan `const`: Perbedaan Utama

Ketiga kata kunci ini digunakan untuk mendeklarasikan variabel, tetapi mereka memiliki perbedaan penting:

• `var`:
  • Cakupan fungsi: Variabel yang dideklarasikan dengan `var` memiliki cakupan fungsi. Artinya, mereka dapat diakses di seluruh fungsi tempat mereka dideklarasikan (atau secara global jika dideklarasikan di luar fungsi apa pun).
  • Hoisting: Variabel yang dideklarasikan dengan `var` diangkat ke bagian atas cakupan mereka. Artinya, Anda dapat menggunakan variabel sebelum mendeklarasikannya, tetapi nilainya akan menjadi `undefined`.
  • Dapat dideklarasikan ulang dan ditetapkan ulang: Anda dapat mendeklarasikan ulang dan menetapkan ulang variabel yang dideklarasikan dengan `var`.
• `let`:
  • Cakupan blok: Variabel yang dideklarasikan dengan `let` memiliki cakupan blok. Artinya, mereka hanya dapat diakses di dalam blok tempat mereka dideklarasikan.
  • Hoisting: Variabel yang dideklarasikan dengan `let` diangkat, tetapi tidak diinisialisasi. Artinya, Anda tidak dapat menggunakan variabel sebelum mendeklarasikannya, atau Anda akan mendapatkan kesalahan `ReferenceError`. (Ini dikenal sebagai “zona temporal mati” atau TDZ).
  • Dapat ditetapkan ulang tetapi tidak dideklarasikan ulang dalam cakupan yang sama: Anda dapat menetapkan ulang variabel yang dideklarasikan dengan `let`, tetapi Anda tidak dapat mendeklarasikannya ulang dalam cakupan yang sama.
• `const`:
  • Cakupan blok: Variabel yang dideklarasikan dengan `const` memiliki cakupan blok, seperti `let`.
  • Hoisting: Variabel yang dideklarasikan dengan `const` diangkat, tetapi tidak diinisialisasi (zona temporal mati atau TDZ).
  • Tidak dapat ditetapkan ulang dan tidak dapat dideklarasikan ulang: Anda tidak dapat menetapkan ulang atau mendeklarasikan ulang variabel yang dideklarasikan dengan `const`. Artinya, variabel `const` harus diinisialisasi ketika dideklarasikan, dan nilainya tidak dapat diubah setelahnya. Namun, jika `const` memegang objek atau array, *properti* objek atau elemen array dapat diubah.

Contoh Ilustratif

// var
  function varExample() {
    var x = 10;
    if (true) {
      var x = 20;  // Mendeklarasikan ulang x!
      console.log(x); // 20
    }
    console.log(x); // 20 (nilai x telah diubah di dalam blok if)
  }

  varExample();

  // let
  function letExample() {
    let y = 10;
    if (true) {
      let y = 20; // Mendeklarasikan variabel y yang *berbeda* dalam cakupan blok ini.
      console.log(y); // 20
    }
    console.log(y); // 10 (nilai y tidak terpengaruh oleh blok if)
  }

  letExample();

  // const
  function constExample() {
    const z = 10;
    // z = 20; // Akan menghasilkan kesalahan: Assignment to constant variable.

    const obj = { value: 10 };
    obj.value = 20; // Valid: Kita mengubah properti objek, bukan variabel const itu sendiri.
    console.log(obj.value); // 20

    // obj = { value: 30 }; // Akan menghasilkan kesalahan: Assignment to constant variable.
  }

  constExample();

Praktik Terbaik

• Gunakan `const` untuk variabel yang nilainya tidak boleh berubah.
• Gunakan `let` untuk variabel yang nilainya mungkin berubah.
• Hindari menggunakan `var` di kode modern. `let` dan `const` memberikan cakupan yang lebih jelas dan membantu mencegah kesalahan.
• Deklarasikan variabel sedekat mungkin dengan tempat mereka digunakan untuk meningkatkan keterbacaan.

Menghubungkan JavaScript ke HTML

Untuk menjalankan kode JavaScript di halaman web Anda, Anda perlu menghubungkannya ke file HTML Anda. Ada dua cara utama untuk melakukan ini:

1. JavaScript Sebaris: Menulis kode JavaScript langsung di dalam tag HTML. Meskipun sederhana untuk contoh kecil, ini tidak disarankan untuk kode yang lebih besar karena membuat HTML Anda berantakan dan sulit dikelola.
2. File JavaScript Eksternal: Menyimpan kode JavaScript Anda dalam file terpisah (dengan ekstensi `.js`) dan menautkannya ke file HTML Anda. Ini adalah praktik terbaik karena membuat HTML dan JavaScript Anda terpisah, sehingga kode Anda lebih terorganisir dan mudah dikelola.

JavaScript Sebaris

Anda dapat menambahkan kode JavaScript sebaris ke tag HTML menggunakan atribut seperti `onclick`, `onload`, atau `onmouseover`.

Contoh

<button onclick="alert('Tombol diklik!')">Klik Saya</button>

Ketika tombol ini diklik, fungsi `alert()` akan dijalankan, dan kotak pesan akan ditampilkan.

Kapan Menggunakan JavaScript Sebaris

JavaScript sebaris paling baik digunakan untuk potongan kode kecil yang sederhana. Hindari menggunakannya untuk kode yang lebih besar karena membuat HTML Anda sulit dibaca dan dipelihara.

File JavaScript Eksternal

Cara terbaik untuk menghubungkan JavaScript ke HTML adalah dengan menggunakan file eksternal. Simpan kode JavaScript Anda dalam file terpisah dengan ekstensi `.js`, lalu tautkan file tersebut ke file HTML Anda menggunakan tag `<script>`.

Cara Menautkan File JavaScript Eksternal

1. Buat file JavaScript: Buat file baru bernama `script.js` (atau nama lain yang Anda pilih) dan simpan kode JavaScript Anda di dalamnya.

   // script.js
         console.log("Halo dari file JavaScript eksternal!");
   
         function myFunction() {
           alert("Fungsi dipanggil dari file eksternal!");
         }

2. Tautkan file JavaScript di HTML Anda: Tambahkan tag `<script>` ke file HTML Anda, dan atur atribut `src` ke jalur ke file JavaScript Anda. Sebaiknya letakkan tag `<script>` tepat sebelum tag penutup `</body>`. Ini memastikan bahwa HTML telah diparse sebelum JavaScript dieksekusi.

   <!DOCTYPE html>
         <html>
         <head>
           <title>Menghubungkan JavaScript</title>
         </head>
         <body>
           <h1>Halo, Dunia!</h1>
           <button onclick="myFunction()">Klik Saya</button>
   
           <script src="script.js"></script>
         </body>
         </html>

Keuntungan Menggunakan File JavaScript Eksternal

• Keterpisahan Kekhawatiran: Membuat HTML dan JavaScript Anda terpisah membuat kode Anda lebih terorganisir dan mudah dikelola.
• Kode yang Dapat Digunakan Kembali: Anda dapat menggunakan kembali file JavaScript yang sama di beberapa halaman web.
• Cache: Browser dapat menyimpan file JavaScript yang terpisah, yang dapat meningkatkan kinerja situs web Anda.
• Keterbacaan: Kode Anda lebih mudah dibaca dan dipahami.

Praktik Terbaik untuk Menghubungkan JavaScript

• Tempatkan tag `<script>` tepat sebelum tag penutup `</body>`. Ini memastikan bahwa HTML telah diparse sebelum JavaScript dieksekusi.
• Gunakan atribut `defer` atau `async` pada tag `<script>` untuk mengontrol bagaimana skrip dimuat dan dieksekusi.
• Atribut `defer` menunda eksekusi skrip hingga HTML telah diparse. Skrip akan dieksekusi dalam urutan yang sama seperti yang muncul di HTML.
• Atribut `async` memuat skrip secara asinkron, yang berarti bahwa skrip dimuat secara paralel dengan HTML. Skrip akan dieksekusi segera setelah dimuat, yang mungkin tidak sesuai urutan seperti yang muncul di HTML.

Model Objek Dokumen (DOM)

DOM adalah representasi berbasis pohon dari dokumen HTML atau XML. Ini memungkinkan JavaScript untuk mengakses dan memanipulasi struktur, gaya, dan konten dokumen. DOM memperlakukan setiap elemen HTML sebagai objek, yang dapat diakses dan dimodifikasi menggunakan JavaScript.

Struktur DOM

DOM mewakili dokumen HTML sebagai hierarki node. Node teratas adalah node dokumen, yang mewakili seluruh dokumen HTML. Node dokumen memiliki node anak, seperti node elemen (mewakili tag HTML), node teks (mewakili teks di dalam tag HTML), dan node atribut (mewakili atribut tag HTML).

Contoh Struktur DOM

<!DOCTYPE html>
  <html>
  <head>
    <title>Contoh DOM</title>
  </head>
  <body>
    <h1 id="myHeading">Halo, Dunia!</h1>
    <p>Ini adalah paragraf.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </body>
  </html>

Struktur DOM untuk HTML di atas adalah sebagai berikut:

• document (node dokumen)
  • html (node elemen)
    • head (node elemen)
      • title (node elemen)
        • “Contoh DOM” (node teks)
    • body (node elemen)
      • h1 (node elemen)
        • Atribut: id=”myHeading” (node atribut)
        • “Halo, Dunia!” (node teks)
      • p (node elemen)
        • “Ini adalah paragraf.” (node teks)
      • ul (node elemen)
        • li (node elemen)
          • “Item 1” (node teks)
        • li (node elemen)
          • “Item 2” (node teks)

Mengakses Elemen DOM

JavaScript menyediakan beberapa metode untuk mengakses elemen DOM:

1. `document.getElementById(id)`: Mengembalikan elemen dengan ID yang ditentukan.
2. `document.getElementsByClassName(className)`: Mengembalikan koleksi HTML dari semua elemen dengan nama kelas yang ditentukan.
3. `document.getElementsByTagName(tagName)`: Mengembalikan koleksi HTML dari semua elemen dengan nama tag yang ditentukan.
4. `document.querySelector(selector)`: Mengembalikan elemen pertama yang cocok dengan pemilih CSS yang ditentukan.
5. `document.querySelectorAll(selector)`: Mengembalikan NodeList dari semua elemen yang cocok dengan pemilih CSS yang ditentukan.

Contoh

<!DOCTYPE html>
  <html>
  <head>
    <title>Mengakses Elemen DOM</title>
  </head>
  <body>
    <h1 id="myHeading">Halo, Dunia!</h1>
    <p class="myParagraph">Ini adalah paragraf.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>

    <script>
      // Mengakses elemen berdasarkan ID
      const heading = document.getElementById("myHeading");
      console.log(heading.textContent); // Output: Halo, Dunia!

      // Mengakses elemen berdasarkan nama kelas
      const paragraphs = document.getElementsByClassName("myParagraph");
      console.log(paragraphs[0].textContent); // Output: Ini adalah paragraf.

      // Mengakses elemen berdasarkan nama tag
      const listItems = document.getElementsByTagName("li");
      console.log(listItems.length); // Output: 2

      // Menggunakan querySelector
      const heading2 = document.querySelector("#myHeading");
      console.log(heading2.textContent); // Output: Halo, Dunia!

      // Menggunakan querySelectorAll
      const paragraphs2 = document.querySelectorAll(".myParagraph");
      console.log(paragraphs2[0].textContent); // Output: Ini adalah paragraf.
    </script>
  </body>
  </html>

Memanipulasi Elemen DOM

Setelah Anda mengakses elemen DOM, Anda dapat memanipulasinya menggunakan properti dan metode JavaScript. Beberapa operasi manipulasi DOM umum meliputi:

1. Mengubah Konten Teks: Menggunakan properti `textContent` atau `innerHTML` untuk mengubah konten teks elemen.
2. Mengubah Atribut: Menggunakan metode `setAttribute()` untuk mengubah nilai atribut elemen.
3. Mengubah Gaya: Menggunakan properti `style` untuk mengubah gaya CSS elemen.
4. Membuat Elemen Baru: Menggunakan metode `document.createElement()` untuk membuat elemen HTML baru.
5. Menambahkan Elemen: Menggunakan metode `appendChild()` atau `insertBefore()` untuk menambahkan elemen baru ke DOM.
6. Menghapus Elemen: Menggunakan metode `removeChild()` untuk menghapus elemen dari DOM.

Contoh

<!DOCTYPE html>
  <html>
  <head>
    <title>Memanipulasi Elemen DOM</title>
  </head>
  <body>
    <h1 id="myHeading">Halo, Dunia!</h1>
    <p id="myParagraph">Ini adalah paragraf.</p>
    <div id="myDiv"></div>

    <script>
      // Mengubah konten teks
      const heading = document.getElementById("myHeading");
      heading.textContent = "Halo, JavaScript!";

      // Mengubah atribut
      const paragraph = document.getElementById("myParagraph");
      paragraph.setAttribute("class", "highlight");

      // Mengubah gaya
      const div = document.getElementById("myDiv");
      div.style.width = "200px";
      div.style.height = "100px";
      div.style.backgroundColor = "lightblue";

      // Membuat elemen baru
      const newParagraph = document.createElement("p");
      newParagraph.textContent = "Ini adalah paragraf baru.";

      // Menambahkan elemen
      div.appendChild(newParagraph);

      // Menghapus elemen (misalnya, paragraf asli)
      // paragraph.parentNode.removeChild(paragraph);
    </script>

  <style>
    .highlight {
        font-weight: bold;
        color: red;
    }
  </style>
  </body>
  </html>

Event Listener

Event listener memungkinkan Anda untuk menanggapi tindakan pengguna, seperti klik, pengunggahan mouse, dan pengiriman formulir. Anda dapat melampirkan event listener ke elemen DOM untuk menjalankan kode JavaScript ketika suatu peristiwa terjadi.

Cara Melampirkan Event Listener

1. Menggunakan atribut HTML (sebaris): Mirip dengan JavaScript sebaris, ini tidak disarankan untuk kode yang lebih besar.
2. Menggunakan properti DOM: Melampirkan event listener ke properti DOM.
3. Menggunakan `addEventListener()`: Metode `addEventListener()` adalah cara yang paling direkomendasikan untuk melampirkan event listener. Ini memungkinkan Anda untuk menambahkan beberapa event listener ke elemen yang sama dan mengontrol bagaimana mereka dieksekusi.

Contoh

<!DOCTYPE html>
  <html>
  <head>
    <title>Event Listener</title>
  </head>
  <body>
    <button id="myButton">Klik Saya</button>

    <script>
      // Menggunakan addEventListener()
      const button = document.getElementById("myButton");
      button.addEventListener("click", function() {
        alert("Tombol diklik!");
      });

      // Contoh lainnya: Mengubah warna latar belakang saat mouse di atas
      button.addEventListener("mouseover", function() {
        button.style.backgroundColor = "yellow";
      });

      button.addEventListener("mouseout", function() {
        button.style.backgroundColor = ""; // Kembali ke warna default
      });
    </script>
  </body>
  </html>

Event yang Umum

• `click`: Terjadi ketika elemen diklik.
• `mouseover`: Terjadi ketika pointer mouse bergerak ke atas elemen.
• `mouseout`: Terjadi ketika pointer mouse bergerak keluar dari elemen.
• `keydown`: Terjadi ketika tombol ditekan.
• `keyup`: Terjadi ketika tombol dilepaskan.
• `submit`: Terjadi ketika formulir dikirimkan.
• `load`: Terjadi ketika halaman web telah selesai dimuat.
• `DOMContentLoaded`: Terjadi ketika dokumen HTML telah selesai diparse. Lebih disukai daripada `load` karena tidak menunggu gambar dan sumber daya eksternal lainnya dimuat.

Kesimpulan

Dalam artikel ini, kita telah membahas dasar-dasar JavaScript, termasuk variabel global dan lokal, cara menghubungkan JavaScript ke HTML, dan Model Objek Dokumen (DOM). Memahami konsep-konsep ini sangat penting untuk membangun aplikasi web interaktif dan dinamis. Dengan berlatih dan bereksperimen dengan konsep-konsep ini, Anda dapat mengembangkan keterampilan JavaScript Anda dan menjadi pengembang web yang mahir.

Langkah Selanjutnya

• Latihan: Buat proyek kecil yang menggunakan konsep-konsep yang telah Anda pelajari.
• Dokumentasi: Selalu rujuk ke dokumentasi resmi JavaScript (MDN Web Docs) untuk pemahaman yang lebih mendalam.
• Komunitas: Bergabunglah dengan komunitas online untuk mengajukan pertanyaan dan berbagi pengetahuan.
• Kerangka Kerja dan Pustaka: Setelah Anda memiliki pemahaman yang kuat tentang dasar-dasarnya, jelajahi kerangka kerja dan pustaka seperti React, Angular, dan Vue.js.