Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Browser default actions #245

Merged
merged 6 commits into from
Dec 31, 2021
Merged

Browser default actions #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ed6e34a
event 04: why-return-false-fails
EmptyWork Dec 31, 2021
2e7c11a
event 04: catch-link-navigation - 75%
EmptyWork Dec 31, 2021
abe2d38
event 04: catch-link-navigation - 100%
EmptyWork Dec 31, 2021
095d8e9
event 04: menu.js
EmptyWork Dec 31, 2021
b3779de
event 04: article.md - 100%
EmptyWork Dec 31, 2021
03ec5d9
Merge branch 'master' of https://github.com/EmptyWork/id.javascript.info
EmptyWork Dec 31, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions 2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
<script>
Expand All @@ -23,7 +23,7 @@ The fix is simple:
<a href="https://w3.org" onclick="*!*return handler()*/!*">w3.org</a>
```

Also we can use `event.preventDefault()`, like this:
Kita juga bisa menggunakan `event.preventDefault()`, seperti ini:

```html run
<script>
Expand Down
10 changes: 5 additions & 5 deletions 2-ui/2-events/04-default-browser-action/1-why-return-false-fails/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ importance: 3

---

# Why "return false" doesn't work?
# Mengapa "return false" tidak berfungsi?

Why in the code below `return false` doesn't work at all?
Kenapa pada kode dibawah `return false` tidak berfungsi sama sekali?

```html autorun run
<script>
Expand All @@ -14,9 +14,9 @@ Why in the code below `return false` doesn't work at all?
}
</script>

<a href="https://w3.org" onclick="handler()">the browser will go to w3.org</a>
<a href="https://w3.org" onclick="handler()">browser akan membuka w3.org</a>
```

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?
6 changes: 3 additions & 3 deletions 2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
6 changes: 3 additions & 3 deletions 2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,17 @@
<body>

<fieldset id="contents">
<legend>#contents</legend>
<legend>#kontent</legend>
<p>
How about to read <a href="https://wikipedia.org">Wikipedia</a> or visit <a href="https://w3.org"><i>W3.org</i></a> and learn about modern standards?
Bagaimana jika membaca di <a href="https://wikipedia.org">Wikipedia</a> atau kunjungi <a href="https://w3.org"><i>W3.org</i></a> dan belajar tentang standar terbaru?
</p>
</fieldset>

<script>
contents.onclick = function(event) {

function handleLink(href) {
let isLeaving = confirm(`Leave for ${href}?`);
let isLeaving = confirm(`Pergi ke ${href}?`);
if (!isLeaving) return false;
}

Expand Down
4 changes: 2 additions & 2 deletions 2-ui/2-events/04-default-browser-action/2-catch-link-navigation/source.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
<body>

<fieldset id="contents">
<legend>#contents</legend>
<legend>#kontent</legend>
<p>
How about to read <a href="https://wikipedia.org">Wikipedia</a> or visit <a href="https://w3.org"><i>W3.org</i></a> and learn about modern standards?
Bagaimana jika membaca di <a href="https://wikipedia.org">Wikipedia</a> atau kunjungi <a href="https://w3.org"><i>W3.org</i></a> dan belajar tentang standar terbaru?
</p>
</fieldset>

Expand Down
13 changes: 6 additions & 7 deletions 2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 `<a href=".."><i>...</i></a>`.
- 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 `<a href=".."><i>...</i></a>`.
Loading