Belajar JavaScript dalam Sehari: Mitos atau Fakta?

Rabu, 05 Maret 2025

Belajar JavaScript dalam Sehari: Mitos atau Fakta?

Apa itu JavaScript

1. Apa Itu JavaScript?

a. Pengertian JavaScript

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web lebih interaktif dan dinamis. Berbeda dengan HTML (yang menentukan struktur halaman) dan CSS (yang mengatur tampilan), JavaScript bertanggung jawab atas logika dan interaktivitas dalam sebuah website.

Fitur utama JavaScript meliputi:

✅ Memvalidasi input pengguna → Misalnya, memeriksa apakah pengguna telah mengisi formulir dengan benar sebelum dikirim ke server.

✅ Menampilkan pesan pop-up atau notifikasi → Seperti kotak peringatan (alert) saat pengguna mengklik tombol tertentu.

✅ Mengontrol elemen halaman secara real-time → Seperti mengubah warna tombol saat mouse diarahkan ke atasnya.

✅ Berkomunikasi dengan server tanpa me-reload halaman → Dengan menggunakan teknik seperti AJAX atau Fetch API.

JavaScript pertama kali dikembangkan pada tahun 1995 oleh Brendan Eich saat bekerja di Netscape. Tujuan awalnya adalah membuat bahasa yang mudah digunakan oleh pengembang web untuk meningkatkan interaktivitas situs. Seiring waktu, JavaScript berkembang menjadi salah satu bahasa pemrograman paling dominan di dunia web.

b. Peran JavaScript dalam Pengembangan Web

JavaScript adalah bagian dari Trio Teknologi Web, yaitu:

1️⃣ HTML (HyperText Markup Language) → Menentukan struktur dan elemen halaman web.
2️⃣ CSS (Cascading Style Sheets) → Mengatur tampilan dan desain halaman agar lebih menarik.
3️⃣ JavaScript → Memberikan kemampuan interaktif dan dinamis pada halaman.

Tanpa JavaScript, website hanya akan bersifat statis, seperti dokumen biasa. Dengan JavaScript, halaman web bisa menjadi lebih dinamis, seperti:

✅ Efek animasi dan transisi → Misalnya, tombol yang berubah warna saat disentuh.
✅ Formulir interaktif → Memeriksa apakah email valid sebelum dikirim.
✅ Menampilkan data secara real-time → Misalnya, berita terbaru atau kurs mata uang tanpa harus me-reload halaman.
✅ Membuat aplikasi web → Seperti Google Docs atau Trello yang sepenuhnya berjalan di browser.

JavaScript juga bisa digunakan di luar web, seperti dalam pengembangan aplikasi mobile, desktop, dan bahkan IoT (Internet of Things).

c. Kelebihan JavaScript Dibandingkan Bahasa Lain

Mengapa JavaScript begitu populer? Berikut adalah beberapa kelebihannya:

✅ Mudah Dipelajari → Sintaksnya sederhana dan mirip dengan bahasa Inggris, cocok untuk pemula.
✅ Dapat Berjalan di Semua Browser → Tidak perlu menginstal software tambahan, cukup gunakan browser seperti Chrome atau Firefox.
✅ Bersifat Client-Side → Kode JavaScript dijalankan di perangkat pengguna, sehingga mempercepat waktu respons tanpa membebani server.
✅ Didukung oleh Banyak Framework dan Library → Seperti React.js, Vue.js, dan Angular, yang membantu pengembang membuat aplikasi lebih cepat dan efisien.
✅ Bisa Digunakan di Backend dengan Node.js → Tidak hanya untuk front-end, JavaScript juga bisa digunakan untuk membangun server.

Dengan kelebihan-kelebihan ini, JavaScript menjadi bahasa pemrograman nomor satu dalam pengembangan web dan terus berkembang hingga saat ini.

d. Sejarah Perkembangan JavaScript

JavaScript mengalami banyak perubahan sejak pertama kali dibuat. Berikut adalah beberapa tonggak penting dalam perkembangannya:

1995 → Brendan Eich menciptakan JavaScript di Netscape untuk menambahkan interaktivitas pada web.
1997 → ECMAScript diperkenalkan sebagai standar resmi JavaScript.
2009 → Node.js dirilis, memungkinkan JavaScript digunakan di server.
2015 (ES6) → Pembaruan besar dengan fitur modern seperti let/const, arrow function, dan template literal.
2020-sekarang → JavaScript berkembang dengan teknologi seperti WebAssembly, AI di browser, dan Progressive Web Apps (PWA).

Perkembangan ini menunjukkan bahwa JavaScript terus berinovasi dan tetap relevan di dunia pemrograman.

e. Contoh Kode JavaScript Sederhana

Sebagai gambaran dasar, berikut adalah beberapa contoh kode JavaScript sederhana:

1️⃣ Menampilkan pesan pop-up

alert("Halo, Selamat Belajar JavaScript!");

Kode ini akan menampilkan kotak dialog pop-up dengan pesan yang bisa dilihat oleh pengguna.

2️⃣ Mendeklarasikan variabel dan menampilkannya di console

let nama = "Andi";
let umur = 25;
console.log("Nama: " + nama + ", Umur: " + umur);

Kode ini menyimpan nama dan umur ke dalam variabel, lalu menampilkannya di console browser.

3️⃣ Struktur kontrol (if-else)

let nilai = 80;
if (nilai >= 75) {
    console.log("Lulus");
} else {
    console.log("Tidak Lulus");
}

Kode ini mengevaluasi apakah seorang siswa lulus berdasarkan nilai yang diberikan.

4️⃣ Looping dengan for-loop

for (let i = 1; i <= 5; i++) {
    console.log("Angka ke-" + i);
}

Kode ini mencetak angka 1 hingga 5 menggunakan perulangan for-loop.

5️⃣ Fungsi sederhana

function sapa(nama) {
    return "Halo, " + nama + "!";
}
console.log(sapa("Budi"));

Kode ini mendefinisikan fungsi yang menerima nama sebagai parameter dan mengembalikan sapaan.

Bagian Ini kita Bisa Memahami:

✅ JavaScript adalah bahasa pemrograman yang sangat penting dalam pengembangan web.
✅ Berbeda dari HTML dan CSS, JavaScript memungkinkan website menjadi interaktif dan dinamis.
✅ Memiliki banyak kelebihan, termasuk kemudahan belajar, fleksibilitas tinggi, dan dukungan luas.
✅ Terus berkembang dengan fitur-fitur baru, membuatnya tetap relevan di dunia teknologi.
✅ Memahami dasar JavaScript, seperti variabel, kondisi, dan loop, adalah langkah awal yang penting sebelum masuk ke konsep lanjutan.

Sekarang, setelah memahami apa itu JavaScript, kita akan melanjutkan ke materi berikutnya tentang Apa yang Bisa Dipelajari dalam Sehari?

2. Apa yang Bisa Dipelajari dalam Sehari?

Setelah memahami konsep dasar JavaScript, langkah berikutnya adalah mengetahui apa saja yang bisa dipelajari dalam sehari. Walaupun JavaScript adalah bahasa yang luas dan terus berkembang, ada beberapa fundamental penting yang bisa dipahami dalam waktu singkat untuk mulai menulis kode dengan percaya diri.

Dalam sehari, kamu bisa mempelajari sintaks dasar, memahami bagaimana JavaScript berinteraksi dengan HTML & CSS, serta mencoba beberapa contoh sederhana. Dengan begitu, kamu sudah bisa membangun elemen interaktif di dalam website.

Berikut adalah topik utama yang bisa kamu pelajari dalam sehari:

a. Variabel dan Tipe Data

Variabel adalah wadah untuk menyimpan data dalam JavaScript. Dalam JavaScript modern, ada tiga cara mendeklarasikan variabel:

1️⃣ var – cara lama, sebaiknya tidak digunakan lagi.
2️⃣ let – digunakan untuk variabel yang bisa berubah.
3️⃣ const – digunakan untuk variabel yang nilainya tidak boleh diubah.

Contoh penggunaan variabel dalam JavaScript:

let nama = "Aisyah";
const umur = 23;
console.log("Nama saya " + nama + " dan saya berumur " + umur + " tahun.");

Kode ini menyimpan nama dan umur, lalu mencetaknya di console browser.

Selain itu, ada beberapa tipe data utama dalam JavaScript:

✅ String → Teks, contoh: "Halo Dunia"
✅ Number → Angka, contoh: 25 atau 3.14
✅ Boolean → Nilai benar atau salah, contoh: true atau false
✅ Array → Kumpulan data, contoh: ["apel", "jeruk", "mangga"]
✅ Object → Struktur data yang lebih kompleks, contoh:

let mahasiswa = {
    nama: "Budi",
    umur: 21,
    jurusan: "Informatika"
};
console.log(mahasiswa.nama); // Output: Budi

Dengan memahami variabel dan tipe data, kamu bisa mulai menyimpan dan mengolah informasi di dalam program JavaScript.

b. Operator dan Ekspresi

Operator dalam JavaScript digunakan untuk melakukan operasi matematika, logika, dan perbandingan. Beberapa operator utama yang perlu diketahui:

✅ Operator Aritmatika (untuk perhitungan angka)

+ (Penjumlahan): 5 + 3 → hasilnya 8
- (Pengurangan): 10 - 2 → hasilnya 8
* (Perkalian): 4 * 5 → hasilnya 20
/ (Pembagian): 20 / 4 → hasilnya 5
% (Modulo / Sisa bagi): 10 % 3 → hasilnya 1

✅ Operator Perbandingan (untuk membandingkan dua nilai)

== → Sama dengan (tidak membandingkan tipe data)
=== → Sama dengan (membandingkan tipe data juga)
!= → Tidak sama dengan
> → Lebih besar dari
< → Lebih kecil dari

Contoh penggunaan dalam kode:

let nilai = 80;
console.log(nilai >= 75); // Output: true

Kode ini akan mengevaluasi apakah nilai lebih besar atau sama dengan 75 dan mengembalikan hasil true atau false.

Operator-operator ini akan sering digunakan saat kita mulai menulis logika program, seperti dalam kondisi if-else atau perulangan.

c. Struktur Kontrol (If-Else & Switch Case)

Struktur kontrol digunakan untuk membuat keputusan dalam kode. Dua struktur paling umum adalah:

1️⃣ If-Else:

let usia = 18;
if (usia >= 17) {
    console.log("Kamu boleh membuat SIM.");
} else {
    console.log("Kamu belum cukup umur untuk membuat SIM.");
}

Jika kondisi di dalam if bernilai true, maka kode di dalamnya akan dijalankan. Jika false, maka kode dalam else akan dieksekusi.

2️⃣ Switch-Case: (Digunakan untuk banyak pilihan)

let hari = "Senin";
switch (hari) {
    case "Senin":
        console.log("Hari ini adalah awal pekan.");
        break;
    case "Jumat":
        console.log("Hari ini hampir akhir pekan.");
        break;
    default:
        console.log("Hari yang biasa.");
}

Switch-case berguna jika ada banyak kondisi yang harus dicek, sehingga kode lebih rapi dibandingkan menggunakan if-else berulang-ulang.

Dengan memahami struktur kontrol, kita bisa membuat program yang lebih interaktif dan merespons masukan pengguna dengan lebih baik.

d. Perulangan (Looping)

Looping digunakan untuk mengulang kode secara otomatis tanpa perlu menulis instruksi berkali-kali. Ada beberapa jenis perulangan dalam JavaScript:

1️⃣ For Loop:

for (let i = 1; i <= 5; i++) {
    console.log("Nomor ke-" + i);
}

Kode ini akan mencetak Nomor ke-1 hingga Nomor ke-5 secara otomatis.

2️⃣ While Loop:

let angka = 1;
while (angka <= 3) {
    console.log("Angka: " + angka);
    angka++;
}

Selama kondisi dalam while bernilai true, perulangan akan terus berjalan.

Looping ini sangat penting saat kita ingin mengolah data dalam jumlah banyak, misalnya mencetak daftar produk dalam toko online.

e. Fungsi dalam JavaScript

Fungsi adalah sekumpulan kode yang bisa dipanggil berkali-kali untuk menjalankan tugas tertentu.

1️⃣ Fungsi Dasar:

function sapa(nama) {
    return "Halo, " + nama + "!";
}
console.log(sapa("Dewi")); // Output: Halo, Dewi!

Fungsi ini menerima nama sebagai parameter dan mengembalikan sapaan.

2️⃣ Fungsi Arrow (Sintaks Modern):

const tambah = (a, b) => a + b;
console.log(tambah(3, 4)); // Output: 7

Fungsi arrow (=>) adalah cara lebih ringkas untuk menulis fungsi.

Dengan memahami fungsi, kita bisa menulis kode yang lebih modular dan efisien.

Melangkah ke Langkah Selanjutnya

Dengan mempelajari konsep-konsep ini dalam sehari, kamu sudah memiliki pondasi kuat untuk mulai menulis kode JavaScript. Langkah berikutnya adalah memahami cara JavaScript berinteraksi dengan HTML & CSS, serta mulai membuat proyek kecil seperti tombol interaktif atau validasi formulir.

Pada bagian berikutnya, kita akan membahas bagaimana JavaScript bisa berkomunikasi dengan elemen halaman web, membuat event handler, serta membangun aplikasi sederhana dengan DOM Manipulation.

3. Memulai dengan DOM dan Event Handling

Setelah memahami dasar-dasar JavaScript, langkah berikutnya adalah mempelajari bagaimana JavaScript dapat berinteraksi dengan elemen halaman web menggunakan DOM (Document Object Model) dan event handling.

Dengan konsep ini, kita bisa membuat halaman yang lebih dinamis, seperti mengubah teks secara otomatis, menangani input pengguna, atau membuat animasi sederhana.

a. Apa Itu DOM?

DOM (Document Object Model) adalah struktur pohon yang merepresentasikan semua elemen dalam halaman HTML. Setiap elemen HTML, seperti <div>, <p>, atau <button>, dianggap sebagai sebuah node dalam DOM.

Ketika sebuah halaman dimuat, browser akan membuat versi DOM dari HTML tersebut, memungkinkan JavaScript untuk mengakses dan memodifikasi elemen-elemen di dalamnya.

Contoh struktur DOM sederhana untuk halaman berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar DOM</title>
</head>
<body>
    <h1 id="judul">Halo, Dunia!</h1>
    <p class="paragraf">Ini adalah paragraf pertama.</p>
    <button onclick="ubahTeks()">Klik Saya</button>
    <script>
        function ubahTeks() {
            document.getElementById("judul").innerText = "Teks Berubah!";
        }
    </script>
</body>
</html>

Ketika tombol diklik, teks dalam <h1> akan berubah dari "Halo, Dunia!" menjadi "Teks Berubah!".

b. Cara Mengakses Elemen dalam DOM

Ada beberapa metode utama dalam JavaScript untuk memilih elemen di dalam halaman:

1️⃣ Menggunakan getElementById (memilih elemen berdasarkan id)

let judul = document.getElementById("judul");
judul.style.color = "blue";

Kode ini akan mengubah warna teks elemen dengan id="judul" menjadi biru.

2️⃣ Menggunakan getElementsByClassName (memilih elemen berdasarkan class)

let paragraf = document.getElementsByClassName("paragraf")[0];
paragraf.style.fontSize = "20px";

Kode ini mengambil elemen pertama dengan class="paragraf" dan mengubah ukuran fontnya.

3️⃣ Menggunakan querySelector (lebih fleksibel, seperti CSS selector)

let paragraf = document.querySelector(".paragraf");
paragraf.style.fontWeight = "bold";

Kode ini memilih elemen pertama yang memiliki class "paragraf" dan menjadikannya tebal.

4️⃣ Menggunakan querySelectorAll (memilih banyak elemen sekaligus)

let semuaParagraf = document.querySelectorAll(".paragraf");
semuaParagraf.forEach(p => p.style.color = "red");

Kode ini mengubah warna semua paragraf menjadi merah.

c. Mengubah Konten dan Atribut Elemen

JavaScript memungkinkan kita untuk mengubah isi teks, menambah atribut, atau bahkan menghapus elemen dari halaman.

✅ Mengubah teks dalam elemen

document.getElementById("judul").innerText = "Selamat Datang!";

Kode ini akan mengganti teks dalam elemen <h1> menjadi "Selamat Datang!".

✅ Mengganti atribut elemen (misalnya gambar)

document.getElementById("gambar").src = "gambar-baru.jpg";

Jika sebuah <img> memiliki id="gambar", kode ini akan mengubah gambarnya.

✅ Menambah elemen baru ke dalam halaman

let paragrafBaru = document.createElement("p");
paragrafBaru.innerText = "Ini adalah paragraf tambahan.";
document.body.appendChild(paragrafBaru);

Kode ini akan menambahkan paragraf baru ke dalam halaman.

✅ Menghapus elemen dari halaman

let elemenHapus = document.getElementById("judul");
elemenHapus.remove();

Kode ini akan menghapus elemen dengan id="judul".

d. Event Handling (Menangani Interaksi Pengguna)

Event handling adalah cara JavaScript merespons interaksi pengguna, seperti klik tombol, mengisi formulir, atau menggerakkan mouse.

1️⃣ Event onclick (Saat Tombol Diklik)

document.getElementById("tombol").onclick = function() {
    alert("Tombol telah diklik!");
};

Kode ini akan menampilkan popup alert ketika tombol diklik.

2️⃣ Event onmouseover (Saat Mouse Diatas Elemen)

document.getElementById("judul").onmouseover = function() {
    this.style.color = "green";
};

Teks dalam <h1> akan berubah menjadi hijau saat mouse berada di atasnya.

3️⃣ Event onkeyup (Saat Mengetik di Input)

document.getElementById("inputNama").onkeyup = function() {
    console.log("Kamu sedang mengetik: " + this.value);
};

Setiap kali pengguna mengetik sesuatu di dalam input, teks yang diketik akan muncul di console.

4️⃣ Event Listener dengan addEventListener
Cara ini lebih fleksibel dibandingkan onclick.

document.getElementById("tombol").addEventListener("click", function() {
    alert("Klik menggunakan event listener!");
});

Event listener memungkinkan kita menambahkan banyak event ke dalam satu elemen tanpa menimpa event sebelumnya.

e. Contoh Proyek Sederhana: Kalkulator Sederhana

Untuk mengaplikasikan semua konsep ini, mari buat sebuah kalkulator sederhana yang bisa menjumlahkan dua angka.

<!DOCTYPE html>
<html>
<head>
    <title>Kalkulator Sederhana</title>
</head>
<body>
    <h2>Kalkulator</h2>
    <input type="number" id="angka1" placeholder="Masukkan angka pertama">
    <input type="number" id="angka2" placeholder="Masukkan angka kedua">
    <button onclick="hitung()">Hitung</button>
    <p>Hasil: <span id="hasil"></span></p>

    <script>
        function hitung() {
            let angka1 = parseFloat(document.getElementById("angka1").value);
            let angka2 = parseFloat(document.getElementById("angka2").value);
            let hasil = angka1 + angka2;
            document.getElementById("hasil").innerText = hasil;
        }
    </script>
</body>
</html>

Ketika pengguna memasukkan dua angka lalu menekan tombol Hitung, hasil penjumlahan akan muncul di layar.

Langkah Berikutnya

Dengan memahami DOM dan event handling, kamu sudah bisa membangun halaman yang lebih interaktif dan dinamis.

Langkah selanjutnya adalah memahami konsep Asynchronous JavaScript, termasuk bagaimana menangani data dari API menggunakan fetch() dan membuat aplikasi berbasis AJAX untuk mendapatkan pengalaman yang lebih nyata dalam dunia web development.

4. Menggunakan JavaScript untuk Mengambil Data dari API

Setelah memahami dasar JavaScript dan cara berinteraksi dengan DOM, sekarang kita masuk ke pengambilan data dari API (Application Programming Interface). API memungkinkan aplikasi untuk mengambil dan mengirim data dari server tanpa perlu memuat ulang halaman.

Di bagian ini, kita akan membahas:
✅ Apa itu API dan bagaimana cara kerjanya
✅ Cara menggunakan fetch() untuk mengambil data
✅ Contoh implementasi dengan API publik
✅ Penanganan kesalahan saat mengambil data

a. Apa Itu API dan Bagaimana Cara Kerjanya?

API adalah jembatan komunikasi antara aplikasi dan server. Saat kamu membuka aplikasi cuaca atau media sosial, aplikasi tersebut mengambil data dari server menggunakan API.

📌 Cara Kerja API:
1️⃣ Aplikasi mengirim permintaan (request) ke server.
2️⃣ Server merespons dengan data dalam format JSON atau XML.
3️⃣ Aplikasi menggunakan data tersebut untuk ditampilkan ke pengguna.

Contoh data JSON yang dikirim oleh API:

{
  "nama": "Budi",
  "usia": 25,
  "pekerjaan": "Programmer"
}

JavaScript bisa membaca data ini dan menampilkannya di halaman web.

b. Menggunakan `fetch()` untuk Mengambil Data API

JavaScript memiliki fungsi fetch() untuk mengambil data dari API. Contoh dasar penggunaan fetch:

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json()) 
  .then(data => console.log(data))  
  .catch(error => console.error("Terjadi kesalahan:", error));

✅ fetch() mengirim permintaan ke API.
✅ response.json() mengubah data dari API ke format JavaScript.
✅ console.log(data) menampilkan hasilnya di console browser.
✅ .catch(error) menangkap kesalahan jika terjadi error.

c. Contoh Implementasi API Publik

Mari kita ambil data pengguna dari API JSONPlaceholder dan menampilkannya ke halaman web.

1️⃣ HTML: Buat Struktur Halaman

<!DOCTYPE html>
<html>
<head>
    <title>Data Pengguna</title>
</head>
<body>
    <h2>Daftar Pengguna</h2>
    <ul id="user-list"></ul>

    <script>
        // 2️⃣ Ambil Data dari API dan Tampilkan di Halaman
        fetch("https://jsonplaceholder.typicode.com/users")
            .then(response => response.json())
            .then(data => {
                let userList = document.getElementById("user-list");
                data.forEach(user => {
                    let listItem = document.createElement("li");
                    listItem.innerText = `${user.name} - ${user.email}`;
                    userList.appendChild(listItem);
                });
            })
            .catch(error => console.error("Terjadi kesalahan:", error));
    </script>
</body>
</html>

✅ Script ini akan menampilkan daftar pengguna yang diambil dari API.
✅ Setiap nama dan email akan muncul dalam bentuk list di halaman.

d. Penanganan Kesalahan API

Ketika mengambil data dari API, bisa terjadi error, seperti server down atau koneksi internet terputus. Kita bisa menangani kesalahan dengan:

1️⃣ Mengecek Status Response

fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error("Gagal mengambil data:", error));

✅ Jika API mengembalikan status 404 atau 500, error akan tertangkap.

2️⃣ Menampilkan Pesan Error di Halaman

fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(data => {
        document.getElementById("user-list").innerHTML = "Data berhasil dimuat!";
    })
    .catch(error => {
        document.getElementById("user-list").innerHTML = "Gagal memuat data.";
    });

✅ Jika gagal, halaman akan menampilkan "Gagal memuat data."

e. Membuat Aplikasi Cuaca Sederhana dengan API

Sekarang mari buat aplikasi cuaca menggunakan API OpenWeatherMap.

1️⃣ Dapatkan API Key

Buka https://openweathermap.org/api.
Buat akun dan dapatkan API Key gratis.

2️⃣ Buat HTML untuk Aplikasi Cuaca

<!DOCTYPE html>
<html>
<head>
    <title>Cuaca Saat Ini</title>
</head>
<body>
    <h2>Masukkan Nama Kota:</h2>
    <input type="text" id="kota" placeholder="Misalnya: Jakarta">
    <button onclick="cariCuaca()">Cari Cuaca</button>
    <p id="hasil-cuaca"></p>

    <script>
        function cariCuaca() {
            let kota = document.getElementById("kota").value;
            let apiKey = "API_KEY_ANDA";  // Ganti dengan API key OpenWeatherMap

            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${kota}&appid=${apiKey}&units=metric`)
                .then(response => response.json())
                .then(data => {
                    let suhu = data.main.temp;
                    let deskripsi = data.weather[0].description;
                    document.getElementById("hasil-cuaca").innerText = 
                        `Suhu di ${kota}: ${suhu}°C, Kondisi: ${deskripsi}`;
                })
                .catch(error => {
                    document.getElementById("hasil-cuaca").innerText = "Kota tidak ditemukan.";
                });
        }
    </script>
</body>
</html>

✅ Pengguna bisa mengetik nama kota, lalu API akan menampilkan suhu dan kondisi cuaca.
✅ Jika kota tidak ditemukan, muncul pesan "Kota tidak ditemukan.".

Langkah Berikutnya

Sekarang kamu sudah bisa mengambil data dari API dan menampilkannya di halaman web!

Langkah berikutnya adalah memahami Asynchronous JavaScript, termasuk penggunaan Promises dan Async/Await agar kode lebih rapi dan mudah dibaca.

5. Menggunakan Async/Await dalam JavaScript

Setelah memahami cara menggunakan fetch() dengan .then() dan .catch(), sekarang kita akan membahas Async/Await. Async/Await adalah fitur JavaScript yang membuat kode lebih mudah dibaca dan dipahami dibandingkan dengan penggunaan .then() berulang kali.

Di bagian ini, kita akan membahas:
✅ Apa itu Async/Await dan mengapa lebih baik daripada .then()
✅ Cara mengubah kode fetch() menggunakan Async/Await
✅ Penanganan kesalahan dengan Try...Catch
✅ Contoh implementasi Async/Await dalam proyek sederhana

a. Apa Itu Async/Await?

async dan await adalah cara yang lebih sederhana untuk menangani operasi asynchronous dalam JavaScript.

📌 Keunggulan Async/Await dibanding .then()
✅ Lebih mudah dibaca – Kode terlihat seperti kode synchronous biasa.
✅ Menghindari callback hell – Tidak perlu .then().then().then().
✅ Lebih mudah menangani error – Menggunakan try...catch.

b. Cara Mengubah Fetch ke Async/Await

Mari kita bandingkan penggunaan .then() dengan Async/Await.

1️⃣ Menggunakan `.then()` (Kode Lama)

fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("Terjadi kesalahan:", error));

2️⃣ Menggunakan Async/Await (Kode Baru yang Lebih Bersih)

async function getUsers() {
    try {
        let response = await fetch("https://jsonplaceholder.typicode.com/users");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Terjadi kesalahan:", error);
    }
}

getUsers();

✅ await menunggu hasil fetch() sebelum lanjut ke baris berikutnya.
✅ Tidak perlu .then(), sehingga lebih mudah dibaca.
✅ Error ditangani dengan try...catch.

c. Implementasi Async/Await dalam Aplikasi Cuaca

Sekarang kita akan menerapkan Async/Await untuk mengambil data cuaca dari OpenWeatherMap API.

1️⃣ Buat HTML untuk Aplikasi Cuaca

<!DOCTYPE html>
<html>
<head>
    <title>Aplikasi Cuaca</title>
</head>
<body>
    <h2>Cari Cuaca Kota</h2>
    <input type="text" id="city" placeholder="Masukkan nama kota">
    <button onclick="getWeather()">Cari</button>
    <p id="weather-result"></p>

    <script>
        async function getWeather() {
            let city = document.getElementById("city").value;
            let apiKey = "API_KEY_ANDA"; // Ganti dengan API Key OpenWeatherMap

            try {
                let response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
                let data = await response.json();

                if (response.ok) {
                    document.getElementById("weather-result").innerText = 
                        `Suhu di ${city}: ${data.main.temp}°C, Kondisi: ${data.weather[0].description}`;
                } else {
                    document.getElementById("weather-result").innerText = "Kota tidak ditemukan.";
                }
            } catch (error) {
                document.getElementById("weather-result").innerText = "Gagal mengambil data.";
            }
        }
    </script>
</body>
</html>

✅ Kode lebih bersih dan mudah dibaca dengan Async/Await.
✅ Menggunakan try...catch untuk menangani error.

d. Menjalankan Beberapa `await` Secara Bersamaan

Jika kita perlu mengambil beberapa data sekaligus, kita bisa menggunakan Promise.all().

Contoh: Ambil Data dari Dua API Sekaligus

async function getData() {
    try {
        let [users, posts] = await Promise.all([
            fetch("https://jsonplaceholder.typicode.com/users").then(res => res.json()),
            fetch("https://jsonplaceholder.typicode.com/posts").then(res => res.json())
        ]);

        console.log("Users:", users);
        console.log("Posts:", posts);
    } catch (error) {
        console.error("Gagal mengambil data:", error);
    }
}

getData();

✅ Promise.all() menjalankan dua fetch() secara bersamaan.
✅ Hasilnya lebih cepat dibandingkan memanggil satu per satu.

Langkah Berikutnya

Sekarang kamu sudah memahami cara menggunakan Async/Await untuk mengambil data API dengan lebih mudah dan bersih!

Selanjutnya, kita akan membahas Bagian 6: Menggunakan Local Storage di JavaScript agar data bisa disimpan di browser dan tidak hilang saat halaman di-refresh.

6. Menggunakan Local Storage di JavaScript

Setelah memahami bagaimana cara mengambil data menggunakan fetch API dan Async/Await, langkah selanjutnya adalah menyimpan data agar tidak hilang saat halaman di-refresh. Salah satu cara untuk menyimpan data langsung di browser adalah menggunakan Local Storage.

Di bagian ini, kita akan membahas secara detail tentang:

Apa itu Local Storage dan bagaimana cara kerjanya
Cara menyimpan, mengambil, dan menghapus data dari Local Storage
Perbedaan antara Local Storage, Session Storage, dan Cookies
Contoh implementasi Local Storage dalam proyek sederhana

a. Apa Itu Local Storage?

Local Storage adalah fitur JavaScript yang memungkinkan kita menyimpan data di dalam browser tanpa perlu menggunakan database atau server. Dengan kata lain, data yang disimpan di Local Storage tetap ada meskipun halaman di-refresh atau browser ditutup.

Local Storage memiliki beberapa keunggulan. Pertama, data yang tersimpan di dalamnya tidak akan hilang sampai pengguna sendiri yang menghapusnya. Ini sangat berguna untuk menyimpan preferensi pengguna seperti tema aplikasi, bahasa yang dipilih, atau daftar item dalam keranjang belanja. Kedua, Local Storage sangat mudah digunakan karena hanya membutuhkan beberapa baris kode JavaScript. Ketiga, Local Storage tidak memerlukan backend atau database, sehingga cocok untuk proyek sederhana yang tidak memerlukan penyimpanan data yang kompleks.

Namun, Local Storage juga memiliki beberapa keterbatasan. Data yang disimpan hanya dalam bentuk teks (string), sehingga jika ingin menyimpan objek, kita harus mengonversinya terlebih dahulu ke format JSON. Selain itu, karena Local Storage dapat diakses melalui konsol browser, data yang tersimpan di dalamnya tidak aman untuk informasi sensitif seperti password atau token akses. Local Storage juga memiliki batas penyimpanan sekitar 5MB per domain, yang berarti tidak cocok untuk menyimpan data berukuran besar seperti file gambar atau video.

b. Cara Menggunakan Local Storage di JavaScript

Untuk menggunakan Local Storage, ada tiga operasi utama yang perlu diketahui:

Menyimpan data dengan localStorage.setItem("key", "value")
Mengambil data dengan localStorage.getItem("key")
Menghapus data dengan localStorage.removeItem("key")

Menyimpan Data ke Local Storage

Agar data tetap ada di browser setelah halaman di-refresh, kita bisa menggunakan setItem() untuk menyimpan data ke Local Storage.

localStorage.setItem("nama", "Andi");
localStorage.setItem("umur", "25");

Kode di atas akan menyimpan dua data:

"nama" dengan nilai "Andi"
"umur" dengan nilai "25"

Data ini tidak akan hilang meskipun halaman ditutup atau browser dimatikan.

Mengambil Data dari Local Storage

Setelah menyimpan data, kita bisa mengambilnya kembali dengan getItem().

let nama = localStorage.getItem("nama");
let umur = localStorage.getItem("umur");

console.log("Nama:", nama);
console.log("Umur:", umur);

Kode di atas akan menampilkan output:

Nama: Andi  
Umur: 25

Jika data tidak ditemukan, fungsi getItem() akan mengembalikan nilai null.

Menghapus Data dari Local Storage

Jika ingin menghapus data tertentu dari Local Storage, kita bisa menggunakan removeItem().

localStorage.removeItem("nama");

Setelah kode ini dijalankan, data "nama" akan hilang dari Local Storage, tetapi data "umur" masih tetap ada.

Menghapus Semua Data di Local Storage

Jika ingin menghapus semua data sekaligus, gunakan clear().

localStorage.clear();

Setelah perintah ini dijalankan, seluruh data yang tersimpan dalam Local Storage akan dihapus.

c. Menyimpan dan Mengambil Objek di Local Storage

Karena Local Storage hanya bisa menyimpan string, kita perlu mengubah objek menjadi JSON menggunakan JSON.stringify() sebelum menyimpan, dan menggunakan JSON.parse() untuk mengambilnya kembali.

Menyimpan Objek ke Local Storage

Misalnya, kita memiliki objek pengguna dengan beberapa informasi.

let user = {
    nama: "Budi",
    umur: 30,
    pekerjaan: "Programmer"
};

localStorage.setItem("user", JSON.stringify(user));

Kode di atas akan menyimpan objek dalam bentuk string JSON.

Mengambil Objek dari Local Storage

Saat mengambil data, kita harus mengonversinya kembali ke objek JavaScript dengan JSON.parse().

let dataUser = JSON.parse(localStorage.getItem("user"));
console.log(dataUser.nama); // Output: Budi
console.log(dataUser.umur); // Output: 30

Dengan cara ini, kita bisa menyimpan dan mengambil data kompleks di Local Storage.

d. Perbedaan Local Storage, Session Storage, dan Cookies

Selain Local Storage, ada dua cara lain untuk menyimpan data di browser, yaitu Session Storage dan Cookies.

Local Storage menyimpan data secara persisten, artinya data tetap ada meskipun halaman di-refresh atau browser ditutup. Sementara itu, Session Storage mirip dengan Local Storage, tetapi data hanya bertahan selama sesi pengguna berlangsung. Jika pengguna menutup tab atau browser, data di Session Storage akan hilang.

Sementara itu, Cookies digunakan untuk menyimpan data dalam jumlah kecil dan biasanya digunakan untuk komunikasi dengan server. Berbeda dengan Local Storage dan Session Storage, data Cookies akan dikirim ke server setiap kali pengguna melakukan request ke situs tersebut. Cookies juga memiliki masa berlaku yang bisa diatur, misalnya selama beberapa jam atau beberapa hari.

Jika ingin menyimpan data yang tidak perlu dikirim ke server, seperti pengaturan tampilan atau daftar tugas, Local Storage adalah pilihan terbaik. Namun, jika ingin menyimpan data hanya untuk sementara waktu selama pengguna masih di dalam halaman yang sama, lebih baik menggunakan Session Storage. Sementara itu, jika membutuhkan penyimpanan data yang bisa diakses oleh server, Cookies adalah pilihan yang lebih sesuai.

e. Contoh Implementasi Local Storage dalam To-Do List

Untuk lebih memahami penggunaan Local Storage, kita akan membuat contoh aplikasi To-Do List sederhana.

Membuat HTML untuk To-Do List

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
</head>
<body>
    <h2>To-Do List</h2>
    <input type="text" id="task" placeholder="Tambahkan tugas">
    <button onclick="addTask()">Tambah</button>
    <ul id="task-list"></ul>

    <script>
        function loadTasks() {
            let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
            let list = document.getElementById("task-list");
            list.innerHTML = "";

            tasks.forEach((task, index) => {
                let li = document.createElement("li");
                li.innerHTML = `${task} <button onclick="deleteTask(${index})">Hapus</button>`;
                list.appendChild(li);
            });
        }

        function addTask() {
            let taskInput = document.getElementById("task");
            let task = taskInput.value;

            if (task) {
                let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
                tasks.push(task);
                localStorage.setItem("tasks", JSON.stringify(tasks));
                taskInput.value = "";
                loadTasks();
            }
        }

        function deleteTask(index) {
            let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
            tasks.splice(index, 1);
            localStorage.setItem("tasks", JSON.stringify(tasks));
            loadTasks();
        }

        loadTasks();
    </script>
</body>
</html>

Dengan contoh ini, pengguna dapat menambahkan dan menghapus tugas, serta data akan tetap tersimpan meskipun halaman di-refresh.

Setelah memahami penggunaan Local Storage, kita akan melanjutkan ke Bagian 7: Mengenal dan Menggunakan JavaScript ES6+, di mana kita akan belajar menulis kode yang lebih modern dan efisien.

7. Mengenal dan Menggunakan JavaScript ES6+

JavaScript terus berkembang dengan fitur-fitur baru yang lebih modern, efisien, dan mudah dibaca. Salah satu pembaruan terbesar terjadi pada tahun 2015 dengan hadirnya ES6 (ECMAScript 2015), yang kemudian diikuti oleh versi ES7, ES8, dan seterusnya.

Dalam bagian ini, kita akan membahas secara detail:

Apa itu ES6+ dan mengapa penting
Fitur-fitur utama dalam ES6+, seperti let dan const, arrow function, template literal, destructuring, spread/rest operator, dan lainnya
Contoh penggunaan ES6+ dalam proyek nyata

a. Apa Itu ES6+ dan Mengapa Penting?

Sebelum ES6, JavaScript masih menggunakan sintaks lama yang terkadang sulit dipahami dan kurang efisien. Dengan ES6+, banyak fitur baru yang diperkenalkan untuk meningkatkan produktivitas dan membuat kode lebih mudah dibaca.

Beberapa keunggulan ES6+ dibandingkan versi sebelumnya adalah:

Lebih ringkas dan ekspresif: Mengurangi kode yang panjang dan berulang
Memperbaiki kelemahan sintaks lama: Contohnya, penggunaan var yang sering menyebabkan bug digantikan dengan let dan const
Meningkatkan performa dan kompatibilitas: Dengan fitur seperti asynchronous programming yang lebih baik
Membantu pengembangan aplikasi modern: Banyak framework dan library terbaru seperti React dan Vue.js menggunakan ES6+

Karena itu, memahami ES6+ adalah kunci untuk menjadi developer JavaScript yang lebih baik.

b. Deklarasi Variabel: `let` dan `const`

Sebelum ES6, variabel di JavaScript dideklarasikan dengan var. Namun, var memiliki banyak kelemahan, terutama karena sifatnya yang hoisting dan tidak memiliki block scope.

Menggunakan `let`

let digunakan untuk mendeklarasikan variabel yang nilainya bisa berubah.

let nama = "Andi";
nama = "Budi"; // Boleh diubah
console.log(nama); // Output: Budi

Dengan let, variabel hanya tersedia di dalam block scope, sehingga lebih aman dibandingkan var.

if (true) {
    let umur = 25;
}
console.log(umur); // Error, karena umur hanya tersedia di dalam blok if

Menggunakan `const`

Jika variabel tidak akan berubah, kita bisa menggunakan const.

const pi = 3.14;
pi = 3.1415; // Error, karena const tidak bisa diubah

Menggunakan const sangat dianjurkan untuk nilai yang tidak boleh diubah, seperti konfigurasi aplikasi.

c. Arrow Function: Cara Baru Menulis Fungsi

Di ES6+, kita bisa menggunakan arrow function untuk menulis fungsi dengan lebih ringkas.

Sebelum ES6 (menggunakan function biasa)

function salam(nama) {
    return "Halo, " + nama;
}
console.log(salam("Andi"));

Dengan ES6 (menggunakan arrow function)

const salam = (nama) => `Halo, ${nama}`;
console.log(salam("Andi"));

Kode lebih pendek dan lebih mudah dibaca.

Arrow function juga otomatis mengembalikan nilai jika hanya ada satu baris kode.

d. Template Literal: Menggabungkan String dengan Lebih Mudah

Sebelum ES6, menggabungkan string menggunakan + bisa merepotkan.

let nama = "Budi";
let pesan = "Halo, " + nama + ". Selamat datang!";
console.log(pesan);

Dengan template literal, kita bisa menggunakan backtick (`) untuk membuat kode lebih bersih.

let nama = "Budi";
let pesan = `Halo, ${nama}. Selamat datang!`;
console.log(pesan);

Kelebihan template literal:

Tidak perlu lagi menggunakan +
Bisa membuat string multi-baris tanpa \n

let text = `Ini baris pertama
Ini baris kedua`;
console.log(text);

e. Destructuring: Mengambil Data dari Array dan Objek dengan Mudah

Destructuring memungkinkan kita mengambil nilai dari array atau objek dengan lebih ringkas.

Destructuring Array

Sebelum ES6:

let angka = [1, 2, 3];
let a = angka[0];
let b = angka[1];
console.log(a, b);

Dengan ES6:

let angka = [1, 2, 3];
let [a, b] = angka;
console.log(a, b); // Output: 1 2

Destructuring Objek

Sebelum ES6:

let user = { nama: "Andi", umur: 25 };
let nama = user.nama;
let umur = user.umur;

Dengan ES6:

let user = { nama: "Andi", umur: 25 };
let { nama, umur } = user;
console.log(nama, umur);

f. Spread dan Rest Operator (`...`)

Spread Operator (...) digunakan untuk menyalin atau menggabungkan array dan objek.

let angka1 = [1, 2, 3];
let angka2 = [...angka1, 4, 5]; 
console.log(angka2); // Output: [1, 2, 3, 4, 5]

Rest Operator (...) digunakan dalam fungsi untuk menangani jumlah parameter yang tidak terbatas.

function jumlah(...angka) {
    return angka.reduce((total, num) => total + num, 0);
}
console.log(jumlah(1, 2, 3, 4)); // Output: 10

g. Async/Await: Menangani Asynchronous dengan Lebih Mudah

Di JavaScript, banyak operasi berjalan secara asynchronous, seperti mengambil data dari server. Sebelum ES6, kita menggunakan callback yang bisa membuat kode sulit dibaca (callback hell).

Dengan Async/Await, kita bisa menulis kode asynchronous yang lebih rapi.

Sebelum ES6:

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

Dengan Async/Await:

async function fetchData() {
    try {
        let response = await fetch("https://jsonplaceholder.typicode.com/users");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.log(error);
    }
}
fetchData();

Lebih mudah dibaca dan lebih mirip dengan kode synchronous.

Di Bagian Ini Ada Kita Bisa Ambil Kesimpulan Sebagai Berikut:

ES6+ membawa banyak fitur baru yang membuat JavaScript lebih modern, efisien, dan mudah digunakan. Dengan let dan const, kita bisa menghindari bug yang sering terjadi dengan var. Arrow function membuat kode lebih ringkas, sementara template literal memudahkan manipulasi string. Destructuring dan spread/rest operator membantu dalam pengolahan array dan objek, serta Async/Await menyederhanakan kode asynchronous.

Setelah memahami ES6+, kita akan melanjutkan ke Bagian 8: Menggunakan JavaScript dalam DOM Manipulation, di mana kita akan belajar bagaimana JavaScript digunakan untuk mengubah tampilan halaman web secara dinamis.

8. Menggunakan JavaScript dalam DOM Manipulation

JavaScript menjadi sangat berguna saat digunakan untuk memanipulasi Document Object Model (DOM). DOM adalah representasi struktural dari elemen-elemen pada halaman web yang dapat diakses dan dimodifikasi menggunakan JavaScript. Dengan DOM Manipulation, kita bisa mengubah teks, gaya, atau bahkan menambahkan dan menghapus elemen pada halaman web secara dinamis.

Dalam bagian ini, kita akan membahas:

a. Apa itu DOM dan Mengapa Penting
b. Cara Mengakses Elemen DOM dengan JavaScript
c. Memodifikasi Elemen dengan JavaScript
d. Menangani Event dalam DOM
e. Menambahkan dan Menghapus Elemen secara Dinamis
f. Praktik Membuat Interaksi Dinamis dengan DOM

a. Apa itu DOM dan Mengapa Penting?

DOM (Document Object Model) adalah struktur hierarkis yang merepresentasikan halaman web dalam bentuk objek yang dapat diakses dan dimodifikasi menggunakan JavaScript. Ketika browser memuat halaman HTML, ia akan membuat representasi DOM yang memungkinkan JavaScript untuk berinteraksi dengan elemen-elemen tersebut.

Misalnya, jika kita memiliki elemen berikut dalam HTML:

<h1 id="judul">Selamat Datang!</h1>

JavaScript dapat mengakses elemen ini dan mengubah teksnya menjadi sesuatu yang baru.

DOM sangat penting karena:

Memungkinkan kita membuat konten dinamis tanpa harus me-reload halaman.
Bisa digunakan untuk memanipulasi tampilan, seperti mengubah warna, ukuran font, atau menambahkan efek animasi.
Digunakan dalam berbagai interaksi pengguna, seperti form validation, navigasi interaktif, dan efek visual lainnya.

b. Cara Mengakses Elemen DOM dengan JavaScript

Untuk dapat memanipulasi elemen pada halaman web, kita harus terlebih dahulu mengakses elemen tersebut menggunakan JavaScript. Berikut adalah beberapa metode yang digunakan untuk mengakses elemen DOM:

getElementById() → Mengakses elemen berdasarkan ID.
getElementsByClassName() → Mengakses elemen berdasarkan class.
getElementsByTagName() → Mengakses elemen berdasarkan nama tag.
querySelector() → Mengakses elemen pertama yang cocok dengan selector CSS tertentu.
querySelectorAll() → Mengakses semua elemen yang cocok dengan selector CSS tertentu.

Contoh: Mengakses Elemen dengan `getElementById()`

<p id="teks">Ini adalah teks awal.</p>
<button onclick="ubahTeks()">Ubah Teks</button>

<script>
function ubahTeks() {
    let teks = document.getElementById("teks");
    teks.innerHTML = "Teks telah berubah!";
}
</script>

Penjelasan:

document.getElementById("teks") mengambil elemen dengan ID teks.
innerHTML digunakan untuk mengubah isi teks di dalam elemen tersebut.

c. Memodifikasi Elemen dengan JavaScript

Setelah berhasil mengakses elemen, kita dapat memodifikasi berbagai aspek dari elemen tersebut. Beberapa properti yang sering digunakan dalam DOM Manipulation adalah:

Mengubah Teks (innerHTML dan textContent)
Mengubah Gaya CSS (style)
Mengubah Atribut Elemen (setAttribute())

1. Mengubah Teks Elemen

<h2 id="judul">Judul Awal</h2>
<button onclick="gantiJudul()">Ganti Judul</button>

<script>
function gantiJudul() {
    document.getElementById("judul").innerHTML = "Judul Baru";
}
</script>

2. Mengubah Gaya Elemen

<p id="paragraf">Paragraf ini bisa berubah warna.</p>
<button onclick="ubahWarna()">Ubah Warna</button>

<script>
function ubahWarna() {
    document.getElementById("paragraf").style.color = "red";
}
</script>

3. Mengubah Atribut Elemen

<img id="gambar" src="gambar1.jpg" width="200">
<button onclick="gantiGambar()">Ganti Gambar</button>

<script>
function gantiGambar() {
    document.getElementById("gambar").setAttribute("src", "gambar2.jpg");
}
</script>

d. Menangani Event dalam DOM

Event adalah suatu aksi yang terjadi pada elemen, seperti klik tombol, menggerakkan mouse, atau mengetik pada input. JavaScript memungkinkan kita menangani event ini menggunakan event listener.

Contoh: Menangani Event `onclick`

<button id="tombol">Klik Saya</button>
<p id="pesan"></p>

<script>
document.getElementById("tombol").addEventListener("click", function() {
    document.getElementById("pesan").innerHTML = "Tombol telah diklik!";
});
</script>

Penjelasan:

addEventListener("click", function() {...}) menambahkan event listener ke tombol.
Ketika tombol diklik, teks dalam <p> akan berubah.

e. Menambahkan dan Menghapus Elemen Secara Dinamis

JavaScript memungkinkan kita menambahkan atau menghapus elemen dari halaman web secara dinamis menggunakan createElement(), appendChild(), dan removeChild().

Contoh: Menambahkan Elemen Baru

<button onclick="tambahItem()">Tambah Item</button>
<ul id="list"></ul>

<script>
function tambahItem() {
    let itemBaru = document.createElement("li");
    itemBaru.textContent = "Item Baru";
    document.getElementById("list").appendChild(itemBaru);
}
</script>

Contoh: Menghapus Elemen

<ul id="daftar">
    <li id="item1">Item 1</li>
</ul>
<button onclick="hapusItem()">Hapus Item</button>

<script>
function hapusItem() {
    let item = document.getElementById("item1");
    item.parentNode.removeChild(item);
}
</script>

Penjelasan:

createElement("li") membuat elemen <li> baru.
appendChild() menambahkan elemen ke dalam <ul>.
removeChild() menghapus elemen dari daftar.

f. Praktik Membuat Interaksi Dinamis dengan DOM

Sebagai latihan, kita akan membuat to-do list sederhana yang memungkinkan pengguna menambah dan menghapus tugas mereka.

<input type="text" id="inputTugas" placeholder="Tambahkan tugas">
<button onclick="tambahTugas()">Tambah</button>
<ul id="daftarTugas"></ul>

<script>
function tambahTugas() {
    let tugas = document.getElementById("inputTugas").value;
    if (tugas === "") return;

    let li = document.createElement("li");
    li.textContent = tugas;

    let btnHapus = document.createElement("button");
    btnHapus.textContent = "Hapus";
    btnHapus.onclick = function() {
        this.parentNode.remove();
    };

    li.appendChild(btnHapus);
    document.getElementById("daftarTugas").appendChild(li);

    document.getElementById("inputTugas").value = "";
}
</script>

Cara kerja:

Pengguna mengetik tugas di input.
Klik tombol Tambah, tugas muncul dalam daftar.
Setiap tugas memiliki tombol Hapus untuk menghapusnya.

Dengan menguasai DOM Manipulation, kita bisa membangun website yang lebih interaktif dan menarik. Selanjutnya, kita akan membahas Bagian 9: JavaScript dan Web API, di mana kita akan belajar bagaimana JavaScript berinteraksi dengan data eksternal dan server.

9. JavaScript dan Web API

JavaScript tidak hanya digunakan untuk memanipulasi elemen pada halaman web, tetapi juga dapat berinteraksi dengan berbagai Web API (Application Programming Interface). Web API memungkinkan JavaScript untuk mengambil dan mengirim data ke server, berkomunikasi dengan perangkat pengguna, atau mengakses layanan eksternal seperti peta, cuaca, dan media sosial.

Dalam bagian ini, kita akan membahas:

a. Apa itu Web API dan Mengapa Penting
b. Cara Menggunakan Fetch API untuk Mengambil Data
c. Mengirim Data dengan Fetch API
d. Menggunakan LocalStorage dan SessionStorage
e. Contoh Praktik Menggunakan Web API

a. Apa itu Web API dan Mengapa Penting?

Web API adalah sekumpulan fungsi yang disediakan oleh browser atau layanan pihak ketiga yang memungkinkan JavaScript untuk berkomunikasi dengan sistem lain. Beberapa contoh Web API yang sering digunakan dalam JavaScript adalah:

Fetch API – Untuk mengambil data dari server (misalnya, REST API).
Geolocation API – Untuk mendapatkan lokasi pengguna.
LocalStorage dan SessionStorage – Untuk menyimpan data di browser.
Canvas API – Untuk menggambar grafik atau animasi di browser.
Notification API – Untuk mengirim notifikasi ke pengguna.

Pentingnya Web API:

Memungkinkan kita mengambil data dari server tanpa harus me-reload halaman (seperti data cuaca atau berita terbaru).
Memungkinkan website untuk menyimpan informasi pengguna (misalnya, menyimpan username atau preferensi dalam LocalStorage).
Memungkinkan aplikasi web berinteraksi dengan perangkat pengguna, seperti mendapatkan lokasi atau menggunakan kamera.

b. Cara Menggunakan Fetch API untuk Mengambil Data

Fetch API adalah cara modern untuk mengambil data dari server menggunakan JavaScript. Fetch API menggantikan XMLHttpRequest yang lebih lama dan lebih kompleks.

Contoh: Mengambil Data dari API Publik

<button onclick="ambilData()">Ambil Data</button>
<p id="hasil"></p>

<script>
function ambilData() {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
        .then(response => response.json())  
        .then(data => {
            document.getElementById("hasil").innerHTML = `Judul: ${data.title}`;
        })
        .catch(error => console.error("Terjadi kesalahan:", error));
}
</script>

Penjelasan:

fetch(url) mengambil data dari API.
.then(response => response.json()) mengonversi hasilnya menjadi format JSON.
.then(data => { ... }) digunakan untuk menampilkan data yang diambil ke dalam halaman web.
.catch(error => console.error(...)) menangani kesalahan jika terjadi.

c. Mengirim Data dengan Fetch API

Fetch API juga dapat digunakan untuk mengirim data ke server, misalnya untuk mendaftarkan pengguna atau mengirim komentar ke suatu artikel.

Contoh: Mengirim Data dengan `POST` Request

<input type="text" id="nama" placeholder="Masukkan nama">
<button onclick="kirimData()">Kirim</button>
<p id="respon"></p>

<script>
function kirimData() {
    let nama = document.getElementById("nama").value;
    
    fetch("https://jsonplaceholder.typicode.com/posts", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ nama: nama })
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById("respon").innerHTML = `Data dikirim: ${data.nama}`;
    })
    .catch(error => console.error("Kesalahan:", error));
}
</script>

Penjelasan:

fetch(url, { method: "POST", headers, body }) digunakan untuk mengirim data.
JSON.stringify({ nama: nama }) mengubah data menjadi format JSON sebelum dikirim.
.then(response => response.json()) menangani respons dari server.

d. Menggunakan LocalStorage dan SessionStorage

LocalStorage dan SessionStorage adalah fitur penyimpanan di browser yang memungkinkan JavaScript menyimpan data secara lokal.

LocalStorage – Data tetap tersimpan meskipun halaman di-refresh atau browser ditutup.
SessionStorage – Data hanya bertahan selama sesi aktif (hilang jika tab ditutup).

Contoh: Menyimpan dan Mengambil Data dari LocalStorage

<input type="text" id="userInput" placeholder="Masukkan teks">
<button onclick="simpanData()">Simpan</button>
<button onclick="ambilData()">Ambil</button>
<p id="output"></p>

<script>
function simpanData() {
    let input = document.getElementById("userInput").value;
    localStorage.setItem("data", input);
}

function ambilData() {
    let data = localStorage.getItem("data");
    document.getElementById("output").innerHTML = data ? `Data: ${data}` : "Tidak ada data tersimpan.";
}
</script>

Penjelasan:

localStorage.setItem("data", input) menyimpan data.
localStorage.getItem("data") mengambil data yang tersimpan.

e. Contoh Praktik Menggunakan Web API

Untuk menggabungkan semua konsep di atas, kita akan membuat aplikasi pencarian pengguna GitHub menggunakan Fetch API.

<input type="text" id="username" placeholder="Masukkan username GitHub">
<button onclick="cariUser()">Cari</button>
<div id="hasil"></div>

<script>
function cariUser() {
    let user = document.getElementById("username").value;
    
    fetch(`https://api.github.com/users/${user}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById("hasil").innerHTML = `
                <h2>${data.login}</h2>
                <img src="${data.avatar_url}" width="100">
                <p>Pengikut: ${data.followers}</p>
            `;
        })
        .catch(error => console.error("Terjadi kesalahan:", error));
}
</script>

Cara kerja aplikasi:

Pengguna memasukkan username GitHub.
JavaScript mengambil data pengguna dari API GitHub.
Informasi ditampilkan di halaman (nama, foto profil, jumlah pengikut).

Web API memungkinkan JavaScript menjadi lebih dinamis dan interaktif, serta mampu berkomunikasi dengan layanan eksternal. Selanjutnya, kita akan membahas Bagian 10: JavaScript dan Framework Frontend, yang membahas penggunaan framework modern seperti React dan Vue untuk membangun aplikasi web interaktif.

10. JavaScript dan Framework Frontend

JavaScript menjadi lebih kuat dan efisien ketika digunakan dengan framework frontend. Framework ini mempermudah pengembangan aplikasi web dengan menyediakan struktur yang lebih rapi, reusable components, dan fitur canggih seperti virtual DOM dan state management.

Dalam bagian ini, kita akan membahas:

a. Apa itu Framework Frontend dan Mengapa Digunakan?
b. Perbandingan Beberapa Framework Populer
c. Dasar-Dasar React.js
d. Dasar-Dasar Vue.js
e. Contoh Penggunaan Framework dalam Proyek

a. Apa itu Framework Frontend dan Mengapa Digunakan?

Framework frontend adalah sekumpulan kode dan aturan yang dirancang untuk mempermudah pembuatan antarmuka pengguna (UI) dalam pengembangan web. Dengan adanya framework, developer tidak perlu menulis JavaScript dari nol untuk setiap proyek karena framework sudah menyediakan struktur dan fitur yang memudahkan pengembangan.

Beberapa alasan utama mengapa framework frontend banyak digunakan adalah:

1. Meningkatkan Efisiensi
Framework mengurangi kode berulang dengan menyediakan komponen yang bisa digunakan kembali, sehingga proses pengembangan menjadi lebih cepat dan lebih mudah dikelola.

2. Struktur yang Jelas
Dengan menggunakan framework, kode yang ditulis memiliki struktur yang lebih rapi, membuatnya lebih mudah dipahami dan dipelihara, terutama dalam proyek besar yang dikerjakan oleh banyak developer.

3. Virtual DOM untuk Performa yang Lebih Baik
Beberapa framework modern menggunakan Virtual DOM (Document Object Model) yang memungkinkan perubahan halaman web dilakukan dengan lebih cepat dan efisien.

4. Pengelolaan Data yang Lebih Baik
Framework frontend menyediakan sistem state management yang membantu dalam mengelola data aplikasi, sehingga tidak perlu menangani perubahan data secara manual dalam skala besar.

5. Kompatibilitas dengan Ekosistem Modern
Framework memudahkan integrasi dengan API, backend, dan pustaka lain seperti GraphQL, Firebase, serta berbagai layanan cloud lainnya.

Beberapa framework frontend yang paling populer saat ini adalah React.js, Vue.js, dan Angular.

b. Perbandingan Beberapa Framework Populer

Dalam dunia pengembangan frontend, ada beberapa framework yang banyak digunakan, masing-masing dengan kelebihan dan kekurangan.

React.js adalah salah satu framework (lebih tepatnya library) yang sangat populer dan banyak digunakan oleh perusahaan besar. Keunggulan utama React.js adalah performanya yang tinggi berkat penggunaan Virtual DOM. Dengan Virtual DOM, perubahan dalam aplikasi hanya diterapkan pada bagian yang mengalami perubahan, bukan pada seluruh halaman, sehingga mempercepat rendering. Selain itu, ekosistem React sangat luas dan memiliki komunitas besar yang mendukung pengembangan. Namun, kekurangan React adalah kebutuhan untuk menggunakan pustaka tambahan seperti Redux untuk mengelola state secara lebih kompleks. Selain itu, penggunaan JSX (JavaScript XML) bisa menjadi tantangan bagi pemula karena menggabungkan HTML dan JavaScript dalam satu file.

Vue.js dikenal sebagai framework yang lebih ringan dan lebih mudah dipelajari dibandingkan React dan Angular. Vue menawarkan pendekatan yang lebih sederhana dengan sintaks yang lebih intuitif, sehingga cocok untuk pemula yang ingin mulai menggunakan framework frontend. Selain itu, Vue juga menyediakan fitur seperti reactivity system yang membuat perubahan data langsung tercermin di tampilan tanpa memerlukan banyak konfigurasi. Namun, meskipun Vue memiliki komunitas yang berkembang, jumlah pustaka dan dukungan perusahaan besar masih lebih sedikit dibandingkan React.

Angular adalah framework yang dikembangkan oleh Google dan dirancang untuk membangun aplikasi web skala besar. Angular menawarkan fitur yang sangat lengkap, termasuk dependency injection, two-way data binding, dan TypeScript sebagai bahasa utama. Dengan fitur-fitur ini, Angular sangat cocok untuk proyek enterprise yang kompleks. Namun, karena Angular memiliki banyak fitur bawaan, kurva belajar framework ini lebih tinggi dibandingkan React dan Vue. Developer harus memahami banyak konsep sebelum bisa menggunakannya secara efektif.

Setiap framework memiliki keunggulan dan kelemahan masing-masing, sehingga pemilihan framework yang tepat tergantung pada kebutuhan proyek dan tingkat pengalaman developer yang menggunakannya.

c. Dasar-Dasar React.js

React.js adalah salah satu pustaka JavaScript yang paling populer untuk membangun antarmuka pengguna (UI). Dikembangkan oleh Facebook, React memungkinkan developer membuat aplikasi berbasis komponen yang efisien, dapat digunakan kembali, dan mudah dikelola.

1. Konsep Dasar dalam React.js

React memiliki beberapa konsep utama yang membedakannya dari JavaScript murni dan framework lain, di antaranya:

- Komponen
React berbasis komponen, yang berarti UI dapat dipecah menjadi bagian-bagian kecil yang dapat digunakan kembali. Setiap komponen adalah fungsi JavaScript atau class yang mengembalikan elemen HTML.

Contoh komponen sederhana:

function Salam(props) {
  return <h1>Halo, {props.nama}!</h1>;
}

Komponen ini akan menampilkan teks "Halo, [nama]!" berdasarkan nilai props.nama.

- JSX (JavaScript XML)
React menggunakan JSX, yang memungkinkan kita menulis HTML di dalam JavaScript. JSX membuat kode lebih mudah dibaca dan ditulis dibandingkan dengan menggunakan document.createElement() secara manual.

Contoh JSX:

const elemen = <h1>Selamat Datang di React!</h1>;

JSX ini akan diterjemahkan menjadi JavaScript murni di belakang layar.

- State dan Props

State adalah data internal dalam komponen yang bisa berubah seiring waktu.
Props (Properties) digunakan untuk mengirimkan data dari satu komponen ke komponen lain.

Contoh penggunaan state dengan React Hooks:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Angka saat ini: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

Komponen ini akan menampilkan angka yang bisa bertambah setiap kali tombol ditekan.

2. Keunggulan React.js

React memiliki beberapa keunggulan yang membuatnya sangat populer:

Virtual DOM: Mengoptimalkan perubahan pada UI dengan hanya memperbarui elemen yang berubah, bukan seluruh halaman.
Komponen Reusable: Memungkinkan penggunaan kembali kode yang sama untuk bagian UI yang berbeda.
One-Way Data Binding: Data hanya mengalir satu arah, sehingga lebih mudah untuk menelusuri perubahan dalam aplikasi.
Ekosistem yang Luas: Didukung oleh komunitas besar dan banyak pustaka tambahan seperti React Router untuk navigasi dan Redux untuk manajemen state.

React sangat cocok untuk membangun aplikasi frontend yang interaktif dan scalable, seperti aplikasi media sosial, dashboard, atau e-commerce.

d. Dasar-Dasar Vue.js

Vue.js adalah framework frontend yang sederhana namun kuat, dirancang untuk membuat UI interaktif dengan mudah. Vue lebih ringan dibandingkan React dan Angular, sehingga cocok untuk proyek kecil hingga menengah.

1. Konsep Dasar dalam Vue.js

- Templating dengan Vue
Vue menggunakan sistem templating berbasis HTML yang memungkinkan kita menyisipkan data langsung ke dalam elemen HTML menggunakan ekspresi {{ }}.

Contoh Vue template:

<div id="app">
  <h1>Halo, {{ nama }}</h1>
</div>

Kode ini akan menampilkan "Halo, [nama]" berdasarkan data yang diberikan.

- Direktif Vue
Vue memiliki beberapa direktif, yaitu atribut khusus yang digunakan untuk menambahkan logika ke dalam HTML.

Contoh penggunaan v-if untuk menampilkan elemen secara kondisional:

<p v-if="isLogin">Selamat datang, pengguna!</p>

Jika isLogin bernilai true, teks akan ditampilkan, jika false, teks tidak akan muncul.

- Data Binding dengan Vue
Vue memungkinkan binding data antara elemen HTML dan JavaScript dengan direktif v-model.

Contoh binding input dengan Vue:

<input v-model="nama" placeholder="Masukkan nama">
<p>Nama Anda: {{ nama }}</p>

Saat pengguna mengetik di input, teks pada paragraf akan otomatis diperbarui.

2. Keunggulan Vue.js

Vue memiliki beberapa keunggulan yang membuatnya populer di kalangan developer:

Mudah Dipelajari: Sintaks Vue lebih sederhana dibandingkan React dan Angular, cocok untuk pemula.
Ukuran Ringan: Vue memiliki ukuran file yang lebih kecil, sehingga meningkatkan performa aplikasi.
Two-Way Data Binding: Memudahkan sinkronisasi antara data dan tampilan UI secara otomatis.
Komponen yang Fleksibel: Seperti React, Vue juga berbasis komponen sehingga kode lebih modular.

Vue sangat cocok untuk proyek yang membutuhkan kecepatan pengembangan dan efisiensi kode, seperti dashboard admin, landing page, dan aplikasi interaktif ringan.

e. Contoh Penggunaan Framework dalam Proyek

Untuk memahami bagaimana React.js atau Vue.js digunakan dalam proyek nyata, mari kita lihat contoh sederhana pembuatan To-Do List dengan React dan Vue.

1. To-Do List dengan React.js

import { useState } from "react";

function TodoApp() {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState("");

  const addTask = () => {
    if (input.trim() !== "") {
      setTasks([...tasks, input]);
      setInput("");
    }
  };

  return (
    <div>
      <h2>To-Do List</h2>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={addTask}>Tambah</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
}

Aplikasi ini memungkinkan pengguna menambahkan daftar tugas dan menampilkannya dalam daftar.

2. To-Do List dengan Vue.js

<div id="app">
  <h2>To-Do List</h2>
  <input v-model="input" placeholder="Tambahkan tugas">
  <button @click="addTask">Tambah</button>
  <ul>
    <li v-for="(task, index) in tasks" :key="index">{{ task }}</li>
  </ul>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    input: "",
    tasks: [],
  },
  methods: {
    addTask() {
      if (this.input.trim() !== "") {
        this.tasks.push(this.input);
        this.input = "";
      }
    },
  },
});
</script>

Kode ini menggunakan Vue untuk mengelola daftar tugas dengan binding data v-model dan rendering dinamis menggunakan v-for.

Kesimpulan

Menggunakan framework frontend seperti React.js atau Vue.js dalam pengembangan web dapat mempercepat proses pembuatan UI yang interaktif dan efisien. React menawarkan performa tinggi dengan Virtual DOM dan komunitas luas, sementara Vue lebih ringan dan memiliki sintaks yang lebih sederhana, cocok untuk pemula.

Memahami dasar-dasar React dan Vue akan sangat membantu dalam membangun aplikasi modern. Jika kamu tertarik dengan pengembangan frontend, mencoba salah satu framework ini adalah langkah yang tepat untuk meningkatkan keterampilan dalam JavaScript.

FAQ (Frequently Asked Questions) tentang React.js dan Vue.js

1. Apa perbedaan utama antara React.js dan Vue.js?

React.js adalah pustaka JavaScript yang berfokus pada pembuatan antarmuka pengguna berbasis komponen dengan pendekatan Virtual DOM. Vue.js, di sisi lain, adalah framework yang lebih lengkap dengan fitur bawaan seperti templating, directive, dan state management yang lebih sederhana.

2. Mana yang lebih mudah dipelajari, React atau Vue?

Vue umumnya dianggap lebih mudah bagi pemula karena sintaksnya lebih intuitif dan memiliki dokumentasi yang sangat jelas. React memiliki kurva belajar yang sedikit lebih tinggi karena konsep seperti JSX dan state management yang memerlukan pemahaman tambahan.

3. Apakah React dan Vue bisa digunakan bersama?

Secara teknis, bisa, tetapi tidak disarankan karena keduanya memiliki pendekatan yang berbeda dalam mengelola state dan UI. Sebaiknya pilih salah satu framework sesuai dengan kebutuhan proyek.

4. Apakah saya harus belajar JavaScript sebelum mempelajari React atau Vue?

Ya, memahami JavaScript ES6 (seperti arrow function, destructuring, dan async/await) akan sangat membantu dalam mempelajari React dan Vue dengan lebih mudah.

5. Manakah yang lebih baik untuk proyek besar, React atau Vue?

Keduanya bisa digunakan untuk proyek besar, tetapi React lebih sering digunakan di perusahaan besar karena ekosistemnya yang luas dan dukungan dari Facebook. Vue lebih populer di startup dan proyek kecil-menengah karena kemudahan penggunaannya.

6. Apakah React lebih cepat dari Vue?

Performa React dan Vue hampir setara karena keduanya menggunakan Virtual DOM. Namun, dalam beberapa kasus, React bisa lebih cepat dalam pengelolaan perubahan data yang kompleks, sementara Vue lebih ringan untuk proyek kecil hingga menengah.

7. Bagaimana cara mengelola state dalam React dan Vue?

Di React, state dikelola menggunakan useState, useReducer, atau library seperti Redux dan Zustand.
Di Vue, state dikelola menggunakan data dalam Vue instance atau Vuex/Pinia untuk state global.

8. Apakah React dan Vue bisa digunakan untuk membangun aplikasi mobile?

Ya, React memiliki React Native untuk membuat aplikasi mobile, sedangkan Vue bisa digunakan dengan Ionic Vue atau Quasar Framework untuk membuat aplikasi berbasis mobile.

9. Framework mana yang lebih baik untuk SEO?

Vue dan React sama-sama membutuhkan bantuan Server-Side Rendering (SSR) agar lebih SEO-friendly. React memiliki Next.js, sedangkan Vue memiliki Nuxt.js untuk optimasi SEO yang lebih baik.

10. Apakah bisa membuat proyek full-stack dengan React atau Vue?

Ya, React dan Vue sering digunakan dalam pengembangan full-stack dengan backend seperti Node.js (Express.js), Django, Laravel, atau menggunakan konsep JAMstack dengan API sebagai backend.

Baca Juga:

Low-Code vs. No-Code: Mana yang Lebih Cocok untuk Pemula? (Analisis Mendalam)

Belajar JavaScript dalam Sehari: Mitos atau Fakta?

a. Pengertian JavaScript

b. Peran JavaScript dalam Pengembangan Web

c. Kelebihan JavaScript Dibandingkan Bahasa Lain

d. Sejarah Perkembangan JavaScript

e. Contoh Kode JavaScript Sederhana

Bagian Ini kita Bisa Memahami:

a. Variabel dan Tipe Data

b. Operator dan Ekspresi

c. Struktur Kontrol (If-Else & Switch Case)

d. Perulangan (Looping)

e. Fungsi dalam JavaScript

Melangkah ke Langkah Selanjutnya

3. Memulai dengan DOM dan Event Handling

a. Apa Itu DOM?

b. Cara Mengakses Elemen dalam DOM

c. Mengubah Konten dan Atribut Elemen

d. Event Handling (Menangani Interaksi Pengguna)

e. Contoh Proyek Sederhana: Kalkulator Sederhana

Langkah Berikutnya

4. Menggunakan JavaScript untuk Mengambil Data dari API

a. Apa Itu API dan Bagaimana Cara Kerjanya?

b. Menggunakan fetch() untuk Mengambil Data API

c. Contoh Implementasi API Publik

1️⃣ HTML: Buat Struktur Halaman

d. Penanganan Kesalahan API

e. Membuat Aplikasi Cuaca Sederhana dengan API

1️⃣ Dapatkan API Key

2️⃣ Buat HTML untuk Aplikasi Cuaca

Langkah Berikutnya

5. Menggunakan Async/Await dalam JavaScript

a. Apa Itu Async/Await?

b. Cara Mengubah Fetch ke Async/Await

1️⃣ Menggunakan .then() (Kode Lama)

2️⃣ Menggunakan Async/Await (Kode Baru yang Lebih Bersih)

c. Implementasi Async/Await dalam Aplikasi Cuaca

1️⃣ Buat HTML untuk Aplikasi Cuaca

d. Menjalankan Beberapa await Secara Bersamaan

Contoh: Ambil Data dari Dua API Sekaligus

Langkah Berikutnya

6. Menggunakan Local Storage di JavaScript

a. Apa Itu Local Storage?

b. Cara Menggunakan Local Storage di JavaScript

Menyimpan Data ke Local Storage

Mengambil Data dari Local Storage

Menghapus Data dari Local Storage

Menghapus Semua Data di Local Storage

c. Menyimpan dan Mengambil Objek di Local Storage

Menyimpan Objek ke Local Storage

Mengambil Objek dari Local Storage

d. Perbedaan Local Storage, Session Storage, dan Cookies

e. Contoh Implementasi Local Storage dalam To-Do List

Membuat HTML untuk To-Do List

7. Mengenal dan Menggunakan JavaScript ES6+

a. Apa Itu ES6+ dan Mengapa Penting?

b. Deklarasi Variabel: let dan const

Menggunakan let

Menggunakan const

c. Arrow Function: Cara Baru Menulis Fungsi

Sebelum ES6 (menggunakan function biasa)

Dengan ES6 (menggunakan arrow function)

d. Template Literal: Menggabungkan String dengan Lebih Mudah

e. Destructuring: Mengambil Data dari Array dan Objek dengan Mudah

Destructuring Array

Destructuring Objek

f. Spread dan Rest Operator (...)

g. Async/Await: Menangani Asynchronous dengan Lebih Mudah

Di Bagian Ini Ada Kita Bisa Ambil Kesimpulan Sebagai Berikut:

8. Menggunakan JavaScript dalam DOM Manipulation

a. Apa itu DOM dan Mengapa Penting?

b. Cara Mengakses Elemen DOM dengan JavaScript

Contoh: Mengakses Elemen dengan getElementById()

c. Memodifikasi Elemen dengan JavaScript

1. Mengubah Teks Elemen

2. Mengubah Gaya Elemen

3. Mengubah Atribut Elemen

d. Menangani Event dalam DOM

Contoh: Menangani Event onclick

e. Menambahkan dan Menghapus Elemen Secara Dinamis

Contoh: Menambahkan Elemen Baru

b. Menggunakan `fetch()` untuk Mengambil Data API

1️⃣ Menggunakan `.then()` (Kode Lama)

d. Menjalankan Beberapa `await` Secara Bersamaan

b. Deklarasi Variabel: `let` dan `const`

Menggunakan `let`

Menggunakan `const`

f. Spread dan Rest Operator (`...`)

Contoh: Mengakses Elemen dengan `getElementById()`

Contoh: Menangani Event `onclick`

Contoh: Mengirim Data dengan `POST` Request