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 6d1d795c6..9d902d675 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 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. +penangan pertama dijalankan, karena tidak di hapuskan oleh `removeEventListener`. Untuk menghapuskan penangan 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: @@ -13,4 +13,4 @@ button.addEventListener("click", handler); button.removeEventListener("click", handler); ``` -Pengendali `button.onclick` bekerja secara sendiri dan sebagai tambahan untuk `addEvenetListener`. +penangan `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 b3ec43664..11a556d66 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 --- -# Pengendali mana yang dijalankan? +# Penangan mana yang dijalankan? Ada sebuah tombol pada variable. Tidak ada pengedali di tombol tersebut. -Manakah pengendali yang dijalankan pada saat klik pada kode berikut ini? Manakah `alert` yang akan ditunjukan? +Manakah penangan 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.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md index b04cb8231..ee7cb5dc4 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md @@ -1,11 +1,11 @@ -First we need to choose a method of positioning the ball. +Pertama kita perlu memilih metode untuk memposisikan bola. -We can't use `position:fixed` for it, because scrolling the page would move the ball from the field. +Kita tidak dapat menggunakan `position:fixed` untuk itu, karena pada saat halaman digulir bola akan berpindah dari lapangan. -So we should use `position:absolute` and, to make the positioning really solid, make `field` itself positioned. +Jadi kita sebaiknya menggunakan `position:absolute` dan, untuk membuat posisinya benar-benar tepat, buat lapangan(_`field`_) itu sendiri diposisikan. -Then the ball will be positioned relatively to the field: +Kemudian bola akan diposisikan relatif terhadap lapangan(_`field`_): ```css #field { @@ -16,36 +16,36 @@ Then the ball will be positioned relatively to the field: #ball { position: absolute; - left: 0; /* relative to the closest positioned ancestor (field) */ + left: 0; /* relatif ke posisi terdekat blok atas (lapangan) */ top: 0; - transition: 1s all; /* CSS animation for left/top makes the ball fly */ + transition: 1s all; /* Animasi CSS untuk left/top untuk membuat bolanya terbang */ } ``` -Next we need to assign the correct `ball.style.left/top`. They contain field-relative coordinates now. +Selanjutnya kita harus mengatur dengan benar `ball.style.left/top`. Mereka memiliki koordinat relatif ke lapangan(_`field`_) sekarang. -Here's the picture: +Berikut ini gambarnya: ![](move-ball-coords.svg) -We have `event.clientX/clientY` -- window-relative coordinates of the click. +Kita memiliki `event.clientX/clientY` -- koordinat relatif jendela (_window_) dari klik. -To get field-relative `left` coordinate of the click, we can substract the field left edge and the border width: +Untuk mendapatkan koordinat kiri relatif terhadap lapangan(_`field`_), kita kurangkan dengan nilai dari ujung dan pembatas kiri lapangan: ```js let left = event.clientX - fieldCoords.left - field.clientLeft; ``` -Normally, `ball.style.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge, not center, would be under the mouse cursor. +Biasanya, `ball.style.left` artinya "ujung kiri dari elemen" (bola). Jadi kita mengatur nilai `left`, kemudian ujung bola, bukan tengah, akan berada tepat dibawah kursor mouse. -We need to move the ball half-width left and half-height up to make it center. +Kita perlu memindahkan bola setengah lebar kiri dan setengah tinggi atas untuk membuatnya di tengah. -So the final `left` would be: +Jadi nilai terakhir `left` akan menjadi: ```js let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2; ``` -The vertical coordinate is calculated using the same logic. +Koordinat vertikal di ukur dengan menggunakan logika yang sama. -Please note that the ball width/height must be known at the time we access `ball.offsetWidth`. Should be specified in HTML or CSS. +Harap dicatat bahwa lebar/tinggi bola harus di ketahui pada saat kita mengakses `ball.offsetWidth`. Sebaiknya di atur pada HTML atau CSS. diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md index 7554a2f09..26bca188d 100644 --- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md @@ -1,48 +1,47 @@ # HTML/CSS -First let's create HTML/CSS. +Pertama buat HTML/CSS. -A menu is a standalone graphical component on the page, so it's better to put it into a single DOM element. +Sebuah menu adalah komponen tersendiri pada halaman, jadi lebih baik untuk menaruhnya kedalam satu elemen DOM. -A list of menu items can be laid out as a list `ul/li`. +Sebuah daftar dari item menu bisa dapat diatur kedalam daftar menggunakan `ul/li`. -Here's the example structure: +Ini contoh strukturnya: ```html
- Sweeties (click me)! + Manis-Manis (Tekan saya)!
``` -We use `` for the title, because `
` has an implicit `display:block` on it, and it will occupy 100% of the horizontal width. +Kita dapat menggunakan `` untuk judul, karena `
` memiliki `display:block`, dan akan memenuhi 100% horisontal lebar elemen. -Like this: +Seperti ini: ```html autorun height=50 -
Sweeties (click me)!
+
Manis-Manis (Tekan saya)!
``` -So if we set `onclick` on it, then it will catch clicks to the right of the text. +Jadi jika kita mengatur `onclick` pada judul, maka itu akan menangkap klik diselah kanan teks. -As `` has an implicit `display: inline`, it occupies exactly enough place to fit all the text: +Sedangkan `` memiliki `display:inline`, dan akan memenuhi ruang yang cukup sesuai dengan teks: ```html autorun height=50 -Sweeties (click me)! +Manis-Manis (Tekan saya)! ``` -# Toggling the menu +# Membuka dan menutup menu -Toggling the menu should change the arrow and show/hide the menu list. +Membuka dan menutup menu seharusnya menganti posisi anak panah dan menunjukan atau menyembunyikan daftar menu. -All these changes are perfectly handled by CSS. In JavaScript we should label the current state of the menu by adding/removing the class `.open`. - -Without it, the menu will be closed: +Semua pergantian ini sangat sempurna untuk di tanggani oleh CSS. Pada Javascript kita harus memberi label pada kondisi menu saat ini dengan menambahkan/menghapuskan kelas(_class_) `.open`. +Tanpanya, menu akan tetap tertutup: ```css .menu ul { margin: 0; @@ -58,7 +57,7 @@ Without it, the menu will be closed: } ``` -...And with `.open` the arrow changes and the list shows up: +...Dan dengan `.open` anak panah akan berubah dan daftar akan kelihatan: ```css .menu.open .title::before { diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html index 0c1996a7e..c89025fef 100644 --- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html +++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html @@ -22,11 +22,11 @@ color: green; } - .menu.open .title::before { + .menu.buka .title::before { content: '▼ '; } - .menu.open ul { + .menu.buka ul { display: block; } @@ -35,11 +35,11 @@ @@ -49,7 +49,7 @@ let titleElem = menuElem.querySelector('.title'); titleElem.onclick = function() { - menuElem.classList.toggle('open'); + menuElem.classList.toggle('buka'); }; diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html index 03dded0cd..b5a3d115b 100644 --- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html +++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html @@ -5,11 +5,11 @@ - ▶ ▼ Sweeties (click me)! + ▶ ▼ Manis-Manis (Klik Saya)!
    -
  • Cake
    • -
  • Donut
    • -
  • Honey
    • +
  • Kue
    • +
  • Donat
    • +
  • Madu
diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md index 34c313710..bc8e8171a 100644 --- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md +++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md @@ -2,10 +2,10 @@ importance: 5 --- -# Create a sliding menu +# Buat sebuah menu geser -Create a menu that opens/collapses on click: +Buat sebuah menu yang terbuka/tertutup pada saat ditekan: [iframe border=1 height=100 src="solution"] -P.S. HTML/CSS of the source document is to be modified. +Tambahan: HTML/CSS dari dokumen harus dimodifikasi. diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md index 022a0d977..ad3500503 100644 --- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md @@ -1,12 +1,11 @@ -To add the button we can use either `position:absolute` (and make the pane `position:relative`) or `float:right`. The `float:right` has the benefit that the button never overlaps the text, but `position:absolute` gives more freedom. So the choice is yours. +Untuk Menambahkan tombol kita bisa menggunakan `position:absolute` (dan membuat pane `position:relative`) atau `float:right`. `float:right` memiliki keuntung dimana tombol tidak akan perna tumpang tindih dengan teks, tetapi `position:absolute` memberikan lebih banyak kebebasan. Jadi pilihannya pada kamu. -Then for each pane the code can be like: +Kemudian pada setiap `pane` kodenya akan seperti ini: ```js pane.insertAdjacentHTML("afterbegin", ''); ``` - -Then the `'); - // button becomes the first child of pane + // Tombol menjadi anak pertama dari `pane` pane.firstChild.onclick = () => pane.remove(); } diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/index.html index 07adbf985..48d26c31d 100644 --- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/index.html +++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/index.html @@ -8,21 +8,21 @@ - The button code (may need to adjust CSS): + Kode tombol (Kamu bisa mengubahnya menggunakan CSS):
-

Horse

-

The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.

+

Kuda

+

Kuda adalah salah satu dari dua subspesies Equus ferus yang masih ada. Ini adalah mamalia berkuku aneh milik keluarga taksonomi Equidae. Kuda telah berevolusi selama 45 hingga 55 juta tahun terakhir dari makhluk kecil berjari banyak, Eohippus, menjadi hewan besar berjari satu saat ini.

-

Donkey

-

The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.

+

Keledai

+

Keledai (Equus africanus asinus) adalah anggota keluarga kuda yang dijinakkan, Equidae. Nenek moyang keledai liar adalah keledai liar Afrika, E. africanus. Keledai telah digunakan sebagai hewan pekerja setidaknya selama 5000 tahun.

-

Cat

-

The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin. +

Kucing

+

Kucing domestik (bahasa Latin: Felis catus) adalah mamalia karnivora kecil yang biasanya berbulu. Mereka sering disebut kucing rumah ketika dipelihara sebagai hewan peliharaan dalam ruangan atau hanya kucing ketika tidak perlu membedakan mereka dari felids dan kucing lainnya. Kucing sering dihargai oleh manusia karena persahabatan dan kemampuan mereka untuk berburu hama.

diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md index 152cf41fe..db659248d 100644 --- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md +++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md @@ -2,12 +2,12 @@ importance: 5 --- -# Add a closing button +# Tambahkan tombol untuk menutup -There's a list of messages. +Ada sebuah daftar pesan. -Use JavaScript to add a closing button to the right-upper corner of each message. +Gunakan Javascript untuk menambahkan tombol untuk menutup pada bagian pojok kanan atas setiap pesan. -The result should look like this: +Hasil seharusnya seperti ini: [iframe src="solution" height=450] diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md index 1c6b52cea..87638df40 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md @@ -1,17 +1,18 @@ -The images ribbon can be represented as `ul/li` list of images ``. +Pita gambar bisa di diwakili sebagai `ul/li` daftar dari gambar ``. -Normally, such a ribbon is wide, but we put a fixed-size `
` around to "cut" it, so that only a part of the ribbon is visible: +Biasanya, pita seperti itu sangat luas, tapi kita akan menambahkan ukuran tetap pada `
` untuk "memotong" pita, jadi hanya sebagian dari pita yang kelihatan: ![](carousel1.svg) -To make the list show horizontally we need to apply correct CSS properties for `
  • `, like `display: inline-block`. +Untuk menampilkan daftar secara horisontal kita perlu menambahkan properti CSS yang benar pada `
  • `, seperti `display: inline-block`. -For `` we should also adjust `display`, because by default it's `inline`. There's extra space reserved under `inline` elements for "letter tails", so we can use `display:block` to remove it. +Untuk `` kita sebaiknya juga mengatur `display`, karena bawaanya merupakan `inline`. Ada +For `` we should also adjust `display`, because by default it's `inline`. Ada ruang ekstra yang disediakan di bawah elemen `inline` untuk "ekor huruf", jadi kita bisa menggunakan `display:block` untuk menghapusnya. -To do the scrolling, we can shift `
      `. There are many ways to do it, for instance by changing `margin-left` or (better performance) use `transform: translateX()`: +Untuk membuat pengulirannya, kita bisa menggeser `
        `. Ada banyak cara untuk melakukannya, contohnya dengan menganti `margin-left` atau (performa lebih baik) gunakan `transform: translateX()`: ![](carousel2.svg) -The outer `
        ` has a fixed width, so "extra" images are cut. +`
        ` luar memiliki lebar tetap, jadi gambar "ekstra" dipotong. -The whole carousel is a self-contained "graphical component" on the page, so we'd better wrap it into a single `
        ` and style things inside it. +Keseluruhan korsel(_carousel_) adalah "komponen grafis" mandiri pada halaman, jadi sebaiknya kita membungkusnya menjadi satu `
        ` dan menata elemen-elemen ke dalamnya. diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html index 2c6073316..26c33145b 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html @@ -27,7 +27,7 @@
        diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md index a6adbffa5..8e629348f 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md @@ -2,12 +2,13 @@ importance: 4 --- -# Carousel +# Korsel (_Carousel_) -Create a "carousel" -- a ribbon of images that can be scrolled by clicking on arrows. +Buat sebuah "korsel" -- +Create a "carousel" -- pita gambar yang dapat digulir dengan mengklik panah. [iframe height=200 src="solution"] -Later we can add more features to it: infinite scrolling, dynamic loading etc. +Nanti kita akan menambahkah lebih banyak fitur: pengguliran tanpa batas, pemuatan dinamis dan seterusnya. -P.S. For this task HTML/CSS structure is actually 90% of the solution. +Tambahan: untuk tugas ini, struktur HTML/CSS merupakan 90% dari solusi. 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 e8161b65d..247b73462 100644 --- a/2-ui/2-events/01-introduction-browser-events/article.md +++ b/2-ui/2-events/01-introduction-browser-events/article.md @@ -26,19 +26,19 @@ Berikut ini daftar peristiwa DOM yang paling berguna: Masih banyak lagi peristiwa lain. Kita akan membahas lebih detail tentang peristiwa tertentu pada bab selanjutnya. -## Pengendali peristiwa (_Event handlers_) +## Penangan peristiwa (_Event handlers_) -Untuk menanggapi sebuah perristiwa kita dapat membuat pengendali -- sebuah fungsi yang akan dijalankan pada saat peristiwa itu terjadi. +Untuk menanggapi sebuah perristiwa kita dapat membuat penangan -- sebuah fungsi yang akan dijalankan pada saat peristiwa itu terjadi. -Pengendali adalah sebuah cara untuk menjalankan kode Javascript pada saat pengguna melakukan sesuatu. +penangan adalah sebuah cara untuk menjalankan kode Javascript pada saat pengguna melakukan sesuatu. Ada banyak cara untuk membuat sebuah handler. Mari kita pelajari, dimulai dari yang paling sederhana. ### Atribut HTML (_HTML-attribute_) -Sebuah pengendali bisa di atur pada HTML dengan menggunakan atribute `on`. +Sebuah penangan bisa di atur pada HTML dengan menggunakan atribute `on`. -Contohnya, untuk mengatur sebuah pengendali `klik` untuk `input`, kita bisa gunakan `onclick`, seperti ini: +Contohnya, untuk mengatur sebuah penangan `klik` untuk `input`, kita bisa gunakan `onclick`, seperti ini: ```html run @@ -68,7 +68,7 @@ Seperti yang kita ketahui, atribut HTML tidak _case-sensitive_, jadi `ONCLICK`, ### Properti DOM (_DOM property_) -Sebuah pengendali bisa di atur menggunakan properti DOM`on`. +Sebuah penangan bisa di atur menggunakan properti DOM`on`. Contohnya, `elem.onclick`: @@ -83,7 +83,7 @@ Contohnya, `elem.onclick`: ``` -Jika pengendali di atur menggunakan atribut-HTML maka peramban membaca, membuat sebuah fungsi baru dari konten atribute dan menulisnya pada properti DOM. +Jika penangan di atur menggunakan atribut-HTML maka peramban membaca, membuat sebuah fungsi baru dari konten atribute dan menulisnya pada properti DOM. Jadi cara ini sebenarnya sama dengan yang sebelumnya. @@ -109,26 +109,26 @@ Kedua kode ini memiliki cara kerja yang sama: Pada contoh pertama, atribut HTML digunakan untuk menginisialisasikan `tombol.onclick`, sedangkan pada contoh kedua -- _script_, dan hanya itu perbedaanya. -**Karena hanya ada satu properti `onclick`, kita tidak bisa mengatur lebih dari satu pengendali peristiwa.** +**Karena hanya ada satu properti `onclick`, kita tidak bisa mengatur lebih dari satu penangan peristiwa.** -Pada contoh dibawah menambah sebuah pengendali menggunakan Javascript akan menimpa pengendali yang sudah ada: +Pada contoh dibawah menambah sebuah penangan menggunakan Javascript akan menimpa penangan yang sudah ada: ```html run height=50 autorun ``` -Untuk menghapus sebuah pengendali -- atur `elem.onclick = null` +Untuk menghapus sebuah penangan -- atur `elem.onclick = null` ## Mengakses elemen: this -nilai dari `this` didalam pengendali adalah elemen tersebut. Elemen yang dimana pengendali itu berada. +nilai dari `this` didalam penangan adalah elemen tersebut. Elemen yang dimana penangan itu berada. Pada kode dibawah `button` menampilkan kontennya dengan menggunakan `this.innerHTML`: @@ -140,7 +140,7 @@ Pada kode dibawah `button` menampilkan kontennya dengan menggunakan `this.innerH Jika kamu mulai bekerja dengan menggunakan peristiwa -- harap perhatikan beberapa detail. -Kita bisa mengatur sebuah fungsi yang telah ada sebagai pengendali: +Kita bisa mengatur sebuah fungsi yang telah ada sebagai penangan: ```js function ucapkanTerimaKasih() { @@ -168,7 +168,7 @@ Jika kita tambahkan tanda kurung, maka `ucapkanTerimaKasih()` menjadi proses pem ``` -Perbedaannya mudah untuk di jelaskan. Pada saat peramban membaca atribute, peramban akan membuat fungsi pengendali yang didalamnya terdapat konten dari atribut tersebut. +Perbedaannya mudah untuk di jelaskan. Pada saat peramban membaca atribute, peramban akan membuat fungsi penangan yang didalamnya terdapat konten dari atribut tersebut. Jadi HTML akan menghasilkan properti ini: ```js @@ -179,7 +179,7 @@ button.onclick = function() { }; ``` -**Jangan gunakna `setAttribute` untuk membuat pengendali.** +**Jangan gunakna `setAttribute` untuk membuat penangan.** Penggunaan tersebut tidak akan berjalan: @@ -191,15 +191,15 @@ document.body.setAttribute('onclick', function() { alert(1) }); **Properti DOM mementingkan kesamaan huruf.** -Atur sebuah pengendali ke `elem.onclick`, bukan `elem.ONCLICK`, karena properti DOM mementingkan kesamaan huruf (_case-sensitive_). +Atur sebuah penangan ke `elem.onclick`, bukan `elem.ONCLICK`, karena properti DOM mementingkan kesamaan huruf (_case-sensitive_). ## tambahkanPendengarPeristiwa (_addEventListener_) -Salah satu masalah mendasar pada cara mengatur pengedali sebelumnya -- kita tidak bisa mengatur beberapa pengendali pada sebuah peristiwa. +Salah satu masalah mendasar pada cara mengatur pengedali sebelumnya -- kita tidak bisa mengatur beberapa penangan pada sebuah peristiwa. 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. -Kita ingin mengatur dua pengendali peristiwa untuk hal tersebut. Tapi properti DOM yang baru akan menimpa properti DOM yang telah ada. +Kita ingin mengatur dua penangan peristiwa untuk hal tersebut. Tapi properti DOM yang baru akan menimpa properti DOM yang telah ada. ```js no-beautify input.onclick = function() { alert(1); } @@ -207,9 +207,9 @@ input.onclick = function() { alert(1); } 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. +Pengembang dari standar situs web paham sejak lama, dan menyarankan cara alternatif untuk mengelola penangan menggunakan metode khusus `addEventListener` dan `removeEventListener`. Kedua hal tersebut tidak memiliki permasalahan seperti itu. -Sintaks (_syntax_) untuk menambahkan sebuah pengendali: +Sintaks (_syntax_) untuk menambahkan sebuah penangan: ```js element.addEventListener(event, handler, [options]); @@ -218,23 +218,23 @@ element.addEventListener(event, handler, [options]); `peristiwa`/`event` : nama Peristiwa, contoh `"click"`. -`pengendali`/`handler` -: pengendali fungsi. +`penangan`/`handler` +: penangan fungsi. `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 . + - `passive`: jika `true`, maka penangan tidak akan memanggil `preventDefault()`, kita akan membahas lebih lanjut pada bab . -Untuk menghapus pengendali, gunakan `removeEventListener`: +Untuk menghapus penangan, gunakan `removeEventListener`: ```js element.removeEventListener(event, handler, [options]); ``` ````warn header="Penghapusan membutuhkan fungsi yang sama" -Untuk menghapus sebuah pengendali kita melewatkan fungsi yang sama dengan yang kita atur. +Untuk menghapus sebuah penangan kita melewatkan fungsi yang sama dengan yang kita atur. Ini tidak akan berfungsi: @@ -258,112 +258,112 @@ input.addEventListener("click", handler); input.removeEventListener("click", handler); ``` -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`. +Harap dicatat -- Jika kita tidak menyimpan fungsi tersebut kedalam variable, maka kita tidak bisa menghapusnya. Tidak ada cara untuk "membaca kembali" penangan yang di atur pada `addEventListener`. ```` -Beberapa pemanggilan ke `addEventListener` mengijinkan untuk menambahkan beberapa pengendali, seperti ini: +Beberapa pemanggilan ke `addEventListener` mengijinkan untuk menambahkan beberapa penangan, seperti ini: ```html run no-beautify ``` -As we can see in the example above, we can set handlers *both* using a DOM-property and `addEventListener`. But generally we use only one of these ways. +Seperti yang bisa kita lihat pada contoh di atas, kita bisa mengatur *kedua* penangan menggunakan properti DOM dan `addEventListener`. Tapi pada umumnya kita hanya akan menggunakan salah satu. -````warn header="For some events, handlers only work with `addEventListener`" -There exist events that can't be assigned via a DOM-property. Only with `addEventListener`. +````warn header="Untuk beberapa peristiwa, penangan bekerja hanya dengan `addEventListener`" +Ada beberapa peristiwa yang tidak dapat di atur menggunakan properti DOM. hanya dengan `addEventListener`. -For instance, the `DOMContentLoaded` event, that triggers when the document is loaded and DOM is built. +Contohnya, peristiwa `DOMContentLoaded`, yang akan terpicu pada saat dokumen telah berhasil di dimuat dan dibuat. ```js -// will never run +// tidak akan perna berjalan document.onDOMContentLoaded = function() { - alert("DOM built"); + alert("DOM dibuat"); }; ``` ```js -// this way it works +// akan berjalan dengan cara ini document.addEventListener("DOMContentLoaded", function() { - alert("DOM built"); + alert("DOM dibuat"); }); ``` -So `addEventListener` is more universal. Although, such events are an exception rather than the rule. +Jadi `addEventListener` lebih universal. Walaupun, aturan semacam itu merupakan sebuah pengecualian daripada aturan. ```` -## Event object +## Objek peristiwa (Event object) -To properly handle an event we'd want to know more about what's happened. Not just a "click" or a "keydown", but what were the pointer coordinates? Which key was pressed? And so on. +Untuk menangani peristiwa secara benar sebuah peristiwa kita mau tahu lebih tentang apa yang terjadi. Tidak hanya sebuah "klik" atau sebuah "penekanan tombol", tapi apa koordinat pointer? tombol mana yang di tekan? dan seterusnya. -When an event happens, the browser creates an *event object*, puts details into it and passes it as an argument to the handler. +Pada saat sebuah peristiwa terjadi, peramban akan membuat *objek peristiwa*, memasukan detail kedalamnya dan meneruskan peristiwa tersebut ke penangan sebagai sebuah argumen. -Here's an example of getting pointer coordinates from the event object: +Ini merupakan contoh cara untuk mendapat koordinat pointer dari objek peristiwa: ```html run - + ``` -Some properties of `event` object: +Beberapa properti dari objek `peristiwa`: -`event.type` -: Event type, here it's `"click"`. +`peristiwa.type` +: Tipe peristiwa, disini tipenya `"click"`. -`event.currentTarget` -: Element that handled the event. That's exactly the same as `this`, unless the handler is an arrow function, or its `this` is bound to something else, then we can get the element from `event.currentTarget`. +`peristiwa.currentTarget` +: elemen yang ditangani oleh peristiwa. Sama persis dengan `this`, kecuali jika penangan merupakan fungsi anak panah (arrow function), atau `this` sudah di atur untuk hal lain, maka kita dapat menggunakan `peristiwa.currentTarget` untuk mendapati elemen. -`event.clientX / event.clientY` -: Window-relative coordinates of the cursor, for pointer events. +`peristiwa.clientX / peristiwa.clientY` +: koordinat kursor relatif pada jendela (window), untuk peristwa pointer. -There are more properties. Many of them depend on the event type: keyboard events have one set of properties, pointer events - another one, we'll study them later when we come to different events in details. +Masih banyak lagi properti. Banyak yang tergantung pada tipe peristiwa: peristiwa papan ketik memilik satu set properti, peristiwa pointer - memiliki set yang berbeda, kita nanti akan mempelajari mereka pada saat kita mendapati peristiwa lainnya secara detail. -````smart header="The event object is also available in HTML handlers" -If we assign a handler in HTML, we can also use the `event` object, like this: +````smart header="Objek peristiwa juga ada pada penangan HTML" +Jika kita mengatur penangan pada HTML, kita bisa juga menggunakan objek peristiwa, seperti ini: ```html autorun height=60 - + ``` -That's possible because when the browser reads the attribute, it creates a handler like this: `function(event) { alert(event.type) }`. That is: its first argument is called `"event"`, and the body is taken from the attribute. +Ini terjadi karena pada saat peramban membaca atribut, itu membuat sebuah penangan seperti ini: `function(event) {alert(event.type) }`. yaitu: argumen pertamanya disebut dengan `"event"`, dan tubuhnya di ambil dari atribut. ```` -## Object handlers: handleEvent +## Objek penangan: handleEvent -We can assign not just a function, but an object as an event handler using `addEventListener`. When an event occurs, its `handleEvent` method is called. +Kita bisa mengatur bukan hanya fungsi, tapi sebuah objek sebagai penangan peristiwa menggunakan `addEventListener`. Pada saat sebuah peristiwa terjadi, Itu memanggil metode `handleEvent`. -For instance: +Contohnya: ```html run - + ``` -As we can see, when `addEventListener` receives an object as the handler, it calls `obj.handleEvent(event)` in case of an event. +Seperti yang bisa kita lihat, pada saat `addEventListener` menerima objek sebagai penangan, itu akan memanggil `obj.handleEvent(event)` jika sebuah peristiwa terjadi. -We could also use a class for that: +Kita juga dapat menggunakan Kelas (_class_) untuk hal itu: ```html run - + ``` -Here the same object handles both events. Please note that we need to explicitly setup the events to listen using `addEventListener`. The `menu` object only gets `mousedown` and `mouseup` here, not any other types of events. +Disini objek yang sama menanggani kedua peristiwa. Tolong di catat bahwa kita harus secara eksplisit mengatur peristiwa untuk mendengar menggunakan `addEventListener`. Objek `menu` hanya dapat menerima `mousedown` dan `mouseup` pada contoh diatas, bukan tipe peristiwa lainnya. -The method `handleEvent` does not have to do all the job by itself. It can call other event-specific methods instead, like this: +Metode `handleEvent` tidak harus melakukan semua proses secara mandiri. Itu dapat memanggil metode lain yang menanggani peristiwa secara spesifik, seperti ini: ```html run - + ``` -Now event handlers are clearly separated, that may be easier to support. +Sekarang penangan peristiwa berbeda, dan memudahkan proses pendukungan. -## Summary +## Ringkasan -There are 3 ways to assign event handlers: +Ada 3 cara untuk mengatur penangan peristiwa: -1. HTML attribute: `onclick="..."`. -2. DOM property: `elem.onclick = function`. -3. Methods: `elem.addEventListener(event, handler[, phase])` to add, `removeEventListener` to remove. +1. Atribute HTML: `onclick="..."` +2. Properti DOM: `elem.onclick = function`. +3. Metode: `elem.addEventListener(event, handler[, phase])` untuk menambahkan, `removeEventListener` untuk menghapuskan. -HTML attributes are used sparingly, because JavaScript in the middle of an HTML tag looks a little bit odd and alien. Also can't write lots of code in there. +Atribute HTML digunakan untuk kasus tertentu, karena Javascript ditengah tag HTML akan kelihatan aneh. Dan juga akan sulit untuk menulis banyak kode di dalam tag HTML. -DOM properties are ok to use, but we can't assign more than one handler of the particular event. In many cases that limitation is not pressing. +Properti DOM boleh digunakan, tapi kita tidak dapat mengatur lebih dari 1 penangan untuk peristiwa tertentu. Namun tidak sering kita membutuhkan lebih dari 2 penangan. -The last way is the most flexible, but it is also the longest to write. There are few events that only work with it, for instance `transitionend` and `DOMContentLoaded` (to be covered). Also `addEventListener` supports objects as event handlers. In that case the method `handleEvent` is called in case of the event. +Cara terakhir lebih fleksible, tapi itu juga merupakan cara terpanjang untuk menulis. Ada beberapa peristiwa yang hanya akan bisa digunakan pada cara ini, seperti misalnya `transitionend` dan `DOMContentLoaded` (akan di bahas). Dan juga objek dapat digunakan sebagai penangan pada `addEventListener`. Pada kasus ini metode `handleEvent` akan dipanggil pada saat peristiwa terjadi. -No matter how you assign the handler -- it gets an event object as the first argument. That object contains the details about what's happened. +Tidak penting bagaimana kamu mengatur penangan -- itu akan mendapat sebuah objek peristiwa sebagai argumen pertama. Objek itu memiliki detail tentang apa yang terjadi. -We'll learn more about events in general and about different types of events in the next chapters. +Kita akan mempelajari lebih lanjut tentang peristiwa secara umum dan perbedaan tipe peristiwa di bab selanjutnya.