diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
index a38f01645..cf3ff5476 100644
--- a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
+++ b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
@@ -1,15 +1,15 @@
-Answer: **1 and 3**.
+Jawabannya: **1 dan 3**.
-Both commands result in adding the `text` "as text" into the `elem`.
+Kedua perintah tersebut mengakibatkan penambahan `text` 'sebagai teks' ke dalam `elem`
-Here's an example:
+Berikut adalah contohnya:
```html run height=80
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
<script>
- let text = '<b>text</b>';
+ let text = "<b>text</b>";
elem1.append(document.createTextNode(text));
elem2.innerHTML = text;
diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md
index 40c75dff3..86ef7cd5a 100644
--- a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md
+++ b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md
@@ -1,12 +1,12 @@
-importance: 5
+Tingkat kepentingan: 5
---
# createTextNode vs innerHTML vs textContent
-We have an empty DOM element `elem` and a string `text`.
+Kita memiliki elemen DOM kosong `elem` dan sebuah string `text`.
-Which of these 3 commands will do exactly the same?
+Di antara 3 perintah ini, mana yang akan melakukan hal yang sama?
1. `elem.append(document.createTextNode(text))`
2. `elem.innerHTML = text`
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
index 1414e90c1..8cb65a41f 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
@@ -1,16 +1,18 @@
-First, let's make HTML/CSS.
+Pertama, mari membuat HTML/CSS.
-Each component of the time would look great in its own `<span>`:
+Setiap komponen waktu akan terlihat bagus dalam elemen `<span>` sendiri:
```html
<div id="clock">
- <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
+ <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec"
+ >ss</span
+ >
</div>
```
-Also we'll need CSS to color them.
+Kita juga akan membutuhkan CSS untuk memberi warna pada mereka.
-The `update` function will refresh the clock, to be called by `setInterval` every second:
+Fungsi `update` akan menyegarkan jam, dipanggil oleh `setInterval` setiap detik:
```js
function update() {
@@ -32,15 +34,17 @@ function update() {
}
```
-In the line `(*)` we every time check the current date. The calls to `setInterval` are not reliable: they may happen with delays.
+Pada baris `(*)`, kita memeriksa tanggal saat ini setiap kali. Panggilan ke `setInterval` tidak dapat diandalkan: mereka mungkin terjadi dengan penundaan.
-The clock-managing functions:
+Fungsi pengelolaan jam:
```js
let timerId;
-function clockStart() { // run the clock
- if (!timerId) { // only set a new interval if the clock is not running
+function clockStart() {
+ // menjalankan jam
+ if (!timerId) {
+ // hanya atur interval baru jika jam tidak berjalan
timerId = setInterval(update, 1000);
}
update(); // (*)
@@ -52,6 +56,6 @@ function clockStop() {
}
```
-Please note that the call to `update()` is not only scheduled in `clockStart()`, but immediately run in the line `(*)`. Otherwise the visitor would have to wait till the first execution of `setInterval`. And the clock would be empty till then.
+Harap dicatat bahwa panggilan ke `update()` tidak hanya dijadwalkan dalam `clockStart()`, tetapi segera dijalankan pada baris `(*)`. Jika tidak, pengunjung harus menunggu sampai eksekusi pertama `setInterval`. Dan jam akan kosong sampai saat itu.
-Also it is important to set a new interval in `clockStart()` only when the clock is not running. Otherways clicking the start button several times would set multiple concurrent intervals. Even worse - we would only keep the `timerID` of the last interval, losing references to all others. Then we wouldn't be able to stop the clock ever again! Note that we need to clear the `timerID` when the clock is stopped in the line `(**)`, so that it can be started again by running `clockStart()`.
+Juga penting untuk mengatur interval baru dalam `clockStart()` hanya ketika jam tidak berjalan. Jika tidak, mengklik tombol start beberapa kali akan mengatur beberapa interval yang berjalan bersamaan. Lebih buruk lagi - kita hanya akan menyimpan `timerID` dari interval terakhir, kehilangan referensi ke semua yang lain. Maka kita tidak akan bisa menghentikan jam lagi! Perlu dicatat bahwa kita perlu membersihkan `timerID` ketika jam berhenti pada baris `(**)`, sehingga itu dapat dimulai kembali dengan menjalankan `clockStart()`.
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
index de8ec9aee..85bdd8d27 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
@@ -1,69 +1,69 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
<html>
-<head>
- <style>
- .hour {
- color: red
- }
-
- .min {
- color: green
- }
-
- .sec {
- color: blue
- }
- </style>
-</head>
+ <head>
+ <style>
+ .hour {
+ color: red;
+ }
-<body>
+ .min {
+ color: green;
+ }
- <div id="clock">
- <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
- </div>
+ .sec {
+ color: blue;
+ }
+ </style>
+ </head>
- <script>
- let timerId;
+ <body>
+ <div id="clock">
+ <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec"
+ >ss</span
+ >
+ </div>
- function update() {
- let clock = document.getElementById('clock');
- let date = new Date();
+ <script>
+ let timerId;
- let hours = date.getHours();
- if (hours < 10) hours = '0' + hours;
- clock.children[0].innerHTML = hours;
+ function update() {
+ let clock = document.getElementById("clock");
+ let date = new Date();
- let minutes = date.getMinutes();
- if (minutes < 10) minutes = '0' + minutes;
- clock.children[1].innerHTML = minutes;
+ let hours = date.getHours();
+ if (hours < 10) hours = "0" + hours;
+ clock.children[0].innerHTML = hours;
- let seconds = date.getSeconds();
- if (seconds < 10) seconds = '0' + seconds;
- clock.children[2].innerHTML = seconds;
- }
+ let minutes = date.getMinutes();
+ if (minutes < 10) minutes = "0" + minutes;
+ clock.children[1].innerHTML = minutes;
- function clockStart() {
- // set a new interval only if the clock is stopped
- // otherwise we would rewrite the timerID reference to the running interval and wouldn't be able to stop the clock ever again
- if (!timerId) {
- timerId = setInterval(update, 1000);
+ let seconds = date.getSeconds();
+ if (seconds < 10) seconds = "0" + seconds;
+ clock.children[2].innerHTML = seconds;
}
- update(); // <-- start right now, don't wait 1 second till the first setInterval works
- }
- function clockStop() {
- clearInterval(timerId);
- timerId = null; // <-- clear timerID to indicate that the clock has been stopped, so that it is possible to start it again in clockStart()
- }
+ function clockStart() {
+ // atur interval baru hanya jika jam berhenti
+ // jika tidak, kita akan menulis kembali referensi timerID ke interval yang berjalan dan tidak akan dapat menghentikan jam lagi
+ if (!timerId) {
+ timerId = setInterval(update, 1000);
+ }
+ update(); // <-- mulai sekarang juga, jangan tunggu 1 detik sampai setInterval pertama berfungsi
+ }
- clockStart();
- </script>
+ function clockStop() {
+ clearInterval(timerId);
+ timerId = null; // <-- hapus timerID untuk menunjukkan bahwa jam telah dihentikan, sehingga memungkinkan untuk memulainya kembali di clockStart()
+ }
- <!-- click on this button calls clockStart() -->
- <input type="button" onclick="clockStart()" value="Start">
+ clockStart();
+ </script>
- <!-- click on this button calls clockStop() -->
- <input type="button" onclick="clockStop()" value="Stop">
+ <!-- tekan tombol ini untuk memanggil clockStart() -->
+ <input type="button" onclick="clockStart()" value="Start" />
-</body>
+ <!-- tekan tombol ini untuk memanggil clockStop() -->
+ <input type="button" onclick="clockStop()" value="Stop" />
+ </body>
</html>
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html b/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html
index ecf5df99a..7e69bbc84 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html
@@ -1,12 +1,10 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
<html>
-<body>
+ <body>
+ <!-- tekan tombol ini untuk memanggil clockStart() -->
+ <input type="button" onclick="clockStart()" value="Start" />
- <!-- click on this button calls clockStart() -->
- <input type="button" onclick="clockStart()" value="Start">
-
- <!-- click on this button calls clockStop() -->
- <input type="button" onclick="clockStop()" value="Stop">
-
-</body>
+ <!-- tekan tombol ini untuk memanggil clockStop() -->
+ <input type="button" onclick="clockStop()" value="Stop" />
+ </body>
</html>
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
index a1b53e337..163f36cc7 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
@@ -1,11 +1,11 @@
-importance: 4
+Tingkat kepentingan: 4
---
-# Colored clock with setInterval
+# Jam Berwarna dengan setInterval
-Create a colored clock like here:
+Buatlah jam berwarna seperti di sini:
[iframe src="solution" height=60]
-Use HTML/CSS for the styling, JavaScript only updates time in elements.
+Gunakan HTML/CSS untuk styling, JavaScript hanya untuk memperbarui waktu pada elemen-elemen.
diff --git a/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md b/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md
index 4e77fb5cb..799f77314 100644
--- a/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md
+++ b/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md
@@ -1,8 +1,7 @@
+Ketika kita perlu menyisipkan sebagian HTML di suatu tempat, `insertAdjacentHTML` adalah pilihan terbaik.
-When we need to insert a piece of HTML somewhere, `insertAdjacentHTML` is the best fit.
-
-The solution:
+Solusi:
```js
-one.insertAdjacentHTML('afterend', '<li>2</li><li>3</li>');
+one.insertAdjacentHTML("afterend", "<li>2</li><li>3</li>");
```
diff --git a/2-ui/1-document/07-modifying-document/11-append-to-list/task.md b/2-ui/1-document/07-modifying-document/11-append-to-list/task.md
index 543cd3e46..0684f3831 100644
--- a/2-ui/1-document/07-modifying-document/11-append-to-list/task.md
+++ b/2-ui/1-document/07-modifying-document/11-append-to-list/task.md
@@ -1,14 +1,15 @@
-importance: 5
+Tingkat kepentingan: 5
---
-# Insert the HTML in the list
+# Menyisipkan HTML ke dalam daftar
-Write the code to insert `<li>2</li><li>3</li>` between two `<li>` here:
+Tulis kode untuk menyisipkan `<li>2</li><li>3</li>` antara dua `<li>` di sini:
```html
<ul id="ul">
<li id="one">1</li>
+ <!-- Menyisipkan `<li>2</li><li>3</li>` di sini -->
<li id="two">4</li>
</ul>
```
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/solution.md b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
index 49243e8e3..e05669d8a 100644
--- a/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
@@ -1,18 +1,20 @@
-The solution is short, yet may look a bit tricky, so here I provide it with extensive comments:
+Solusinya singkat, namun mungkin terlihat sedikit rumit, jadi di sini saya berikan dengan komentar yang ekstensif:
```js
let sortedRows = Array.from(table.tBodies[0].rows) // 1
- .sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));
+ .sort((rowA, rowB) =>
+ rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML)
+ );
table.tBodies[0].append(...sortedRows); // (3)
```
-The step-by-step algorthm:
+Algoritma langkah-demi-langkah:
-1. Get all `<tr>`, from `<tbody>`.
-2. Then sort them comparing by the content of the first `<td>` (the name field).
-3. Now insert nodes in the right order by `.append(...sortedRows)`.
+1. Dapatkan semua `<tr>`, dari `<tbody>`.
+2. Kemudian urutkan mereka dengan membandingkan berdasarkan konten `<td>` pertama (bidang nama).
+3. Sekarang masukkan node dengan urutan yang benar dengan `.append(...sortedRows)`.
-We don't have to remove row elements, just "re-insert", they leave the old place automatically.
+Kita tidak perlu menghapus elemen baris, cukup "memasukkan kembali", karena mereka akan meninggalkan tempat lama secara otomatis.
-P.S. In our case, there's an explicit `<tbody>` in the table, but even if HTML table doesn't have `<tbody>`, the DOM structure always has it.
+P.S. Dalam kasus kita, ada <tbody> yang eksplisit dalam tabel, tetapi bahkan jika tabel HTML tidak memiliki <tbody>, struktur DOM selalu memiliki elemen tersebut.
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html b/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html
index 40692031a..9e436e8cf 100644
--- a/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html
@@ -1,30 +1,41 @@
<!DOCTYPE html>
<table id="table">
-<thead>
- <tr>
- <th>Name</th><th>Surname</th><th>Age</th>
- </tr>
-</thead>
-<tbody>
- <tr>
- <td>John</td><td>Smith</td><td>10</td>
- </tr>
- <tr>
- <td>Pete</td><td>Brown</td><td>15</td>
- </tr>
- <tr>
- <td>Ann</td><td>Lee</td><td>5</td>
- </tr>
- <tr>
- <td>...</td><td>...</td><td>...</td>
- </tr>
-</tbody>
+ <thead>
+ <tr>
+ <th>Nama</th>
+ <th>Nama Belakang</th>
+ <th>Umur</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>John</td>
+ <td>Smith</td>
+ <td>10</td>
+ </tr>
+ <tr>
+ <td>Pete</td>
+ <td>Brown</td>
+ <td>15</td>
+ </tr>
+ <tr>
+ <td>Ann</td>
+ <td>Lee</td>
+ <td>5</td>
+ </tr>
+ <tr>
+ <td>...</td>
+ <td>...</td>
+ <td>...</td>
+ </tr>
+ </tbody>
</table>
<script>
- let sortedRows = Array.from(table.tBodies[0].rows)
- .sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));
+ let sortedRows = Array.from(table.tBodies[0].rows).sort((rowA, rowB) =>
+ rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML)
+ );
table.tBodies[0].append(...sortedRows);
</script>
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html b/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html
index 9071c88ee..57875ce34 100644
--- a/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html
@@ -1,27 +1,37 @@
<!DOCTYPE html>
<table id="table">
-<thead>
- <tr>
- <th>Name</th><th>Surname</th><th>Age</th>
- </tr>
-</thead>
-<tbody>
- <tr>
- <td>John</td><td>Smith</td><td>10</td>
- </tr>
- <tr>
- <td>Pete</td><td>Brown</td><td>15</td>
- </tr>
- <tr>
- <td>Ann</td><td>Lee</td><td>5</td>
- </tr>
- <tr>
- <td>...</td><td>...</td><td>...</td>
- </tr>
-</tbody>
+ <thead>
+ <tr>
+ <th>Nama</th>
+ <th>Nama Belakang</th>
+ <th>Umur</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>John</td>
+ <td>Smith</td>
+ <td>10</td>
+ </tr>
+ <tr>
+ <td>Pete</td>
+ <td>Brown</td>
+ <td>15</td>
+ </tr>
+ <tr>
+ <td>Ann</td>
+ <td>Lee</td>
+ <td>5</td>
+ </tr>
+ <tr>
+ <td>...</td>
+ <td>...</td>
+ <td>...</td>
+ </tr>
+ </tbody>
</table>
<script>
- // ... your code ...
+ // ... kode anda ...
</script>
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/task.md b/2-ui/1-document/07-modifying-document/12-sort-table/task.md
index 7cdba35bc..291d31a8a 100644
--- a/2-ui/1-document/07-modifying-document/12-sort-table/task.md
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/task.md
@@ -1,35 +1,45 @@
-importance: 5
+Tingkat kepentingan: 5
---
-# Sort the table
+# Mengurutkan Tabel
-There's a table:
+Berikut adalah sebuah tabel:
```html run
<table>
-<thead>
- <tr>
- <th>Name</th><th>Surname</th><th>Age</th>
- </tr>
-</thead>
-<tbody>
- <tr>
- <td>John</td><td>Smith</td><td>10</td>
- </tr>
- <tr>
- <td>Pete</td><td>Brown</td><td>15</td>
- </tr>
- <tr>
- <td>Ann</td><td>Lee</td><td>5</td>
- </tr>
- <tr>
- <td>...</td><td>...</td><td>...</td>
- </tr>
-</tbody>
+ <thead>
+ <tr>
+ <th>Nama</th>
+ <th>Nama Belakang</th>
+ <th>Usia</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>John</td>
+ <td>Smith</td>
+ <td>10</td>
+ </tr>
+ <tr>
+ <td>Pete</td>
+ <td>Brown</td>
+ <td>15</td>
+ </tr>
+ <tr>
+ <td>Ann</td>
+ <td>Lee</td>
+ <td>5</td>
+ </tr>
+ <tr>
+ <td>...</td>
+ <td>...</td>
+ <td>...</td>
+ </tr>
+ </tbody>
</table>
```
-There may be more rows in it.
+Mungkin ada lebih banyak baris di dalamnya.
-Write the code to sort it by the `"name"` column.
+Tulislah kode untuk mengurutkannya berdasarkan kolom `"Nama"`.
diff --git a/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md b/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md
index 62c3386d8..72cc80aef 100644
--- a/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md
+++ b/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md
@@ -1,19 +1,18 @@
-
-First, let's see how *not* to do it:
+Pertama, mari kita lihat cara yang _tidak benar_ untuk melakukannya:
```js
function clear(elem) {
- for (let i=0; i < elem.childNodes.length; i++) {
- elem.childNodes[i].remove();
+ for (let i = 0; i < elem.childNodes.length; i++) {
+ elem.childNodes[i].remove();
}
}
```
-That won't work, because the call to `remove()` shifts the collection `elem.childNodes`, so elements start from the index `0` every time. But `i` increases, and some elements will be skipped.
+Itu tidak akan berfungsi, karena panggilan ke `remove()` menggeser koleksi `elem.childNodes`, sehingga elemen dimulai dari indexs `0` setiap kali. Tetapi `i` terus bertambah, dan beberapa elemen akan terlewat.
-The `for..of` loop also does the same.
+Loop `for..of` juga melakukan hal yang sama.
-The right variant could be:
+Variasi yang benar bisa menjadi:
```js
function clear(elem) {
@@ -23,10 +22,10 @@ function clear(elem) {
}
```
-And also there's a simpler way to do the same:
+Dan juga ada cara yang lebih sederhana untuk melakukan hal yang sama:
```js
function clear(elem) {
- elem.innerHTML = '';
+ elem.innerHTML = "";
}
```
diff --git a/2-ui/1-document/07-modifying-document/4-clear-elem/task.md b/2-ui/1-document/07-modifying-document/4-clear-elem/task.md
index 938d53470..66ebd98a2 100644
--- a/2-ui/1-document/07-modifying-document/4-clear-elem/task.md
+++ b/2-ui/1-document/07-modifying-document/4-clear-elem/task.md
@@ -1,10 +1,10 @@
-importance: 5
+Tingkat kepentingan: 5
---
-# Clear the element
+# Membersihkan elemen
-Create a function `clear(elem)` that removes everything from the element.
+Buatlah fungsi `clear(elem)` yang menghapus semua konten dari elemen tersebut.
```html run height=60
<ol id="elem">
@@ -13,8 +13,10 @@ Create a function `clear(elem)` that removes everything from the element.
</ol>
<script>
- function clear(elem) { /* your code */ }
+ function clear(elem) {
+ /* kode anda */
+ }
- clear(elem); // clears the list
+ clear(elem); // menghapus isi daftar
</script>
```
diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md
index 3d1f6698f..b0006a83f 100644
--- a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md
+++ b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md
@@ -1,9 +1,9 @@
-The HTML in the task is incorrect. That's the reason of the odd thing.
+HTML pada tugas tersebut tidak benar. Itulah sebabnya hal yang aneh terjadi.
-The browser has to fix it automatically. But there may be no text inside the `<table>`: according to the spec only table-specific tags are allowed. So the browser shows `"aaa"` *before* the `<table>`.
+_Browser_ harus memperbaikinya secara otomatis. Tetapi mungkin tidak ada teks di dalam `<table>`: sesuai dengan spesifikasi, hanya tag khusus tabel yang diizinkan. Jadi, _Browser_ menampilkan `"aaa"` sebelum `<table>`.
-Now it's obvious that when we remove the table, it remains.
+Sekarang jelas bahwa ketika kita menghapus tabel, teks tersebut tetap ada.
-The question can be easily answered by exploring the DOM using the browser tools. You'll see `"aaa"` before the `<table>`.
+Pertanyaan tersebut dapat dengan mudah dijawab dengan menjelajahi DOM menggunakan alat _Browser_. Anda akan melihat `"aaa"` sebelum `<table>`.
-The HTML standard specifies in detail how to process bad HTML, and such behavior of the browser is correct.
+Standar HTML menentukan secara rinci bagaimana cara memproses HTML yang tidak benar, dan perilaku browser seperti itu adalah benar.
diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
index f87074dba..046cc57b2 100644
--- a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
+++ b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
@@ -1,14 +1,14 @@
-importance: 1
+Tingkat kepentingan: 1
---
-# Why does "aaa" remain?
+# Mengapa "aaa" masih ada?
-In the example below, the call `table.remove()` removes the table from the document.
+Pada contoh di bawah, panggilan `table.remove()` menghapus tabel dari dokumen.
-But if you run it, you can see that the text `"aaa"` is still visible.
+Tetapi jika anda menjalankannya, anda dapat melihat bahwa teks `"aaa"` masih terlihat.
-Why does that happen?
+Mengapa hal itu terjadi?
```html height=100 run
<table id="table">
@@ -19,9 +19,9 @@ Why does that happen?
</table>
<script>
- alert(table); // the table, as it should be
+ alert(table); // tabel, sebagaimana mestinya
table.remove();
- // why there's still aaa in the document?
+ // mengapa masih ada "aaa" di dokumen?
</script>
```
diff --git a/2-ui/1-document/07-modifying-document/6-create-list/solution.md b/2-ui/1-document/07-modifying-document/6-create-list/solution.md
index 1669be18f..17fd06fcb 100644
--- a/2-ui/1-document/07-modifying-document/6-create-list/solution.md
+++ b/2-ui/1-document/07-modifying-document/6-create-list/solution.md
@@ -1 +1 @@
-Please note the usage of `textContent` to assign the `<li>` content.
+Harap perhatikan penggunaan `textContent` untuk menetapkan konten `<li>`.
diff --git a/2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html b/2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html
index 071645e8d..39b195c5c 100755
--- a/2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html
@@ -1,24 +1,23 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
<html>
-<body>
- <h1>Create a list</h1>
+ <body>
+ <h1>Membuat daftar</h1>
- <script>
- let ul = document.createElement('ul');
- document.body.append(ul);
+ <script>
+ let ul = document.createElement("ul");
+ document.body.append(ul);
- while (true) {
- let data = prompt("Enter the text for the list item", "");
+ while (true) {
+ let data = prompt("Masukkan teks untuk item daftar.", "");
- if (!data) {
- break;
- }
-
- let li = document.createElement('li');
- li.textContent = data;
- ul.append(li);
- }
- </script>
+ if (!data) {
+ break;
+ }
-</body>
+ let li = document.createElement("li");
+ li.textContent = data;
+ ul.append(li);
+ }
+ </script>
+ </body>
</html>
diff --git a/2-ui/1-document/07-modifying-document/6-create-list/task.md b/2-ui/1-document/07-modifying-document/6-create-list/task.md
index a57e7e2d9..914734928 100644
--- a/2-ui/1-document/07-modifying-document/6-create-list/task.md
+++ b/2-ui/1-document/07-modifying-document/6-create-list/task.md
@@ -1,19 +1,19 @@
-importance: 4
+Tingkat kepentingan: 4
---
-# Create a list
+# Membuat daftar
-Write an interface to create a list from user input.
+Tuliskan antarmuka untuk membuat daftar dari _input_ pengguna.
-For every list item:
+Untuk setiap item daftar:
-1. Ask a user about its content using `prompt`.
-2. Create the `<li>` with it and add it to `<ul>`.
-3. Continue until the user cancels the input (by pressing `key:Esc` or via an empty entry).
+1. Tanyakan kepada pengguna mengenai isinya menggunakan `prompt`.
+2. Buat `<li>` dengan isian tersebut dan tambahkan ke dalam `<ul>`.
+3. Lanjutkan hingga pengguna membatalkan input (dengan menekan `key:Esc` atau melalui entri kosong).
-All elements should be created dynamically.
+Semua elemen harus dibuat secara dinamis.
-If a user types HTML-tags, they should be treated like a text.
+Jika pengguna mengetikkan tag HTML, tag tersebut harus diperlakukan sebagai teks.
[demo src="solution"]
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
index 06d9c01b1..5540c1305 100755
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
@@ -1,57 +1,55 @@
<!DOCTYPE html>
<html>
-<body>
-
- <div id="container"></div>
-
- <script>
- let data = {
- "Fish": {
- "trout": {},
- "salmon": {}
- },
+ <body>
+ <div id="container"></div>
+
+ <script>
+ let data = {
+ Fish: {
+ trout: {},
+ salmon: {},
+ },
- "Tree": {
- "Huge": {
- "sequoia": {},
- "oak": {}
+ Tree: {
+ Huge: {
+ sequoia: {},
+ oak: {},
+ },
+ Flowering: {
+ "apple tree": {},
+ magnolia: {},
+ },
},
- "Flowering": {
- "apple tree": {},
- "magnolia": {}
- }
+ };
+
+ function createTree(container, obj) {
+ container.append(createTreeDom(obj));
}
- };
- function createTree(container, obj) {
- container.append(createTreeDom(obj));
- }
+ function createTreeDom(obj) {
+ // jika tidak ada anak (children), maka panggilan tersebut mengembalikan undefined
+ // dan <ul> tidak akan dibuat
+ if (!Object.keys(obj).length) return;
- function createTreeDom(obj) {
- // if there's no children, then the call returns undefined
- // and the <ul> won't be created
- if (!Object.keys(obj).length) return;
+ let ul = document.createElement("ul");
- let ul = document.createElement('ul');
+ for (let key in obj) {
+ let li = document.createElement("li");
+ li.innerHTML = key;
- for (let key in obj) {
- let li = document.createElement('li');
- li.innerHTML = key;
+ let childrenUl = createTreeDom(obj[key]);
+ if (childrenUl) {
+ li.append(childrenUl);
+ }
- let childrenUl = createTreeDom(obj[key]);
- if (childrenUl) {
- li.append(childrenUl);
+ ul.append(li);
}
- ul.append(li);
+ return ul;
}
- return ul;
- }
-
- let container = document.getElementById('container');
- createTree(container, data);
- </script>
-
-</body>
+ let container = document.getElementById("container");
+ createTree(container, data);
+ </script>
+ </body>
</html>
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
index 0f5f6b037..95776f173 100644
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
@@ -1,45 +1,45 @@
<!DOCTYPE html>
<html>
-<body>
+ <body>
+ <div id="container"></div>
- <div id="container"></div>
-
- <script>
- let data = {
- "Fish": {
- "trout": {},
- "salmon": {}
- },
-
- "Tree": {
- "Huge": {
- "sequoia": {},
- "oak": {}
+ <script>
+ let data = {
+ Fish: {
+ trout: {},
+ salmon: {},
},
- "Flowering": {
- "apple tree": {},
- "magnolia": {}
- }
- }
- };
- function createTree(container, obj) {
- container.innerHTML = createTreeText(obj);
- }
+ Tree: {
+ Huge: {
+ sequoia: {},
+ oak: {},
+ },
+ Flowering: {
+ "apple tree": {},
+ magnolia: {},
+ },
+ },
+ };
- function createTreeText(obj) { // standalone recursive function
- let li = '';
- let ul;
- for (let key in obj) {
- li += '<li>' + key + createTreeText(obj[key]) + '</li>';
+ function createTree(container, obj) {
+ container.innerHTML = createTreeText(obj);
}
- if (li) {
- ul = '<ul>' + li + '</ul>'
+
+ function createTreeText(obj) {
+ // fungsi rekursif mandiri
+ let li = "";
+ let ul;
+ for (let key in obj) {
+ li += "<li>" + key + createTreeText(obj[key]) + "</li>";
+ }
+ if (li) {
+ ul = "<ul>" + li + "</ul>";
+ }
+ return ul || "";
}
- return ul || '';
- }
- createTree(container, data);
- </script>
-</body>
+ createTree(container, data);
+ </script>
+ </body>
</html>
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md
index d29636ee2..87ad333d8 100644
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md
@@ -1,4 +1,4 @@
-The easiest way to walk the object is to use recursion.
+Cara termudah untuk menyusuri objek adalah dengan menggunakan rekursi.
-1. [The solution with innerHTML](sandbox:innerhtml).
-2. [The solution with DOM](sandbox:build-tree-dom).
+1. [Solusi dengan innerHTML](sandbox:innerhtml).
+2. [Solusi dengan DOM](sandbox:build-tree-dom).
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html
index 8586f6b24..79e579769 100755
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html
@@ -1,15 +1,13 @@
<!DOCTYPE html>
<html>
+ <head>
+ <meta charset="utf-8" />
+ </head>
-<head>
- <meta charset="utf-8">
-</head>
+ <body>
+ <div id="tree"></div>
-<body>
-
- <div id="tree"></div>
-
- <!-- The result should be:
+ <!-- Hasilnya seharusnya:
<div id="tree">
<ul>
<li>Fish
@@ -38,31 +36,30 @@
</div>
-->
- <script>
- let data = {
- "Fish": {
- "trout": {},
- "salmon": {}
- },
-
- "Tree": {
- "Huge": {
- "sequoia": {},
- "oak": {}
+ <script>
+ let data = {
+ Fish: {
+ trout: {},
+ salmon: {},
},
- "Flowering": {
- "apple tree": {},
- "magnolia": {}
- }
- }
- };
- function createTree(container, data) {
- /* your code */
- }
+ Tree: {
+ Huge: {
+ sequoia: {},
+ oak: {},
+ },
+ Flowering: {
+ "apple tree": {},
+ magnolia: {},
+ },
+ },
+ };
- createTree(document.getElementById('tree'), data);
- </script>
+ function createTree(container, data) {
+ /* kode anda */
+ }
-</body>
+ createTree(document.getElementById("tree"), data);
+ </script>
+ </body>
</html>
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
index 5ec1a01bc..0cceae40d 100644
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
@@ -1,51 +1,51 @@
-importance: 5
+Tingkat kepentingan: 5
---
-# Create a tree from the object
+# Membuat pohon (tree) dari objek
-Write a function `createTree` that creates a nested `ul/li` list from the nested object.
+Buatlah sebuah fungsi `createTree` yang membuat daftar bertingkat atau bersarang (nested) `ul/li` dari objek bertingkat atau bersarang.
-For instance:
+Contohnya:
```js
let data = {
- "Fish": {
- "trout": {},
- "salmon": {}
+ Fish: {
+ trout: {},
+ salmon: {},
},
- "Tree": {
- "Huge": {
- "sequoia": {},
- "oak": {}
+ Tree: {
+ Huge: {
+ sequoia: {},
+ oak: {},
},
- "Flowering": {
+ Flowering: {
"apple tree": {},
- "magnolia": {}
- }
- }
+ magnolia: {},
+ },
+ },
};
```
-The syntax:
+Sintaksnya:
```js
let container = document.getElementById('container');
*!*
-createTree(container, data); // creates the tree in the container
+createTree(container, data); // membuat pohon di dalam container
*/!*
```
-The result (tree) should look like this:
+Hasilnya (pohon) seharusnya terlihat seperti ini:
[iframe border=1 src="build-tree-dom"]
-Choose one of two ways of solving this task:
+Pilih salah satu dari dua cara berikut untuk menyelesaikan tugas ini:
-1. Create the HTML for the tree and then assign to `container.innerHTML`.
-2. Create tree nodes and append with DOM methods.
+1. Buat HTML untuk pohon dan kemudian tetapkan ke `container.innerHTML`.
+2. Buat simpul pohon (tree nodes) dan tambahkan dengan metode DOM.
-Would be great if you could do both.
+Bagus jika Anda bisa melakukan keduanya.
-P.S. The tree should not have "extra" elements like empty `<ul></ul>` for the leaves.
+P.S. Pohon tidak boleh memiliki elemen "ekstra" seperti <ul></ul> kosong untuk daun-daunnya.
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/solution.md b/2-ui/1-document/07-modifying-document/8-tree-count/solution.md
index 43b9a362c..d9024595c 100644
--- a/2-ui/1-document/07-modifying-document/8-tree-count/solution.md
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/solution.md
@@ -1 +1 @@
-To append text to each `<li>` we can alter the text node `data`.
+Untuk menambahkan teks ke setiap `<li>`, kita dapat mengubah teks node `data`.
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html b/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html
index ec44bfda1..4eda7d3a5 100644
--- a/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html
@@ -1,56 +1,60 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
<html>
-<body>
+ <body>
+ <ul>
+ <li>
+ Animals
+ <ul>
+ <li>
+ Mammals
+ <ul>
+ <li>Cows</li>
+ <li>Donkeys</li>
+ <li>Dogs</li>
+ <li>Tigers</li>
+ </ul>
+ </li>
+ <li>
+ Other
+ <ul>
+ <li>Snakes</li>
+ <li>Birds</li>
+ <li>Lizards</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>
+ Fishes
+ <ul>
+ <li>
+ Aquarium
+ <ul>
+ <li>Guppy</li>
+ <li>Angelfish</li>
+ </ul>
+ </li>
+ <li>
+ Sea
+ <ul>
+ <li>Sea trout</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
- <ul>
- <li>Animals
- <ul>
- <li>Mammals
- <ul>
- <li>Cows</li>
- <li>Donkeys</li>
- <li>Dogs</li>
- <li>Tigers</li>
- </ul>
- </li>
- <li>Other
- <ul>
- <li>Snakes</li>
- <li>Birds</li>
- <li>Lizards</li>
- </ul>
- </li>
- </ul>
- </li>
- <li>Fishes
- <ul>
- <li>Aquarium
- <ul>
- <li>Guppy</li>
- <li>Angelfish</li>
- </ul>
- </li>
- <li>Sea
- <ul>
- <li>Sea trout</li>
- </ul>
- </li>
- </ul>
- </li>
- </ul>
+ <script>
+ let lis = document.getElementsByTagName("li");
- <script>
- let lis = document.getElementsByTagName('li');
+ for (let li of lis) {
+ // dapatkan jumlah semua <li> di bawah <li> ini
+ let descendantsCount = li.getElementsByTagName("li").length;
+ if (!descendantsCount) continue;
- for (let li of lis) {
- // get the count of all <li> below this <li>
- let descendantsCount = li.getElementsByTagName('li').length;
- if (!descendantsCount) continue;
-
- // add directly to the text node (append to the text)
- li.firstChild.data += ' [' + descendantsCount + ']';
- }
- </script>
-
-</body>
+ // tambahkan langsung ke node teks (gabungkan dengan teks)
+ li.firstChild.data += " [" + descendantsCount + "]";
+ }
+ </script>
+ </body>
</html>
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html b/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html
index 542bd9376..9eb03bb69 100644
--- a/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html
@@ -1,47 +1,51 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
<html>
-<body>
+ <body>
+ <ul>
+ <li>
+ Animals
+ <ul>
+ <li>
+ Mammals
+ <ul>
+ <li>Cows</li>
+ <li>Donkeys</li>
+ <li>Dogs</li>
+ <li>Tigers</li>
+ </ul>
+ </li>
+ <li>
+ Other
+ <ul>
+ <li>Snakes</li>
+ <li>Birds</li>
+ <li>Lizards</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>
+ Fishes
+ <ul>
+ <li>
+ Aquarium
+ <ul>
+ <li>Guppy</li>
+ <li>Angelfish</li>
+ </ul>
+ </li>
+ <li>
+ Sea
+ <ul>
+ <li>Sea trout</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
- <ul>
- <li>Animals
- <ul>
- <li>Mammals
- <ul>
- <li>Cows</li>
- <li>Donkeys</li>
- <li>Dogs</li>
- <li>Tigers</li>
- </ul>
- </li>
- <li>Other
- <ul>
- <li>Snakes</li>
- <li>Birds</li>
- <li>Lizards</li>
- </ul>
- </li>
- </ul>
- </li>
- <li>Fishes
- <ul>
- <li>Aquarium
- <ul>
- <li>Guppy</li>
- <li>Angelfish</li>
- </ul>
- </li>
- <li>Sea
- <ul>
- <li>Sea trout</li>
- </ul>
- </li>
- </ul>
- </li>
- </ul>
-
- <script>
- // ... your code ...
- </script>
-
-</body>
+ <script>
+ // ... kode anda ...
+ </script>
+ </body>
</html>
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/task.md b/2-ui/1-document/07-modifying-document/8-tree-count/task.md
index d6343bf3b..21fa5157b 100644
--- a/2-ui/1-document/07-modifying-document/8-tree-count/task.md
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/task.md
@@ -1,13 +1,13 @@
-importance: 5
+Tingkat kepentingan: 5
---
-# Show descendants in a tree
+# Tampilkan keturunan dalam bentuk pohon
-There's a tree organized as nested `ul/li`.
+Ada pohon yang diorganisir sebagai `ul/li` bersarang.
-Write the code that adds to each `<li>` the number of its descendants. Skip leaves (nodes without children).
+Tuliskan kode yang menambahkan ke setiap `<li>` jumlah keturunannya. lewati daun (node tanpa anak).
-The result:
+Hasilnya:
[iframe border=1 src="solution"]
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md
index de8be56e9..9c7936036 100644
--- a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md
@@ -1,9 +1,9 @@
-We'll create the table as a string: `"<table>...</table>"`, and then assign it to `innerHTML`.
+Kita akan membuat tabel sebagai string: "<table>...</table>", dan kemudian menetapkannya ke innerHTML.
-The algorithm:
+Algoritma:
-1. Create the table header with `<th>` and weekday names.
-2. Create the date object `d = new Date(year, month-1)`. That's the first day of `month` (taking into account that months in JavaScript start from `0`, not `1`).
-3. First few cells till the first day of the month `d.getDay()` may be empty. Let's fill them in with `<td></td>`.
-4. Increase the day in `d`: `d.setDate(d.getDate()+1)`. If `d.getMonth()` is not yet the next month, then add the new cell `<td>` to the calendar. If that's a Sunday, then add a newline <code>"</tr><tr>"</code>.
-5. If the month has finished, but the table row is not yet full, add empty `<td>` into it, to make it square.
+1. Buat header tabel dengan <th> dan nama-nama hari.
+2. Buat objek tanggal `d = new Date(year, month-1)`. Itu adalah hari pertama dari `month` (mengingat bahwa bulan dalam JavaScript dimulai dari `0`, bukan `1`).
+3. Beberapa sel pertama hingga hari pertama bulan `d.getDay()` mungkin kosong. Mari isi mereka dengan <td></td>.
+4. Tingkatkan tanggal di `d`: `d.setDate(d.getDate()+1)`. Jika `d.getMonth()` belum bulan berikutnya, tambahkan sel `<td>` baru ke dalam kalender. Jika itu hari Minggu, tambahkan baris baru <code>"</tr><tr>"</code>.
+5. Jika bulan telah selesai, tetapi baris tabel belum penuh, tambahkan `<td>` kosong ke dalamnya, untuk membuatnya persegi.
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html
index 7e211abc6..5f364b1aa 100644
--- a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html
@@ -1,79 +1,77 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
<html>
+ <head>
+ <style>
+ table {
+ border-collapse: collapse;
+ }
-<head>
- <style>
- table {
- border-collapse: collapse;
- }
-
- td,
- th {
- border: 1px solid black;
- padding: 3px;
- text-align: center;
- }
-
- th {
- font-weight: bold;
- background-color: #E6E6E6;
- }
- </style>
-</head>
-
-<body>
+ td,
+ th {
+ border: 1px solid black;
+ padding: 3px;
+ text-align: center;
+ }
+ th {
+ font-weight: bold;
+ background-color: #e6e6e6;
+ }
+ </style>
+ </head>
- <div id="calendar"></div>
+ <body>
+ <div id="calendar"></div>
- <script>
- function createCalendar(elem, year, month) {
+ <script>
+ function createCalendar(elem, year, month) {
+ let mon = month - 1; // bulan di JavaScript adalah 0..11, bukan 1..12
+ let d = new Date(year, mon);
- let mon = month - 1; // months in JS are 0..11, not 1..12
- let d = new Date(year, mon);
+ let table =
+ "<table><tr><th>MO</th><th>TU</th><th>WE</th><th>TH</th><th>FR</th><th>SA</th><th>SU</th></tr><tr>";
- let table = '<table><tr><th>MO</th><th>TU</th><th>WE</th><th>TH</th><th>FR</th><th>SA</th><th>SU</th></tr><tr>';
+ // spasi untuk baris pertama
+ // dari Senin sampai hari pertama bulan
+ // * * * 1 2 3 4
+ for (let i = 0; i < getDay(d); i++) {
+ table += "<td></td>";
+ }
- // spaces for the first row
- // from Monday till the first day of the month
- // * * * 1 2 3 4
- for (let i = 0; i < getDay(d); i++) {
- table += '<td></td>';
- }
+ // <td> dengan tanggal aktual
+ while (d.getMonth() == mon) {
+ table += "<td>" + d.getDate() + "</td>";
- // <td> with actual dates
- while (d.getMonth() == mon) {
- table += '<td>' + d.getDate() + '</td>';
+ if (getDay(d) % 7 == 6) {
+ // minggu, hari terakhir minggu - baris baru
+ table += "</tr><tr>";
+ }
- if (getDay(d) % 7 == 6) { // sunday, last day of week - newline
- table += '</tr><tr>';
+ d.setDate(d.getDate() + 1);
}
- d.setDate(d.getDate() + 1);
- }
-
- // add spaces after last days of month for the last row
- // 29 30 31 * * * *
- if (getDay(d) != 0) {
- for (let i = getDay(d); i < 7; i++) {
- table += '<td></td>';
+ // Tambahkan spasi setelah hari terakhir bulan untuk baris terakhir
+ // 29 30 31 * * * *
+ if (getDay(d) != 0) {
+ for (let i = getDay(d); i < 7; i++) {
+ table += "<td></td>";
+ }
}
- }
- // close the table
- table += '</tr></table>';
+ // menutup tabel
+ table += "</tr></table>";
- elem.innerHTML = table;
- }
-
- function getDay(date) { // get day number from 0 (monday) to 6 (sunday)
- let day = date.getDay();
- if (day == 0) day = 7; // make Sunday (0) the last day
- return day - 1;
- }
+ elem.innerHTML = table;
+ }
- createCalendar(calendar, 2012, 9);
- </script>
+ function getDay(date) {
+ // mendapatkan nomor hari dari 0 (senin) hingga 6 (minggu)
+ let day = date.getDay();
+ if (day == 0) day = 7; // membuat Minggu (0) menjadi hari terakhir
+ return day - 1;
+ }
-</body>
+ createCalendar(calendar, 2012, 9);
+ </script>
+ </body>
</html>
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html b/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html
index e1f4cd6bd..777d47061 100644
--- a/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html
@@ -1,38 +1,34 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
<html>
-
-<head>
- <style>
- table {
- border-collapse: collapse;
- }
-
- td,
- th {
- border: 1px solid black;
- padding: 3px;
- text-align: center;
- }
-
- th {
- font-weight: bold;
- background-color: #E6E6E6;
- }
- </style>
-</head>
-
-<body>
-
-
- <div id="calendar"></div>
-
- <script>
- function createCalendar(elem, year, month) {
- // ...your code that generates the calndar in elem...
- }
-
- createCalendar(calendar, 2012, 9);
- </script>
-
-</body>
+ <head>
+ <style>
+ table {
+ border-collapse: collapse;
+ }
+
+ td,
+ th {
+ border: 1px solid black;
+ padding: 3px;
+ text-align: center;
+ }
+
+ th {
+ font-weight: bold;
+ background-color: #e6e6e6;
+ }
+ </style>
+ </head>
+
+ <body>
+ <div id="calendar"></div>
+
+ <script>
+ function createCalendar(elem, year, month) {
+ // ...Kode Anda yang menghasilkan kalender di elem...
+ }
+
+ createCalendar(calendar, 2012, 9);
+ </script>
+ </body>
</html>
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/task.md b/2-ui/1-document/07-modifying-document/9-calendar-table/task.md
index 37b1a60d2..8e75410f1 100644
--- a/2-ui/1-document/07-modifying-document/9-calendar-table/task.md
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/task.md
@@ -1,17 +1,17 @@
-importance: 4
+Tingkat kepentingan: 4
---
-# Create a calendar
+# Buat kalender
-Write a function `createCalendar(elem, year, month)`.
+Tulis fungsi `createCalendar(elem, year, month)`.
-The call should create a calendar for the given year/month and put it inside `elem`.
+Panggilan tersebut harus membuat kalender untuk tahun/bulan yang diberikan dan menempatkannya di dalam `elem`.
-The calendar should be a table, where a week is `<tr>`, and a day is `<td>`. The table top should be `<th>` with weekday names: the first day should be Monday, and so on till Sunday.
+Kalender tersebut harus berupa tabel, di mana satu minggu adalah `<tr>`, dan satu hari adalah `<td>`. Puncak tabel harus berupa `<th>` dengan nama hari dalam seminggu: hari pertama harus Senin, dan seterusnya hingga Minggu.
-For instance, `createCalendar(cal, 2012, 9)` should generate in element `cal` the following calendar:
+Sebagai contoh, `createCalendar(cal, 2012, 9)` harus menghasilkan kalender berikut dalam elemen `cal`:
[iframe height=210 src="solution"]
-P.S. For this task it's enough to generate the calendar, should not yet be clickable.
+P.S. Untuk tugas ini, cukup menghasilkan kalender; belum perlu dapat diklik.
diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md
index 75ce1fbb0..d8e555207 100644
--- a/2-ui/1-document/07-modifying-document/article.md
+++ b/2-ui/1-document/07-modifying-document/article.md
@@ -1,117 +1,115 @@
-# Modifying the document
+# Mengubah Dokumen
-DOM modification is the key to creating "live" pages.
+Modifikasi DOM adalah kunci untuk menciptakan halaman "live".
-Here we'll see how to create new elements "on the fly" and modify the existing page content.
+Di sini kita akan melihat cara membuat elemen baru "on the fly" dan mengubah konten halaman yang sudah ada.
-## Example: show a message
+## Contoh: menampilkan pesan
-Let's demonstrate using an example. We'll add a message on the page that looks nicer than `alert`.
+Mari kita tunjukkan dengan contoh. Kita akan menambahkan pesan pada halaman yang terlihat lebih baik daripada `alert`.
-Here's how it will look:
+Inilah tampilannya:
```html autorun height="80"
<style>
-.alert {
- padding: 15px;
- border: 1px solid #d6e9c6;
- border-radius: 4px;
- color: #3c763d;
- background-color: #dff0d8;
-}
+ .alert {
+ padding: 15px;
+ border: 1px solid #d6e9c6;
+ border-radius: 4px;
+ color: #3c763d;
+ background-color: #dff0d8;
+ }
</style>
*!*
-<div class="alert">
- <strong>Hi there!</strong> You've read an important message.
-</div>
+<div class="alert"><strong>Hai!</strong> Anda telah membaca pesan penting.</div>
*/!*
```
-That was the HTML example. Now let's create the same `div` with JavaScript (assuming that the styles are in the HTML/CSS already).
+Itu adalah contoh HTML. Sekarang mari kita buat `div` yang sama dengan JavaScript (dengan asumsi bahwa gaya sudah ada di HTML/CSS).
-## Creating an element
+## Membuat elemen
-To create DOM nodes, there are two methods:
+Untuk membuat node DOM, ada dua metode:
`document.createElement(tag)`
-: Creates a new *element node* with the given tag:
+: Membuat _node elemen_ baru dengan tag yang diberikan:
```js
let div = document.createElement('div');
```
`document.createTextNode(text)`
-: Creates a new *text node* with the given text:
+: Membuat _node teks_ baru dengan teks yang diberikan:
```js
- let textNode = document.createTextNode('Here I am');
+ let textNode = document.createTextNode('Ini saya');
```
-Most of the time we need to create element nodes, such as the `div` for the message.
+Sebagian besar waktu kita perlu membuat node elemen, seperti `div` untuk pesan.
-### Creating the message
+### Membuat pesan
-Creating the message div takes 3 steps:
+Membuat `div` pesan melibatkan 3 langkah:
```js
-// 1. Create <div> element
-let div = document.createElement('div');
+// 1. Membuat elemen <div>
+let div = document.createElement("div");
-// 2. Set its class to "alert"
+// 2. Mengatur kelasnya menjadi "alert"
div.className = "alert";
-// 3. Fill it with the content
-div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
+// 3. Mengisinya dengan kontennya
+div.innerHTML = "<strong>Hai!</strong> Anda telah membaca pesan penting.";
```
-We've created the element. But as of now it's only in a variable named `div`, not in the page yet. So we can't see it.
+Kita telah membuat elemennya. Tapi sampai sekarang hanya dalam variabel bernama `div`, belum ada di halaman. Jadi kita belum bisa melihatnya.
-## Insertion methods
+## Metode Penyisipan
-To make the `div` show up, we need to insert it somewhere into `document`. For instance, into `<body>` element, referenced by `document.body`.
+Agar `div` muncul, kita perlu menyisipkannya ke suatu tempat dalam `document`. Misalnya, ke dalam elemen `<body>`, yang dirujuk oleh `document.body`.
-There's a special method `append` for that: `document.body.append(div)`.
+Ada metode khusus untuk itu: `document.body.append(div)`.
-Here's the full code:
+Berikut adalah kode lengkapnya:
```html run height="80"
<style>
-.alert {
- padding: 15px;
- border: 1px solid #d6e9c6;
- border-radius: 4px;
- color: #3c763d;
- background-color: #dff0d8;
-}
+ .alert {
+ padding: 15px;
+ border: 1px solid #d6e9c6;
+ border-radius: 4px;
+ color: #3c763d;
+ background-color: #dff0d8;
+ }
</style>
<script>
- let div = document.createElement('div');
- div.className = "alert";
- div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
+ let div = document.createElement('div');
+ div.className = "alert";
+ div.innerHTML = "<strong>Hai!</strong> Anda telah membaca pesan penting.";
-*!*
- document.body.append(div);
-*/!*
+ *!*
+ document.body.append(div);
+ */!*
</script>
```
-Here we called `append` on `document.body`, but we can call `append` method on any other element, to put another element into it. For instance, we can append something to `<div>` by calling `div.append(anotherElement)`.
+Di sini kita memanggil `append` pada `document.body`, tetapi kita dapat memanggil metode `append` pada elemen lain, untuk menyisipkan elemen lain ke dalamnya. Misalnya, kita dapat menambahkan sesuatu ke `<div>` dengan memanggil `div.append(anotherElement)`.
-Here are more insertion methods, they specify different places where to insert:
+Berikut adalah beberapa metode penyisipan lainnya, yang menentukan tempat yang berbeda untuk menyisipkan:
-- `node.append(...nodes or strings)` -- append nodes or strings *at the end* of `node`,
-- `node.prepend(...nodes or strings)` -- insert nodes or strings *at the beginning* of `node`,
-- `node.before(...nodes or strings)` –- insert nodes or strings *before* `node`,
-- `node.after(...nodes or strings)` –- insert nodes or strings *after* `node`,
-- `node.replaceWith(...nodes or strings)` –- replaces `node` with the given nodes or strings.
+- `node.append(...nodes or strings)` -- menambahkan node atau string _di akhir_ dari `node`,
+- `node.prepend(...nodes or strings)` -- menyisipkan node atau string _di awal_ dari `node`,
+- `node.before(...nodes or strings)` –- menyisipkan node atau string _sebelum_ `node`,
+- `node.after(...nodes or strings)` –- menyisipkan node atau string _setelah_ `node`,
+- `node.replaceWith(...nodes or strings)` –- menggantikan `node` dengan node atau string yang diberikan.
-Arguments of these methods are an arbitrary list of DOM nodes to insert, or text strings (that become text nodes automatically).
+Argumen dari metode-metode ini adalah daftar sembarang node DOM yang akan disisipkan, atau string teks (yang secara otomatis menjadi node teks).
-Let's see them in action.
+Mari kita lihat bagaimana mereka bekerja.
-Here's an example of using these methods to add items to a list and the text before/after it:
+Berikut adalah contoh penggunaan metode-metode ini untuk menambahkan item ke dalam daftar dan teks sebelum/ setelahnya:
```html autorun
<ol id="ol">
@@ -121,27 +119,27 @@ Here's an example of using these methods to add items to a list and the text bef
</ol>
<script>
- ol.before('before'); // insert string "before" before <ol>
- ol.after('after'); // insert string "after" after <ol>
+ ol.before("sebelum"); // menyisipkan string "sebelum" sebelum <ol>
+ ol.after("sesudah"); // menyisipkan string "sesudah" setelah <ol>
- let liFirst = document.createElement('li');
- liFirst.innerHTML = 'prepend';
- ol.prepend(liFirst); // insert liFirst at the beginning of <ol>
+ let liFirst = document.createElement("li");
+ liFirst.innerHTML = "prepend";
+ ol.prepend(liFirst); // menyisipkan <li> Pertama di awal <ol>
- let liLast = document.createElement('li');
- liLast.innerHTML = 'append';
- ol.append(liLast); // insert liLast at the end of <ol>
+ let liLast = document.createElement("li");
+ liLast.innerHTML = "append";
+ ol.append(liLast); // menyisipkan <li> Terakhir di akhir <ol>
</script>
```
-Here's a visual picture of what the methods do:
+Berikut adalah gambaran visual tentang apa yang dilakukan metode-metode ini:
-So the final list will be:
+Jadi, daftar akhirnya akan menjadi:
```html
-before
+sebalum
<ol id="ol">
<li>prepend</li>
<li>0</li>
@@ -149,216 +147,217 @@ before
<li>2</li>
<li>append</li>
</ol>
-after
+sesudah
```
-As said, these methods can insert multiple nodes and text pieces in a single call.
+Seperti yang disebutkan, metode-metode ini dapat menyisipkan beberapa node dan potongan teks dalam satu panggilan.
-For instance, here a string and an element are inserted:
+Misalnya, di sini sebuah string dan sebuah elemen disisipkan:
```html run
<div id="div"></div>
<script>
- div.before('<p>Hello</p>', document.createElement('hr'));
+ div.before("<p>Halo</p>", document.createElement("hr"));
</script>
```
-Please note: the text is inserted "as text", not "as HTML", with proper escaping of characters such as `<`, `>`.
+Harap diperhatikan: teks disisipkan "sebagai teks", bukan "sebagai HTML", dengan penghindaran karakter seperti `<`, `>`.
-So the final HTML is:
+Jadi HTML akhirnya adalah:
```html run
-*!*
-<p>Hello</p>
-*/!*
-<hr>
+*!* <p>Hello</p> */!*
+<hr />
<div id="div"></div>
```
-In other words, strings are inserted in a safe way, like `elem.textContent` does it.
+Dengan kata lain, string disisipkan dengan cara yang aman, seperti yang dilakukan `elem.textContent`.
-So, these methods can only be used to insert DOM nodes or text pieces.
+Jadi, metode-metode ini hanya dapat digunakan untuk menyisipkan node DOM atau potongan teks.
-But what if we'd like to insert an HTML string "as html", with all tags and stuff working, in the same manner as `elem.innerHTML` does it?
+Tetapi bagaimana jika kita ingin menyisipkan string HTML "sebagai HTML", dengan semua tag dan fitur berfungsi, dengan cara yang sama seperti `elem.innerHTML` melakukannya?
-## insertAdjacentHTML/Text/Element
+## insertAdjacentHTML/Teks/Elemen
-For that we can use another, pretty versatile method: `elem.insertAdjacentHTML(where, html)`.
+Untuk itu, kita dapat menggunakan metode lain yang cukup serbaguna: `elem.insertAdjacentHTML(where, html)`.
-The first parameter is a code word, specifying where to insert relative to `elem`. Must be one of the following:
+Parameter pertama adalah kata kode, yang menentukan di mana menyisipkan relatif terhadap `elem`. Harus salah satu dari yang berikut:
-- `"beforebegin"` -- insert `html` immediately before `elem`,
-- `"afterbegin"` -- insert `html` into `elem`, at the beginning,
-- `"beforeend"` -- insert `html` into `elem`, at the end,
-- `"afterend"` -- insert `html` immediately after `elem`.
+- `"beforebegin"` -- menyisipkan `html` langsung sebelum `elem`,
+- `"afterbegin"` -- menyisipkan `html` ke dalam `elem`, di awal,
+- `"beforeend"` -- menyisipkan `html` ke dalam `elem`, di akhir,
+- `"afterend"` -- menyisipkan `html` langsung setelah `elem`.
-The second parameter is an HTML string, that is inserted "as HTML".
+Parameter kedua adalah string HTML, yang disisipkan "sebagai HTML".
-For instance:
+Misalnya:
```html run
<div id="div"></div>
<script>
- div.insertAdjacentHTML('beforebegin', '<p>Hello</p>');
- div.insertAdjacentHTML('afterend', '<p>Bye</p>');
+ div.insertAdjacentHTML("beforebegin", "<p>Halo</p>");
+ div.insertAdjacentHTML("afterend", "<p>Sampai Jumpa</p>");
</script>
```
-...Would lead to:
+...akan menghasilkan:
```html run
-<p>Hello</p>
+<p>Halo</p>
<div id="div"></div>
-<p>Bye</p>
+<p>Sampai Jumpa</p>
```
-That's how we can append arbitrary HTML to the page.
+Itulah bagaimana kita dapat menambahkan HTML sembarang ke halaman.
-Here's the picture of insertion variants:
+Berikut adalah gambaran variasi penyisipan:
-We can easily notice similarities between this and the previous picture. The insertion points are actually the same, but this method inserts HTML.
+Kita dengan mudah dapat melihat kesamaan antara ini dan gambar sebelumnya. Titik-titik penyisipan sebenarnya sama, tetapi metode ini menyisipkan HTML.
-The method has two brothers:
+Metode ini memiliki dua saudara:
-- `elem.insertAdjacentText(where, text)` -- the same syntax, but a string of `text` is inserted "as text" instead of HTML,
-- `elem.insertAdjacentElement(where, elem)` -- the same syntax, but inserts an element.
+- `elem.insertAdjacentText(where, text)` -- sintaks yang sama, tetapi serangkaian `text` disisipkan "sebagai teks" alih-alih HTML,
+- `elem.insertAdjacentElement(where, elem)` -- sintaks yang sama, tetapi menyisipkan sebuah elemen.
-They exist mainly to make the syntax "uniform". In practice, only `insertAdjacentHTML` is used most of the time. Because for elements and text, we have methods `append/prepend/before/after` -- they are shorter to write and can insert nodes/text pieces.
+Mereka ada terutama untuk membuat sintaks "seragam". Secara praktis, hanya `insertAdjacentHTML` yang digunakan sebagian besar waktu. Karena untuk elemen dan teks, kita memiliki metode `append/prepend/before/after` -- mereka lebih singkat untuk ditulis dan dapat menyisipkan node/potongan teks.
-So here's an alternative variant of showing a message:
+Jadi berikut adalah varian alternatif untuk menampilkan pesan:
```html run
<style>
-.alert {
- padding: 15px;
- border: 1px solid #d6e9c6;
- border-radius: 4px;
- color: #3c763d;
- background-color: #dff0d8;
-}
+ .alert {
+ padding: 15px;
+ border: 1px solid #d6e9c6;
+ border-radius: 4px;
+ color: #3c763d;
+ background-color: #dff0d8;
+ }
</style>
<script>
- document.body.insertAdjacentHTML("afterbegin", `<div class="alert">
- <strong>Hi there!</strong> You've read an important message.
- </div>`);
+ document.body.insertAdjacentHTML(
+ "afterbegin",
+ `<div class="alert">
+ <strong>Hai!</strong> Anda telah membaca pesan penting.
+ </div>`
+ );
</script>
```
-## Node removal
+## Penghapusan Node
-To remove a node, there's a method `node.remove()`.
+Untuk menghapus suatu node, ada metode `node.remove()`.
-Let's make our message disappear after a second:
+Mari buat pesan kita hilang setelah satu detik:
```html run untrusted
<style>
-.alert {
- padding: 15px;
- border: 1px solid #d6e9c6;
- border-radius: 4px;
- color: #3c763d;
- background-color: #dff0d8;
-}
+ .alert {
+ padding: 15px;
+ border: 1px solid #d6e9c6;
+ border-radius: 4px;
+ color: #3c763d;
+ background-color: #dff0d8;
+ }
</style>
<script>
- let div = document.createElement('div');
- div.className = "alert";
- div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
+ let div = document.createElement('div');
+ div.className = "alert";
+ div.innerHTML = "<strong>Hai!</strong> Anda telah membaca pesan penting.";
- document.body.append(div);
-*!*
- setTimeout(() => div.remove(), 1000);
-*/!*
+ document.body.append(div);
+ *!*
+ setTimeout(() => div.remove(), 1000);
+ */!*
</script>
```
-Please note: if we want to *move* an element to another place -- there's no need to remove it from the old one.
+Harap dicatat: jika kita ingin _memindahkan_ suatu elemen ke tempat lain -- tidak perlu menghapusnya dari tempat yang lama.
-**All insertion methods automatically remove the node from the old place.**
+**Semua metode penyisipan secara otomatis menghapus node dari tempat lama.**
-For instance, let's swap elements:
+Sebagai contoh, mari tukar elemen:
```html run height=50
<div id="first">First</div>
<div id="second">Second</div>
<script>
- // no need to call remove
- second.after(first); // take #second and after it insert #first
+ // tidak perlu memanggil remove
+ second.after(first); // ambil #second dan setelah itu sisipkan #first
</script>
```
-## Cloning nodes: cloneNode
+## Penggandaan Node: cloneNode
-How to insert one more similar message?
+Bagaimana menyisipkan satu pesan serupa lagi?
-We could make a function and put the code there. But the alternative way would be to *clone* the existing `div` and modify the text inside it (if needed).
+Kita bisa membuat sebuah fungsi dan meletakkan kode di sana. Tetapi cara alternatifnya adalah dengan _menggandakan_ `div` yang sudah ada dan mengubah teks di dalamnya (jika diperlukan).
-Sometimes when we have a big element, that may be faster and simpler.
+Kadang-kadang ketika kita memiliki elemen besar, itu mungkin lebih cepat dan lebih sederhana.
-- The call `elem.cloneNode(true)` creates a "deep" clone of the element -- with all attributes and subelements. If we call `elem.cloneNode(false)`, then the clone is made without child elements.
+- Panggil `elem.cloneNode(true)` membuat klon "dalam" dari elemen itu -- dengan semua atribut dan subelemen. Jika kita memanggil `elem.cloneNode(false)`, maka klon dibuat tanpa elemen anak.
-An example of copying the message:
+Contoh menyalin pesan:
```html run height="120"
<style>
-.alert {
- padding: 15px;
- border: 1px solid #d6e9c6;
- border-radius: 4px;
- color: #3c763d;
- background-color: #dff0d8;
-}
+ .alert {
+ padding: 15px;
+ border: 1px solid #d6e9c6;
+ border-radius: 4px;
+ color: #3c763d;
+ background-color: #dff0d8;
+ }
</style>
<div class="alert" id="div">
- <strong>Hi there!</strong> You've read an important message.
+ <strong>Hai!</strong> Anda telah membaca pesan penting.
</div>
<script>
-*!*
- let div2 = div.cloneNode(true); // clone the message
- div2.querySelector('strong').innerHTML = 'Bye there!'; // change the clone
+ *!*
+ let div2 = div.cloneNode(true); // menggandakan pesan
+ div2.querySelector('strong').innerHTML = 'Sampai jumpa!'; // mengubah klon
- div.after(div2); // show the clone after the existing div
-*/!*
+ div.after(div2); // tampilkan klon setelah div yang sudah ada
+ */!*
</script>
```
## DocumentFragment [#document-fragment]
-`DocumentFragment` is a special DOM node that serves as a wrapper to pass around lists of nodes.
+`DocumentFragment` adalah node DOM khusus yang berfungsi sebagai pembungkus untuk melewati daftar node.
-We can append other nodes to it, but when we insert it somewhere, then its content is inserted instead.
+Kita dapat menambahkan node lain ke dalamnya, tetapi ketika kita menyisipkannya di suatu tempat, maka isinya disisipkan sebagai gantinya.
-For example, `getListContent` below generates a fragment with `<li>` items, that are later inserted into `<ul>`:
+Sebagai contoh, `getListContent` di bawah menghasilkan fragmen dengan item `<li>`, yang kemudian disisipkan ke dalam `<ul>`:
```html run
<ul id="ul"></ul>
<script>
-function getListContent() {
- let fragment = new DocumentFragment();
+ function getListContent() {
+ let fragment = new DocumentFragment();
- for(let i=1; i<=3; i++) {
- let li = document.createElement('li');
- li.append(i);
- fragment.append(li);
- }
+ for(let i=1; i<=3; i++) {
+ let li = document.createElement('li');
+ li.append(i);
+ fragment.append(li);
+ }
- return fragment;
-}
+ return fragment;
+ }
-*!*
-ul.append(getListContent()); // (*)
-*/!*
+ *!*
+ ul.append(getListContent()); // (*)
+ */!*
</script>
```
-Please note, at the last line `(*)` we append `DocumentFragment`, but it "blends in", so the resulting structure will be:
+Harap diperhatikan, pada baris terakhir `(*)` kita menyisipkan `DocumentFragment`, tetapi itu "melebur", sehingga struktur yang dihasilkan akan menjadi:
```html
<ul>
@@ -368,46 +367,46 @@ Please note, at the last line `(*)` we append `DocumentFragment`, but it "blends
</ul>
```
-`DocumentFragment` is rarely used explicitly. Why append to a special kind of node, if we can return an array of nodes instead? Rewritten example:
+`DocumentFragment` jarang digunakan secara eksplisit. Mengapa menambahkan ke jenis node khusus, jika kita dapat mengembalikan array node? Contoh yang diperbarui:
```html run
<ul id="ul"></ul>
<script>
-function getListContent() {
- let result = [];
+ function getListContent() {
+ let result = [];
- for(let i=1; i<=3; i++) {
- let li = document.createElement('li');
- li.append(i);
- result.push(li);
- }
+ for(let i=1; i<=3; i++) {
+ let li = document.createElement('li');
+ li.append(i);
+ result.push(li);
+ }
- return result;
-}
+ return result;
+ }
-*!*
-ul.append(...getListContent()); // append + "..." operator = friends!
-*/!*
+ *!*
+ ul.append(...getListContent()); // append + "..." operator = sahabat!
+ */!*
</script>
```
-We mention `DocumentFragment` mainly because there are some concepts on top of it, like [template](info:template-element) element, that we'll cover much later.
+Kami menyebutkan `DocumentFragment` terutama karena ada beberapa konsep di atasnya, seperti elemen [template](info:template-element), yang akan kami bahas nanti.
-## Old-school insert/remove methods
+## Metode Penyisipan/Penghapusan Kuno
[old]
-There are also "old school" DOM manipulation methods, existing for historical reasons.
+Ada juga metode manipulasi DOM "kuno", yang ada karena alasan sejarah.
-These methods come from really ancient times. Nowadays, there's no reason to use them, as modern methods, such as `append`, `prepend`, `before`, `after`, `remove`, `replaceWith`, are more flexible.
+Metode-metode ini berasal dari zaman yang sangat kuno. Saat ini, tidak ada alasan untuk menggunakannya, karena metode modern, seperti `append`, `prepend`, `before`, `after`, `remove`, `replaceWith`, lebih fleksibel.
-The only reason we list these methods here is that you can find them in many old scripts:
+Alasan satu-satunya kami mencantumkan metode-metode ini di sini adalah karena Anda mungkin menemukannya dalam banyak skrip lama:
`parentElem.appendChild(node)`
-: Appends `node` as the last child of `parentElem`.
+: Menambahkan `node` sebagai anak terakhir dari `parentElem`.
- The following example adds a new `<li>` to the end of `<ol>`:
+ Contoh berikut menambahkan elemen `<li>` baru ke akhir dari `<ol>`:
```html run height=100
<ol id="list">
@@ -418,16 +417,16 @@ The only reason we list these methods here is that you can find them in many old
<script>
let newLi = document.createElement('li');
- newLi.innerHTML = 'Hello, world!';
+ newLi.innerHTML = 'Halo, dunia!';
list.appendChild(newLi);
</script>
```
`parentElem.insertBefore(node, nextSibling)`
-: Inserts `node` before `nextSibling` into `parentElem`.
+: Menyisipkan `node` sebalum `nextSibling` ke dalam `parentElem`.
- The following code inserts a new list item before the second `<li>`:
+ Kode berikut menyisipkan elemen daftar baru sebelum elemen `<li>` kedua:
```html run height=100
<ol id="list">
@@ -437,26 +436,26 @@ The only reason we list these methods here is that you can find them in many old
</ol>
<script>
let newLi = document.createElement('li');
- newLi.innerHTML = 'Hello, world!';
+ newLi.innerHTML = 'halo, dunia!';
*!*
list.insertBefore(newLi, list.children[1]);
*/!*
</script>
```
- To insert `newLi` as the first element, we can do it like this:
+ Untuk menyisipkan `newLi` sebagai elemen pertama, kita dapat melakukannya seperti ini:
```js
list.insertBefore(newLi, list.firstChild);
```
`parentElem.replaceChild(node, oldChild)`
-: Replaces `oldChild` with `node` among children of `parentElem`.
+: Menggantikan `oldChild` dengan `node` di antara anak-anak `parentElem`.
`parentElem.removeChild(node)`
-: Removes `node` from `parentElem` (assuming `node` is its child).
+: Menghapus `node` dari `parentElem` (dengan asumsi `node` adalah anaknya).
- The following example removes first `<li>` from `<ol>`:
+ Contoh berikut menghapus elemen `<li>` pertama dari `<ol>`:
```html run height=100
<ol id="list">
@@ -471,91 +470,96 @@ The only reason we list these methods here is that you can find them in many old
</script>
```
-All these methods return the inserted/removed node. In other words, `parentElem.appendChild(node)` returns `node`. But usually the returned value is not used, we just run the method.
+Semua metode ini mengembalikan node yang disisipkan/dihapus. Dengan kata lain, `parentElem.appendChild(node)` mengembalikan `node`. Tetapi biasanya nilai yang dikembalikan tidak digunakan, kita hanya menjalankan metodenya.
-## A word about "document.write"
+## Sedikit tentang "document.write"
-There's one more, very ancient method of adding something to a web-page: `document.write`.
+Ada satu lagi metode yang sangat kuno untuk menambahkan sesuatu ke halaman web: `document.write`.
-The syntax:
+Syntax:
```html run
-<p>Somewhere in the page...</p>
+<p>Di suatu tempat di halaman...</p>
*!*
<script>
- document.write('<b>Hello from JS</b>');
+ document.write("<b>Halo dari JS</b>");
</script>
*/!*
-<p>The end</p>
+<p>Akhir</p>
```
-The call to `document.write(html)` writes the `html` into page "right here and now". The `html` string can be dynamically generated, so it's kind of flexible. We can use JavaScript to create a full-fledged webpage and write it.
+Panggilan ke `document.write(html)` menulis `html` ke dalam halaman "di sini dan sekarang". String `html` dapat dibuat secara dinamis, sehingga ini cukup fleksibel. Kita dapat menggunakan JavaScript untuk membuat halaman web lengkap dan menuliskannya.
-The method comes from times when there was no DOM, no standards... Really old times. It still lives, because there are scripts using it.
+Metode ini berasal dari waktu ketika tidak ada DOM, tidak ada standar... Waktu yang sangat lama. Ini masih ada karena masih ada skrip yang menggunakannya.
-In modern scripts we can rarely see it, because of the following important limitation:
+Dalam skrip modern, kita jarang melihatnya, karena ada batasan penting berikut:
-**The call to `document.write` only works while the page is loading.**
+**Panggilan ke `document.write` hanya berfungsi saat halaman dimuat.**
-If we call it afterwards, the existing document content is erased.
+Jika kita memanggilnya setelah itu, konten dokumen yang ada akan dihapus.
-For instance:
+Sebagai contoh:
```html run
-<p>After one second the contents of this page will be replaced...</p>
+<p>Setelah satu detik konten halaman ini akan digantikan...</p>
*!*
<script>
- // document.write after 1 second
- // that's after the page loaded, so it erases the existing content
- setTimeout(() => document.write('<b>...By this.</b>'), 1000);
+ // document.write setelah 1 second
+ // itu setelah halaman dimuat, jadi itu akan menghapus konten yang ada
+ setTimeout(() => document.write("<b>...By this.</b>"), 1000);
</script>
*/!*
```
-So it's kind of unusable at "after loaded" stage, unlike other DOM methods we covered above.
+Jadi ini agak tidak dapat digunakan pada tahap "setelah dimuat", tidak seperti metode DOM lainnya yang sudah kita bahas di atas.
+
+Itu adalah kelemahannya.
+
+Ada juga kelebihannya. Secara teknis, ketika document.write dipanggil sementara browser sedang membaca ("menganalisis") HTML masuk, dan itu menulis sesuatu, browser mengonsumsinya seolah-olah itu awalnya ada di teks HTML.
+
+Jadi itu bekerja sangat cepat, karena tidak ada modifikasi DOM yang terlibat. Itu menulis langsung ke dalam teks halaman, sementara DOM belum dibangun.
+
+Jadi jika kita perlu menambahkan banyak teks ke HTML secara dinamis, dan kita berada di fase memuat halaman, dan kecepatan penting, itu bisa membantu. Tetapi dalam prakteknya, persyaratan ini jarang terpenuhi bersamaan. Dan biasanya kita dapat melihat metode ini dalam skrip hanya karena mereka sudah tua.
+
+## Ringkasan
-That's the downside.
+- Metode untuk membuat node baru:
-There's an upside also. Technically, when `document.write` is called while the browser is reading ("parsing") incoming HTML, and it writes something, the browser consumes it just as if it were initially there, in the HTML text.
+ - `document.createElement(tag)` -- membuat elemen dengan tag tertentu,
+ - `document.createTextNode(value)` -- membuat node teks (jarang digunakan),
+ - `elem.cloneNode(deep)` -- mengkloning elemen, jika `deep==true` maka dengan semua elemen turunannya.
-So it works blazingly fast, because there's *no DOM modification* involved. It writes directly into the page text, while the DOM is not yet built.
+- Penyisipan dan penghapusan:
-So if we need to add a lot of text into HTML dynamically, and we're at page loading phase, and the speed matters, it may help. But in practice these requirements rarely come together. And usually we can see this method in scripts just because they are old.
+ - `node.append(...nodes or strings)` -- menyisipkan ke dalam `node`, di akhir,
+ - `node.prepend(...nodes or strings)` -- menyisipkan ke dalam `node`, di awal,
+ - `node.before(...nodes or strings)` –- menyisipkan tepat sebalum `node`,
+ - `node.after(...nodes or strings)` –- menyisipkan tepat sesudah `node`,
+ - `node.replaceWith(...nodes or strings)` –- mengganti `node`.
+ - `node.remove()` –- menghapus `node`.
-## Summary
+ String teks disisipkan "sebagai teks".
-- Methods to create new nodes:
- - `document.createElement(tag)` -- creates an element with the given tag,
- - `document.createTextNode(value)` -- creates a text node (rarely used),
- - `elem.cloneNode(deep)` -- clones the element, if `deep==true` then with all descendants.
+- Ada juga metode "kuno":
-- Insertion and removal:
- - `node.append(...nodes or strings)` -- insert into `node`, at the end,
- - `node.prepend(...nodes or strings)` -- insert into `node`, at the beginning,
- - `node.before(...nodes or strings)` –- insert right before `node`,
- - `node.after(...nodes or strings)` –- insert right after `node`,
- - `node.replaceWith(...nodes or strings)` –- replace `node`.
- - `node.remove()` –- remove the `node`.
+ - `parent.appendChild(node)`
+ - `parent.insertBefore(node, nextSibling)`
+ - `parent.removeChild(node)`
+ - `parent.replaceChild(newElem, node)`
- Text strings are inserted "as text".
+ Semua metode ini mengembalikan `node`.
-- There are also "old school" methods:
- - `parent.appendChild(node)`
- - `parent.insertBefore(node, nextSibling)`
- - `parent.removeChild(node)`
- - `parent.replaceChild(newElem, node)`
+- Diberikan beberapa HTML dalam `html`, `elem.insertAdjacentHTML(where, html)` menyisipkannya tergantung pada nilai `where`:
- All these methods return `node`.
+ - `"beforebegin"` -- sisipkan `html` tepat sebelum `elem`,
+ - `"afterbegin"` -- sisipkan `html` ke dalam `elem`, di awal,
+ - `"beforeend"` -- sisipkan `html` ke dalam `elem`, di akhir,
+ - `"afterend"` -- sisipkan `html` tepat sesudah `elem`.
-- Given some HTML in `html`, `elem.insertAdjacentHTML(where, html)` inserts it depending on the value of `where`:
- - `"beforebegin"` -- insert `html` right before `elem`,
- - `"afterbegin"` -- insert `html` into `elem`, at the beginning,
- - `"beforeend"` -- insert `html` into `elem`, at the end,
- - `"afterend"` -- insert `html` right after `elem`.
+ Juga ada metode serupa, `elem.insertAdjacentText` dan `elem.insertAdjacentElement`, yang menyisipkan string teks dan elemen, tetapi jarang digunakan.
- Also there are similar methods, `elem.insertAdjacentText` and `elem.insertAdjacentElement`, that insert text strings and elements, but they are rarely used.
+- Untuk menambahkan HTML ke halaman sebelum selesai dimuat:
-- To append HTML to the page before it has finished loading:
- - `document.write(html)`
+ - `document.write(html)`
- After the page is loaded such a call erases the document. Mostly seen in old scripts.
+ Setelah halaman dimuat, panggilan semacam ini menghapus dokumen. Biasanya ditemui dalam skrip lama.