Skip to content

Update article and tips on the README #124

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.

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

Merged
merged 4 commits into from
Oct 2, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
100 changes: 50 additions & 50 deletions 2-ui/1-document/01-browser-environment/article.md
Original file line number Diff line number Diff line change
@@ -1,113 +1,113 @@
# Browser environment, specs

The JavaScript language was initially created for web browsers. Since then it has evolved and become a language with many uses and platforms.
# Browser environment, specs
Bahasa JavaScript awal mulanya dibuat untuk web browser. Sejak saat itu terus berevolusi dan menjadi sebuah bahasa dengan banyak pengguna dan platform.

A platform may be a browser, or a web-server or another *host*, even a "smart" coffee machine, if it can run JavaScript. Each of them provides platform-specific functionality. The JavaScript specification calls that a *host environment*.
Sebuah platform bisa menjadi browser, atau sebuah web-server ataupun *host* yang lain, sampai sebuah mesin kopi yang "cerdas", jika itu bisa menjalankan JavaScript. Masing-masing darinya menyediakan fungsionalitas platform yang spesifik. Spesifik JavaScript menyebut itu sebagai sebuah *host environment*.

A host environment provides own objects and functions additional to the language core. Web browsers give a means to control web pages. Node.js provides server-side features, and so on.
Sebuah host environment menyediakan objek-objek tersendiri dan fungsi-fungsi tambahan ke pusat bahasa. Web browser memberikan sebuah sarana untuk mengontrol halaman-halaman web.

Here's a bird's-eye view of what we have when JavaScript runs in a web browser:
Berikut adalah sebuah pandangan luas tentang apa yang kita punya ketika JavaScript berjalan di sebuah web browser:

![](windowObjects.svg)

There's a "root" object called `window`. It has two roles:
Ada sebuah "root" objek yang dinamakan `window`. Mempunyai 2 peranan:

1. First, it is a global object for JavaScript code, as described in the chapter <info:global-object>.
2. Second, it represents the "browser window" and provides methods to control it.
1. Pertama, ini adalah sebuah global objek untuk kode JavaScript, dideskripsikan di bab <info:global-object>.
2. Kedua, ini mempresentasikan dari "browser window" dan menyediakan metode-metode untuk mengontrolnya.

For instance, here we use it as a global object:
Misalnya, disini kita akan menggunakannya sebagai sebuah global objek:

```js run
```js berjalan
function sayHi() {
alert("Hello");
}

// global functions are methods of the global object:
// fungsi-fungsi global adalah metode objek global:

window.sayHi();
```

And here we use it as a browser window, to see the window height:
Dan sekarang kita menggunakannya sebagai jendela browser, untuk melihat tinggi jendela:

```js run
alert(window.innerHeight); // inner window height
```js berjalan
alert(window.innerHeight); // tinggi jendela bagian dalam
```

There are more window-specific methods and properties, we'll cover them later.
Berikut lebih banyak metode dan properti window-specific, kita akan membahasnya nanti.

## DOM (Document Object Model)
Document Object Model, atau disingkat DOM, mempresentasikan semua konten halaman sebagai objek yang bisa dimodifikasi.

Document Object Model, or DOM for short, represents all page content as objects that can be modified.

The `document` object is the main "entry point" to the page. We can change or create anything on the page using it.
Objek `document` adalah "pintu masuk" utama dari halaman. Kita bisa mengubahnya atau membuat apapun untuk dipakai halaman tersebut.

For instance:
Sebagai contoh:
```js run
// change the background color to red
// ubah warna latar belakang menjadi merah
document.body.style.background = "red";

// change it back after 1 second
// ubah kembali setelah 1 detik
setTimeout(() => document.body.style.background = "", 1000);
```

Here we used `document.body.style`, but there's much, much more. Properties and methods are described in the specification: [DOM Living Standard](https://dom.spec.whatwg.org).
Disini kita menggunakan `document.body.style`, tapi ada lebih banyak, banyak lagi. Properti dan metode-metode dideskripsikan di spesifikasi: [DOM Living Standard](https://dom.spec.whatwg.org).

```smart header="DOM is not only for browsers"
The DOM specification explains the structure of a document and provides objects to manipulate it. There are non-browser instruments that use DOM too.
Spesifikasi DOM menjelaskan struktur dari sebuah dokumen dan penyedia objek untuk memanipulasinya. Ada instrumen dari non-browser yang menggunakan DOM juga.

For instance, server-side scripts that download HTML pages and process them can also use DOM. They may support only a part of the specification though.
Sebagai contoh, skrip server-side yang mengunduh halaman-halaman HTML dan memprosesnya juga menggunakan DOM. Mereka mungkin hanya mendukung sebagian dari spesifikasi tersebut.
```

```smart header="CSSOM for styling"
There's also a separate specification, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/) for CSS rules and stylesheets, that explains how they are represented as objects, and how to read and write them.
Ada juga spesifikasi terpisah, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/) untuk aturan dan stylesheets CSS, yang menjelaskan bagaimana mereka di representasilan sebagai objek, dan bagaimana mereka membaca dan menulisnya.

CSSOM is used together with DOM when we modify style rules for the document. In practice though, CSSOM is rarely required, because we rarely need to modify CSS rules from JavaScript (usually we just add/remove CSS classes, not modify their CSS rules), but that's also possible.
CSSOM digunakan bersamaan dengan DOM ketika kita memodifikasi style aturan untuk dokumen. Di prakteknya sekalipun, CSSOM jarang dibutuhkan, karena kita jarang untuk memodifikasi aturan CSS dari JavaScript (biasanya kita hanya menambah/menghapus class dari CSS, tidak memodifikasi aturan dari CSS-nya), tapi itu juga memungkinkan.
```

## BOM (Browser Object Model)

The Browser Object Model (BOM) represents additional objects provided by the browser (host environment) for working with everything except the document.
Browser Object Model (BOM) mempresentasikan tambahan dari objek-objek yang disediakan oleh browser (browser environment) untuk dikerjakan oleh apapun kecuali oleh dokumen.

For instance:
Sebagai contoh:

- The [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operating system. There are many properties, but the two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differ between Windows/Linux/Mac etc).
- The [location](mdn:api/Window/location) object allows us to read the current URL and can redirect the browser to a new one.
- Objek [navigator](mdn:api/Window/navigator) menyediakan informasi di latar belakang tentang browser dan operasi sistem. Disitu banyak sekali properti, tapi ada 2 yang sudah banyak diketahui yaitu: `navigator.userAgent` -- tentang browser sekarang, dan `navigator.platform` -- tentang platform (yang bisa membantu untuk membedakan antara Windows/Linux/Mac dan sebagainya).
- Objek [location](mdn:api/Window/location) memungkinkan kita untuk membaca URL sekarang yang akan mengarahkan browser ke satu yang baru.

Here's how we can use the `location` object:
Berikut adalah bagaimana kita bisa menggunakan objek `location`:

```js run
alert(location.href); // shows current URL
if (confirm("Go to Wikipedia?")) {
location.href = "https://wikipedia.org"; // redirect the browser to another URL
alert(location.href); // tampilkan URL sekarang
if (confirm("Pergi ke Wikipedia?")) {
location.href = "https://wikipedia.org"; // mengarahkan browser ke URL yang lain
}
```

Functions `alert/confirm/prompt` are also a part of BOM: they are directly not related to the document, but represent pure browser methods of communicating with the user.
Fungsi `alert/confirm/prompt` juga bagian dari BOM: mereka tidak berhubungan secara langsung dengan dokumen, tapi mempresentasikan metode komunikasi dengan pengguna pada browser asli.

```smart header="Specifications"
BOM is the part of the general [HTML specification](https://html.spec.whatwg.org).
BOM adalah bagian dari [spesifikasi HTML](https://html.spec.whatwg.org) pada umumnya.

Yes, you heard that right. The HTML spec at <https://html.spec.whatwg.org> is not only about the "HTML language" (tags, attributes), but also covers a bunch of objects, methods and browser-specific DOM extensions. That's "HTML in broad terms". Also, some parts have additional specs listed at <https://spec.whatwg.org>.
Ya, yang kamu dengar benar. Spesifikasi HTML pada <https://html.spec.whatwg.org> bukanlah satu-satunya tentang "bahasa HTML" (tags, attributes), tapi juga mencakup banyak objek, metode-metode dan spesifikasi-browser ekstensi DOM. Itu adalah "HTML dalam istilah yang luas". Juga, beberapa bagian-bagian punya tambahan spesifikasi yang terdaftar di <https://spec.whatwg.org>.
```

## Summary
## Ringkasan

Talking about standards, we have:
Berbicara tentang standard, kita mempunyai:

DOM specification
: Describes the document structure, manipulations and events, see <https://dom.spec.whatwg.org>.
Spesifikasi DOM
: Mendeskripsikan struktur dokumen, manipulasi dan events, lihat <https://dom.spec.whatwg.org>.

CSSOM specification
: Describes stylesheets and style rules, manipulations with them and their binding to documents, see <https://www.w3.org/TR/cssom-1/>.
Spesifikasi CSSOM
: Mendeskripsikan stylesheets dan aturan gaya, manipulasi dengannya dan perbandingannya dengan dokumen, lihat <https://www.w3.org/TR/cssom-1/>.

HTML specification
: Describes the HTML language (e.g. tags) and also the BOM (browser object model) -- various browser functions: `setTimeout`, `alert`, `location` and so on, see <https://html.spec.whatwg.org>. It takes the DOM specification and extends it with many additional properties and methods.
Spesifikasi HTML
: Menjelaskan bahasa HTML (contoh. tags) dan juga BOM (browser object model) -- macam-macam fungsi browser: `setTimeout`, `alert`, `location` dan banyak lagi, lihat <https://html.spec.whatwg.org>. Dengan itu bisa mengambil spesifikasi DOM dan meluaskannya dengan banyak properti dan metode.

Additionally, some classes are described separately at <https://spec.whatwg.org/>.
Selain itu, beberapa class telah dideskripsikan terpisah di <https://spec.whatwg.org/>.

Please note these links, as there's so much stuff to learn it's impossible to cover and remember everything.
Mohon catat tautan ini, karena ada begitu banyak hal untuk dipelajari dan mustahil untuk mencakup dan mengingat semuanya.

When you'd like to read about a property or a method, the Mozilla manual at <https://developer.mozilla.org/en-US/search> is also a nice resource, but the corresponding spec may be better: it's more complex and longer to read, but will make your fundamental knowledge sound and complete.
Ketika anda ingin untuk membaca tentang sebua properti atau sebuah metode, Mozilla manual di <https://developer.mozilla.org/en-US/search> juga sebuah bahan yang bagus, tapi kesesuaian spesifikasi mungkin lebih baik: ada yang lebih kompleks dan bacaan yang panjang, tapi akan membuat dasar pengetahuan anda bersuara dan lengkap.

To find something, it's often convenient to use an internet search "WHATWG [term]" or "MDN [term]", e.g <https://google.com?q=whatwg+localstorage>, <https://google.com?q=mdn+localstorage>.
Untuk menemukan sesuatu, akan semakin nyaman memakai pencarian internet "WHATWG [term]" atau "MDN [term]", contoh <https://google.com?q=whatwg+localstorage>, <https://google.com?q=mdn+localstorage>.

Now we'll get down to learning DOM, because the document plays the central role in the UI.
Sekarang kita akan turun untuk mempelajari DOM, karena dokumen memiliki peranan pusat dalam UI.
3 changes: 3 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ Sangat mudah menambah hal baru.
Beberapa tips untuk penerjemah:

- _Markdown_ pada GitHub https://guides.github.com/features/mastering-markdown/
- Disarankan menggunakan teks editor markdown berbasis web seperti [StackEdit](https://stackedit.io/app#), ataupun yang lainnya.
- Jika terdapat artikel yang sudah diterjemahkan namun sulit untuk dimengerti, penerjemah dapat membandingkan artikel tersebut dengan versi bahasa inggris, ubah artikel yang menurut penerjemah sulit dimengerti lalu lakukan PR.

- Terjemahan tidak harus akurat, yang terpenting mudah dipahami.
- Jika terdapat artikel yang sudah diterjemahkan namun sulit untuk dimengerti, penerjemah dapat membandingkan artikel tersebut dengan versi bahasa inggris, ubah artikel yang menurut penerjemah sulit dimengerti lalu lakukan PR.
- Jangan terjemahkan error seperti ```Uncaught ReferenceError: asdfg tidak didefinisikan```, tapi tambahkan catatan tambahan ```Uncaught ReferenceError: asdfg is not defined (asdfg belum/tidak terdefinisi/didefinisikan)```
Expand Down
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy