` hilang pada saat di klik.
-The demo:
+demo:
[iframe border=1 src="solution" height=80]
From 7412e5b79ad786edd8e2363df572d5aa30171967 Mon Sep 17 00:00:00 2001
From: emptywork <22065214+EmptyWork@users.noreply.github.com>
Date: Sat, 27 Nov 2021 11:50:23 +0900
Subject: [PATCH 07/17] Translate Event: hide-self-onclick/task.md
---
.../02-hide-self-onclick/task.md | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
index 9ee8f18e1..42c765372 100644
--- a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
@@ -2,11 +2,11 @@ importance: 5
---
-# Hide self
+# Sembunyikan diri
-Create a button that hides itself on click.
+Buat sebuah tombol yang menyembunyikan dirinya sendiri pada saat di klik.
```online
-Like this:
-
+Seperti ini:
+
```
From d5ed7c809d483f8395540cd80f55fbda444c5f6e Mon Sep 17 00:00:00 2001
From: emptywork <22065214+EmptyWork@users.noreply.github.com>
Date: Sat, 27 Nov 2021 11:51:11 +0900
Subject: [PATCH 08/17] Translate Event: typo: tekan -> klik
---
.../01-hide-other/source.view/index.html | 2 +-
.../02-hide-self-onclick/solution.md | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html
index 169b9fe10..9536ccd62 100644
--- a/2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html
@@ -7,7 +7,7 @@
-
+
Teks
diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
index dd01e7ba9..09a18d8fd 100644
--- a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
@@ -1,5 +1,5 @@
Bisa gunakan `this` pada penangan (_handler_) untuk mereferensi "elemen itu sendiri":
```html run height=50
-
+
```
From 1002da0876d0b0a0e1b935aae5271ac2808ea3a2 Mon Sep 17 00:00:00 2001
From: emptywork <22065214+EmptyWork@users.noreply.github.com>
Date: Sat, 27 Nov 2021 11:54:49 +0900
Subject: [PATCH 09/17] Translate Event: typo: tekan -> klik
---
.../01-hide-other/solution.view/index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html
index ef54ee34a..062b81e7b 100644
--- a/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html
@@ -7,7 +7,7 @@
-
+
Teks
From 6ca5e07537cf9c549ea7c945aaaca6668a59d093 Mon Sep 17 00:00:00 2001
From: emptywork <22065214+EmptyWork@users.noreply.github.com>
Date: Sat, 27 Nov 2021 12:08:46 +0900
Subject: [PATCH 10/17] Translate Event: which-handlers-run
---
.../03-which-handlers-run/solution.md | 8 ++++----
.../03-which-handlers-run/task.md | 6 +++---
2 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
index d569f0e4d..f7b1ae759 100644
--- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
@@ -1,8 +1,8 @@
-The answer: `1` and `2`.
+Jawabannya: `1` dan `2`.
-The first handler triggers, because it's not removed by `removeEventListener`. To remove the handler we need to pass exactly the function that was assigned. And in the code a new function is passed, that looks the same, but is still another function.
+Pengendali pertama dijalankan, karena tidak di hapuskan oleh `removeEventListener`. Untuk menhapuskan pengendali kita harus meneruskan secara tepat fungsi yang telah di atrus. Dan pada kode sebuah fungsi baru di teruskan, terlihat sama, tapi berbeda fungsi.
-To remove a function object, we need to store a reference to it, like this:
+Untuk menghapuskan objek fungsi, kita harus menyimpan refensi ke fungsi tersebut, seperti ini:
```js
function handler() {
@@ -13,4 +13,4 @@ button.addEventListener("click", handler);
button.removeEventListener("click", handler);
```
-The handler `button.onclick` works independently and in addition to `addEventListener`.
+Pengendali `button.onclick` bekerja secara sendiri dan sebagai tambahan untuk `addEvenetListener`.
diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
index f8cd75d5a..b3ec43664 100644
--- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
@@ -2,11 +2,11 @@ importance: 5
---
-# Which handlers run?
+# Pengendali mana yang dijalankan?
-There's a button in the variable. There are no handlers on it.
+Ada sebuah tombol pada variable. Tidak ada pengedali di tombol tersebut.
-Which handlers run on click after the following code? Which alerts show up?
+Manakah pengendali yang dijalankan pada saat klik pada kode berikut ini? Manakah `alert` yang akan ditunjukan?
```js no-beautify
button.addEventListener("click", () => alert("1"));
From f1c6aad7f9210f9ddeab4e7b21ce17c8d3a617f5 Mon Sep 17 00:00:00 2001
From: emptywork <22065214+EmptyWork@users.noreply.github.com>
Date: Sun, 28 Nov 2021 03:32:46 +0900
Subject: [PATCH 11/17] Translate Event: Browser-Event/Article.md - Handle
---
.../01-introduction-browser-events/article.md | 70 +++++++++----------
1 file changed, 35 insertions(+), 35 deletions(-)
diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md
index 1cdeddf9e..d37e9c177 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -26,105 +26,105 @@ Berikut ini daftar peristiwa DOM yang paling berguna:
Masih banyak lagi peristiwa lain. Kita akan membahas lebih detail tentang peristiwa tertentu pada bab selanjutnya.
-## Event handlers
+## Pengendali peristiwa (_Event handlers_)
-To react on events we can assign a *handler* -- a function that runs in case of an event.
+Untuk menanggapi sebuah perristiwa kita dapat membuat pengendali -- sebuah fungsi yang akan dijalankan pada saat peristiwa itu terjadi.
-Handlers are a way to run JavaScript code in case of user actions.
+Pengendali adalah sebuah cara untuk menjalankan kode Javascript pada saat pengguna melakukan sesuatu.
-There are several ways to assign a handler. Let's see them, starting from the simplest one.
+Ada banyak cara untuk membuat sebuah handler. Mari kita pelajari, dimulai dari yang paling sederhana.
-### HTML-attribute
+### Atribut HTML (_HTML-attribute_)
-A handler can be set in HTML with an attribute named `on
`.
+Sebuah pengendali bisa di atur pada HTML dengan menggunakan atribute `on`.
-For instance, to assign a `click` handler for an `input`, we can use `onclick`, like here:
+Contohnya, untuk mengatur sebuah pengendali `klik` untuk `input`, kita bisa gunakan `onclick`, seperti ini:
```html run
-`.
+Sebuah pengendali bisa di atur menggunakan properti DOM`on`.
-For instance, `elem.onclick`:
+Contohnya, `elem.onclick`:
```html autorun
-` hilang pada saat di klik.
diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
index f7b1ae759..6d1d795c6 100644
--- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
@@ -1,6 +1,6 @@
Jawabannya: `1` dan `2`.
-Pengendali pertama dijalankan, karena tidak di hapuskan oleh `removeEventListener`. Untuk menhapuskan pengendali kita harus meneruskan secara tepat fungsi yang telah di atrus. Dan pada kode sebuah fungsi baru di teruskan, terlihat sama, tapi berbeda fungsi.
+Pengendali pertama dijalankan, karena tidak di hapuskan oleh `removeEventListener`. Untuk menghapuskan pengendali kita harus meneruskan secara tepat fungsi yang telah di atur. Dan pada kode sebuah fungsi baru di teruskan, terlihat sama, tapi berbeda fungsi.
Untuk menghapuskan objek fungsi, kita harus menyimpan refensi ke fungsi tersebut, seperti ini:
diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md
index d37e9c177..b62199a2f 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -1,6 +1,6 @@
# Pengenalan ke peristiwa peramban (_browser events_)
-*Sebuah Peristiwa* adalah penanda bahwa sesuatu telah terjadi. Semua _DOM nodes_ menghasilakan sebuah penanda (tapi peristiwa tidak hanya terbatas pada DOM).
+*Sebuah Peristiwa* adalah penanda bahwa sesuatu telah terjadi. Semua _DOM nodes_ menghasilkan sebuah penanda (tapi peristiwa tidak hanya terbatas pada DOM).
Berikut ini daftar peristiwa DOM yang paling berguna:
From e05962040e9a31d0a4e4cc37e81ad988f5764c77 Mon Sep 17 00:00:00 2001
From: emptywork <22065214+EmptyWork@users.noreply.github.com>
Date: Sun, 28 Nov 2021 19:42:04 +0900
Subject: [PATCH 13/17] Translate Event: Browser-Event/Article.md - 50%
---
.../01-introduction-browser-events/article.md | 107 +++++++++---------
1 file changed, 52 insertions(+), 55 deletions(-)
diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md
index b62199a2f..3e7e7aa1d 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -126,131 +126,128 @@ Pada contoh dibawah menambah sebuah pengendali menggunakan Javascript akan menim
Untuk menghapus sebuah pengendali -- atur `elem.onclick = null`
-## Accessing the element: this
+## Mengakses elemen: this
-The value of `this` inside a handler is the element. The one which has the handler on it.
+nilai dari `this` didalam pengendali adalah elemen tersebut. Elemen yang dimana pengendali itu berada.
-In the code below `button` shows its contents using `this.innerHTML`:
+Pada kode dibawah `button` menampilkan kontennya dengan menggunakan `this.innerHTML`:
```html height=50 autorun
-
Click me
+
Klik saya
```
-## Possible mistakes
+## Kemungkinan kesalahan
-If you're starting to work with events -- please note some subtleties.
+Jika kamu mulai bekerja dengan menggunakan peristiwa -- harap perhatikan beberapa detail.
-We can set an existing function as a handler:
+Kita bisa mengatur sebuah fungsi yang telah ada sebagai pengendali:
```js
-function sayThanks() {
- alert('Thanks!');
+function ucapkanTerimaKasih() {
+ alert('Terima Kasih!');
}
-elem.onclick = sayThanks;
+elem.onclick = ucapkanTerimaKasih;
```
-
-But be careful: the function should be assigned as `sayThanks`, not `sayThanks()`.
+Tetapi berhati-hatilah: fungsi harus di atur sebagai `ucapkanTerimaKasih`, bukan `ucapkanTerimaKasih()`.
```js
-// right
-button.onclick = sayThanks;
+// benar
+button.onclick = ucapkanTerimaKasih;
-// wrong
-button.onclick = sayThanks();
+// salah
+button.onclick = ucapkanTerimaKasih();
```
+Jika kita tambahkan tanda kurung, maka `ucapkanTerimaKasih()` menjadi proses pemanggilan fungsi. Jadi baris terakhir akan mengambil *hasil* dari pengeksekusian fungsi, yang merupakan `tidak terdefinisi` (_`undefined`_ — karena fungsi tidak mengembalikan apapun), dan mengatur nilai itu ke peristiwa `onclick`. Maka peristiwa tersebut tidak akan menjalankan apapun.
-If we add parentheses, then `sayThanks()` becomes is a function call. So the last line actually takes the *result* of the function execution, that is `undefined` (as the function returns nothing), and assigns it to `onclick`. That doesn't work.
-
-...On the other hand, in the markup we do need the parentheses:
+...Namun, jika kita menambahkan secara langsung ke HTML, maka kita harus menambahkan tanda kurung:
```html
-
+
```
-The difference is easy to explain. When the browser reads the attribute, it creates a handler function with body from the attribute content.
+Perbedaannya mudah untuk di jelaskan. Pada saat peramban membaca atribute, peramban akan membuat fungsi pengendali yang didalamnya terdapat konten dari atribut tersebut.
-So the markup generates this property:
+Jadi HTML akan menghasilkan properti ini:
```js
button.onclick = function() {
*!*
- sayThanks(); // <-- the attribute content goes here
+ ucapkanTerimaKasih(); // <-- konten dari atribut akan ditambahkan kesini
*/!*
};
```
-**Don't use `setAttribute` for handlers.**
+**Jangan gunakna `setAttribute` untuk membuat pengendali.**
-Such a call won't work:
+Penggunaan tersebut tidak akan berjalan:
```js run no-beautify
-// a click on will generate errors,
-// because attributes are always strings, function becomes a string
+// sebuah klik pada akan menghasilakn eror
+// karena atribute akan selalu menjadi teks (string), dimana fungsi akan menjadi teks (string)
document.body.setAttribute('onclick', function() { alert(1) });
```
-**DOM-property case matters.**
+**Properti DOM mementingkan kesamaan huruf.**
-Assign a handler to `elem.onclick`, not `elem.ONCLICK`, because DOM properties are case-sensitive.
+Atur sebuah pengendali ke `elem.onclick`, bukan `elem.ONCLICK`, karena properti DOM mementingkan kesamaan huruf (_case-sensitive_).
-## addEventListener
+## tambahkanPendengarPeristiwa (_addEventListener_)
-The fundamental problem of the aforementioned ways to assign handlers -- we can't assign multiple handlers to one event.
+Salah satu masalah mendasar pada cara mengatur pengedali sebelumnya -- kita tidak bisa mengatur beberapa pengendali pada sebuah peristiwa.
-Let's say, one part of our code wants to highlight a button on click, and another one wants to show a message on the same click.
+Mari kata, sebuah bagian pada koded kita ingin menyoroti sebuah tombol pada saat diklik, dan satu lagi ingin menunjukan seubah pesan pada proses pengklikan tersebut.
-We'd like to assign two event handlers for that. But a new DOM property will overwrite the existing one:
+Kita ingin mengatur dua pengendali peristiwa untuk hal tersebut. Tapi properti DOM yang baru akan menimpa properti DOM yang telah ada.
```js no-beautify
input.onclick = function() { alert(1); }
// ...
-input.onclick = function() { alert(2); } // replaces the previous handler
+input.onclick = function() { alert(2); } // menganti pengedali yang lama
```
+Pengembang dari standar situs web paham sejak lama, dan menyarankan cara alternatif untuk mengelola pengendali menggunakan metode khusus `addEventListener` dan `removeEventListener`. Kedua hal tersebut tidak memiliki permasalahan seperti itu.
-Developers of web standards understood that long ago and suggested an alternative way of managing handlers using special methods `addEventListener` and `removeEventListener`. They are free of such a problem.
-
-The syntax to add a handler:
+Sintaks (_syntax_) untuk menambahkan sebuah pengendali:
```js
element.addEventListener(event, handler, [options]);
```
-`event`
-: Event name, e.g. `"click"`.
+`peristiwa`/`event`
+: nama Peristiwa, contoh `"click"`.
-`handler`
-: The handler function.
+`pengendali`/`handler`
+: pengendali fungsi.
-`options`
-: An additional optional object with properties:
- - `once`: if `true`, then the listener is automatically removed after it triggers.
- - `capture`: the phase where to handle the event, to be covered later in the chapter
. For historical reasons, `options` can also be `false/true`, that's the same as `{capture: false/true}`.
- - `passive`: if `true`, then the handler will not call `preventDefault()`, we'll explain that later in .
+`pilihan`/`options`
+: sebuah objek pilihan tambahan dengan properti:
+ - `once`: jika `true`, maka pendengar akan secara otomatis dihapus setelah terpicu.
+ - `capture`: fase dimana untuk menangani peristiwa, akan di bahas lebih lanjut pada bab . untuk alasan sejarah, `options` bisa juga diatur `false/true`, sama halnya dengan `{capture: false/true}`.
+ - `passive`: jika `true`, maka pengendali tidak akan memanggil `preventDefault()`, kita akan membahas lebih lanjut pada bab .
-To remove the handler, use `removeEventListener`:
+Untuk menghapus pengendali, gunakan `removeEventListener`:
```js
element.removeEventListener(event, handler, [options]);
```
-````warn header="Removal requires the same function"
-To remove a handler we should pass exactly the same function as was assigned.
+````warn header="Penghapusan membutuhkan fungsi yang sama"
+Untuk menghapus sebuah pengendali kita melewatkan fungsi yang sama dengan yang kita atur.
-This doesn't work:
+Ini tidak akan berfungsi:
```js no-beautify
-elem.addEventListener( "click" , () => alert('Thanks!'));
+elem.addEventListener( "click" , () => alert('Terima Kasih!'));
// ....
-elem.removeEventListener( "click", () => alert('Thanks!'));
+elem.removeEventListener( "click", () => alert('Terima Kasih!'));
```
-The handler won't be removed, because `removeEventListener` gets another function -- with the same code, but that doesn't matter, as it's a different function object.
+Pengedali tidak akan dihapus, karena `removeEventListener` mendapat sebuah fungsi lain -- dengan kode yang sama, tetapi hal tersebut tidak penting, karena itu merupakan objek fungsi yang berbeda.
-Here's the right way:
+Inilah cara yang benar:
```js
function handler() {
- alert( 'Thanks!' );
+ alert( 'Terima Kasih!' );
}
input.addEventListener("click", handler);
From a9f727ef275400c09d1eb31258a247ec31ae5941 Mon Sep 17 00:00:00 2001
From: emptywork <22065214+EmptyWork@users.noreply.github.com>
Date: Sun, 28 Nov 2021 19:53:26 +0900
Subject: [PATCH 14/17] Translate Event: move-ball-field/source.view
---
.../04-move-ball-field/source.view/index.html | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html
index 34f9c88ae..ae9943da1 100644
--- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html
@@ -15,9 +15,8 @@
-
- Click on a field to move the ball there.
-
From 206dfa7950238767cf0fd58497a0c62ede833462 Mon Sep 17 00:00:00 2001
From: emptywork <22065214+EmptyWork@users.noreply.github.com>
Date: Sun, 28 Nov 2021 20:07:33 +0900
Subject: [PATCH 15/17] Translate Event: move-ball-field/solution.view
---
.../04-move-ball-field/solution.view/index.html | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html
index 3ebe8739e..8d796ee33 100644
--- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html
@@ -27,7 +27,7 @@
- Click on a field to move the ball there.
+ Klik pada lapangan untuk memindahkan bola kesana.