` disappear when we click it. +Tambah Javascript ke `button` untuk membuat `

` hilang pada saat di klik. -The demo: +demo: [iframe border=1 src="solution" height=80] 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 cded5b622..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 @@ -Can use `this` in the handler to reference "the element itself" here: +Bisa gunakan `this` pada penangan (_handler_) untuk mereferensi "elemen itu sendiri": ```html run height=50 - + ``` 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: + ``` 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..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,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 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. -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")); 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.
@@ -39,29 +39,29 @@ - + ``` -As we know, HTML attribute names are not case-sensitive, so `ONCLICK` works as well as `onClick` and `onCLICK`... But usually attributes are lowercased: `onclick`. +Seperti yang kita ketahui, atribut HTML tidak _case-sensitive_, jadi `ONCLICK`, `onClick` dan `onCLICK` bisa digunakan... Tapi biasanya atribut menggunakan huruf kecil: `onclick`. -### DOM property +### Properti DOM (_DOM property_) -We can assign a handler using a DOM property `on`. +Sebuah pengendali bisa di atur menggunakan properti DOM`on`. -For instance, `elem.onclick`: +Contohnya, `elem.onclick`: ```html autorun - + ``` -If the handler is assigned using an HTML-attribute then the browser reads it, creates a new function from the attribute content and writes it to the DOM property. +Jika pengendali di atur menggunakan atribut-HTML maka peramban membaca, membuat sebuah fungsi baru dari konten atribute dan menulisnya pada properti DOM. -So this way is actually the same as the previous one. +Jadi cara ini sebenarnya sama dengan yang sebelumnya. -These two code pieces work the same: +Kedua kode ini memiliki cara kerja yang sama: -1. Only HTML: +1. Hanya HTML: ```html autorun height=50 - + ``` 2. HTML + JS: ```html autorun height=50 - + ``` -In the first example, the HTML attribute is used to initialize the `button.onclick`, while in the second example -- the script, that's all the difference. +Pada contoh pertama, atribut HTML digunakan untuk menginisialisasikan `tombol.onclick`, sedangkan pada contoh kedua -- _script_, dan hanya itu perbedaanya. -**As there's only one `onclick` property, we can't assign more than one event handler.** +**Karena hanya ada satu properti `onclick`, kita tidak bisa mengatur lebih dari satu pengendali peristiwa.** -In the example below adding a handler with JavaScript overwrites the existing handler: +Pada contoh dibawah menambah sebuah pengendali menggunakan Javascript akan menimpa pengendali yang sudah ada: ```html run height=50 autorun - + ``` -To remove a handler -- assign `elem.onclick = null`. +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 - + ``` -## 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(); ``` -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. +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. -...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 ``` -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. +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. -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); @@ -258,27 +258,27 @@ input.addEventListener("click", handler); input.removeEventListener("click", handler); ``` -Please note -- if we don't store the function in a variable, then we can't remove it. There's no way to "read back" handlers assigned by `addEventListener`. +Harap dicatat -- Jika kita tidak menyimpan fungsi tersebut kedalam variable, maka kita tidak bisa menghapusnya. Tidak ada cara untuk "membaca kembali" pengendali yang di atur pada `addEventListener`. ```` -Multiple calls to `addEventListener` allow to add multiple handlers, like this: +Beberapa pemanggilan ke `addEventListener` mengijinkan untuk menambahkan beberapa pengendali, seperti ini: ```html run no-beautify - + ``` diff --git a/2-ui/2-events/index.md b/2-ui/2-events/index.md index f4996083c..e33917062 100644 --- a/2-ui/2-events/index.md +++ b/2-ui/2-events/index.md @@ -1,3 +1,3 @@ -# Introduction to Events +# Pengenalan ke Peristiwa -An introduction to browser events, event properties and handling patterns. +Sebuah pengenalan ke peristiwa peramban (_browser events_), properti peristiwa (_event properties_) dan tanda-tanda penanganan (_handling patterns_).