diff --git a/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md b/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md index 4d175ca01..2ef3c882b 100644 --- a/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md +++ b/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md @@ -1,16 +1,16 @@ -When the browser reads the `on*` attribute like `onclick`, it creates the handler from its content. +Pada saat _browser_ membaca atribut `on*` seperti `onclick`, _browser_ akan membuat sebuah penangan (_handler_) dari kontennya. -For `onclick="handler()"` the function will be: +Untuk `onclick"handler()"` fungsinya akan menjadi: ```js function(event) { - handler() // the content of onclick + handler() // konten dari onclick } ``` -Now we can see that the value returned by `handler()` is not used and does not affect the result. +Sekarang kita bisa melihat bahwa nilai yang dikembalikan oleh `handler()` tidak digunakan dan tidak mempengaruhi hasilnya. -The fix is simple: +Cara memperbaikinnya mudah: ```html run -the browser will go to w3.org +browser akan membuka w3.org ``` -The browser follows the URL on click, but we don't want it. +_browser_ akan mengikuti URL yang di klik, tapi kita tidak mau hal itu terjadi. -How to fix? +Bagaimana cara memperbaikinya? diff --git a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.md b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.md index 25079cb8d..df53bc7ef 100644 --- a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.md +++ b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.md @@ -1,5 +1,5 @@ -That's a great use of the event delegation pattern. +Itu merupakan salah satu cara yang bagus dalam pemanfaatan pola delegasi peristiwa. -In real life instead of asking we can send a "logging" request to the server that saves the information about where the visitor left. Or we can load the content and show it right in the page (if allowable). +Pada kehidupan nyata kita bisa mengirim permintaan "logging" ke server yang menyimpan informasi tentang dari mana pengujung meninggalkan website daripada menanyakannya secara langsung. Atau kita bisa memuat konten dan menunjukannya tepat pada halaman (jika diizinkan). -All we need is to catch the `contents.onclick` and use `confirm` to ask the user. A good idea would be to use `link.getAttribute('href')` instead of `link.href` for the URL. See the solution for details. +Yang kita butuhkan hanyalah menangkap `contents.onclick` dan menggunakan `confim` untuk menanyakan pengguna. Sebuah ide bagus adalah dengan menggunakan `link.getAttribute('href')` dari pada menggunakan `link.href` untuk URL. Lihat solusinya untuk rincian. diff --git a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.view/index.html b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.view/index.html index 51ac0838b..92f5f40b3 100644 --- a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.view/index.html +++ b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.view/index.html @@ -14,9 +14,9 @@
- #contents + #kontent

- How about to read Wikipedia or visit W3.org and learn about modern standards? + Bagaimana jika membaca di Wikipedia atau kunjungi W3.org dan belajar tentang standar terbaru?

@@ -24,7 +24,7 @@ contents.onclick = function(event) { function handleLink(href) { - let isLeaving = confirm(`Leave for ${href}?`); + let isLeaving = confirm(`Pergi ke ${href}?`); if (!isLeaving) return false; } diff --git a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/source.view/index.html b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/source.view/index.html index f0c934391..37610b7ae 100644 --- a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/source.view/index.html +++ b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/source.view/index.html @@ -14,9 +14,9 @@
- #contents + #kontent

- How about to read Wikipedia or visit W3.org and learn about modern standards? + Bagaimana jika membaca di Wikipedia atau kunjungi W3.org dan belajar tentang standar terbaru?

diff --git a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md index 6ca456c2c..6ba97cf3f 100644 --- a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md +++ b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md @@ -1,16 +1,15 @@ importance: 5 --- +# Tangkap link pada elemen -# Catch links in the element +Buat semua link yang ada didalam elemen dengan `id="contents"` akan menanyakan kepada pengguna jika mereka mau meninggalkan website. Dan jika mereka tidak mau maka halaman tidak akan berpindah. -Make all links inside the element with `id="contents"` ask the user if they really want to leave. And if they don't then don't follow. - -Like this: +Seperti ini: [iframe height=100 border=1 src="solution"] -Details: +Rincian: -- HTML inside the element may be loaded or regenerated dynamically at any time, so we can't find all links and put handlers on them. Use event delegation. -- The content may have nested tags. Inside links too, like `...`. +- HTML didalam elemen bisa di muat dan di buat kembali secara dinamis secara acak, jadi kita tidak bisa menemukan semua link dan memberikan penangan (_handler_). Gunakan delegasi peristiwa. +- Kontent bisa saja merupakan tag bersarang. Di dalam link juga, seperti `...`. diff --git a/2-ui/2-events/04-default-browser-action/article.md b/2-ui/2-events/04-default-browser-action/article.md index ceac160c1..02b0bf7e8 100644 --- a/2-ui/2-events/04-default-browser-action/article.md +++ b/2-ui/2-events/04-default-browser-action/article.md @@ -1,43 +1,43 @@ -# Browser default actions +# _Browser default actions_ -Many events automatically lead to certain actions performed by the browser. +Banyak peristiwa yang otomatis menjalankan sebuah aksi oleh _browser_. -For instance: +Contohnya: -- A click on a link - initiates navigation to its URL. -- A click on a form submit button - initiates its submission to the server. -- Pressing a mouse button over a text and moving it - selects the text. +- Sebuah klik pada link - akan mengarahkan ke URL tersebut. +- Sebuah klik pada tombol formulir - akan melakukan proses pengiriman data formulir ke _server_. +- Menekan tombol _mouse_ pada sebuah teks dan mengerakannya - akan memilih teks tersebut. -If we handle an event in JavaScript, we may not want the corresponding browser action to happen, and want to implement another behavior instead. +Jika ke menanggani sebuah peristiwa di JavaScript, kita mungkin tidak mau aksi bawaan dari _browser_ terjadi, dan kita mau membuat sebuah aksi baru. -## Preventing browser actions +## Mencegah aksi _browser_ -There are two ways to tell the browser we don't want it to act: +Ada 2 cara untuk memberitahukan _browser_ bahwa kita tidak mau peristiwa itu terjadi: -- The main way is to use the `event` object. There's a method `event.preventDefault()`. -- If the handler is assigned using `on` (not by `addEventListener`), then returning `false` also works the same. +- Cara utama dengan menggunakan objek `event`. Ada sebuah metode dengan nama `event.preventDefault()`. +- Jika penangan (_handler_) di atur menggunakan `on` (bukan `addEventListener`), maka mengembalikan `false` juga bisa befungsi. -In this HTML a click on a link doesn't lead to navigation, browser doesn't do anything: +Pada HTML dibawah, sebuah klik pada link tidak akan memindahkan halaman, _browser_ tidak melakukan apapun: ```html autorun height=60 no-beautify -Click here -or -here +Klik disini +atau +disini ``` -In the next example we'll use this technique to create a JavaScript-powered menu. +Pada contoh selanjutnya kita akan menggunakan teknik untuk menu yang dibuat oleh JavaScript. -```warn header="Returning `false` from a handler is an exception" -The value returned by an event handler is usually ignored. +```warn header="Returning `false` dari sebuah penangan adalah sebuah pengecualian" +Nilai yang di kembalikan oleh penangan (_handler_) bisanya dibiar. -The only exception is `return false` from a handler assigned using `on`. +Hanya pada `return false` terdapat pengecualian jika tejadi pada sebuah penangan (_handler_) yang diatur menggunakan `on`. -In all other cases, `return` value is ignored. In particular, there's no sense in returning `true`. +Pada semua kasus yang lain, nilai `return` akan dibiarkan. Khusunya, tidak masuk akal untuk mengembalikan `true`. ``` -### Example: the menu +### Contoh: menu -Consider a site menu, like this: +Bayangkan menu situs, seperti ini: ```html ``` -Here's how it looks with some CSS: +Dan begini tampilannya jika ditambahkan CSS: [iframe height=70 src="menu" link edit] -Menu items are implemented as HTML-links ``, not buttons ` + - ``` -Now, in addition to that context menu we'd like to implement document-wide context menu. +Sekarang, selain menu konteks itu, kami ingin menerapkan menu konteks seluruh dokumen. -Upon right click, the closest context menu should show up. +Setelah klik kanan, menu konteks terdekat akan muncul. ```html autorun height=80 no-beautify run -

Right-click here for the document context menu

- +

Klik kanan menampilkan menu konteks browser

+ ``` -The problem is that when we click on `elem`, we get two menus: the button-level and (the event bubbles up) the document-level menu. +Masalahnya adalah ketika kita mengklik `elem`, kita mendapatkan dua menu: level tombol dan (peristiwa muncul) menu level dokumen. -How to fix it? One of solutions is to think like: "When we handle right-click in the button handler, let's stop its bubbling" and use `event.stopPropagation()`: +Bagaimana memperbaikinya? Salah satu solusinya adalah dengan berpikir seperti: "Ketika kita menangani klik kanan pada pengendali tombol, mari hentikan gelembungnya" dan gunakan `event.stopPropagation()`: ```html autorun height=80 no-beautify run -

Right-click for the document menu

- +

Klik kanan menampilkan menu konteks browser

+ ``` -Now the button-level menu works as intended. But the price is high. We forever deny access to information about right-clicks for any outer code, including counters that gather statistics and so on. That's quite unwise. +Sekarang menu tingkat tombol berfungsi sebagaimana dimaksud. Tapi bayarannya tinggi. Kami selamanya menolak akses ke informasi dari klik kanan untuk kode yang lain, termasuk penghitung yang mengumpulkan statistik dan sebagainya. Hal ini sangat tidak bijaksana. -An alternative solution would be to check in the `document` handler if the default action was prevented? If it is so, then the event was handled, and we don't need to react on it. +Solusi alternatif adalah dengan memeriksa penangan (_handler_) `document` jika tindakan bawaan dicegah? Jika demikian, maka peristiwa itu ditangani, dan kita tidak perlu bereaksi. ```html autorun height=80 no-beautify run -

Right-click for the document menu (added a check for event.defaultPrevented)

- +

Klik kanan menampilkan menu konteks browser (Menambah pemeriksa untuk event.defaultPrevented)

+ ``` -Now everything also works correctly. If we have nested elements, and each of them has a context menu of its own, that would also work. Just make sure to check for `event.defaultPrevented` in each `contextmenu` handler. +Sekarang semuanya berfungsi dengan benar. Jika kita memiliki elemen bersarang, dan masing-masing elemen memiliki menu konteksnya sendiri, itu juga akan berfungsi. Pastikan untuk memeriksa `event.defaultPrevented` di setiap penangan (_handler_) `contextmenu`. -```smart header="event.stopPropagation() and event.preventDefault()" -As we can clearly see, `event.stopPropagation()` and `event.preventDefault()` (also known as `return false`) are two different things. They are not related to each other. +```smart header="event.stopPropagation() dan event.preventDefault()" +Seperti yang bisa kita lihat dengan jelas, `event.stopPropagation()` dan `event.preventDefault()` (juga dikenal dengan `return false`) adalah dua hal yang berbeda. Dan mereka tidak terkait satu dengan yang lain. ``` -```smart header="Nested context menus architecture" -There are also alternative ways to implement nested context menus. One of them is to have a single global object with a handler for `document.oncontextmenu`, and also methods that allow us to store other handlers in it. +```smart header="Arsitektur menu konteks bersarang" +Ada juga cara alternatif untuk mengimplementasikan menu konteks bersarang. Salah satunya adalah memiliki satu objek global dengan penangan (_handler_) untuk `document.oncontextmenu`, dan juga metode yang memungkinkan kita untuk menyimpan penangan (_handler_) lain di dalamnya. -The object will catch any right-click, look through stored handlers and run the appropriate one. +Objek akan menangkap klik kanan apa pun, melihat melalui penangan (_handler_) yang tersimpan dan menjalankan yang sesuai. -But then each piece of code that wants a context menu should know about that object and use its help instead of the own `contextmenu` handler. +Tapi kemudian setiap bagian kode yang menginginkan menu konteks harus tahu tentang objek itu dan menggunakan bantuannya alih-alih penangan (_handler_) `contextmenu` sendiri. ``` -## Summary +## Rincian -There are many default browser actions: +Ada banyak aksi bawaan _browser_: -- `mousedown` -- starts the selection (move the mouse to select). -- `click` on `` -- checks/unchecks the `input`. -- `submit` -- clicking an `` or hitting `key:Enter` inside a form field causes this event to happen, and the browser submits the form after it. -- `keydown` -- pressing a key may lead to adding a character into a field, or other actions. -- `contextmenu` -- the event happens on a right-click, the action is to show the browser context menu. -- ...there are more... +- `mousedown` -- memulai pemilihan (gerakkan mouse untuk memilih). +- `click` pada `` -- centang/hapus centang pada `input`. +- `submit` -- mengklik `` atau menekan `key:Enter` di dalam bidang formulir menyebabkan peristiwa ini terjadi, dan browser mengirimkan formulir setelahnya. +- `keydown` -- menekan tombol dapat menyebabkan penambahan karakter ke dalam bidang, atau tindakan lainnya. +- `contextmenu` -- peristiwa terjadi dengan klik kanan, tindakannya adalah menampilkan menu konteks browser. +- ...ada lagi... -All the default actions can be prevented if we want to handle the event exclusively by JavaScript. +Semua tindakan bawaan dapat dicegah jika kita ingin menangani peristiwa (_event_) secara eksklusif dengan JavaScript. -To prevent a default action -- use either `event.preventDefault()` or `return false`. The second method works only for handlers assigned with `on`. +Untuk mencegah peristiwa (_event_) bawaan -- gunakan `event.preventDefault()` atau `return false`. Metode kedua hanya berfungsi untuk penangan (_handler_) yang ditetapkan dengan `on`. -The `passive: true` option of `addEventListener` tells the browser that the action is not going to be prevented. That's useful for some mobile events, like `touchstart` and `touchmove`, to tell the browser that it should not wait for all handlers to finish before scrolling. +Pilihan `passive: true` dari `addEventListener` memberi tahu _browser_ bahwa tindakan tersebut tidak akan dicegah. Itu berguna untuk beberapa aktivitas seluler, seperti `touchstart` dan `touchmove`, untuk memberi tahu _browser_ bahwa _browser_ tidak boleh menunggu semua penangan (_handler_) selesai sebelum menggulir. -If the default action was prevented, the value of `event.defaultPrevented` becomes `true`, otherwise it's `false`. +Jika tindakan bawaan dicegah, nilai `event.defaultPrevented` menjadi `true`, jika tidak maka `false`. -```warn header="Stay semantic, don't abuse" -Technically, by preventing default actions and adding JavaScript we can customize the behavior of any elements. For instance, we can make a link `` work like a button, and a button `