Programming fundamental 13

4.3 Fungsi Built-in (Math, String, Array)

Dalam proses pengembangan aplikasi web, sering kali Anda akan menghadapi berbagai kebutuhan seperti menghitung nilai matematis, memanipulasi teks, atau mengelola kumpulan data. Jika semua proses tersebut harus dibuat dari awal, tentu akan memakan waktu dan tenaga yang besar.

Untuk itu, JavaScript telah menyediakan berbagai fungsi bawaan (built-in functions) yang siap digunakan tanpa perlu membuat logika dari nol. Fungsi-fungsi ini membantu pengembang melakukan berbagai operasi umum dengan lebih cepat, efisien, dan konsisten.

Fungsi-fungsi tersebut dikelompokkan ke dalam objek global seperti Math, String, dan Array.

• Objek Math digunakan untuk perhitungan matematis.
• Objek String digunakan untuk memproses dan memanipulasi teks.
• Objek Array digunakan untuk mengelola kumpulan data atau daftar nilai.

Dengan memahami dan memanfaatkan fungsi-fungsi ini, Anda akan mampu menulis kode yang lebih ringkas, rapi, dan efisien — serta menghindari pembuatan kode berulang untuk operasi yang sebenarnya sudah disediakan oleh JavaScript.

4.3.1 Math Functions (Fungsi Matematika)

Dalam pengembangan web, Anda sering kali akan menemui situasi yang memerlukan perhitungan matematika — misalnya menghitung total harga, mencari nilai rata-rata, atau menentukan posisi elemen pada layar.

Untuk membantu proses tersebut, JavaScript menyediakan sebuah objek bawaan bernama Math, yang berisi berbagai fungsi dan konstanta matematika siap pakai.

Objek Math dapat digunakan tanpa perlu membuat instance atau mendeklarasikan variabel baru. Anda cukup memanggilnya langsung dengan format Math.namaFungsi() atau Math.namaKonstanta.

1. Math Constants (Konstanta Matematika)

Konstanta dalam objek Math merupakan nilai-nilai tetap yang sering digunakan dalam perhitungan matematika.

Beberapa konstanta penting yang disediakan JavaScript antara lain:

// Math constants

console.log(Math.PI); // 3.141592653589793

console.log(Math.E); // 2.718281828459045

Penjelasan:

• Math.PI → Nilai π (pi), yaitu perbandingan antara keliling lingkaran dengan diameternya.
• Biasanya digunakan dalam perhitungan yang melibatkan lingkaran, seperti mencari luas atau keliling.
• Math.E → Nilai konstanta Euler (sekitar 2.718), sering digunakan dalam perhitungan eksponensial dan logaritma alami.

2. Math Methods (Metode Matematika)

Selain menyediakan konstanta, objek Math juga memiliki berbagai fungsi (methods) yang sangat berguna dalam melakukan perhitungan matematis di JavaScript.

Fungsi-fungsi ini dapat membantu Anda melakukan operasi seperti pembulatan angka, mencari nilai tertinggi atau terendah, hingga menghasilkan angka acak semua tanpa perlu menulis logika manual yang rumit.

Berikut beberapa metode Math yang paling umum digunakan:

// Math methods

console.log(Math.abs(-5)); // 5 (nilai absolut)

console.log(Math.ceil(4.1)); // 5 (pembulatan ke atas)

console.log(Math.floor(4.9)); // 4 (pembulatan ke bawah)

console.log(Math.round(4.5)); // 5 (pembulatan ke terdekat)

console.log(Math.max(1, 5, 3)); // 5 (nilai maksimum)

console.log(Math.min(1, 5, 3)); // 1 (nilai minimum)

console.log(Math.pow(2, 3)); // 8 (2^3)

console.log(Math.sqrt(16)); // 4 (akar kuadrat)

console.log(Math.random()); // random number 0-1

Penjelasan:

Dengan memahami fungsi-fungsi ini, Anda dapat menyelesaikan berbagai perhitungan numerik dengan cepat dan efisien mulai dari logika diskon harga, perhitungan jarak, hingga simulasi angka acak pada game atau aplikasi interaktif.

Objek Math menjadi salah satu alat penting yang perlu dikuasai oleh setiap pengembang JavaScript, karena hampir semua proyek web modern membutuhkan perhitungan logika berbasis angka di dalamnya.

3. Random Number Generator

Fungsi berikut digunakan untuk menghasilkan bilangan bulat acak dalam rentang tertentu, misalnya antara 1 hingga 10.

// Random integer between min and max

function randomInt(min, max) {

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

}

console.log(randomInt(1, 10)); // random number 1-10

Berikut cara kerjanya:

• Math.random() menghasilkan angka acak antara 0 hingga kurang dari 1.
• Angka acak tersebut kemudian dikalikan dengan (max - min + 1) agar memiliki rentang sesuai batas maksimum dan minimum yang diinginkan.
• Math.floor() digunakan untuk membulatkan hasilnya ke bawah sehingga menjadi bilangan bulat.
• Terakhir, hasilnya ditambah dengan min untuk memastikan angka yang dihasilkan berada di dalam rentang yang benar, mulai dari nilai minimum hingga maksimum.

Dengan cara ini, fungsi randomInt() dapat digunakan untuk menghasilkan angka acak yang lebih terkontrol, misalnya untuk keperluan simulasi, permainan, atau pengujian logika program.

4. String Functions (Fungsi String)

String merupakan tipe data yang digunakan untuk menyimpan dan mengolah teks. Dalam JavaScript, string sering digunakan untuk menampilkan pesan, memproses input pengguna, atau membentuk teks dinamis di dalam program. Untuk mempermudah pengelolaannya, JavaScript menyediakan berbagai properti dan metode bawaan yang memungkinkan kita membaca, memodifikasi, maupun memanipulasi teks dengan lebih efisien.

1. String Properties (Properti String)

JavaScript memiliki banyak metode untuk memanipulasi string. Berikut beberapa metode yang sering digunakan:

let str = "Hello World";

// String properties

console.log(str.length); // 11 (panjang string)

Properti .length digunakan untuk menghitung jumlah karakter dalam sebuah string, termasuk spasi. Dalam contoh di atas, teks "Hello World" memiliki panjang 11 karakter.

2. String Methods (Metode String)

JavaScript memiliki banyak metode untuk memanipulasi string. Berikut beberapa metode yang sering digunakan:

// String methods

console.log(str.toUpperCase()); // "HELLO WORLD"

console.log(str.toLowerCase()); // "hello world"

console.log(str.charAt(0)); // "H" (karakter di index 0)

console.log(str.indexOf("World")); // 6 (index pertama ditemukan)

console.log(str.lastIndexOf("l")); // 9 (index terakhir ditemukan)

console.log(str.substring(0, 5)); // "Hello" (potong dari index 0-5)

console.log(str.slice(6)); // "World" (potong dari index 6)

console.log(str.replace("World", "JavaScript")); // "Hello JavaScript"

console.log(str.split(" ")); // ["Hello", "World"] (pecah berdasarkan spasi)

console.log(str.trim()); // removes whitespace

console.log(str.includes("World")); // true (apakah mengandung "World")

console.log(str.startsWith("Hello")); // true (apakah dimulai dengan "Hello")

console.log(str.endsWith("World")); // true (apakah diakhiri dengan "World")

Penjelasan singkat tiap metode:

• toUpperCase() → Mengubah seluruh teks menjadi huruf besar.
• toLowerCase() → Mengubah seluruh teks menjadi huruf kecil.
• charAt(index) → Mengambil karakter pada posisi tertentu.
• indexOf(value) → Menemukan posisi pertama suatu substring.
• lastIndexOf(value) → Menemukan posisi terakhir substring.
• substring(start, end) → Memotong string dari indeks tertentu hingga indeks sebelum end.
• slice(start, end) → Serupa dengan substring(), namun mendukung indeks negatif
• replace(old, new) → Mengganti substring tertentu dengan teks lain.
• split(separator) → Memecah string menjadi array berdasarkan pemisah tertentu.
• trim() → Menghapus spasi di awal dan akhir teks.
• includes(value) → Mengecek apakah string mengandung substring tertentu
• startsWith(value) → Mengecek apakah string dimulai dengan teks tertentu.
• endsWith(value) → Mengecek apakah string diakhiri dengan teks tertentu.

3. Template Literals (ES6+)

Template literals merupakan salah satu fitur baru yang diperkenalkan sejak ECMAScript 6 (ES6) untuk memudahkan penulisan dan pengelolaan string di JavaScript. Fitur ini menggunakan tanda backtick (`) sebagai pembungkus string, bukan tanda kutip tunggal (') atau ganda (").

Salah satu keunggulan utama template literals adalah kemampuannya untuk menyisipkan variabel atau ekspresi langsung di dalam string tanpa perlu menggunakan tanda + untuk menggabungkannya. Hal ini membuat kode lebih ringkas, mudah dibaca, dan lebih efisien.

// Template literals (ES6+)

let name = "John";

let age = 25;

let message = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(message); // "Hello, my name is John and I am 25 years old."

Pada contoh di atas, variabel name dan age dimasukkan langsung ke dalam string menggunakan sintaks ${}. JavaScript secara otomatis akan menggantinya dengan nilai dari variabel tersebut saat program dijalankan.

Selain itu, template literals juga mendukung multi-line string, yang berarti Anda

dapat menulis teks dalam beberapa baris tanpa perlu menambahkan karakter khusus seperti \n.

Keunggulan Template Literals:

• Lebih mudah dibaca dan ditulis – tidak perlu lagi menggabungkan string dengan tanda +.
• Dapat menyisipkan variabel secara langsung menggunakan ${}.
• Mendukung multi-line string tanpa perlu karakter pemisah baris tambahan.
• Lebih fleksibel dan efisien dibandingkan cara lama (string concatenation).

Dengan kata lain, template literals membuat penulisan string di JavaScript menjadi lebih modern, praktis, dan mudah dipelihara terutama ketika Anda perlu membangun teks dinamis yang panjang atau kompleks.

5. Array Functions (Fungsi Array)

Array merupakan salah satu struktur data yang paling sering digunakan dalam JavaScript. Fungsinya adalah untuk menyimpan sekumpulan data dalam satu variabel sehingga memudahkan kita dalam mengelola dan memproses banyak nilai sekaligus. Misalnya, daftar nama buah, daftar angka, atau kumpulan objek data dari API.

JavaScript juga menyediakan berbagai metode (methods) bawaan untuk memanipulasi array, mulai dari menambah, menghapus, mencari, hingga memproses data di dalamnya. Pemahaman tentang fungsi-fungsi ini akan membantu Anda menulis kode yang lebih efisien dan mudah dibaca.

1. Array Properties

let fruits = ["apple", "banana", "orange"];

// Array properties

console.log(fruits.length); // 3 (panjang array)

Penjelasan:

Properti .length digunakan untuk mengetahui jumlah elemen dalam array. Dalam contoh di atas, array fruits memiliki tiga elemen, yaitu apple, banana, dan orange. Properti ini sering digunakan untuk mengontrol perulangan atau memeriksa apakah sebuah array kosong.

2. Array Methods – Adding/Removing (Menambah dan Menghapus Elemen)

// Array methods - Adding/Removing

fruits.push("grape"); // add to end

console.log(fruits); // ["apple", "banana", "orange", "grape"]

fruits.pop(); // remove from end

console.log(fruits); // ["apple", "banana", "orange"]

fruits.unshift("kiwi"); // add to beginning

console.log(fruits); // ["kiwi", "apple", "banana", "orange"]

fruits.shift(); // remove from beginning

console.log(fruits); // ["apple", "banana", "orange"]

Penjelasan:

• push() : Tambah elemen di akhir array
• pop() : Hapus elemen di akhir array
• unshift() : Tambah elemen di awal array
• shift() : Hapus elemen di awal array

Keempat metode ini sering digunakan saat data perlu diperbarui secara dinamis, misalnya dalam daftar belanja, antrean, atau data yang berubah secara real-time.

3. Array Methods – Iteration (Iterasi atau Perulangan)

// Array iteration

fruits.forEach(function (fruit) {

  console.log(fruit);

});

// Array methods with callbacks

let numbers = [1, 2, 3, 4, 5];

// map() - transform setiap elemen

let doubled = numbers.map(function (num) {

  return num * 2;

});

console.log(doubled); // [2, 4, 6, 8, 10]

// filter() - filter elemen berdasarkan kondisi

let evens = numbers.filter(function (num) {

  return num % 2 === 0;

});

console.log(evens); // [2, 4]

// reduce() - reduce array menjadi satu nilai

let sum = numbers.reduce(function (acc, num) {

  return acc + num;

}, 0);

console.log(sum); // 15

Metode forEach() digunakan untuk melakukan perulangan pada setiap elemen array tanpa mengubah isi array tersebut. Selain forEach(), terdapat juga metode lain yang lebih fleksibel untuk memproses array, seperti map(), filter(), dan reduce().

Penjelasan:

• forEach() → Menjalankan fungsi pada setiap elemen array.
• map() → Membuat array baru berdasarkan hasil transformasi setiap elemen.
• filter() → Menghasilkan array baru berisi elemen yang memenuhi kondisi tertentu.
• reduce() → Menggabungkan seluruh elemen menjadi satu nilai akhir (misalnya total).

Metode-metode ini sangat berguna untuk pengolahan data dalam jumlah besar, seperti manipulasi data dari API atau hasil input pengguna.

4. Array Methods – Search (Pencarian)

// Array search

console.log(fruits.indexOf("banana")); // 1 (index dari "banana")

console.log(fruits.includes("apple")); // true (apakah mengandung "apple")

console.log(fruits.find((fruit) => fruit.length > 5)); // "banana" (elemen pertama yang memenuhi kondisi)

Penjelasan:

• indexOf() → Mengembalikan posisi (index) dari elemen yang dicari.
• includes() → Mengecek apakah array mengandung elemen tertentu.
• find() → Mengembalikan elemen pertama yang memenuhi kondisi.

Fungsi pencarian ini sangat membantu saat Anda ingin memeriksa keberadaan data tertentu atau menemukan elemen dengan kriteria khusus.

Pertanyaan Refleksi

• Bagaimana pemahaman Anda tentang objek Math, String, dan Array dapat membantu Anda menulis kode yang lebih efisien dan mudah dipelihara?
• Apa perbedaan mendasar antara membuat fungsi sendiri dan menggunakan built-in function yang sudah disediakan oleh JavaScript?
• Dalam situasi nyata seperti membangun aplikasi e-commerce atau game, kapan Anda akan memilih untuk menggunakan Math.random() dibandingkan Math.floor()?
• Bagaimana Anda akan memanfaatkan metode seperti map(), filter(), dan reduce() untuk menyederhanakan logika bisnis dalam proyek web yang kompleks?
• Mengapa penggunaan template literals dapat dianggap sebagai peningkatan signifikan dibandingkan teknik string concatenation tradisional?
• Menurut Anda, apa risiko atau kesalahan umum yang bisa terjadi jika pengembang tidak memahami dengan baik cara kerja metode pada objek Array?
• Dari seluruh built-in functions yang telah dipelajari, fungsi atau metode mana yang menurut Anda paling berpengaruh dalam meningkatkan kualitas kode, dan mengapa?
• Jika Anda harus menilai efektivitas penggunaan built-in functions dalam proyek tim, kriteria apa yang akan Anda gunakan untuk menentukan apakah penggunaannya sudah optimal?
• Bayangkan Anda sedang membuat aplikasi kecil (misalnya budget tracker atau quiz generator). Bagaimana Anda akan menggabungkan fungsi Math, String, dan Array agar aplikasi berjalan lebih efisien dan user-friendly?
• Jika Anda dapat menambahkan satu built-in function baru ke dalam JavaScript, fungsi apa yang akan Anda buat, dan masalah apa yang ingin Anda selesaikan dengannya?

4.4 Event Basic (alert, prompt, confirm)

Dalam pengembangan aplikasi web, interaksi antara pengguna dan sistem merupakan hal yang sangat penting. JavaScript berperan besar dalam menciptakan pengalaman interaktif tersebut.

Salah satu cara JavaScript berinteraksi dengan pengguna adalah melalui event, yaitu respon yang terjadi ketika pengguna melakukan suatu aksi, seperti mengklik tombol, mengisi formulir, atau menekan tombol pada keyboard.

Selain itu, JavaScript juga menyediakan berbagai metode bawaan (built-in methods) yang memungkinkan program menampilkan pesan, memberikan peringatan, atau menerima input langsung dari pengguna.

Dengan memahami konsep event dan cara JavaScript meresponsnya, Anda dapat membuat halaman web yang lebih dinamis, responsif, dan interaktif bagi pengguna.

4.4.1 Browser Dialog Methods (Metode Dialog Browser)

Dalam proses interaksi antara pengguna dan aplikasi web, komunikasi dua arah menjadi hal yang penting. JavaScript menyediakan cara sederhana namun efektif untuk melakukan interaksi langsung dengan pengguna melalui metode dialog bawaan browser (Browser Dialog Methods).

Metode ini memungkinkan program menampilkan pesan, meminta konfirmasi, atau menerima input dari pengguna tanpa perlu membuat elemen antarmuka tambahan. Dengan kata lain, metode ini membantu pengembang menguji logika interaksi pengguna atau menampilkan informasi secara cepat dan langsung.

Terdapat tiga metode utama yang umum digunakan, yaitu:

1. Alert – untuk menampilkan pesan sederhana,
2. Confirm – untuk meminta konfirmasi tindakan, dan
3. Prompt – untuk menerima input dari pengguna.

Memahami cara kerja masing-masing metode akan membantu Anda memahami bagaimana JavaScript menangani interaksi dasar dengan pengguna sebelum beralih ke teknik yang lebih kompleks, seperti manipulasi DOM atau event handling.

1. Alert Dialog

// Alert - shows message

alert("Hello World!");

Fungsi:

• Menampilkan pesan kepada pengguna
• Pengguna harus klik OK untuk melanjutkan
• Tidak mengembalikan nilai

2. Confirm Dialog

// Confirm - shows OK/Cancel dialog

let result = confirm("Are you sure?");

console.log(result); // true if OK, false if Cancel

Fungsi:

• Menampilkan dialog dengan tombol OK dan Cancel
• Mengembalikan true jika OK, false jika Cancel
• Berguna untuk konfirmasi aksi

3. Prompt Dialog

// Prompt - shows input dialog

let name = prompt("What is your name?", "Default Name");

console.log(name); // user input or null if cancelled

Fungsi:

• Menampilkan dialog input kepada pengguna
• Parameter pertama: pesan
• Parameter kedua: nilai default (opsional)

Mengembalikan string input atau null jika dibatalkan

Contoh Penggunaan Bersama

// Example with user interaction

function getUserInfo() {

  let name = prompt("What is your name?");

  if (name) {

    let age = prompt("What is your age?");

    if (age) {

      let confirmed = confirm(

        `Hello ${name}, you are ${age} years old. Is this correct?`

      );

      if (confirmed) {

        alert("Thank you for the information!");

      } else {

        alert("Please try again.");

      }

    }

  }

}

Penjelasan:

• Minta nama pengguna dengan prompt()
• Jika nama diberikan, minta umur
• Jika umur diberikan, konfirmasi dengan confirm()
• Tampilkan pesan sesuai hasil konfirmasi

4.4.2 Custom Event Handling

Dalam pengembangan aplikasi web modern, interaksi dengan pengguna tidak selalu terbatas pada dialog standar seperti alert(), confirm(), atau prompt(). Dalam banyak kasus, pengembang perlu menciptakan pengalaman yang lebih fleksibel, informatif, dan sesuai dengan tampilan antarmuka aplikasi.

Untuk mencapai hal tersebut, JavaScript memungkinkan kita membuat event atau elemen interaksi yang bersifat kustom, dikenal dengan Custom Event Handling.

Dengan pendekatan ini, Anda dapat menampilkan pesan atau notifikasi secara dinamis, misalnya menampilkan pesan sukses, peringatan, atau kesalahan tanpa harus mengandalkan dialog bawaan browser.

Pendekatan ini tidak hanya memberikan kebebasan dalam menentukan desain dan gaya tampilan pesan, tetapi juga meningkatkan user experience dengan menampilkan informasi secara kontekstual sesuai kebutuhan aplikasi.

Berikut contoh implementasi sederhana fungsi showAlert() yang menampilkan notifikasi kustom berdasarkan jenis pesan yang diinginkan.

// Function to show custom alert

function showAlert(message, type = "info") {

  // Create alert element

  let alertDiv = document.createElement("div");

  alertDiv.className = `alert alert-${type}`;

  alertDiv.textContent = message;

  // Style the alert

  alertDiv.style.cssText = `

        position: fixed;

        top: 20px;

        right: 20px;

        padding: 15px 20px;

        border-radius: 5px;

        color: white;

        z-index: 1000;

        max-width: 300px;

    `;

 // Set background color based on type

  switch (type) {

    case "success":

      alertDiv.style.backgroundColor = "#28a745";

      break;

    case "error":

      alertDiv.style.backgroundColor = "#dc3545";

      break;

    case "warning":

      alertDiv.style.backgroundColor = "#ffc107";

      alertDiv.style.color = "#000";

      break;

    default:

      alertDiv.style.backgroundColor = "#17a2b8";}

  // Add to page

  document.body.appendChild(alertDiv);

  // Remove after 3 seconds

  setTimeout(() => {

    alertDiv.remove();

  }, 3000);

}

// Usage examples

showAlert("Success message!", "success");

showAlert("Error message!", "error");

showAlert("Warning message!", "warning");

showAlert("Info message!", "info");

Pertanyaan Refleksi

• Mengapa kemampuan JavaScript dalam menangani event dianggap penting dalam menciptakan pengalaman pengguna yang interaktif di aplikasi web modern?
• Dalam situasi seperti apa Anda akan memilih menggunakan dialog bawaan browser (seperti alert(), confirm(), atau prompt()) dibandingkan membuat notifikasi kustom dengan DOM manipulation?
• Bagaimana menurut Anda penggunaan alert() yang terlalu sering dapat memengaruhi kenyamanan pengguna saat berinteraksi dengan aplikasi web?
• Jika Anda diminta merancang fitur konfirmasi penghapusan data di aplikasi perusahaan, metode apa yang paling tepat digunakan dan mengapa?
• Apa kelebihan dan kekurangan dari membuat sistem notifikasi kustom (seperti fungsi showAlert()) dibanding menggunakan dialog bawaan browser?
• Bagaimana Anda memastikan pesan interaksi yang ditampilkan melalui event (baik dialog maupun custom alert) tetap jelas, relevan, dan tidak mengganggu alur kerja pengguna?
• Dalam konteks aplikasi berskala besar, bagaimana penggunaan event handling yang efisien dapat meningkatkan performa dan pengalaman pengguna secara keseluruhan?

4.5 DOM Manipulation Dasar

4.5.1 Apa Itu DOM?

Document Object Model (DOM) adalah representasi dari struktur dokumen HTML dalam bentuk objek yang dapat diakses dan dimanipulasi menggunakan JavaScript. Melalui DOM, setiap elemen di dalam halaman web seperti paragraf, gambar, tombol, atau tautan dianggap sebagai sebuah objek yang memiliki properti dan metode tersendiri.

Dengan memanfaatkan DOM, JavaScript dapat:

• Mengakses elemen HTML untuk membaca atau mengambil informasi dari halaman.
• Mengubah konten dan tampilan (styling) elemen secara dinamis sesuai kebutuhan.
• Menambahkan atau menghapus elemen dari halaman tanpa perlu memuat ulang seluruh dokumen.
• Menangani interaksi pengguna (events) seperti klik tombol, input teks, atau pergerakan mouse.

Secara sederhana, DOM berperan sebagai jembatan antara kode JavaScript dan struktur halaman web, memungkinkan pengembang menciptakan pengalaman yang interaktif dan dinamis bagi pengguna.

4.5.2 Selecting Elements (Memilih Elemen)

Dalam JavaScript, kita dapat berinteraksi langsung dengan elemen HTML melalui DOM (Document Object Model). Untuk melakukannya, langkah pertama adalah memilih elemen yang ingin diakses, lalu memodifikasi isi, atribut, atau tampilannya sesuai kebutuhan.

Ada dua pendekatan utama untuk memilih elemen di halaman web: selector tradisional dan selector modern.

1. Traditional Selectors (Selector Tradisional)

// By ID

let element = document.getElementById("myId");

// By class name

let elements = document.getElementsByClassName("myClass");

// By tag name

let paragraphs = document.getElementsByTagName("p");

Penjelasan:

• getElementById() : Pilih elemen berdasarkan ID (mengembalikan 1 elemen)
• getElementsByClassName() : Pilih elemen berdasarkan class (mengembalikan HTMLCollection)
• getElementsByTagName() : Pilih elemen berdasarkan tag (mengembalikan HTMLCollection)

2. Modern Selectors (Selector Modern – Direkomendasikan)

// Modern selectors (recommended)

let element = document.querySelector("#myId"); // Pilih elemen dengan ID

let elements = document.querySelectorAll(".myClass"); // Pilih semua elemen dengan class

let firstParagraph = document.querySelector("p"); // Pilih paragraf pertama

let allParagraphs = document.querySelectorAll("p"); // Pilih semua paragraf

Keunggulan Selector Modern:

• Menggunakan sintaks CSS selector, sehingga lebih intuitif.
• Lebih fleksibel dan powerful untuk berbagai jenis seleksi.
• querySelector() : Mengembalikan elemen pertama yang cocok dengan selector.
• querySelectorAll() : Mengembalikan NodeList berisi semua elemen yang cocok.
• Dengan cara ini, Anda dapat menggunakan selector seperti di CSS — misalnya #id,.class, atau bahkan kombinasi seperti div > p.active.

4.5.3 Modifying Elements (Mengubah Elemen)

Setelah elemen berhasil dipilih, Anda dapat mengubah berbagai aspeknya, mulai dari konten, atribut, hingga gaya tampilan.

1. Mengubah Konten

// Get element

let heading = document.querySelector("h1");

// Change content

heading.textContent = "New Heading"; // Mengubah teks (aman dari XSS)

heading.innerHTML = "<em>New Heading</em>"; // Mengubah HTML (hati-hati XSS)

Perbedaan Utama:

• textContent → Hanya mengubah teks di dalam elemen, aman dari risiko script injection (XSS).
• innerHTML → Dapat mengubah struktur HTML, tetapi harus digunakan dengan hati-hati agar tidak menimbulkan celah keamanan.

2. Mengubah Attributes

// Change attributes

heading.setAttribute("class", "new-class"); // Mengubah class

heading.id = "new-id"; // Mengubah ID

heading.setAttribute("data-custom", "value"); // Mengubah custom attribute

Metode setAttribute() digunakan untuk menambah atau memperbarui atribut HTML, termasuk atribut khusus seperti data-*.

3. Mengubah Style

// Change styles

heading.style.color = "red";

heading.style.fontSize = "2rem";

heading.style.backgroundColor = "yellow";

Catatan:

• Dalam JavaScript, penulisan properti CSS menggunakan camelCase, bukan tanda hubung (backgroundColor bukan background-color).

4. Mengubah Classes

// Add/remove classes

heading.classList.add("active"); // Tambah class

heading.classList.remove("inactive"); // Hapus class

heading.classList.toggle("highlight"); // Toggle class (tambah jika tidak ada, hapus jika ada)

Metode classList sangat berguna untuk mengelola tampilan dinamis seperti efek animasi, interaksi pengguna, atau perubahan status elemen.

Dengan memahami cara memilih dan memodifikasi elemen DOM, Anda dapat membuat halaman web yang lebih interaktif, responsif, dan dinamis, tanpa perlu memuat ulang seluruh halaman.

Praktik Langsung: Menemukan dan Memanipulasi Elemen di Halaman

1. Siapkan file HTML

Buat file baru bernama index.html, lalu salin kode berikut:

<h1 id="title">Belajar DOM</h1>

<p class="desc">Ini adalah contoh paragraf pertama.</p>

<p class="desc">Ini adalah paragraf kedua.</p>

2. Buka di Browser

Buka file tersebut menggunakan browser (Chrome, Edge, atau Firefox).

Tekan F12 → pilih tab Console untuk membuka jendela Console JavaScript.

3. Coba Akses Elemen

Ketik perintah berikut satu per satu di Console:

document.getElementById("title");

document.querySelectorAll(".desc");

Perhatikan hasilnya:

Browser akan menampilkan objek HTML (<h1> dan <p>).

Artinya, JavaScript berhasil menemukan elemen-elemen tersebut di dalam halaman.

4. Manipulasi Elemen

Sekarang ubah teks dan gaya elemen secara langsung dari Console:

let title = document.getElementById("title");

title.textContent = "Halo, DOM!";

title.style.color = "blue";

title.style.fontSize = "2rem";

Lihat hasilnya di halaman:

Tulisan “Belajar DOM” berubah menjadi “Halo, DOM!” dengan warna biru dan ukuran lebih besar. Inilah contoh sederhana bagaimana JavaScript memanipulasi DOM secara dinamis tanpa harus memuat ulang halaman.

4.5.4 Creating Elements (Membuat Elemen)

JavaScript memungkinkan kita untuk membuat elemen HTML baru secara dinamis, sehingga halaman web dapat diubah atau diperbarui tanpa harus memuat ulang seluruh dokumen. Proses ini biasanya melibatkan pembuatan elemen baru, menambahkan konten dan atribut, kemudian menyisipkannya ke dalam DOM.

1. Membuat element baru

// Create new element

let newDiv = document.createElement("div");

newDiv.textContent = "This is a new div";

newDiv.className = "new-div";

Penjelasan:

• createElement() → Membuat elemen HTML baru, misalnya <div>, <p>, atau <span>.
• textContent → Mengatur konten teks dari elemen.
• className → Menetapkan class CSS untuk elemen baru agar dapat distilasi atau diakses dengan mudah.

Dengan cara ini, elemen baru dibuat secara isolasi dan siap untuk dimasukkan ke halaman.

2. Menambahkan elemen ke halaman

// Add to page

document.body.appendChild(newDiv);

Metode penambahan:

• appendChild() → Menambahkan elemen di akhir parent.
• prepend() → Menambahkan elemen di awal parent.
• insertBefore() → Menyisipkan elemen sebelum elemen tertentu di dalam parent.

Metode-metode ini memungkinkan kita untuk mengontrol posisi elemen baru dalam struktur halaman.

3. Menyisipkan Elemen di Posisi Tertentu

// Insert at specific position

let parent = document.querySelector(".container");

let reference = document.querySelector(".reference");

parent.insertBefore(newDiv, reference);

Dengan insertBefore(), kita dapat menempatkan elemen baru tepat sebelum elemen

yang dijadikan acuan, sehingga struktur halaman tetap rapi dan sesuai desain.

4. Menghapus Elemen

// Remove element

newDiv.remove();

Metode penghapusan:

• remove() → Menghapus elemen langsung dari DOM.
• removeChild() → Menghapus child tertentu dari parent.

Penghapusan elemen memungkinkan halaman menjadi dinamis, misalnya ketika menghapus notifikasi, item daftar, atau konten yang tidak lagi dibutuhkan.

Dengan memahami cara membuat, menambahkan, menyisipkan, dan menghapus elemen, pengembang dapat membangun halaman web yang interaktif dan responsif, menyesuaikan konten secara real-time sesuai kebutuhan pengguna.

4.5.5 Event Listeners (Pendengar Event)

Event listeners adalah mekanisme dalam JavaScript yang memungkinkan kita merespons interaksi pengguna di halaman web, seperti klik, mengetik, atau hover. Dengan event listeners, halaman web dapat menjadi lebih interaktif dan dinamis.

1. Basic Event Listener

// Basic event listener

let button = document.querySelector("#myButton");

button.addEventListener("click", function () {

  console.log("Button clicked!");

});

Penjelasan:

• addEventListener() → Menambahkan pendengar untuk event tertentu pada elemen.
• Parameter pertama → Jenis event, misalnya "click", "input", "focus".
• Parameter kedua → Fungsi yang akan dijalankan saat event terjadi.

Contoh di atas membuat tombol merespons klik dengan menampilkan pesan di konsol.

2. Event Listener Dengan Parameter

// Event listener with parameters

function handleClick(event) {

  console.log("Button clicked!", event);

  console.log("Target:", event.target);

  console.log("Type:", event.type);

}

button.addEventListener("click", handleClick);

Dengan event listener ini, kita dapat mengakses objek event untuk mendapatkan informasi lebih detail:

• event.target → Elemen yang memicu event.
• event.type → Jenis event yang terjadi.
• event.preventDefault() → Mencegah perilaku default, misalnya submit form atau link navigasi.

Pendekatan ini sangat berguna untuk mengelola interaksi kompleks pada elemen yang sama.

3. Multiple Events

// Multiple events

let input = document.querySelector("#myInput");

input.addEventListener("input", function () {

  console.log("Input changed:", this.value);

});

input.addEventListener("focus", function () {

  console.log("Input focused");

});

input.addEventListener("blur", function () {

  console.log("Input blurred");

});

Kita bisa menambahkan beberapa event pada satu elemen untuk merespons berbagai interaksi pengguna:

• click → Klik mouse.
• input → Perubahan nilai input.
• focus → Fokus pada elemen input.
• blur → Kehilangan fokus.
• submit → Submit form.
• keydown → Menekan tombol keyboard.

4. Menghapus Event Listener

// Remove event listener

button.removeEventListener("click", handleClick);

Untuk menghapus event listener:

• Fungsi yang digunakan harus sama persis dengan yang ditambahkan sebelumnya.
  Hal ini penting agar elemen tidak lagi merespons event tertentu, misalnya saat membersihkan resource atau mengubah perilaku dinamis halaman.
• Dengan memahami event listeners, pengembang dapat membuat halaman web yang responsif terhadap pengguna, mengelola interaksi dengan baik, dan meningkatkan pengalaman pengguna secara signifikan.

Pertanyaan Refleksi

• Bagaimana pemahaman tentang DOM membantu Anda menciptakan halaman web yang lebih interaktif dibandingkan hanya menggunakan HTML dan CSS?
• Dalam situasi apa Anda lebih memilih menggunakan innerHTML dibanding textContent, dan apa risiko yang harus diperhatikan?
• Bagaimana cara menyeimbangkan antara menambahkan elemen baru ke halaman secara dinamis dan menjaga performa halaman tetap optimal?
• Mengapa event listener dianggap penting dalam meningkatkan pengalaman pengguna di aplikasi web modern?
• Jika sebuah elemen memiliki banyak event listener, bagaimana Anda akan mengatur agar interaksi tetap responsif dan tidak membingungkan pengguna?
• Dalam kasus aplikasi berskala besar, bagaimana penggunaan event delegation dapat membantu mengurangi kompleksitas kode?
• Dalam situasi apa Anda akan memilih menggunakan dialog bawaan browser (alert(), confirm(), prompt()) dibanding membuat notifikasi kustom menggunakan DOM?
• Bagaimana penggunaan alert() yang terlalu sering dapat memengaruhi kenyamanan pengguna?
• Jika Anda diminta merancang fitur konfirmasi penghapusan data di aplikasi perusahaan, metode apa yang paling tepat digunakan dan mengapa?
• Apa kelebihan dan kekurangan membuat sistem notifikasi kustom dibanding menggunakan dialog bawaan browser?
• Bagaimana Anda memastikan pesan interaksi yang ditampilkan melalui event (baik dialog maupun custom alert) tetap jelas, relevan, dan tidak mengganggu alur kerja pengguna?
• Dalam konteks aplikasi web interaktif, bagaimana event handling yang efisien dapat meningkatkan performa dan pengalaman pengguna secara keseluruhan?