Latihan

Pilihan Berganda

1. Manakah contoh deklarasi variabel JavaScript yang benar?

a. var = 10; b. let umur: 20; c. const nilai = 80; d. variable harga = 500; e. let? total = 50;

---

2. Perbedaan utama antara let dan var adalah…

a. let tidak bisa berubah, var bisa b. let memiliki block scope, var memiliki function scope c. var hanya untuk angka d. let lebih cepat e. Tidak ada perbedaan sama sekali

---

3. Fungsi document.querySelector("#id") akan mengembalikan…

a. Semua elemen yang memiliki class sama b. Hanya elemen pertama berdasarkan selektor c. HTMLCollection dari elemen d. Array semua elemen yang cocok e. Tag HTML dalam bentuk string

---

4. Jika HTML berisi <h1 id="title">Welcome</h1>, cara mengambilnya adalah…

a. getElementByTag("title") b. document.find("title") c. document.getElementById("title") d. document.element("title") e. title.getElement()

---

5. Hasil dari document.getElementsByTagName("li") adalah…

a. Satu elemen <li> pertama b. Array asli berisi seluruh <li> c. HTMLCollection berisi seluruh <li> d. Node tunggal e. String daftar list

---

6. Perbedaan innerHTML dan innerText adalah…

a. innerHTML hanya bekerja untuk heading b. innerText bisa memproses tag HTML c. innerHTML bisa memproses tag HTML d. innerText menghapus seluruh elemen e. innerHTML hanya untuk angka

---

7. Apa yang terjadi jika menjalankan kode berikut?

document.getElementById("msg").innerText = "Selesai";

a. Menghapus elemen b. Mengubah isi teks menjadi “Selesai” c. Memindahkan ID ke elemen lain d. Tidak terjadi apa-apa e. Error

---

8. Manakah sintaks yang benar untuk mengubah teks elemen class "item" pertama?

a. getElementsByClassName("item").text = "OK"; b. document.getElementsByClass("item")[1]; c. document.getElementsByClassName("item")[0].innerText = "OK"; d. document.query("item")[1].textContent = "OK"; e. item.getElements("class")[0] = "OK";

---

9. Manakah contoh assignment variabel yang benar?

a. let = tinggi 170; b. const umur == 20; c. tinggi: let 170; d. let tinggi = 170; e. declare umur = 15;

---

10. Apa yang terjadi jika kita mengubah nilai variabel const?

a. Nilai berubah tanpa error b. Browser crash c. Error karena const tidak boleh diubah d. Variabel menjadi null e. JavaScript mengabaikan perubahan

---

11. Metode untuk mengambil elemen berdasarkan class adalah…

a. getElementClass() b. getElementsByClassName() c. classSelector() d. getClass() e. getElementsById()

---

12. Untuk mengambil teks sebuah elemen, digunakan…

a. getText() b. textOnly c. innerText d. textInside e. innerValue

---

13. Manakah nama variabel yang salah?

a. let namaSiswa = "A"; b. let _hasil = 90; c. let 1stValue = 10; d. let hasilAkhir = 80; e. let total_harga = 20000;

---

14. Apa hasil dari operasi berikut?

let x = 4;
x = x + 6;

a. 4 b. 6 c. 10 d. 46 e. error

---

15. Apa hasil kode berikut?

let a = "7";
let b = 3;
let c = a + b;

a. 10 b. "10" c. "73" d. 73 e. error

---

16. Hasil dari:

let x = 9;
x--;

a. 8 b. 9 c. 10 d. NaN e. error

---

17. Hasil dari:

let x = 3 * 3 + 2;

a. 11 b. 15 c. 7 d. 5 e. error

---

18. Hasil dari:

let x = "Hello";
x = x + " JS";

a. "HelloJS" b. "Hello JS" c. "JSHello" d. HelloJS e. error

---

19. Apa nilai berikut?

let x = "5" * 2;

a. "52" b. 10 c. "10" d. NaN e. undefined

---

20. Apa hasil berikut?

<p id="info">Test</p>
<script>
document.getElementById("info").innerText += "123";
</script>

a. Test b. 123 c. Test123 d. Test 123 e. error

---

21. Apa yang tampil setelah tombol diklik?

<h2 id="judul">Menu</h2>
<button onclick="document.getElementById('judul').innerText = 'Home';">Klik</button>

a. Menu b. judul c. Home d. MenuHome e. error

---

22. Apa hasil berikut?

<div id="angka">8</div>
<script>
let x = document.getElementById("angka").innerText;
x++;
</script>

a. 8 b. 9 c. "8" d. "9" e. NaN

---

Essay

1. document.getElementById()

Jelaskan bagaimana cara kerja document.getElementById() dan beri contoh ketika metode ini digunakan untuk mengubah isi elemen.

---

2. Perbedaan innerHTML dan innerText

Jelaskan perbedaannya dan berikan contoh situasi ketika kita harus memilih salah satunya.

---

3. Mengambil banyak elemen

Jelaskan bagaimana getElementsByClassName() mengambil banyak elemen sekaligus, dan bagaimana cara mengakses salah satu elemennya.

---

4. Event onclick

Jelaskan bagaimana onclick bekerja, dan jelaskan alur dari saat tombol diklik hingga perubahan terjadi pada halaman web.

---

5. Mini Project Singkat

Buat kode HTML + JavaScript kecil: tombol yang ketika diklik akan menambahkan teks “DONE” ke semua elemen <p> yang memiliki class "task".