From de6a111b5e7ec37c4965111a580217d0b1fd2736 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:40 +0100 Subject: unslug id: move --- files/id/web/api/api_push/index.html | 165 ----- files/id/web/api/element/error_event/index.html | 71 ++ files/id/web/api/push_api/index.html | 165 +++++ .../media_queries/using_media_queries/index.html | 630 ++++++++++++++++++ files/id/web/css/reference/index.html | 185 ++++++ files/id/web/css/referensi/index.html | 185 ------ files/id/web/events/error/index.html | 71 -- files/id/web/guide/api/webrtc/index.html | 35 - files/id/web/guide/css/getting_started/index.html | 33 - files/id/web/guide/css/media_queries/index.html | 630 ------------------ files/id/web/guide/grafis/index.html | 48 -- files/id/web/guide/graphics/index.html | 48 ++ files/id/web/guide/html/forms/index.html | 340 ---------- files/id/web/http/gambaran/index.html | 173 ----- files/id/web/http/overview/index.html | 173 +++++ .../proxy_auto-configuration_(pac)_file/index.html | 727 --------------------- .../proxy_auto-configuration_pac_file/index.html | 727 +++++++++++++++++++++ files/id/web/javascript/closures/index.html | 345 ++++++++++ .../javascript/guide/grammar_and_types/index.html | 648 ++++++++++++++++++ files/id/web/javascript/guide/index.html | 119 ++++ .../web/javascript/guide/introduction/index.html | 156 +++++ .../guide/loops_and_iteration/index.html | 330 ++++++++++ .../javascript/guide/numbers_and_dates/index.html | 376 +++++++++++ .../guide/working_with_objects/index.html | 492 ++++++++++++++ .../inheritance_and_the_prototype_chain/index.html | 304 +++++++++ .../inheritance_dan_prototype_chain/index.html | 304 --------- .../javascript_technologies_overview/index.html | 87 +++ .../id/web/javascript/panduan/closures/index.html | 345 ---------- files/id/web/javascript/panduan/index.html | 119 ---- .../panduan/loops_and_iteration/index.html | 330 ---------- .../panduan/numbers_and_dates/index.html | 376 ----------- .../web/javascript/panduan/pengenalan/index.html | 156 ----- files/id/web/javascript/panduan/tentang/index.html | 145 ---- .../values,_variables,_and_literals/index.html | 648 ------------------ .../panduan/working_with_objects/index.html | 492 -------------- .../global_objects/function/prototype/index.html | 144 ---- .../global_objects/string/purwarupa/index.html | 222 ------- .../reference/operators/function/index.html | 153 +++++ .../reference/operators/fungsi/index.html | 153 ----- .../reference/statements/function/index.html | 232 +++++++ .../reference/statements/fungsi/index.html | 232 ------- .../sekilas_teknologi_javascript/index.html | 87 --- 42 files changed, 5241 insertions(+), 6160 deletions(-) delete mode 100644 files/id/web/api/api_push/index.html create mode 100644 files/id/web/api/element/error_event/index.html create mode 100644 files/id/web/api/push_api/index.html create mode 100644 files/id/web/css/media_queries/using_media_queries/index.html create mode 100644 files/id/web/css/reference/index.html delete mode 100644 files/id/web/css/referensi/index.html delete mode 100644 files/id/web/events/error/index.html delete mode 100644 files/id/web/guide/api/webrtc/index.html delete mode 100644 files/id/web/guide/css/getting_started/index.html delete mode 100644 files/id/web/guide/css/media_queries/index.html delete mode 100644 files/id/web/guide/grafis/index.html create mode 100644 files/id/web/guide/graphics/index.html delete mode 100644 files/id/web/guide/html/forms/index.html delete mode 100644 files/id/web/http/gambaran/index.html create mode 100644 files/id/web/http/overview/index.html delete mode 100644 files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_(pac)_file/index.html create mode 100644 files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html create mode 100644 files/id/web/javascript/closures/index.html create mode 100644 files/id/web/javascript/guide/grammar_and_types/index.html create mode 100644 files/id/web/javascript/guide/index.html create mode 100644 files/id/web/javascript/guide/introduction/index.html create mode 100644 files/id/web/javascript/guide/loops_and_iteration/index.html create mode 100644 files/id/web/javascript/guide/numbers_and_dates/index.html create mode 100644 files/id/web/javascript/guide/working_with_objects/index.html create mode 100644 files/id/web/javascript/inheritance_and_the_prototype_chain/index.html delete mode 100644 files/id/web/javascript/inheritance_dan_prototype_chain/index.html create mode 100644 files/id/web/javascript/javascript_technologies_overview/index.html delete mode 100644 files/id/web/javascript/panduan/closures/index.html delete mode 100644 files/id/web/javascript/panduan/index.html delete mode 100644 files/id/web/javascript/panduan/loops_and_iteration/index.html delete mode 100644 files/id/web/javascript/panduan/numbers_and_dates/index.html delete mode 100644 files/id/web/javascript/panduan/pengenalan/index.html delete mode 100644 files/id/web/javascript/panduan/tentang/index.html delete mode 100644 files/id/web/javascript/panduan/values,_variables,_and_literals/index.html delete mode 100644 files/id/web/javascript/panduan/working_with_objects/index.html delete mode 100644 files/id/web/javascript/reference/global_objects/function/prototype/index.html delete mode 100644 files/id/web/javascript/reference/global_objects/string/purwarupa/index.html create mode 100644 files/id/web/javascript/reference/operators/function/index.html delete mode 100644 files/id/web/javascript/reference/operators/fungsi/index.html create mode 100644 files/id/web/javascript/reference/statements/function/index.html delete mode 100644 files/id/web/javascript/reference/statements/fungsi/index.html delete mode 100644 files/id/web/javascript/sekilas_teknologi_javascript/index.html (limited to 'files/id/web') diff --git a/files/id/web/api/api_push/index.html b/files/id/web/api/api_push/index.html deleted file mode 100644 index feae8a7373..0000000000 --- a/files/id/web/api/api_push/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: API Push -slug: Web/API/API_Push -translation_of: Web/API/Push_API ---- -
{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}
- -

API Push memberikan aplikasi web kemampuan menerima pesan yang didorong oleh peladen ke dalam agen pengguna, baik bila aplikasi berada di permukaan atau baru dimuat. API Push memungkinkan pengembang memberikan pemberitahuan dan pembaruan tak sinkron ke pengguna yang mengizinkan. Hal ini memberikan hasil pendekatan yang lebih baik untuk muatan baru yang terus berubah.

- -
-

Catatan: Dokumentasi ini melingkupi spesifikasi API Push W3C. Bila Anda mencari dokumentasi untuk mekanisme berpemilik dari Firefox OS, lihat Push Sederhana.

-
- -

Push concepts and usage

- -

For an app to receive push messages, it has to have an active service worker. When the service worker is active, it can subscribe to push notifications using {{domxref("PushManager.subscribe()")}}.

- -

The resulting {{domxref("PushSubscription")}} includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data.

- -

The service worker will be started as necessary to handle incoming push messages, which are delivered to the {{domxref("ServiceWorkerGlobalScope.onpush")}} event handler. This allows apps to react to push messages being received, for example by displaying a notification (using {{domxref("ServiceWorkerRegistration.showNotification()")}}.)

- -

Each subscription is unique to a service worker.  The endpoint for the subscription is a unique capability URL: knowledge of the endpoint is all that is necessary to send a message to your application. The endpoint URL therefore needs to be kept secret, or other applications might be able to send push messages to your application.

- -

Activating a service worker to deliver a push message can result in increased resource usage, particularly of the battery. Different browsers have different schemes for handling this — there is currently no standard mechanism. Firefox allows a limited number (quota) of push messages to be sent to an application, although Push messages that generate notifications are exempt from this limit. The limit is refreshed each time the site is visited. In comparison, Chrome applies no limit but requires that every push message causes a notification to be displayed.

- -
-

Note: As of Gecko 44, the allowed quota of push messages per application is not incremented when a new notification fires when another is still visible, for a period of three seconds. This handles cases where a burst of notifications is received, and not all generate a visible notification.

-
- -
-

Note: Chrome currently requires you to set up a project on Google Cloud Messaging to send push messages, and use the associated project number and API key when sending push notifications. It also requires an app manifest with some special parameters to use this service. This restriction will hopefully be removed in the future.

-
- -

Interfaces

- -
-
{{domxref("PushEvent")}}
-
Represents a push action sent to the global scope of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.
-
{{domxref("PushManager")}}
-
Provides a way to receive notifications from third-party servers as well as request URLs for push notifications. This interface has replaced functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.
-
{{domxref("PushMessageData")}}
-
Provides access to push data sent by a server, and includes methods to manipulate the received data.
-
{{domxref("PushSubscription")}}
-
Provides a subcription's URL endpoint and allows unsubscription from a push service.
-
- -

Service worker additions

- -

The following additions to the Service Worker API have been specified in the Push API spec, to provide an entry point for using Push messages, and  to monitor and respond to push and subscription change events.

- -
-
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
-
Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging.
-
{{domxref("ServiceWorkerGlobalScope.onpush")}}
-
An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.
-
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
-
An event handler fired whenever a {{Event("pushsubscriptionchange")}} event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Push API")}}{{Spec2("Push API")}}Initial definition
- -

Browser Compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}[1]{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}
{{domxref("PushEvent.data")}},
- {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
{{domxref("PushEvent.data")}},
- {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Currently available only on desktop versions of Firefox; also, push messages are only delivered when Firefox is running.

- -

[2] This is currently not implemented. See the Microsoft Edge status information.

- -

See also

- - diff --git a/files/id/web/api/element/error_event/index.html b/files/id/web/api/element/error_event/index.html new file mode 100644 index 0000000000..a5c531c19c --- /dev/null +++ b/files/id/web/api/element/error_event/index.html @@ -0,0 +1,71 @@ +--- +title: error +slug: Web/Events/error +translation_of: Web/API/Element/error_event +--- +

Event error ditampilkan ketika sumberdaya gagal dimuat.

+ +

Informasi umum

+ +
+
Spesifikasi
+
DOM L3
+
Antar muka
+
UIEvent jika digenerasikan dari antarmuka pengguna, event sebaliknya.
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Element
+
Default Action
+
None
+
+ +

Properti

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
+ +

Lihat Juga

+ +

{{domxref("GlobalEventHandlers.onerror")}} - window.onerror dan element.onerror.

diff --git a/files/id/web/api/push_api/index.html b/files/id/web/api/push_api/index.html new file mode 100644 index 0000000000..feae8a7373 --- /dev/null +++ b/files/id/web/api/push_api/index.html @@ -0,0 +1,165 @@ +--- +title: API Push +slug: Web/API/API_Push +translation_of: Web/API/Push_API +--- +
{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}
+ +

API Push memberikan aplikasi web kemampuan menerima pesan yang didorong oleh peladen ke dalam agen pengguna, baik bila aplikasi berada di permukaan atau baru dimuat. API Push memungkinkan pengembang memberikan pemberitahuan dan pembaruan tak sinkron ke pengguna yang mengizinkan. Hal ini memberikan hasil pendekatan yang lebih baik untuk muatan baru yang terus berubah.

+ +
+

Catatan: Dokumentasi ini melingkupi spesifikasi API Push W3C. Bila Anda mencari dokumentasi untuk mekanisme berpemilik dari Firefox OS, lihat Push Sederhana.

+
+ +

Push concepts and usage

+ +

For an app to receive push messages, it has to have an active service worker. When the service worker is active, it can subscribe to push notifications using {{domxref("PushManager.subscribe()")}}.

+ +

The resulting {{domxref("PushSubscription")}} includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data.

+ +

The service worker will be started as necessary to handle incoming push messages, which are delivered to the {{domxref("ServiceWorkerGlobalScope.onpush")}} event handler. This allows apps to react to push messages being received, for example by displaying a notification (using {{domxref("ServiceWorkerRegistration.showNotification()")}}.)

+ +

Each subscription is unique to a service worker.  The endpoint for the subscription is a unique capability URL: knowledge of the endpoint is all that is necessary to send a message to your application. The endpoint URL therefore needs to be kept secret, or other applications might be able to send push messages to your application.

+ +

Activating a service worker to deliver a push message can result in increased resource usage, particularly of the battery. Different browsers have different schemes for handling this — there is currently no standard mechanism. Firefox allows a limited number (quota) of push messages to be sent to an application, although Push messages that generate notifications are exempt from this limit. The limit is refreshed each time the site is visited. In comparison, Chrome applies no limit but requires that every push message causes a notification to be displayed.

+ +
+

Note: As of Gecko 44, the allowed quota of push messages per application is not incremented when a new notification fires when another is still visible, for a period of three seconds. This handles cases where a burst of notifications is received, and not all generate a visible notification.

+
+ +
+

Note: Chrome currently requires you to set up a project on Google Cloud Messaging to send push messages, and use the associated project number and API key when sending push notifications. It also requires an app manifest with some special parameters to use this service. This restriction will hopefully be removed in the future.

+
+ +

Interfaces

+ +
+
{{domxref("PushEvent")}}
+
Represents a push action sent to the global scope of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.
+
{{domxref("PushManager")}}
+
Provides a way to receive notifications from third-party servers as well as request URLs for push notifications. This interface has replaced functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.
+
{{domxref("PushMessageData")}}
+
Provides access to push data sent by a server, and includes methods to manipulate the received data.
+
{{domxref("PushSubscription")}}
+
Provides a subcription's URL endpoint and allows unsubscription from a push service.
+
+ +

Service worker additions

+ +

The following additions to the Service Worker API have been specified in the Push API spec, to provide an entry point for using Push messages, and  to monitor and respond to push and subscription change events.

+ +
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging.
+
{{domxref("ServiceWorkerGlobalScope.onpush")}}
+
An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.
+
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
+
An event handler fired whenever a {{Event("pushsubscriptionchange")}} event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Push API")}}{{Spec2("Push API")}}Initial definition
+ +

Browser Compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}[1]{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Currently available only on desktop versions of Firefox; also, push messages are only delivered when Firefox is running.

+ +

[2] This is currently not implemented. See the Microsoft Edge status information.

+ +

See also

+ + diff --git a/files/id/web/css/media_queries/using_media_queries/index.html b/files/id/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..3fe883c5f6 --- /dev/null +++ b/files/id/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,630 @@ +--- +title: Media query CSS +slug: Web/Guide/CSS/Media_queries +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +

Media query terdiri dari jenis media dan paling sedikit satu ekspresi yang membatasi lingkup style sheets dengan menggunakan fitur media, seperti lebar, tinggi, dan warna. Media query, ditambahkan di CSS3, memungkinkan tampilan konten disesuaikan dengan alat penampil tertentu tanpa harus mengubah konten itu sendiri.

+ +

Sintaks

+ +

Media query terdiri dari jenis media (media type) dan dapat, sesuai dengan spesifikasi CSS3, mengandung satu atau lebih ekspresi, diekspresikan sebagai fitur media, baik benar (true) atau salah (false).  Hasil query adalah benar jika jenis media yang disebutkan dalam media query cocok dengan jenis alat yang digunakan untuk menampilkan dokumen dan semua ekspresi di dalam media query adalah benar.

+ +
<!-- Media query CSS pada elemen link -->
+<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
+
+<!-- Media query CSS di dalam style sheet -->
+<style>
+@media (max-width: 600px) {
+  .facet_sidebar {
+    display: none;
+  }
+}
+</style>
+ +

Ketika sebuah media query adalah benar, style sheet atau aturan style yang bersangkutan diterapkan, sesuai dengan aturan cascading normal. Style sheet dengan media query yang menempel pada tag <link> masih akan diunduh bahkan jika media query tersebut adalah salah (false) (namun tidak akan diterapkan).

+ +

Kecuali jika Anda menggunakan operator not atau only, jenis media adalah opsional dan jenis all akan diterapkan.

+ +

Operator logika

+ +

Anda dapat merancang media query kompleks menggunakan operator logika, termasuk not, and, dan only. Operator and digunakan untuk menggabungkan banyak fitur media (media features) ke dalam satu media query tunggal, setiap fitur terkait harus benar (true) agar query benar (true). Operator not digunakan untuk menegasikan keseluruhan media query. Operator only digunakan untuk menerapkan suatu style hanya jika keseluruhan query cocok, berguna untuk mencegah browser lama menerapkan style-style tertentu. Jika Anda menggunakan operator-operator not atau only, Anda harus menyebutkan jenis media secara eksplisit.

+ +

Anda juga dapat menggabungkan banyak media query dalam sebuah daftar terpisah koma; jika ada media query di dalam daftar yang benar (true), keseluruhan pernyataan media adalah benar (true). Hal ini setara dengan operator or.

+ +

and

+ +

Kata kunci and digunakan untuk menggabungkan banyak fitur media menjadi satu, seperti menggabungkan fitur media dengan jenis media. Media query dasar, sebuah fitur media tunggal dengan jenis media all secara implisit, dapat terlihat seperti ini:

+ +
@media (min-width: 700px) { ... }
+ +

Namun, jika, Anda menginginkan hal ini diterapkan hanya untuk tampilan lanskap, Anda dapat menggunakan operator and untuk menggabungkan fitur-fitur media tersebut.

+ +
@media (min-width: 700px) and (orientation: landscape) { ... }
+ +

Sekarang media query di atas hanya akan benar jika lebar viewport adalah 700px atau lebih dan dalam tampilan lanskap. Namun, jika, Anda hanya menginginkan hal ini untuk diterapkan jika jenis media tampilan adalah TV, Anda dapat menggabungkan fitur-fitur ini dengan jenis media menggunakan operator and.

+ +
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
+ +

Sekarang, media query di atas hanya akan diterapkan jika jenis media adalah TV, lebar viewport adalah 700px atau lebih, dan tampilan adalah lanskap.

+ +

daftar terpisah koma

+ +

Daftar terpisah koma adalah seperti operator logika or ketika digunakan dalam media query. Ketika menggunakan daftar media query terpisah koma, jika ada media query yang benar (true), style or style sheet akan diterapkan. Setiap media query di dalam daftar terpisah koma diperlakukan sebagai query individual, dan setiap operator yang diterapkan pada satu media query tidak mempengaruhi yang lainnya. Ini berarti daftar media query terpisah koma dapat ditujukan  untuk fitur, jenis, dan kondisi media yang berbeda.

+ +

Sebagai contoh, seandainya Anda ingin menerapkan seperangkat style jika alat penampil memiliki lebar minimum 700px atau alat genggam dalam moda lanskap, Anda dapat menulis sebagai berikut:

+ +
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
+ +

Pada contoh di atas, jika saya menggunakan perangkat screen dengan lebar viewport 800px, pernyataan media akan benar (true) karena bagian pertama, yang diinterpetasikan sebagai @media all and (min-width: 700px) akan berlaku pada perangkat saya dan oleh karena itu benar (true), terlepas dari fakta bahwa perangkat screen saya akan gagal dalam pengecekan jenis media handheld di media query kedua. Demikian pula, jika saya menggunakan perangkat genggam handheld dalam moda lanskap dengan lebar viewport 500px, walaupun media query pertama gagal karena lebar viewport tidak sesuai, media query kedua akan berhasil dan oleh karena itu pernyataan media akan menghasilkan nilai benar (true).

+ +

not

+ +

Kata kunci not berlaku pada keseluruhan media query dan memberikan nilai benar (true) jika media query akan sebaliknya memberikan nilai salah (false) (seperti fitur query monochrome pada warna tampilan atau lebar layar 600px dengan min-width: 700px). Sebuah not hanya akan menegasikan media query yang ditetapkan dan bukan setiap media query jika ada dalam daftar media query terpisah koma. Kata kunci not tidak dapat digunakan untuk menegasikan sebuah fitur query individual, hanya untuk media query secara keseluruhan. Sebagai contoh, not dievaluasi paling akhir dalam query berikut ini:

+ +
@media not all and (monochrome) { ... }
+
+ +

Ini berarti bahwa query tersebut dievaluasi seperti ini:

+ +
@media not (all and (monochrome)) { ... }
+
+ +

... bukan seperti ini:

+ +
@media (not all) and (monochrome) { ... }
+ +

Sebagai contoh lain, lihat media query berikut ini:

+ +
@media not screen and (color), print and (color)
+
+ +

Yang dievaluasi seperti ini:

+ +
@media (not (screen and (color))), print and (color)
+ +

only

+ +

Kata kunci only mencegah browser lama yang tidak mendukung media query dengan fitur media menerapkan style yang disediakan:

+ +
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
+
+ +

Pseudo-BNF (untuk Anda yang gemar hal seperti ini)

+ +
media_query_list: <media_query> [, <media_query> ]*
+media_query: [[only | not]? <media_type> [ and <expression> ]*]
+  | <expression> [ and <expression> ]*
+expression: ( <media_feature> [: <value>]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid
+ +

Media query adalah case insensitive.  Media query yang melibatkan jenis media yang tidak diketahui selalu salah (false).

+ +
Catatan: Tanda kurung wajib digunakan di sekitar ekspresi; jika tidak digunakan akan mengakibatkan kesalahan.
+ +

Fitur media

+ +

Sebagian besar fitur media dapat diawali dengan "min-" atau "max-" untuk mengekspresikan batasan "lebih dari atau sama dengan" atau "kurang dari atau sama dengan".  Hal ini menghindari penggunaan simbol "<" dan ">", yang mungkin akan menyebabkan konflik dengan HTML dan XML.  Jika Anda  menggunakan fitur media tanpa nilai tertentu, ekspresi tersebut akan bernilai benar (true) jika nilai fitur adalah bukan-nol.

+ +
Catatan: Jika sebuah fitur media tidak sesuai untuk alat di mana browser dijalankan, ekspresi yang melibatkan fitur media tersebut adalah selalu salah (false).  Sebagai contoh, meng-query rasio aspek dari suatu alat aural selalu bernilai salah (false).
+ +

color

+ +

Nilai: {{cssxref("<color>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max prefixes: ya

+ +

Menunjukkan jumlah per komponen warna dari alat penampil.  Jika alat tersebut bukan alat yang memiliki warna, nilai ini adalah nol.

+ +
Catatan: Jika komponen warna memiliki jumlah bit yang berbeda per komponen warna, angka yang paling kecillah yang digunakan.  Sebagai contoh, jika sebuat layar menggunakan 5 bit untuk biru dan merah dan 6 bit untuk hijau, maka alat tersebut dianggap menggunakan 5 bit per komponen warna.  Jika suat alat menggunakan warna terindeks, jumlah bit minimum per komponen warna dalam tabel warna yang digunakan.
+ +

Contoh

+ +

Untuk menerapkan style sheet pada semua alat berwarna:

+ +
@media all and (color) { ... }
+
+ +

Untuk menerapkan style sheet pada alat yang memiliki paling sedikit 4 bit per komponen warna:

+ +
@media all and (min-color: 4) { ... }
+
+ +

color-index

+ +

Nila: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: ya

+ +

Menunjukkan jumlah entri dalam tabel pencarian warna untuk alat penampil.

+ +

Contoh

+ +

Untuk menunjukkan bahwa suatu style sheet harus diterapkan pada semua alat yang menggunakan warna terindeks, Anda dapat melakukan:

+ +
@media all and (color-index) { ... }
+
+ +

Untuk menerapkan style sheet pada alat berwarna terindeks dengan paling sedikit 256 warna:

+ +
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
+
+ +

aspect-ratio

+ +

Nilai: {{cssxref("<ratio>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Menerima prefiks min/max: ya

+ +

Menggambarkan rasio aspek daerah tampilan dari alat penampil.  Nilai ini terdiri dari dua integer positif dipisahkan oleh karakter garis miring ("/").  Ini menunjukkan rasio piksel horisontal (angka pertama) terhadap piksel vertikal (angka kedua).

+ +

Contoh

+ +

Berikut ini memilih style sheet khusus untuk digunakan ketika daerah tampilan paling tidak selebar tingginya.

+ +
@media screen and (min-aspect-ratio: 1/1) { ... }
+ +

Ini memilih style ketika rasio aspek adalah 1:1 atau lebih. Dengan kata lain, style-style ini hanya akan diterapkan ketika area penampil adalah bujursangkar atau lanskap.

+ +

device-aspect-ratio

+ +

Nilai: {{cssxref("<ratio>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Menerima prefiks min/max: ya

+ +

Menggambarkan rasio aspek dari alat penampil.  Nilai ini terdiri dari dua integer positif dipisahkan oleh karakter garis miring ("/").  Hal ini menunjukkan rasio piksel horisontal (yang pertama) terhadap piksel vertikal (yang kedua).

+ +

Contoh

+ +

Berikut ini memilih style sheet khusus yang digunakan untuk tampilan layar lebar.

+ +
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
+ +

Ini memilih style ketika rasio aspek adalah 16:9 atau 16:10.

+ +

device-height

+ +

Nilai: {{cssxref("<length>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Menerima prefiks min/max: ya

+ +

Menggambarkan tinggi alat penampil (berarti keseluruhan layar atau halaman, bukan hanya area render, seperti jendela dokumen).

+ +

Contoh

+ +

Untuk menerapkan style sheet pada sebuah dokument ketika ditampilkan pada layar yang memiliki panjang kurang dari 800 piksel, Anda dapat menggunakan ini:

+ +
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
+
+ +

device-width

+ +

Nilai: {{cssxref("<length>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Menerima prefiks min/max: ya

+ +

Menggambarkan lebar alat penampil (berarti keseluruhan layar atau halaman, bukan hanya area render, seperti jendela dokumen).

+ +

Contoh

+ +

Untuk menerapkan style sheet pada sebuah dokumen ketika ditampilkan pada layar yang memiliki lebar kurang dari 800 piksel wide, Anda dapat menggunakan ini:

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
+ +

grid

+ +

Nilai: {{cssxref("<integer>")}}
+ Media: all
+ Menerima prefiks min/max: tidak

+ +

Menentukan apakah alat penampil adalah sebuah alat grid atau bitmap.  Jika alat tersebut berbasis grid (seperti terminal TTY atau layar telepon dengan hanya satu font), nilai adalah 1.  Jika tidak, nilai adalah nol.

+ +

Contoh

+ +

Untuk menerapkan suatu style pada alat genggam dengan layar selebar 15-karakter atau kurang:

+ +
@media handheld and (grid) and (max-width: 15em) { ... }
+
+ +
Catatan: Unit "em" memiliki arti khusus untuk alat grid; karena lebar pasti "em" tidak dapat ditentukan, 1em diasumsikan selebar satu sel grid secara horisontal, dan tingginya satu sell secara vertikal.
+ +

height

+ +

Nilai: {{cssxref("<length>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Menerima prefiks min/max: ya

+ +

Fitur media height (tinggi) menggambarkan tinggi permukaan rendering alat penampil (seperti tinggi viewport atau kotak halaman pada sebuah printer).

+ +
Catatan: Ketika user mengubah ukuran window, Firefox mengganti style sheets dengan yang paling sesuai berdasarkan media query menggunakan fitur media width dan height.
+ +

monochrome

+ +

Nilai: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: ya

+ +

Menunjukkan jumlah bit per piksel pada alat monokrom (keabuan).  Jika alat tersebut bukan monokrom, nilai alat tersebut adalah 0.

+ +

Contoh

+ +

Untuk menerapkan style sheet pada semua alat monokrom:

+ +
@media all and (monochrome) { ... }
+
+ +

Untuk menerapkan style sheet pada alat monokrom dengan paling sedikit 8 bit per piksel:

+ +
@media all and (min-monochrome: 8) { ... }
+
+ +

orientation

+ +

Nilai: landscape | portrait
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: tidak

+ +

Menunjukkan apakah viewport dalam mode lanskap (tampilan lebih lebar daripada tingginya) atau potret (tampilan lebih tinggi daripada lebarnya).

+ +

Contoh

+ +

Untuk menerapkan style sheet hanya pada orientasi potret:

+ +
@media all and (orientation: portrait) { ... }
+ +

resolution

+ +

Nilai: {{cssxref("<resolution>")}}
+ Media: {{cssxref("Media/Bitmap", "bitmap")}}
+ Menerima prefiks min/max: ya

+ +

Menunjukkan resolusi (kepadatan piksel) alat penampil. Resolution mungkin disebutkan dalam dots per inch (dpi - titik per inci) atau dots per centimeter (dpcm - titik per sentimeter).

+ +

Contoh

+ +

Untuk menerapkan style sheet pada alat dengan resolusi paling sedikit 300 dpi:

+ +
@media print and (min-resolution: 300dpi) { ... }
+
+ +

Untuk mengganti sintaks lama (min-device-pixel-ratio: 2):

+ +
@media screen and (min-resolution: 2dppx) { ... }
+ +

scan

+ +

Nilai: progressive | interlace
+ Media: {{cssxref("Media/TV")}}
+ Menerima prefiks min/max: tidak

+ +

Menggambarkan proses pemindaian alat penampil televisi.

+ +

Contoh

+ +

Untuk menerapkan style sheet hanya pada televisi pemindai progresif:

+ +
@media tv and (scan: progressive) { ... }
+
+ +

width

+ +

Nilai: {{cssxref("<length>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Menerima prefiks min/max: ya

+ +

Fitur media width menggambarkan lebar permukaan rendering alat penampil (seperti lebar jendela dokumen, atau lebar kotak halaman sebuah printer).

+ +
Catatan: Ketika user mengubah ukuran jendela, Firefox mengganti style sheets yang sesuai berdasarkan media query menggunakan fitur media width dan height.
+ +

Contoh

+ +

Jika Anda ingin menentukan sebuah style sheet untuk perangkat genggam, atau perangkat layar dengan lebar lebih besar dari 20em, Anda dapat menggunakan query ini:

+ +
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+
+ +

Query Media ini menentukan style sheet yang berlaku untuk media cetak lebih lebar dari 8,5 inci:

+ +
<link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" />
+
+ +

Query ini menentukan style sheet yang digunakan saat lebar viewport adalah antara 500 dan 800 pixel:

+ +
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+ +

Fitur Media Spesifik Mozilla

+ +

Mozilla menawarkan beberapa fitur media spesifik Gecko. Beberapa di antaranya mungkin diusulkan sebagai fitur media resmi.

+ +

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

+ +

Nilai: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Meneriman prefiks min/max: tidak

+ +

Jika perangkat memungkinkan gambar untuk muncul dalam menu, ini adalah 1; jika tidak, nilainya adalah 0. Ini berhubungan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(images-in-menus)") }}.

+ +

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

+ +

Nilai: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: no

+ +

Jika user telah mengkonfigurasi perangkat mereka untuk menggunakan tampilan "Graphite" pada Mac OS X, ini adalah 1. Jika pengguna menggunakan tampilan biru standar, atau bukan pada Mac OS X, ini adalah 0.

+ +

Ini berkaitan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}.

+ +

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

+ +

Nilai: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: tidak

+ +

Jika user menggunakan Maemo dengan tema asli, ini adalah 1; jika menggunakan tema Fremantle yang lebih baru, ini adalah 0.

+ +

Ini berkaitan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(maemo-classic)") }}.

+ +

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}

+ +

Nilai: {{cssxref("<number>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: ya

+ +

Memberikan jumlah piksel perangkat per piksel CSS.

+ +
+

Jangan gunakan fitur ini.

+ +

Tapi gunakanlah fitur resolution dengan unit dppx.

+ +


+ -moz-device-pixel-ratio mungkin digunakan sebagai kompatibilitas dengan Firefox lebih tua daripada 16 dan -webkit-device-pixel-ratio dengan browser-browser berbasis WebKit yang tidak mendukung dppx.

+ +

Contoh:

+ +
@media (-webkit-min-device-pixel-ratio: 2), /* Browsers berbasis Webkit */
+       (min--moz-device-pixel-ratio: 2),    /* Browsers yang lebih tua (sebelum Firefox 16) */
+       (min-resolution: 2dppx),             /* Cara standar */
+       (min-resolution: 192dpi)             /* fallback dppx */
+ +

Lihat artikel CSSWG ini untuk praktek kompatibilitas yang baik terkait resolution dan dppx.

+
+ +
Catatan: Fitur media ini juga diimplementasikan oleh Webkit sebagai -webkit-device-pixel-ratio. Prefiks min dan max seperti diimplementasikan oleh Gecko dinamakan min--moz-device-pixel-ratio dan max--moz-device-pixel-ratio; tetapi prefiks yang sama seperti yang diimplementasikan oleh Webkit dinamakan -webkit-min-device-pixel-ratio dan -webkit-max-device-pixel-ratio.
+ +

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

+ +

Nilai: windows-xp | windows-vista | windows-win7 | windows-win8
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: tidak

+ +

Menunjukkan versi sistem operasi mana yang sedang digunakan saat ini. Saat ini hanya diimplementasikan pada Windows. Nilai-nilai yang mungkin adalah:

+ + + +

Ini disediakan untuk aplikasi skins dan kode chrome lainnya agar dapat beradaptasi untuk bekerja dengan baik dengan versi sistem operasi saat ini.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

+ +

Nilai: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: no

+ +

Jika user interface perangkat menampilkan tombol panah kembali di akhir scrollbar, ini adalah 1. Jika tidak, bernilai 0.

+ +

Ini berkaitan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

+ +

Nilai: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: tidak

+ +

If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

+ +

Example

+ +

You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

+ +

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

+ +

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

+ +

Value: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

+ + + +

This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("21") }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE("9.0") }}{{ CompatOpera("9") }}{{ CompatSafari("4") }}
grid{{ CompatUnknown() }}{{ CompatNo() }} (grid media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
resolution{{ CompatChrome("29") }}{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("<integer>")}} values;
+ {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("<number>")}} values, as per the spec.		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
scan{{ CompatUnknown() }}{{ CompatNo() }} (tv media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

See also

+ + diff --git a/files/id/web/css/reference/index.html b/files/id/web/css/reference/index.html new file mode 100644 index 0000000000..7609391ca5 --- /dev/null +++ b/files/id/web/css/reference/index.html @@ -0,0 +1,185 @@ +--- +title: Referensi CSS +slug: Web/CSS/referensi +translation_of: Web/CSS/Reference +--- +
{{CSSRef}}
+ +

Gunakan referensi CSS ini untuk menelusuri indeks alfabetikal dari semua properti CSS umum, pseudo-classes, pseudo-elements, data types, dan at-rules. Anda juga dapat menulusuri konsep dasar and a list of selektor berdasarkan jenis. Juga ada referensi DOM-CSS / CSSOM.

+ +

Basic rule syntax

+ +

Style rule syntax

+ +
style-rule ::=
+    selectors-list {
+      properties-list
+    }
+
+ +

... where :

+ +
selectors-list ::=
+    selector[:pseudo-class] [::pseudo-element]
+    [, selectors-list]
+
+properties-list ::=
+    [property : value] [; properties-list]
+
+ +

See the index of selectors, pseudo-classes, and pseudo-elements below. The syntax for each specified value depends on the data type defined for each specified property.

+ +

Style rule examples

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

For a beginner-level introduction to the syntax of selectors, see our guide on CSS Selectors. Be aware that any syntax error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM (the rule management system) is object-based.

+ +

At-rule syntax

+ +

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

+ +

Keyword index

+ +
+

Note: The property names in this index do not include the JavaScript names where they differ from the CSS standard names.

+
+ +
{{CSS_Ref}}
+ +

Selectors

+ +

The following are the various selectors, which allow styles to be conditional based on various features of elements within the DOM.

+ +

Basic selectors

+ +

Basic selectors are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.

+ + + +

Grouping selectors

+ +
+
Selector list A, B
+
Specifies that both A and B elements are selected. This is a grouping method to select several matching elements.
+
+ +

Combinators

+ +

Combinators are selectors that establish a relationship between two or more simple selectors, such as "A is a child of B" or "A is adjacent to B."

+ +
+
Adjacent sibling combinator A + B
+
Specifies that the elements selected by both A and B have the same parent and that the element selected by B immediately follows the element selected by A horizontally.
+
General sibling combinator A ~ B
+
Specifies that the elements selected by both A and B share the same parent and that the element selected by A comes before—but not necessarily immediately before—the element selected by B.
+
Child combinator A > B
+
Specifies that the element selected by B is the direct child of the element selected by A.
+
Descendant combinator A B
+
Specifies that the element selected by B is a descendant of the element selected by A, but is not necessarily a direct child.
+
Column combinator A || B {{Experimental_Inline}}
+
Specifies that the element selected by B is located within the table column specified by A. Elements which span multiple columns are considered to be a member of all of those columns.
+
+ +

Pseudo

+ +
+
Pseudo classes :
+
Specifies a special state of the selected element(s).
+
Pseudo elements ::
+
Represents entities that are not included in HTML.
+
+ +
+

See also: Selectors in the Selectors Level 4 specification.

+
+ +

Concepts

+ +

Syntax and semantics

+ + + +

Values

+ + + +

Layout

+ + + +

DOM-CSS / CSSOM

+ +

Major object types

+ + + +

Important methods

+ + + +

See also

+ + + + + + diff --git a/files/id/web/css/referensi/index.html b/files/id/web/css/referensi/index.html deleted file mode 100644 index 7609391ca5..0000000000 --- a/files/id/web/css/referensi/index.html +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: Referensi CSS -slug: Web/CSS/referensi -translation_of: Web/CSS/Reference ---- -
{{CSSRef}}
- -

Gunakan referensi CSS ini untuk menelusuri indeks alfabetikal dari semua properti CSS umum, pseudo-classes, pseudo-elements, data types, dan at-rules. Anda juga dapat menulusuri konsep dasar and a list of selektor berdasarkan jenis. Juga ada referensi DOM-CSS / CSSOM.

- -

Basic rule syntax

- -

Style rule syntax

- -
style-rule ::=
-    selectors-list {
-      properties-list
-    }
-
- -

... where :

- -
selectors-list ::=
-    selector[:pseudo-class] [::pseudo-element]
-    [, selectors-list]
-
-properties-list ::=
-    [property : value] [; properties-list]
-
- -

See the index of selectors, pseudo-classes, and pseudo-elements below. The syntax for each specified value depends on the data type defined for each specified property.

- -

Style rule examples

- -
strong {
-  color: red;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
-
- -

For a beginner-level introduction to the syntax of selectors, see our guide on CSS Selectors. Be aware that any syntax error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM (the rule management system) is object-based.

- -

At-rule syntax

- -

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

- -

Keyword index

- -
-

Note: The property names in this index do not include the JavaScript names where they differ from the CSS standard names.

-
- -
{{CSS_Ref}}
- -

Selectors

- -

The following are the various selectors, which allow styles to be conditional based on various features of elements within the DOM.

- -

Basic selectors

- -

Basic selectors are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.

- - - -

Grouping selectors

- -
-
Selector list A, B
-
Specifies that both A and B elements are selected. This is a grouping method to select several matching elements.
-
- -

Combinators

- -

Combinators are selectors that establish a relationship between two or more simple selectors, such as "A is a child of B" or "A is adjacent to B."

- -
-
Adjacent sibling combinator A + B
-
Specifies that the elements selected by both A and B have the same parent and that the element selected by B immediately follows the element selected by A horizontally.
-
General sibling combinator A ~ B
-
Specifies that the elements selected by both A and B share the same parent and that the element selected by A comes before—but not necessarily immediately before—the element selected by B.
-
Child combinator A > B
-
Specifies that the element selected by B is the direct child of the element selected by A.
-
Descendant combinator A B
-
Specifies that the element selected by B is a descendant of the element selected by A, but is not necessarily a direct child.
-
Column combinator A || B {{Experimental_Inline}}
-
Specifies that the element selected by B is located within the table column specified by A. Elements which span multiple columns are considered to be a member of all of those columns.
-
- -

Pseudo

- -
-
Pseudo classes :
-
Specifies a special state of the selected element(s).
-
Pseudo elements ::
-
Represents entities that are not included in HTML.
-
- -
-

See also: Selectors in the Selectors Level 4 specification.

-
- -

Concepts

- -

Syntax and semantics

- - - -

Values

- - - -

Layout

- - - -

DOM-CSS / CSSOM

- -

Major object types

- - - -

Important methods

- - - -

See also

- - - - - - diff --git a/files/id/web/events/error/index.html b/files/id/web/events/error/index.html deleted file mode 100644 index a5c531c19c..0000000000 --- a/files/id/web/events/error/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: error -slug: Web/Events/error -translation_of: Web/API/Element/error_event ---- -

Event error ditampilkan ketika sumberdaya gagal dimuat.

- -

Informasi umum

- -
-
Spesifikasi
-
DOM L3
-
Antar muka
-
UIEvent jika digenerasikan dari antarmuka pengguna, event sebaliknya.
-
Bubbles
-
No
-
Cancelable
-
No
-
Target
-
Element
-
Default Action
-
None
-
- -

Properti

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
- -

Lihat Juga

- -

{{domxref("GlobalEventHandlers.onerror")}} - window.onerror dan element.onerror.

diff --git a/files/id/web/guide/api/webrtc/index.html b/files/id/web/guide/api/webrtc/index.html deleted file mode 100644 index 60f6c73de0..0000000000 --- a/files/id/web/guide/api/webrtc/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: WebRTC -slug: Web/Guide/API/WebRTC -translation_of: Web/API/WebRTC_API -translation_of_original: Web/Guide/API/WebRTC ---- -

WebRTC (RTC mengacu pada Real-Time Communications) adalah sebuah teknologi yang memungkinkan pengiriman audio atau video serta berbagi data antar peramban web (peer). Sebagai sebuah standar, WebRTC menghadirkan fitur pada peramban web untuk berbagi data dan melakukan telekonferensi secara peer-to-peer, tanpa perlu memasang plugins atau aplikasi pihak ketiga.

- -

Komponen WebRTC dapat diakses melalui JavaScript API, di antaranya: Nework Stream API, yang merepresentasikan audio atau video dalam bentuk data stream; PeerConnection API, yang memungkinkan dua atau lebih pengguna untuk berkomunikasi langsung melalui peramban web; dan DataChannel API, yang memungkinkan bentuk komunikasi lainnya secara real-time untuk gaming, text chat, file transfer, dan lainnya.

- -
-

Catatan: Dokumentasi ini sedang dalam proses pemindahan ke laman baru.

-
- -

Panduan

- -
-
Komunikasi peer-to-peer pada WebRTC
-
Bagaimana cara melakukan komunikasi peer-to-peer menggunakan WebRTC API.
-
Pengantar arsitektur WebRTC
-
WebRTC memiliki banyak bagian di dalamnya, dan itu sangat membingungkan. Artikel ini bertujuan untuk menjelaskan bagian-bagian tersebut, dan bagaimana semuanya bekerja.
-
Dasar-dasar WebRTC
-
Setelah Anda memahami arsitektur WebRTC, Anda dapat melanjutkan ke artikel selanjutnya yang akan menjelaskan proses pengembangan aplikasi dasar RTC yang bekerja pada peramban web.
-
- -

Referensi

- -
-
Navigator.getUserMedia
-
API yang berfungsi untuk menangkap media (audio atau video).
-
RTCPeerConnection
-
Antarmuka yang berfungsi untuk menangani data streaming antar dua peer.
-
RTCDataChannel
-
Antarmuka yang berfungsi untuk mengirimkan data antar peer.
-
diff --git a/files/id/web/guide/css/getting_started/index.html b/files/id/web/guide/css/getting_started/index.html deleted file mode 100644 index dbff8144de..0000000000 --- a/files/id/web/guide/css/getting_started/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Getting started with CSS -slug: Web/Guide/CSS/Getting_started -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

This tutorial introduces you to the basic features and language (the syntax) for Cascading Style Sheets (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers.

-

The tutorial is for beginners and anyone who would like to review the basics of CSS. If you have more experience with CSS, the CSS main page lists more advanced resources.

- -

What you need to get started

- -

Although the exercises can help you learn, you are not required to complete them. You can simply read the tutorial and look at the pictures.

-

Note: The tutorial covers how CSS works with color. It will be easier to complete these sections with a color display and normal color vision.

-

How to use this tutorial

-

To use this tutorial, read the pages carefully and in sequence. If you skip a page, it may be difficult to understand pages later in the tutorial.

-

Part I: The Basics of CSS

-

On each page, use the Information section to understand how CSS works. Use the Action section to try using CSS on your own computer.

-

To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.

-

To understand CSS in more depth, read the information that you find in boxes captioned More details. Use the links there to find reference information about CSS.

-

Part II: The Scope of CSS

-

A second part of the tutorial provides examples, which show the scope of CSS with other web and Mozilla technologies.

-
    -
  1. JavaScript
    2. -
  2. SVG graphics
    3. -
  3. XML data
    4. -
  4. XBL bindings
    5. -
  5. XUL user interfaces
    6. -
diff --git a/files/id/web/guide/css/media_queries/index.html b/files/id/web/guide/css/media_queries/index.html deleted file mode 100644 index 3fe883c5f6..0000000000 --- a/files/id/web/guide/css/media_queries/index.html +++ /dev/null @@ -1,630 +0,0 @@ ---- -title: Media query CSS -slug: Web/Guide/CSS/Media_queries -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -

Media query terdiri dari jenis media dan paling sedikit satu ekspresi yang membatasi lingkup style sheets dengan menggunakan fitur media, seperti lebar, tinggi, dan warna. Media query, ditambahkan di CSS3, memungkinkan tampilan konten disesuaikan dengan alat penampil tertentu tanpa harus mengubah konten itu sendiri.

- -

Sintaks

- -

Media query terdiri dari jenis media (media type) dan dapat, sesuai dengan spesifikasi CSS3, mengandung satu atau lebih ekspresi, diekspresikan sebagai fitur media, baik benar (true) atau salah (false).  Hasil query adalah benar jika jenis media yang disebutkan dalam media query cocok dengan jenis alat yang digunakan untuk menampilkan dokumen dan semua ekspresi di dalam media query adalah benar.

- -
<!-- Media query CSS pada elemen link -->
-<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
-
-<!-- Media query CSS di dalam style sheet -->
-<style>
-@media (max-width: 600px) {
-  .facet_sidebar {
-    display: none;
-  }
-}
-</style>
- -

Ketika sebuah media query adalah benar, style sheet atau aturan style yang bersangkutan diterapkan, sesuai dengan aturan cascading normal. Style sheet dengan media query yang menempel pada tag <link> masih akan diunduh bahkan jika media query tersebut adalah salah (false) (namun tidak akan diterapkan).

- -

Kecuali jika Anda menggunakan operator not atau only, jenis media adalah opsional dan jenis all akan diterapkan.

- -

Operator logika

- -

Anda dapat merancang media query kompleks menggunakan operator logika, termasuk not, and, dan only. Operator and digunakan untuk menggabungkan banyak fitur media (media features) ke dalam satu media query tunggal, setiap fitur terkait harus benar (true) agar query benar (true). Operator not digunakan untuk menegasikan keseluruhan media query. Operator only digunakan untuk menerapkan suatu style hanya jika keseluruhan query cocok, berguna untuk mencegah browser lama menerapkan style-style tertentu. Jika Anda menggunakan operator-operator not atau only, Anda harus menyebutkan jenis media secara eksplisit.

- -

Anda juga dapat menggabungkan banyak media query dalam sebuah daftar terpisah koma; jika ada media query di dalam daftar yang benar (true), keseluruhan pernyataan media adalah benar (true). Hal ini setara dengan operator or.

- -

and

- -

Kata kunci and digunakan untuk menggabungkan banyak fitur media menjadi satu, seperti menggabungkan fitur media dengan jenis media. Media query dasar, sebuah fitur media tunggal dengan jenis media all secara implisit, dapat terlihat seperti ini:

- -
@media (min-width: 700px) { ... }
- -

Namun, jika, Anda menginginkan hal ini diterapkan hanya untuk tampilan lanskap, Anda dapat menggunakan operator and untuk menggabungkan fitur-fitur media tersebut.

- -
@media (min-width: 700px) and (orientation: landscape) { ... }
- -

Sekarang media query di atas hanya akan benar jika lebar viewport adalah 700px atau lebih dan dalam tampilan lanskap. Namun, jika, Anda hanya menginginkan hal ini untuk diterapkan jika jenis media tampilan adalah TV, Anda dapat menggabungkan fitur-fitur ini dengan jenis media menggunakan operator and.

- -
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
- -

Sekarang, media query di atas hanya akan diterapkan jika jenis media adalah TV, lebar viewport adalah 700px atau lebih, dan tampilan adalah lanskap.

- -

daftar terpisah koma

- -

Daftar terpisah koma adalah seperti operator logika or ketika digunakan dalam media query. Ketika menggunakan daftar media query terpisah koma, jika ada media query yang benar (true), style or style sheet akan diterapkan. Setiap media query di dalam daftar terpisah koma diperlakukan sebagai query individual, dan setiap operator yang diterapkan pada satu media query tidak mempengaruhi yang lainnya. Ini berarti daftar media query terpisah koma dapat ditujukan  untuk fitur, jenis, dan kondisi media yang berbeda.

- -

Sebagai contoh, seandainya Anda ingin menerapkan seperangkat style jika alat penampil memiliki lebar minimum 700px atau alat genggam dalam moda lanskap, Anda dapat menulis sebagai berikut:

- -
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
- -

Pada contoh di atas, jika saya menggunakan perangkat screen dengan lebar viewport 800px, pernyataan media akan benar (true) karena bagian pertama, yang diinterpetasikan sebagai @media all and (min-width: 700px) akan berlaku pada perangkat saya dan oleh karena itu benar (true), terlepas dari fakta bahwa perangkat screen saya akan gagal dalam pengecekan jenis media handheld di media query kedua. Demikian pula, jika saya menggunakan perangkat genggam handheld dalam moda lanskap dengan lebar viewport 500px, walaupun media query pertama gagal karena lebar viewport tidak sesuai, media query kedua akan berhasil dan oleh karena itu pernyataan media akan menghasilkan nilai benar (true).

- -

not

- -

Kata kunci not berlaku pada keseluruhan media query dan memberikan nilai benar (true) jika media query akan sebaliknya memberikan nilai salah (false) (seperti fitur query monochrome pada warna tampilan atau lebar layar 600px dengan min-width: 700px). Sebuah not hanya akan menegasikan media query yang ditetapkan dan bukan setiap media query jika ada dalam daftar media query terpisah koma. Kata kunci not tidak dapat digunakan untuk menegasikan sebuah fitur query individual, hanya untuk media query secara keseluruhan. Sebagai contoh, not dievaluasi paling akhir dalam query berikut ini:

- -
@media not all and (monochrome) { ... }
-
- -

Ini berarti bahwa query tersebut dievaluasi seperti ini:

- -
@media not (all and (monochrome)) { ... }
-
- -

... bukan seperti ini:

- -
@media (not all) and (monochrome) { ... }
- -

Sebagai contoh lain, lihat media query berikut ini:

- -
@media not screen and (color), print and (color)
-
- -

Yang dievaluasi seperti ini:

- -
@media (not (screen and (color))), print and (color)
- -

only

- -

Kata kunci only mencegah browser lama yang tidak mendukung media query dengan fitur media menerapkan style yang disediakan:

- -
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
-
- -

Pseudo-BNF (untuk Anda yang gemar hal seperti ini)

- -
media_query_list: <media_query> [, <media_query> ]*
-media_query: [[only | not]? <media_type> [ and <expression> ]*]
-  | <expression> [ and <expression> ]*
-expression: ( <media_feature> [: <value>]? )
-media_type: all | aural | braille | handheld | print |
-  projection | screen | tty | tv | embossed
-media_feature: width | min-width | max-width
-  | height | min-height | max-height
-  | device-width | min-device-width | max-device-width
-  | device-height | min-device-height | max-device-height
-  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
-  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
-  | color | min-color | max-color
-  | color-index | min-color-index | max-color-index
-  | monochrome | min-monochrome | max-monochrome
-  | resolution | min-resolution | max-resolution
-  | scan | grid
- -

Media query adalah case insensitive.  Media query yang melibatkan jenis media yang tidak diketahui selalu salah (false).

- -
Catatan: Tanda kurung wajib digunakan di sekitar ekspresi; jika tidak digunakan akan mengakibatkan kesalahan.
- -

Fitur media

- -

Sebagian besar fitur media dapat diawali dengan "min-" atau "max-" untuk mengekspresikan batasan "lebih dari atau sama dengan" atau "kurang dari atau sama dengan".  Hal ini menghindari penggunaan simbol "<" dan ">", yang mungkin akan menyebabkan konflik dengan HTML dan XML.  Jika Anda  menggunakan fitur media tanpa nilai tertentu, ekspresi tersebut akan bernilai benar (true) jika nilai fitur adalah bukan-nol.

- -
Catatan: Jika sebuah fitur media tidak sesuai untuk alat di mana browser dijalankan, ekspresi yang melibatkan fitur media tersebut adalah selalu salah (false).  Sebagai contoh, meng-query rasio aspek dari suatu alat aural selalu bernilai salah (false).
- -

color

- -

Nilai: {{cssxref("<color>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max prefixes: ya

- -

Menunjukkan jumlah per komponen warna dari alat penampil.  Jika alat tersebut bukan alat yang memiliki warna, nilai ini adalah nol.

- -
Catatan: Jika komponen warna memiliki jumlah bit yang berbeda per komponen warna, angka yang paling kecillah yang digunakan.  Sebagai contoh, jika sebuat layar menggunakan 5 bit untuk biru dan merah dan 6 bit untuk hijau, maka alat tersebut dianggap menggunakan 5 bit per komponen warna.  Jika suat alat menggunakan warna terindeks, jumlah bit minimum per komponen warna dalam tabel warna yang digunakan.
- -

Contoh

- -

Untuk menerapkan style sheet pada semua alat berwarna:

- -
@media all and (color) { ... }
-
- -

Untuk menerapkan style sheet pada alat yang memiliki paling sedikit 4 bit per komponen warna:

- -
@media all and (min-color: 4) { ... }
-
- -

color-index

- -

Nila: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: ya

- -

Menunjukkan jumlah entri dalam tabel pencarian warna untuk alat penampil.

- -

Contoh

- -

Untuk menunjukkan bahwa suatu style sheet harus diterapkan pada semua alat yang menggunakan warna terindeks, Anda dapat melakukan:

- -
@media all and (color-index) { ... }
-
- -

Untuk menerapkan style sheet pada alat berwarna terindeks dengan paling sedikit 256 warna:

- -
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
-
- -

aspect-ratio

- -

Nilai: {{cssxref("<ratio>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Menerima prefiks min/max: ya

- -

Menggambarkan rasio aspek daerah tampilan dari alat penampil.  Nilai ini terdiri dari dua integer positif dipisahkan oleh karakter garis miring ("/").  Ini menunjukkan rasio piksel horisontal (angka pertama) terhadap piksel vertikal (angka kedua).

- -

Contoh

- -

Berikut ini memilih style sheet khusus untuk digunakan ketika daerah tampilan paling tidak selebar tingginya.

- -
@media screen and (min-aspect-ratio: 1/1) { ... }
- -

Ini memilih style ketika rasio aspek adalah 1:1 atau lebih. Dengan kata lain, style-style ini hanya akan diterapkan ketika area penampil adalah bujursangkar atau lanskap.

- -

device-aspect-ratio

- -

Nilai: {{cssxref("<ratio>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Menerima prefiks min/max: ya

- -

Menggambarkan rasio aspek dari alat penampil.  Nilai ini terdiri dari dua integer positif dipisahkan oleh karakter garis miring ("/").  Hal ini menunjukkan rasio piksel horisontal (yang pertama) terhadap piksel vertikal (yang kedua).

- -

Contoh

- -

Berikut ini memilih style sheet khusus yang digunakan untuk tampilan layar lebar.

- -
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
- -

Ini memilih style ketika rasio aspek adalah 16:9 atau 16:10.

- -

device-height

- -

Nilai: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Menerima prefiks min/max: ya

- -

Menggambarkan tinggi alat penampil (berarti keseluruhan layar atau halaman, bukan hanya area render, seperti jendela dokumen).

- -

Contoh

- -

Untuk menerapkan style sheet pada sebuah dokument ketika ditampilkan pada layar yang memiliki panjang kurang dari 800 piksel, Anda dapat menggunakan ini:

- -
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
-
- -

device-width

- -

Nilai: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Menerima prefiks min/max: ya

- -

Menggambarkan lebar alat penampil (berarti keseluruhan layar atau halaman, bukan hanya area render, seperti jendela dokumen).

- -

Contoh

- -

Untuk menerapkan style sheet pada sebuah dokumen ketika ditampilkan pada layar yang memiliki lebar kurang dari 800 piksel wide, Anda dapat menggunakan ini:

- -
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
- -

grid

- -

Nilai: {{cssxref("<integer>")}}
- Media: all
- Menerima prefiks min/max: tidak

- -

Menentukan apakah alat penampil adalah sebuah alat grid atau bitmap.  Jika alat tersebut berbasis grid (seperti terminal TTY atau layar telepon dengan hanya satu font), nilai adalah 1.  Jika tidak, nilai adalah nol.

- -

Contoh

- -

Untuk menerapkan suatu style pada alat genggam dengan layar selebar 15-karakter atau kurang:

- -
@media handheld and (grid) and (max-width: 15em) { ... }
-
- -
Catatan: Unit "em" memiliki arti khusus untuk alat grid; karena lebar pasti "em" tidak dapat ditentukan, 1em diasumsikan selebar satu sel grid secara horisontal, dan tingginya satu sell secara vertikal.
- -

height

- -

Nilai: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Menerima prefiks min/max: ya

- -

Fitur media height (tinggi) menggambarkan tinggi permukaan rendering alat penampil (seperti tinggi viewport atau kotak halaman pada sebuah printer).

- -
Catatan: Ketika user mengubah ukuran window, Firefox mengganti style sheets dengan yang paling sesuai berdasarkan media query menggunakan fitur media width dan height.
- -

monochrome

- -

Nilai: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: ya

- -

Menunjukkan jumlah bit per piksel pada alat monokrom (keabuan).  Jika alat tersebut bukan monokrom, nilai alat tersebut adalah 0.

- -

Contoh

- -

Untuk menerapkan style sheet pada semua alat monokrom:

- -
@media all and (monochrome) { ... }
-
- -

Untuk menerapkan style sheet pada alat monokrom dengan paling sedikit 8 bit per piksel:

- -
@media all and (min-monochrome: 8) { ... }
-
- -

orientation

- -

Nilai: landscape | portrait
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: tidak

- -

Menunjukkan apakah viewport dalam mode lanskap (tampilan lebih lebar daripada tingginya) atau potret (tampilan lebih tinggi daripada lebarnya).

- -

Contoh

- -

Untuk menerapkan style sheet hanya pada orientasi potret:

- -
@media all and (orientation: portrait) { ... }
- -

resolution

- -

Nilai: {{cssxref("<resolution>")}}
- Media: {{cssxref("Media/Bitmap", "bitmap")}}
- Menerima prefiks min/max: ya

- -

Menunjukkan resolusi (kepadatan piksel) alat penampil. Resolution mungkin disebutkan dalam dots per inch (dpi - titik per inci) atau dots per centimeter (dpcm - titik per sentimeter).

- -

Contoh

- -

Untuk menerapkan style sheet pada alat dengan resolusi paling sedikit 300 dpi:

- -
@media print and (min-resolution: 300dpi) { ... }
-
- -

Untuk mengganti sintaks lama (min-device-pixel-ratio: 2):

- -
@media screen and (min-resolution: 2dppx) { ... }
- -

scan

- -

Nilai: progressive | interlace
- Media: {{cssxref("Media/TV")}}
- Menerima prefiks min/max: tidak

- -

Menggambarkan proses pemindaian alat penampil televisi.

- -

Contoh

- -

Untuk menerapkan style sheet hanya pada televisi pemindai progresif:

- -
@media tv and (scan: progressive) { ... }
-
- -

width

- -

Nilai: {{cssxref("<length>")}}
- Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Menerima prefiks min/max: ya

- -

Fitur media width menggambarkan lebar permukaan rendering alat penampil (seperti lebar jendela dokumen, atau lebar kotak halaman sebuah printer).

- -
Catatan: Ketika user mengubah ukuran jendela, Firefox mengganti style sheets yang sesuai berdasarkan media query menggunakan fitur media width dan height.
- -

Contoh

- -

Jika Anda ingin menentukan sebuah style sheet untuk perangkat genggam, atau perangkat layar dengan lebar lebih besar dari 20em, Anda dapat menggunakan query ini:

- -
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
-
- -

Query Media ini menentukan style sheet yang berlaku untuk media cetak lebih lebar dari 8,5 inci:

- -
<link rel="stylesheet" media="print and (min-width: 8.5in)"
-    href="http://foo.com/mystyle.css" />
-
- -

Query ini menentukan style sheet yang digunakan saat lebar viewport adalah antara 500 dan 800 pixel:

- -
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
-
- -

Fitur Media Spesifik Mozilla

- -

Mozilla menawarkan beberapa fitur media spesifik Gecko. Beberapa di antaranya mungkin diusulkan sebagai fitur media resmi.

- -

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

- -

Nilai: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Meneriman prefiks min/max: tidak

- -

Jika perangkat memungkinkan gambar untuk muncul dalam menu, ini adalah 1; jika tidak, nilainya adalah 0. Ini berhubungan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(images-in-menus)") }}.

- -

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

- -

Nilai: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: no

- -

Jika user telah mengkonfigurasi perangkat mereka untuk menggunakan tampilan "Graphite" pada Mac OS X, ini adalah 1. Jika pengguna menggunakan tampilan biru standar, atau bukan pada Mac OS X, ini adalah 0.

- -

Ini berkaitan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}.

- -

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

- -

Nilai: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: tidak

- -

Jika user menggunakan Maemo dengan tema asli, ini adalah 1; jika menggunakan tema Fremantle yang lebih baru, ini adalah 0.

- -

Ini berkaitan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(maemo-classic)") }}.

- -

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}

- -

Nilai: {{cssxref("<number>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: ya

- -

Memberikan jumlah piksel perangkat per piksel CSS.

- -
-

Jangan gunakan fitur ini.

- -

Tapi gunakanlah fitur resolution dengan unit dppx.

- -


- -moz-device-pixel-ratio mungkin digunakan sebagai kompatibilitas dengan Firefox lebih tua daripada 16 dan -webkit-device-pixel-ratio dengan browser-browser berbasis WebKit yang tidak mendukung dppx.

- -

Contoh:

- -
@media (-webkit-min-device-pixel-ratio: 2), /* Browsers berbasis Webkit */
-       (min--moz-device-pixel-ratio: 2),    /* Browsers yang lebih tua (sebelum Firefox 16) */
-       (min-resolution: 2dppx),             /* Cara standar */
-       (min-resolution: 192dpi)             /* fallback dppx */
- -

Lihat artikel CSSWG ini untuk praktek kompatibilitas yang baik terkait resolution dan dppx.

-
- -
Catatan: Fitur media ini juga diimplementasikan oleh Webkit sebagai -webkit-device-pixel-ratio. Prefiks min dan max seperti diimplementasikan oleh Gecko dinamakan min--moz-device-pixel-ratio dan max--moz-device-pixel-ratio; tetapi prefiks yang sama seperti yang diimplementasikan oleh Webkit dinamakan -webkit-min-device-pixel-ratio dan -webkit-max-device-pixel-ratio.
- -

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

- -

Nilai: windows-xp | windows-vista | windows-win7 | windows-win8
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: tidak

- -

Menunjukkan versi sistem operasi mana yang sedang digunakan saat ini. Saat ini hanya diimplementasikan pada Windows. Nilai-nilai yang mungkin adalah:

- - - -

Ini disediakan untuk aplikasi skins dan kode chrome lainnya agar dapat beradaptasi untuk bekerja dengan baik dengan versi sistem operasi saat ini.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

- -

Nilai: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: no

- -

Jika user interface perangkat menampilkan tombol panah kembali di akhir scrollbar, ini adalah 1. Jika tidak, bernilai 0.

- -

Ini berkaitan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

- -

Nilai: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Menerima prefiks min/max: tidak

- -

If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

- -

Example

- -

You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

- -

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

- -

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

- -

Value: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
- Media: {{cssxref("Media/Visual")}}
- Accepts min/max prefixes: no

- -

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

- - - -

This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.

- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("21") }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE("9.0") }}{{ CompatOpera("9") }}{{ CompatSafari("4") }}
grid{{ CompatUnknown() }}{{ CompatNo() }} (grid media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
resolution{{ CompatChrome("29") }}{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("<integer>")}} values;
- {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("<number>")}} values, as per the spec.		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
scan{{ CompatUnknown() }}{{ CompatNo() }} (tv media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

See also

- - diff --git a/files/id/web/guide/grafis/index.html b/files/id/web/guide/grafis/index.html deleted file mode 100644 index 43fb9b5954..0000000000 --- a/files/id/web/guide/grafis/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Grafis dalam web -slug: Web/Guide/Grafis -tags: - - 2D - - 3D - - Canvas - - Grafik - - MDN - - OpenGL - - Web - - WebRTC -translation_of: Web/Guide/Graphics ---- -

Situs web moderen dan aplikasi sering membutuhkan tampilan grafis. Gambar statis dapat dengan mudah ditamilkan dengan menggunakan elemen {{HTMLElement("img")}} , atau mengatur tampilan background dari elemen HTML dengan menggunakan properti css {{cssxref("background-image")}}. anda sering menginginkan tampilan grafis melayang, atau memanipulasi gambar dari gambar nyatanya. Artikel ini memberikan wawasan tentang bagaimana anda dapat melakukannya

- -
-
-

Grafik 2D

- -
-
Canvas
-
Elemen {{HTMLElement("canvas")}} menyediakan API untuk menggambar grafik 2D menggunakan javascript.
-
SVG
-
Scalable Vector Graphics (SVG) memungkinkan anda menggunakan garis, kurva, dan bentuk geometris lain untuk membuat grafik. Dengan menghindari penggunaan bitmap, Anda dapat membuat gambar yang bersih dengan skala berbagai ukuran.
-
- -

Lihat Semua... 

-
- -
-

Grafik 3D

- -
-
WebGL
-
Sebuah panduan untuk memulai menggunakan WebGL, API grafis 3D untuk Web. Teknologi ini memungkinkan anda menggunakan standar OpenGL ES dalam konten Web.
-
- -

Video

- -
-
Menggunakan HTML5 audio dan video
-
Embedding video dan / atau audio di halaman web dan mengendalikan pemutaran nya.
-
WebRTC
-
RTC pada WebRTC artinya Real-Time Communications, teknologi yang memungkinkan streaming audio/video serta berbagi data antar browser pengguna (peers).
-
-
-
diff --git a/files/id/web/guide/graphics/index.html b/files/id/web/guide/graphics/index.html new file mode 100644 index 0000000000..43fb9b5954 --- /dev/null +++ b/files/id/web/guide/graphics/index.html @@ -0,0 +1,48 @@ +--- +title: Grafis dalam web +slug: Web/Guide/Grafis +tags: + - 2D + - 3D + - Canvas + - Grafik + - MDN + - OpenGL + - Web + - WebRTC +translation_of: Web/Guide/Graphics +--- +

Situs web moderen dan aplikasi sering membutuhkan tampilan grafis. Gambar statis dapat dengan mudah ditamilkan dengan menggunakan elemen {{HTMLElement("img")}} , atau mengatur tampilan background dari elemen HTML dengan menggunakan properti css {{cssxref("background-image")}}. anda sering menginginkan tampilan grafis melayang, atau memanipulasi gambar dari gambar nyatanya. Artikel ini memberikan wawasan tentang bagaimana anda dapat melakukannya

+ +
+
+

Grafik 2D

+ +
+
Canvas
+
Elemen {{HTMLElement("canvas")}} menyediakan API untuk menggambar grafik 2D menggunakan javascript.
+
SVG
+
Scalable Vector Graphics (SVG) memungkinkan anda menggunakan garis, kurva, dan bentuk geometris lain untuk membuat grafik. Dengan menghindari penggunaan bitmap, Anda dapat membuat gambar yang bersih dengan skala berbagai ukuran.
+
+ +

Lihat Semua... 

+
+ +
+

Grafik 3D

+ +
+
WebGL
+
Sebuah panduan untuk memulai menggunakan WebGL, API grafis 3D untuk Web. Teknologi ini memungkinkan anda menggunakan standar OpenGL ES dalam konten Web.
+
+ +

Video

+ +
+
Menggunakan HTML5 audio dan video
+
Embedding video dan / atau audio di halaman web dan mengendalikan pemutaran nya.
+
WebRTC
+
RTC pada WebRTC artinya Real-Time Communications, teknologi yang memungkinkan streaming audio/video serta berbagi data antar browser pengguna (peers).
+
+
+
diff --git a/files/id/web/guide/html/forms/index.html b/files/id/web/guide/html/forms/index.html deleted file mode 100644 index 9daf1d6077..0000000000 --- a/files/id/web/guide/html/forms/index.html +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: HTML forms guide -slug: Web/Guide/HTML/Forms -translation_of: Learn/Forms ---- -

Panduan ini adalah seri dari artikel-artikel yang akan membantu anda menguasai form HTML. Form HTML adalah tool yang paling poweful untuk berinteraksi dengan para pengguna; namun, karena beberapa alasan sejarah dan teknis, tidak jelas bagaimana cara menggunakannya hingga pontensi penuhnya. Dalam panduan ini, kita akan membahas seluruh aspek dari form HTML, struktur form untuk pemberian style, mulai dari penanganan data sampai widget buatan. Anda akan mempelajari bagaimana menikmati kekuatan yang mereka miliki!

-

Articles

-
    -
  1. Form HTML pertama saya
    2. -
  2. Cara membuat struktur form HTML
    3. -
  3. Form Widget native
    4. -
  4. CSS dengan form HTML -
      -
    1. Pemberian style form HTML
      2. -
    2. Pemberian style form HTML Lanjut
      3. -
    3. Tabel kompatibilitas property widget form
      4. -
    -
    5. -
  5. Mengirim dan menerima data form
    6. -
  6. Validasi data form
    7. -
  7. Bagaimana cara membuat gidget form buatan
    8. -
  8. Mengirimkan form melalui JavaScript  -
      -
    1. Menggunakan object FormData
      2. -
    -
    9. -
  9. HTML forms in legacy browsers
    10. -
-

Dokumentasi HTML

-

Elemen-elemen HTML

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementRelated DOM interfaceDescription
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}Elemen button menampilkan tombol yang dapat diklik.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}Elemen datalist menampung kumpulan dari elemen {{ HTMLElement("option") }} yang merepresentasikan pilihan-pilihan yang mungkin untuk nilai dari elemen form lainnya.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}fieldset digunakan untuk menggabungkan beberapa elemen form dalam sebuah form.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}Elemen form merepresentasikan bagian dari dokumen yang memiliki elemen interaktif yang memungkinkan pengguna mengirimkan informasi ke web server.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}Elemen input digunakan untuk membuat kontrol interaktif untuk form.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}Elemen keygen memfasilitasi pembuatan key secara otomatis dan pengiriman public ke sebagai bagian dari form HTML.
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}Elemen label merepresentasikan judul dari sebuah item dalam antar muka user
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}Elemen legend merepresentasikan judul utama dari konten parentnya {{ HTMLElement("fieldset") }}.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}Elemen meter merepresentasikan nilai skalar dalam jangkauan yang diketahui atau nilai fraksi.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}Elemen optgroup membuat grup dari pilihan-pilihan dalam sebuah elemen {{ HTMLElement("select") }}.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}Elemen HTML option digunakan untuk membuat kontrol yang merepresentasikan item yang terdapat dalam sebuah elemen {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} atau {{ HTMLElement("datalist") }}.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}Element output merepresentasikan hasil dari sebuah kalkulasi.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}Element progress digunakan untuk menampilkan progress dari sebuah tugas.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}Elemen select merepresentasikan kontrol yang menyajikan pilihan-pilihan menu.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}Elemen textarea merepresentasikan sebuah kontrol edit dengan multi baris.
-
-

Note: All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.

-
-

HTML Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute NameElementsDescription
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}List of types the server accepts, typically a file type.
accept-charset{{ HTMLElement("form") }}List of supported charsets.
action{{ HTMLElement("form") }}The URI of a program that processes the information submitted via the form.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indicates whether controls in this form can by default have their values automatically completed by the browser.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}The element should be automatically focused after the page loaded.
challenge{{ HTMLElement("keygen") }}A challenge string that is submitted along with the public key.
checked{{ HTMLElement("input") }}Indicates whether the element should be checked on page load.
cols{{ HTMLElement("textarea") }}Defines the number of columns in a textarea.
data{{ HTMLElement("object") }}Specifies the URL of the resource.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether the user can interact with the element.
enctype{{ HTMLElement("form") }}Defines the content type of the form date when the method is POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describes elements which belongs to this one.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates the form that is the owner of the element.
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Specifies the type of key generated.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indicates the maximum value allowed.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Defines the maximum number of characters allowed in the element.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indicates the minimum value allowed.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Name of the element. For example used by the server to identify the fields in form submits.
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Provides a hint to the user of what can be entered in the field.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src{{ HTMLElement("input") }}The URL of the embeddable content.
step{{ HTMLElement("input") }} 
target{{ HTMLElement("form") }} 
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defines the type of the element.
usemap{{ HTMLElement("input") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defines a default value which will be displayed in the element on page load.
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped.
-

Normative reference

- diff --git a/files/id/web/http/gambaran/index.html b/files/id/web/http/gambaran/index.html deleted file mode 100644 index b06d42ac23..0000000000 --- a/files/id/web/http/gambaran/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Gambaran HTTP -slug: Web/HTTP/Gambaran -translation_of: Web/HTTP/Overview ---- -
{{HTTPSidebar}}
- -

HTTP adalah sebuah {{Glossary("protocol")}} yang memungkinkan pengambilan sumber daya, seperti dokumen HTML. Ini adalah dasar dari pertukaran data apa pun di Web dan itu adalah protokol client-server, yang berarti permintaan diprakarsai oleh penerima (Client), biasanya browser Web. Dokumen lengkap direkonstruksi dari berbagai sub-dokumen yang diambil, misalnya teks, deskripsi tata letak, gambar, video, skrip, dan banyak lagi.

- -

A Web document is the composition of different resources

- -

Client dan Server berkomunikasi dengan bertukar pesan individual (sebagai lawan aliran data). Pesan yang dikirim oleh Client, biasanya browser Web, disebut permintaan (requests) dan pesan yang dikirim oleh server sebagai jawaban disebut respons (responses)

- -

HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer.Dirancang pada awal 1990-an, HTTP adalah protokol yang dapat diperluas, yang telah berevolusi dari waktu ke waktu. Ini adalah lapisan aplikasi protokol yang dikirim melalui {{Glossary("TCP")}}, atau melalui koneksi TCP yang terenkripsi {{Glossary("TLS")}} meskipun begitu semua transportasi protokol yang terpercaya secara teori juga dapat digunakan. Karena sifatnya yang dapat diperluas, protokol ini digunakan tidak hanya untuk mengambil dokumen hiperteks, tetapi juga gambar dan video atau untuk memposting konten ke server, sama seperti hasil sebuah form HTML. HTTP juga dapat digunakan untuk mengambil bagian dokumen untuk memperbarui halaman Web sesuai permintaan.

- -

Components of HTTP-based systems

- -

HTTP is a client-server protocol: requests are sent by one entity, the user-agent (or a proxy on behalf of it). Most of the time the user-agent is a Web browser, but it can be anything, for example a robot that crawls the Web to populate and maintain a search engine index.

- -

Each individual request is sent to a server, which handles it and provides an answer, called the response. Between the client and the server there are numerous entities, collectively called {{Glossary("Proxy_server", "proxies")}}, which perform different operations and act as gateways or {{Glossary("Cache", "caches")}}, for example.

- -

Client server chain

- -

In reality, there are more computers between a browser and the server handling the request: there are routers, modems, and more. Thanks to the layered design of the Web, these are hidden in the network and transport layers. HTTP is on top, at the application layer. Although important to diagnose network problems, the underlying layers are mostly irrelevant to the description of HTTP.

- -

Client: the user-agent

- -

The user-agent is any tool that acts on the behalf of the user. This role is primarily performed by the Web browser; other possibilities are programs used by engineers and Web developers to debug their applications.

- -

The browser is always the entity initiating the request. It is never the server (though some mechanisms have been added over the years to simulate server-initiated messages).

- -

To present a Web page, the browser sends an original request to fetch the HTML document that represents the page. It then parses this file, making additional requests corresponding to execution scripts, layout information (CSS) to display, and sub-resources contained within the page (usually images and videos). The Web browser then mixes these resources to present to the user a complete document, the Web page. Scripts executed by the browser can fetch more resources in later phases and the browser updates the Web page accordingly.

- -

A Web page is a hypertext document. This means some parts of displayed text are links which can be activated (usually by a click of the mouse) to fetch a new Web page, allowing the user to direct their user-agent and navigate through the Web. The browser translates these directions in HTTP requests, and further interprets the HTTP responses to present the user with a clear response.

- -

The Web server

- -

On the opposite side of the communication channel, is the server, which serves the document as requested by the client. A server appears as only a single machine virtually: this is because it may actually be a collection of servers, sharing the load (load balancing) or a complex piece of software interrogating other computers (like cache, a DB server, or e-commerce servers), totally or partially generating the document on demand.

- -

A server is not necessarily a single machine, but several server software instances can be hosted on the same machine. With HTTP/1.1 and the {{HTTPHeader("Host")}} header, they may even share the same IP address.

- -

Proxies

- -

Between the Web browser and the server, numerous computers and machines relay the HTTP messages. Due to the layered structure of the Web stack, most of these operate at the transport, network or physical levels, becoming transparent at the HTTP layer and potentially making a significant impact on performance. Those operating at the application layers are generally called proxies. These can be transparent, forwarding on the requests they receive without altering them in any way, or non-transparent, in which case they will change the request in some way before passing it along to the server. Proxies may perform numerous functions:

- - - -

Basic aspects of HTTP

- -

HTTP is simple

- -

HTTP is generally designed to be simple and human readable, even with the added complexity introduced in HTTP/2 by encapsulating HTTP messages into frames. HTTP messages can be read and understood by humans, providing easier testing for developers, and reduced complexity for newcomers.

- -

HTTP is extensible

- -

Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with. New functionality can even be introduced by a simple agreement between a client and a server about a new header's semantics.

- -

HTTP is stateless, but not sessionless

- -

HTTP is stateless: there is no link between two requests being successively carried out on the same connection. This immediately has the prospect of being problematic for users attempting to interact with certain pages coherently, for example, using e-commerce shopping baskets. But while the core of HTTP itself is stateless, HTTP cookies allow the use of stateful sessions. Using header extensibility, HTTP Cookies are added to the workflow, allowing session creation on each HTTP request to share the same context, or the same state.

- -

HTTP and connections

- -

A connection is controlled at the transport layer, and therefore fundamentally out of scope for HTTP. Though HTTP doesn't require the underlying transport protocol to be connection-based; only requiring it to be reliable, or not lose messages (so at minimum presenting an error). Among the two most common transport protocols on the Internet, TCP is reliable and UDP isn't. HTTP therefore relies on the TCP standard, which is connection-based.

- -

Before a client and server can exchange an HTTP request/response pair, they must establish a TCP connection, a process which requires several round-trips. The default behavior of HTTP/1.0 is to open a separate TCP connection for each HTTP request/response pair. This is less efficient than sharing a single TCP connection when multiple requests are sent in close succession.

- -

In order to mitigate this flaw, HTTP/1.1 introduced pipelining (which proved difficult to implement) and persistent connections: the underlying TCP connection can be partially controlled using the {{HTTPHeader("Connection")}} header. HTTP/2 went a step further by multiplexing messages over a single connection, helping keep the connection warm and more efficient.

- -

Experiments are in progress to design a better transport protocol more suited to HTTP. For example, Google is experimenting with QUIC which builds on UDP to provide a more reliable and efficient transport protocol.

- -

What can be controlled by HTTP

- -

This extensible nature of HTTP has, over time, allowed for more control and functionality of the Web. Cache or authentication methods were functions handled early in HTTP history. The ability to relax the origin constraint, by contrast, has only been added in the 2010s.

- -

Here is a list of common features controllable with HTTP.

- - - -

HTTP flow

- -

When a client wants to communicate with a server, either the final server or an intermediate proxy, it performs the following steps:

- -
    -
  1. Open a TCP connection: The TCP connection is used to send a request, or several, and receive an answer. The client may open a new connection, reuse an existing connection, or open several TCP connections to the servers.
    2. -
  2. Send an HTTP message: HTTP messages (before HTTP/2) are human-readable. With HTTP/2, these simple messages are encapsulated in frames, making them impossible to read directly, but the principle remains the same. For example: - 
    GET / HTTP/1.1
-Host: developer.mozilla.org
-Accept-Language: fr
    -
    3. -
  3. Read the response sent by the server, such as: - 
    HTTP/1.1 200 OK
-Date: Sat, 09 Oct 2010 14:28:02 GMT
-Server: Apache
-Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
-ETag: "51142bc1-7449-479b075b2891b"
-Accept-Ranges: bytes
-Content-Length: 29769
-Content-Type: text/html
-
-<!DOCTYPE html... (here comes the 29769 bytes of the requested web page)
    -
    4. -
  4. Close or reuse the connection for further requests.
    5. -
- -

If HTTP pipelining is activated, several requests can be sent without waiting for the first response to be fully received. HTTP pipelining has proven difficult to implement in existing networks, where old pieces of software coexist with modern versions. HTTP pipelining has been superseded in HTTP/2 with more robust multiplexing requests within a frame.

- -

HTTP Messages

- -

HTTP messages, as defined in HTTP/1.1 and earlier, are human-readable. In HTTP/2, these messages are embedded into a binary structure, a frame, allowing optimizations like compression of headers and multiplexing. Even if only part of the original HTTP message is sent in this version of HTTP, the semantics of each message is unchanged and the client reconstitutes (virtually) the original HTTP/1.1 request. It is therefore useful to comprehend HTTP/2 messages in the HTTP/1.1 format.

- -

There are two types of HTTP messages, requests and responses, each with its own format.

- -

Requests

- -

An example HTTP request:

- -

A basic HTTP request

- -

Requests consists of the following elements:

- - - -

Responses

- -

An example response:

- -

- -

Responses consist of the following elements:

- - - -

APIs based on HTTP

- -

The most commonly used API based on HTTP is the {{domxref("XMLHttpRequest")}} API, which can be used to exchange data between a {{Glossary("user agent")}} and a server. The modern {{domxref("Fetch API")}} provides the same features with a more powerful and flexible feature set.

- -

Another API, server-sent events, is a one-way service that allows a server to send events to the client, using HTTP as a transport mechanism. Using the {{domxref("EventSource")}} interface, the client opens a connection and establishes event handlers. The client browser automatically converts the messages that arrive on the HTTP stream into appropriate {{domxref("Event")}} objects, delivering them to the event handlers that have been registered for the events' {{domxref("Event.type", "type")}} if known, or to the {{domxref("EventSource.onmessage", "onmessage")}} event handler if no type-specific event handler was established.

- -

Conclusion

- -

HTTP is an extensible protocol that is easy to use. The client-server structure, combined with the ability to simply add headers, allows HTTP to advance along with the extended capabilities of the Web.

- -

Though HTTP/2 adds some complexity, by embedding HTTP messages in frames to improve performance, the basic structure of messages has stayed the same since HTTP/1.0. Session flow remains simple, allowing it to be investigated, and debugged with a simple HTTP message monitor.

diff --git a/files/id/web/http/overview/index.html b/files/id/web/http/overview/index.html new file mode 100644 index 0000000000..b06d42ac23 --- /dev/null +++ b/files/id/web/http/overview/index.html @@ -0,0 +1,173 @@ +--- +title: Gambaran HTTP +slug: Web/HTTP/Gambaran +translation_of: Web/HTTP/Overview +--- +
{{HTTPSidebar}}
+ +

HTTP adalah sebuah {{Glossary("protocol")}} yang memungkinkan pengambilan sumber daya, seperti dokumen HTML. Ini adalah dasar dari pertukaran data apa pun di Web dan itu adalah protokol client-server, yang berarti permintaan diprakarsai oleh penerima (Client), biasanya browser Web. Dokumen lengkap direkonstruksi dari berbagai sub-dokumen yang diambil, misalnya teks, deskripsi tata letak, gambar, video, skrip, dan banyak lagi.

+ +

A Web document is the composition of different resources

+ +

Client dan Server berkomunikasi dengan bertukar pesan individual (sebagai lawan aliran data). Pesan yang dikirim oleh Client, biasanya browser Web, disebut permintaan (requests) dan pesan yang dikirim oleh server sebagai jawaban disebut respons (responses)

+ +

HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer.Dirancang pada awal 1990-an, HTTP adalah protokol yang dapat diperluas, yang telah berevolusi dari waktu ke waktu. Ini adalah lapisan aplikasi protokol yang dikirim melalui {{Glossary("TCP")}}, atau melalui koneksi TCP yang terenkripsi {{Glossary("TLS")}} meskipun begitu semua transportasi protokol yang terpercaya secara teori juga dapat digunakan. Karena sifatnya yang dapat diperluas, protokol ini digunakan tidak hanya untuk mengambil dokumen hiperteks, tetapi juga gambar dan video atau untuk memposting konten ke server, sama seperti hasil sebuah form HTML. HTTP juga dapat digunakan untuk mengambil bagian dokumen untuk memperbarui halaman Web sesuai permintaan.

+ +

Components of HTTP-based systems

+ +

HTTP is a client-server protocol: requests are sent by one entity, the user-agent (or a proxy on behalf of it). Most of the time the user-agent is a Web browser, but it can be anything, for example a robot that crawls the Web to populate and maintain a search engine index.

+ +

Each individual request is sent to a server, which handles it and provides an answer, called the response. Between the client and the server there are numerous entities, collectively called {{Glossary("Proxy_server", "proxies")}}, which perform different operations and act as gateways or {{Glossary("Cache", "caches")}}, for example.

+ +

Client server chain

+ +

In reality, there are more computers between a browser and the server handling the request: there are routers, modems, and more. Thanks to the layered design of the Web, these are hidden in the network and transport layers. HTTP is on top, at the application layer. Although important to diagnose network problems, the underlying layers are mostly irrelevant to the description of HTTP.

+ +

Client: the user-agent

+ +

The user-agent is any tool that acts on the behalf of the user. This role is primarily performed by the Web browser; other possibilities are programs used by engineers and Web developers to debug their applications.

+ +

The browser is always the entity initiating the request. It is never the server (though some mechanisms have been added over the years to simulate server-initiated messages).

+ +

To present a Web page, the browser sends an original request to fetch the HTML document that represents the page. It then parses this file, making additional requests corresponding to execution scripts, layout information (CSS) to display, and sub-resources contained within the page (usually images and videos). The Web browser then mixes these resources to present to the user a complete document, the Web page. Scripts executed by the browser can fetch more resources in later phases and the browser updates the Web page accordingly.

+ +

A Web page is a hypertext document. This means some parts of displayed text are links which can be activated (usually by a click of the mouse) to fetch a new Web page, allowing the user to direct their user-agent and navigate through the Web. The browser translates these directions in HTTP requests, and further interprets the HTTP responses to present the user with a clear response.

+ +

The Web server

+ +

On the opposite side of the communication channel, is the server, which serves the document as requested by the client. A server appears as only a single machine virtually: this is because it may actually be a collection of servers, sharing the load (load balancing) or a complex piece of software interrogating other computers (like cache, a DB server, or e-commerce servers), totally or partially generating the document on demand.

+ +

A server is not necessarily a single machine, but several server software instances can be hosted on the same machine. With HTTP/1.1 and the {{HTTPHeader("Host")}} header, they may even share the same IP address.

+ +

Proxies

+ +

Between the Web browser and the server, numerous computers and machines relay the HTTP messages. Due to the layered structure of the Web stack, most of these operate at the transport, network or physical levels, becoming transparent at the HTTP layer and potentially making a significant impact on performance. Those operating at the application layers are generally called proxies. These can be transparent, forwarding on the requests they receive without altering them in any way, or non-transparent, in which case they will change the request in some way before passing it along to the server. Proxies may perform numerous functions:

+ + + +

Basic aspects of HTTP

+ +

HTTP is simple

+ +

HTTP is generally designed to be simple and human readable, even with the added complexity introduced in HTTP/2 by encapsulating HTTP messages into frames. HTTP messages can be read and understood by humans, providing easier testing for developers, and reduced complexity for newcomers.

+ +

HTTP is extensible

+ +

Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with. New functionality can even be introduced by a simple agreement between a client and a server about a new header's semantics.

+ +

HTTP is stateless, but not sessionless

+ +

HTTP is stateless: there is no link between two requests being successively carried out on the same connection. This immediately has the prospect of being problematic for users attempting to interact with certain pages coherently, for example, using e-commerce shopping baskets. But while the core of HTTP itself is stateless, HTTP cookies allow the use of stateful sessions. Using header extensibility, HTTP Cookies are added to the workflow, allowing session creation on each HTTP request to share the same context, or the same state.

+ +

HTTP and connections

+ +

A connection is controlled at the transport layer, and therefore fundamentally out of scope for HTTP. Though HTTP doesn't require the underlying transport protocol to be connection-based; only requiring it to be reliable, or not lose messages (so at minimum presenting an error). Among the two most common transport protocols on the Internet, TCP is reliable and UDP isn't. HTTP therefore relies on the TCP standard, which is connection-based.

+ +

Before a client and server can exchange an HTTP request/response pair, they must establish a TCP connection, a process which requires several round-trips. The default behavior of HTTP/1.0 is to open a separate TCP connection for each HTTP request/response pair. This is less efficient than sharing a single TCP connection when multiple requests are sent in close succession.

+ +

In order to mitigate this flaw, HTTP/1.1 introduced pipelining (which proved difficult to implement) and persistent connections: the underlying TCP connection can be partially controlled using the {{HTTPHeader("Connection")}} header. HTTP/2 went a step further by multiplexing messages over a single connection, helping keep the connection warm and more efficient.

+ +

Experiments are in progress to design a better transport protocol more suited to HTTP. For example, Google is experimenting with QUIC which builds on UDP to provide a more reliable and efficient transport protocol.

+ +

What can be controlled by HTTP

+ +

This extensible nature of HTTP has, over time, allowed for more control and functionality of the Web. Cache or authentication methods were functions handled early in HTTP history. The ability to relax the origin constraint, by contrast, has only been added in the 2010s.

+ +

Here is a list of common features controllable with HTTP.

+ + + +

HTTP flow

+ +

When a client wants to communicate with a server, either the final server or an intermediate proxy, it performs the following steps:

+ +
    +
  1. Open a TCP connection: The TCP connection is used to send a request, or several, and receive an answer. The client may open a new connection, reuse an existing connection, or open several TCP connections to the servers.
    2. +
  2. Send an HTTP message: HTTP messages (before HTTP/2) are human-readable. With HTTP/2, these simple messages are encapsulated in frames, making them impossible to read directly, but the principle remains the same. For example: + 
    GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr
    +
    3. +
  3. Read the response sent by the server, such as: + 
    HTTP/1.1 200 OK
+Date: Sat, 09 Oct 2010 14:28:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
+ETag: "51142bc1-7449-479b075b2891b"
+Accept-Ranges: bytes
+Content-Length: 29769
+Content-Type: text/html
+
+<!DOCTYPE html... (here comes the 29769 bytes of the requested web page)
    +
    4. +
  4. Close or reuse the connection for further requests.
    5. +
+ +

If HTTP pipelining is activated, several requests can be sent without waiting for the first response to be fully received. HTTP pipelining has proven difficult to implement in existing networks, where old pieces of software coexist with modern versions. HTTP pipelining has been superseded in HTTP/2 with more robust multiplexing requests within a frame.

+ +

HTTP Messages

+ +

HTTP messages, as defined in HTTP/1.1 and earlier, are human-readable. In HTTP/2, these messages are embedded into a binary structure, a frame, allowing optimizations like compression of headers and multiplexing. Even if only part of the original HTTP message is sent in this version of HTTP, the semantics of each message is unchanged and the client reconstitutes (virtually) the original HTTP/1.1 request. It is therefore useful to comprehend HTTP/2 messages in the HTTP/1.1 format.

+ +

There are two types of HTTP messages, requests and responses, each with its own format.

+ +

Requests

+ +

An example HTTP request:

+ +

A basic HTTP request

+ +

Requests consists of the following elements:

+ + + +

Responses

+ +

An example response:

+ +

+ +

Responses consist of the following elements:

+ + + +

APIs based on HTTP

+ +

The most commonly used API based on HTTP is the {{domxref("XMLHttpRequest")}} API, which can be used to exchange data between a {{Glossary("user agent")}} and a server. The modern {{domxref("Fetch API")}} provides the same features with a more powerful and flexible feature set.

+ +

Another API, server-sent events, is a one-way service that allows a server to send events to the client, using HTTP as a transport mechanism. Using the {{domxref("EventSource")}} interface, the client opens a connection and establishes event handlers. The client browser automatically converts the messages that arrive on the HTTP stream into appropriate {{domxref("Event")}} objects, delivering them to the event handlers that have been registered for the events' {{domxref("Event.type", "type")}} if known, or to the {{domxref("EventSource.onmessage", "onmessage")}} event handler if no type-specific event handler was established.

+ +

Conclusion

+ +

HTTP is an extensible protocol that is easy to use. The client-server structure, combined with the ability to simply add headers, allows HTTP to advance along with the extended capabilities of the Web.

+ +

Though HTTP/2 adds some complexity, by embedding HTTP messages in frames to improve performance, the basic structure of messages has stayed the same since HTTP/1.0. Session flow remains simple, allowing it to be investigated, and debugged with a simple HTTP message monitor.

diff --git a/files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_(pac)_file/index.html b/files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_(pac)_file/index.html deleted file mode 100644 index c470d2fe27..0000000000 --- a/files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_(pac)_file/index.html +++ /dev/null @@ -1,727 +0,0 @@ ---- -title: Proxy Auto-Configuration (PAC) file -slug: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file -translation_of: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file ---- -
{{HTTPSidebar}}
- -

File Proxy Auto-Configuration (PAC) adalah fungsi JavaScript yang menentukan apakah permintaan browser web (HTTP, HTTPS, dan FTP) langsung ke tujuan atau diteruskan ke server proxy web. Fungsi JavaScript yang terdapat dalam file PAC mendefinisikan fungsi tersebut:

- -
function FindProxyForURL(url, host) {
-  // ...
-}
- -

Sintaksis

- -
function FindProxyForURL(url, host)
- -

Parameter

- -
-
url
-
URL sedang diakses. Jalur dan komponen kueri https://URL dihilangkan. Di Chrome (versi 52 hingga 73), Anda dapat menonaktifkan ini dengan menyetel PacHttpsUrlStrippingEnabledke falsedalam kebijakan atau dengan meluncurkan dengan --unsafe-pac-urlbendera baris perintah (di Chrome 74, hanya bendera yang berfungsi, dan dari 75 dan seterusnya, tidak ada cara untuk menonaktifkan jalur- pengupasan; mulai Chrome 81, pengupasan jalur tidak berlaku untuk URL HTTP, tetapi ada minat untuk mengubah perilaku ini agar cocok dengan HTTPS); di Firefox, preferensinya adalah network.proxy.autoconfig_url.include_path.
-
host
-
Nama host diekstrak dari URL. Ini hanya untuk kenyamanan; itu adalah string yang sama seperti antara ://dan yang pertama :atau /setelah itu. Nomor port tidak termasuk dalam parameter ini. Ini dapat diekstrak dari URL bila perlu.
-
- -

Deskripsi

- -

Mengembalikan string yang menjelaskan konfigurasi. Format string ini ditentukan dalam format nilai pengembalian di bawah ini.

- -

Format nilai pengembalian

- - - -
-
DIRECT
-
Koneksi harus dibuat secara langsung, tanpa proxy apa pun
-
PROXY host:port
-
Proksi yang ditentukan harus digunakan
-
SOCKS host:port
-
Server SOCKS yang ditentukan harus digunakan
-
- -

Versi terbaru Firefox juga mendukung:

- -
-
HTTP host:port
-
Proksi yang ditentukan harus digunakan
-
HTTPS host:port
-
Proksi HTTPS yang ditentukan harus digunakan
-
SOCKS4 host:port
-
SOCKS5 host:port
-
Server SOCKS yang ditentukan (dengan versi SOCK yang ditentukan) harus digunakan
-
- -

Jika ada beberapa pengaturan yang dipisahkan titik koma, pengaturan paling kiri akan digunakan, sampai Firefox gagal membuat sambungan ke proxy. Dalam hal ini, nilai selanjutnya akan digunakan, dll.

- -

Browser akan secara otomatis mencoba proxy yang sebelumnya tidak merespons setelah 30 menit. Upaya tambahan akan berlanjut mulai dari satu jam, selalu menambahkan 30 menit ke waktu yang telah berlalu di antara upaya.

- -

Jika semua proxy sedang down, dan tidak ada opsi LANGSUNG yang ditentukan, browser akan menanyakan apakah proxy harus diabaikan untuk sementara, dan koneksi langsung diupayakan. Setelah 20 menit, browser akan menanyakan apakah proxy harus dicoba lagi, menanyakan lagi setelah 40 menit tambahan. Kueri akan berlanjut, selalu menambahkan 20 menit ke waktu yang telah berlalu di antara kueri.

- -

Contoh

- -
-
PROXY w3proxy.netscape.com:8080; PROXY mozilla.netscape.com:8081
-
Proksi utama adalah w3proxy: 8080; jika turun, mulailah menggunakan mozilla: 8081 hingga proxy utama muncul lagi.
-
PROXY w3proxy.netscape.com:8080; PROXY mozilla.netscape.com:8081; DIRECT
-
Sama seperti di atas, tetapi jika kedua proxy turun, secara otomatis mulai membuat koneksi langsung. (Pada contoh pertama di atas, Netscape akan menanyakan konfirmasi pengguna tentang membuat koneksi langsung; dalam hal ini, tidak ada intervensi pengguna.)
-
PROXY w3proxy.netscape.com:8080; SOCKS socks:1080
-
Gunakan SOCKS jika proxy utama mati.
-
- -

File konfigurasi otomatis harus disimpan ke file dengan ekstensi nama file .pac:

- -
proxy.pac
- -

Dan tipe MIME harus disetel ke:

- -
application/x-ns-proxy-autoconfig
- -

Selanjutnya, Anda harus mengkonfigurasi server Anda untuk memetakan ekstensi nama file .pac ke jenis MIME.

- -
-

Catatan:

- - -
- -

Fungsi dan lingkungan yang telah ditentukan sebelumnya

- -

Fungsi-fungsi ini dapat digunakan untuk membuat file PAC:

- - - -
-

Catatan: pactester (bagian dari paket pacparser ) digunakan untuk menguji contoh sintaks berikut.

- - -
- -

isPlainHostName ()

- -

Sintaksis

- -
isPlainHostName(host)
- -

Parameter

- -
-
tuan rumah
-
Nama host dari URL (tidak termasuk nomor port).
-
- -

Deskripsi

- -

Benar jika dan hanya jika tidak ada nama domain di nama host (tidak ada titik).

- -

Contoh

- -
isPlainHostName("www.mozilla.org") // false
-isPlainHostName("www") // true
-
- -

dnsDomainIs()

- -

Sintaksis

- -
dnsDomainIs(host, domain)
- -

Parameter

- -
-
tuan rumah
-
Apakah nama host dari URL.
-
domain
-
Apakah nama domain untuk menguji nama host.
-
- -

Deskripsi

- -

Mengembalikan nilai benar jika dan hanya jika domain nama host cocok.

- -

Contoh

- -
dnsDomainIs("www.mozilla.org", ".mozilla.org") // true
-dnsDomainIs("www", ".mozilla.org") // false
-
- -

localHostOrDomainIs ()

- -

Sintaksis

- -
localHostOrDomainIs(host, hostdom)
- -

Parameter

- -
-
tuan rumah
-
Nama host dari URL.
-
tuan rumah
-
Nama host yang sepenuhnya memenuhi syarat untuk dicocokkan.
-
- -

Deskripsi

- -

Benar jika nama host sama persis dengan nama host yang ditentukan, atau jika tidak ada bagian nama domain dalam nama host, tetapi nama host yang tidak memenuhi syarat cocok.

- -

Contoh

- -
localHostOrDomainIs("www.mozilla.org" , "www.mozilla.org") // true (exact match)
-localHostOrDomainIs("www"             , "www.mozilla.org") // true (hostname match, domain not specified)
-localHostOrDomainIs("www.google.com"  , "www.mozilla.org") // false (domain name mismatch)
-localHostOrDomainIs("home.mozilla.org", "www.mozilla.org") // false (hostname mismatch)
- -

isResolvable ()

- -

Sintaksis

- -
isResolvable(host)
- -

Parameter

- -
-
tuan rumah
-
adalah nama host dari URL.
-
- -

Mencoba menyelesaikan nama host. Mengembalikan nilai benar jika berhasil.

- -

Contoh:

- -
isResolvable("www.mozilla.org") // true
-
- -

isInNet ()

- -

Sintaksis

- -
isInNet(host, pattern, mask)
- -

Parameter

- -
-
tuan rumah
-
nama host DNS, atau alamat IP. Jika nama host dilewatkan, itu akan diselesaikan menjadi alamat IP dengan fungsi ini.
-
pola
-
pola alamat IP dalam format yang dipisahkan titik.
-
topeng
-
mask untuk pola alamat IP yang menginformasikan bagian mana dari alamat IP yang harus dicocokkan. 0 berarti abaikan, 255 berarti cocok.
-
- -

True jika dan hanya jika alamat IP dari host cocok dengan pola alamat IP yang ditentukan.

- -

Spesifikasi pola dan topeng dilakukan dengan cara yang sama seperti untuk konfigurasi SOCKS.

- -

Contoh:

- -
function alert_eval(str) { alert(str + ' is ' + eval(str)) }
-function FindProxyForURL(url, host) {
-  alert_eval('isInNet(host, "63.245.213.24", "255.255.255.255")')
-  // "PAC-alert: isInNet(host, "63.245.213.24", "255.255.255.255") is true"
-}
-
- -

dnsResolve ()

- -
dnsResolve(host)
- -

Parameter

- -
-
tuan rumah
-
nama host untuk diselesaikan.
-
- -

Menyelesaikan nama host DNS yang diberikan menjadi alamat IP, dan mengembalikannya dalam format yang dipisahkan titik sebagai string.

- -

Contoh

- -
dnsResolve("www.mozilla.org"); // returns the string "104.16.41.2"
- -

convert_addr ()

- -

Sintaksis

- -
convert_addr(ipaddr)
- -

Parameter

- -
-
ipaddr
-
Alamat bertitik apa pun seperti alamat IP atau topeng.
-
- -

Menggabungkan empat byte yang dipisahkan titik menjadi satu kata 4-byte dan mengubahnya menjadi desimal.

- -

Contoh

- -
convert_addr("104.16.41.2"); // returns the decimal number 1745889538
- -

myIpAddress ()

- -

Sintaksis

- -
myIpAddress()
- -

Parameter

- -

(tidak ada)

- -

Mengembalikan alamat IP server dari mesin tempat Firefox dijalankan, sebagai string dalam format bilangan bulat yang dipisahkan titik.

- -
-

myIpAddress () mengembalikan alamat IP yang sama dengan alamat server yang dikembalikan oleh nslookup localhost mesin Linux. Itu tidak mengembalikan alamat IP publik.

-
- -

Contoh

- -
myIpAddress() //returns the string "127.0.1.1" if you were running Firefox on that localhost
- -

dnsDomainLevels ()

- -

Sintaksis

- -
dnsDomainLevels(host)
- -

Parameter

- -
-
tuan rumah
-
adalah nama host dari URL.
-
- -

Mengembalikan angka (bilangan bulat) dari level domain DNS (jumlah titik) di nama host.

- -

Contoh:

- -
dnsDomainLevels("www");             // 0
-dnsDomainLevels("mozilla.org");     // 1
-dnsDomainLevels("www.mozilla.org"); // 2
-
- -

shExpMatch ()

- -

Sintaksis

- -
shExpMatch(str, shexp)
- -

Parameter

- -
-
str
-
adalah sembarang string untuk dibandingkan (mis. URL, atau nama host).
-
shexp
-
adalah ekspresi shell untuk dibandingkan.
-
- -

Mengembalikan nilai benar jika string cocok dengan ekspresi shell yang ditentukan.

- -

Perhatikan bahwa polanya adalah ekspresi shell glob , bukan ekspresi reguler. *dan ?selalu didukung, sementara [characters]dan [^characters]didukung oleh beberapa implementasi termasuk Firefox. Ini terutama karena ekspresi diterjemahkan ke RegExp melalui subsitusi [.*?]. Untuk cara yang dapat diandalkan untuk menggunakan sintaks RegExp ini, cukup gunakan RegExp sebagai gantinya.

- -

Contoh

- -
shExpMatch("http://home.netscape.com/people/ari/index.html"     , "*/ari/*"); // returns true
-shExpMatch("http://home.netscape.com/people/montulli/index.html", "*/ari/*"); // returns false
- -

weekdayRange ()

- -

Sintaksis

- -
weekdayRange(wd1, wd2, [gmt])
- -
-

Catatan: (Sebelum Firefox 49) wd1 harus lebih kecil dari wd2 jika Anda ingin fungsi mengevaluasi parameter ini sebagai rentang. Lihat peringatan di bawah.

-
- -

Parameter

- -
-
wd1 dan wd2
-
Salah satu string hari kerja yang dipesan:
-
- 
"SUN"|"MON"|"TUE"|"WED"|"THU"|"FRI"|"SAT"
-
-
waktu Greenwich
-
Apakah string "GMT" atau ditinggalkan.
-
- -

Hanya parameter pertama yang wajib diisi. Entah yang kedua, ketiga, atau keduanya mungkin ditinggalkan.

- -

Jika hanya satu parameter yang ada, fungsi mengembalikan nilai true pada hari kerja yang diwakili oleh parameter. Jika string "GMT" ditetapkan sebagai parameter kedua, waktu dianggap dalam GMT. Jika tidak, mereka diasumsikan berada dalam zona waktu lokal.

- -

Jika wd1 dan wd1 ditentukan, kondisinya benar jika hari kerja saat ini berada di antara dua hari kerja yang dipesan . Batas bersifat inklusif, tetapi batasnya teratur . Jika parameter "GMT" ditentukan, waktu dianggap dalam GMT. Jika tidak, zona waktu lokal digunakan.

- -
-

Urutan hari penting ; Sebelum Firefox 49, akan selalu bernilai true. Sekarang hanya akan mengevaluasi benar jika hari ini adalah Rabu atau Minggu.weekdayRange("SUN", "SAT")weekdayRange("WED", "SUN")

-
- -

Contoh

- -
weekdayRange("MON", "FRI");        // returns true Monday through Friday (local timezone)
-weekdayRange("MON", "FRI", "GMT"); // returns true Monday through Friday (GMT timezone)
-weekdayRange("SAT");               // returns true on Saturdays local time
-weekdayRange("SAT", "GMT");        // returns true on Saturdays GMT time
-weekdayRange("FRI", "MON");        // returns true Friday and Monday only (note, order does matter!)
- -

dateRange()

- -

Syntax

- -
dateRange(<day> | <month> | <year>, [gmt])  // ambiguity is resolved by assuming year is greater than 31
-dateRange(<day1>, <day2>, [gmt])
-dateRange(<month1>, <month2>, [gmt])
-dateRange(<year1>, <year2>, [gmt])
-dateRange(<day1>, <month1>, <day2>, <month2>, [gmt])
-dateRange(<month1>, <year1>, <month2>, <year2>, [gmt])
-dateRange(<day1>, <month1>, <year1>, <day2>, <month2>, <year2>, [gmt])
- -
-

Note: (Before Firefox 49) day1 must be less than day2, month1 must be less than month2, and year1 must be less than year2 if you want the function to evaluate these parameters as a range. See the warning below.

-
- -

Parameters

- -
-
day
-
Is the ordered day of the month between 1 and 31 (as an integer).
-
- -
1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31
- -
-
month
-
Is one of the ordered month strings below.
-
- -
"JAN"|"FEB"|"MAR"|"APR"|"MAY"|"JUN"|"JUL"|"AUG"|"SEP"|"OCT"|"NOV"|"DEC"
- -
-
year
-
Is the ordered full year integer number. For example, 2016 (not 16).
-
gmt
-
Is either the string "GMT", which makes time comparison occur in GMT timezone, or is left out. If left unspecified, times are taken to be in the local timezone.
-
- -

Jika hanya satu nilai yang ditentukan (dari setiap kategori: hari, bulan, tahun), fungsi mengembalikan nilai sebenarnya hanya pada hari yang cocok dengan spesifikasi tersebut. Jika kedua nilai ditentukan, hasilnya adalah benar di antara waktu-waktu tersebut, termasuk batas, tetapi batasnya diurutkan .

- -
-

Urutan hari, bulan, dan tahun penting ; Sebelum Firefox 49, akan selalu mengevaluasi ke . Sekarang hanya akan mengevaluasi benar jika bulan ini adalah Desember atau Januari.dateRange("JAN", "DEC")truedateRange("DEC", "JAN")

-
- -

Contoh

- -
dateRange(1);            // returns true on the first day of each month, local timezone
-dateRange(1, "GMT")      // returns true on the first day of each month, GMT timezone
-dateRange(1, 15);        // returns true on the first half of each month
-dateRange(24, "DEC");    // returns true on 24th of December each year
-dateRange("JAN", "MAR"); // returns true on the first quarter of the year
-
-dateRange(1, "JUN", 15, "AUG");
-// returns true from June 1st until August 15th, each year
-// (including June 1st and August 15th)
-
-dateRange(1, "JUN", 1995, 15, "AUG", 1995);
-// returns true from June 1st, 1995, until August 15th, same year
-
-dateRange("OCT", 1995, "MAR", 1996);
-// returns true from October 1995 until March 1996
-// (including the entire month of October 1995 and March 1996)
-
-dateRange(1995);
-// returns true during the entire year of 1995
-
-dateRange(1995, 1997);
-// returns true from beginning of year 1995 until the end of year 1997
- -

rentang waktu()

- -

Sintaksis

- -
// The full range of expansions is analogous to dateRange.
-timeRange(<hour1>, <min1>, <sec1>, <hour2>, <min2>, <sec2>, [gmt])
- -
-

Catatan: (Sebelum Firefox 49) kategori hour1, min1, sec1 harus kurang dari kategori hour2, min2, sec2 jika Anda ingin fungsi mengevaluasi parameter ini sebagai rentang. Lihat peringatan di bawah.

-
- -

Parameter

- -
-
jam
-
Adalah jam dari 0 hingga 23. (0 adalah tengah malam, 23 adalah 11 malam.)
-
min
-
Menit dari 0 hingga 59.
-
detik
-
Detik dari 0 hingga 59.
-
waktu Greenwich
-
Baik string "GMT" untuk zona waktu GMT, atau tidak ditentukan, untuk zona waktu lokal.
-
- -

Jika hanya satu nilai yang ditentukan (dari setiap kategori: jam, menit, detik), fungsi mengembalikan nilai sebenarnya hanya pada waktu yang sesuai dengan spesifikasi tersebut. Jika kedua nilai ditentukan, hasilnya adalah benar di antara waktu-waktu tersebut, termasuk batas, tetapi batasnya diurutkan .

- -
-

Urutan jam, menit, materi kedua ; Sebelum Firefox 49, akan selalu bernilai true. Sekarang hanya akan mengevaluasi benar jika jam saat ini adalah 23:00 atau tengah malam.timeRange(0, 23)timeRange(23, 0)

-
- -

Contoh

- -
timerange(12);                // returns true from noon to 1pm
-timerange(12, 13);            // returns true from noon to 1pm
-timerange(12, "GMT");         // returns true from noon to 1pm, in GMT timezone
-timerange(9, 17);             // returns true from 9am to 5pm
-timerange(8, 30, 17, 00);     // returns true from 8:30am to 5:00pm
-timerange(0, 0, 0, 0, 0, 30); // returns true between midnight and 30 seconds past midnight
- -

Contoh 1

- -

Gunakan proxy untuk semuanya kecuali host lokal

- -
-

Catatan: Karena semua contoh berikut sangat spesifik, mereka belum diuji.

-
- -

All hosts which aren't fully qualified, or the ones that are in local domain, will be connected to directly. Everything else will go through w3proxy.mozilla.org:8080. If the proxy goes down, connections become direct automatically:

- -
function FindProxyForURL(url, host) {
-  if (isPlainHostName(host) || dnsDomainIs(host, ".mozilla.org")) {
-    return "DIRECT";
-  } else {
-    return "PROXY w3proxy.mozilla.org:8080; DIRECT";
-  }
-}
- -
-

Note: This is the simplest and most efficient autoconfig file for cases where there's only one proxy.

-
- -

Example 2

- -

As above, but use proxy for local servers which are outside the firewall

- -

If there are hosts (such as the main Web server) that belong to the local domain but are outside the firewall and are only reachable through the proxy server, those exceptions can be handled using the localHostOrDomainIs() function:

- -
function FindProxyForURL(url, host) {
-  if (
-    (isPlainHostName(host) || dnsDomainIs(host, ".mozilla.org")) &&
-    !localHostOrDomainIs(host, "www.mozilla.org") &&
-    !localHostOrDoaminIs(host, "merchant.mozilla.org")
-  ) {
-    return "DIRECT";
-  } else {
-    return "PROXY w3proxy.mozilla.org:8080; DIRECT";
-  }
-}
- -

The above example will use the proxy for everything except local hosts in the mozilla.org domain, with the further exception that hosts www.mozilla.org and merchant.mozilla.org will go through the proxy.

- -
-

Note the order of the above exceptions for efficiency: localHostOrDomainIs() functions only get executed for URLs that are in local domain, not for every URL. Be careful to note the parentheses around the or expression before the and expression to achieve the above-mentioned efficient behaviour.

-
- -

Example 3

- -

Use proxy only if cannot resolve host

- -

This example will work in an environment where the internal DNS server is set up so that it can only resolve internal host names, and the goal is to use a proxy only for hosts that aren't resolvable:

- -
function FindProxyForURL(url, host) {
-  if (isResolvable(host))
-    return "DIRECT";
-  else
-    return "PROXY proxy.mydomain.com:8080";
-}
- -

The above requires consulting the DNS every time; it can be grouped intelligently with other rules so that DNS is consulted only if other rules do not yield a result:

- -
function FindProxyForURL(url, host) {
-  if (
-    isPlainHostName(host) ||
-    dnsDomainIs(host, ".mydomain.com") ||
-    isResolvable(host)
-  ) {
-    return "DIRECT";
-  } else {
-    return "PROXY proxy.mydomain.com:8080";
-  }
-}
- -

Example 4

- -

Subnet based decisions

- -

In this example all of the hosts in a given subnet are connected-to directly, others are connected through the proxy:

- -
function FindProxyForURL(url, host) {
-  if (isInNet(host, "198.95.0.0", "255.255.0.0"))
-    return "DIRECT";
-  else
-    return "PROXY proxy.mydomain.com:8080";
-}
- -

Again, use of the DNS server in the above can be minimized by adding redundant rules in the beginning:

- -
function FindProxyForURL(url, host) {
-  if (
-    isPlainHostName(host) ||
-    dnsDomainIs(host, ".mydomain.com") ||
-    isInNet(host, "198.95.0.0", "255.255.0.0")
-  ) {
-    return "DIRECT";
-  } else {
-    return "PROXY proxy.mydomain.com:8080";
-  }
-}
- -

Example 5

- -

Load balancing/routing based on URL patterns

- -

This example is more sophisticated. There are four (4) proxy servers; one of them is a hot stand-by for all of the other ones, so if any of the remaining three goes down the fourth one will take over. Furthermore, the three remaining proxy servers share the load based on URL patterns, which makes their caching more effective (there is only one copy of any document on the three servers - as opposed to one copy on each of them). The load is distributed like this:

- - - - - - - - - - - - - - - - - - - - - - - - -
ProxyPurpose
#1.com domain
#2.edu domain
#3all other domains
#4hot stand-by
- -

All local accesses are desired to be direct. All proxy servers run on the port 8080 (they don't need to, you can just change your port but remember to modify your configuations on both side). Note how strings can be concatenated with the + operator in JavaScript.

- -
function FindProxyForURL(url, host) {
-
-  if (isPlainHostName(host) || dnsDomainIs(host, ".mydomain.com"))
-    return "DIRECT";
-
-  else if (shExpMatch(host, "*.com"))
-    return "PROXY proxy1.mydomain.com:8080; " +
-           "PROXY proxy4.mydomain.com:8080";
-
-  else if (shExpMatch(host, "*.edu"))
-    return "PROXY proxy2.mydomain.com:8080; " +
-           "PROXY proxy4.mydomain.com:8080";
-
-  else
-    return "PROXY proxy3.mydomain.com:8080; " +
-           "PROXY proxy4.mydomain.com:8080";
-}
- -

Example 6

- -

Setting a proxy for a specific protocol

- -

Most of the standard JavaScript functionality is available for use in the FindProxyForURL() function. As an example, to set different proxies based on the protocol the {{jsxref("String.prototype.startsWith()", "startsWith()")}} function can be used:

- -
function FindProxyForURL(url, host) {
-
-  if (url.startsWith("http:"))
-    return "PROXY http-proxy.mydomain.com:8080";
-
-  else if (url.startsWith("ftp:"))
-    return "PROXY ftp-proxy.mydomain.com:8080";
-
-  else if (url.startsWith(“gopher:"))
-    return "PROXY gopher-proxy.mydomain.com:8080";
-
-  else if (url.startsWith("https:") || url.startsWith("snews:"))
-    return "PROXY security-proxy.mydomain.com:8080";
-
-  else
-    return "DIRECT";
-
-}
- -
-

Note: The same can be accomplished using the shExpMatch() function described earlier.

-
- -

For example:

- -
// ...
-if (shExpMatch(url, "http:*")) {
-  return "PROXY http-proxy.mydomain.com:8080";
-}
-// ...
- -
-

The autoconfig file can be output by a CGI script. This is useful, for example, when making the autoconfig file act differently based on the client IP address (the REMOTE_ADDR environment variable in CGI).

- -

Usage of isInNet(), isResolvable() and dnsResolve() functions should be carefully considered, as they require the DNS server to be consulted. All the other autoconfig-related functions are mere string-matching functions that don't require the use of a DNS server. If a proxy is used, the proxy will perform its DNS lookup which would double the impact on the DNS server. Most of the time these functions are not necessary to achieve the desired result.

-
- -

History and implementation

- -

Proxy auto-config was introduced into Netscape Navigator 2.0 in the late 1990s, at the same time when JavaScript was introduced. Open-sourcing Netscape eventually lead to Firefox itself.

- -

Oleh karena itu, implementasi PAC yang paling "asli" dan pustaka JavaScript-nya nsProxyAutoConfig.jsditemukan di versi awal Firefox. Utilitas ini ditemukan di banyak sistem sumber terbuka lainnya termasuk Chromium . Firefox kemudian mengintegrasikan file tersebut menjadi ProxyAutoConfig.cppliteral string C ++. Untuk mengekstraknya ke dalam filenya sendiri, cukup dengan menyalin potongan ke JavaScript dengan console.logperintah untuk mencetaknya.

- -

Microsoft secara umum membuat implementasinya sendiri. Dulu ada beberapa masalah dengan pustaka mereka , tetapi sebagian besar telah diselesaikan sekarang. Mereka telah mendefinisikan beberapa fungsi sufiks "Ex" baru di sekitar bagian penanganan alamat untuk mendukung IPv6. Fitur ini didukung oleh Chromium, tetapi belum didukung oleh Firefox ( bugzilla # 558253 ).

diff --git a/files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html b/files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html new file mode 100644 index 0000000000..c470d2fe27 --- /dev/null +++ b/files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html @@ -0,0 +1,727 @@ +--- +title: Proxy Auto-Configuration (PAC) file +slug: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file +translation_of: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file +--- +
{{HTTPSidebar}}
+ +

File Proxy Auto-Configuration (PAC) adalah fungsi JavaScript yang menentukan apakah permintaan browser web (HTTP, HTTPS, dan FTP) langsung ke tujuan atau diteruskan ke server proxy web. Fungsi JavaScript yang terdapat dalam file PAC mendefinisikan fungsi tersebut:

+ +
function FindProxyForURL(url, host) {
+  // ...
+}
+ +

Sintaksis

+ +
function FindProxyForURL(url, host)
+ +

Parameter

+ +
+
url
+
URL sedang diakses. Jalur dan komponen kueri https://URL dihilangkan. Di Chrome (versi 52 hingga 73), Anda dapat menonaktifkan ini dengan menyetel PacHttpsUrlStrippingEnabledke falsedalam kebijakan atau dengan meluncurkan dengan --unsafe-pac-urlbendera baris perintah (di Chrome 74, hanya bendera yang berfungsi, dan dari 75 dan seterusnya, tidak ada cara untuk menonaktifkan jalur- pengupasan; mulai Chrome 81, pengupasan jalur tidak berlaku untuk URL HTTP, tetapi ada minat untuk mengubah perilaku ini agar cocok dengan HTTPS); di Firefox, preferensinya adalah network.proxy.autoconfig_url.include_path.
+
host
+
Nama host diekstrak dari URL. Ini hanya untuk kenyamanan; itu adalah string yang sama seperti antara ://dan yang pertama :atau /setelah itu. Nomor port tidak termasuk dalam parameter ini. Ini dapat diekstrak dari URL bila perlu.
+
+ +

Deskripsi

+ +

Mengembalikan string yang menjelaskan konfigurasi. Format string ini ditentukan dalam format nilai pengembalian di bawah ini.

+ +

Format nilai pengembalian

+ + + +
+
DIRECT
+
Koneksi harus dibuat secara langsung, tanpa proxy apa pun
+
PROXY host:port
+
Proksi yang ditentukan harus digunakan
+
SOCKS host:port
+
Server SOCKS yang ditentukan harus digunakan
+
+ +

Versi terbaru Firefox juga mendukung:

+ +
+
HTTP host:port
+
Proksi yang ditentukan harus digunakan
+
HTTPS host:port
+
Proksi HTTPS yang ditentukan harus digunakan
+
SOCKS4 host:port
+
SOCKS5 host:port
+
Server SOCKS yang ditentukan (dengan versi SOCK yang ditentukan) harus digunakan
+
+ +

Jika ada beberapa pengaturan yang dipisahkan titik koma, pengaturan paling kiri akan digunakan, sampai Firefox gagal membuat sambungan ke proxy. Dalam hal ini, nilai selanjutnya akan digunakan, dll.

+ +

Browser akan secara otomatis mencoba proxy yang sebelumnya tidak merespons setelah 30 menit. Upaya tambahan akan berlanjut mulai dari satu jam, selalu menambahkan 30 menit ke waktu yang telah berlalu di antara upaya.

+ +

Jika semua proxy sedang down, dan tidak ada opsi LANGSUNG yang ditentukan, browser akan menanyakan apakah proxy harus diabaikan untuk sementara, dan koneksi langsung diupayakan. Setelah 20 menit, browser akan menanyakan apakah proxy harus dicoba lagi, menanyakan lagi setelah 40 menit tambahan. Kueri akan berlanjut, selalu menambahkan 20 menit ke waktu yang telah berlalu di antara kueri.

+ +

Contoh

+ +
+
PROXY w3proxy.netscape.com:8080; PROXY mozilla.netscape.com:8081
+
Proksi utama adalah w3proxy: 8080; jika turun, mulailah menggunakan mozilla: 8081 hingga proxy utama muncul lagi.
+
PROXY w3proxy.netscape.com:8080; PROXY mozilla.netscape.com:8081; DIRECT
+
Sama seperti di atas, tetapi jika kedua proxy turun, secara otomatis mulai membuat koneksi langsung. (Pada contoh pertama di atas, Netscape akan menanyakan konfirmasi pengguna tentang membuat koneksi langsung; dalam hal ini, tidak ada intervensi pengguna.)
+
PROXY w3proxy.netscape.com:8080; SOCKS socks:1080
+
Gunakan SOCKS jika proxy utama mati.
+
+ +

File konfigurasi otomatis harus disimpan ke file dengan ekstensi nama file .pac:

+ +
proxy.pac
+ +

Dan tipe MIME harus disetel ke:

+ +
application/x-ns-proxy-autoconfig
+ +

Selanjutnya, Anda harus mengkonfigurasi server Anda untuk memetakan ekstensi nama file .pac ke jenis MIME.

+ +
+

Catatan:

+ + +
+ +

Fungsi dan lingkungan yang telah ditentukan sebelumnya

+ +

Fungsi-fungsi ini dapat digunakan untuk membuat file PAC:

+ + + +
+

Catatan: pactester (bagian dari paket pacparser ) digunakan untuk menguji contoh sintaks berikut.

+ + +
+ +

isPlainHostName ()

+ +

Sintaksis

+ +
isPlainHostName(host)
+ +

Parameter

+ +
+
tuan rumah
+
Nama host dari URL (tidak termasuk nomor port).
+
+ +

Deskripsi

+ +

Benar jika dan hanya jika tidak ada nama domain di nama host (tidak ada titik).

+ +

Contoh

+ +
isPlainHostName("www.mozilla.org") // false
+isPlainHostName("www") // true
+
+ +

dnsDomainIs()

+ +

Sintaksis

+ +
dnsDomainIs(host, domain)
+ +

Parameter

+ +
+
tuan rumah
+
Apakah nama host dari URL.
+
domain
+
Apakah nama domain untuk menguji nama host.
+
+ +

Deskripsi

+ +

Mengembalikan nilai benar jika dan hanya jika domain nama host cocok.

+ +

Contoh

+ +
dnsDomainIs("www.mozilla.org", ".mozilla.org") // true
+dnsDomainIs("www", ".mozilla.org") // false
+
+ +

localHostOrDomainIs ()

+ +

Sintaksis

+ +
localHostOrDomainIs(host, hostdom)
+ +

Parameter

+ +
+
tuan rumah
+
Nama host dari URL.
+
tuan rumah
+
Nama host yang sepenuhnya memenuhi syarat untuk dicocokkan.
+
+ +

Deskripsi

+ +

Benar jika nama host sama persis dengan nama host yang ditentukan, atau jika tidak ada bagian nama domain dalam nama host, tetapi nama host yang tidak memenuhi syarat cocok.

+ +

Contoh

+ +
localHostOrDomainIs("www.mozilla.org" , "www.mozilla.org") // true (exact match)
+localHostOrDomainIs("www"             , "www.mozilla.org") // true (hostname match, domain not specified)
+localHostOrDomainIs("www.google.com"  , "www.mozilla.org") // false (domain name mismatch)
+localHostOrDomainIs("home.mozilla.org", "www.mozilla.org") // false (hostname mismatch)
+ +

isResolvable ()

+ +

Sintaksis

+ +
isResolvable(host)
+ +

Parameter

+ +
+
tuan rumah
+
adalah nama host dari URL.
+
+ +

Mencoba menyelesaikan nama host. Mengembalikan nilai benar jika berhasil.

+ +

Contoh:

+ +
isResolvable("www.mozilla.org") // true
+
+ +

isInNet ()

+ +

Sintaksis

+ +
isInNet(host, pattern, mask)
+ +

Parameter

+ +
+
tuan rumah
+
nama host DNS, atau alamat IP. Jika nama host dilewatkan, itu akan diselesaikan menjadi alamat IP dengan fungsi ini.
+
pola
+
pola alamat IP dalam format yang dipisahkan titik.
+
topeng
+
mask untuk pola alamat IP yang menginformasikan bagian mana dari alamat IP yang harus dicocokkan. 0 berarti abaikan, 255 berarti cocok.
+
+ +

True jika dan hanya jika alamat IP dari host cocok dengan pola alamat IP yang ditentukan.

+ +

Spesifikasi pola dan topeng dilakukan dengan cara yang sama seperti untuk konfigurasi SOCKS.

+ +

Contoh:

+ +
function alert_eval(str) { alert(str + ' is ' + eval(str)) }
+function FindProxyForURL(url, host) {
+  alert_eval('isInNet(host, "63.245.213.24", "255.255.255.255")')
+  // "PAC-alert: isInNet(host, "63.245.213.24", "255.255.255.255") is true"
+}
+
+ +

dnsResolve ()

+ +
dnsResolve(host)
+ +

Parameter

+ +
+
tuan rumah
+
nama host untuk diselesaikan.
+
+ +

Menyelesaikan nama host DNS yang diberikan menjadi alamat IP, dan mengembalikannya dalam format yang dipisahkan titik sebagai string.

+ +

Contoh

+ +
dnsResolve("www.mozilla.org"); // returns the string "104.16.41.2"
+ +

convert_addr ()

+ +

Sintaksis

+ +
convert_addr(ipaddr)
+ +

Parameter

+ +
+
ipaddr
+
Alamat bertitik apa pun seperti alamat IP atau topeng.
+
+ +

Menggabungkan empat byte yang dipisahkan titik menjadi satu kata 4-byte dan mengubahnya menjadi desimal.

+ +

Contoh

+ +
convert_addr("104.16.41.2"); // returns the decimal number 1745889538
+ +

myIpAddress ()

+ +

Sintaksis

+ +
myIpAddress()
+ +

Parameter

+ +

(tidak ada)

+ +

Mengembalikan alamat IP server dari mesin tempat Firefox dijalankan, sebagai string dalam format bilangan bulat yang dipisahkan titik.

+ +
+

myIpAddress () mengembalikan alamat IP yang sama dengan alamat server yang dikembalikan oleh nslookup localhost mesin Linux. Itu tidak mengembalikan alamat IP publik.

+
+ +

Contoh

+ +
myIpAddress() //returns the string "127.0.1.1" if you were running Firefox on that localhost
+ +

dnsDomainLevels ()

+ +

Sintaksis

+ +
dnsDomainLevels(host)
+ +

Parameter

+ +
+
tuan rumah
+
adalah nama host dari URL.
+
+ +

Mengembalikan angka (bilangan bulat) dari level domain DNS (jumlah titik) di nama host.

+ +

Contoh:

+ +
dnsDomainLevels("www");             // 0
+dnsDomainLevels("mozilla.org");     // 1
+dnsDomainLevels("www.mozilla.org"); // 2
+
+ +

shExpMatch ()

+ +

Sintaksis

+ +
shExpMatch(str, shexp)
+ +

Parameter

+ +
+
str
+
adalah sembarang string untuk dibandingkan (mis. URL, atau nama host).
+
shexp
+
adalah ekspresi shell untuk dibandingkan.
+
+ +

Mengembalikan nilai benar jika string cocok dengan ekspresi shell yang ditentukan.

+ +

Perhatikan bahwa polanya adalah ekspresi shell glob , bukan ekspresi reguler. *dan ?selalu didukung, sementara [characters]dan [^characters]didukung oleh beberapa implementasi termasuk Firefox. Ini terutama karena ekspresi diterjemahkan ke RegExp melalui subsitusi [.*?]. Untuk cara yang dapat diandalkan untuk menggunakan sintaks RegExp ini, cukup gunakan RegExp sebagai gantinya.

+ +

Contoh

+ +
shExpMatch("http://home.netscape.com/people/ari/index.html"     , "*/ari/*"); // returns true
+shExpMatch("http://home.netscape.com/people/montulli/index.html", "*/ari/*"); // returns false
+ +

weekdayRange ()

+ +

Sintaksis

+ +
weekdayRange(wd1, wd2, [gmt])
+ +
+

Catatan: (Sebelum Firefox 49) wd1 harus lebih kecil dari wd2 jika Anda ingin fungsi mengevaluasi parameter ini sebagai rentang. Lihat peringatan di bawah.

+
+ +

Parameter

+ +
+
wd1 dan wd2
+
Salah satu string hari kerja yang dipesan:
+
+ 
"SUN"|"MON"|"TUE"|"WED"|"THU"|"FRI"|"SAT"
+
+
waktu Greenwich
+
Apakah string "GMT" atau ditinggalkan.
+
+ +

Hanya parameter pertama yang wajib diisi. Entah yang kedua, ketiga, atau keduanya mungkin ditinggalkan.

+ +

Jika hanya satu parameter yang ada, fungsi mengembalikan nilai true pada hari kerja yang diwakili oleh parameter. Jika string "GMT" ditetapkan sebagai parameter kedua, waktu dianggap dalam GMT. Jika tidak, mereka diasumsikan berada dalam zona waktu lokal.

+ +

Jika wd1 dan wd1 ditentukan, kondisinya benar jika hari kerja saat ini berada di antara dua hari kerja yang dipesan . Batas bersifat inklusif, tetapi batasnya teratur . Jika parameter "GMT" ditentukan, waktu dianggap dalam GMT. Jika tidak, zona waktu lokal digunakan.

+ +
+

Urutan hari penting ; Sebelum Firefox 49, akan selalu bernilai true. Sekarang hanya akan mengevaluasi benar jika hari ini adalah Rabu atau Minggu.weekdayRange("SUN", "SAT")weekdayRange("WED", "SUN")

+
+ +

Contoh

+ +
weekdayRange("MON", "FRI");        // returns true Monday through Friday (local timezone)
+weekdayRange("MON", "FRI", "GMT"); // returns true Monday through Friday (GMT timezone)
+weekdayRange("SAT");               // returns true on Saturdays local time
+weekdayRange("SAT", "GMT");        // returns true on Saturdays GMT time
+weekdayRange("FRI", "MON");        // returns true Friday and Monday only (note, order does matter!)
+ +

dateRange()

+ +

Syntax

+ +
dateRange(<day> | <month> | <year>, [gmt])  // ambiguity is resolved by assuming year is greater than 31
+dateRange(<day1>, <day2>, [gmt])
+dateRange(<month1>, <month2>, [gmt])
+dateRange(<year1>, <year2>, [gmt])
+dateRange(<day1>, <month1>, <day2>, <month2>, [gmt])
+dateRange(<month1>, <year1>, <month2>, <year2>, [gmt])
+dateRange(<day1>, <month1>, <year1>, <day2>, <month2>, <year2>, [gmt])
+ +
+

Note: (Before Firefox 49) day1 must be less than day2, month1 must be less than month2, and year1 must be less than year2 if you want the function to evaluate these parameters as a range. See the warning below.

+
+ +

Parameters

+ +
+
day
+
Is the ordered day of the month between 1 and 31 (as an integer).
+
+ +
1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31
+ +
+
month
+
Is one of the ordered month strings below.
+
+ +
"JAN"|"FEB"|"MAR"|"APR"|"MAY"|"JUN"|"JUL"|"AUG"|"SEP"|"OCT"|"NOV"|"DEC"
+ +
+
year
+
Is the ordered full year integer number. For example, 2016 (not 16).
+
gmt
+
Is either the string "GMT", which makes time comparison occur in GMT timezone, or is left out. If left unspecified, times are taken to be in the local timezone.
+
+ +

Jika hanya satu nilai yang ditentukan (dari setiap kategori: hari, bulan, tahun), fungsi mengembalikan nilai sebenarnya hanya pada hari yang cocok dengan spesifikasi tersebut. Jika kedua nilai ditentukan, hasilnya adalah benar di antara waktu-waktu tersebut, termasuk batas, tetapi batasnya diurutkan .

+ +
+

Urutan hari, bulan, dan tahun penting ; Sebelum Firefox 49, akan selalu mengevaluasi ke . Sekarang hanya akan mengevaluasi benar jika bulan ini adalah Desember atau Januari.dateRange("JAN", "DEC")truedateRange("DEC", "JAN")

+
+ +

Contoh

+ +
dateRange(1);            // returns true on the first day of each month, local timezone
+dateRange(1, "GMT")      // returns true on the first day of each month, GMT timezone
+dateRange(1, 15);        // returns true on the first half of each month
+dateRange(24, "DEC");    // returns true on 24th of December each year
+dateRange("JAN", "MAR"); // returns true on the first quarter of the year
+
+dateRange(1, "JUN", 15, "AUG");
+// returns true from June 1st until August 15th, each year
+// (including June 1st and August 15th)
+
+dateRange(1, "JUN", 1995, 15, "AUG", 1995);
+// returns true from June 1st, 1995, until August 15th, same year
+
+dateRange("OCT", 1995, "MAR", 1996);
+// returns true from October 1995 until March 1996
+// (including the entire month of October 1995 and March 1996)
+
+dateRange(1995);
+// returns true during the entire year of 1995
+
+dateRange(1995, 1997);
+// returns true from beginning of year 1995 until the end of year 1997
+ +

rentang waktu()

+ +

Sintaksis

+ +
// The full range of expansions is analogous to dateRange.
+timeRange(<hour1>, <min1>, <sec1>, <hour2>, <min2>, <sec2>, [gmt])
+ +
+

Catatan: (Sebelum Firefox 49) kategori hour1, min1, sec1 harus kurang dari kategori hour2, min2, sec2 jika Anda ingin fungsi mengevaluasi parameter ini sebagai rentang. Lihat peringatan di bawah.

+
+ +

Parameter

+ +
+
jam
+
Adalah jam dari 0 hingga 23. (0 adalah tengah malam, 23 adalah 11 malam.)
+
min
+
Menit dari 0 hingga 59.
+
detik
+
Detik dari 0 hingga 59.
+
waktu Greenwich
+
Baik string "GMT" untuk zona waktu GMT, atau tidak ditentukan, untuk zona waktu lokal.
+
+ +

Jika hanya satu nilai yang ditentukan (dari setiap kategori: jam, menit, detik), fungsi mengembalikan nilai sebenarnya hanya pada waktu yang sesuai dengan spesifikasi tersebut. Jika kedua nilai ditentukan, hasilnya adalah benar di antara waktu-waktu tersebut, termasuk batas, tetapi batasnya diurutkan .

+ +
+

Urutan jam, menit, materi kedua ; Sebelum Firefox 49, akan selalu bernilai true. Sekarang hanya akan mengevaluasi benar jika jam saat ini adalah 23:00 atau tengah malam.timeRange(0, 23)timeRange(23, 0)

+
+ +

Contoh

+ +
timerange(12);                // returns true from noon to 1pm
+timerange(12, 13);            // returns true from noon to 1pm
+timerange(12, "GMT");         // returns true from noon to 1pm, in GMT timezone
+timerange(9, 17);             // returns true from 9am to 5pm
+timerange(8, 30, 17, 00);     // returns true from 8:30am to 5:00pm
+timerange(0, 0, 0, 0, 0, 30); // returns true between midnight and 30 seconds past midnight
+ +

Contoh 1

+ +

Gunakan proxy untuk semuanya kecuali host lokal

+ +
+

Catatan: Karena semua contoh berikut sangat spesifik, mereka belum diuji.

+
+ +

All hosts which aren't fully qualified, or the ones that are in local domain, will be connected to directly. Everything else will go through w3proxy.mozilla.org:8080. If the proxy goes down, connections become direct automatically:

+ +
function FindProxyForURL(url, host) {
+  if (isPlainHostName(host) || dnsDomainIs(host, ".mozilla.org")) {
+    return "DIRECT";
+  } else {
+    return "PROXY w3proxy.mozilla.org:8080; DIRECT";
+  }
+}
+ +
+

Note: This is the simplest and most efficient autoconfig file for cases where there's only one proxy.

+
+ +

Example 2

+ +

As above, but use proxy for local servers which are outside the firewall

+ +

If there are hosts (such as the main Web server) that belong to the local domain but are outside the firewall and are only reachable through the proxy server, those exceptions can be handled using the localHostOrDomainIs() function:

+ +
function FindProxyForURL(url, host) {
+  if (
+    (isPlainHostName(host) || dnsDomainIs(host, ".mozilla.org")) &&
+    !localHostOrDomainIs(host, "www.mozilla.org") &&
+    !localHostOrDoaminIs(host, "merchant.mozilla.org")
+  ) {
+    return "DIRECT";
+  } else {
+    return "PROXY w3proxy.mozilla.org:8080; DIRECT";
+  }
+}
+ +

The above example will use the proxy for everything except local hosts in the mozilla.org domain, with the further exception that hosts www.mozilla.org and merchant.mozilla.org will go through the proxy.

+ +
+

Note the order of the above exceptions for efficiency: localHostOrDomainIs() functions only get executed for URLs that are in local domain, not for every URL. Be careful to note the parentheses around the or expression before the and expression to achieve the above-mentioned efficient behaviour.

+
+ +

Example 3

+ +

Use proxy only if cannot resolve host

+ +

This example will work in an environment where the internal DNS server is set up so that it can only resolve internal host names, and the goal is to use a proxy only for hosts that aren't resolvable:

+ +
function FindProxyForURL(url, host) {
+  if (isResolvable(host))
+    return "DIRECT";
+  else
+    return "PROXY proxy.mydomain.com:8080";
+}
+ +

The above requires consulting the DNS every time; it can be grouped intelligently with other rules so that DNS is consulted only if other rules do not yield a result:

+ +
function FindProxyForURL(url, host) {
+  if (
+    isPlainHostName(host) ||
+    dnsDomainIs(host, ".mydomain.com") ||
+    isResolvable(host)
+  ) {
+    return "DIRECT";
+  } else {
+    return "PROXY proxy.mydomain.com:8080";
+  }
+}
+ +

Example 4

+ +

Subnet based decisions

+ +

In this example all of the hosts in a given subnet are connected-to directly, others are connected through the proxy:

+ +
function FindProxyForURL(url, host) {
+  if (isInNet(host, "198.95.0.0", "255.255.0.0"))
+    return "DIRECT";
+  else
+    return "PROXY proxy.mydomain.com:8080";
+}
+ +

Again, use of the DNS server in the above can be minimized by adding redundant rules in the beginning:

+ +
function FindProxyForURL(url, host) {
+  if (
+    isPlainHostName(host) ||
+    dnsDomainIs(host, ".mydomain.com") ||
+    isInNet(host, "198.95.0.0", "255.255.0.0")
+  ) {
+    return "DIRECT";
+  } else {
+    return "PROXY proxy.mydomain.com:8080";
+  }
+}
+ +

Example 5

+ +

Load balancing/routing based on URL patterns

+ +

This example is more sophisticated. There are four (4) proxy servers; one of them is a hot stand-by for all of the other ones, so if any of the remaining three goes down the fourth one will take over. Furthermore, the three remaining proxy servers share the load based on URL patterns, which makes their caching more effective (there is only one copy of any document on the three servers - as opposed to one copy on each of them). The load is distributed like this:

+ + + + + + + + + + + + + + + + + + + + + + + + +
ProxyPurpose
#1.com domain
#2.edu domain
#3all other domains
#4hot stand-by
+ +

All local accesses are desired to be direct. All proxy servers run on the port 8080 (they don't need to, you can just change your port but remember to modify your configuations on both side). Note how strings can be concatenated with the + operator in JavaScript.

+ +
function FindProxyForURL(url, host) {
+
+  if (isPlainHostName(host) || dnsDomainIs(host, ".mydomain.com"))
+    return "DIRECT";
+
+  else if (shExpMatch(host, "*.com"))
+    return "PROXY proxy1.mydomain.com:8080; " +
+           "PROXY proxy4.mydomain.com:8080";
+
+  else if (shExpMatch(host, "*.edu"))
+    return "PROXY proxy2.mydomain.com:8080; " +
+           "PROXY proxy4.mydomain.com:8080";
+
+  else
+    return "PROXY proxy3.mydomain.com:8080; " +
+           "PROXY proxy4.mydomain.com:8080";
+}
+ +

Example 6

+ +

Setting a proxy for a specific protocol

+ +

Most of the standard JavaScript functionality is available for use in the FindProxyForURL() function. As an example, to set different proxies based on the protocol the {{jsxref("String.prototype.startsWith()", "startsWith()")}} function can be used:

+ +
function FindProxyForURL(url, host) {
+
+  if (url.startsWith("http:"))
+    return "PROXY http-proxy.mydomain.com:8080";
+
+  else if (url.startsWith("ftp:"))
+    return "PROXY ftp-proxy.mydomain.com:8080";
+
+  else if (url.startsWith(“gopher:"))
+    return "PROXY gopher-proxy.mydomain.com:8080";
+
+  else if (url.startsWith("https:") || url.startsWith("snews:"))
+    return "PROXY security-proxy.mydomain.com:8080";
+
+  else
+    return "DIRECT";
+
+}
+ +
+

Note: The same can be accomplished using the shExpMatch() function described earlier.

+
+ +

For example:

+ +
// ...
+if (shExpMatch(url, "http:*")) {
+  return "PROXY http-proxy.mydomain.com:8080";
+}
+// ...
+ +
+

The autoconfig file can be output by a CGI script. This is useful, for example, when making the autoconfig file act differently based on the client IP address (the REMOTE_ADDR environment variable in CGI).

+ +

Usage of isInNet(), isResolvable() and dnsResolve() functions should be carefully considered, as they require the DNS server to be consulted. All the other autoconfig-related functions are mere string-matching functions that don't require the use of a DNS server. If a proxy is used, the proxy will perform its DNS lookup which would double the impact on the DNS server. Most of the time these functions are not necessary to achieve the desired result.

+
+ +

History and implementation

+ +

Proxy auto-config was introduced into Netscape Navigator 2.0 in the late 1990s, at the same time when JavaScript was introduced. Open-sourcing Netscape eventually lead to Firefox itself.

+ +

Oleh karena itu, implementasi PAC yang paling "asli" dan pustaka JavaScript-nya nsProxyAutoConfig.jsditemukan di versi awal Firefox. Utilitas ini ditemukan di banyak sistem sumber terbuka lainnya termasuk Chromium . Firefox kemudian mengintegrasikan file tersebut menjadi ProxyAutoConfig.cppliteral string C ++. Untuk mengekstraknya ke dalam filenya sendiri, cukup dengan menyalin potongan ke JavaScript dengan console.logperintah untuk mencetaknya.

+ +

Microsoft secara umum membuat implementasinya sendiri. Dulu ada beberapa masalah dengan pustaka mereka , tetapi sebagian besar telah diselesaikan sekarang. Mereka telah mendefinisikan beberapa fungsi sufiks "Ex" baru di sekitar bagian penanganan alamat untuk mendukung IPv6. Fitur ini didukung oleh Chromium, tetapi belum didukung oleh Firefox ( bugzilla # 558253 ).

diff --git a/files/id/web/javascript/closures/index.html b/files/id/web/javascript/closures/index.html new file mode 100644 index 0000000000..73cdbb7e15 --- /dev/null +++ b/files/id/web/javascript/closures/index.html @@ -0,0 +1,345 @@ +--- +title: Closures +slug: Web/JavaScript/Panduan/Closures +translation_of: Web/JavaScript/Closures +--- +

Closure adalah fungsi yang merujuk kepada variabel yang mandiri (bebas). 

+ +

Dengan kata lain, fungsi yang di definisikan di dalam closure 'mengingat' lingkungan dimana closure ini didefinisikan. 

+ +

Lihat contoh berikut:

+ +
+
function init() {
+    var name = "Mozilla"; // name adalah sebuah lokal variabel yang dibuat oleh init
+    function displayName() { // displayName() adalah fungsi internal, sebuah closure
+        alert (name); // displayName() menggunakan variabel yang dideklarasikan pada fungsi induknya
+    }
+    displayName();
+}
+init();
+
+
+ +

init() membuat sebuah lokal variabel name dan kemudian memanggil fungsi displayName(). displayName() adalah fungsi internal yang didefinisikan didalam init() dan hanya dapat diakses di dalam fungsi tersebut. displayName() tidak memiliki lokal variabelnya sendiri, namun fungsi ini memiliki akses ke variabel diluar fungsinya dan dapat menggunakan variabel name tersebut yang telah di deklarasikan di fungsi induknya.

+ +

Jalankan kode dan perhatikan bahwa alert() dapat menampilkan isi dari variabel name, dimana variabel tersebut dideklarasikan pada fungsi induknya. Ini adalah sebuah contoh dari ruang lingkup leksikal (lexical scoping), yang menunjukan bagaimana cara javascript mencari variabel. Di Javascript lokasi dimana variabel tersebut dideklarasikan di dalam source code menentukan dimana variabel itu dapat diakses. Nested functions memiliki akses pada variabel yang dideklarasikan pada ruang lingkup induknya.

+ +

Lihat contoh berikut:

+ +
function makeFunc() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  return displayName;
+}
+
+var myFunc = makeFunc();
+myFunc();
+
+ +

Jika kamu menjalankan kode ini, kode ini akan memiliki efek yang sama seperti contoh sebelumnya init(): teks "Mozilla" akan muncul di JavaScript alert box. Yang membedakan dan menarik adalah fungsi internal displayName() di kembalikan terlebih dahulu ke fungsi di luar sebelum di eksekusi.

+ +

Jika dilihat ini agak aneh karena normalnya pada bahasa pemrograman lain, variabel lokal di dalam sebuah fungsi hanya ada saat fungsi tersebut dieksekusi. Sehingga saat makeFunc() selesai dieksekusi, sewajarnya variabel name ini tidak dapat diakses lagi. Namun, karena kode ini masih berjalan normal, ini adalah hal yang berbeda di Javascript.

+ +

Alasannya adalah fungsi tersebut telah menjadi closure di javascript. Closure adalah kombinasi dari fungsi dan lingkungan leksikal dimana fungsi itu di deklarasikan. Lingkungan ini terdiri dari lokal variabel yang berada di ruang lingkup yang sama saat closure dibuat. Pada kasus ini, myFunc bereferensi kepada fungsi displayName yang telah dibuat ketika makeFunc dijalankan. Fungsi displayName akan tepat menjaga akses ke lingkungan leksikalnya, dimana variabel name ini aktif. Untuk alasan inilah, ketika myFunc di panggil, variabel name tetap dapat digunakan dan "Mozilla" dikirim ke alert box.

+ +

Berikut adalah contoh menarik yang lainnya — fungsi makeAdder :

+ +
function makeAdder(x) {
+  return function(y) {
+    return x + y;
+  };
+}
+
+var add5 = makeAdder(5);
+var add10 = makeAdder(10);
+
+console.log(add5(2));  // 7
+console.log(add10(2)); // 12
+
+ +

Di contoh ini, kita telah mendefinisikan fungsi makeAdder(x) dengan satu argument x dan mengembalikan sebuah fungsi baru. Fungsi yang dikembalikan membutuhkan satu argumen y, dan mengembalikan jumlah x dan y.

+ +

Esensinya, makeAdder adalah fungsi untuk membuat fungsi (function factory) — fungsi ini akan membuat fungsi yang akan menambahkan angka melalui argumen. Pada contoh diatas kita membuat dua fungsi baru — yang satu menambahkan 5 melalui argumentnya dan satu menambahkan 10.

+ +

add5 dan add10 keduanya adalah closure. Fungsi ini menggunakan definisi fungsi yang sama, namun menggunakan memori yang berbeda. Di add5 variabel x memiliki nilai 5. sedangkan di add10 variabel x memiliki nilai 10.

+ +

Penggunaan Closure

+ +

Setelah membaca teorinya muncul pertanyaan —  Apakah closure berguna? Mari kita lihat implikasi dari penggunaan closure. Closure membantu kita mengakses data (pada lingkungannya) dengan fungsi yang mengoperasikan data tersebut. Ini berhubungan dengan object oriented programming, dimana objek obj0ek tersebut membantu kita dalam menghubukan beberapa data (properti objek) dengan satu atau lebih method.

+ +

Karena itu, kamu dapat menggunakan closure dimanapun kamu dapat menggunakan objek dengan satu method.

+ +

Situasi ini banyak ditemui umumnya pada pengembangan web. Banyak kode yang kita tulis di Javascript berdasarkan event — kita definisikan terlebih dahulu sifat dari event ini, kemudian menempelkannya pada event yang di panggil oleh user (seperti klik atau penekanan tombol). Kode kita secara garis umum adalah sebuah callback: sebuah fungsi yang dijalankan untuk merespon sebuah event.

+ +

Berikut adalah contoh: kita ingin menambahkan beberapa tombol di sebuah halaman yang akan merubah ukuran teks. Cara untuk melakukannya adalah dengan menentukan ukuran huruf dari elemen body dalam satuan unit pixel, kemudian menentukan ukuran elemen lain di halaman (seperti header) menggunakan satuan unit em:

+ +
body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+
+ +

Tombol interaktif kita dapat merubah ukuran huruf dari elemen body dan elemen yang lainnya akan menyesuaikan.

+ +

Berikut kode Javascript:

+ +
function makeSizer(size) {
+  return function() {
+    document.body.style.fontSize = size + 'px';
+  };
+}
+
+var size12 = makeSizer(12);
+var size14 = makeSizer(14);
+var size16 = makeSizer(16);
+
+ +

size12, size14, dan size16 adalah fungsi yang akan merubah ukuran teks body ke 12, 14, dan 16 pixel, secara berurutan. Kemudian kita tempelkan fungsi ini ke tombol (pada kasus ini adalah link) sebagai berikut:

+ +
document.getElementById('size-12').onclick = size12;
+document.getElementById('size-14').onclick = size14;
+document.getElementById('size-16').onclick = size16;
+
+ +
<a href="#" id="size-12">12</a>
+<a href="#" id="size-14">14</a>
+<a href="#" id="size-16">16</a>
+
+ +

Lihat pada JSFiddle

+ +

Emulating private methods with closures

+ +

Languages such as Java provide the ability to declare methods private, meaning that they can only be called by other methods in the same class.

+ +

JavaScript does not provide a native way of doing this, but it is possible to emulate private methods using closures. Private methods aren't just useful for restricting access to code: they also provide a powerful way of managing your global namespace, keeping non-essential methods from cluttering up the public interface to your code.

+ +

Here's how to define some public functions that can access private functions and variables, using closures which is also known as the module pattern:

+ +
var counter = (function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  };
+})();
+
+alert(counter.value()); /* Alerts 0 */
+counter.increment();
+counter.increment();
+alert(counter.value()); /* Alerts 2 */
+counter.decrement();
+alert(counter.value()); /* Alerts 1 */
+
+ +

There's a lot going on here. In previous examples each closure has had its own environment; here we create a single environment which is shared by three functions: counter.increment, counter.decrement, and counter.value.

+ +

The shared environment is created in the body of an anonymous function, which is executed as soon as it has been defined. The environment contains two private items: a variable called privateCounter and a function called changeBy. Neither of these private items can be accessed directly from outside the anonymous function. Instead, they must be accessed by the three public functions that are returned from the anonymous wrapper.

+ +

Those three public functions are closures that share the same environment. Thanks to JavaScript's lexical scoping, they each have access to the privateCounter variable and changeBy function.

+ +

You'll notice we're defining an anonymous function that creates a counter, and then we call it immediately and assign the result to the counter variable. We could store this function in a separate variable makeCounter and use it to create several counters.

+ +
var makeCounter = function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+};
+
+var counter1 = makeCounter();
+var counter2 = makeCounter();
+alert(counter1.value()); /* Alerts 0 */
+counter1.increment();
+counter1.increment();
+alert(counter1.value()); /* Alerts 2 */
+counter1.decrement();
+alert(counter1.value()); /* Alerts 1 */
+alert(counter2.value()); /* Alerts 0 */
+
+ +

Notice how each of the two counters maintains its independence from the other. Its environment during the call of the makeCounter() function is different each time. The closure variable privateCounter contains a different instance each time.

+ +

Using closures in this way provides a number of benefits that are normally associated with object oriented programming, in particular data hiding and encapsulation.

+ +

Creating closures in loops: A common mistake

+ +

Prior to the introduction of the let keyword in JavaScript 1.7, a common problem with closures occurred when they were created inside a loop. Consider the following example:

+ +
<p id="help">Helpful notes will appear here</p>
+<p>E-mail: <input type="text" id="email" name="email"></p>
+<p>Name: <input type="text" id="name" name="name"></p>
+<p>Age: <input type="text" id="age" name="age"></p>
+
+ +
function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i < helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+
+ +

Lihat pada JSFiddle

+ +

The helpText array defines three helpful hints, each associated with the ID of an input field in the document. The loop cycles through these definitions, hooking up an onfocus event to each one that shows the associated help method.

+ +

If you try this code out, you'll see that it doesn't work as expected. No matter what field you focus on, the message about your age will be displayed.

+ +

The reason for this is that the functions assigned to onfocus are closures; they consist of the function definition and the captured environment from the setupHelp function's scope. Three closures have been created, but each one shares the same single environment. By the time the onfocus callbacks are executed, the loop has run its course and the item variable (shared by all three closures) has been left pointing to the last entry in the helpText list.

+ +

One solution in this case is to use more closures: in particular, to use a function factory as described earlier on:

+ +
function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function makeHelpCallback(help) {
+  return function() {
+    showHelp(help);
+  };
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i < helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
+  }
+}
+
+setupHelp();
+
+ +

Lihat pada JSFiddle

+ +

This works as expected. Rather than the callbacks all sharing a single environment, the makeHelpCallback function creates a new environment for each one in which help refers to the corresponding string from the helpText array.

+ +

Performance considerations

+ +

It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption.

+ +

For instance, when creating a new object/class, methods should normally be associated to the object's prototype rather than defined into the object constructor. The reason is that whenever the constructor is called, the methods would get reassigned (that is, for every object creation).

+ +

Consider the following impractical but demonstrative case:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+  this.getName = function() {
+    return this.name;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+
+ +

The previous code does not take advantage of the benefits of closures and thus could instead be formulated:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype = {
+  getName: function() {
+    return this.name;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+
+ +

However, redefining the prototype is not recommended, so the following example is even better because it appends to the existing prototype:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype.getName = function() {
+  return this.name;
+};
+MyObject.prototype.getMessage = function() {
+  return this.message;
+};
+
+ +

In the two previous examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation. See Details of the Object Model for more details.

+ +

Expression closures

+ +

This addition is nothing more than a shorthand for writing simple functions, giving the language something similar to a typical Lambda notation.

+ +

JavaScript 1.7 and older:

+ +
function(x) { return x * x; }
+ +

JavaScript 1.8:

+ +
function(x) x * x
+ +

This syntax allows you to leave off the braces and 'return' statement - making them implicit. There is no added benefit to writing code in this manner, other than having it be syntactically shorter.

+ +

Examples:

+ +

A shorthand for binding event listeners:

+ +
 document.addEventListener("click", function() false, true);
+
+ +

Using this notation with some of the array functions from JavaScript 1.6:

+ +
elems.some(function(elem) elem.type == "text");
diff --git a/files/id/web/javascript/guide/grammar_and_types/index.html b/files/id/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..41900a1603 --- /dev/null +++ b/files/id/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,648 @@ +--- +title: Tata Bahasa dan Tipe +slug: 'Web/JavaScript/Panduan/Values,_variables,_and_literals' +tags: + - JavaScript + - Panduan +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
+ +

Pada bagian ini membahas tata bahasa dasar Javascript, deklarasi variabel, tipe data dan literal.

+ +

Dasar

+ +

Sebagian besar sintak JavaScript terinspirasi dari Java, namun juga dipengaruhi oleh Awk, Perl dan Python.

+ +

JavaScript bersifat case-sensitive dan menggunakan set karakter Unicode.

+ +

Dalam JavaScript, instruksi disebut {{Glossary ("Statement", "pernyataan")}} dan dipisahkan oleh titik koma (;). Spasi, tab dan karakter baris baru disebut whitespace.Teks sumber skrip JavaScript dipindai dari kiri ke kanan dan diubah menjadi urutan elemen masukan yang merupakan token, karakter kontrol, terminator baris, komentar atau whitespace. ECMAScript juga mendefinisikan kata kunci dan literal tertentu dan memiliki aturan untuk penyisipan titik koma secara otomatis (ASI) untuk mengakhiri pernyataan. Namun, dianjurkan untuk selalu menambahkan titik koma untuk mengakhiri pernyataan anda; Itu akan terhindar dari efek samping. Untuk informasi lebih lanjut, lihat referensi rinci tentang tata bahasa eksikal JavaScript.

+ +


+ Komentar

+ +

Sintak komentar pada JavaScript sama dengan C++ dan dalam banyak bahasa pemrograman lainnya:

+ +
// komentar satu baris
+
+/* Ini lebih panjang
+   komentar beberapa baris
+ */
+
+/* Anda tidak bisa menggunakannya, /* komentar bersarang */ Sintak bermasalah */
+ +

Deklarasi

+ +

Ada tiga macam deklarasi pada JavaScript.

+ +
+
var
+
Mendeklarasikan sebuah variabel, opsional menginisialisasi sebuah nilai.
+
let
+
Mendeklarasikan lingkup-blok, variabel lokal, opsional menginisialisasi sebuah nilai.
+
const
+
Mendeklarasikan sebuah lingkup-blok, baca-saja dinamakan konstanta.
+
+ +

Variabel

+ +

Anda menggunakan variabel sebagai nama simbolik dalam aplikasi Anda.  Nama variabel, disebut {{Glossary("Identifier", "Pengidentifikasi")}}, sesuai dengan peraturan tertentu.

+ +

Pengindetifikasi pada JavaScript harus dimulai dengan huruf, garis bawah (_), atau tanda dolar ($); Karakter selanjutnya bisa berupa digit (0-9). karena JavaScript sensitif huruf (case-sensitive), Huruf termasuk karakter "A" sampai "Z" (huruf besar) dan huruf "a" sampai "z" (huruf kecil) .

+ +

Anda dapat menggunakan sebagian besar huruf ISO 8859-1 atau Unicode seperti å dan ü dalam pengidentifikasi (untuk lebih jelasnya lihat postingan blog ini). Anda juga dapat menggunakan urutan rangkaian pelolosan/escape Unicode sebagai karakter dalam pengidentifikasi.

+ +

Beberapa contoh nama legal adalah Number_hits, temp99, $credit, dan _name.

+ +

Mendeklarasikan variabel

+ +

Anda bisa mendeklarasikan sebuah variabel dalam tiga cara:

+ + + +

Mengevaluasi variabel

+ +

Variabel yang dideklarasikan dengan menggunakan pernyataan  var atau let tanpa penetapan nilai yang ditentukan memiliki nilai undefined.

+ +

Upaya untuk mengakses variabel yang tidak dideklarasikan akan menuju kepada pelemparan eksepsi ReferenceError:

+ +
var a;
+console.log('Nilai dari a adalah ' + a); // Nilai dari a adalah undefined
+
+console.log('Nilai dari b adalah ' + b); // Nilai dari b adalah undefined
+var b;
+
+console.log('Nilai dari c adalah ' + c); // Tidak tertangkap ReferenceError: c tidak di definisikan
+
+let x;
+console.log('Nilai dari x adalah ' + x); // Nilai dari x adalah undefined
+
+console.log('Nilai dari y adalah ' + y); // Tidak tertangkap ReferenceError: y tidak di definisikan
+let y;
+ +

Anda dapat menggunakan undefined untuk menentukan apakah sebuah variabel memiliki nilai. Dalam kode berikut, variabel input tidak diberi nilai, dan pernyataan  if dievaluasi true.

+ +
var input;
+if (input === undefined) {
+  lakukanIni();
+} else {
+  lakukanItu();
+}
+ +

Nilai  undefined berperilaku sebagai false bila digunakan dalam konteks boolean. Misalnya, kode berikut menjalankan fungsi fungsiSaya karena elemen  myArray undefined:

+ +
var myArray = [];
+if (!myArray[0]) fungsiSaya();
+ +

Nilai  undefined mengkonversi ke NaN bila digunakan dalam konteks numerik.

+ +
var a;
+a + 2;  // Dievaluasi ke NaN
+ +

Ketika Anda mengevaluasi sebuah variabel null, nilai null berperilaku seperti 0 dalam konteks numerik dan sebagai false dalam konteks boolean. Sebagai contoh:

+ +
var n = null;
+console.log(n * 32); // Akan log 0 ke konsol
+ +

Lingkup variabel

+ +

Bila Anda mendeklarasikan variabel di luar fungsi apa pun, ini disebut variabel global , karena tersedia pada kode lain dalam dokumen tersebut. Ketika Anda mendeklarasikan sebuah variabel dalam suatu fungsi, itu disebut variabel lokal , karena hanya tersedia di dalam fungsi itu.

+ +

JavaScript sebelum ECMAScript 2015 tidak memiliki lingkup pernyataan blok ; Sebaliknya, variabel yang dinyatakan dalam blok bersifat lokal terhadap fungsi (atau lingkup global) yang berada di blok. Misalnya kode berikut akan log 5, karena ruang lingkupnya x adalah fungsi (atau konteks global) yang x dideklarasikan, bukan bloknya, yang dalam hal ini adalah sebuah pernyataan if.

+ +
if (true) {
+  var x = 5;
+}
+console.log(x);  // x is 5
+ +

Perilaku ini berubah, saat menggunakan deklarasi let yang diperkenalkan di ECMAScript 2015.

+ +
if (true) {
+  let y = 5;
+}
+console.log(y);  // ReferenceError: y tidak di definisikan
+ +

Hoisting variabel

+ +

Hal lain yang tidak biasa tentang variabel dalam JavaScript adalah Anda bisa merujuk ke variabel yang dideklarasikan nanti, tanpa mendapatkan eksepsi. Konsep ini dikenal sebagai hoisting; Variabel dalam JavaScript dalam arti "dikibarkan" atau diangkat ke atas fungsi atau pernyataan. Bagaimanapun, variabel yang dikibarkan akan memberikan nilai undefined. Jadi, bahkan jika Anda mendeklarasikan dan menginisialisasi setelah Anda menggunakan atau merujuk ke variabel ini, itu akan tetap memberikan undefined.

+ +
/**
+ * Contoh 1
+ */
+console.log(x === undefined); // true
+var x = 3;
+
+/**
+ * Contoh 2
+ */
+// Akan memberikan nilai undefined
+var myvar = 'my value';
+
+(function() {
+  console.log(myvar); // undefined
+  var myvar = 'local value';
+})();
+ +

Contoh di atas akan dinterprestasikan sama dengan:

+ +
/**
+ * Contoh 1
+ */
+var x;
+console.log(x === undefined); // true
+x = 3;
+
+/**
+ * Example 2
+ */
+var myvar = 'my value';
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = 'nilai lokal';
+})();
+ +

Karena hoisting, semua pernyataan var dalam suatu fungsi harus ditempatkan sedekat mungkin ke atas fungsi. Praktik terbaik ini meningkatkan kejelasan kode.

+ +

Dalam ECMAScript 2015, variabel  let (const) tidak akan hoist ke bagian atas blok. Bagaimanapun, referensi variabel di blok sebelum deklarasi variabel menghasilkan sebuah ReferenceError. Variabel ini berada dalam "zona mati temporal" dari awal blok sampai deklarasi diproses.

+ +
console.log(x); // ReferenceError
+let x = 3;
+ +

Hoisting fungsi

+ +

Untuk fungsi, hanya deklarasi fungsi yang diangkat ke atas dan bukan ekspresi fungsi.

+ +
/* Deklarasi fungsi */
+
+foo(); // "bar"
+
+function foo() {
+  console.log('bar');
+}
+
+
+/* Ekspresi fungsi */
+
+baz(); // TypeError: baz adalah bukan fungsi
+
+var baz = function() {
+  console.log('bar2');
+};
+ +

Variabel global

+ +

Variabel global sebenarnya adalah properti dari objek global . Di halaman web objek global itu window, sehingga Anda bisa mengatur dan mengakses variabel global dengan menggunakan sintaks window.variable

+ +

Akibatnya, Anda dapat mengakses variabel global yang dideklarasikan dalam satu window atau frame dari window atau frame lain dengan menentukan nama window atau frame. Misalnya, jika variabel yang disebut phoneNumber dinyatakan dalam dokumen, Anda dapat merujuk variabel ini dari iframe as parent.phoneNumber.

+ +

Konstanta

+ +

Anda bisa membuat variabel baca-saja, dinamai dengan kata kunci const. Sintaksis dari pengenal konstanta sama dengan pengenal variabel: ia harus dimulai dengan huruf, garis bawah atau tanda dolar ($) dan dapat berisi karakter abjad, numerik, atau garis bawah.

+ +
const PI = 3.14;
+ +

Konstanta tidak dapat mengubah nilai melalui penugasan atau dinyatakan ulang saat naskah dijalankan. Ini harus diinisialisasi ke sebuah nilai.

+ +

Aturan lingkup untuk konstanta sama dengan variabel lingkup-blok let . Jika kata kunci  const dihilangkan, pengenal dianggap mewakili variabel.

+ +

Anda tidak dapat mendeklarasikan konstanta dengan nama yang sama dengan fungsi atau variabel dalam lingkup yang sama. Sebagai contoh:

+ +
// INI AKAN MENYEBABKAN ERROR
+function f() {};
+const f = 5;
+
+// INI AKAN MENYEBABKAN ERROR JUGA
+function f() {
+  const g = 5;
+  var g;
+
+  //pernyataan
+}
+ +

Namun, properti objek yang ditugaskan pada konstanta tidak terlindungi, jadi pernyataan berikut dijalankan tanpa masalah.

+ +
const MY_OBJECT = {'key': 'value'};
+MY_OBJECT.key = 'otherValue';
+ +

Struktur dan tipe data

+ +

Tipe data

+ +

Standar ECMAScript terbaru mendefinisikan tujuh tipe data:

+ + + +

Meskipun tipe data ini jumlahnya relatif kecil, namun memungkinkan Anda untuk melakukan fungsi-fungsi yang berguna dengan aplikasi Anda.  {{jsxref("Object", "Objects")}} dan {{jsxref("Function", "functions")}} merupakan unsur fundamental lainnya dalam bahasa ini. Anda bisa memikirkan objek sebagai wadah bernama untuk nilai, dan fungsi sebagai prosedur yang dapat dilakukan aplikasi Anda.

+ +

Konversi tipe data

+ +

JavaScript adalah bahasa yang diketik secara dinamis. Itu berarti Anda tidak perlu menentukan tipe data variabel saat Anda menyatakannya, dan tipe data akan dikonversi secara otomatis sesuai kebutuhan selama eksekusi skrip. Jadi, misalnya, Anda bisa mendefinisikan variabel sebagai berikut:

+ +
var jawaban = 42;
+ +

Dan nanti, Anda bisa menetapkan variabel yang sama dengan nilai string, misalnya:

+ +
jawaban = 'Thanks for all the fish...';
+ +

Karena JavaScript diketik secara dinamis, penugasan ini tidak menyebabkan pesan kesalahan.

+ +

Dalam ekspresi yang melibatkan nilai numerik dan string dengan operator +, JavaScript mengubah nilai numerik menjadi string. Misalnya, perhatikan pernyataan berikut:

+ +
x = 'Jawabannya adalah ' + 42 // "Jawabannya adalah 42"
+y = 42 + ' Adalah jawabannya' // "42 Adalah jawabannya"
+ +

Dalam pernyataan yang melibatkan operator lain, JavaScript tidak mengubah nilai numerik menjadi string. Sebagai contoh:

+ +
'37' - 7 // 30
+'37' + 7 // "377"
+ +

Mengubah string menjadi angka

+ +

Dalam kasus yang sebuah nilai mewakili bilangan ada dalam memori sebagai string, ada metode untuk konversi.

+ + + +

parseInt Hanya akan memberikan bilangan bulat, jadi penggunaannya berkurang untuk desimal. Selain itu, praktik terbaik untuk parseInt selalu menyertakan parameter radix. Parameter radix digunakan untuk menentukan sistem numerik yang akan digunakan.

+ +

Metode alternatif untuk mengambil nomor dari string adalah dengan operator +  (unary plus):

+ +
'1.1' + '1.1' = '1.11.1'
+(+'1.1') + (+'1.1') = 2.2
+// Catatan: kurung siku buka tutup ditambahkan untuk kejelasan, tidak diminta.
+ +

Literal

+ +

Anda menggunakan literal untuk mewakili nilai dalam JavaScript. Ini adalah nilai tetap, bukan variabel, yang Anda berikan secara literal dalam skrip Anda. Bagian ini menjelaskan jenis literal berikut:

+ + + +

Literal array

+ +

Sebuah literal array adalah daftar dari nol atau lebih ekspresi,  yang masing-masing mewakili elemen array, dilampirkan dalam tanda kurung siku ([]). Bila Anda membuat array menggunakan literal array, ini diinisialisasi dengan nilai yang ditentukan sebagai elemennya, dan panjangnya diatur ke jumlah argumen yang ditentukan.

+ +

Contoh berikut membuat array coffees dengan tiga elemen dan panjang tiga:

+ +
var coffees = ['French Roast', 'Colombian', 'Kona'];
+ +

Catatan: Sebuah literal array  adalah tipe dari object initializer. Lihat Menggunakan Penginisialisasi Objek.

+ +

Jika sebuah array dibuat menggunakan literal dalam skrip tingkat-atas, JavaScript menginterpretasikan array setiap kali mengevaluasi ekspresi yang berisi literal array. Selain itu, literal yang digunakan dalam suatu fungsi dibuat setiap kali fungsi dipanggil.

+ +

Array literal juga objek Array. Lihat Array dan Koleksi diIndek untuk rincian tentang objek Array.

+ +

Ekstra koma dalam literal array

+ +

Anda tidak perlu menentukan semua elemen dalam literal array. Jika Anda memasukkan dua koma berturut-turut, array dibuat undefined untuk elemen yang tidak ditentukan. Contoh berikut membuat array fish:

+ +
var fish = ['Lion', , 'Angel'];
+ +

Array ini memiliki dua elemen dengan nilai dan satu elemen kosong (fish[0] adalah "Lion", fish[1] adalah undefined, dan fish[2] merupakan "Angel").

+ +

Jika Anda menyertakan koma di akhir daftar elemen, koma diabaikan. Pada contoh berikut, panjang array adalah tiga. Tidak ada myList[3]. Semua koma lainnya dalam daftar menunjukkan elemen baru.

+ +

Catatan: Koma diakhir dapat membuat kesalahan pada versi browser lama dan merupakan praktik terbaik untuk menghapusnya.

+ +
var myList = ['home', , 'school', ];
+ +

Dalam contoh berikut, panjang array adalah empat, dan myList[0]dan myList[2] hilang.

+ +
var myList = [ ,'home', , 'school'];
+ +

Dalam contoh berikut, panjang array adalah empat, dan myList[1]dan myList[3] hilang. Hanya koma terakhir yang diabaikan.

+ +
var myList = ['home', , 'school', , ];
+ +

Memahami perilaku ekstra  koma penting untuk memahami JavaScript sebagai bahasa, namun saat menulis kode Anda sendiri: secara eksplisit menyatakan elemen yang hilang sebagai undefined akan meningkatkan kejelasan dan perawatan kode anda.

+ +

Literal boolean

+ +

Tipe Boolean memiliki dua nilai literal: true dan false.

+ +

Jangan membingungkan nilai Boolean primitif true dan false dengan nilai true dan false objek Boolean. Objek Boolean adalah pembungkus di sekitar tipe data Boolean primitif. Lihat {{jsxref("Boolean")}} untuk informasi lebih lanjut.

+ +

Integer

+ +

Integer dapat dinyatakan dalam desimal (basis 10), heksadesimal (basis 16), oktal (basis 8) dan biner (basis 2).

+ + + +

Beberapa contoh literal bilangan bulat adalah:

+ +
0, 117 and -345 (desimal, basis 10)
+015, 0001 and -0o77 (oktal, basis 8)
+0x1123, 0x00111 and -0xF1A7 (heksadesimal, "hex" or basis 16)
+0b11, 0b0011 and -0b11 (biner, basis 2)
+ +

Untuk informasi lebih lanjut, lihat literatur numerik dalam referensi tata bahasa leksikal .

+ +

Literal floating-point

+ +

Sebuah literal  floating-point dapat memiliki bagian berikut:

+ + + +

Bagian eksponennya adalah "e" atau "E" diikuti oleh bilangan bulat, yang dapat ditandatangani (didahului dengan "+" atau "-"). Literal floating-point harus memiliki setidaknya satu digit dan titik desimal atau "e" (atau "E").

+ +

Lebih ringkas lagi, sintaksnya adalah:

+ +
[(+|-)][angka][.angka][(E|e)[(+|-)]angka]
+ +

Sebagai contoh:

+ +
3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+ +

Literal objek

+ +

Literal objek adalah daftar dari nol atau lebih pasangan nama properti dan nilai objek yang terkait, yang dilampirkan dalam kurung kurawal ({}). Anda seharusnya tidak menggunakan literal objek di awal sebuah pernyataan. Ini akan menyebabkan kesalahan atau tidak berperilaku seperti yang Anda harapkan, karena { akan ditafsirkan sebagai awal dari sebuah blok.

+ +

Berikut ini adalah contoh dari literal objek. Elemen pertama dari objek car mendefinisikan sebuah properti myCar, dan menetapkan sebuah string baru, " Saturn";  Elemen kedua, properti getCar,  segera diberi hasil pemanggilan function (carTypes("Honda")); elemen ketiga, properti special menggunakan variabel yang ada ( sales).

+ +
var sales = 'Toyota';
+
+function carTypes(name) {
+  if (name === 'Honda') {
+    return name;
+  } else {
+    return "Maaf, kami tidak menjual " + name + ".";
+  }
+}
+
+var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales };
+
+console.log(car.myCar);   // Saturn
+console.log(car.getCar);  // Honda
+console.log(car.special); // Toyota
+ +

Selain itu, Anda dapat menggunakan literal numerik atau string untuk nama properti atau menyarangkan objek di dalam objek yang lain. Contoh berikut menggunakan opsi ini.

+ +
var car = { manyCars: {a: 'Saab', 'b': 'Jeep'}, 7: 'Mazda' };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda
+ +

Nama properti objek bisa berupa string apapun, termasuk string kosong. Jika nama properti akan menjadi {{Glossary("Identifier","pengidentifikasi")}} JavaScript yang tidak valid atau angka, maka harus dilampirkan dalam tanda petik. Nama properti yang pengidentifikasi tidak valid juga tidak dapat diakses sebagai properti dot (.), namun dapat diakses dan ditetapkan dengan notasi seperti array ("[]").

+ +
var namaPropertiTidakBiasa = {
+  '': 'An empty string',
+  '!': 'Bang!'
+}
+console.log(namaPropertiTidakBiasa.'');   // SyntaxError: Unexpected string
+console.log(namaPropertiTidakBiasa['']);  // An empty string
+console.log(namaPropertiTidakBiasa.!);    // SyntaxError: Unexpected token !
+console.log(namaPropertiTidakBiasa['!']); // Bang!
+ +

Peningkatan Literal Objek

+ +

Di ES2015, literal objek diperluas untuk mendukung pengaturan prototipe pada konstruksi, singkatan untuk  foo: penugasan foo , definisikan metode, pembuatan panggilan super, dan komputasi nama properti dengan ekspresi. Bersamaan dengan itu, ini juga membawa literatur dan deklarasi kelas lebih dekat bersama, dan membiarkan desain berbasis objek mendapatkan keuntungan dari beberapa kemudahan yang sama.

+ +
var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // Shorthand for ‘handler: penangan’
+    handler,
+    // Metode
+    toString() {
+     // Pangilan super
+     return 'd ' + super.toString();
+    },
+    // Dikalkulasi (dinamis) nama properti
+    [ 'prop_' + (() => 42)() ]: 42
+};
+ +

Tolong dicatat:

+ +
var foo = {a: 'alpha', 2: 'two'};
+console.log(foo.a);    // alpha
+console.log(foo[2]);   // two
+//console.log(foo.2);  // Error: missing ) after argument list
+//console.log(foo[a]); // Error: a is not defined
+console.log(foo['a']); // alpha
+console.log(foo['2']); // two
+ +

Literal RegExp

+ +

Sebuah literal regex adalah pola yang dilampirkan diantara garis miring. Berikut ini adalah contoh literal regex.

+ +
var re = /ab+c/;
+ +

Literal string

+ +

Literal string adalah nol atau lebih karakter yang dilampirkan dengan tanda kutip ganda (") atau tunggal ('). String harus dibatasi dengan tanda kutip dari jenis yang sama; Yaitu kedua tanda kutip tunggal atau kedua tanda petik ganda. Berikut ini adalah contoh literal string:

+ +
'foo'
+"bar"
+'1234'
+'baris satu \n baris lainnya'
+"Kucing jhon"
+ +

Anda dapat memanggil salah satu metode objek String pada nilai literal string-JavaScript secara otomatis mengubah literal string menjadi objek String sementara, memanggil metode tersebut, lalu membuang objek String sementara. Anda juga bisa menggunakan properti String.length dengan literal string:

+ +
console.log("Kucing jhon".length)
+// Akan mencetak jumlah simbol dalam string termasuk spasi.
+// Dalam hal ini, 11.
+ +

Di ES2015, template literal juga tersedia. Template string memberikan sintaksis gula untuk pembuatan string. Ini mirip dengan fitur interpolasi string di Perl, Python dan lainnya. Secara opsional, tag dapat ditambahkan untuk memungkinkan konstruksi string disesuaikan, menghindari serangan injeksi atau membangun struktur data tingkat tinggi dari konten string.

+ +
// Literal dasar kreasi string
+`Dalam JavaScript '\n' adalah sebuah line-feed.`
+
+// String beberapa baris
+`Dalam template string JavaScript dapat berjalan di
+ beberapa baris, namun string yang dikutip ganda dan tunggal
+ tidak dapat dilakukan.`
+
+// Interpoasi string
+var name = 'Bob', time = 'today';
+`Hello ${name}, how are you ${time}?`
+
+// Membangun prefix permintaan HTTP digunakan untuk menafsirkan penggantian dan konstruksi
+POST`http://foo.org/bar?a=${a}&b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);
+ +

Anda harus menggunakan literal string kecuali Anda secara khusus perlu menggunakan objek String. Lihat {{jsxref("String")}}  untuk rincian tentang objek String.

+ +

Menggunakan karakter khusus dalam string

+ +

Selain karakter biasa, Anda juga bisa menyertakan karakter khusus dalam string, seperti yang ditunjukkan pada contoh berikut.

+ +
'one line \n another line'
+ +

Tabel berikut mencantumkan karakter khusus yang dapat Anda gunakan dalam string JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabel: karakter khusus JavaScript
KarakterBerarti
\0Null Byte
\bbackspase
\fform feed
\nBaris baru
\rCariage return
\tTab
\vTab vertikal
\'Apostrof atau kutipan tunggal
\"Kutipan ganda
\\Karakter backslash
\XXXKarakter dengan pengkodean Latin-1 ditentukan oleh hingga tiga digit oktal XXX antara 0 dan 377. Misalnya, \251 adalah urutan oktal untuk simbol hak cipta.
\xXXKarakter dengan pengkodean Latin-1 yang ditentukan oleh dua digit heksadesimal XX antara 00 dan FF. Misalnya, \xA9 adalah urutan heksadesimal untuk simbol hak cipta.
\uXXXXKarakter Unicode ditentukan oleh empat digit heksadesimal XXXX . Misalnya, \u00A9 adalah urutan Unicode untuk simbol hak cipta. Lihat rangkaian pelolosan Unicode.
\u{XXXXX}Kode Unicode lolos. Misalnya, \u {2F804} sama dengan Unicode sederhana yang lolos \uD87E \uDC04.
+ +

Karakter pelolosan

+ +

Untuk karakter yang tidak tercantum dalam tabel, tanda garis miring terbalik sebelumnya diabaikan, namun penggunaan ini tidak berlaku lagi dan harus dihindari.

+ +

Anda dapat memasukkan tanda petik di dalam string sebelum mendahului dengan garis miring terbalik. Ini dikenal sebagai pelolosan dari tanda petik. Sebagai contoh:

+ +
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
+console.log(quote);
+ +

Hasil dari ini adalah:

+ +
He read "The Cremation of Sam McGee" by R.W. Service.
+ +

Untuk menyertakan garis miring terbalik di dalam string, Anda harus melepaskan diri dari karakter garis miring terbalik. Misalnya, untuk menetapkan path file c:\temp ke string, gunakan yang berikut ini:

+ +
var home = 'c:\\temp';
+ +

Anda juga bisa meloloskan dari baris istirahat sebelumnya mendahului mereka dengan garis miring terbalik. Garis miring terbalik dan baris istirahat keduanya terlepas dari nilai string.

+ +
var str = 'this string \
+is broken \
+across multiple \
+lines.'
+console.log(str);   // this string is broken across multiplelines.
+ +

Meskipun JavaScript tidak memiliki sintaks "heredoc", Anda bisa mendekat dengan menambahkan pelolosan baris istirahat dan baris istirahat pada akhir setiap baris:

+ +
var poem =
+'Roses are red,\n\
+Violets are blue.\n\
+Sugar is sweet,\n\
+and so is foo.'
+ +

ECMAScript 2015 memperkenalkan tipe literal baru, yaitu  template literal . Hal ini memungkinkan banyak fitur baru termasuk string beberapa baris!

+ +

 

+ +
var poem =
+`Roses are red,
+Violets are blue.
+Sugar is sweet,
+and so is foo.`
+ +

 

+ +

Informasi lebih lanjut

+ +

Bab ini berfokus pada sintaks dasar untuk deklarasi dan tipe. Untuk mempelajari lebih lanjut tentang konstruksi bahasa JavaScript, lihat juga bab-bab berikut dalam panduan ini:

+ + + +

Pada bab berikutnya, kita akan melihat konstruksi aliran kontrol dan penanganan kesalahan.

diff --git a/files/id/web/javascript/guide/index.html b/files/id/web/javascript/guide/index.html new file mode 100644 index 0000000000..491d4a4a84 --- /dev/null +++ b/files/id/web/javascript/guide/index.html @@ -0,0 +1,119 @@ +--- +title: Panduan JavaScript +slug: Web/JavaScript/Panduan +translation_of: Web/JavaScript/Guide +--- +
{{jsSidebar("JavaScript Guide")}}
+ +

Pedoman javasript memberi tahu bagaimana menggunakan JavaScript dan memberikan penjelasan tentang bahasa javascript. Jika anda ingin memulai javascript atau programming secara umum, konsultasikan artikel di Area pembelajaran. Jika anda membutuhkan informasi lengkap tentang fitur silakan lihat  Referensi javaScript.

+ +

Bagian

+ +

Pedoman ini dibagi menjadi beberapa bagian:

+ + + + + + + + + +

{{Next("Web/JavaScript/Guide/Introduction")}}

diff --git a/files/id/web/javascript/guide/introduction/index.html b/files/id/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..19523a0821 --- /dev/null +++ b/files/id/web/javascript/guide/introduction/index.html @@ -0,0 +1,156 @@ +--- +title: Perkenalan +slug: Web/JavaScript/Panduan/pengenalan +tags: + - 'I10n:priority' + - JavaScript + - Pedoman + - Pemula + - Perkenalan +translation_of: Web/JavaScript/Guide/Introduction +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
+ +

Bab ini mengenalkan dan membahas konsep yang mendasar di javascript.

+ +

Apa yang perlu anda ketahui

+ +

Pada pedoman ini kami anggap Anda memiliki pengetahuan dasar dari:

+ + + +

Tempat untuk mencari informasi JavaScript 

+ +

Dokumentasi JavaScript di MDN menyediakan materi sebagai berikut:

+ + + +

Jika Anda baru mengenal JavaScript, mulailah dari area belajar dan Paduan JavaScript. Ketika Anda sudah mendapatkan pemahaman dasarnya, Anda bisa menggunakan Referensi JavaScript untuk melihat lebih detil objek dan statement.

+ +

Apa itu JavaScript?

+ +

JavaScript adalah bahasa scripting cross-platform yang berorientasi objek yang digunakan untuk membuat bagian interaktif dari halaman-halaman web (misal: animasi kompleks, tombol yang dapat di-klik, menu pop-up, dll). Terdapat juga versi server-side yang lebih lanjut dari JavaScript seperti Node.Js yang mana dapat memberikan Anda fungsionalitas lebih pada sebuah website (seperti kolaborasi realtime di antara beberapa komputer). Di dalam host environment (contoh, sebuah web browser), JavaScript dapat dihubungkan ke objek-objek dari environment tersebut untuk menyediakan kendali programmatis terhadapnya. 

+ +

JavaScript memuat satu library standar yang memuat objek-objek, seperti Array, Date, dan Math, juga set inti dari elemen-elemen bahasa ini seperti operator, struktur kontrol, dan statement. Inti dari JavaScript dapat dikembangkan untuk kegunaan yang beragam dengan cara menambahkan  objek-objek tambahan; sebagai contoh:

+ + + +

JavaScript dan Java

+ +

JavaScript dan Java memang memiliki kemiripan pada beberapa hal, namun pada dasarnya saling berbeda. JavaScript menyerupai Java namum tidak memiliki static typing dan strong type checking. JavaScript mengikuti sebagian besar expresi syntax Java, konvensi penamaan serta konstruksi control-flow dasar, yang mana menjadi alasan untuk mengganti namanya dari LiveScript ke JavaScript.

+ +

Berbeda dengan sistem compile-time class Java yang dibangun melalui deklarasi, Javascript mendukung sistem runtime yang berbasis pada sebagian kecil tipe data yang mewakili nilai numerik, Boolean, dan string. Javascript memiliki model objek berbasis prototipe ketimbang model objek berbasis kelas yang lebih umum. Model berbasis prototipe menyediakan inheritance dinamis; yaitu, apa yang diturunkan/diwariskan dapat berbeda pada setiap objek. Javascript juga mendukung fungsi tanpa persyaratan deklaratif khusus. Fungsi bisa berupa properti objek, yang dijalankan sebagai tipe metode yang longgar.

+ +

JavaScript merupakan bahasa dengan bentuk yang sangat bebas dibandingkan dengan Java. Anda tidak perlu mendeklarasikan semua variabel, kelas, dan metode. Anda tidak perlu khawatir apakah metode itu public, private, atau protected, dan Anda juga tidak perlu mengimplementasikan interface. Variabel, parameter, dan tipe kembalian fungsi juga tidak ditulis secara eksplisit.

+ +

Java merupakan bahasa berbasis kelas yang didesain untuk eksekusi yang cepat dan penulisan yang aman. Penulisan yang aman, misalnya, Anda tidak bisa mengubah integer Java menjadi referensi objek atau mengakses private memori dengan membobol bytecode. Model berbasis kelas Java bermaksud bahwa program secara eksklusif terdiri atas sejumlah kelas beserta metode-metodenya. Pewarisan kelas dan penulisan ketat milik Java umumnya membutuhkan hirarki objek yang juga sangat kekat. Syarat-syarat tersebut menjadikan pemrograman Java lebih kompleks ketimbang pemrograman Javascript.

+ +

Sebaliknya, JavaScript mewarisi inti dari baris bahasa yang bertipe dinamis dan lebih sederhana sepeti HyperTalk dan dBASE. Bahasa-bahasa scripting tersebut menawarkan fungsionalitas pemrograman ke pengguna yang lebih luas karena syntax-nya yang lebih mudah, berfokus pada fungsi built-in, dan persyaratan yang minimalis untuk membuat objek.

+ + + + + + + + + + + + + + + + + + + + + + + +
JavaScript dibandingkan Java
JavaScriptJava
Berorientasi objek. Tak ada perbedaan antar tipe objek. Inheritance/ pewarisan melalui mekanisme prototipe, serta properti dan metode bisa ditambahkan kepada objek apapun secara dinamis.Berbasis kelas. Objek dibagi ke dalam kelas dan instansi dengan semua pewarisan melalui hirarki kelas. Kelas dan instansi tidak dapat memiliki properti atau metode yang ditambahkan secara dinamis.
Tipe data variabel tidak dideklarasi (dynamic typing, loosely typed).Tipe data variabel harus dideklarasi (static-typing, strongly typed).
Tidak bisa menulis ke hard disk secara otomatis.Bisa menulis ke hard disk secara otomatis.
+ +

Untuk informasi lebih lanjut perbedaan antara JavaScript dan Java, lihat bagian Detil dari model objek.

+ +

JavaScript dan spesifikasi ECMAScript

+ +

Javascript distandarisasi melalui Ecma International — asosiasi Eropa yang men-standarisasi sistem informasi dan komunikasi  (ECMA merupakan singkatan yang dari European Computer Manufacturers Association) yang mengurusi standarisasi bahasa pemrograman internasional berbasis JavaScript. Versi standarisasi JavaScript ini, yang disebut sebagai ECMAScript, akan berperilaku sama pada setiap aplikasi yang mengikutinya. Perusahaan-perusahaan dapat menggunakan bahasa standar terbuka untuk mengembangkan implementasi JavaScript mereka. Standar ECMAScript didokumentasikan dalam spesifikasi ECMA-262. Kunjungi Terbaru di JavaScript untuk mempelajari lebih lanjut tentang berbagai versi dari JavaScript dan spesifikasi edisi ECMAScript.

+ +

Standar ECMA-262 juga disetujui oleh ISO (International Organization for Standardization) sebagai ISO-16262. Anda juga dapat menemukan spesifikasinya di website Ecma International. Spesifikasi ECMAScript tidak memaparkan Document Object Model yang distandarisasi oleh World Wide Web Consortium (W3C) bersama WHATWG (Web Hypertext Application Technology Working Group). DOM mendefinisikan cara dimana dokumen objek HTML diekspos ke script Anda. Untuk mendapatkan pemahaman yang lebih baik tentang berbagai teknologi yang digunakan ketika memrogram menggunakan JavaScript, lihat artikel ikhtisar teknologi JavaScript.

+ +

Perbandingan dokumentasi JavaScript dengan spesifikasi ECMAScript

+ +

Spesifikasi ECMAScript adalah seperangkat persyaratan untuk menerapkan ECMAScript; berguna jika Anda ingin menerapkan fitur bahasa yang sesuai standar dalam penerapan atau mesin ECMAScript Anda (seperti SpiderMonkey di Firefox, atau V8 di Chrome).

+ +

Dokumen ECMAScript tidak dimaksudkan untuk membantu script programmer; gunakanlah dokumentasi JavaScript untuk informasi dalam penulisan script.

+ +

Spesifikasi ECMAScript menggunakan terminologi dan syntax yang mungkin asing bagi programmer JavaScript. Meskpun deskripsi dari bahasa tersebut dapat berbeda dengan ECMAScript, bahasanya sendiri tetap sama. JavaScript mendukung semua fungsionalitas yang diuraikan dalam spesifikasi ECMAScript.

+ +

Dokumentasi JavaScript menggambarkan aspek bahasa yang sesuai bagi seorang programmer JavaScript.

+ +

Memulai Javascript

+ +

Memulai JavaScript itu mudah: semua yang dibutuhkan hanyalah Web browser modern untuk menjalankannya. Panduan ini mencakup beberapa fitur JavaScript yang hanya tersedia pada versi terakhir Firefox, sehingga disarankan untuk menggunakan Firefox versi terbaru.

+ +

Terdapat dua alat yang dipasang ke dalam Firefox yang berguna dalam bereksperimen dengan JavaScript: Web Console dan Scratchpad.

+ +

Web Console

+ +

Web Consol / Konsol Web memperlihatkan kepada Anda tentang informasi laman Web yang sedang di-load saat ini, dan juga mencakup commandline / baris perintah yang dapat Anda gunakan untuk mengeksekusi ekspresi JavaScript pada laman saat ini.

+ +

Untuk membuka Konsol Web, tekan (Ctrl + Shift + K) pada Windows dan Linux atau tekan (Cmd + Option + K) pada Mac, pilih "Web Console" dari menu "Developer", yang berada di bawah menu "Tools" di Firefox. Konsol akan muncul di bagian bawah jendela browser. Di bagian bawah konsol tersebut adalah command line yang dapat Anda gunakan untuk memasukkan JavaScript, dan outputnya akan muncul pada panel di atasnya.

+ +

Konsol tersebut bekerja persis seperti eval: expresi terakhir yang dienter akan dikembalikan. Demi kesederhanaan, bisa dibayangkan jika setiap saat sesuatu dimasukkan ke dalam konsol, ia akan selalu dikelilingi oleh console.log sekitar eval seperti ini.

+ +
function greetMe(yourName) {
+  alert('Hello ' + yourName);
+}
+console.log(eval('3 + 5'));
+ +

 

+ +

Scratchpad

+ +

Konsol Web bagus untuk menjalankan satu baris kode JavaScript, meskipun Anda juga dapat menjalankan banyak baris, tetap saja akan terasa kurang nyaman, dan Anda juga tidak bisa menyimpan sampel kode Anda menggunakan Konsol Web. Jadi untuk contoh yang lebih kompleks, Scratchpad adalah solusinya.

+ +

Untuk membuka Scratchpad tekan (Shift + F4), pilih "Scratchpad" dari menu "Developer", yang ada di bawah menu pada Firefox. Selanjutnya akan muncul di window yang terpisah dan merupakan editor yang dapat Anda gunakan untuk menulis dan menjalankan JavaScript di browser. Anda juga dapat menyimpan dan membuka kode dari disk.

+ +

+ +

Hello world

+ +

Untuk mulai menulis JavaScript, buka Scratchpad dan tulislah kode JavaScript "Hello world" pertama Anda:

+ +
(function(){
+  "use strict";
+  /* Start of your code */
+  function greetMe(yourName) {
+    alert('Hello ' + yourName);
+  }
+
+  greetMe('World');
+  /* End of your code */
+})();
+
+ +

Pilih kode diatas dan tekan Ctrl+R untuk melihatnya berjalan di browser Anda! Di laman-laman berikutnya, panduan ini akan memperkenalkan Anda dengan syntax dan fitur-fitur bahasa JavaScript, sehingga Anda dapat menulis aplikasi yang lebih kompleks. Tapi untuk saat ini, ingatlah untuk selalu memasukkan (function(){"use strict"; sebelum kode Anda, dan tambahkan  })(); di akhir kode Anda. Anda akan mempelajari apa artinya itu, tetapi untuk sekarang mereka bisa dianggap melakukan:

+ +
    +
  1. Meningkatkan performa secara masif
    2. +
  2. Mencegah semantik ceroboh dalam JavaScript yang menjatuhkan pemula
    3. +
  3. Mencegah code snippets yang dieksekusi dalam konsol untuk berinteraksi satu sama lain (misalnya sesuatu yang dibuat dalam suatu eksekusi konsol digunakan untuk eksekusi konsol yang lain).
    4. +
+ +

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

diff --git a/files/id/web/javascript/guide/loops_and_iteration/index.html b/files/id/web/javascript/guide/loops_and_iteration/index.html new file mode 100644 index 0000000000..7fbb416c43 --- /dev/null +++ b/files/id/web/javascript/guide/loops_and_iteration/index.html @@ -0,0 +1,330 @@ +--- +title: Loops and iteration +slug: Web/JavaScript/Panduan/Loops_and_iteration +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
+ +

Loop menawarkan cara cepat dan mudah untuk melakukan sesuatu secara berulang-ulang. Bab tentang Panduan JavaScript ini memperkenalkan berbagai pernyataan iterasi berbeda yang tersedia untuk JavaScript.

+ +

Anda dapat menganggap loop sebagai versi permainan terkomputerisasi di mana Anda menyuruh seseorang untuk mengambil langkah X menuju satu arah lalu langkah Y ke arah yang lain; Sebagai contoh, gagasan "Pergilah lima langkah ke timur" dapat di ekspresikan dengan cara berikut sebagai sebuah loop (pengulangan):

+ +
var langkah;
+for (langkah= 0; langkah< 5; langkah++) {
+  // berlari 5 kali, dengan nilai langkah 0 sampai 4.
+  console.log('Berjalan ke timur satu langkah');
+}
+
+ +

Ada beberapa jenis loop yang berbeda, namun pada dasarnya semuanya melakukan hal yang sama, mereka mengulangi sebuah aksi beberapa kali (dan sebenarnya memungkinkan bahwa dapat saja menjadi nol). Berbagai mekanisme loop menawarkan berbagai cara untuk menentukan titik awal dan akhir perulangan. Ada berbagai situasi yang lebih mudah dikerjakan oleh sebuah tipe loop dibandingkan tipe (loop) yang lain.

+ +

Pernyataan untuk loop yang disediakan dalam JavaScript adalah:

+ + + +

for statement

+ +

Sebuah {{jsxref("statements/for","for loop")}} mengulang hingga kondisi yang ditentukan evaluasinya menjadi salah/false.  for loop pada Javascript serupa dengan  for loop pada Java dan C. Sebuah statement (pernyataan) for   terlihat sebagai berikut:

+ +
for ([initialExpression]; [condition];
+[incrementExpression]) statement
+
+ +

Ketika sebuah for loop dieksekusi, Berikut ini akan terjadi:

+ +
    +
  1. Ekspresi yang menginisialisasi yaitu initialExpression, Jika ada, maka akan di eksekusi. Ekspresi ini biasanya menginisialisasi satu atau lebih penghitung loop, tetapi sintaksnya memperbolehkan ekspresi dengan tingkat kerumitan apapun. Ekspresi ini juga bisa mendeklarasikan variabel.
    2. +
  2. Ekpresi condition di evaluasi. JIka value dari kondisi adalah true (benar), maka statement loop akan dieksekusi. Jika value dari condition false (salah), for loop akan dihentikan.  Jika ekspresi condition dihilangkan sama sekali, kondisinya diasumsikan benar.
    3. +
  3. Mengeksekusi Statement . Untuk mengeksekusi berbagai pernyataan, gunakanlah sebuah blok pernyataan ({ ... }) untuk mengelompokkan pernyataan-pernyataan tersebut.
    4. +
  4. Jika ada, ekspresi baru incrementExpression di eksekusi.
    5. +
  5. Kontrol kembali ke langkah ke-2.
    6. +
+ +

Contoh

+ +

function (fungsi) berikut memuat sebuah statement for yang menghitung angka dari opsi yang terpilih dalam sebuah daftar scrolling  (sebuah elemen {{HTMLElement("select")}} yang memperbolehkan berbagai pilihan). Statement for mendeklarasikan variable i dan menginisialisasinya ke nol. Ia memeriksa bahwa i lebih kecil dari nomor dari opsi dalam elemen <select> , menampilkan statement if yang berhasil, dan menaikan i satu setelah masing-masing lolos melewati loop.

+ +
<form name="selectForm">
+  <p>
+    <label for="musicTypes">Choose some music types, then click the button below:</label>
+    <select id="musicTypes" name="musicTypes" multiple="multiple">
+      <option selected="selected">R&B</option>
+      <option>Jazz</option>
+      <option>Blues</option>
+      <option>New Age</option>
+      <option>Classical</option>
+      <option>Opera</option>
+    </select>
+  </p>
+  <p><input id="btn" type="button" value="How many are selected?" /></p>
+</form>
+
+<script>
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i < selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById('btn');
+btn.addEventListener('click', function() {
+  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes));
+});
+</script>
+
+
+ +

do...while statement

+ +

Pernyataan/statement {{jsxref("statements/do...while", "do...while")}} terus di ulangi sampai evaluasi kondisi bernilai false/salah. Sebuah do...while statement terlihat sebagai berikut:

+ +
do
+  statement
+while (condition);
+
+ +

statement di jalankan lebih dulu sebelum kondisi diperiksa. Untuk menjalankan banyak statements, gunakan statement blok ({ ... }) untuk membuat grup dari statement tersebut. Jika condition bernilai benar, maka statement akan dijalankan kembali. Kondisi diperiksa pada setiap akhir eksekusi. Ketika kondisi bernilai salah, eksekusi berhenti dan kontrol akan melewati pernyataan yang mengikuti do...while.

+ +

Contoh

+ +

Dalam contoh berikut, perulangan do di iterasi sekali dan di iterasi kembali sampai i tidak lagi kurang dari 5. 

+ +
var i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i < 5);
+ +

while statement

+ +

Sebuah statement {{jsxref("statements/while","while")}} di eksekusi pernyataan pernyataannya asalkan memenuhi syarat kondisinya yang bernilai true/benar. Sebuah statement  while terlihat sebagai berikut:

+ +
while (condition)
+  statement
+
+ +

Jika kondisi bernilai false/salah, statement dengan perulangan berhenti di eksekusi dan kontrol akan melewati statement yang mengikuti perulangan tersebut.

+ +

Kondisi terjadi sebelum statement dalam perulangan di eksekusi. Jika kondisi bernilai true/benar, statement di eksekusi dan kondisi di uji kembali. Jika kondisi bernilai false/salah, eksekusi akan berhenti dan konrol lewat untuk statement yang mengikuti while.

+ +

Untuk mengeksekusi banyak statement, gunakan blok statement ({ ... }) untuk mengelompokan banyak statement tersebut.

+ +

Contoh 1

+ +

Beikut perulangan while mengiterasi n selama n kurang dari tiga:

+ +
var n = 0;
+var x = 0;
+while (n < 3) {
+  n++;
+  x += n;
+}
+
+ +

Dengan setiap iterasi, perulangan akan menambahkan increments n dan menambahkan nilainya pada  x. Karena itu, x dan n mengambil nilai nilai berikut:

+ + + +

Setelah melewati perulangan yang ketiga , kondisinya n < 3 tidak lagi bernilai true/benar, jadi perulangan di hentikan.

+ +

Contoh 2

+ +

Hindari perulangan tanpa batas. Pastikan kondisi dalam perulangan mendapatkan kondisi yang bernilai false/salah untuk berhenti, jika tidak perulangan tidak akan pernah berhenti. Statements dalam while berikut di eksekusi berulang kali selamanya karena kondisi tidak pernah mendapatkan nilai false/salah:

+ +
while (true) {
+  console.log('Hello, world!');
+}
+ +

labeled statement

+ +

Sebuah {{jsxref("statements/label","label")}} menyediakan sebuah statement dengan pengenal yang memungkinkan Anda merujuknya di tempat lain dalam program Kamu. Untuk contohnya, Kamu dapat menggunakan label untuk mengidentifikasi pengulangan, lalu gunakan statement break atau continue untuk menunjukkan apakah suatu program harus memutuskan loop atau melanjutkan eksekusinya.

+ +

Sintak dari statement berlabel terlihat seperti berikut:

+ +
label :
+   statement
+
+ +

Nilai dai sebuah label dapat berupa identifikasi JavaScript apa pun yang tidak dari kata  kunci yang ada pada javascript. statement
+ yang Kamu identifikasi dengan label tersebut dapat berupa statement apa pun.

+ +

Contoh

+ +

Pada contoh ini, label markLoop mengidentifikasi sebuah perulangan while.

+ +
markLoop:
+while (theMark == true) {
+   doSomething();
+}
+ +

break statement

+ +

Gunakan {{jsxref("statements/break","break")}} statement untuk menghentikan perulangan, switch, atau konjungsi dengan statement yang memakai label.

+ + + +

Sintak dari statement break terlihat seperti ini:

+ +
break [label];
+
+ +

Bentuk pertama sintak mengakhiri perulangan atau switch; Bentuk kedua sintak mengakhiri statement dari spesifik label.

+ +

Contoh 1

+ +

Contoh berikut mengiterasi melewati elemen-elemen dalam array sampai menemukan indeks elemen  yang bernilai dari theValue:

+ +
for (var i = 0; i < a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}
+ +

Contoh 2: Breaking pada sebuah label

+ +
var x = 0;
+var z = 0;
+labelCancelLoops: while (true) {
+  console.log('Outer loops: ' + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log('Inner loops: ' + z);
+    z += 1;
+    if (z === 10 && x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+
+ +

continue statement

+ +

Statement {{jsxref("statements/continue","continue")}} bisa digunakan untuk memulai lagi statement while, do-while, for, atau label.

+ + + +

Sintak statement continue terlihat sebagai berikut:

+ +
continue [label];
+
+ +

Contoh 1

+ +

Contoh berikut menunjukkan sebuah perulangan while dengan sebuah statement continue yang di eksekusi ketika niai dari i adalah tiga  Jadi, n mengambil nilai satu, tiga, tujuh dan dua belas.

+ +
var i = 0;
+var n = 0;
+while (i < 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+
+ +

Contoh 2

+ +

Sebuah statement yang berlabel checkiandj berisikan sebuah statement berlabel checkj. Jika ada continue , Programnya akan menghentikan iterasi saat ini dari checkj dan memulai iterasi selanjutnya. Setiap kali continue ditemui, checkj  di iterasi kembali sampai kondisinya bernilai false/salah. Ketika bernilai false/salah, Sisa dari statement checkiandj sudah selesai, dan checkiandj di iterasi kembali sampai kondisi bernilai salah false. Ketika bernilai salah false , program melanjutkan pada statement yang mengikuti checkiandj.

+ +

JIka continue dipunyai label dari checkiandj, program akan terus berlanjut ke bagian atas dari statement checkiandj .

+ +
checkiandj:
+  while (i < 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j > 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + ' is odd.');
+      }
+      console.log('i = ' + i);
+      console.log('j = ' + j);
+  }
+ +

for...in statement

+ +

Statement {{jsxref("statements/for...in","for...in")}} mengiterasi sebuah variabel spesifik diatas properti enumerable dari sebuah objek. Untuk setiap properti yang berbeda, JavaScript mengeksekusi pernyataan pernyataan yang spesifik. Sebuah statement for...in terlihat sebagai berikut:

+ +
for (variable in object) {
+  statements
+}
+
+ +

Contoh

+ +

Function/fungsi berikut mengambil argumentnya dari sebuah objek dan nama objek. Lalu dia di iterasi diatas semua property objek dan mengembalikan sebuah string yang mendaftarkan nama properti dan nilainya.

+ +
function dump_props(obj, obj_name) {
+  var result = '';
+  for (var i in obj) {
+    result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
+  }
+  result += '<hr>';
+  return result;
+}
+
+ +

Untuk sebuah objek car dengan property make dan model, result/hasil akan menjadi:

+ +
car.make = Ford
+car.model = Mustang
+
+ +

Arrays

+ +

Meskipun mungkin menggunakan ini sebagai cara untuk melakukan iterasi di atas elemen {{jsxref("Array")}},statement for...in akan mengembalikan nilai nama property yang di tetapkan pengguna dalam penambahan numerik indek. Jadi lebih baik menggunakan tradisional perulangan {{jsxref("statements/for","for")}} dengan sebuah numerik indek ketika mengiterasi diatas array, karena statement  for...in mengiterasi diatas nama properti yang di tetapkan pengguna pada penambahan elemen array, Jika kamu merubah array, seperti menambahkan properti atau metode. 

+ +

for...of statement

+ +

Statement {{jsxref("statements/for...of","for...of")}} membuat sebuah iterasi perulangan diatas iterable objects (termasuk {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} object dan seterusnya), menjalankan hubungan iterasi khusus dengan statement yang akan dieksekusi untuk setiap nilai properti yang berbeda.

+ +
for (variable of object) {
+  statement
+}
+ +

Contoh berikut menampilkan perbedaan diantara sebuah perulangan for...of dan sebuah perulangan {{jsxref("statements/for...in","for...in")}}. Ketika for...in mengiterasi diatas nama-nama properti, for...of mengiterasi diatas nilai-nilai properti:

+ +
let arr = [3, 5, 7];
+arr.foo = 'hello';
+
+for (let i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // logs 3, 5, 7
+}
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

diff --git a/files/id/web/javascript/guide/numbers_and_dates/index.html b/files/id/web/javascript/guide/numbers_and_dates/index.html new file mode 100644 index 0000000000..e9681b2adf --- /dev/null +++ b/files/id/web/javascript/guide/numbers_and_dates/index.html @@ -0,0 +1,376 @@ +--- +title: Numbers and dates +slug: Web/JavaScript/Panduan/Numbers_and_dates +translation_of: Web/JavaScript/Guide/Numbers_and_dates +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}
+ +

Pada Bab ini memperkenalkan cara menggunakan angka dan tanggal pada JavaScript.

+ +

Angka

+ +

Pada JavaScript, semua angka diimplementasikan kedalam double-precision 64-bit binary format IEEE 754 (mis. angka antara -(253 -1) dan 253 -1). Tidak ada jenis spesifik untuk integer. Selain bisa mewakili angka float, tipe data angka memiliki 3 nilai secara simbolik: +{{jsxref("Infinity")}}, -{{jsxref("Infinity")}}, dan {{jsxref("NaN")}} (bukan sebuah angka). Lihat juga JavaScript tipe data dan struktur untuk konteks dengan tipe data primitif JavaScript yang lain.

+ +

Anda dapat menggunakan empat tipe angka literal: desimal, biner, oktal, dan heksadesimal.

+ +

Angka Desimal

+ +
1234567890
+42
+
+// Perhatikan ketika menggunakan angka berawalan nol:
+
+0888 // 888 diubah menjadi desimal
+0777 // diubah menjadi oktal pada non-strict mode (511 in decimal)
+
+ +

Perhatikan bahwa desimal literal dapat dimulai dari nol(0) diikuti angka desimal yang lain, namun jika setiap angka setelah 0 lebih kecil dari 8, angkanya diubah menjadi oktal.

+ +

Angka Biner

+ +

Sintaks angka biner menggunakan angka nol diikuti dengan huruf kecil atau dengan huruf besar, huruf Latin "B" (0b atau 0B). Jika digit setelah 0b atau bukan 0 atau 1, menurut SyntaxError yang dilemparkan: "Missing binary digits after 0b".

+ +
var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607
+ +

Angka oktal

+ +

Angka oktal menggunakan awalan angka nol. Jika digit setelah 0 berada diluar jangkauan 0 hinga 7, angka akan diintrepretasikan sebagai angka desimal.

+ +
var n = 0755; // 493
+var m = 0644; // 420
+
+ +

Mode ketat pada ECMAScript 5 melarang sintaks oktal. Oktal sintaks bukan bagian dari ECMAScript 5, namun didukung oleh semua peramban dengan cara awalan nomor oktal dengan angka nol: 0644 === 420 dan "\045" === "%". Pada ECMAScript 2015, angka oktal didukung jika diawali dengan 0o, e.g.: 

+ +
var a = 0o10; // ES2015: 8
+
+ +

Angka Heksadesimal

+ +

Sintaks heksadesimal menggunakan awalan nol diikuti dengan huruf kecil atau huruf kapital Latin "X" (0x atau 0X). Jika digit setelah 0x berada diluar jangkauan (0123456789ABCDEF),  menurut SyntaxError yang dilemparkan: "Identifier starts immediately after numeric literal".

+ +
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+
+ +

Eksponensial

+ +
1E3   // 1000
+2e6   // 2000000
+0.1e2 // 10
+ +

Angka object

+ +

The built-in {{jsxref("Number")}} objek memiliki properti untuk numerik konstanta, seperti nilai maksimal, bukan-sebuah-angka, dan tak terhingga. Anda tidak dapat mengganti nilai dari properti tersebut dan anda dapat menggunakannya sebagai berikut:

+ +
var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+
+ +

Anda selalu mengacu pada properti dari objek angka yang telah ditentukan seperti yang ditunjukkan diatas, dan bukan sebagai properti objek angka yang anda tentukan.

+ +

Tabel berikut meringkas sifat-sifat nomor object.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties of Number
PropertiDeskripsi
{{jsxref("Number.MAX_VALUE")}}Merepresantikan angka maksimal / terbesar
{{jsxref("Number.MIN_VALUE")}}Merepresantikan angka minimal / terkecil
{{jsxref("Number.NaN")}}Nilai spesial "bukan sebuah angka"
{{jsxref("Number.NEGATIVE_INFINITY")}}Nilai spesial negatif tak terhingga; dikembalikan pada overflow
{{jsxref("Number.POSITIVE_INFINITY")}}Nilai spesial positif tak terhingga; dikembalikan pada overflow
{{jsxref("Number.EPSILON")}}Perbedaan antara satu dan nilai terkecil lebih besar dari satu yang dapat direpresentasikan sebagai {{jsxref("Number")}}.
{{jsxref("Number.MIN_SAFE_INTEGER")}}Bilangan bulat aman minimum dalam JavaScript.
{{jsxref("Number.MAX_SAFE_INTEGER")}}Bilangan bulat aman maksimum dalam JavaScript.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Methods of Number
MethodDescription
{{jsxref("Number.parseFloat()")}}Parses a string argument and returns a floating point number.
+ Same as the global {{jsxref("parseFloat", "parseFloat()")}} function.
{{jsxref("Number.parseInt()")}}Parses a string argument and returns an integer of the specified radix or base.
+ Same as the global {{jsxref("parseInt", "parseInt()")}} function.
{{jsxref("Number.isFinite()")}}Determines whether the passed value is a finite number.
{{jsxref("Number.isInteger()")}}Determines whether the passed value is an integer.
{{jsxref("Number.isNaN()")}}Determines whether the passed value is {{jsxref("Global_Objects/NaN", "NaN")}}. More robust version of the original global {{jsxref("Global_Objects/isNaN", "isNaN()")}}.
{{jsxref("Number.isSafeInteger()")}}Determines whether the provided value is a number that is a safe integer.
+ +

Prototipe Angka menyediakan metode-metode untuk menampilkan informasi dari objek angka dalam format bervariasi. Tabel berikut meringkas metode-metode prototipe angka.

+ + + + + + + + + + + + + + + + + + + + + + + +
Methods of Number.prototype
MethodDescription
{{jsxref("Number.toExponential", "toExponential()")}}Mengembalikan string yang merepresentasikan nomor dalam notasi eksponensial.
{{jsxref("Number.toFixed", "toFixed()")}}Mengembalikan string yang merepresentasikan nomor dalam notasi fixed-point.
{{jsxref("Number.toPrecision", "toPrecision()")}}Mengembalikan string yang merepresentasikan nomor dalam notasi fixed-point yang lebih spesifik.
+ +

Math object

+ +

The built-in {{jsxref("Math")}} objek memiliki properti dan metode-metode untuk konstanta matematika dan fungsi-fungsi. Sebagai contoh, objek matematik PI properti memiliki nilai (3.141...), yang akan anda gunakan dalam aplikasi sebagai

+ +
Math.PI
+
+ +

Demikian pula, fungsi standard matematika merupakan metode-metode Math. termasuk trigonometri, logaritma, eksponensial, dan fungsi lainnya. Sebagai contoh, jika anda ingin menggunakan fungsi trigonometri sin, anda akan menulis

+ +
Math.sin(1.56)
+
+ +

Perhatikan bahwa semua metode trigonometri matematika menggunakan argumen dalam radian.

+ +

Tabel berikut meringkas metode-metode objek matematik.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Methods of Math
MethodDescription
{{jsxref("Math.abs", "abs()")}}Nilai absolut
{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}Fungsi trigonometri standar; dengan argumen dalam radian.
{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}Fungsi trigonometri terbalik; mengembalikan nilai dalam radian.
{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}Fungsi hiperbolik. argumen dalam sudut hiperbolik.
{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}Fungsi hiperbolik terbalik. mengembalikan nilai dalam sudut hiperbolik.
+

{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}

+ 		Fungsi eksponen dan logaritma.
{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}Mengembalikan angka bulat terkecil/terbesar kurang/lebih dari atau sama dengan pada sebuah argumen.
{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}Mengembalikan nilai minimum/maksimum sebuah koma terpisah dari angka sebagai argumen.
{{jsxref("Math.random", "random()")}}Megembalikan angka acak antara 0 dan 1.
{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},Fungsi pembulatan dan pemotongan.
{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}Akar kuadrat, akar pangkat tiga, akar kuadrat dari jumlah argumen persegi.
{{jsxref("Math.sign", "sign()")}}tanda sebuah angka, mengindikasikan angka apapun merupakan angka positif, negatif, atau nol.
{{jsxref("Math.clz32", "clz32()")}},
+ {{jsxref("Math.imul", "imul()")}}		Angka yang dimulai dari nol bit dalam 32-bit.
+ Hasil dari C-like 32-bit perkalian dari dua argumen.
+ +

Tidak seperti beberapa objek lainnya, anda tidak perlu membuat objek matematika sendiri. anda selalu menggunakan built-in Math object.

+ +

Date object

+ +

JavaScript does not have a date data type. However, you can use the {{jsxref("Date")}} object and its methods to work with dates and times in your applications. The Date object has a large number of methods for setting, getting, and manipulating dates. It does not have any properties.

+ +

JavaScript handles dates similarly to Java. The two languages have many of the same date methods, and both languages store dates as the number of milliseconds since January 1, 1970, 00:00:00, with a Unix Timestamp being the number of seconds since January 1, 1970, 00:00:00.

+ +

The Date object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.

+ +

To create a Date object:

+ +
var dateObjectName = new Date([parameters]);
+
+ +

where dateObjectName is the name of the Date object being created; it can be a new object or a property of an existing object.

+ +

Calling Date without the new keyword returns a string representing the current date and time.

+ +

The parameters in the preceding syntax can be any of the following:

+ + + +

Methods of the Date object

+ +

The Date object methods for handling dates and times fall into these broad categories:

+ + + +

With the "get" and "set" methods you can get and set seconds, minutes, hours, day of the month, day of the week, months, and years separately. There is a getDay method that returns the day of the week, but no corresponding setDay method, because the day of the week is set automatically. These methods use integers to represent these values as follows:

+ + + +

For example, suppose you define the following date:

+ +
var Xmas95 = new Date('December 25, 1995');
+
+ +

Then Xmas95.getMonth() returns 11, and Xmas95.getFullYear() returns 1995.

+ +

The getTime and setTime methods are useful for comparing dates. The getTime method returns the number of milliseconds since January 1, 1970, 00:00:00 for a Date object.

+ +

For example, the following code displays the number of days left in the current year:

+ +
var today = new Date();
+var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Set day and month
+endYear.setFullYear(today.getFullYear()); // Set year to this year
+var msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day
+var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay;
+var daysLeft = Math.round(daysLeft); //returns days left in the year
+
+ +

This example creates a Date object named today that contains today's date. It then creates a Date object named endYear and sets the year to the current year. Then, using the number of milliseconds per day, it computes the number of days between today and endYear, using getTime and rounding to a whole number of days.

+ +

The parse method is useful for assigning values from date strings to existing Date objects. For example, the following code uses parse and setTime to assign a date value to the IPOdate object:

+ +
var IPOdate = new Date();
+IPOdate.setTime(Date.parse('Aug 9, 1995'));
+
+ +

Example

+ +

In the following example, the function JSClock() returns the time in the format of a digital clock.

+ +
function JSClock() {
+  var time = new Date();
+  var hour = time.getHours();
+  var minute = time.getMinutes();
+  var second = time.getSeconds();
+  var temp = '' + ((hour > 12) ? hour - 12 : hour);
+  if (hour == 0)
+    temp = '12';
+  temp += ((minute < 10) ? ':0' : ':') + minute;
+  temp += ((second < 10) ? ':0' : ':') + second;
+  temp += (hour >= 12) ? ' P.M.' : ' A.M.';
+  return temp;
+}
+
+ +

The JSClock function first creates a new Date object called time; since no arguments are given, time is created with the current date and time. Then calls to the getHours, getMinutes, and getSeconds methods assign the value of the current hour, minute, and second to hour, minute, and second.

+ +

The next four statements build a string value based on the time. The first statement creates a variable temp, assigning it a value using a conditional expression; if hour is greater than 12, (hour - 12), otherwise simply hour, unless hour is 0, in which case it becomes 12.

+ +

The next statement appends a minute value to temp. If the value of minute is less than 10, the conditional expression adds a string with a preceding zero; otherwise it adds a string with a demarcating colon. Then a statement appends a seconds value to temp in the same way.

+ +

Finally, a conditional expression appends "P.M." to temp if hour is 12 or greater; otherwise, it appends "A.M." to temp.

+ +

{{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}

diff --git a/files/id/web/javascript/guide/working_with_objects/index.html b/files/id/web/javascript/guide/working_with_objects/index.html new file mode 100644 index 0000000000..4449732e61 --- /dev/null +++ b/files/id/web/javascript/guide/working_with_objects/index.html @@ -0,0 +1,492 @@ +--- +title: Bekerja dengan objek +slug: Web/JavaScript/Panduan/Working_with_Objects +tags: + - 'I10n:priority' + - JavaScript + - Konstruktor + - Membandingkan objek + - Objek + - Panduan + - Pemula + - dokumen +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
+ +

JavaScript dirancang berdasarkan paradigma berbasis objek sederhana. Objek adalah kumpulan dari properti, dan properti adalah sepasang hubungan antara nama (atau kunci) dan nilai. Nilai properti bisa berupa fungsi, Dalam hal ini properti itu disebut metode. Selain objek yang sudah di tentukan pada peramban, Kamu bisa menentukan objekmu sendiri. Bab ini menjelaskan cara memakai objek, properti, fungsi, dan metode, serta bagaimana cara membuat objekmu sendiri.

+ +

Ikhtisar objek

+ +

Objek di JavaScript sama seperti kebanyakan bahasa pemrograman lainnya, bisa dibandingkan dengan objek dalam kehidupan nyata. Konsep objek dalam JavaScript dapat dipahami dengan kehidupan nyata, objek nyata.

+ +

Di JavaScript, objek adalah entitas yang mandiri dengan properti dan tipe. Bandingkan dengan cangkir, misalnya. Sebuah cangkir adalah objek dengan banyak properti. Cangkir punya warna, desain, berat, materi bahan, dll. Dengan cara sama, objek JavaScript juga punya banyak properti yang menjelaskan karakteristiknya.

+ +

Objek dan properti

+ +

Objek JavaScript punya banyak properti yang terkait dengannya. Properti dari objek dapat didefinisikan sebagai variabel yang dilampirkan pada objek itu. Properti dari objek pada dasarnya sama dengan variabel JavaScript biasa, kecuali lampiran pada objek. Properti objek menentukan karakteristik objek itu. Kamu mengakses properti objek dengan sebuah notasi titik sederhana:

+ +
objectName.propertyName
+
+ +

Seperti semua variabel JavaScript, baik nama objek (bisa jadi variabel normal) maupun nama properti peka terhadap besar huruf. Kamu bisa mendefinisi properti dengan mengassign nilai. Contohnya, ayo buat objek bernama myCar dan dan berikan dia properti bernama make, model, dan year sebagai berikut:

+ +
var myCar = new Object();
+myCar.make = 'Ford';
+myCar.model = 'Mustang';
+myCar.year = 1969;
+
+ +

Nilai properti objek yang tidak diassign adalah {{jsxref("undefined")}} (dan bukan {{jsxref("null")}}).

+ +
myCar.color; // undefined
+ +

Properti dari objek JavaScript juga bisa diakses atau diset menggunakan notasi kurung siku (untuk lebih detil lihat aksesor properti). Terkadang objek disebut associative array, karena tiap properti dikaitkan dengan nilai string yang bisa digunakan untuk mengaksesnya. Jadi, contohnya, kamu bisa mengakses properti dari objek myCar seperti berikut:

+ +
myCar['make'] = 'Ford';
+myCar['model'] = 'Mustang';
+myCar['year'] = 1969;
+
+ +

Nama properti objek bisa berupa string dari JavaScript yang valid, atau apapun yang dapat diubah menjadi string, termasuk string kosong. Namun, nama properti apapun yang tidak valid sebagai identitas di JavaScript (contohnya, nama properti yang memiliki spasi atau tanda hubung, atau yang dimulai dengan angka) hanya bisa diakses menggunakan notasi kurung siku. Notasi ini juga sangat berguna ketika nama properti harus ditentukan secara dinamis (ketika nama properti belum ditentukan hingga runtime). Contohnya sebagai berikut:

+ +
// empat variabel dibuat dan diberi nilai sekali jalan,
+// dipisahkan oleh koma
+var myObj = new Object(),
+    str = 'myString',
+    rand = Math.random(),
+    obj = new Object();
+
+myObj.type              = 'Syntax titik';
+myObj['date created']   = 'String dengan spasi';
+myObj[str]              = 'Nilai string';
+myObj[rand]             = 'Angka Random';
+myObj[obj]              = 'Objek';
+myObj['']               = 'Bahkan string kosong';
+
+console.log(myObj);
+
+ +

Tolong dicatat bahwa semua kunci di dalam notasi kurung siku diubah ke dalam tipe String, karena objek JavaScript hanya bisa punya tipe String sebagai tipe kunci. Contohnya, dalam kode di atas, ketika kunci  obj ditambahkan dalam myObj, JavaScript akan memanggil method obj.toString() , dan menggunakan hasil string ini sebagai kunci baru.

+ +

Kamu juga bisa mengakses properti menggunakan nilai string yang disimpan dalam variabel:

+ +
var propertyName = 'make';
+myCar[propertyName] = 'Ford';
+
+propertyName = 'model';
+myCar[propertyName] = 'Mustang';
+ +

Kamu bisa menggunakan notasi kurung siku dengan for...in untuk mengiterasi ulang semua kumpulan properti yang terdaftar dari sebuah objek. Untuk mengilustrasikan cara kerjanya, fungsi berikut ini menampilkan properti dari objek ketika kamu memasukkan objek dan nama objek sebagai argumen pada fungsi:

+ +
function showProps(obj, objName) {
+  var result = '';
+  for (var i in obj) {
+    // obj.hasOwnProperty() digunakan untuk menyaring properti dari rantai prototipe objek
+    if (obj.hasOwnProperty(i)) {
+      result += objName + '.' + i + ' = ' + obj[i] + '\n';
+    }
+  }
+  return result;
+}
+
+ +

Jadi memanggil fungsi showProps(mobilKu, "mobilKu") akan mengembalikan:

+ +
myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969
+ +

Mengenumerasi properti dari objek

+ +

Mulai ECMAScript 5, ada tiga cara asli untuk mendaftarkan/melintasi properti objek:

+ + + +

Sebelum ECMAScript 5, tidak ada cara asli untuk mendaftarkan semua properti-properti dari suatu objek. Namun, ini dapat dicapai dengan fungsi berikut:

+ +
function listAllProperties(o) {
+	var objectToInspect;
+	var result = [];
+
+	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {
+      result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+	}
+
+	return result;
+}
+
+ +

Ini dapat berguna untuk memperlihatkan properti-properti  tersembunyi" (properti-properti dalam rantai prototip yang tidak dapat diakses melalui objek, karena properti lain memiliki nama yang sama di rantai prototip sebelumnya). Mendaftarkan properti-properti yang dapat diakses hanya dapat dilakukan dengan menghapus duplikat di dalam array.

+ +

Membuat objek baru

+ +

JavaScript mempunyai sejumlah objek yang telah ditetapkan. Selain itu, kamu dapat membuat objek sendiri. Kamu bisa membuat sebuah objek menngunakan sebuah object initializer. Sebagai alternatif, kamu bisa membuat sebuah fungsi konstruktor lalu menginstanisasi sebuah pemanggilan objek bersama dengan operator new.

+ +

Menggunakan object initializer

+ +

Selain membuat objek menggunakan fungsi konstruktor, kamu bisa membuat objek memakai object initializer. Kadang pemakaian object initializer disamakan dengan pembuatan objek dengan notasi literal. "Object initializer" sama dengan terminologi dalam C++.

+ +

Syntax untuk objek yang menggunakan object initializer ialah:

+ +
var obj = { property_1:   value_1,   // property_# bisa berupa identifier...
+            2:            value_2,   // atau angka...
+            // ...,
+            'property n': value_n }; // atau string
+
+ +

Di mana obj adalah nama objek baru, setiap property_i adalah identifier (baik nama, angka, atau string literal), dan setiap value_i adalah expresi yang nilainya diassign ke property_i.  obj dan assignment adalah opsional, jika kamu tidak butuh rujukan ke objek ini, kamu tak usah mengassign dia ke variabel. (Ingat bahwa kamu harus membungkus literal objek dalam tanda kurung jika objeknya muncul dalam statement diharapkan, supaya bisa membedakan mana literal dan mana statement blok.)

+ +

Object initializer adalah expresi, dan setiap object initializer mengembalikan objek baru. Objek baru dibuat saat ia muncul dalam statement yang dieksekusi. Object initializer yang identik membuat objek berbeda yang tidak akan sama bila dibandingkan. Objek dibuat seolah-olah ada panggilan new Object(); yaitu, objek yang dibuat dari expresi literal objek adalah instance dari Object.

+ +

Statement berikut membuat objek dan mengassign dia ke variabel x jika dan hanya jika expresi cond benar:

+ +
if (cond) var x = {greeting: 'hi there'};
+
+ +

Contoh berikut membuat myHonda dengan tiga properti. Ingat bahwa properti engine juga adalah objek yang punya properti sendiri.

+ +
var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
+
+ +

Kamu juga bisa menggunakan object initializer untuk membuat array. Lihat literal array.

+ +

Menggunakan fungsi konstruktor

+ +

Kamu bisa membuat objek dengan dua langkah alternatif ini:

+ +
    +
  1. Definisikan tipe objek dengan menulis fungsi konstruktor. Ada konvensi dengan alasan bagus untuk menggunakan huruf kapital inisial.
    2. +
  2. Membuat instance objek dengan new.
    3. +
+ +

Untuk mendefinisi tipe objek, buat fungsi untuk tipe objek tersebut yang menspesifikasi nama, properti, dan metodenya. Misalnya, kamu ingin membuat tipe objek untuk mobil. Kamu ingin jenis objek ini disebut Car, dan kamu ingin punya properti pembuat, model, dan tahun. Untuk melakukan ini, kamu akan menulis fungsi berikut:

+ +
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+ +

Perhatikan penggunaan this untuk mengassign nilai ke properti objek berdasarkan nilai yang diteruskan kepada fungsi.

+ +

Sekarang kamu bisa membuat objek myCar sebagai berikut:

+ +
var mycar = new Car('Eagle', 'Talon TSi', 1993);
+ +

Statement ini membuat myCar dan mengassign ia nilai spesifik untuk propertinya. Lalu nilai dari myCar.make ialah string "Eagle", myCar.year ialah integer 1993, dan seterusnya.

+ +

Kamu bisa membuat sejumlah objek Car dengan memanggil new. Sebagai contoh.

+ +
var kenscar = new Car('Nissan', '300ZX', 1992);
+var vpgscar = new Car('Mazda', 'Miata', 1990);
+ +

Objek bisa punya properti yang merupakan objek lain. Misalnya, kamu mendefinisi objek person sebagai berikut:

+ +
function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+ +

dan kemudian menginstantiasi dua objek person baru sebagai berikut:

+ +
var rand = new Person('Rand McKinnon', 33, 'M');
+var ken = new Person('Ken Jones', 39, 'M');
+ +

Kemudian, kamu bisa menulis ulang definisi Car untuk memasukkan properti owner yang mengambil objek person sebagai berikut:

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+ +

Untuk menginstantiasi objek baru, gunakan ini:

+ +
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+ +

Perhatikan bahwa ketimbang meneruskan nilai string atau integer literal ketika membuat objek baru, statement diatas meneruskan objek rand dan ken sebagai argumen untuk pemilik. Lalu jika kamu mau mencari nama pemilik car2, kamu bisa mengakses properti berikut:

+ +
car2.owner.name
+
+ +

Ingat bahwa kamu selalu bisa menambah properti ke objek yang sudah dibuat sebelumnya. Contohnya statement

+ +
car1.color = 'black';
+
+ +

menambah properti color pada car1, dan mengassign nilai "black". Ini tak mempengaruhi objek lain. Untuk menambah properti baru ke semua objek dari tipe yang sama, kamu harus menambah properti pada definisi tipe objek Car.

+ +

Menggunakan metode Object.create

+ +

Objek bisa juga dibuat menggunakan metode {{jsxref("Object.create()")}}. Metode ini bisa sangat berguna, karena ia memungkinkan kamu memilih prototipe objek untuk objek yang mau kamu buat, tanpa harus mendefinisi fungsi konstruktor.

+ +
// Enkapsulasi metode dan properti Animal
+var Animal = {
+  type: 'Invertebrates', // Nilai properti default
+  displayType: function() {  // Method which will display type of Animal
+    console.log(this.type);
+  }
+};
+
+// Create new animal type called animal1 
+var animal1 = Object.create(Animal);
+animal1.displayType(); // Output:Invertebrates
+
+// Create new animal type called Fishes
+var fish = Object.create(Animal);
+fish.type = 'Fishes';
+fish.displayType(); // Output:Fishes
+ +

Warisan

+ +

Semua objek di javascript diwariskan setidaknya dari satu objek lain. Objek yang diwariskan disebut prototipe, dan properti warisan bisa ditemukan dalam objek prototype dari konstruktor. Lihat Rantai warisan dan prototype untuk informasi lebih lanjut.

+ +

Mengindex properti objek

+ +

Kamu dapat merujuk ke properti dari objek menggunakan nama propertinya ataupun index urutannya. Jika kamu awalnya mendefinisi properti memakai namanya, kamu harus selalu merujuknya dengan namanya, dan jika kamu awalnya mendefinisikan properti memakai index, kamu harus selalu merujuknya dengan indexnya.

+ +

Pembatasan ini berlaku ketika kamu membuat objek dan propertinya dengan fungsi konstruktor (seperti yang kita lakukan sebelumnya dengan jenis objek Car) dan ketika kamu mendefinisi properti individual secara explisit (misalnya, myCar.color = "ref"). Jika kamu awalnya mendefinisi properti objek dengan index, seperti myCar[5] = "25 mpg", maka kamu merujuk ke properti tersebut dengan myCar[5].

+ +

Pengecualian dalam aturan ini adalah objek mirip-array pantulan dari HTML, seperti objek mirip-array forms. Kamu selalu dapat merujuk ke objek dalam objek mirip-array ini menggunakan nomor urutan mereka (berdasarkan di mana mereka muncul dalam dokumen) atau nama mereka (jika didefinisi). Misalnya, jika tag <FORM> kedua dalam dokumen punya atribut NAME "myForm", kamu dapat merujuk ke form tersebut sebagai document.forms[1] atau document.forms["myForm"] atau document.forms.myForm.

+ +

Mendefinisi properti untuk tipe objek

+ +

Kamu dapat menambah properti ke tipe objek yang didefinisi sebelumnya menggunakan properti prototype. Ini mendefinisi properti yang dibagikan semua objek dari tipe yang dispesifikasi, bukan cuma satu instance objek. Kode berikut menambahkan sebuah properti color ke semua objek dari tipe objek Car, dan kemudian mengassign nilai ke properti color dari objek car1.

+ +
Car.prototype.color = null;
+car1.color = 'black';
+ +

Lihat properti prototipe dari objek Function dalam referensi JavaScript untuk informasi lebih lanjut.

+ +

Mendefiniskan metode

+ +

Metode ialah fungsi yang terasosiasi dengan objek, atau sederhananya, metode ialah properti dari objek berupa fungsi. Metode didefinisi sebagai cara fungsi nornal didefinisi, kecuali mereka harus diassign sebagai properti objek. Lihat juga definisi metode untuk lebih detil. Contohnya:

+ +
objectName.methodname = functionName;
+
+var myObj = {
+  myMethod: function(params) {
+    // ...do something
+  }
+
+  // OR THIS WORKS TOO
+
+  myOtherMethod(params) {
+    // ...do something else
+  }
+};
+
+ +

Di mana objectName adalah metode yang sudah ada, methodname ialah nama yang kamu assign ke metode, dan functionName adalah nama fungsi.

+ +

Lalu kamu bisa memanggil metode dalam kontex objek sebagai berikut:

+ +
object.methodname(params);
+
+ +

Kamu bisa mendefinisi metode untuk tipe objek dengan memasukkan sebuah definisi metode dalam fungsi konstruktor objek. Kamu bisa mendefinisi fungsi yang akan memformat dan menampilkan properti objek Car sebelumnya; contohnya,

+ +
function displayCar() {
+  var result = `A Beautiful ${this.year} ${this.make} ${this.model}`;
+  pretty_print(result);
+}
+ +

Di mana pretty_print adalah fungsi untuk menampilkan garis horizontal dan string. Perhatikan penggunaan this untuk merujuk ke objek yang punya metode tersebut.

+ +

Kamu bisa menjadikan fungsi ini metode Car dengan menambah statement

+ +
this.displayCar = displayCar;
+ +

ke definisi objek. Jadi definisi penuh dari Car sekarang akan terlihat seperti

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+  this.displayCar = displayCar;
+}
+ +

Maka kamu bisa memanggil metode displayCar untuk masing-masig objek sebagai berikut:

+ +
car1.displayCar();
+car2.displayCar();
+ +

Menggunakan this untuk referensi Objek

+ +

JavaScript punya katakunci spesial this, kamu bisa memakainya dalam metode untuk merujuk ke objek saat ini. Misalnya, kamu punya fungsi yang disebut validate yang memvalidasi properti value, yang diberikan objek dan nilai atas dan bawah:

+ +
function validate(obj, lowval, hival) {
+  if ((obj.value < lowval) || (obj.value > hival)) {
+    alert('Invalid Value!');
+  }
+}
+
+ +

Kemudian kamu bisa panggil validate di penangan event onchange setiap elemen form, gunakan this untuk meneruskan elemen. Seperti contoh berikut:

+ +
<input type="text" name="age" size="3"
+  onChange="validate(this, 18, 99)">
+
+ +

Secara umum, this merujuk ke pemanggilan objek dalam metode.

+ +

Ketika dikombinasikan dengan properti form, this bisa mengacu ke induk objek form saat ini. Dalam contoh berikut, form myForm berisi objek Text dan sebuah tombol. Ketika pengguna mengklik tombol, nilai objek Text diset ke nama form tersebut. Penangan event onclick tombol menggunakan this.form untuk merujuk ke induk form, myForm.

+ +
<form name="myForm">
+<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
+<p><input name="button1" type="button" value="Show Form Name"
+     onclick="this.form.text1.value = this.form.name">
+</p>
+</form>
+ +

Mendefinisikan getter dan setter

+ +

Getter ialah metode yang mendapat nilai dari properti spesifik. Setter ialah metode yang mengatur nilai properti spesifik. Kamu bisa mendefinisi getter dan setter objek inti apapun yang sudah ditetapkan atau objek yang ditetapkan pengguna yang mendukung penambahan peroperti-properti baru. Syntax untuk mendefinisi getter dan setter menggunakan syntax literal objek.

+ +

Berikut ilustrasi cara getter dan setter bisa bekerja untuk objek o yang sudah didefinisi user.

+ +
var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2;
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8
+o.c = 50;
+console.log(o.a); // 25
+
+ +

Properti objek o adalah:

+ + + +

Harap diingat bahwa nama fungsi dari getter dan setter yang didefisini dalam literal objek menggunakan "[gs]et property()" (dibandingkan dengan __define[GS]etter__ ) bukanlah nama getter mereka sendiri, meski syntax [gs]et propertyName(){ } membuatmu berpikir lain. Untuk menamai fungsi dalam getter atau setter menggunakan syntax "[gs]et property()", definiskan fungsi, dengan nama explisit, secara terprogram menggunakan Object.defineProperty (atau pengganti legacy Object.prototype.__defineGetter__).

+ +

Kode berikut mengilustrasikan cara getter dan setter bisa memperluas prototipe {{jsxref("Date")}} untuk menambah properti year ke semua instance dari kelas Date yang sudah didefinisi. Ia menggunakan metode kelas Date yang sudah ada, getFullYear dan setFullYear untuk mendukung properti getter dan setter year.

+ +

Statement ini mendefinisi getter dan setter untuk properti tahun:

+ +
var d = Date.prototype;
+Object.defineProperty(d, 'year', {
+  get: function() { return this.getFullYear(); },
+  set: function(y) { this.setFullYear(y); }
+});
+
+ +

Statement ini menggunakan getter dan setter dalam objek Date:

+ +
var now = new Date();
+console.log(now.year); // 2000
+now.year = 2001; // 987617605170
+console.log(now);
+// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+
+ +

Secara pinsip, getter dan setter bisa

+ + + +

Ketika mendefiniisi getter dan setter menggunakan object initializer yang harus kamu lakukan adalah memprefix metode getter dengan get dan metode setter dengan set. Tentunya, metode getter tidak boleh mengharapkan parameter, lalu metode setter mengharapkan hanya satu parameter (nilai baru untuk diset). Contohnya:

+ +
var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};
+
+ +

Getter dan setter juga bisa ditambah ke objek kapanpun setelah membuat objek menggunakan metode Object.defineProperties. Parameter pertama metode ini ialah object tempat kamu mendefinisi getter atau setter. Parameter kedua ialah objek yang nama propertinya berupa nama getter atau setter,dan yang nilai propertinya berupa objek yang mendefinisi fungsi getter atau setter. Berikut adalah contoh mendefinisi getter dan setter yang sama yang digunakan dalam contoh sebelumnya:

+ +
var o = { a: 0 };
+
+Object.defineProperties(o, {
+    'b': { get: function() { return this.a + 1; } },
+    'c': { set: function(x) { this.a = x / 2; } }
+});
+
+o.c = 10; // Menjalankan setter, yang mengassign 10 / 2 (5) ke properti 'a'
+console.log(o.b); // Menjalankan getter, yang menghasilkan a + 1 atau 6
+
+ +

Yang manapun dari dua form ini yang dipilih tergantung dari gaya pemrograman dan tugas di tangan. Jika kamu sudah memilih object initializer ketika mendefinisi prototipe kamu mungkin akan sering memilih form pertama. Form ini lebih compact dan natural. Namun, kalau kamu harus menambah getter dan setter nanti — karena kamu tak menulis prototipenya atau object khusus — maka form kedua menjadi satu-satunya solusi. Form kedua mungkin paling baik mewakiliki sifat dinamis JavaScript — tapi ia bisa membuat kode sulit dibaca dan dipahami.

+ +

Menghapus properti

+ +

Kamu bisa menghapus properti yang bukan warisan menggunakan operator delete. Kode berikut menampilkan cara menghapus properti.

+ +
// Membuat objek baru, myobj, dengan dua properti, a dan b.
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// Mengapus properti a, menyisakan myobj hanya dengan properti b.
+delete myobj.a;
+console.log ('a' in myobj); // menghasilkan "false"
+
+ +

Kamu juga bisa memakai delete untuk menghapus variabel global jika katakunci var tidak dipakai untuk mendeklarasi variabel itu:

+ +
g = 17;
+delete g;
+
+ +

Membandingkan objek

+ +

Dalam JavaScript objek ialah tipe referensi. Dua objek berbeda tak akan pernah sama, meski mereka punya properti yang sama. Hanya membandingkan referensi objek yang sama dengannya menghasilkan true.

+ +
// Dua variabel, dua objek berbeda dengan properti yang sama
+var fruit = {name: 'apple'};
+var fruitbear = {name: 'apple'};
+
+fruit == fruitbear; // mengembalikan false
+fruit === fruitbear; // mengembalikan false
+ +
// Dua variabel, objek tunggal
+var fruit = {name: 'apple'};
+var fruitbear = fruit;  // assign referensi objek buah ke fruitbear
+
+// di sini fruit dan fruitbear menunjuk ke objek yang sama
+fruit == fruitbear; // mengembalikan true
+fruit === fruitbear; // mengembalikan true
+
+ +
fruit.name = 'grape';
+console.log(fruitbear);    // menghasilkan { name: "grape" } ketimbang { name: "apple" }
+
+ +

Untuk informasi lebih tentang operator pembandingan, lihat Operator pembandingan.

+ +

Lihat juga

+ + + +

{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}

diff --git a/files/id/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/id/web/javascript/inheritance_and_the_prototype_chain/index.html new file mode 100644 index 0000000000..49a0100ed8 --- /dev/null +++ b/files/id/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -0,0 +1,304 @@ +--- +title: Inheritance dan prototype chain +slug: Web/JavaScript/Inheritance_dan_prototype_chain +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +
{{jsSidebar("Advanced")}}
+ +

JavaScript sedikit membingungkan bagi pengembang yang berpengalaman di pemrograman berbasis class (seperti java dan C++), sebagai bahasa dinamis dan tidak mendukung implementasi class lihat( keyword class dikenalkan pada ES2015, namun terkesan berlebihan, JavaScript merupakan bahasa berbasis prototype).

+ +

Ketika menggunakan inheritance, JavaScript hanya memiliki satu construct: objek. Setiap objek memiliki sebuah private property ( berkenaan tentang [[Prototype]] ) yang memegang jalinan ke objek lain yang memanggil prototype tersebut. Prototype objek tersebut memiliki prototype sendiri, dan seterusnya hingga objek mencapai prototipe null. Dengan definisi, null tidak lagi memiliki prototype, dan berperan sebagai hubungan terakhir dari prototype chain.

+ +

Hampir seluruh objek pada JavaScript merupakan instance dari {{jsxref("Object")}} dimana berada di atas prototype chain.

+ +

Meskipun hal ini sering dianggap sebagai salah satu kelemahan JavaScript, model Inheritance prototype sebenarnya lebih hebat daripada model klasiknya. Hal ini, misalnya, cukup sepele untuk membangun model klasik di atas model prototipal.

+ +

Inheritance dengan prototype chain

+ +

Meng-Inheriting properti

+ +

JavaScript objects are dynamic "bags" of properties (referred to as own properties). JavaScript objects have a link to a prototype object. When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached.

+ +
+

Following the ECMAScript standard, the notation someObject.[[Prototype]] is used to designate the prototype of someObject. Since ECMAScript 2015, the [[Prototype]] is accessed using the accessors {{jsxref("Object.getPrototypeOf()")}} and {{jsxref("Object.setPrototypeOf()")}}. This is equivalent to the JavaScript property __proto__ which is non-standard but de-facto implemented by many browsers.

+ +

It should not be confused with the func.prototype property of functions, which instead specifies the [[Prototype]] to be assigned to all instances of objects created by the given function when used as a constructor. The Object.prototype property represents the {{jsxref("Object")}} prototype object.

+
+ +

Here is what happens when trying to access a property:

+ +
// Let's assume we have object o, with its own properties a and b:
+// {a: 1, b: 2}
+// o.[[Prototype]] has properties b and c:
+// {b: 3, c: 4}
+// Finally, o.[[Prototype]].[[Prototype]] is null.
+// This is the end of the prototype chain, as null,
+// by definition, has no [[Prototype]].
+// Thus, the full prototype chain looks like:
+// {a: 1, b: 2} ---> {b: 3, c: 4} ---> null
+
+console.log(o.a); // 1
+// Is there an 'a' own property on o? Yes, and its value is 1.
+
+console.log(o.b); // 2
+// Is there a 'b' own property on o? Yes, and its value is 2.
+// The prototype also has a 'b' property, but it's not visited.
+// This is called "property shadowing."
+
+console.log(o.c); // 4
+// Is there a 'c' own property on o? No, check its prototype.
+// Is there a 'c' own property on o.[[Prototype]]? Yes, its value is 4.
+
+console.log(o.d); // undefined
+// Is there a 'd' own property on o? No, check its prototype.
+// Is there a 'd' own property on o.[[Prototype]]? No, check its prototype.
+// o.[[Prototype]].[[Prototype]] is null, stop searching,
+// no property found, return undefined.
+
+ +

Setting a property to an object creates an own property. The only exception to the getting and setting behavior rules is when there is an inherited property with a getter or a setter.

+ +

Inheriting "methods"

+ +

JavaScript does not have "methods" in the form that class-based languages define them. In JavaScript, any function can be added to an object in the form of a property. An inherited function acts just as any other property, including property shadowing as shown above (in this case, a form of method overriding).

+ +

When an inherited function is executed, the value of this points to the inheriting object, not to the prototype object where the function is an own property.

+ +
var o = {
+  a: 2,
+  m: function() {
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// When calling o.m in this case, 'this' refers to o
+
+var p = Object.create(o);
+// p is an object that inherits from o
+
+p.a = 4; // creates an own property 'a' on p
+console.log(p.m()); // 5
+// when p.m is called, 'this' refers to p.
+// So when p inherits the function m of o,
+// 'this.a' means p.a, the own property 'a' of p
+
+ +

Different ways to create objects and the resulting prototype chain

+ +

Objects created with syntax constructs

+ +
var o = {a: 1};
+
+// The newly created object o has Object.prototype as its [[Prototype]]
+// o has no own property named 'hasOwnProperty'
+// hasOwnProperty is an own property of Object.prototype.
+// So o inherits hasOwnProperty from Object.prototype
+// Object.prototype has null as its prototype.
+// o ---> Object.prototype ---> null
+
+var b = ['yo', 'whadup', '?'];
+
+// Arrays inherit from Array.prototype
+// (which has methods indexOf, forEach, etc.)
+// The prototype chain looks like:
+// b ---> Array.prototype ---> Object.prototype ---> null
+
+function f() {
+  return 2;
+}
+
+// Functions inherit from Function.prototype
+// (which has methods call, bind, etc.)
+// f ---> Function.prototype ---> Object.prototype ---> null
+
+ +

With a constructor

+ +

A "constructor" in JavaScript is "just" a function that happens to be called with the new operator.

+ +
function Graph() {
+  this.vertices = [];
+  this.edges = [];
+}
+
+Graph.prototype = {
+  addVertex: function(v) {
+    this.vertices.push(v);
+  }
+};
+
+var g = new Graph();
+// g is an object with own properties 'vertices' and 'edges'.
+// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed.
+
+ +

With Object.create

+ +

ECMAScript 5 introduced a new method: {{jsxref("Object.create()")}}. Calling this method creates a new object. The prototype of this object is the first argument of the function:

+ +
var a = {a: 1};
+// a ---> Object.prototype ---> null
+
+var b = Object.create(a);
+// b ---> a ---> Object.prototype ---> null
+console.log(b.a); // 1 (inherited)
+
+var c = Object.create(b);
+// c ---> b ---> a ---> Object.prototype ---> null
+
+var d = Object.create(null);
+// d ---> null
+console.log(d.hasOwnProperty);
+// undefined, because d doesn't inherit from Object.prototype
+
+ +
+

With the class keyword

+ +

ECMAScript 2015 introduced a new set of keywords implementing classes. Although these constructs look like those familiar to developers of class-based languages, they are not the same. JavaScript remains prototype-based. The new keywords include {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, and {{jsxref("Operators/super", "super")}}.

+ +
'use strict';
+
+class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(sideLength) {
+    super(sideLength, sideLength);
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set sideLength(newLength) {
+    this.height = newLength;
+    this.width = newLength;
+  }
+}
+
+var square = new Square(2);
+
+ +

Performance

+ +

The lookup time for properties that are high up on the prototype chain can have a negative impact on performance, and this may be significant in code where performance is critical. Additionally, trying to access nonexistent properties will always traverse the full prototype chain.

+ +

Also, when iterating over the properties of an object, every enumerable property that is on the prototype chain will be enumerated.To check whether an object has a property defined on itself and not somewhere on its prototype chain, it is necessary to use the hasOwnProperty method which all objects inherit from Object.prototype. To give you a concrete example, let's take the above graph example code to illustrate it:

+ +
console.log(g.hasOwnProperty('vertices'));
+// true
+
+console.log(g.hasOwnProperty('nope'));
+// false
+
+console.log(g.hasOwnProperty('addVertex'));
+// false
+
+console.log(g.__proto__.hasOwnProperty('addVertex'));
+// true
+
+ +

hasOwnProperty is the only thing in JavaScript which deals with properties and does not traverse the prototype chain.

+ +

Note: It is not enough to check whether a property is undefined. The property might very well exist, but its value just happens to be set to undefined.

+
+ +

Bad practice: Extension of native prototypes

+ +

One mis-feature that is often used is to extend Object.prototype or one of the other built-in prototypes.

+ +

This technique is called monkey patching and breaks encapsulation. While used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional non-standard functionality.

+ +

The only good reason for extending a built-in prototype is to backport the features of newer JavaScript engines, like Array.forEach.

+ +

Example

+ +

B shall inherit from A:

+ +
function A(a) {
+  this.varA = a;
+}
+
+// What is the purpose of including varA in the prototype when A.prototype.varA will always be shadowed by
+// this.varA, given the definition of function A above?
+A.prototype = {
+  varA: null,  // Shouldn't we strike varA from the prototype as doing nothing?
+      // perhaps intended as an optimization to allocate space in hidden classes?
+      // https://developers.google.com/speed/articles/optimizing-javascript#Initializing-instance-variables
+      // would be valid if varA wasn't being initialized uniquely for each instance
+  doSomething: function() {
+    // ...
+  }
+};
+
+function B(a, b) {
+  A.call(this, a);
+  this.varB = b;
+}
+B.prototype = Object.create(A.prototype, {
+  varB: {
+    value: null,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  },
+  doSomething: {
+    value: function() { // override
+      A.prototype.doSomething.apply(this, arguments); // call super
+      // ...
+    },
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }
+});
+B.prototype.constructor = B;
+
+var b = new B();
+b.doSomething();
+
+ +

The important parts are:

+ + + +

prototype and Object.getPrototypeOf

+ +

JavaScript is a bit confusing for developers coming from Java or C++, as it's all dynamic, all runtime, and it has no classes at all. It's all just instances (objects). Even the "classes" we simulate are just a function object.

+ +

You probably already noticed that our function A has a special property called prototype. This special property works with the JavaScript new operator. The reference to the prototype object is copied to the internal [[Prototype]] property of the new instance. For example, when you do var a1 = new A(), JavaScript (after creating the object in memory and before running function A() with this defined to it) sets a1.[[Prototype]] = A.prototype. When you then access properties of the instance, JavaScript first checks whether they exist on that object directly, and if not, it looks in [[Prototype]]. This means that all the stuff you define in prototype is effectively shared by all instances, and you can even later change parts of prototype and have the changes appear in all existing instances, if you wanted to.

+ +

If, in the example above, you do var a1 = new A(); var a2 = new A(); then a1.doSomething would actually refer to Object.getPrototypeOf(a1).doSomething, which is the same as the A.prototype.doSomething you defined, i.e. Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething.

+ +

In short, prototype is for types, while Object.getPrototypeOf() is the same for instances.

+ +

[[Prototype]] is looked at recursively, i.e. a1.doSomething, Object.getPrototypeOf(a1).doSomething, Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething etc., until it's found or Object.getPrototypeOf returns null.

+ +

So, when you call

+ +
var o = new Foo();
+ +

JavaScript actually just does

+ +
var o = new Object();
+o.[[Prototype]] = Foo.prototype;
+Foo.call(o);
+ +

(or something like that) and when you later do

+ +
o.someProp;
+ +

it checks whether o has a property someProp. If not, it checks Object.getPrototypeOf(o).someProp, and if that doesn't exist it checks Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp, and so on.

+ +
+

In conclusion

+ +

It is essential to understand the prototypal inheritance model before writing complex code that makes use of it. Also, be aware of the length of the prototype chains in your code and break them up if necessary to avoid possible performance problems. Further, the native prototypes should never be extended unless it is for the sake of compatibility with newer JavaScript features.

+
diff --git a/files/id/web/javascript/inheritance_dan_prototype_chain/index.html b/files/id/web/javascript/inheritance_dan_prototype_chain/index.html deleted file mode 100644 index 49a0100ed8..0000000000 --- a/files/id/web/javascript/inheritance_dan_prototype_chain/index.html +++ /dev/null @@ -1,304 +0,0 @@ ---- -title: Inheritance dan prototype chain -slug: Web/JavaScript/Inheritance_dan_prototype_chain -translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain ---- -
{{jsSidebar("Advanced")}}
- -

JavaScript sedikit membingungkan bagi pengembang yang berpengalaman di pemrograman berbasis class (seperti java dan C++), sebagai bahasa dinamis dan tidak mendukung implementasi class lihat( keyword class dikenalkan pada ES2015, namun terkesan berlebihan, JavaScript merupakan bahasa berbasis prototype).

- -

Ketika menggunakan inheritance, JavaScript hanya memiliki satu construct: objek. Setiap objek memiliki sebuah private property ( berkenaan tentang [[Prototype]] ) yang memegang jalinan ke objek lain yang memanggil prototype tersebut. Prototype objek tersebut memiliki prototype sendiri, dan seterusnya hingga objek mencapai prototipe null. Dengan definisi, null tidak lagi memiliki prototype, dan berperan sebagai hubungan terakhir dari prototype chain.

- -

Hampir seluruh objek pada JavaScript merupakan instance dari {{jsxref("Object")}} dimana berada di atas prototype chain.

- -

Meskipun hal ini sering dianggap sebagai salah satu kelemahan JavaScript, model Inheritance prototype sebenarnya lebih hebat daripada model klasiknya. Hal ini, misalnya, cukup sepele untuk membangun model klasik di atas model prototipal.

- -

Inheritance dengan prototype chain

- -

Meng-Inheriting properti

- -

JavaScript objects are dynamic "bags" of properties (referred to as own properties). JavaScript objects have a link to a prototype object. When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached.

- -
-

Following the ECMAScript standard, the notation someObject.[[Prototype]] is used to designate the prototype of someObject. Since ECMAScript 2015, the [[Prototype]] is accessed using the accessors {{jsxref("Object.getPrototypeOf()")}} and {{jsxref("Object.setPrototypeOf()")}}. This is equivalent to the JavaScript property __proto__ which is non-standard but de-facto implemented by many browsers.

- -

It should not be confused with the func.prototype property of functions, which instead specifies the [[Prototype]] to be assigned to all instances of objects created by the given function when used as a constructor. The Object.prototype property represents the {{jsxref("Object")}} prototype object.

-
- -

Here is what happens when trying to access a property:

- -
// Let's assume we have object o, with its own properties a and b:
-// {a: 1, b: 2}
-// o.[[Prototype]] has properties b and c:
-// {b: 3, c: 4}
-// Finally, o.[[Prototype]].[[Prototype]] is null.
-// This is the end of the prototype chain, as null,
-// by definition, has no [[Prototype]].
-// Thus, the full prototype chain looks like:
-// {a: 1, b: 2} ---> {b: 3, c: 4} ---> null
-
-console.log(o.a); // 1
-// Is there an 'a' own property on o? Yes, and its value is 1.
-
-console.log(o.b); // 2
-// Is there a 'b' own property on o? Yes, and its value is 2.
-// The prototype also has a 'b' property, but it's not visited.
-// This is called "property shadowing."
-
-console.log(o.c); // 4
-// Is there a 'c' own property on o? No, check its prototype.
-// Is there a 'c' own property on o.[[Prototype]]? Yes, its value is 4.
-
-console.log(o.d); // undefined
-// Is there a 'd' own property on o? No, check its prototype.
-// Is there a 'd' own property on o.[[Prototype]]? No, check its prototype.
-// o.[[Prototype]].[[Prototype]] is null, stop searching,
-// no property found, return undefined.
-
- -

Setting a property to an object creates an own property. The only exception to the getting and setting behavior rules is when there is an inherited property with a getter or a setter.

- -

Inheriting "methods"

- -

JavaScript does not have "methods" in the form that class-based languages define them. In JavaScript, any function can be added to an object in the form of a property. An inherited function acts just as any other property, including property shadowing as shown above (in this case, a form of method overriding).

- -

When an inherited function is executed, the value of this points to the inheriting object, not to the prototype object where the function is an own property.

- -
var o = {
-  a: 2,
-  m: function() {
-    return this.a + 1;
-  }
-};
-
-console.log(o.m()); // 3
-// When calling o.m in this case, 'this' refers to o
-
-var p = Object.create(o);
-// p is an object that inherits from o
-
-p.a = 4; // creates an own property 'a' on p
-console.log(p.m()); // 5
-// when p.m is called, 'this' refers to p.
-// So when p inherits the function m of o,
-// 'this.a' means p.a, the own property 'a' of p
-
- -

Different ways to create objects and the resulting prototype chain

- -

Objects created with syntax constructs

- -
var o = {a: 1};
-
-// The newly created object o has Object.prototype as its [[Prototype]]
-// o has no own property named 'hasOwnProperty'
-// hasOwnProperty is an own property of Object.prototype.
-// So o inherits hasOwnProperty from Object.prototype
-// Object.prototype has null as its prototype.
-// o ---> Object.prototype ---> null
-
-var b = ['yo', 'whadup', '?'];
-
-// Arrays inherit from Array.prototype
-// (which has methods indexOf, forEach, etc.)
-// The prototype chain looks like:
-// b ---> Array.prototype ---> Object.prototype ---> null
-
-function f() {
-  return 2;
-}
-
-// Functions inherit from Function.prototype
-// (which has methods call, bind, etc.)
-// f ---> Function.prototype ---> Object.prototype ---> null
-
- -

With a constructor

- -

A "constructor" in JavaScript is "just" a function that happens to be called with the new operator.

- -
function Graph() {
-  this.vertices = [];
-  this.edges = [];
-}
-
-Graph.prototype = {
-  addVertex: function(v) {
-    this.vertices.push(v);
-  }
-};
-
-var g = new Graph();
-// g is an object with own properties 'vertices' and 'edges'.
-// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed.
-
- -

With Object.create

- -

ECMAScript 5 introduced a new method: {{jsxref("Object.create()")}}. Calling this method creates a new object. The prototype of this object is the first argument of the function:

- -
var a = {a: 1};
-// a ---> Object.prototype ---> null
-
-var b = Object.create(a);
-// b ---> a ---> Object.prototype ---> null
-console.log(b.a); // 1 (inherited)
-
-var c = Object.create(b);
-// c ---> b ---> a ---> Object.prototype ---> null
-
-var d = Object.create(null);
-// d ---> null
-console.log(d.hasOwnProperty);
-// undefined, because d doesn't inherit from Object.prototype
-
- -
-

With the class keyword

- -

ECMAScript 2015 introduced a new set of keywords implementing classes. Although these constructs look like those familiar to developers of class-based languages, they are not the same. JavaScript remains prototype-based. The new keywords include {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, and {{jsxref("Operators/super", "super")}}.

- -
'use strict';
-
-class Polygon {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-}
-
-class Square extends Polygon {
-  constructor(sideLength) {
-    super(sideLength, sideLength);
-  }
-  get area() {
-    return this.height * this.width;
-  }
-  set sideLength(newLength) {
-    this.height = newLength;
-    this.width = newLength;
-  }
-}
-
-var square = new Square(2);
-
- -

Performance

- -

The lookup time for properties that are high up on the prototype chain can have a negative impact on performance, and this may be significant in code where performance is critical. Additionally, trying to access nonexistent properties will always traverse the full prototype chain.

- -

Also, when iterating over the properties of an object, every enumerable property that is on the prototype chain will be enumerated.To check whether an object has a property defined on itself and not somewhere on its prototype chain, it is necessary to use the hasOwnProperty method which all objects inherit from Object.prototype. To give you a concrete example, let's take the above graph example code to illustrate it:

- -
console.log(g.hasOwnProperty('vertices'));
-// true
-
-console.log(g.hasOwnProperty('nope'));
-// false
-
-console.log(g.hasOwnProperty('addVertex'));
-// false
-
-console.log(g.__proto__.hasOwnProperty('addVertex'));
-// true
-
- -

hasOwnProperty is the only thing in JavaScript which deals with properties and does not traverse the prototype chain.

- -

Note: It is not enough to check whether a property is undefined. The property might very well exist, but its value just happens to be set to undefined.

-
- -

Bad practice: Extension of native prototypes

- -

One mis-feature that is often used is to extend Object.prototype or one of the other built-in prototypes.

- -

This technique is called monkey patching and breaks encapsulation. While used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional non-standard functionality.

- -

The only good reason for extending a built-in prototype is to backport the features of newer JavaScript engines, like Array.forEach.

- -

Example

- -

B shall inherit from A:

- -
function A(a) {
-  this.varA = a;
-}
-
-// What is the purpose of including varA in the prototype when A.prototype.varA will always be shadowed by
-// this.varA, given the definition of function A above?
-A.prototype = {
-  varA: null,  // Shouldn't we strike varA from the prototype as doing nothing?
-      // perhaps intended as an optimization to allocate space in hidden classes?
-      // https://developers.google.com/speed/articles/optimizing-javascript#Initializing-instance-variables
-      // would be valid if varA wasn't being initialized uniquely for each instance
-  doSomething: function() {
-    // ...
-  }
-};
-
-function B(a, b) {
-  A.call(this, a);
-  this.varB = b;
-}
-B.prototype = Object.create(A.prototype, {
-  varB: {
-    value: null,
-    enumerable: true,
-    configurable: true,
-    writable: true
-  },
-  doSomething: {
-    value: function() { // override
-      A.prototype.doSomething.apply(this, arguments); // call super
-      // ...
-    },
-    enumerable: true,
-    configurable: true,
-    writable: true
-  }
-});
-B.prototype.constructor = B;
-
-var b = new B();
-b.doSomething();
-
- -

The important parts are:

- - - -

prototype and Object.getPrototypeOf

- -

JavaScript is a bit confusing for developers coming from Java or C++, as it's all dynamic, all runtime, and it has no classes at all. It's all just instances (objects). Even the "classes" we simulate are just a function object.

- -

You probably already noticed that our function A has a special property called prototype. This special property works with the JavaScript new operator. The reference to the prototype object is copied to the internal [[Prototype]] property of the new instance. For example, when you do var a1 = new A(), JavaScript (after creating the object in memory and before running function A() with this defined to it) sets a1.[[Prototype]] = A.prototype. When you then access properties of the instance, JavaScript first checks whether they exist on that object directly, and if not, it looks in [[Prototype]]. This means that all the stuff you define in prototype is effectively shared by all instances, and you can even later change parts of prototype and have the changes appear in all existing instances, if you wanted to.

- -

If, in the example above, you do var a1 = new A(); var a2 = new A(); then a1.doSomething would actually refer to Object.getPrototypeOf(a1).doSomething, which is the same as the A.prototype.doSomething you defined, i.e. Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething.

- -

In short, prototype is for types, while Object.getPrototypeOf() is the same for instances.

- -

[[Prototype]] is looked at recursively, i.e. a1.doSomething, Object.getPrototypeOf(a1).doSomething, Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething etc., until it's found or Object.getPrototypeOf returns null.

- -

So, when you call

- -
var o = new Foo();
- -

JavaScript actually just does

- -
var o = new Object();
-o.[[Prototype]] = Foo.prototype;
-Foo.call(o);
- -

(or something like that) and when you later do

- -
o.someProp;
- -

it checks whether o has a property someProp. If not, it checks Object.getPrototypeOf(o).someProp, and if that doesn't exist it checks Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp, and so on.

- -
-

In conclusion

- -

It is essential to understand the prototypal inheritance model before writing complex code that makes use of it. Also, be aware of the length of the prototype chains in your code and break them up if necessary to avoid possible performance problems. Further, the native prototypes should never be extended unless it is for the sake of compatibility with newer JavaScript features.

-
diff --git a/files/id/web/javascript/javascript_technologies_overview/index.html b/files/id/web/javascript/javascript_technologies_overview/index.html new file mode 100644 index 0000000000..adb6ec5a68 --- /dev/null +++ b/files/id/web/javascript/javascript_technologies_overview/index.html @@ -0,0 +1,87 @@ +--- +title: Ikhtisar Teknologi JavaScript +slug: Web/JavaScript/sekilas_teknologi_JavaScript +translation_of: Web/JavaScript/JavaScript_technologies_overview +--- +
{{JsSidebar("Introductory")}}
+ +

Pengantar

+ +

Jika HTML untuk mengatur struktur dan konten dari halaman web dan CSS untuk menetapkan format dan tampilannya, maka JavaScript digunakan untuk menambah interaksi pada halaman web dan menciptakan aplikasi web yang kaya.

+ +

Namun, istilah "JavaScript" seperti yang dikenal pada konteks browser web berisi beberapa elemen yang sangat berbeda. Salah satunya adalah bahasa intinya (ECMAScript), yang lainnya adalah koleksi dari Web APIs, termasuk DOM (Document Object Model).

+ +

Bahasa inti (ECMAScript) JavaScript

+ +

Bahasa inti dari JavaScript distandarisasi oleh komite ECMA TC39 sebagai bahasa yang bernama ECMAScript.

+ +

Bahasa inti ini juga digunakan pada lingkungan non-browser, misalnya node.js.

+ +

Apa yang termasuk dalam lingkup ECMAScript?

+ +

Diantaranya, ECMAScript menetapkan:

+ + + +

Dukungan browser

+ +

Pada Oktober 2016, versi terbaru dari sebagian besar browser Web sudah menerapkan ECMAScript 5.1 dan ECMAScript 2015, namun versi yang lebih lama (yang masih digunakan) hanya menerapkan ECMAScript 5.

+ +

Masa depan

+ +

ECMAScript Edisi ke-6 mayor telah secara resmi disetujui dan diumumkan sebagai standar pada 17 Juni 1015 oleh ECMA General Assembly. Sejak saat itu Edisi ECMAScript diumumkan secara tahunan.

+ +

API Internasionalisasi

+ +

Spesifikasi API Internasionalisasi ECMAScript merupakan tambahan dari Spesifikasi Bahasa ECMAScript, yang juga distandarisasi oleh Ecma TC39. API internasionalisasi menyediakan kolasi (perbandingan string), format angka, format tanggal dan jam untuk aplikasi JavaScript, memungkinkan aplikasi memilih bahasa dan menyesuaikan fungsi sesuai kebutuhannya. Standar awal telah disetujui pada Desember 2012; status impementasinya dalam browser dicatat di dokumentasi Intl object. Saat ini spesifikasi Internasionalisasi juga disahkan secara tahunan dan browser secara konsisten meningkatkan implementasinya.

+ +

API DOM

+ +

WebIDL

+ +

WebIDL specification memberikan perekat antara teknologi DOM dan ECMAScript.

+ +

Inti dari DOM

+ +

Document Object Model (DOM) adalah bahasa konvensi independen lintas platform untuk mewakili dan berinteraksi dengan objects dalam dokumen HTML, XHTML dan XML. Objects didalam DOM tree dapat dialamatkan dan dimanipulasi dengan menggunakan methods pada objects. Core Document Object Model yang distandarisasi oleh {{glossary("W3C")}}, menetapkan antarmuka bahasa-agnostik untuk mengabstaraksi dokumen HTML dan XML sebagai objects, dan juga menetapkan mekanisme untuk memanipulasi abstraksi ini. Diantara yang ditetapkan oleh DOM, kita dapat menemukan:

+ + + +

Dari sudut pandang ECMAScript, objects yang didefinisikan di spesifikasi DOM disebut "host objects".

+ +

HTML DOM

+ +

Bahasa markup Web (HTML) yang ditetapkan dari sisi DOM. Seperti dalam konsep abstrak yang dibahas diatas pada Inti DOM, HTML juga didefinisikan sebagai sebuah elemen. The HTML DOM menyertakan properti className pada elemen HTML, or APIs seperti {{ domxref("document.body") }}.

+ +

Spesifikasi HTML juga menetapkan batasan pada dokumen; misalnya, ia memerlukan semua elemen anak dari sebuah ul untuk mewakili sebuah daftar tak urut, elemen li untuk mewakili daftar item. Secara umum, ia juga melarang penggunaan elemen dan atribut yang tidak didefinisikan dalam standar.

+ +

Ingin mengetahui Document object, Window object, dan elemen DOM lainnya? Baca DOM documentation.

+ +

API penting lainnya

+ + + +

Dukungan browser

+ +

Seperti kata pengembang web yang berpengalaman, DOM berantakan. Dukungan fitur-fitur DOM antar browser bervarasi, terutama disebabkan karena banyak fitur yang penting dari DOM sangat tidak jelas, spesifikasi (jika ada) dan browser web yang berbeda menambahkan fitur yang tidak kompatibel untuk overlapping use cases (misalnya Internet Explorer event model). Pada Juni 2011, W3C dan khususnya WHATWG menetapkan fitur-fitur lama secara rinci untuk meningkatkan interoperabilitas, dan browser pada akhirnya dapat meningkatkan implementasi mereka berdasarkan spesifikasi ini.

+ +

Sebuah teknik umum, meskipun mungkin bukan yang paling dapat diandalkan, pendekatan kompatibilitas lintas browser adalah dengan menggunakan pustaka JavaScript, yang menggunakan fitur DOM abstrak untuk menjaga API mereka tetap bekerja di browser yang berbeda. Beberapa framework yang paling banyak digunakan adalah jQuery, prototype, dan YUI.

diff --git a/files/id/web/javascript/panduan/closures/index.html b/files/id/web/javascript/panduan/closures/index.html deleted file mode 100644 index 73cdbb7e15..0000000000 --- a/files/id/web/javascript/panduan/closures/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Closures -slug: Web/JavaScript/Panduan/Closures -translation_of: Web/JavaScript/Closures ---- -

Closure adalah fungsi yang merujuk kepada variabel yang mandiri (bebas). 

- -

Dengan kata lain, fungsi yang di definisikan di dalam closure 'mengingat' lingkungan dimana closure ini didefinisikan. 

- -

Lihat contoh berikut:

- -
-
function init() {
-    var name = "Mozilla"; // name adalah sebuah lokal variabel yang dibuat oleh init
-    function displayName() { // displayName() adalah fungsi internal, sebuah closure
-        alert (name); // displayName() menggunakan variabel yang dideklarasikan pada fungsi induknya
-    }
-    displayName();
-}
-init();
-
-
- -

init() membuat sebuah lokal variabel name dan kemudian memanggil fungsi displayName(). displayName() adalah fungsi internal yang didefinisikan didalam init() dan hanya dapat diakses di dalam fungsi tersebut. displayName() tidak memiliki lokal variabelnya sendiri, namun fungsi ini memiliki akses ke variabel diluar fungsinya dan dapat menggunakan variabel name tersebut yang telah di deklarasikan di fungsi induknya.

- -

Jalankan kode dan perhatikan bahwa alert() dapat menampilkan isi dari variabel name, dimana variabel tersebut dideklarasikan pada fungsi induknya. Ini adalah sebuah contoh dari ruang lingkup leksikal (lexical scoping), yang menunjukan bagaimana cara javascript mencari variabel. Di Javascript lokasi dimana variabel tersebut dideklarasikan di dalam source code menentukan dimana variabel itu dapat diakses. Nested functions memiliki akses pada variabel yang dideklarasikan pada ruang lingkup induknya.

- -

Lihat contoh berikut:

- -
function makeFunc() {
-  var name = "Mozilla";
-  function displayName() {
-    alert(name);
-  }
-  return displayName;
-}
-
-var myFunc = makeFunc();
-myFunc();
-
- -

Jika kamu menjalankan kode ini, kode ini akan memiliki efek yang sama seperti contoh sebelumnya init(): teks "Mozilla" akan muncul di JavaScript alert box. Yang membedakan dan menarik adalah fungsi internal displayName() di kembalikan terlebih dahulu ke fungsi di luar sebelum di eksekusi.

- -

Jika dilihat ini agak aneh karena normalnya pada bahasa pemrograman lain, variabel lokal di dalam sebuah fungsi hanya ada saat fungsi tersebut dieksekusi. Sehingga saat makeFunc() selesai dieksekusi, sewajarnya variabel name ini tidak dapat diakses lagi. Namun, karena kode ini masih berjalan normal, ini adalah hal yang berbeda di Javascript.

- -

Alasannya adalah fungsi tersebut telah menjadi closure di javascript. Closure adalah kombinasi dari fungsi dan lingkungan leksikal dimana fungsi itu di deklarasikan. Lingkungan ini terdiri dari lokal variabel yang berada di ruang lingkup yang sama saat closure dibuat. Pada kasus ini, myFunc bereferensi kepada fungsi displayName yang telah dibuat ketika makeFunc dijalankan. Fungsi displayName akan tepat menjaga akses ke lingkungan leksikalnya, dimana variabel name ini aktif. Untuk alasan inilah, ketika myFunc di panggil, variabel name tetap dapat digunakan dan "Mozilla" dikirim ke alert box.

- -

Berikut adalah contoh menarik yang lainnya — fungsi makeAdder :

- -
function makeAdder(x) {
-  return function(y) {
-    return x + y;
-  };
-}
-
-var add5 = makeAdder(5);
-var add10 = makeAdder(10);
-
-console.log(add5(2));  // 7
-console.log(add10(2)); // 12
-
- -

Di contoh ini, kita telah mendefinisikan fungsi makeAdder(x) dengan satu argument x dan mengembalikan sebuah fungsi baru. Fungsi yang dikembalikan membutuhkan satu argumen y, dan mengembalikan jumlah x dan y.

- -

Esensinya, makeAdder adalah fungsi untuk membuat fungsi (function factory) — fungsi ini akan membuat fungsi yang akan menambahkan angka melalui argumen. Pada contoh diatas kita membuat dua fungsi baru — yang satu menambahkan 5 melalui argumentnya dan satu menambahkan 10.

- -

add5 dan add10 keduanya adalah closure. Fungsi ini menggunakan definisi fungsi yang sama, namun menggunakan memori yang berbeda. Di add5 variabel x memiliki nilai 5. sedangkan di add10 variabel x memiliki nilai 10.

- -

Penggunaan Closure

- -

Setelah membaca teorinya muncul pertanyaan —  Apakah closure berguna? Mari kita lihat implikasi dari penggunaan closure. Closure membantu kita mengakses data (pada lingkungannya) dengan fungsi yang mengoperasikan data tersebut. Ini berhubungan dengan object oriented programming, dimana objek obj0ek tersebut membantu kita dalam menghubukan beberapa data (properti objek) dengan satu atau lebih method.

- -

Karena itu, kamu dapat menggunakan closure dimanapun kamu dapat menggunakan objek dengan satu method.

- -

Situasi ini banyak ditemui umumnya pada pengembangan web. Banyak kode yang kita tulis di Javascript berdasarkan event — kita definisikan terlebih dahulu sifat dari event ini, kemudian menempelkannya pada event yang di panggil oleh user (seperti klik atau penekanan tombol). Kode kita secara garis umum adalah sebuah callback: sebuah fungsi yang dijalankan untuk merespon sebuah event.

- -

Berikut adalah contoh: kita ingin menambahkan beberapa tombol di sebuah halaman yang akan merubah ukuran teks. Cara untuk melakukannya adalah dengan menentukan ukuran huruf dari elemen body dalam satuan unit pixel, kemudian menentukan ukuran elemen lain di halaman (seperti header) menggunakan satuan unit em:

- -
body {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 12px;
-}
-
-h1 {
-  font-size: 1.5em;
-}
-
-h2 {
-  font-size: 1.2em;
-}
-
- -

Tombol interaktif kita dapat merubah ukuran huruf dari elemen body dan elemen yang lainnya akan menyesuaikan.

- -

Berikut kode Javascript:

- -
function makeSizer(size) {
-  return function() {
-    document.body.style.fontSize = size + 'px';
-  };
-}
-
-var size12 = makeSizer(12);
-var size14 = makeSizer(14);
-var size16 = makeSizer(16);
-
- -

size12, size14, dan size16 adalah fungsi yang akan merubah ukuran teks body ke 12, 14, dan 16 pixel, secara berurutan. Kemudian kita tempelkan fungsi ini ke tombol (pada kasus ini adalah link) sebagai berikut:

- -
document.getElementById('size-12').onclick = size12;
-document.getElementById('size-14').onclick = size14;
-document.getElementById('size-16').onclick = size16;
-
- -
<a href="#" id="size-12">12</a>
-<a href="#" id="size-14">14</a>
-<a href="#" id="size-16">16</a>
-
- -

Lihat pada JSFiddle

- -

Emulating private methods with closures

- -

Languages such as Java provide the ability to declare methods private, meaning that they can only be called by other methods in the same class.

- -

JavaScript does not provide a native way of doing this, but it is possible to emulate private methods using closures. Private methods aren't just useful for restricting access to code: they also provide a powerful way of managing your global namespace, keeping non-essential methods from cluttering up the public interface to your code.

- -

Here's how to define some public functions that can access private functions and variables, using closures which is also known as the module pattern:

- -
var counter = (function() {
-  var privateCounter = 0;
-  function changeBy(val) {
-    privateCounter += val;
-  }
-  return {
-    increment: function() {
-      changeBy(1);
-    },
-    decrement: function() {
-      changeBy(-1);
-    },
-    value: function() {
-      return privateCounter;
-    }
-  };
-})();
-
-alert(counter.value()); /* Alerts 0 */
-counter.increment();
-counter.increment();
-alert(counter.value()); /* Alerts 2 */
-counter.decrement();
-alert(counter.value()); /* Alerts 1 */
-
- -

There's a lot going on here. In previous examples each closure has had its own environment; here we create a single environment which is shared by three functions: counter.increment, counter.decrement, and counter.value.

- -

The shared environment is created in the body of an anonymous function, which is executed as soon as it has been defined. The environment contains two private items: a variable called privateCounter and a function called changeBy. Neither of these private items can be accessed directly from outside the anonymous function. Instead, they must be accessed by the three public functions that are returned from the anonymous wrapper.

- -

Those three public functions are closures that share the same environment. Thanks to JavaScript's lexical scoping, they each have access to the privateCounter variable and changeBy function.

- -

You'll notice we're defining an anonymous function that creates a counter, and then we call it immediately and assign the result to the counter variable. We could store this function in a separate variable makeCounter and use it to create several counters.

- -
var makeCounter = function() {
-  var privateCounter = 0;
-  function changeBy(val) {
-    privateCounter += val;
-  }
-  return {
-    increment: function() {
-      changeBy(1);
-    },
-    decrement: function() {
-      changeBy(-1);
-    },
-    value: function() {
-      return privateCounter;
-    }
-  }
-};
-
-var counter1 = makeCounter();
-var counter2 = makeCounter();
-alert(counter1.value()); /* Alerts 0 */
-counter1.increment();
-counter1.increment();
-alert(counter1.value()); /* Alerts 2 */
-counter1.decrement();
-alert(counter1.value()); /* Alerts 1 */
-alert(counter2.value()); /* Alerts 0 */
-
- -

Notice how each of the two counters maintains its independence from the other. Its environment during the call of the makeCounter() function is different each time. The closure variable privateCounter contains a different instance each time.

- -

Using closures in this way provides a number of benefits that are normally associated with object oriented programming, in particular data hiding and encapsulation.

- -

Creating closures in loops: A common mistake

- -

Prior to the introduction of the let keyword in JavaScript 1.7, a common problem with closures occurred when they were created inside a loop. Consider the following example:

- -
<p id="help">Helpful notes will appear here</p>
-<p>E-mail: <input type="text" id="email" name="email"></p>
-<p>Name: <input type="text" id="name" name="name"></p>
-<p>Age: <input type="text" id="age" name="age"></p>
-
- -
function showHelp(help) {
-  document.getElementById('help').innerHTML = help;
-}
-
-function setupHelp() {
-  var helpText = [
-      {'id': 'email', 'help': 'Your e-mail address'},
-      {'id': 'name', 'help': 'Your full name'},
-      {'id': 'age', 'help': 'Your age (you must be over 16)'}
-    ];
-
-  for (var i = 0; i < helpText.length; i++) {
-    var item = helpText[i];
-    document.getElementById(item.id).onfocus = function() {
-      showHelp(item.help);
-    }
-  }
-}
-
-setupHelp();
-
- -

Lihat pada JSFiddle

- -

The helpText array defines three helpful hints, each associated with the ID of an input field in the document. The loop cycles through these definitions, hooking up an onfocus event to each one that shows the associated help method.

- -

If you try this code out, you'll see that it doesn't work as expected. No matter what field you focus on, the message about your age will be displayed.

- -

The reason for this is that the functions assigned to onfocus are closures; they consist of the function definition and the captured environment from the setupHelp function's scope. Three closures have been created, but each one shares the same single environment. By the time the onfocus callbacks are executed, the loop has run its course and the item variable (shared by all three closures) has been left pointing to the last entry in the helpText list.

- -

One solution in this case is to use more closures: in particular, to use a function factory as described earlier on:

- -
function showHelp(help) {
-  document.getElementById('help').innerHTML = help;
-}
-
-function makeHelpCallback(help) {
-  return function() {
-    showHelp(help);
-  };
-}
-
-function setupHelp() {
-  var helpText = [
-      {'id': 'email', 'help': 'Your e-mail address'},
-      {'id': 'name', 'help': 'Your full name'},
-      {'id': 'age', 'help': 'Your age (you must be over 16)'}
-    ];
-
-  for (var i = 0; i < helpText.length; i++) {
-    var item = helpText[i];
-    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
-  }
-}
-
-setupHelp();
-
- -

Lihat pada JSFiddle

- -

This works as expected. Rather than the callbacks all sharing a single environment, the makeHelpCallback function creates a new environment for each one in which help refers to the corresponding string from the helpText array.

- -

Performance considerations

- -

It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption.

- -

For instance, when creating a new object/class, methods should normally be associated to the object's prototype rather than defined into the object constructor. The reason is that whenever the constructor is called, the methods would get reassigned (that is, for every object creation).

- -

Consider the following impractical but demonstrative case:

- -
function MyObject(name, message) {
-  this.name = name.toString();
-  this.message = message.toString();
-  this.getName = function() {
-    return this.name;
-  };
-
-  this.getMessage = function() {
-    return this.message;
-  };
-}
-
- -

The previous code does not take advantage of the benefits of closures and thus could instead be formulated:

- -
function MyObject(name, message) {
-  this.name = name.toString();
-  this.message = message.toString();
-}
-MyObject.prototype = {
-  getName: function() {
-    return this.name;
-  },
-  getMessage: function() {
-    return this.message;
-  }
-};
-
- -

However, redefining the prototype is not recommended, so the following example is even better because it appends to the existing prototype:

- -
function MyObject(name, message) {
-  this.name = name.toString();
-  this.message = message.toString();
-}
-MyObject.prototype.getName = function() {
-  return this.name;
-};
-MyObject.prototype.getMessage = function() {
-  return this.message;
-};
-
- -

In the two previous examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation. See Details of the Object Model for more details.

- -

Expression closures

- -

This addition is nothing more than a shorthand for writing simple functions, giving the language something similar to a typical Lambda notation.

- -

JavaScript 1.7 and older:

- -
function(x) { return x * x; }
- -

JavaScript 1.8:

- -
function(x) x * x
- -

This syntax allows you to leave off the braces and 'return' statement - making them implicit. There is no added benefit to writing code in this manner, other than having it be syntactically shorter.

- -

Examples:

- -

A shorthand for binding event listeners:

- -
 document.addEventListener("click", function() false, true);
-
- -

Using this notation with some of the array functions from JavaScript 1.6:

- -
elems.some(function(elem) elem.type == "text");
diff --git a/files/id/web/javascript/panduan/index.html b/files/id/web/javascript/panduan/index.html deleted file mode 100644 index 491d4a4a84..0000000000 --- a/files/id/web/javascript/panduan/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Panduan JavaScript -slug: Web/JavaScript/Panduan -translation_of: Web/JavaScript/Guide ---- -
{{jsSidebar("JavaScript Guide")}}
- -

Pedoman javasript memberi tahu bagaimana menggunakan JavaScript dan memberikan penjelasan tentang bahasa javascript. Jika anda ingin memulai javascript atau programming secara umum, konsultasikan artikel di Area pembelajaran. Jika anda membutuhkan informasi lengkap tentang fitur silakan lihat  Referensi javaScript.

- -

Bagian

- -

Pedoman ini dibagi menjadi beberapa bagian:

- - - - - - - - - -

{{Next("Web/JavaScript/Guide/Introduction")}}

diff --git a/files/id/web/javascript/panduan/loops_and_iteration/index.html b/files/id/web/javascript/panduan/loops_and_iteration/index.html deleted file mode 100644 index 7fbb416c43..0000000000 --- a/files/id/web/javascript/panduan/loops_and_iteration/index.html +++ /dev/null @@ -1,330 +0,0 @@ ---- -title: Loops and iteration -slug: Web/JavaScript/Panduan/Loops_and_iteration -translation_of: Web/JavaScript/Guide/Loops_and_iteration ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
- -

Loop menawarkan cara cepat dan mudah untuk melakukan sesuatu secara berulang-ulang. Bab tentang Panduan JavaScript ini memperkenalkan berbagai pernyataan iterasi berbeda yang tersedia untuk JavaScript.

- -

Anda dapat menganggap loop sebagai versi permainan terkomputerisasi di mana Anda menyuruh seseorang untuk mengambil langkah X menuju satu arah lalu langkah Y ke arah yang lain; Sebagai contoh, gagasan "Pergilah lima langkah ke timur" dapat di ekspresikan dengan cara berikut sebagai sebuah loop (pengulangan):

- -
var langkah;
-for (langkah= 0; langkah< 5; langkah++) {
-  // berlari 5 kali, dengan nilai langkah 0 sampai 4.
-  console.log('Berjalan ke timur satu langkah');
-}
-
- -

Ada beberapa jenis loop yang berbeda, namun pada dasarnya semuanya melakukan hal yang sama, mereka mengulangi sebuah aksi beberapa kali (dan sebenarnya memungkinkan bahwa dapat saja menjadi nol). Berbagai mekanisme loop menawarkan berbagai cara untuk menentukan titik awal dan akhir perulangan. Ada berbagai situasi yang lebih mudah dikerjakan oleh sebuah tipe loop dibandingkan tipe (loop) yang lain.

- -

Pernyataan untuk loop yang disediakan dalam JavaScript adalah:

- - - -

for statement

- -

Sebuah {{jsxref("statements/for","for loop")}} mengulang hingga kondisi yang ditentukan evaluasinya menjadi salah/false.  for loop pada Javascript serupa dengan  for loop pada Java dan C. Sebuah statement (pernyataan) for   terlihat sebagai berikut:

- -
for ([initialExpression]; [condition];
-[incrementExpression]) statement
-
- -

Ketika sebuah for loop dieksekusi, Berikut ini akan terjadi:

- -
    -
  1. Ekspresi yang menginisialisasi yaitu initialExpression, Jika ada, maka akan di eksekusi. Ekspresi ini biasanya menginisialisasi satu atau lebih penghitung loop, tetapi sintaksnya memperbolehkan ekspresi dengan tingkat kerumitan apapun. Ekspresi ini juga bisa mendeklarasikan variabel.
    2. -
  2. Ekpresi condition di evaluasi. JIka value dari kondisi adalah true (benar), maka statement loop akan dieksekusi. Jika value dari condition false (salah), for loop akan dihentikan.  Jika ekspresi condition dihilangkan sama sekali, kondisinya diasumsikan benar.
    3. -
  3. Mengeksekusi Statement . Untuk mengeksekusi berbagai pernyataan, gunakanlah sebuah blok pernyataan ({ ... }) untuk mengelompokkan pernyataan-pernyataan tersebut.
    4. -
  4. Jika ada, ekspresi baru incrementExpression di eksekusi.
    5. -
  5. Kontrol kembali ke langkah ke-2.
    6. -
- -

Contoh

- -

function (fungsi) berikut memuat sebuah statement for yang menghitung angka dari opsi yang terpilih dalam sebuah daftar scrolling  (sebuah elemen {{HTMLElement("select")}} yang memperbolehkan berbagai pilihan). Statement for mendeklarasikan variable i dan menginisialisasinya ke nol. Ia memeriksa bahwa i lebih kecil dari nomor dari opsi dalam elemen <select> , menampilkan statement if yang berhasil, dan menaikan i satu setelah masing-masing lolos melewati loop.

- -
<form name="selectForm">
-  <p>
-    <label for="musicTypes">Choose some music types, then click the button below:</label>
-    <select id="musicTypes" name="musicTypes" multiple="multiple">
-      <option selected="selected">R&B</option>
-      <option>Jazz</option>
-      <option>Blues</option>
-      <option>New Age</option>
-      <option>Classical</option>
-      <option>Opera</option>
-    </select>
-  </p>
-  <p><input id="btn" type="button" value="How many are selected?" /></p>
-</form>
-
-<script>
-function howMany(selectObject) {
-  var numberSelected = 0;
-  for (var i = 0; i < selectObject.options.length; i++) {
-    if (selectObject.options[i].selected) {
-      numberSelected++;
-    }
-  }
-  return numberSelected;
-}
-
-var btn = document.getElementById('btn');
-btn.addEventListener('click', function() {
-  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes));
-});
-</script>
-
-
- -

do...while statement

- -

Pernyataan/statement {{jsxref("statements/do...while", "do...while")}} terus di ulangi sampai evaluasi kondisi bernilai false/salah. Sebuah do...while statement terlihat sebagai berikut:

- -
do
-  statement
-while (condition);
-
- -

statement di jalankan lebih dulu sebelum kondisi diperiksa. Untuk menjalankan banyak statements, gunakan statement blok ({ ... }) untuk membuat grup dari statement tersebut. Jika condition bernilai benar, maka statement akan dijalankan kembali. Kondisi diperiksa pada setiap akhir eksekusi. Ketika kondisi bernilai salah, eksekusi berhenti dan kontrol akan melewati pernyataan yang mengikuti do...while.

- -

Contoh

- -

Dalam contoh berikut, perulangan do di iterasi sekali dan di iterasi kembali sampai i tidak lagi kurang dari 5. 

- -
var i = 0;
-do {
-  i += 1;
-  console.log(i);
-} while (i < 5);
- -

while statement

- -

Sebuah statement {{jsxref("statements/while","while")}} di eksekusi pernyataan pernyataannya asalkan memenuhi syarat kondisinya yang bernilai true/benar. Sebuah statement  while terlihat sebagai berikut:

- -
while (condition)
-  statement
-
- -

Jika kondisi bernilai false/salah, statement dengan perulangan berhenti di eksekusi dan kontrol akan melewati statement yang mengikuti perulangan tersebut.

- -

Kondisi terjadi sebelum statement dalam perulangan di eksekusi. Jika kondisi bernilai true/benar, statement di eksekusi dan kondisi di uji kembali. Jika kondisi bernilai false/salah, eksekusi akan berhenti dan konrol lewat untuk statement yang mengikuti while.

- -

Untuk mengeksekusi banyak statement, gunakan blok statement ({ ... }) untuk mengelompokan banyak statement tersebut.

- -

Contoh 1

- -

Beikut perulangan while mengiterasi n selama n kurang dari tiga:

- -
var n = 0;
-var x = 0;
-while (n < 3) {
-  n++;
-  x += n;
-}
-
- -

Dengan setiap iterasi, perulangan akan menambahkan increments n dan menambahkan nilainya pada  x. Karena itu, x dan n mengambil nilai nilai berikut:

- - - -

Setelah melewati perulangan yang ketiga , kondisinya n < 3 tidak lagi bernilai true/benar, jadi perulangan di hentikan.

- -

Contoh 2

- -

Hindari perulangan tanpa batas. Pastikan kondisi dalam perulangan mendapatkan kondisi yang bernilai false/salah untuk berhenti, jika tidak perulangan tidak akan pernah berhenti. Statements dalam while berikut di eksekusi berulang kali selamanya karena kondisi tidak pernah mendapatkan nilai false/salah:

- -
while (true) {
-  console.log('Hello, world!');
-}
- -

labeled statement

- -

Sebuah {{jsxref("statements/label","label")}} menyediakan sebuah statement dengan pengenal yang memungkinkan Anda merujuknya di tempat lain dalam program Kamu. Untuk contohnya, Kamu dapat menggunakan label untuk mengidentifikasi pengulangan, lalu gunakan statement break atau continue untuk menunjukkan apakah suatu program harus memutuskan loop atau melanjutkan eksekusinya.

- -

Sintak dari statement berlabel terlihat seperti berikut:

- -
label :
-   statement
-
- -

Nilai dai sebuah label dapat berupa identifikasi JavaScript apa pun yang tidak dari kata  kunci yang ada pada javascript. statement
- yang Kamu identifikasi dengan label tersebut dapat berupa statement apa pun.

- -

Contoh

- -

Pada contoh ini, label markLoop mengidentifikasi sebuah perulangan while.

- -
markLoop:
-while (theMark == true) {
-   doSomething();
-}
- -

break statement

- -

Gunakan {{jsxref("statements/break","break")}} statement untuk menghentikan perulangan, switch, atau konjungsi dengan statement yang memakai label.

- - - -

Sintak dari statement break terlihat seperti ini:

- -
break [label];
-
- -

Bentuk pertama sintak mengakhiri perulangan atau switch; Bentuk kedua sintak mengakhiri statement dari spesifik label.

- -

Contoh 1

- -

Contoh berikut mengiterasi melewati elemen-elemen dalam array sampai menemukan indeks elemen  yang bernilai dari theValue:

- -
for (var i = 0; i < a.length; i++) {
-  if (a[i] == theValue) {
-    break;
-  }
-}
- -

Contoh 2: Breaking pada sebuah label

- -
var x = 0;
-var z = 0;
-labelCancelLoops: while (true) {
-  console.log('Outer loops: ' + x);
-  x += 1;
-  z = 1;
-  while (true) {
-    console.log('Inner loops: ' + z);
-    z += 1;
-    if (z === 10 && x === 10) {
-      break labelCancelLoops;
-    } else if (z === 10) {
-      break;
-    }
-  }
-}
-
- -

continue statement

- -

Statement {{jsxref("statements/continue","continue")}} bisa digunakan untuk memulai lagi statement while, do-while, for, atau label.

- - - -

Sintak statement continue terlihat sebagai berikut:

- -
continue [label];
-
- -

Contoh 1

- -

Contoh berikut menunjukkan sebuah perulangan while dengan sebuah statement continue yang di eksekusi ketika niai dari i adalah tiga  Jadi, n mengambil nilai satu, tiga, tujuh dan dua belas.

- -
var i = 0;
-var n = 0;
-while (i < 5) {
-  i++;
-  if (i == 3) {
-    continue;
-  }
-  n += i;
-}
-
- -

Contoh 2

- -

Sebuah statement yang berlabel checkiandj berisikan sebuah statement berlabel checkj. Jika ada continue , Programnya akan menghentikan iterasi saat ini dari checkj dan memulai iterasi selanjutnya. Setiap kali continue ditemui, checkj  di iterasi kembali sampai kondisinya bernilai false/salah. Ketika bernilai false/salah, Sisa dari statement checkiandj sudah selesai, dan checkiandj di iterasi kembali sampai kondisi bernilai salah false. Ketika bernilai salah false , program melanjutkan pada statement yang mengikuti checkiandj.

- -

JIka continue dipunyai label dari checkiandj, program akan terus berlanjut ke bagian atas dari statement checkiandj .

- -
checkiandj:
-  while (i < 4) {
-    console.log(i);
-    i += 1;
-    checkj:
-      while (j > 4) {
-        console.log(j);
-        j -= 1;
-        if ((j % 2) == 0) {
-          continue checkj;
-        }
-        console.log(j + ' is odd.');
-      }
-      console.log('i = ' + i);
-      console.log('j = ' + j);
-  }
- -

for...in statement

- -

Statement {{jsxref("statements/for...in","for...in")}} mengiterasi sebuah variabel spesifik diatas properti enumerable dari sebuah objek. Untuk setiap properti yang berbeda, JavaScript mengeksekusi pernyataan pernyataan yang spesifik. Sebuah statement for...in terlihat sebagai berikut:

- -
for (variable in object) {
-  statements
-}
-
- -

Contoh

- -

Function/fungsi berikut mengambil argumentnya dari sebuah objek dan nama objek. Lalu dia di iterasi diatas semua property objek dan mengembalikan sebuah string yang mendaftarkan nama properti dan nilainya.

- -
function dump_props(obj, obj_name) {
-  var result = '';
-  for (var i in obj) {
-    result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
-  }
-  result += '<hr>';
-  return result;
-}
-
- -

Untuk sebuah objek car dengan property make dan model, result/hasil akan menjadi:

- -
car.make = Ford
-car.model = Mustang
-
- -

Arrays

- -

Meskipun mungkin menggunakan ini sebagai cara untuk melakukan iterasi di atas elemen {{jsxref("Array")}},statement for...in akan mengembalikan nilai nama property yang di tetapkan pengguna dalam penambahan numerik indek. Jadi lebih baik menggunakan tradisional perulangan {{jsxref("statements/for","for")}} dengan sebuah numerik indek ketika mengiterasi diatas array, karena statement  for...in mengiterasi diatas nama properti yang di tetapkan pengguna pada penambahan elemen array, Jika kamu merubah array, seperti menambahkan properti atau metode. 

- -

for...of statement

- -

Statement {{jsxref("statements/for...of","for...of")}} membuat sebuah iterasi perulangan diatas iterable objects (termasuk {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} object dan seterusnya), menjalankan hubungan iterasi khusus dengan statement yang akan dieksekusi untuk setiap nilai properti yang berbeda.

- -
for (variable of object) {
-  statement
-}
- -

Contoh berikut menampilkan perbedaan diantara sebuah perulangan for...of dan sebuah perulangan {{jsxref("statements/for...in","for...in")}}. Ketika for...in mengiterasi diatas nama-nama properti, for...of mengiterasi diatas nilai-nilai properti:

- -
let arr = [3, 5, 7];
-arr.foo = 'hello';
-
-for (let i in arr) {
-   console.log(i); // logs "0", "1", "2", "foo"
-}
-
-for (let i of arr) {
-   console.log(i); // logs 3, 5, 7
-}
-
- -

{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

diff --git a/files/id/web/javascript/panduan/numbers_and_dates/index.html b/files/id/web/javascript/panduan/numbers_and_dates/index.html deleted file mode 100644 index e9681b2adf..0000000000 --- a/files/id/web/javascript/panduan/numbers_and_dates/index.html +++ /dev/null @@ -1,376 +0,0 @@ ---- -title: Numbers and dates -slug: Web/JavaScript/Panduan/Numbers_and_dates -translation_of: Web/JavaScript/Guide/Numbers_and_dates ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}
- -

Pada Bab ini memperkenalkan cara menggunakan angka dan tanggal pada JavaScript.

- -

Angka

- -

Pada JavaScript, semua angka diimplementasikan kedalam double-precision 64-bit binary format IEEE 754 (mis. angka antara -(253 -1) dan 253 -1). Tidak ada jenis spesifik untuk integer. Selain bisa mewakili angka float, tipe data angka memiliki 3 nilai secara simbolik: +{{jsxref("Infinity")}}, -{{jsxref("Infinity")}}, dan {{jsxref("NaN")}} (bukan sebuah angka). Lihat juga JavaScript tipe data dan struktur untuk konteks dengan tipe data primitif JavaScript yang lain.

- -

Anda dapat menggunakan empat tipe angka literal: desimal, biner, oktal, dan heksadesimal.

- -

Angka Desimal

- -
1234567890
-42
-
-// Perhatikan ketika menggunakan angka berawalan nol:
-
-0888 // 888 diubah menjadi desimal
-0777 // diubah menjadi oktal pada non-strict mode (511 in decimal)
-
- -

Perhatikan bahwa desimal literal dapat dimulai dari nol(0) diikuti angka desimal yang lain, namun jika setiap angka setelah 0 lebih kecil dari 8, angkanya diubah menjadi oktal.

- -

Angka Biner

- -

Sintaks angka biner menggunakan angka nol diikuti dengan huruf kecil atau dengan huruf besar, huruf Latin "B" (0b atau 0B). Jika digit setelah 0b atau bukan 0 atau 1, menurut SyntaxError yang dilemparkan: "Missing binary digits after 0b".

- -
var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
-var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
-var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607
- -

Angka oktal

- -

Angka oktal menggunakan awalan angka nol. Jika digit setelah 0 berada diluar jangkauan 0 hinga 7, angka akan diintrepretasikan sebagai angka desimal.

- -
var n = 0755; // 493
-var m = 0644; // 420
-
- -

Mode ketat pada ECMAScript 5 melarang sintaks oktal. Oktal sintaks bukan bagian dari ECMAScript 5, namun didukung oleh semua peramban dengan cara awalan nomor oktal dengan angka nol: 0644 === 420 dan "\045" === "%". Pada ECMAScript 2015, angka oktal didukung jika diawali dengan 0o, e.g.: 

- -
var a = 0o10; // ES2015: 8
-
- -

Angka Heksadesimal

- -

Sintaks heksadesimal menggunakan awalan nol diikuti dengan huruf kecil atau huruf kapital Latin "X" (0x atau 0X). Jika digit setelah 0x berada diluar jangkauan (0123456789ABCDEF),  menurut SyntaxError yang dilemparkan: "Identifier starts immediately after numeric literal".

- -
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
-0x123456789ABCDEF   // 81985529216486900
-0XA                 // 10
-
- -

Eksponensial

- -
1E3   // 1000
-2e6   // 2000000
-0.1e2 // 10
- -

Angka object

- -

The built-in {{jsxref("Number")}} objek memiliki properti untuk numerik konstanta, seperti nilai maksimal, bukan-sebuah-angka, dan tak terhingga. Anda tidak dapat mengganti nilai dari properti tersebut dan anda dapat menggunakannya sebagai berikut:

- -
var biggestNum = Number.MAX_VALUE;
-var smallestNum = Number.MIN_VALUE;
-var infiniteNum = Number.POSITIVE_INFINITY;
-var negInfiniteNum = Number.NEGATIVE_INFINITY;
-var notANum = Number.NaN;
-
- -

Anda selalu mengacu pada properti dari objek angka yang telah ditentukan seperti yang ditunjukkan diatas, dan bukan sebagai properti objek angka yang anda tentukan.

- -

Tabel berikut meringkas sifat-sifat nomor object.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Properties of Number
PropertiDeskripsi
{{jsxref("Number.MAX_VALUE")}}Merepresantikan angka maksimal / terbesar
{{jsxref("Number.MIN_VALUE")}}Merepresantikan angka minimal / terkecil
{{jsxref("Number.NaN")}}Nilai spesial "bukan sebuah angka"
{{jsxref("Number.NEGATIVE_INFINITY")}}Nilai spesial negatif tak terhingga; dikembalikan pada overflow
{{jsxref("Number.POSITIVE_INFINITY")}}Nilai spesial positif tak terhingga; dikembalikan pada overflow
{{jsxref("Number.EPSILON")}}Perbedaan antara satu dan nilai terkecil lebih besar dari satu yang dapat direpresentasikan sebagai {{jsxref("Number")}}.
{{jsxref("Number.MIN_SAFE_INTEGER")}}Bilangan bulat aman minimum dalam JavaScript.
{{jsxref("Number.MAX_SAFE_INTEGER")}}Bilangan bulat aman maksimum dalam JavaScript.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Methods of Number
MethodDescription
{{jsxref("Number.parseFloat()")}}Parses a string argument and returns a floating point number.
- Same as the global {{jsxref("parseFloat", "parseFloat()")}} function.
{{jsxref("Number.parseInt()")}}Parses a string argument and returns an integer of the specified radix or base.
- Same as the global {{jsxref("parseInt", "parseInt()")}} function.
{{jsxref("Number.isFinite()")}}Determines whether the passed value is a finite number.
{{jsxref("Number.isInteger()")}}Determines whether the passed value is an integer.
{{jsxref("Number.isNaN()")}}Determines whether the passed value is {{jsxref("Global_Objects/NaN", "NaN")}}. More robust version of the original global {{jsxref("Global_Objects/isNaN", "isNaN()")}}.
{{jsxref("Number.isSafeInteger()")}}Determines whether the provided value is a number that is a safe integer.
- -

Prototipe Angka menyediakan metode-metode untuk menampilkan informasi dari objek angka dalam format bervariasi. Tabel berikut meringkas metode-metode prototipe angka.

- - - - - - - - - - - - - - - - - - - - - - - -
Methods of Number.prototype
MethodDescription
{{jsxref("Number.toExponential", "toExponential()")}}Mengembalikan string yang merepresentasikan nomor dalam notasi eksponensial.
{{jsxref("Number.toFixed", "toFixed()")}}Mengembalikan string yang merepresentasikan nomor dalam notasi fixed-point.
{{jsxref("Number.toPrecision", "toPrecision()")}}Mengembalikan string yang merepresentasikan nomor dalam notasi fixed-point yang lebih spesifik.
- -

Math object

- -

The built-in {{jsxref("Math")}} objek memiliki properti dan metode-metode untuk konstanta matematika dan fungsi-fungsi. Sebagai contoh, objek matematik PI properti memiliki nilai (3.141...), yang akan anda gunakan dalam aplikasi sebagai

- -
Math.PI
-
- -

Demikian pula, fungsi standard matematika merupakan metode-metode Math. termasuk trigonometri, logaritma, eksponensial, dan fungsi lainnya. Sebagai contoh, jika anda ingin menggunakan fungsi trigonometri sin, anda akan menulis

- -
Math.sin(1.56)
-
- -

Perhatikan bahwa semua metode trigonometri matematika menggunakan argumen dalam radian.

- -

Tabel berikut meringkas metode-metode objek matematik.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Methods of Math
MethodDescription
{{jsxref("Math.abs", "abs()")}}Nilai absolut
{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}Fungsi trigonometri standar; dengan argumen dalam radian.
{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}Fungsi trigonometri terbalik; mengembalikan nilai dalam radian.
{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}Fungsi hiperbolik. argumen dalam sudut hiperbolik.
{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}Fungsi hiperbolik terbalik. mengembalikan nilai dalam sudut hiperbolik.
-

{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}

- 		Fungsi eksponen dan logaritma.
{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}Mengembalikan angka bulat terkecil/terbesar kurang/lebih dari atau sama dengan pada sebuah argumen.
{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}Mengembalikan nilai minimum/maksimum sebuah koma terpisah dari angka sebagai argumen.
{{jsxref("Math.random", "random()")}}Megembalikan angka acak antara 0 dan 1.
{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},Fungsi pembulatan dan pemotongan.
{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}Akar kuadrat, akar pangkat tiga, akar kuadrat dari jumlah argumen persegi.
{{jsxref("Math.sign", "sign()")}}tanda sebuah angka, mengindikasikan angka apapun merupakan angka positif, negatif, atau nol.
{{jsxref("Math.clz32", "clz32()")}},
- {{jsxref("Math.imul", "imul()")}}		Angka yang dimulai dari nol bit dalam 32-bit.
- Hasil dari C-like 32-bit perkalian dari dua argumen.
- -

Tidak seperti beberapa objek lainnya, anda tidak perlu membuat objek matematika sendiri. anda selalu menggunakan built-in Math object.

- -

Date object

- -

JavaScript does not have a date data type. However, you can use the {{jsxref("Date")}} object and its methods to work with dates and times in your applications. The Date object has a large number of methods for setting, getting, and manipulating dates. It does not have any properties.

- -

JavaScript handles dates similarly to Java. The two languages have many of the same date methods, and both languages store dates as the number of milliseconds since January 1, 1970, 00:00:00, with a Unix Timestamp being the number of seconds since January 1, 1970, 00:00:00.

- -

The Date object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.

- -

To create a Date object:

- -
var dateObjectName = new Date([parameters]);
-
- -

where dateObjectName is the name of the Date object being created; it can be a new object or a property of an existing object.

- -

Calling Date without the new keyword returns a string representing the current date and time.

- -

The parameters in the preceding syntax can be any of the following:

- - - -

Methods of the Date object

- -

The Date object methods for handling dates and times fall into these broad categories:

- - - -

With the "get" and "set" methods you can get and set seconds, minutes, hours, day of the month, day of the week, months, and years separately. There is a getDay method that returns the day of the week, but no corresponding setDay method, because the day of the week is set automatically. These methods use integers to represent these values as follows:

- - - -

For example, suppose you define the following date:

- -
var Xmas95 = new Date('December 25, 1995');
-
- -

Then Xmas95.getMonth() returns 11, and Xmas95.getFullYear() returns 1995.

- -

The getTime and setTime methods are useful for comparing dates. The getTime method returns the number of milliseconds since January 1, 1970, 00:00:00 for a Date object.

- -

For example, the following code displays the number of days left in the current year:

- -
var today = new Date();
-var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Set day and month
-endYear.setFullYear(today.getFullYear()); // Set year to this year
-var msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day
-var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay;
-var daysLeft = Math.round(daysLeft); //returns days left in the year
-
- -

This example creates a Date object named today that contains today's date. It then creates a Date object named endYear and sets the year to the current year. Then, using the number of milliseconds per day, it computes the number of days between today and endYear, using getTime and rounding to a whole number of days.

- -

The parse method is useful for assigning values from date strings to existing Date objects. For example, the following code uses parse and setTime to assign a date value to the IPOdate object:

- -
var IPOdate = new Date();
-IPOdate.setTime(Date.parse('Aug 9, 1995'));
-
- -

Example

- -

In the following example, the function JSClock() returns the time in the format of a digital clock.

- -
function JSClock() {
-  var time = new Date();
-  var hour = time.getHours();
-  var minute = time.getMinutes();
-  var second = time.getSeconds();
-  var temp = '' + ((hour > 12) ? hour - 12 : hour);
-  if (hour == 0)
-    temp = '12';
-  temp += ((minute < 10) ? ':0' : ':') + minute;
-  temp += ((second < 10) ? ':0' : ':') + second;
-  temp += (hour >= 12) ? ' P.M.' : ' A.M.';
-  return temp;
-}
-
- -

The JSClock function first creates a new Date object called time; since no arguments are given, time is created with the current date and time. Then calls to the getHours, getMinutes, and getSeconds methods assign the value of the current hour, minute, and second to hour, minute, and second.

- -

The next four statements build a string value based on the time. The first statement creates a variable temp, assigning it a value using a conditional expression; if hour is greater than 12, (hour - 12), otherwise simply hour, unless hour is 0, in which case it becomes 12.

- -

The next statement appends a minute value to temp. If the value of minute is less than 10, the conditional expression adds a string with a preceding zero; otherwise it adds a string with a demarcating colon. Then a statement appends a seconds value to temp in the same way.

- -

Finally, a conditional expression appends "P.M." to temp if hour is 12 or greater; otherwise, it appends "A.M." to temp.

- -

{{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}

diff --git a/files/id/web/javascript/panduan/pengenalan/index.html b/files/id/web/javascript/panduan/pengenalan/index.html deleted file mode 100644 index 19523a0821..0000000000 --- a/files/id/web/javascript/panduan/pengenalan/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Perkenalan -slug: Web/JavaScript/Panduan/pengenalan -tags: - - 'I10n:priority' - - JavaScript - - Pedoman - - Pemula - - Perkenalan -translation_of: Web/JavaScript/Guide/Introduction ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
- -

Bab ini mengenalkan dan membahas konsep yang mendasar di javascript.

- -

Apa yang perlu anda ketahui

- -

Pada pedoman ini kami anggap Anda memiliki pengetahuan dasar dari:

- - - -

Tempat untuk mencari informasi JavaScript 

- -

Dokumentasi JavaScript di MDN menyediakan materi sebagai berikut:

- - - -

Jika Anda baru mengenal JavaScript, mulailah dari area belajar dan Paduan JavaScript. Ketika Anda sudah mendapatkan pemahaman dasarnya, Anda bisa menggunakan Referensi JavaScript untuk melihat lebih detil objek dan statement.

- -

Apa itu JavaScript?

- -

JavaScript adalah bahasa scripting cross-platform yang berorientasi objek yang digunakan untuk membuat bagian interaktif dari halaman-halaman web (misal: animasi kompleks, tombol yang dapat di-klik, menu pop-up, dll). Terdapat juga versi server-side yang lebih lanjut dari JavaScript seperti Node.Js yang mana dapat memberikan Anda fungsionalitas lebih pada sebuah website (seperti kolaborasi realtime di antara beberapa komputer). Di dalam host environment (contoh, sebuah web browser), JavaScript dapat dihubungkan ke objek-objek dari environment tersebut untuk menyediakan kendali programmatis terhadapnya. 

- -

JavaScript memuat satu library standar yang memuat objek-objek, seperti Array, Date, dan Math, juga set inti dari elemen-elemen bahasa ini seperti operator, struktur kontrol, dan statement. Inti dari JavaScript dapat dikembangkan untuk kegunaan yang beragam dengan cara menambahkan  objek-objek tambahan; sebagai contoh:

- - - -

JavaScript dan Java

- -

JavaScript dan Java memang memiliki kemiripan pada beberapa hal, namun pada dasarnya saling berbeda. JavaScript menyerupai Java namum tidak memiliki static typing dan strong type checking. JavaScript mengikuti sebagian besar expresi syntax Java, konvensi penamaan serta konstruksi control-flow dasar, yang mana menjadi alasan untuk mengganti namanya dari LiveScript ke JavaScript.

- -

Berbeda dengan sistem compile-time class Java yang dibangun melalui deklarasi, Javascript mendukung sistem runtime yang berbasis pada sebagian kecil tipe data yang mewakili nilai numerik, Boolean, dan string. Javascript memiliki model objek berbasis prototipe ketimbang model objek berbasis kelas yang lebih umum. Model berbasis prototipe menyediakan inheritance dinamis; yaitu, apa yang diturunkan/diwariskan dapat berbeda pada setiap objek. Javascript juga mendukung fungsi tanpa persyaratan deklaratif khusus. Fungsi bisa berupa properti objek, yang dijalankan sebagai tipe metode yang longgar.

- -

JavaScript merupakan bahasa dengan bentuk yang sangat bebas dibandingkan dengan Java. Anda tidak perlu mendeklarasikan semua variabel, kelas, dan metode. Anda tidak perlu khawatir apakah metode itu public, private, atau protected, dan Anda juga tidak perlu mengimplementasikan interface. Variabel, parameter, dan tipe kembalian fungsi juga tidak ditulis secara eksplisit.

- -

Java merupakan bahasa berbasis kelas yang didesain untuk eksekusi yang cepat dan penulisan yang aman. Penulisan yang aman, misalnya, Anda tidak bisa mengubah integer Java menjadi referensi objek atau mengakses private memori dengan membobol bytecode. Model berbasis kelas Java bermaksud bahwa program secara eksklusif terdiri atas sejumlah kelas beserta metode-metodenya. Pewarisan kelas dan penulisan ketat milik Java umumnya membutuhkan hirarki objek yang juga sangat kekat. Syarat-syarat tersebut menjadikan pemrograman Java lebih kompleks ketimbang pemrograman Javascript.

- -

Sebaliknya, JavaScript mewarisi inti dari baris bahasa yang bertipe dinamis dan lebih sederhana sepeti HyperTalk dan dBASE. Bahasa-bahasa scripting tersebut menawarkan fungsionalitas pemrograman ke pengguna yang lebih luas karena syntax-nya yang lebih mudah, berfokus pada fungsi built-in, dan persyaratan yang minimalis untuk membuat objek.

- - - - - - - - - - - - - - - - - - - - - - - -
JavaScript dibandingkan Java
JavaScriptJava
Berorientasi objek. Tak ada perbedaan antar tipe objek. Inheritance/ pewarisan melalui mekanisme prototipe, serta properti dan metode bisa ditambahkan kepada objek apapun secara dinamis.Berbasis kelas. Objek dibagi ke dalam kelas dan instansi dengan semua pewarisan melalui hirarki kelas. Kelas dan instansi tidak dapat memiliki properti atau metode yang ditambahkan secara dinamis.
Tipe data variabel tidak dideklarasi (dynamic typing, loosely typed).Tipe data variabel harus dideklarasi (static-typing, strongly typed).
Tidak bisa menulis ke hard disk secara otomatis.Bisa menulis ke hard disk secara otomatis.
- -

Untuk informasi lebih lanjut perbedaan antara JavaScript dan Java, lihat bagian Detil dari model objek.

- -

JavaScript dan spesifikasi ECMAScript

- -

Javascript distandarisasi melalui Ecma International — asosiasi Eropa yang men-standarisasi sistem informasi dan komunikasi  (ECMA merupakan singkatan yang dari European Computer Manufacturers Association) yang mengurusi standarisasi bahasa pemrograman internasional berbasis JavaScript. Versi standarisasi JavaScript ini, yang disebut sebagai ECMAScript, akan berperilaku sama pada setiap aplikasi yang mengikutinya. Perusahaan-perusahaan dapat menggunakan bahasa standar terbuka untuk mengembangkan implementasi JavaScript mereka. Standar ECMAScript didokumentasikan dalam spesifikasi ECMA-262. Kunjungi Terbaru di JavaScript untuk mempelajari lebih lanjut tentang berbagai versi dari JavaScript dan spesifikasi edisi ECMAScript.

- -

Standar ECMA-262 juga disetujui oleh ISO (International Organization for Standardization) sebagai ISO-16262. Anda juga dapat menemukan spesifikasinya di website Ecma International. Spesifikasi ECMAScript tidak memaparkan Document Object Model yang distandarisasi oleh World Wide Web Consortium (W3C) bersama WHATWG (Web Hypertext Application Technology Working Group). DOM mendefinisikan cara dimana dokumen objek HTML diekspos ke script Anda. Untuk mendapatkan pemahaman yang lebih baik tentang berbagai teknologi yang digunakan ketika memrogram menggunakan JavaScript, lihat artikel ikhtisar teknologi JavaScript.

- -

Perbandingan dokumentasi JavaScript dengan spesifikasi ECMAScript

- -

Spesifikasi ECMAScript adalah seperangkat persyaratan untuk menerapkan ECMAScript; berguna jika Anda ingin menerapkan fitur bahasa yang sesuai standar dalam penerapan atau mesin ECMAScript Anda (seperti SpiderMonkey di Firefox, atau V8 di Chrome).

- -

Dokumen ECMAScript tidak dimaksudkan untuk membantu script programmer; gunakanlah dokumentasi JavaScript untuk informasi dalam penulisan script.

- -

Spesifikasi ECMAScript menggunakan terminologi dan syntax yang mungkin asing bagi programmer JavaScript. Meskpun deskripsi dari bahasa tersebut dapat berbeda dengan ECMAScript, bahasanya sendiri tetap sama. JavaScript mendukung semua fungsionalitas yang diuraikan dalam spesifikasi ECMAScript.

- -

Dokumentasi JavaScript menggambarkan aspek bahasa yang sesuai bagi seorang programmer JavaScript.

- -

Memulai Javascript

- -

Memulai JavaScript itu mudah: semua yang dibutuhkan hanyalah Web browser modern untuk menjalankannya. Panduan ini mencakup beberapa fitur JavaScript yang hanya tersedia pada versi terakhir Firefox, sehingga disarankan untuk menggunakan Firefox versi terbaru.

- -

Terdapat dua alat yang dipasang ke dalam Firefox yang berguna dalam bereksperimen dengan JavaScript: Web Console dan Scratchpad.

- -

Web Console

- -

Web Consol / Konsol Web memperlihatkan kepada Anda tentang informasi laman Web yang sedang di-load saat ini, dan juga mencakup commandline / baris perintah yang dapat Anda gunakan untuk mengeksekusi ekspresi JavaScript pada laman saat ini.

- -

Untuk membuka Konsol Web, tekan (Ctrl + Shift + K) pada Windows dan Linux atau tekan (Cmd + Option + K) pada Mac, pilih "Web Console" dari menu "Developer", yang berada di bawah menu "Tools" di Firefox. Konsol akan muncul di bagian bawah jendela browser. Di bagian bawah konsol tersebut adalah command line yang dapat Anda gunakan untuk memasukkan JavaScript, dan outputnya akan muncul pada panel di atasnya.

- -

Konsol tersebut bekerja persis seperti eval: expresi terakhir yang dienter akan dikembalikan. Demi kesederhanaan, bisa dibayangkan jika setiap saat sesuatu dimasukkan ke dalam konsol, ia akan selalu dikelilingi oleh console.log sekitar eval seperti ini.

- -
function greetMe(yourName) {
-  alert('Hello ' + yourName);
-}
-console.log(eval('3 + 5'));
- -

 

- -

Scratchpad

- -

Konsol Web bagus untuk menjalankan satu baris kode JavaScript, meskipun Anda juga dapat menjalankan banyak baris, tetap saja akan terasa kurang nyaman, dan Anda juga tidak bisa menyimpan sampel kode Anda menggunakan Konsol Web. Jadi untuk contoh yang lebih kompleks, Scratchpad adalah solusinya.

- -

Untuk membuka Scratchpad tekan (Shift + F4), pilih "Scratchpad" dari menu "Developer", yang ada di bawah menu pada Firefox. Selanjutnya akan muncul di window yang terpisah dan merupakan editor yang dapat Anda gunakan untuk menulis dan menjalankan JavaScript di browser. Anda juga dapat menyimpan dan membuka kode dari disk.

- -

- -

Hello world

- -

Untuk mulai menulis JavaScript, buka Scratchpad dan tulislah kode JavaScript "Hello world" pertama Anda:

- -
(function(){
-  "use strict";
-  /* Start of your code */
-  function greetMe(yourName) {
-    alert('Hello ' + yourName);
-  }
-
-  greetMe('World');
-  /* End of your code */
-})();
-
- -

Pilih kode diatas dan tekan Ctrl+R untuk melihatnya berjalan di browser Anda! Di laman-laman berikutnya, panduan ini akan memperkenalkan Anda dengan syntax dan fitur-fitur bahasa JavaScript, sehingga Anda dapat menulis aplikasi yang lebih kompleks. Tapi untuk saat ini, ingatlah untuk selalu memasukkan (function(){"use strict"; sebelum kode Anda, dan tambahkan  })(); di akhir kode Anda. Anda akan mempelajari apa artinya itu, tetapi untuk sekarang mereka bisa dianggap melakukan:

- -
    -
  1. Meningkatkan performa secara masif
    2. -
  2. Mencegah semantik ceroboh dalam JavaScript yang menjatuhkan pemula
    3. -
  3. Mencegah code snippets yang dieksekusi dalam konsol untuk berinteraksi satu sama lain (misalnya sesuatu yang dibuat dalam suatu eksekusi konsol digunakan untuk eksekusi konsol yang lain).
    4. -
- -

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

diff --git a/files/id/web/javascript/panduan/tentang/index.html b/files/id/web/javascript/panduan/tentang/index.html deleted file mode 100644 index c7f08f0eb5..0000000000 --- a/files/id/web/javascript/panduan/tentang/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Tentang Panduan Ini -slug: Web/JavaScript/Panduan/Tentang -tags: - - JavaScript - - Panduan - - dasar -translation_of: Web/JavaScript/Guide/Introduction -translation_of_original: Web/JavaScript/Guide/About ---- -

JavaScript adalah bahasa yang cross-platform yaitu berarti JavaScript dapat dijalankan di banyak platform seperti Linux, Windows, Mac OS, Android, Firefox OS dan lain - lain. Panduan ini akan memberikan segala pengetahuan dasar yang perlu anda ketahui dalam penggunaan JavaScript.

- -

Fitur baru pada versi JavaScript

- -

 

- - - -

 

- -

Apa yang perlu anda pelajari terlebih dahulu ?

- -

Sebelum mempelajari panduan ini anda harus mempunyai pengetahuan dasar tentang:

- - - -

JavaScript versions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table 1 JavaScript and Navigator versions
JavaScript versionNavigator version
JavaScript 1.0Navigator 2.0
JavaScript 1.1Navigator 3.0
JavaScript 1.2Navigator 4.0-4.05
JavaScript 1.3Navigator 4.06-4.7x
JavaScript 1.4 
JavaScript 1.5Navigator 6.0
- Mozilla (open source browser)
JavaScript 1.6Firefox 1.5, other Mozilla 1.8-based products
JavaScript 1.7Firefox 2, other Mozilla 1.8.1-based products
JavaScript 1.8Firefox 3, other Gecko 1.9-based products
- -

Dimana saya mendapatkan informasi tentang JavaScript ?

- -

Dokumentasi JavaScript terdapat pada buku dibawah ini:

- - - -

Untuk yang baru belajar bacalah JavaScript Guide. Atau anda ingin mendapat pemahaman yang kuat bacalah JavaScript Reference untuk mendapatkan detail dari masing - masing object dan statements.

- -

Tips untuk belajar JavaScript

- -

Untuk memulai belajar JavaScript sangatlah mudah, anda hanya butuh web browser versi terbaru seperti Mozilla Firefox. Karena di dalam panduan ini terdapat beberapa fitur JavaScript yang hanya bisa dijalankan pada web browser firefox versi terbaru (dan web browser lain yang didukung Gecko), jadi kami menyarankan anda selalu update Mozilla Firefox terbaru.

- -

Ada dua tool yang tersedia di dalam Firefox dan sangat berguna untuk berEksperimen dengan JavaScript yaitu Web Console dan Scratchpad.

- -

Web Console

- -

Web Console memberikan anda informasi tentang halaman web yang sedang anda buka, dan juga terdapat command line yang membuat anda bisa menjalankan JavaScript expression di web page yang sedang anda buka.

- -

Untuk menggunakan Web Console, pilih "Web Console" dari menu "Web Developer" yang terdapat di dalam menu "Tools" atau "Peralatan" dalam bahasa indonesia. Web Console akan muncul pada bagian bawah browser dan anda bisa menjalankan Script anda pada Text Input dan hasilnya akan muncul pada box seperti gambar dibawah ini.

- -

- -

Scratchpad

- -

Web Console biasa digunakan untuk single lines Script, ketika anda ingin mencoba Script multiple lines kami sarankan menggunakan Scratchpad, karena selain tidak efective juga Web Console tidak bisa menyimpan perubahan yang anda lakukan pada Script, namun Scratchpad melakukan itu dengan sangat baik.

- -

Untuk menggunakan Scratchpad, pilih "Scratchpad" pada menu "Web Developer" di dalam menu "Tools" atau "Pengaturan" dalam bahasa indonesia. Anda dapat menyimpan dan menload Script dari dari hardisk ataupun flashdisk.

- -

Ketika anda mengklik tombol "Inspect" maka script anda akan tereksekusi dan hasilnya akan dikembalikan pada Script dalam bentuk komentar.

- -

- -

Document conventions

- -

Applikasi JavaScript berjalan di banyak Operating System (OS) dan informasi pada panduan ini adalah untuk semua versi OS. File dan lokasi Folder pada Unix dan Windows dipisahkan oleh backslashes (/)

- -

Panduan ini menggunakan uniform resource locators (URLs) of the following form:

- -

http://server.domain/path/file.html

- -

In these URLs, server represents the name of the server on which you run your application, such as research1 or www; domain represents your Internet domain name, such as netscape.com or uiuc.edu; path represents the directory structure on the server; and file.html represents an individual file name. In general, items in italics in URLs are placeholders and items in normal monospace font are literals. If your server has Secure Sockets Layer (SSL) enabled, you would use https instead of http in the URL.

- -

This guide uses the following font conventions:

- - - -
 
diff --git a/files/id/web/javascript/panduan/values,_variables,_and_literals/index.html b/files/id/web/javascript/panduan/values,_variables,_and_literals/index.html deleted file mode 100644 index 41900a1603..0000000000 --- a/files/id/web/javascript/panduan/values,_variables,_and_literals/index.html +++ /dev/null @@ -1,648 +0,0 @@ ---- -title: Tata Bahasa dan Tipe -slug: 'Web/JavaScript/Panduan/Values,_variables,_and_literals' -tags: - - JavaScript - - Panduan -translation_of: Web/JavaScript/Guide/Grammar_and_types ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
- -

Pada bagian ini membahas tata bahasa dasar Javascript, deklarasi variabel, tipe data dan literal.

- -

Dasar

- -

Sebagian besar sintak JavaScript terinspirasi dari Java, namun juga dipengaruhi oleh Awk, Perl dan Python.

- -

JavaScript bersifat case-sensitive dan menggunakan set karakter Unicode.

- -

Dalam JavaScript, instruksi disebut {{Glossary ("Statement", "pernyataan")}} dan dipisahkan oleh titik koma (;). Spasi, tab dan karakter baris baru disebut whitespace.Teks sumber skrip JavaScript dipindai dari kiri ke kanan dan diubah menjadi urutan elemen masukan yang merupakan token, karakter kontrol, terminator baris, komentar atau whitespace. ECMAScript juga mendefinisikan kata kunci dan literal tertentu dan memiliki aturan untuk penyisipan titik koma secara otomatis (ASI) untuk mengakhiri pernyataan. Namun, dianjurkan untuk selalu menambahkan titik koma untuk mengakhiri pernyataan anda; Itu akan terhindar dari efek samping. Untuk informasi lebih lanjut, lihat referensi rinci tentang tata bahasa eksikal JavaScript.

- -


- Komentar

- -

Sintak komentar pada JavaScript sama dengan C++ dan dalam banyak bahasa pemrograman lainnya:

- -
// komentar satu baris
-
-/* Ini lebih panjang
-   komentar beberapa baris
- */
-
-/* Anda tidak bisa menggunakannya, /* komentar bersarang */ Sintak bermasalah */
- -

Deklarasi

- -

Ada tiga macam deklarasi pada JavaScript.

- -
-
var
-
Mendeklarasikan sebuah variabel, opsional menginisialisasi sebuah nilai.
-
let
-
Mendeklarasikan lingkup-blok, variabel lokal, opsional menginisialisasi sebuah nilai.
-
const
-
Mendeklarasikan sebuah lingkup-blok, baca-saja dinamakan konstanta.
-
- -

Variabel

- -

Anda menggunakan variabel sebagai nama simbolik dalam aplikasi Anda.  Nama variabel, disebut {{Glossary("Identifier", "Pengidentifikasi")}}, sesuai dengan peraturan tertentu.

- -

Pengindetifikasi pada JavaScript harus dimulai dengan huruf, garis bawah (_), atau tanda dolar ($); Karakter selanjutnya bisa berupa digit (0-9). karena JavaScript sensitif huruf (case-sensitive), Huruf termasuk karakter "A" sampai "Z" (huruf besar) dan huruf "a" sampai "z" (huruf kecil) .

- -

Anda dapat menggunakan sebagian besar huruf ISO 8859-1 atau Unicode seperti å dan ü dalam pengidentifikasi (untuk lebih jelasnya lihat postingan blog ini). Anda juga dapat menggunakan urutan rangkaian pelolosan/escape Unicode sebagai karakter dalam pengidentifikasi.

- -

Beberapa contoh nama legal adalah Number_hits, temp99, $credit, dan _name.

- -

Mendeklarasikan variabel

- -

Anda bisa mendeklarasikan sebuah variabel dalam tiga cara:

- - - -

Mengevaluasi variabel

- -

Variabel yang dideklarasikan dengan menggunakan pernyataan  var atau let tanpa penetapan nilai yang ditentukan memiliki nilai undefined.

- -

Upaya untuk mengakses variabel yang tidak dideklarasikan akan menuju kepada pelemparan eksepsi ReferenceError:

- -
var a;
-console.log('Nilai dari a adalah ' + a); // Nilai dari a adalah undefined
-
-console.log('Nilai dari b adalah ' + b); // Nilai dari b adalah undefined
-var b;
-
-console.log('Nilai dari c adalah ' + c); // Tidak tertangkap ReferenceError: c tidak di definisikan
-
-let x;
-console.log('Nilai dari x adalah ' + x); // Nilai dari x adalah undefined
-
-console.log('Nilai dari y adalah ' + y); // Tidak tertangkap ReferenceError: y tidak di definisikan
-let y;
- -

Anda dapat menggunakan undefined untuk menentukan apakah sebuah variabel memiliki nilai. Dalam kode berikut, variabel input tidak diberi nilai, dan pernyataan  if dievaluasi true.

- -
var input;
-if (input === undefined) {
-  lakukanIni();
-} else {
-  lakukanItu();
-}
- -

Nilai  undefined berperilaku sebagai false bila digunakan dalam konteks boolean. Misalnya, kode berikut menjalankan fungsi fungsiSaya karena elemen  myArray undefined:

- -
var myArray = [];
-if (!myArray[0]) fungsiSaya();
- -

Nilai  undefined mengkonversi ke NaN bila digunakan dalam konteks numerik.

- -
var a;
-a + 2;  // Dievaluasi ke NaN
- -

Ketika Anda mengevaluasi sebuah variabel null, nilai null berperilaku seperti 0 dalam konteks numerik dan sebagai false dalam konteks boolean. Sebagai contoh:

- -
var n = null;
-console.log(n * 32); // Akan log 0 ke konsol
- -

Lingkup variabel

- -

Bila Anda mendeklarasikan variabel di luar fungsi apa pun, ini disebut variabel global , karena tersedia pada kode lain dalam dokumen tersebut. Ketika Anda mendeklarasikan sebuah variabel dalam suatu fungsi, itu disebut variabel lokal , karena hanya tersedia di dalam fungsi itu.

- -

JavaScript sebelum ECMAScript 2015 tidak memiliki lingkup pernyataan blok ; Sebaliknya, variabel yang dinyatakan dalam blok bersifat lokal terhadap fungsi (atau lingkup global) yang berada di blok. Misalnya kode berikut akan log 5, karena ruang lingkupnya x adalah fungsi (atau konteks global) yang x dideklarasikan, bukan bloknya, yang dalam hal ini adalah sebuah pernyataan if.

- -
if (true) {
-  var x = 5;
-}
-console.log(x);  // x is 5
- -

Perilaku ini berubah, saat menggunakan deklarasi let yang diperkenalkan di ECMAScript 2015.

- -
if (true) {
-  let y = 5;
-}
-console.log(y);  // ReferenceError: y tidak di definisikan
- -

Hoisting variabel

- -

Hal lain yang tidak biasa tentang variabel dalam JavaScript adalah Anda bisa merujuk ke variabel yang dideklarasikan nanti, tanpa mendapatkan eksepsi. Konsep ini dikenal sebagai hoisting; Variabel dalam JavaScript dalam arti "dikibarkan" atau diangkat ke atas fungsi atau pernyataan. Bagaimanapun, variabel yang dikibarkan akan memberikan nilai undefined. Jadi, bahkan jika Anda mendeklarasikan dan menginisialisasi setelah Anda menggunakan atau merujuk ke variabel ini, itu akan tetap memberikan undefined.

- -
/**
- * Contoh 1
- */
-console.log(x === undefined); // true
-var x = 3;
-
-/**
- * Contoh 2
- */
-// Akan memberikan nilai undefined
-var myvar = 'my value';
-
-(function() {
-  console.log(myvar); // undefined
-  var myvar = 'local value';
-})();
- -

Contoh di atas akan dinterprestasikan sama dengan:

- -
/**
- * Contoh 1
- */
-var x;
-console.log(x === undefined); // true
-x = 3;
-
-/**
- * Example 2
- */
-var myvar = 'my value';
-
-(function() {
-  var myvar;
-  console.log(myvar); // undefined
-  myvar = 'nilai lokal';
-})();
- -

Karena hoisting, semua pernyataan var dalam suatu fungsi harus ditempatkan sedekat mungkin ke atas fungsi. Praktik terbaik ini meningkatkan kejelasan kode.

- -

Dalam ECMAScript 2015, variabel  let (const) tidak akan hoist ke bagian atas blok. Bagaimanapun, referensi variabel di blok sebelum deklarasi variabel menghasilkan sebuah ReferenceError. Variabel ini berada dalam "zona mati temporal" dari awal blok sampai deklarasi diproses.

- -
console.log(x); // ReferenceError
-let x = 3;
- -

Hoisting fungsi

- -

Untuk fungsi, hanya deklarasi fungsi yang diangkat ke atas dan bukan ekspresi fungsi.

- -
/* Deklarasi fungsi */
-
-foo(); // "bar"
-
-function foo() {
-  console.log('bar');
-}
-
-
-/* Ekspresi fungsi */
-
-baz(); // TypeError: baz adalah bukan fungsi
-
-var baz = function() {
-  console.log('bar2');
-};
- -

Variabel global

- -

Variabel global sebenarnya adalah properti dari objek global . Di halaman web objek global itu window, sehingga Anda bisa mengatur dan mengakses variabel global dengan menggunakan sintaks window.variable

- -

Akibatnya, Anda dapat mengakses variabel global yang dideklarasikan dalam satu window atau frame dari window atau frame lain dengan menentukan nama window atau frame. Misalnya, jika variabel yang disebut phoneNumber dinyatakan dalam dokumen, Anda dapat merujuk variabel ini dari iframe as parent.phoneNumber.

- -

Konstanta

- -

Anda bisa membuat variabel baca-saja, dinamai dengan kata kunci const. Sintaksis dari pengenal konstanta sama dengan pengenal variabel: ia harus dimulai dengan huruf, garis bawah atau tanda dolar ($) dan dapat berisi karakter abjad, numerik, atau garis bawah.

- -
const PI = 3.14;
- -

Konstanta tidak dapat mengubah nilai melalui penugasan atau dinyatakan ulang saat naskah dijalankan. Ini harus diinisialisasi ke sebuah nilai.

- -

Aturan lingkup untuk konstanta sama dengan variabel lingkup-blok let . Jika kata kunci  const dihilangkan, pengenal dianggap mewakili variabel.

- -

Anda tidak dapat mendeklarasikan konstanta dengan nama yang sama dengan fungsi atau variabel dalam lingkup yang sama. Sebagai contoh:

- -
// INI AKAN MENYEBABKAN ERROR
-function f() {};
-const f = 5;
-
-// INI AKAN MENYEBABKAN ERROR JUGA
-function f() {
-  const g = 5;
-  var g;
-
-  //pernyataan
-}
- -

Namun, properti objek yang ditugaskan pada konstanta tidak terlindungi, jadi pernyataan berikut dijalankan tanpa masalah.

- -
const MY_OBJECT = {'key': 'value'};
-MY_OBJECT.key = 'otherValue';
- -

Struktur dan tipe data

- -

Tipe data

- -

Standar ECMAScript terbaru mendefinisikan tujuh tipe data:

- - - -

Meskipun tipe data ini jumlahnya relatif kecil, namun memungkinkan Anda untuk melakukan fungsi-fungsi yang berguna dengan aplikasi Anda.  {{jsxref("Object", "Objects")}} dan {{jsxref("Function", "functions")}} merupakan unsur fundamental lainnya dalam bahasa ini. Anda bisa memikirkan objek sebagai wadah bernama untuk nilai, dan fungsi sebagai prosedur yang dapat dilakukan aplikasi Anda.

- -

Konversi tipe data

- -

JavaScript adalah bahasa yang diketik secara dinamis. Itu berarti Anda tidak perlu menentukan tipe data variabel saat Anda menyatakannya, dan tipe data akan dikonversi secara otomatis sesuai kebutuhan selama eksekusi skrip. Jadi, misalnya, Anda bisa mendefinisikan variabel sebagai berikut:

- -
var jawaban = 42;
- -

Dan nanti, Anda bisa menetapkan variabel yang sama dengan nilai string, misalnya:

- -
jawaban = 'Thanks for all the fish...';
- -

Karena JavaScript diketik secara dinamis, penugasan ini tidak menyebabkan pesan kesalahan.

- -

Dalam ekspresi yang melibatkan nilai numerik dan string dengan operator +, JavaScript mengubah nilai numerik menjadi string. Misalnya, perhatikan pernyataan berikut:

- -
x = 'Jawabannya adalah ' + 42 // "Jawabannya adalah 42"
-y = 42 + ' Adalah jawabannya' // "42 Adalah jawabannya"
- -

Dalam pernyataan yang melibatkan operator lain, JavaScript tidak mengubah nilai numerik menjadi string. Sebagai contoh:

- -
'37' - 7 // 30
-'37' + 7 // "377"
- -

Mengubah string menjadi angka

- -

Dalam kasus yang sebuah nilai mewakili bilangan ada dalam memori sebagai string, ada metode untuk konversi.

- - - -

parseInt Hanya akan memberikan bilangan bulat, jadi penggunaannya berkurang untuk desimal. Selain itu, praktik terbaik untuk parseInt selalu menyertakan parameter radix. Parameter radix digunakan untuk menentukan sistem numerik yang akan digunakan.

- -

Metode alternatif untuk mengambil nomor dari string adalah dengan operator +  (unary plus):

- -
'1.1' + '1.1' = '1.11.1'
-(+'1.1') + (+'1.1') = 2.2
-// Catatan: kurung siku buka tutup ditambahkan untuk kejelasan, tidak diminta.
- -

Literal

- -

Anda menggunakan literal untuk mewakili nilai dalam JavaScript. Ini adalah nilai tetap, bukan variabel, yang Anda berikan secara literal dalam skrip Anda. Bagian ini menjelaskan jenis literal berikut:

- - - -

Literal array

- -

Sebuah literal array adalah daftar dari nol atau lebih ekspresi,  yang masing-masing mewakili elemen array, dilampirkan dalam tanda kurung siku ([]). Bila Anda membuat array menggunakan literal array, ini diinisialisasi dengan nilai yang ditentukan sebagai elemennya, dan panjangnya diatur ke jumlah argumen yang ditentukan.

- -

Contoh berikut membuat array coffees dengan tiga elemen dan panjang tiga:

- -
var coffees = ['French Roast', 'Colombian', 'Kona'];
- -

Catatan: Sebuah literal array  adalah tipe dari object initializer. Lihat Menggunakan Penginisialisasi Objek.

- -

Jika sebuah array dibuat menggunakan literal dalam skrip tingkat-atas, JavaScript menginterpretasikan array setiap kali mengevaluasi ekspresi yang berisi literal array. Selain itu, literal yang digunakan dalam suatu fungsi dibuat setiap kali fungsi dipanggil.

- -

Array literal juga objek Array. Lihat Array dan Koleksi diIndek untuk rincian tentang objek Array.

- -

Ekstra koma dalam literal array

- -

Anda tidak perlu menentukan semua elemen dalam literal array. Jika Anda memasukkan dua koma berturut-turut, array dibuat undefined untuk elemen yang tidak ditentukan. Contoh berikut membuat array fish:

- -
var fish = ['Lion', , 'Angel'];
- -

Array ini memiliki dua elemen dengan nilai dan satu elemen kosong (fish[0] adalah "Lion", fish[1] adalah undefined, dan fish[2] merupakan "Angel").

- -

Jika Anda menyertakan koma di akhir daftar elemen, koma diabaikan. Pada contoh berikut, panjang array adalah tiga. Tidak ada myList[3]. Semua koma lainnya dalam daftar menunjukkan elemen baru.

- -

Catatan: Koma diakhir dapat membuat kesalahan pada versi browser lama dan merupakan praktik terbaik untuk menghapusnya.

- -
var myList = ['home', , 'school', ];
- -

Dalam contoh berikut, panjang array adalah empat, dan myList[0]dan myList[2] hilang.

- -
var myList = [ ,'home', , 'school'];
- -

Dalam contoh berikut, panjang array adalah empat, dan myList[1]dan myList[3] hilang. Hanya koma terakhir yang diabaikan.

- -
var myList = ['home', , 'school', , ];
- -

Memahami perilaku ekstra  koma penting untuk memahami JavaScript sebagai bahasa, namun saat menulis kode Anda sendiri: secara eksplisit menyatakan elemen yang hilang sebagai undefined akan meningkatkan kejelasan dan perawatan kode anda.

- -

Literal boolean

- -

Tipe Boolean memiliki dua nilai literal: true dan false.

- -

Jangan membingungkan nilai Boolean primitif true dan false dengan nilai true dan false objek Boolean. Objek Boolean adalah pembungkus di sekitar tipe data Boolean primitif. Lihat {{jsxref("Boolean")}} untuk informasi lebih lanjut.

- -

Integer

- -

Integer dapat dinyatakan dalam desimal (basis 10), heksadesimal (basis 16), oktal (basis 8) dan biner (basis 2).

- - - -

Beberapa contoh literal bilangan bulat adalah:

- -
0, 117 and -345 (desimal, basis 10)
-015, 0001 and -0o77 (oktal, basis 8)
-0x1123, 0x00111 and -0xF1A7 (heksadesimal, "hex" or basis 16)
-0b11, 0b0011 and -0b11 (biner, basis 2)
- -

Untuk informasi lebih lanjut, lihat literatur numerik dalam referensi tata bahasa leksikal .

- -

Literal floating-point

- -

Sebuah literal  floating-point dapat memiliki bagian berikut:

- - - -

Bagian eksponennya adalah "e" atau "E" diikuti oleh bilangan bulat, yang dapat ditandatangani (didahului dengan "+" atau "-"). Literal floating-point harus memiliki setidaknya satu digit dan titik desimal atau "e" (atau "E").

- -

Lebih ringkas lagi, sintaksnya adalah:

- -
[(+|-)][angka][.angka][(E|e)[(+|-)]angka]
- -

Sebagai contoh:

- -
3.1415926
--.123456789
--3.1E+12
-.1e-23
- -

Literal objek

- -

Literal objek adalah daftar dari nol atau lebih pasangan nama properti dan nilai objek yang terkait, yang dilampirkan dalam kurung kurawal ({}). Anda seharusnya tidak menggunakan literal objek di awal sebuah pernyataan. Ini akan menyebabkan kesalahan atau tidak berperilaku seperti yang Anda harapkan, karena { akan ditafsirkan sebagai awal dari sebuah blok.

- -

Berikut ini adalah contoh dari literal objek. Elemen pertama dari objek car mendefinisikan sebuah properti myCar, dan menetapkan sebuah string baru, " Saturn";  Elemen kedua, properti getCar,  segera diberi hasil pemanggilan function (carTypes("Honda")); elemen ketiga, properti special menggunakan variabel yang ada ( sales).

- -
var sales = 'Toyota';
-
-function carTypes(name) {
-  if (name === 'Honda') {
-    return name;
-  } else {
-    return "Maaf, kami tidak menjual " + name + ".";
-  }
-}
-
-var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales };
-
-console.log(car.myCar);   // Saturn
-console.log(car.getCar);  // Honda
-console.log(car.special); // Toyota
- -

Selain itu, Anda dapat menggunakan literal numerik atau string untuk nama properti atau menyarangkan objek di dalam objek yang lain. Contoh berikut menggunakan opsi ini.

- -
var car = { manyCars: {a: 'Saab', 'b': 'Jeep'}, 7: 'Mazda' };
-
-console.log(car.manyCars.b); // Jeep
-console.log(car[7]); // Mazda
- -

Nama properti objek bisa berupa string apapun, termasuk string kosong. Jika nama properti akan menjadi {{Glossary("Identifier","pengidentifikasi")}} JavaScript yang tidak valid atau angka, maka harus dilampirkan dalam tanda petik. Nama properti yang pengidentifikasi tidak valid juga tidak dapat diakses sebagai properti dot (.), namun dapat diakses dan ditetapkan dengan notasi seperti array ("[]").

- -
var namaPropertiTidakBiasa = {
-  '': 'An empty string',
-  '!': 'Bang!'
-}
-console.log(namaPropertiTidakBiasa.'');   // SyntaxError: Unexpected string
-console.log(namaPropertiTidakBiasa['']);  // An empty string
-console.log(namaPropertiTidakBiasa.!);    // SyntaxError: Unexpected token !
-console.log(namaPropertiTidakBiasa['!']); // Bang!
- -

Peningkatan Literal Objek

- -

Di ES2015, literal objek diperluas untuk mendukung pengaturan prototipe pada konstruksi, singkatan untuk  foo: penugasan foo , definisikan metode, pembuatan panggilan super, dan komputasi nama properti dengan ekspresi. Bersamaan dengan itu, ini juga membawa literatur dan deklarasi kelas lebih dekat bersama, dan membiarkan desain berbasis objek mendapatkan keuntungan dari beberapa kemudahan yang sama.

- -
var obj = {
-    // __proto__
-    __proto__: theProtoObj,
-    // Shorthand for ‘handler: penangan’
-    handler,
-    // Metode
-    toString() {
-     // Pangilan super
-     return 'd ' + super.toString();
-    },
-    // Dikalkulasi (dinamis) nama properti
-    [ 'prop_' + (() => 42)() ]: 42
-};
- -

Tolong dicatat:

- -
var foo = {a: 'alpha', 2: 'two'};
-console.log(foo.a);    // alpha
-console.log(foo[2]);   // two
-//console.log(foo.2);  // Error: missing ) after argument list
-//console.log(foo[a]); // Error: a is not defined
-console.log(foo['a']); // alpha
-console.log(foo['2']); // two
- -

Literal RegExp

- -

Sebuah literal regex adalah pola yang dilampirkan diantara garis miring. Berikut ini adalah contoh literal regex.

- -
var re = /ab+c/;
- -

Literal string

- -

Literal string adalah nol atau lebih karakter yang dilampirkan dengan tanda kutip ganda (") atau tunggal ('). String harus dibatasi dengan tanda kutip dari jenis yang sama; Yaitu kedua tanda kutip tunggal atau kedua tanda petik ganda. Berikut ini adalah contoh literal string:

- -
'foo'
-"bar"
-'1234'
-'baris satu \n baris lainnya'
-"Kucing jhon"
- -

Anda dapat memanggil salah satu metode objek String pada nilai literal string-JavaScript secara otomatis mengubah literal string menjadi objek String sementara, memanggil metode tersebut, lalu membuang objek String sementara. Anda juga bisa menggunakan properti String.length dengan literal string:

- -
console.log("Kucing jhon".length)
-// Akan mencetak jumlah simbol dalam string termasuk spasi.
-// Dalam hal ini, 11.
- -

Di ES2015, template literal juga tersedia. Template string memberikan sintaksis gula untuk pembuatan string. Ini mirip dengan fitur interpolasi string di Perl, Python dan lainnya. Secara opsional, tag dapat ditambahkan untuk memungkinkan konstruksi string disesuaikan, menghindari serangan injeksi atau membangun struktur data tingkat tinggi dari konten string.

- -
// Literal dasar kreasi string
-`Dalam JavaScript '\n' adalah sebuah line-feed.`
-
-// String beberapa baris
-`Dalam template string JavaScript dapat berjalan di
- beberapa baris, namun string yang dikutip ganda dan tunggal
- tidak dapat dilakukan.`
-
-// Interpoasi string
-var name = 'Bob', time = 'today';
-`Hello ${name}, how are you ${time}?`
-
-// Membangun prefix permintaan HTTP digunakan untuk menafsirkan penggantian dan konstruksi
-POST`http://foo.org/bar?a=${a}&b=${b}
-     Content-Type: application/json
-     X-Credentials: ${credentials}
-     { "foo": ${foo},
-       "bar": ${bar}}`(myOnReadyStateChangeHandler);
- -

Anda harus menggunakan literal string kecuali Anda secara khusus perlu menggunakan objek String. Lihat {{jsxref("String")}}  untuk rincian tentang objek String.

- -

Menggunakan karakter khusus dalam string

- -

Selain karakter biasa, Anda juga bisa menyertakan karakter khusus dalam string, seperti yang ditunjukkan pada contoh berikut.

- -
'one line \n another line'
- -

Tabel berikut mencantumkan karakter khusus yang dapat Anda gunakan dalam string JavaScript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tabel: karakter khusus JavaScript
KarakterBerarti
\0Null Byte
\bbackspase
\fform feed
\nBaris baru
\rCariage return
\tTab
\vTab vertikal
\'Apostrof atau kutipan tunggal
\"Kutipan ganda
\\Karakter backslash
\XXXKarakter dengan pengkodean Latin-1 ditentukan oleh hingga tiga digit oktal XXX antara 0 dan 377. Misalnya, \251 adalah urutan oktal untuk simbol hak cipta.
\xXXKarakter dengan pengkodean Latin-1 yang ditentukan oleh dua digit heksadesimal XX antara 00 dan FF. Misalnya, \xA9 adalah urutan heksadesimal untuk simbol hak cipta.
\uXXXXKarakter Unicode ditentukan oleh empat digit heksadesimal XXXX . Misalnya, \u00A9 adalah urutan Unicode untuk simbol hak cipta. Lihat rangkaian pelolosan Unicode.
\u{XXXXX}Kode Unicode lolos. Misalnya, \u {2F804} sama dengan Unicode sederhana yang lolos \uD87E \uDC04.
- -

Karakter pelolosan

- -

Untuk karakter yang tidak tercantum dalam tabel, tanda garis miring terbalik sebelumnya diabaikan, namun penggunaan ini tidak berlaku lagi dan harus dihindari.

- -

Anda dapat memasukkan tanda petik di dalam string sebelum mendahului dengan garis miring terbalik. Ini dikenal sebagai pelolosan dari tanda petik. Sebagai contoh:

- -
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
-console.log(quote);
- -

Hasil dari ini adalah:

- -
He read "The Cremation of Sam McGee" by R.W. Service.
- -

Untuk menyertakan garis miring terbalik di dalam string, Anda harus melepaskan diri dari karakter garis miring terbalik. Misalnya, untuk menetapkan path file c:\temp ke string, gunakan yang berikut ini:

- -
var home = 'c:\\temp';
- -

Anda juga bisa meloloskan dari baris istirahat sebelumnya mendahului mereka dengan garis miring terbalik. Garis miring terbalik dan baris istirahat keduanya terlepas dari nilai string.

- -
var str = 'this string \
-is broken \
-across multiple \
-lines.'
-console.log(str);   // this string is broken across multiplelines.
- -

Meskipun JavaScript tidak memiliki sintaks "heredoc", Anda bisa mendekat dengan menambahkan pelolosan baris istirahat dan baris istirahat pada akhir setiap baris:

- -
var poem =
-'Roses are red,\n\
-Violets are blue.\n\
-Sugar is sweet,\n\
-and so is foo.'
- -

ECMAScript 2015 memperkenalkan tipe literal baru, yaitu  template literal . Hal ini memungkinkan banyak fitur baru termasuk string beberapa baris!

- -

 

- -
var poem =
-`Roses are red,
-Violets are blue.
-Sugar is sweet,
-and so is foo.`
- -

 

- -

Informasi lebih lanjut

- -

Bab ini berfokus pada sintaks dasar untuk deklarasi dan tipe. Untuk mempelajari lebih lanjut tentang konstruksi bahasa JavaScript, lihat juga bab-bab berikut dalam panduan ini:

- - - -

Pada bab berikutnya, kita akan melihat konstruksi aliran kontrol dan penanganan kesalahan.

diff --git a/files/id/web/javascript/panduan/working_with_objects/index.html b/files/id/web/javascript/panduan/working_with_objects/index.html deleted file mode 100644 index 4449732e61..0000000000 --- a/files/id/web/javascript/panduan/working_with_objects/index.html +++ /dev/null @@ -1,492 +0,0 @@ ---- -title: Bekerja dengan objek -slug: Web/JavaScript/Panduan/Working_with_Objects -tags: - - 'I10n:priority' - - JavaScript - - Konstruktor - - Membandingkan objek - - Objek - - Panduan - - Pemula - - dokumen -translation_of: Web/JavaScript/Guide/Working_with_Objects ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
- -

JavaScript dirancang berdasarkan paradigma berbasis objek sederhana. Objek adalah kumpulan dari properti, dan properti adalah sepasang hubungan antara nama (atau kunci) dan nilai. Nilai properti bisa berupa fungsi, Dalam hal ini properti itu disebut metode. Selain objek yang sudah di tentukan pada peramban, Kamu bisa menentukan objekmu sendiri. Bab ini menjelaskan cara memakai objek, properti, fungsi, dan metode, serta bagaimana cara membuat objekmu sendiri.

- -

Ikhtisar objek

- -

Objek di JavaScript sama seperti kebanyakan bahasa pemrograman lainnya, bisa dibandingkan dengan objek dalam kehidupan nyata. Konsep objek dalam JavaScript dapat dipahami dengan kehidupan nyata, objek nyata.

- -

Di JavaScript, objek adalah entitas yang mandiri dengan properti dan tipe. Bandingkan dengan cangkir, misalnya. Sebuah cangkir adalah objek dengan banyak properti. Cangkir punya warna, desain, berat, materi bahan, dll. Dengan cara sama, objek JavaScript juga punya banyak properti yang menjelaskan karakteristiknya.

- -

Objek dan properti

- -

Objek JavaScript punya banyak properti yang terkait dengannya. Properti dari objek dapat didefinisikan sebagai variabel yang dilampirkan pada objek itu. Properti dari objek pada dasarnya sama dengan variabel JavaScript biasa, kecuali lampiran pada objek. Properti objek menentukan karakteristik objek itu. Kamu mengakses properti objek dengan sebuah notasi titik sederhana:

- -
objectName.propertyName
-
- -

Seperti semua variabel JavaScript, baik nama objek (bisa jadi variabel normal) maupun nama properti peka terhadap besar huruf. Kamu bisa mendefinisi properti dengan mengassign nilai. Contohnya, ayo buat objek bernama myCar dan dan berikan dia properti bernama make, model, dan year sebagai berikut:

- -
var myCar = new Object();
-myCar.make = 'Ford';
-myCar.model = 'Mustang';
-myCar.year = 1969;
-
- -

Nilai properti objek yang tidak diassign adalah {{jsxref("undefined")}} (dan bukan {{jsxref("null")}}).

- -
myCar.color; // undefined
- -

Properti dari objek JavaScript juga bisa diakses atau diset menggunakan notasi kurung siku (untuk lebih detil lihat aksesor properti). Terkadang objek disebut associative array, karena tiap properti dikaitkan dengan nilai string yang bisa digunakan untuk mengaksesnya. Jadi, contohnya, kamu bisa mengakses properti dari objek myCar seperti berikut:

- -
myCar['make'] = 'Ford';
-myCar['model'] = 'Mustang';
-myCar['year'] = 1969;
-
- -

Nama properti objek bisa berupa string dari JavaScript yang valid, atau apapun yang dapat diubah menjadi string, termasuk string kosong. Namun, nama properti apapun yang tidak valid sebagai identitas di JavaScript (contohnya, nama properti yang memiliki spasi atau tanda hubung, atau yang dimulai dengan angka) hanya bisa diakses menggunakan notasi kurung siku. Notasi ini juga sangat berguna ketika nama properti harus ditentukan secara dinamis (ketika nama properti belum ditentukan hingga runtime). Contohnya sebagai berikut:

- -
// empat variabel dibuat dan diberi nilai sekali jalan,
-// dipisahkan oleh koma
-var myObj = new Object(),
-    str = 'myString',
-    rand = Math.random(),
-    obj = new Object();
-
-myObj.type              = 'Syntax titik';
-myObj['date created']   = 'String dengan spasi';
-myObj[str]              = 'Nilai string';
-myObj[rand]             = 'Angka Random';
-myObj[obj]              = 'Objek';
-myObj['']               = 'Bahkan string kosong';
-
-console.log(myObj);
-
- -

Tolong dicatat bahwa semua kunci di dalam notasi kurung siku diubah ke dalam tipe String, karena objek JavaScript hanya bisa punya tipe String sebagai tipe kunci. Contohnya, dalam kode di atas, ketika kunci  obj ditambahkan dalam myObj, JavaScript akan memanggil method obj.toString() , dan menggunakan hasil string ini sebagai kunci baru.

- -

Kamu juga bisa mengakses properti menggunakan nilai string yang disimpan dalam variabel:

- -
var propertyName = 'make';
-myCar[propertyName] = 'Ford';
-
-propertyName = 'model';
-myCar[propertyName] = 'Mustang';
- -

Kamu bisa menggunakan notasi kurung siku dengan for...in untuk mengiterasi ulang semua kumpulan properti yang terdaftar dari sebuah objek. Untuk mengilustrasikan cara kerjanya, fungsi berikut ini menampilkan properti dari objek ketika kamu memasukkan objek dan nama objek sebagai argumen pada fungsi:

- -
function showProps(obj, objName) {
-  var result = '';
-  for (var i in obj) {
-    // obj.hasOwnProperty() digunakan untuk menyaring properti dari rantai prototipe objek
-    if (obj.hasOwnProperty(i)) {
-      result += objName + '.' + i + ' = ' + obj[i] + '\n';
-    }
-  }
-  return result;
-}
-
- -

Jadi memanggil fungsi showProps(mobilKu, "mobilKu") akan mengembalikan:

- -
myCar.make = Ford
-myCar.model = Mustang
-myCar.year = 1969
- -

Mengenumerasi properti dari objek

- -

Mulai ECMAScript 5, ada tiga cara asli untuk mendaftarkan/melintasi properti objek:

- - - -

Sebelum ECMAScript 5, tidak ada cara asli untuk mendaftarkan semua properti-properti dari suatu objek. Namun, ini dapat dicapai dengan fungsi berikut:

- -
function listAllProperties(o) {
-	var objectToInspect;
-	var result = [];
-
-	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {
-      result = result.concat(Object.getOwnPropertyNames(objectToInspect));
-	}
-
-	return result;
-}
-
- -

Ini dapat berguna untuk memperlihatkan properti-properti  tersembunyi" (properti-properti dalam rantai prototip yang tidak dapat diakses melalui objek, karena properti lain memiliki nama yang sama di rantai prototip sebelumnya). Mendaftarkan properti-properti yang dapat diakses hanya dapat dilakukan dengan menghapus duplikat di dalam array.

- -

Membuat objek baru

- -

JavaScript mempunyai sejumlah objek yang telah ditetapkan. Selain itu, kamu dapat membuat objek sendiri. Kamu bisa membuat sebuah objek menngunakan sebuah object initializer. Sebagai alternatif, kamu bisa membuat sebuah fungsi konstruktor lalu menginstanisasi sebuah pemanggilan objek bersama dengan operator new.

- -

Menggunakan object initializer

- -

Selain membuat objek menggunakan fungsi konstruktor, kamu bisa membuat objek memakai object initializer. Kadang pemakaian object initializer disamakan dengan pembuatan objek dengan notasi literal. "Object initializer" sama dengan terminologi dalam C++.

- -

Syntax untuk objek yang menggunakan object initializer ialah:

- -
var obj = { property_1:   value_1,   // property_# bisa berupa identifier...
-            2:            value_2,   // atau angka...
-            // ...,
-            'property n': value_n }; // atau string
-
- -

Di mana obj adalah nama objek baru, setiap property_i adalah identifier (baik nama, angka, atau string literal), dan setiap value_i adalah expresi yang nilainya diassign ke property_i.  obj dan assignment adalah opsional, jika kamu tidak butuh rujukan ke objek ini, kamu tak usah mengassign dia ke variabel. (Ingat bahwa kamu harus membungkus literal objek dalam tanda kurung jika objeknya muncul dalam statement diharapkan, supaya bisa membedakan mana literal dan mana statement blok.)

- -

Object initializer adalah expresi, dan setiap object initializer mengembalikan objek baru. Objek baru dibuat saat ia muncul dalam statement yang dieksekusi. Object initializer yang identik membuat objek berbeda yang tidak akan sama bila dibandingkan. Objek dibuat seolah-olah ada panggilan new Object(); yaitu, objek yang dibuat dari expresi literal objek adalah instance dari Object.

- -

Statement berikut membuat objek dan mengassign dia ke variabel x jika dan hanya jika expresi cond benar:

- -
if (cond) var x = {greeting: 'hi there'};
-
- -

Contoh berikut membuat myHonda dengan tiga properti. Ingat bahwa properti engine juga adalah objek yang punya properti sendiri.

- -
var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
-
- -

Kamu juga bisa menggunakan object initializer untuk membuat array. Lihat literal array.

- -

Menggunakan fungsi konstruktor

- -

Kamu bisa membuat objek dengan dua langkah alternatif ini:

- -
    -
  1. Definisikan tipe objek dengan menulis fungsi konstruktor. Ada konvensi dengan alasan bagus untuk menggunakan huruf kapital inisial.
    2. -
  2. Membuat instance objek dengan new.
    3. -
- -

Untuk mendefinisi tipe objek, buat fungsi untuk tipe objek tersebut yang menspesifikasi nama, properti, dan metodenya. Misalnya, kamu ingin membuat tipe objek untuk mobil. Kamu ingin jenis objek ini disebut Car, dan kamu ingin punya properti pembuat, model, dan tahun. Untuk melakukan ini, kamu akan menulis fungsi berikut:

- -
function Car(make, model, year) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-}
- -

Perhatikan penggunaan this untuk mengassign nilai ke properti objek berdasarkan nilai yang diteruskan kepada fungsi.

- -

Sekarang kamu bisa membuat objek myCar sebagai berikut:

- -
var mycar = new Car('Eagle', 'Talon TSi', 1993);
- -

Statement ini membuat myCar dan mengassign ia nilai spesifik untuk propertinya. Lalu nilai dari myCar.make ialah string "Eagle", myCar.year ialah integer 1993, dan seterusnya.

- -

Kamu bisa membuat sejumlah objek Car dengan memanggil new. Sebagai contoh.

- -
var kenscar = new Car('Nissan', '300ZX', 1992);
-var vpgscar = new Car('Mazda', 'Miata', 1990);
- -

Objek bisa punya properti yang merupakan objek lain. Misalnya, kamu mendefinisi objek person sebagai berikut:

- -
function Person(name, age, sex) {
-  this.name = name;
-  this.age = age;
-  this.sex = sex;
-}
- -

dan kemudian menginstantiasi dua objek person baru sebagai berikut:

- -
var rand = new Person('Rand McKinnon', 33, 'M');
-var ken = new Person('Ken Jones', 39, 'M');
- -

Kemudian, kamu bisa menulis ulang definisi Car untuk memasukkan properti owner yang mengambil objek person sebagai berikut:

- -
function Car(make, model, year, owner) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-  this.owner = owner;
-}
- -

Untuk menginstantiasi objek baru, gunakan ini:

- -
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
-var car2 = new Car('Nissan', '300ZX', 1992, ken);
- -

Perhatikan bahwa ketimbang meneruskan nilai string atau integer literal ketika membuat objek baru, statement diatas meneruskan objek rand dan ken sebagai argumen untuk pemilik. Lalu jika kamu mau mencari nama pemilik car2, kamu bisa mengakses properti berikut:

- -
car2.owner.name
-
- -

Ingat bahwa kamu selalu bisa menambah properti ke objek yang sudah dibuat sebelumnya. Contohnya statement

- -
car1.color = 'black';
-
- -

menambah properti color pada car1, dan mengassign nilai "black". Ini tak mempengaruhi objek lain. Untuk menambah properti baru ke semua objek dari tipe yang sama, kamu harus menambah properti pada definisi tipe objek Car.

- -

Menggunakan metode Object.create

- -

Objek bisa juga dibuat menggunakan metode {{jsxref("Object.create()")}}. Metode ini bisa sangat berguna, karena ia memungkinkan kamu memilih prototipe objek untuk objek yang mau kamu buat, tanpa harus mendefinisi fungsi konstruktor.

- -
// Enkapsulasi metode dan properti Animal
-var Animal = {
-  type: 'Invertebrates', // Nilai properti default
-  displayType: function() {  // Method which will display type of Animal
-    console.log(this.type);
-  }
-};
-
-// Create new animal type called animal1 
-var animal1 = Object.create(Animal);
-animal1.displayType(); // Output:Invertebrates
-
-// Create new animal type called Fishes
-var fish = Object.create(Animal);
-fish.type = 'Fishes';
-fish.displayType(); // Output:Fishes
- -

Warisan

- -

Semua objek di javascript diwariskan setidaknya dari satu objek lain. Objek yang diwariskan disebut prototipe, dan properti warisan bisa ditemukan dalam objek prototype dari konstruktor. Lihat Rantai warisan dan prototype untuk informasi lebih lanjut.

- -

Mengindex properti objek

- -

Kamu dapat merujuk ke properti dari objek menggunakan nama propertinya ataupun index urutannya. Jika kamu awalnya mendefinisi properti memakai namanya, kamu harus selalu merujuknya dengan namanya, dan jika kamu awalnya mendefinisikan properti memakai index, kamu harus selalu merujuknya dengan indexnya.

- -

Pembatasan ini berlaku ketika kamu membuat objek dan propertinya dengan fungsi konstruktor (seperti yang kita lakukan sebelumnya dengan jenis objek Car) dan ketika kamu mendefinisi properti individual secara explisit (misalnya, myCar.color = "ref"). Jika kamu awalnya mendefinisi properti objek dengan index, seperti myCar[5] = "25 mpg", maka kamu merujuk ke properti tersebut dengan myCar[5].

- -

Pengecualian dalam aturan ini adalah objek mirip-array pantulan dari HTML, seperti objek mirip-array forms. Kamu selalu dapat merujuk ke objek dalam objek mirip-array ini menggunakan nomor urutan mereka (berdasarkan di mana mereka muncul dalam dokumen) atau nama mereka (jika didefinisi). Misalnya, jika tag <FORM> kedua dalam dokumen punya atribut NAME "myForm", kamu dapat merujuk ke form tersebut sebagai document.forms[1] atau document.forms["myForm"] atau document.forms.myForm.

- -

Mendefinisi properti untuk tipe objek

- -

Kamu dapat menambah properti ke tipe objek yang didefinisi sebelumnya menggunakan properti prototype. Ini mendefinisi properti yang dibagikan semua objek dari tipe yang dispesifikasi, bukan cuma satu instance objek. Kode berikut menambahkan sebuah properti color ke semua objek dari tipe objek Car, dan kemudian mengassign nilai ke properti color dari objek car1.

- -
Car.prototype.color = null;
-car1.color = 'black';
- -

Lihat properti prototipe dari objek Function dalam referensi JavaScript untuk informasi lebih lanjut.

- -

Mendefiniskan metode

- -

Metode ialah fungsi yang terasosiasi dengan objek, atau sederhananya, metode ialah properti dari objek berupa fungsi. Metode didefinisi sebagai cara fungsi nornal didefinisi, kecuali mereka harus diassign sebagai properti objek. Lihat juga definisi metode untuk lebih detil. Contohnya:

- -
objectName.methodname = functionName;
-
-var myObj = {
-  myMethod: function(params) {
-    // ...do something
-  }
-
-  // OR THIS WORKS TOO
-
-  myOtherMethod(params) {
-    // ...do something else
-  }
-};
-
- -

Di mana objectName adalah metode yang sudah ada, methodname ialah nama yang kamu assign ke metode, dan functionName adalah nama fungsi.

- -

Lalu kamu bisa memanggil metode dalam kontex objek sebagai berikut:

- -
object.methodname(params);
-
- -

Kamu bisa mendefinisi metode untuk tipe objek dengan memasukkan sebuah definisi metode dalam fungsi konstruktor objek. Kamu bisa mendefinisi fungsi yang akan memformat dan menampilkan properti objek Car sebelumnya; contohnya,

- -
function displayCar() {
-  var result = `A Beautiful ${this.year} ${this.make} ${this.model}`;
-  pretty_print(result);
-}
- -

Di mana pretty_print adalah fungsi untuk menampilkan garis horizontal dan string. Perhatikan penggunaan this untuk merujuk ke objek yang punya metode tersebut.

- -

Kamu bisa menjadikan fungsi ini metode Car dengan menambah statement

- -
this.displayCar = displayCar;
- -

ke definisi objek. Jadi definisi penuh dari Car sekarang akan terlihat seperti

- -
function Car(make, model, year, owner) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-  this.owner = owner;
-  this.displayCar = displayCar;
-}
- -

Maka kamu bisa memanggil metode displayCar untuk masing-masig objek sebagai berikut:

- -
car1.displayCar();
-car2.displayCar();
- -

Menggunakan this untuk referensi Objek

- -

JavaScript punya katakunci spesial this, kamu bisa memakainya dalam metode untuk merujuk ke objek saat ini. Misalnya, kamu punya fungsi yang disebut validate yang memvalidasi properti value, yang diberikan objek dan nilai atas dan bawah:

- -
function validate(obj, lowval, hival) {
-  if ((obj.value < lowval) || (obj.value > hival)) {
-    alert('Invalid Value!');
-  }
-}
-
- -

Kemudian kamu bisa panggil validate di penangan event onchange setiap elemen form, gunakan this untuk meneruskan elemen. Seperti contoh berikut:

- -
<input type="text" name="age" size="3"
-  onChange="validate(this, 18, 99)">
-
- -

Secara umum, this merujuk ke pemanggilan objek dalam metode.

- -

Ketika dikombinasikan dengan properti form, this bisa mengacu ke induk objek form saat ini. Dalam contoh berikut, form myForm berisi objek Text dan sebuah tombol. Ketika pengguna mengklik tombol, nilai objek Text diset ke nama form tersebut. Penangan event onclick tombol menggunakan this.form untuk merujuk ke induk form, myForm.

- -
<form name="myForm">
-<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
-<p><input name="button1" type="button" value="Show Form Name"
-     onclick="this.form.text1.value = this.form.name">
-</p>
-</form>
- -

Mendefinisikan getter dan setter

- -

Getter ialah metode yang mendapat nilai dari properti spesifik. Setter ialah metode yang mengatur nilai properti spesifik. Kamu bisa mendefinisi getter dan setter objek inti apapun yang sudah ditetapkan atau objek yang ditetapkan pengguna yang mendukung penambahan peroperti-properti baru. Syntax untuk mendefinisi getter dan setter menggunakan syntax literal objek.

- -

Berikut ilustrasi cara getter dan setter bisa bekerja untuk objek o yang sudah didefinisi user.

- -
var o = {
-  a: 7,
-  get b() {
-    return this.a + 1;
-  },
-  set c(x) {
-    this.a = x / 2;
-  }
-};
-
-console.log(o.a); // 7
-console.log(o.b); // 8
-o.c = 50;
-console.log(o.a); // 25
-
- -

Properti objek o adalah:

- - - -

Harap diingat bahwa nama fungsi dari getter dan setter yang didefisini dalam literal objek menggunakan "[gs]et property()" (dibandingkan dengan __define[GS]etter__ ) bukanlah nama getter mereka sendiri, meski syntax [gs]et propertyName(){ } membuatmu berpikir lain. Untuk menamai fungsi dalam getter atau setter menggunakan syntax "[gs]et property()", definiskan fungsi, dengan nama explisit, secara terprogram menggunakan Object.defineProperty (atau pengganti legacy Object.prototype.__defineGetter__).

- -

Kode berikut mengilustrasikan cara getter dan setter bisa memperluas prototipe {{jsxref("Date")}} untuk menambah properti year ke semua instance dari kelas Date yang sudah didefinisi. Ia menggunakan metode kelas Date yang sudah ada, getFullYear dan setFullYear untuk mendukung properti getter dan setter year.

- -

Statement ini mendefinisi getter dan setter untuk properti tahun:

- -
var d = Date.prototype;
-Object.defineProperty(d, 'year', {
-  get: function() { return this.getFullYear(); },
-  set: function(y) { this.setFullYear(y); }
-});
-
- -

Statement ini menggunakan getter dan setter dalam objek Date:

- -
var now = new Date();
-console.log(now.year); // 2000
-now.year = 2001; // 987617605170
-console.log(now);
-// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
-
- -

Secara pinsip, getter dan setter bisa

- - - -

Ketika mendefiniisi getter dan setter menggunakan object initializer yang harus kamu lakukan adalah memprefix metode getter dengan get dan metode setter dengan set. Tentunya, metode getter tidak boleh mengharapkan parameter, lalu metode setter mengharapkan hanya satu parameter (nilai baru untuk diset). Contohnya:

- -
var o = {
-  a: 7,
-  get b() { return this.a + 1; },
-  set c(x) { this.a = x / 2; }
-};
-
- -

Getter dan setter juga bisa ditambah ke objek kapanpun setelah membuat objek menggunakan metode Object.defineProperties. Parameter pertama metode ini ialah object tempat kamu mendefinisi getter atau setter. Parameter kedua ialah objek yang nama propertinya berupa nama getter atau setter,dan yang nilai propertinya berupa objek yang mendefinisi fungsi getter atau setter. Berikut adalah contoh mendefinisi getter dan setter yang sama yang digunakan dalam contoh sebelumnya:

- -
var o = { a: 0 };
-
-Object.defineProperties(o, {
-    'b': { get: function() { return this.a + 1; } },
-    'c': { set: function(x) { this.a = x / 2; } }
-});
-
-o.c = 10; // Menjalankan setter, yang mengassign 10 / 2 (5) ke properti 'a'
-console.log(o.b); // Menjalankan getter, yang menghasilkan a + 1 atau 6
-
- -

Yang manapun dari dua form ini yang dipilih tergantung dari gaya pemrograman dan tugas di tangan. Jika kamu sudah memilih object initializer ketika mendefinisi prototipe kamu mungkin akan sering memilih form pertama. Form ini lebih compact dan natural. Namun, kalau kamu harus menambah getter dan setter nanti — karena kamu tak menulis prototipenya atau object khusus — maka form kedua menjadi satu-satunya solusi. Form kedua mungkin paling baik mewakiliki sifat dinamis JavaScript — tapi ia bisa membuat kode sulit dibaca dan dipahami.

- -

Menghapus properti

- -

Kamu bisa menghapus properti yang bukan warisan menggunakan operator delete. Kode berikut menampilkan cara menghapus properti.

- -
// Membuat objek baru, myobj, dengan dua properti, a dan b.
-var myobj = new Object;
-myobj.a = 5;
-myobj.b = 12;
-
-// Mengapus properti a, menyisakan myobj hanya dengan properti b.
-delete myobj.a;
-console.log ('a' in myobj); // menghasilkan "false"
-
- -

Kamu juga bisa memakai delete untuk menghapus variabel global jika katakunci var tidak dipakai untuk mendeklarasi variabel itu:

- -
g = 17;
-delete g;
-
- -

Membandingkan objek

- -

Dalam JavaScript objek ialah tipe referensi. Dua objek berbeda tak akan pernah sama, meski mereka punya properti yang sama. Hanya membandingkan referensi objek yang sama dengannya menghasilkan true.

- -
// Dua variabel, dua objek berbeda dengan properti yang sama
-var fruit = {name: 'apple'};
-var fruitbear = {name: 'apple'};
-
-fruit == fruitbear; // mengembalikan false
-fruit === fruitbear; // mengembalikan false
- -
// Dua variabel, objek tunggal
-var fruit = {name: 'apple'};
-var fruitbear = fruit;  // assign referensi objek buah ke fruitbear
-
-// di sini fruit dan fruitbear menunjuk ke objek yang sama
-fruit == fruitbear; // mengembalikan true
-fruit === fruitbear; // mengembalikan true
-
- -
fruit.name = 'grape';
-console.log(fruitbear);    // menghasilkan { name: "grape" } ketimbang { name: "apple" }
-
- -

Untuk informasi lebih tentang operator pembandingan, lihat Operator pembandingan.

- -

Lihat juga

- - - -

{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}

diff --git a/files/id/web/javascript/reference/global_objects/function/prototype/index.html b/files/id/web/javascript/reference/global_objects/function/prototype/index.html deleted file mode 100644 index 4bb3ebffbe..0000000000 --- a/files/id/web/javascript/reference/global_objects/function/prototype/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Function.prototype -slug: Web/JavaScript/Reference/Global_Objects/Function/prototype -tags: - - Function - - JavaScript - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Function -translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype ---- -
{{JSRef}}
- -

Properti Function.prototype mewakili objek properti {{jsxref("Function")}} .

- -

Deskripsi

- -

Objek {{jsxref("Function")}} turunan dari Function.prototype.  Function.prototype tidak dapat di ubah.

- -

Properti

- -
-
{{jsxref("Function.arguments")}} {{deprecated_inline}}
-
Sebuah array berdasakan argumen yang diberikan ke sebuah fungsi. Ini telah diabaikan sebagai properti dari {{jsxref("Function")}}, gunakan objek {{jsxref("Functions/arguments", "arguments")}} yang tersedia di dalam fungsi saja.
-
{{jsxref("Function.arity")}} {{obsolete_inline}}
-
Digunakan untuk menentukan jumlah argumen yang diperlukan fungsi, tapi telah dihapus. Gunakan properti {{jsxref("Function.length", "length")}}.
-
{{jsxref("Function.caller")}} {{non-standard_inline}}
-
Menentukan fungsi yang dipanggil oleh fungsi yang sedang dijalankan saat ini.
-
{{jsxref("Function.length")}}
-
Menentukan jumlah argumen yang diperlukan oleh fungsi.
-
{{jsxref("Function.name")}}
-
Nama dari fungsi.
-
{{jsxref("Function.displayName")}} {{non-standard_inline}}
-
Tampilan nama fungsi.
-
Function.prototype.constructor
-
Menentukan fungsi yang membuat objek prototype. Lihat {{jsxref("Object.prototype.constructor")}} untuk lebih detailnya.
-
- -

Method

- -
-
{{jsxref("Function.prototype.apply()")}}
-
Memanggil fungsi dan menentukan nilai this berdasar nilai yang diberikan, argument bisa ditambahkan sebagai objek {{jsxref("Array")}}.
-
{{jsxref("Function.prototype.bind()")}}
-
Membuat fungsi baru dimana, ketika dipanggil, memiliki this yang diberi nilai yang tersedia, dengan urutan tertentu sesudah nilai yang tersedia ketika fungsi di jalankan.
-
{{jsxref("Function.prototype.call()")}}
-
Memanggil (menjalankan) sebuah fungsi dan memberi nilai this dari nilai yang tersedia, argumen bisa ditambahkan sebagaimana mestinya.
-
{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}
-
Mengembalikan true jika fungsi adalah sebuah generator; selain itu akan mengembalikan  nilai false.
-
{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}
-
Mengembalikan string berdasarkan kode sumber dari fungsi. Mengesampingkan method {{jsxref("Object.prototype.toSource")}}.
-
{{jsxref("Function.prototype.toString()")}}
-
Mengembalikan string berdasarkan kode sumber dari fungsi, mengesampingkan method {{jsxref("Object.prototype.toString")}}.
-
- -

Spesifikasi

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpesifikasiStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1
{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ESDraft')}} 
- -

Kompabilitas Browser

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Lihat Juga

- - diff --git a/files/id/web/javascript/reference/global_objects/string/purwarupa/index.html b/files/id/web/javascript/reference/global_objects/string/purwarupa/index.html deleted file mode 100644 index baec1f2b84..0000000000 --- a/files/id/web/javascript/reference/global_objects/string/purwarupa/index.html +++ /dev/null @@ -1,222 +0,0 @@ ---- -title: String.prototype -slug: Web/JavaScript/Reference/Global_Objects/String/purwarupa -tags: - - JavaScript - - Property - - Prototype - - Reference - - Referensi - - String - - purwarupa -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype ---- -
{{JSRef}}
- -

Properti String.prototype mewakili objek prototype {{jsxref("Global_Objects/String", "String")}}.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Deskripsi

- -

Semua benda {{jsxref("Global_Objects/String", "String")}} diwariskan dari String.prototype. Perubahan ke objek purwarupa String disebarkan ke semua benda {{jsxref("Global_Objects/String", "String")}}.

- -

Properti

- -
-
String.prototype.constructor
-
Menentukan fungsi yang membuat sebuah purwarupa dari objek.
-
{{jsxref("String.prototype.length")}}
-
Menggambarkan panjang dari string.
-
N
-
Digunakan untuk mengakses karakter pada posisi ke-N di mana N adalah sebuah bilangan bulat positif antara 0 dan nilai dari {{jsxref("String.length", "panjang")}} dikurangi satu. Nilai ini baca-saja.
-
- -

Metode

- -

Metode yang tidak terkait dengan HTML

- -
-
{{jsxref("String.prototype.charAt()")}}
-
Mengembalikan karakter pada indeks yang diberikan.
-
{{jsxref("String.prototype.charCodeAt()")}}
-
Mengembalikan sebuah angka yang menggambarkan nilai Unicode dari karakter pada indeks yang diberikan.
-
{{jsxref("String.prototype.codePointAt()")}} {{experimental_inline}}
-
Mengembalikan sebuah bilangan bulat non negatif yang merupakan nilai penyandian code point UTF-16 pada posisi yang diberikan.
-
{{jsxref("String.prototype.concat()")}}
-
Menggabungkan teks dari dua string dan mengembalikan sebuah string baru.
-
{{jsxref("String.prototype.includes()")}} {{experimental_inline}}
-
Menentukan apakah satu string mungkin terdapat pada string lain.
-
{{jsxref("String.prototype.endsWith()")}} {{experimental_inline}}
-
Menentukan apakah sebuah string berakhir dengan karakter dari string lain.
-
{{jsxref("String.prototype.indexOf()")}}
-
Mengembalikan indeks pada objek {{jsxref("Global_Objects/String", "String")}} terpanggil dari pertemuan pertama dari nilai yang diberikan, atau -1 jika tidak ditemukan.
-
{{jsxref("String.prototype.lastIndexOf()")}}
-
Mengembalikan indeks pada objek {{jsxref("Global_Objects/String", "String")}} terpanggil dari pertemuan terakhir dari nilai yang diberikan, atau -1 jika tidak ditemukan.
-
{{jsxref("String.prototype.localeCompare()")}}
-
Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.
-
{{jsxref("String.prototype.match()")}}
-
Digunakan untuk mencocokkan sebuah regular expression pada string.
-
{{jsxref("String.prototype.normalize()")}} {{experimental_inline}}
-
Mengembalikan Unicode Normalization Form dari string terpanggil.
-
{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}
-
Membungkus string dalam petik ganda (""").
-
{{jsxref("String.prototype.repeat()")}} {{experimental_inline}}
-
Mengembalikan sebuah string yang tersiri dari elemen-elemen dari objek yang diulangi sebanyak yang diberikan.
-
{{jsxref("String.prototype.replace()")}}
-
Digunakan untuk mencari kecocokkan antara sebuah regular expression dan sebuah string, dan untuk menggantikan substring yang cocok dengan substring yang baru.
-
{{jsxref("String.prototype.search()")}}
-
Menjalankan pencarian untuk sebuah kecocokan antara sebuah regular expression dan sebuah string yang diberikan.
-
{{jsxref("String.prototype.slice()")}}
-
Menghasilkan sebuah bagian dari string dan mengembalikan sebuah string baru.
-
{{jsxref("String.prototype.split()")}}
-
Memisahkan sebuah objek {{jsxref("Global_Objects/String", "String")}} ke dalam sebuah susunan dari string dengan memisahkan string ke dalam substring.
-
{{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}
-
Menentukan apakah sebuah string dimulai dengan karakter dari string lain.
-
{{jsxref("String.prototype.substr()")}}
-
Mengembalikan karakter-karakter dalam sebuah string yang dimulai dari indeks yang diberikan sebanyak jumlah karakter yang diberikan.
-
{{jsxref("String.prototype.substring()")}}
-
Mengembalikan karakter-karakter dalam sebuah string antara dua indeks ke dalam string.
-
{{jsxref("String.prototype.toLocaleLowerCase()")}}
-
Karakter-karakter di dalam string diubah menjadi huruf kecil dengan menjunjung tempat sekarang. Kebanyakan bahasa akan mengembalikan hasil yang sama seperti {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.
-
{{jsxref("String.prototype.toLocaleUpperCase()")}}
-
Karakter-karakter di dalam string diubah menjadi huruf kapital dengan menjunjung tempat sekarang. Kebanyakan bahasa akan mengembalikan hasil yang sama seperti {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.
-
{{jsxref("String.prototype.toLowerCase()")}}
-
Mengembalikan nilai string terpanggil yang diubah menjadi huruf kecil.
-
{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}
-
Mengembalikan sebuah objek harfiah yang menggambarkan objek yang diberikan; Anda dapat menggunakan nilai ini untuk membuat sebuah objek baru. Mengesampingkan metode {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("String.prototype.toString()")}}
-
Mengembalikan sebuah string menggambarkan objek yang diberikan. Mengesampingkan metode {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("String.prototype.toUpperCase()")}}
-
Mengembalikan nilai string terpanggil yang diubah menjadi huruf kapital.
-
{{jsxref("String.prototype.trim()")}}
-
Memotong whitespace dari permulaan dan akhir string. Bagian dari standar ECMAScript 5.
-
{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}
-
Memotong whitespace dari sisi kiri dari string.
-
{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}
-
Memotong whitespace dari sisi kanan dari string.
-
{{jsxref("String.prototype.valueOf()")}}
-
Mengembalikan nilai primitif dari objek yang diberikan. Mengesampingkan metode {{jsxref("Object.prototype.valueOf()")}}.
-
{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}} {{experimental_inline}}
-
Mengembalikan sebuah objek Iterator baru yang mengulangi melewati code points dari nilai String, mengembalikan setiap code point sebagai sebuah nilai String.
-
- -

Metode pembungkus HTML

- -

Metode-metode ini merupakan penggunaan terbatas, karena mereka hanya memberikan sebuah subset dari tag dan atribut HTML yang tersedia.

- -
-
{{jsxref("String.prototype.anchor()")}}
-
{{htmlattrxref("name", "a", "<a name=\"name\">")}} (menarget hiperteks)
-
{{jsxref("String.prototype.big()")}} {{deprecated_inline}}
-
{{HTMLElement("big")}}
-
{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}
-
{{HTMLElement("blink")}}
-
{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}
-
{{HTMLElement("b")}}
-
{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}
-
{{HTMLElement("tt")}}
-
{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}
-
{{htmlattrxref("color", "font", "<font color=\"color\">")}}
-
{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}
-
{{htmlattrxref("size", "font", "<font size=\"size\">")}}
-
{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}
-
{{HTMLElement("i")}}
-
{{jsxref("String.prototype.link()")}}
-
{{htmlattrxref("href", "a", "<a href=\"url\">")}} (tautan ke URL)
-
{{jsxref("String.prototype.small()")}} {{deprecated_inline}}
-
{{HTMLElement("small")}}
-
{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}
-
{{HTMLElement("strike")}}
-
{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}
-
{{HTMLElement("sub")}}
-
{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}
-
{{HTMLElement("sup")}}
-
- -

Spesifikasi

- - - - - - - - - - - - - - - - - - - - - - - - -
SpesifikasiStatusKomentar
ECMAScript 1st Edition.StandardDefinisi awal.
{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ES6')}} 
- -

Kompatibilitas peramban

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Lihat juga

- - diff --git a/files/id/web/javascript/reference/operators/function/index.html b/files/id/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..5366891a5c --- /dev/null +++ b/files/id/web/javascript/reference/operators/function/index.html @@ -0,0 +1,153 @@ +--- +title: ungkapan fungsi +slug: Web/JavaScript/Reference/Operators/fungsi +tags: + - Fungsi + - JavaScript + - Operator + - Ungkapan Utama +translation_of: Web/JavaScript/Reference/Operators/function +--- +
{{jsSidebar("Operators")}}
+ +
Kata kunci fungsi digunakan untuk mendefinisikan fungsi dalam sebuah ungkapan.
+ +
 
+ +

Sintaksis

+ +
function [nama]([param1[, param2[, ..., paramN]]]) {
+   pernyataan
+}
+ +

Parameters

+ +
+
nama
+
Bisa dihilangkan apabila fungsi merupaka fungsi anonim. Nama fungsi bersifat lokal, relatif terhadap tubuh fungsi.
+
paramN
+
Nama argumen yang akan diumpankan kepada fungsi.
+
pernyataan
+
Pernyataan yang menyusun tubuh fungsi.
+
+ +

Deskripsi

+ +

Sintaksis ungkapan fungsi nyaris sama apabila dibandingkan dengan sintaksis pernyataan fungsi(lihat pernyataan fungsi untuk lebih jelasnya). Perbedaan utama antara ungkapan fungsi dengan pernyataan fungsi ialah; ungkapan fungsi memperbolehkan nama fungsi untuk tidak digunakan/dihilangkan apabila ungkapan fungsi tersebut merupakan fungsi anonim. Ungkapan fungsi dapat digunakan sebagai IIFE (immediately Invoked Function Expression), sebuah fungsi yang otomatis dijalankan apabila didefinisikan. Untuk informasi lebih lanjut, lihat juga bab tentang fungsi.

+ +

Contoh

+ +

Dibawah ini merupakan contoh definisi sebuah fungsi tanpa nama yang kemudian ditugaskan kedalam variabel x:

+ +
var x = function(y) {
+   return y * y;
+};
+
+ +

Ungkapan fungsi bernama (Named function expression)

+ +

Apabila sebuah fungsi hendak dipanggil dari dalam tubuh fungsi itu sendiri, pergunakanlah ungkapan fungsi bernama. Nama fungsi bersifat lokal relatif terhadap tubuh fungsi. Manfaat penggunaan ungkapan fungsi bernama ialah menghindarkan penggunaan properti non-standar arguments.callee.

+ +
var math = {
+  'factorial': function factorial(n) {
+    if (n <= 1)
+      return 1;
+    return n * factorial(n - 1);
+  }
+};
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}}Definisi awal. Diterapkan pada JavaScript 1.5.
+ +

Kesesuaian Perambah (Browser)

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan Mendasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan Mendasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/operators/fungsi/index.html b/files/id/web/javascript/reference/operators/fungsi/index.html deleted file mode 100644 index 5366891a5c..0000000000 --- a/files/id/web/javascript/reference/operators/fungsi/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: ungkapan fungsi -slug: Web/JavaScript/Reference/Operators/fungsi -tags: - - Fungsi - - JavaScript - - Operator - - Ungkapan Utama -translation_of: Web/JavaScript/Reference/Operators/function ---- -
{{jsSidebar("Operators")}}
- -
Kata kunci fungsi digunakan untuk mendefinisikan fungsi dalam sebuah ungkapan.
- -
 
- -

Sintaksis

- -
function [nama]([param1[, param2[, ..., paramN]]]) {
-   pernyataan
-}
- -

Parameters

- -
-
nama
-
Bisa dihilangkan apabila fungsi merupaka fungsi anonim. Nama fungsi bersifat lokal, relatif terhadap tubuh fungsi.
-
paramN
-
Nama argumen yang akan diumpankan kepada fungsi.
-
pernyataan
-
Pernyataan yang menyusun tubuh fungsi.
-
- -

Deskripsi

- -

Sintaksis ungkapan fungsi nyaris sama apabila dibandingkan dengan sintaksis pernyataan fungsi(lihat pernyataan fungsi untuk lebih jelasnya). Perbedaan utama antara ungkapan fungsi dengan pernyataan fungsi ialah; ungkapan fungsi memperbolehkan nama fungsi untuk tidak digunakan/dihilangkan apabila ungkapan fungsi tersebut merupakan fungsi anonim. Ungkapan fungsi dapat digunakan sebagai IIFE (immediately Invoked Function Expression), sebuah fungsi yang otomatis dijalankan apabila didefinisikan. Untuk informasi lebih lanjut, lihat juga bab tentang fungsi.

- -

Contoh

- -

Dibawah ini merupakan contoh definisi sebuah fungsi tanpa nama yang kemudian ditugaskan kedalam variabel x:

- -
var x = function(y) {
-   return y * y;
-};
-
- -

Ungkapan fungsi bernama (Named function expression)

- -

Apabila sebuah fungsi hendak dipanggil dari dalam tubuh fungsi itu sendiri, pergunakanlah ungkapan fungsi bernama. Nama fungsi bersifat lokal relatif terhadap tubuh fungsi. Manfaat penggunaan ungkapan fungsi bernama ialah menghindarkan penggunaan properti non-standar arguments.callee.

- -
var math = {
-  'factorial': function factorial(n) {
-    if (n <= 1)
-      return 1;
-    return n * factorial(n - 1);
-  }
-};
-
- -

Spesifikasi

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpesifikasiStatusKomentar
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}}Definisi awal. Diterapkan pada JavaScript 1.5.
- -

Kesesuaian Perambah (Browser)

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan Mendasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan Mendasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Lihat juga

- - diff --git a/files/id/web/javascript/reference/statements/function/index.html b/files/id/web/javascript/reference/statements/function/index.html new file mode 100644 index 0000000000..8ac13d31af --- /dev/null +++ b/files/id/web/javascript/reference/statements/function/index.html @@ -0,0 +1,232 @@ +--- +title: Deklarasi Fungsi +slug: Web/JavaScript/Reference/Statements/fungsi +tags: + - JavaScript + - Pernyataan + - Statement +translation_of: Web/JavaScript/Reference/Statements/function +--- +
{{jsSidebar("Statements")}}
+ +

Deklarasi fungsi mendefinisikan sebuah fungsi dengan parameter-parameter yang ditentukan.

+ +

Fungsi juga dapat didefinisikan menggukanan konstruktor {{jsxref("Function")}} dan {{jsxref("Operators/function", "function expression")}}.

+ +

Sintak

+ +
function name([param,[, param,[..., param]]]) {
+   [statements]
+}
+
+ +
+
name
+
Nama dari fungsi.
+
+ +
+
param
+
Nama dari argumen yang akan dilewatkan kepada fungsi. Jumlah maksimal dari argumen berbeda-beda di setiap mesin.
+
+ +
+
statements
+
Statemen-statemen yang membentuk tubuh dari sebuah fungsi.
+
+ +

Deskripsi

+ +

Sebuah fungsi yang diciptakan dengan deklarasi fungsi adalah sebuah objek Function dan memiliki semua properti, method-method dan tingkah laku dari objek Function. Lihat {{jsxref("Function")}} untuk informasi mendetail tentang fungsi-fungsi.

+ +

Sebuah fungsi juga dapat diciptakan menggunakan sebuah ekspresi (lihat  {{jsxref("Operators/function", "function expression")}}).

+ +

Secara default, fungsi mengembalikan nilai undefined. Untuk mengembalikan nilai lain, fungsi tersebut harus memiliki sebuah {{jsxref("Statements/return", "return")}} statement yang menentukan nilai untuk dikembalikan.

+ +

Fungsi yang dibuat secara kondisional

+ +

Fungsi dapat dideklarasikan secara kondisional, yaitu sebuah statement fungsi dapat disarangkan di dalam sebuah statement if. Kebanyakan aplikasi perambah selain Mozilla akan memperlakukan deklarasi kondisional seperti itu sebagai sebuah deklarasi non kondisional dan menciptakan fungsi tersebut meskipun kondisi bernilai benar atau salah, lihat artikel berikut untuk ikhtisar. Untuk alasan tersebut, deklarasi kondisional seharusnya tidak digunakan -- untuk pembuatakan kondisional gunakan ekspresi fungsi sebagai gantinya.

+ +

Pengangkatan deklarasi fungsi

+ +

Deklarasi fungsi di javaScript mengangkat definisi fungsi. Kamu dapat menggunakan fungsi sebelum kamu mendeklarasikan fungsi tersebut.

+ +
hoisted(); // logs "foo"
+
+function hoisted() {
+  console.log('foo');
+}
+
+ +

Dicatat bahwa {{jsxref("Operators/function", "function expressions")}} tidak terangkat:

+ +
notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+   console.log('bar');
+};
+
+ +

Contoh

+ +

Menggunakan fungsi

+ +

Kode berikut mendeklarasikan sebuah fungsi yang mengembalikan jumlah total penjualan ketika diberikan angka dari unit-unit yang terjual dari produk a, b, dan c.

+ +
function calc_sales(units_a, units_b, units_c) {
+   return units_a * 79 + units_b * 129 + units_c * 699;
+}
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-13', 'Function definition')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
+ +

Kompabilitas Perambah

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Allowed in sloppy mode{{CompatChrome(49.0)}}{{CompatUnknown}}    
Trailing comma in parameters{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("52.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Allowed in sloppy mode{{CompatNo}} +

{{CompatChrome(49.0)}}

+ 		{{CompatUnknown}}     +

{{CompatChrome(49.0)}}

+
Trailing comma in parameters{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("52.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/statements/fungsi/index.html b/files/id/web/javascript/reference/statements/fungsi/index.html deleted file mode 100644 index 8ac13d31af..0000000000 --- a/files/id/web/javascript/reference/statements/fungsi/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -title: Deklarasi Fungsi -slug: Web/JavaScript/Reference/Statements/fungsi -tags: - - JavaScript - - Pernyataan - - Statement -translation_of: Web/JavaScript/Reference/Statements/function ---- -
{{jsSidebar("Statements")}}
- -

Deklarasi fungsi mendefinisikan sebuah fungsi dengan parameter-parameter yang ditentukan.

- -

Fungsi juga dapat didefinisikan menggukanan konstruktor {{jsxref("Function")}} dan {{jsxref("Operators/function", "function expression")}}.

- -

Sintak

- -
function name([param,[, param,[..., param]]]) {
-   [statements]
-}
-
- -
-
name
-
Nama dari fungsi.
-
- -
-
param
-
Nama dari argumen yang akan dilewatkan kepada fungsi. Jumlah maksimal dari argumen berbeda-beda di setiap mesin.
-
- -
-
statements
-
Statemen-statemen yang membentuk tubuh dari sebuah fungsi.
-
- -

Deskripsi

- -

Sebuah fungsi yang diciptakan dengan deklarasi fungsi adalah sebuah objek Function dan memiliki semua properti, method-method dan tingkah laku dari objek Function. Lihat {{jsxref("Function")}} untuk informasi mendetail tentang fungsi-fungsi.

- -

Sebuah fungsi juga dapat diciptakan menggunakan sebuah ekspresi (lihat  {{jsxref("Operators/function", "function expression")}}).

- -

Secara default, fungsi mengembalikan nilai undefined. Untuk mengembalikan nilai lain, fungsi tersebut harus memiliki sebuah {{jsxref("Statements/return", "return")}} statement yang menentukan nilai untuk dikembalikan.

- -

Fungsi yang dibuat secara kondisional

- -

Fungsi dapat dideklarasikan secara kondisional, yaitu sebuah statement fungsi dapat disarangkan di dalam sebuah statement if. Kebanyakan aplikasi perambah selain Mozilla akan memperlakukan deklarasi kondisional seperti itu sebagai sebuah deklarasi non kondisional dan menciptakan fungsi tersebut meskipun kondisi bernilai benar atau salah, lihat artikel berikut untuk ikhtisar. Untuk alasan tersebut, deklarasi kondisional seharusnya tidak digunakan -- untuk pembuatakan kondisional gunakan ekspresi fungsi sebagai gantinya.

- -

Pengangkatan deklarasi fungsi

- -

Deklarasi fungsi di javaScript mengangkat definisi fungsi. Kamu dapat menggunakan fungsi sebelum kamu mendeklarasikan fungsi tersebut.

- -
hoisted(); // logs "foo"
-
-function hoisted() {
-  console.log('foo');
-}
-
- -

Dicatat bahwa {{jsxref("Operators/function", "function expressions")}} tidak terangkat:

- -
notHoisted(); // TypeError: notHoisted is not a function
-
-var notHoisted = function() {
-   console.log('bar');
-};
-
- -

Contoh

- -

Menggunakan fungsi

- -

Kode berikut mendeklarasikan sebuah fungsi yang mengembalikan jumlah total penjualan ketika diberikan angka dari unit-unit yang terjual dari produk a, b, dan c.

- -
function calc_sales(units_a, units_b, units_c) {
-   return units_a * 79 + units_b * 129 + units_c * 699;
-}
-
- -

Spesifikasi

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-13', 'Function definition')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
- -

Kompabilitas Perambah

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Allowed in sloppy mode{{CompatChrome(49.0)}}{{CompatUnknown}}    
Trailing comma in parameters{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("52.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Allowed in sloppy mode{{CompatNo}} -

{{CompatChrome(49.0)}}

- 		{{CompatUnknown}}     -

{{CompatChrome(49.0)}}

-
Trailing comma in parameters{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("52.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Lihat juga

- - diff --git a/files/id/web/javascript/sekilas_teknologi_javascript/index.html b/files/id/web/javascript/sekilas_teknologi_javascript/index.html deleted file mode 100644 index adb6ec5a68..0000000000 --- a/files/id/web/javascript/sekilas_teknologi_javascript/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Ikhtisar Teknologi JavaScript -slug: Web/JavaScript/sekilas_teknologi_JavaScript -translation_of: Web/JavaScript/JavaScript_technologies_overview ---- -
{{JsSidebar("Introductory")}}
- -

Pengantar

- -

Jika HTML untuk mengatur struktur dan konten dari halaman web dan CSS untuk menetapkan format dan tampilannya, maka JavaScript digunakan untuk menambah interaksi pada halaman web dan menciptakan aplikasi web yang kaya.

- -

Namun, istilah "JavaScript" seperti yang dikenal pada konteks browser web berisi beberapa elemen yang sangat berbeda. Salah satunya adalah bahasa intinya (ECMAScript), yang lainnya adalah koleksi dari Web APIs, termasuk DOM (Document Object Model).

- -

Bahasa inti (ECMAScript) JavaScript

- -

Bahasa inti dari JavaScript distandarisasi oleh komite ECMA TC39 sebagai bahasa yang bernama ECMAScript.

- -

Bahasa inti ini juga digunakan pada lingkungan non-browser, misalnya node.js.

- -

Apa yang termasuk dalam lingkup ECMAScript?

- -

Diantaranya, ECMAScript menetapkan:

- - - -

Dukungan browser

- -

Pada Oktober 2016, versi terbaru dari sebagian besar browser Web sudah menerapkan ECMAScript 5.1 dan ECMAScript 2015, namun versi yang lebih lama (yang masih digunakan) hanya menerapkan ECMAScript 5.

- -

Masa depan

- -

ECMAScript Edisi ke-6 mayor telah secara resmi disetujui dan diumumkan sebagai standar pada 17 Juni 1015 oleh ECMA General Assembly. Sejak saat itu Edisi ECMAScript diumumkan secara tahunan.

- -

API Internasionalisasi

- -

Spesifikasi API Internasionalisasi ECMAScript merupakan tambahan dari Spesifikasi Bahasa ECMAScript, yang juga distandarisasi oleh Ecma TC39. API internasionalisasi menyediakan kolasi (perbandingan string), format angka, format tanggal dan jam untuk aplikasi JavaScript, memungkinkan aplikasi memilih bahasa dan menyesuaikan fungsi sesuai kebutuhannya. Standar awal telah disetujui pada Desember 2012; status impementasinya dalam browser dicatat di dokumentasi Intl object. Saat ini spesifikasi Internasionalisasi juga disahkan secara tahunan dan browser secara konsisten meningkatkan implementasinya.

- -

API DOM

- -

WebIDL

- -

WebIDL specification memberikan perekat antara teknologi DOM dan ECMAScript.

- -

Inti dari DOM

- -

Document Object Model (DOM) adalah bahasa konvensi independen lintas platform untuk mewakili dan berinteraksi dengan objects dalam dokumen HTML, XHTML dan XML. Objects didalam DOM tree dapat dialamatkan dan dimanipulasi dengan menggunakan methods pada objects. Core Document Object Model yang distandarisasi oleh {{glossary("W3C")}}, menetapkan antarmuka bahasa-agnostik untuk mengabstaraksi dokumen HTML dan XML sebagai objects, dan juga menetapkan mekanisme untuk memanipulasi abstraksi ini. Diantara yang ditetapkan oleh DOM, kita dapat menemukan:

- - - -

Dari sudut pandang ECMAScript, objects yang didefinisikan di spesifikasi DOM disebut "host objects".

- -

HTML DOM

- -

Bahasa markup Web (HTML) yang ditetapkan dari sisi DOM. Seperti dalam konsep abstrak yang dibahas diatas pada Inti DOM, HTML juga didefinisikan sebagai sebuah elemen. The HTML DOM menyertakan properti className pada elemen HTML, or APIs seperti {{ domxref("document.body") }}.

- -

Spesifikasi HTML juga menetapkan batasan pada dokumen; misalnya, ia memerlukan semua elemen anak dari sebuah ul untuk mewakili sebuah daftar tak urut, elemen li untuk mewakili daftar item. Secara umum, ia juga melarang penggunaan elemen dan atribut yang tidak didefinisikan dalam standar.

- -

Ingin mengetahui Document object, Window object, dan elemen DOM lainnya? Baca DOM documentation.

- -

API penting lainnya

- - - -

Dukungan browser

- -

Seperti kata pengembang web yang berpengalaman, DOM berantakan. Dukungan fitur-fitur DOM antar browser bervarasi, terutama disebabkan karena banyak fitur yang penting dari DOM sangat tidak jelas, spesifikasi (jika ada) dan browser web yang berbeda menambahkan fitur yang tidak kompatibel untuk overlapping use cases (misalnya Internet Explorer event model). Pada Juni 2011, W3C dan khususnya WHATWG menetapkan fitur-fitur lama secara rinci untuk meningkatkan interoperabilitas, dan browser pada akhirnya dapat meningkatkan implementasi mereka berdasarkan spesifikasi ini.

- -

Sebuah teknik umum, meskipun mungkin bukan yang paling dapat diandalkan, pendekatan kompatibilitas lintas browser adalah dengan menggunakan pustaka JavaScript, yang menggunakan fitur DOM abstrak untuk menjaga API mereka tetap bekerja di browser yang berbeda. Beberapa framework yang paling banyak digunakan adalah jQuery, prototype, dan YUI.

-- cgit v1.2.3-54-g00ecf From 102003f64915a9b73e467c9858ed9c772e38f9fb Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:40 +0100 Subject: unslug id: modify --- files/id/_redirects.txt | 56 +- files/id/_wikihistory.json | 784 ++++++++++----------- .../conflicting/learn/common_questions/index.html | 3 +- .../mdn/contribute/getting_started/index.html | 3 +- files/id/conflicting/web/api/webrtc_api/index.html | 3 +- files/id/conflicting/web/guide/index.html | 3 +- .../web/javascript/guide/introduction/index.html | 3 +- .../reference/global_objects/function/index.html | 3 +- .../reference/global_objects/string/index.html | 3 +- files/id/glossary/algorithm/index.html | 3 +- .../how_does_the_internet_work/index.html | 3 +- .../thinking_before_coding/index.html | 3 +- files/id/learn/css/first_steps/index.html | 3 +- files/id/learn/forms/index.html | 3 +- .../dealing_with_files/index.html | 5 +- .../what_will_your_website_look_like/index.html | 5 +- .../document_and_website_structure/index.html | 3 +- .../html_text_fundamentals/index.html | 3 +- .../id/learn/html/introduction_to_html/index.html | 3 +- .../structuring_a_page_of_content/index.html | 3 +- .../adding_vector_graphics_to_the_web/index.html | 3 +- .../learn/html/multimedia_and_embedding/index.html | 3 +- .../responsive_images/index.html | 3 +- files/id/learn/html/tables/index.html | 3 +- .../id/learn/javascript/objects/basics/index.html | 3 +- files/id/mdn/tools/index.html | 3 +- .../webextensions/api/notifications/index.html | 3 +- .../what_are_webextensions/index.html | 3 +- files/id/mozilla/developer_guide/index.html | 3 +- .../virtual_arm_linux_environment/index.html | 3 +- .../id/orphaned/learn/how_to_contribute/index.html | 3 +- .../mdn/community/conversations/index.html | 3 +- files/id/orphaned/mdn/community/index.html | 3 +- .../howto/create_an_mdn_account/index.html | 3 +- .../howto/do_a_technical_review/index.html | 3 +- .../howto/do_an_editorial_review/index.html | 3 +- .../howto/set_the_summary_for_a_page/index.html | 3 +- .../id/orphaned/mdn/tools/page_deletion/index.html | 3 +- files/id/web/api/element/error_event/index.html | 3 +- files/id/web/api/push_api/index.html | 3 +- .../media_queries/using_media_queries/index.html | 3 +- files/id/web/css/reference/index.html | 3 +- files/id/web/guide/graphics/index.html | 3 +- files/id/web/http/overview/index.html | 3 +- .../proxy_auto-configuration_pac_file/index.html | 3 +- files/id/web/javascript/closures/index.html | 3 +- .../javascript/guide/grammar_and_types/index.html | 3 +- files/id/web/javascript/guide/index.html | 3 +- .../web/javascript/guide/introduction/index.html | 5 +- .../guide/loops_and_iteration/index.html | 3 +- .../javascript/guide/numbers_and_dates/index.html | 3 +- .../guide/working_with_objects/index.html | 5 +- .../inheritance_and_the_prototype_chain/index.html | 3 +- .../javascript_technologies_overview/index.html | 3 +- .../reference/operators/function/index.html | 3 +- .../reference/statements/function/index.html | 3 +- 56 files changed, 559 insertions(+), 451 deletions(-) (limited to 'files/id/web') diff --git a/files/id/_redirects.txt b/files/id/_redirects.txt index ef75a46987..b31b04f68c 100644 --- a/files/id/_redirects.txt +++ b/files/id/_redirects.txt @@ -1,7 +1,10 @@ # FROM-URL TO-URL +/id/docs/Developer_Guide /id/docs/Mozilla/Developer_guide +/id/docs/Developer_Guide/Virtual_ARM_di_Lingkungan_Linux /id/docs/Mozilla/Developer_guide/Virtual_ARM_Linux_environment +/id/docs/Glossary/Algoritma /id/docs/Glossary/Algorithm /id/docs/HTML /id/docs/Web/HTML /id/docs/JavaScript /id/docs/Web/JavaScript -/id/docs/JavaScript/Panduan /id/docs/Web/JavaScript/Panduan +/id/docs/JavaScript/Panduan /id/docs/Web/JavaScript/Guide /id/docs/JavaScript/Reference /id/docs/Web/JavaScript/Reference /id/docs/JavaScript/Reference/About /id/docs/Web/JavaScript/Reference/About /id/docs/JavaScript/Reference/Global_Objects /id/docs/Web/JavaScript/Reference/Global_Objects @@ -10,13 +13,64 @@ /id/docs/JavaScript/Reference/Statements /id/docs/Web/JavaScript/Reference/Statements /id/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps /id/docs/Learn/CSS/Introduction_to_CSS/Box_model /en-US/docs/Learn/CSS/Building_blocks/The_box_model +/id/docs/Learn/Common_questions/Bagaimana_cara_kerja_Internet /id/docs/Learn/Common_questions/How_does_the_Internet_work +/id/docs/Learn/Common_questions/Berfikir_sebelum_membuat_kode /id/docs/Learn/Common_questions/Thinking_before_coding +/id/docs/Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda /id/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like +/id/docs/Learn/Getting_started_with_the_web/Mengelola_file /id/docs/Learn/Getting_started_with_the_web/Dealing_with_files +/id/docs/Learn/HTML/Multimedia_dan_embedding /id/docs/Learn/HTML/Multimedia_and_embedding +/id/docs/Learn/HTML/Multimedia_dan_embedding/Adding_vector_graphics_to_the_Web /id/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +/id/docs/Learn/HTML/Multimedia_dan_embedding/Responsive_images /id/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images +/id/docs/Learn/HTML/Pengenalan_HTML /id/docs/Learn/HTML/Introduction_to_HTML +/id/docs/Learn/HTML/Pengenalan_HTML/Document_and_website_structure /id/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure +/id/docs/Learn/HTML/Pengenalan_HTML/HTML_text_fundamentals /id/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +/id/docs/Learn/HTML/Pengenalan_HTML/Structuring_a_page_of_content /id/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +/id/docs/Learn/HTML/Tabel /id/docs/Learn/HTML/Tables +/id/docs/Learn/How_to_contribute /id/docs/orphaned/Learn/How_to_contribute +/id/docs/Learn/JavaScript/Objects/Dasar-dasar /id/docs/Learn/JavaScript/Objects/Basics +/id/docs/Learn/Web_Mechanics /id/docs/conflicting/Learn/Common_questions /id/docs/MDN/Contribute/Content /id/docs/MDN/Guidelines /id/docs/MDN/Contribute/Content/Layout /id/docs/MDN/Guidelines/Layout /id/docs/MDN/Contribute/Content/Writing_style_guide /id/docs/MDN/Guidelines/Writing_style_guide +/id/docs/MDN/Contribute/Howto/Create_an_MDN_account /id/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account +/id/docs/MDN/Contribute/Howto/Do_a_technical_review /id/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review +/id/docs/MDN/Contribute/Howto/Do_an_editorial_review /id/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review +/id/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page /id/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page +/id/docs/MDN/Contribute/Tugas /id/docs/conflicting/MDN/Contribute/Getting_started +/id/docs/MDN/Komunitas /id/docs/orphaned/MDN/Community +/id/docs/MDN/Komunitas/Conversations /id/docs/orphaned/MDN/Community/Conversations /id/docs/MDN/Langkah_Awal /id/docs/MDN/Contribute/Getting_started +/id/docs/MDN/User_guide /id/docs/MDN/Tools +/id/docs/MDN/User_guide/Menghapus_halaman /id/docs/orphaned/MDN/Tools/Page_deletion +/id/docs/Mozilla/Add-ons/WebExtensions/API/notifikasi /id/docs/Mozilla/Add-ons/WebExtensions/API/notifications +/id/docs/Mozilla/Add-ons/WebExtensions/Apa_Itu_WebExtensions /id/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +/id/docs/Pengembangan_Web /id/docs/conflicting/Web/Guide +/id/docs/Web/API/API_Push /id/docs/Web/API/Push_API +/id/docs/Web/CSS/referensi /id/docs/Web/CSS/Reference +/id/docs/Web/Events/error /id/docs/Web/API/Element/error_event +/id/docs/Web/Guide/API/WebRTC /id/docs/conflicting/Web/API/WebRTC_API /id/docs/Web/Guide/CSS /id/docs/Learn/CSS +/id/docs/Web/Guide/CSS/Getting_started /id/docs/Learn/CSS/First_steps +/id/docs/Web/Guide/CSS/Media_queries /id/docs/Web/CSS/Media_Queries/Using_media_queries +/id/docs/Web/Guide/Grafis /id/docs/Web/Guide/Graphics /id/docs/Web/Guide/HTML /id/docs/Learn/HTML +/id/docs/Web/Guide/HTML/Forms /id/docs/Learn/Forms +/id/docs/Web/HTTP/Gambaran /id/docs/Web/HTTP/Overview +/id/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file /id/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file +/id/docs/Web/JavaScript/Inheritance_dan_prototype_chain /id/docs/Web/JavaScript/Inheritance_and_the_prototype_chain +/id/docs/Web/JavaScript/Panduan /id/docs/Web/JavaScript/Guide +/id/docs/Web/JavaScript/Panduan/Closures /id/docs/Web/JavaScript/Closures +/id/docs/Web/JavaScript/Panduan/Loops_and_iteration /id/docs/Web/JavaScript/Guide/Loops_and_iteration +/id/docs/Web/JavaScript/Panduan/Numbers_and_dates /id/docs/Web/JavaScript/Guide/Numbers_and_dates +/id/docs/Web/JavaScript/Panduan/Tentang /id/docs/conflicting/Web/JavaScript/Guide/Introduction +/id/docs/Web/JavaScript/Panduan/Values,_variables,_and_literals /id/docs/Web/JavaScript/Guide/Grammar_and_types +/id/docs/Web/JavaScript/Panduan/Working_with_Objects /id/docs/Web/JavaScript/Guide/Working_with_Objects +/id/docs/Web/JavaScript/Panduan/pengenalan /id/docs/Web/JavaScript/Guide/Introduction +/id/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype /id/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function +/id/docs/Web/JavaScript/Reference/Global_Objects/String/purwarupa /id/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String /id/docs/Web/JavaScript/Reference/Methods_Index /id/docs/Web/JavaScript/Reference +/id/docs/Web/JavaScript/Reference/Operators/fungsi /id/docs/Web/JavaScript/Reference/Operators/function /id/docs/Web/JavaScript/Reference/Properties_Index /id/docs/Web/JavaScript/Reference +/id/docs/Web/JavaScript/Reference/Statements/fungsi /id/docs/Web/JavaScript/Reference/Statements/function +/id/docs/Web/JavaScript/sekilas_teknologi_JavaScript /id/docs/Web/JavaScript/JavaScript_technologies_overview /id/docs/Web/WebGL /id/docs/Web/API/WebGL_API /id/docs/en /en-US/ diff --git a/files/id/_wikihistory.json b/files/id/_wikihistory.json index e2c2390dbb..ea8365583e 100644 --- a/files/id/_wikihistory.json +++ b/files/id/_wikihistory.json @@ -1,16 +1,4 @@ { - "Developer_Guide": { - "modified": "2019-03-23T23:27:41.297Z", - "contributors": [ - "bskari" - ] - }, - "Developer_Guide/Virtual_ARM_di_Lingkungan_Linux": { - "modified": "2019-03-23T23:27:45.214Z", - "contributors": [ - "ariestiyansyah" - ] - }, "Games": { "modified": "2020-07-23T02:23:56.130Z", "contributors": [ @@ -69,14 +57,6 @@ "bekti" ] }, - "Glossary/Algoritma": { - "modified": "2019-03-23T22:41:10.845Z", - "contributors": [ - "yayansupiana", - "astrominion", - "agungprasetyosakti" - ] - }, "Glossary/Asynchronous": { "modified": "2019-03-23T22:29:53.061Z", "contributors": [ @@ -229,19 +209,6 @@ "stephaniehobson" ] }, - "Learn/Common_questions/Bagaimana_cara_kerja_Internet": { - "modified": "2020-07-16T22:35:36.880Z", - "contributors": [ - "xenavrt", - "dennisblight" - ] - }, - "Learn/Common_questions/Berfikir_sebelum_membuat_kode": { - "modified": "2020-07-16T22:35:34.339Z", - "contributors": [ - "wahyuakbarwibowo" - ] - }, "Learn/Common_questions/Pages_sites_servers_and_search_engines": { "modified": "2020-07-16T22:35:39.876Z", "contributors": [ @@ -267,15 +234,6 @@ "chrisdavidmills" ] }, - "Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda": { - "modified": "2020-07-16T22:34:16.825Z", - "contributors": [ - "thickkoezz", - "bekti", - "dovjay", - "yayansupiana" - ] - }, "Learn/Getting_started_with_the_web/CSS_basics": { "modified": "2020-07-16T22:34:58.859Z", "contributors": [ @@ -322,15 +280,6 @@ "adeyahya" ] }, - "Learn/Getting_started_with_the_web/Mengelola_file": { - "modified": "2020-07-16T22:34:33.806Z", - "contributors": [ - "thickkoezz", - "galuhsahid", - "BPiVcarD", - "vdanny" - ] - }, "Learn/Getting_started_with_the_web/Publishing_your_website": { "modified": "2020-07-16T22:34:25.723Z", "contributors": [ @@ -350,67 +299,6 @@ "ikramwadudu99" ] }, - "Learn/HTML/Multimedia_dan_embedding": { - "modified": "2020-07-16T22:24:25.764Z", - "contributors": [ - "SphinxKnight", - "putrapuices", - "thickkoezz" - ] - }, - "Learn/HTML/Multimedia_dan_embedding/Adding_vector_graphics_to_the_Web": { - "modified": "2020-07-16T22:24:40.529Z", - "contributors": [ - "mujahid-it" - ] - }, - "Learn/HTML/Multimedia_dan_embedding/Responsive_images": { - "modified": "2020-07-16T22:24:34.275Z", - "contributors": [ - "mujahid-it" - ] - }, - "Learn/HTML/Pengenalan_HTML": { - "modified": "2020-07-30T01:00:05.720Z", - "contributors": [ - "setyadi", - "Zen-Akira", - "thickkoezz", - "ariaenggar" - ] - }, - "Learn/HTML/Pengenalan_HTML/Document_and_website_structure": { - "modified": "2020-07-16T22:24:04.997Z", - "contributors": [ - "mujahid-it" - ] - }, - "Learn/HTML/Pengenalan_HTML/HTML_text_fundamentals": { - "modified": "2020-07-16T22:23:32.925Z", - "contributors": [ - "Transamunos" - ] - }, - "Learn/HTML/Pengenalan_HTML/Structuring_a_page_of_content": { - "modified": "2020-07-16T22:24:19.411Z", - "contributors": [ - "mujahid-it" - ] - }, - "Learn/HTML/Tabel": { - "modified": "2020-07-16T22:25:12.167Z", - "contributors": [ - "jatmikaekachandra" - ] - }, - "Learn/How_to_contribute": { - "modified": "2020-07-16T22:33:44.062Z", - "contributors": [ - "SphinxKnight", - "bekti", - "ariestiyansyah" - ] - }, "Learn/JavaScript": { "modified": "2020-07-16T22:29:39.927Z", "contributors": [ @@ -460,12 +348,6 @@ "Fidelstu" ] }, - "Learn/JavaScript/Objects/Dasar-dasar": { - "modified": "2020-07-16T22:31:59.183Z", - "contributors": [ - "indrayoganata" - ] - }, "Learn/Server-side": { "modified": "2020-07-16T22:35:58.563Z", "contributors": [ @@ -500,12 +382,6 @@ "ferdian89" ] }, - "Learn/Web_Mechanics": { - "modified": "2020-07-16T22:22:13.418Z", - "contributors": [ - "miftahafina" - ] - }, "MDN": { "modified": "2020-08-29T05:39:32.291Z", "contributors": [ @@ -577,39 +453,6 @@ "Sheppy" ] }, - "MDN/Contribute/Howto/Create_an_MDN_account": { - "modified": "2019-03-23T22:38:48.748Z", - "contributors": [ - "wbamberg", - "padila50", - "firmanwyd", - "taqiyyuki02", - "Lukman04" - ] - }, - "MDN/Contribute/Howto/Do_a_technical_review": { - "modified": "2019-03-23T22:32:05.940Z", - "contributors": [ - "wbamberg", - "heasanking" - ] - }, - "MDN/Contribute/Howto/Do_an_editorial_review": { - "modified": "2019-03-23T22:31:28.587Z", - "contributors": [ - "wbamberg", - "ElangSBP", - "bekti", - "Pieteru" - ] - }, - "MDN/Contribute/Howto/Set_the_summary_for_a_page": { - "modified": "2019-01-16T19:13:18.495Z", - "contributors": [ - "wbamberg", - "zekaras" - ] - }, "MDN/Contribute/Howto/Tag": { "modified": "2019-03-23T23:04:03.858Z", "contributors": [ @@ -625,14 +468,6 @@ "jswisher" ] }, - "MDN/Contribute/Tugas": { - "modified": "2019-01-16T19:13:42.819Z", - "contributors": [ - "wbamberg", - "firmanwyd", - "Cr7Pramana" - ] - }, "MDN/Guidelines": { "modified": "2020-09-30T15:29:57.815Z", "contributors": [ @@ -649,41 +484,6 @@ "alvisolikah0507" ] }, - "MDN/Komunitas": { - "modified": "2019-05-29T21:20:10.743Z", - "contributors": [ - "alattalatta", - "KLIWONJagung", - "wbamberg", - "Makarim", - "firmanwyd", - "padila50", - "bekti", - "eriskatp" - ] - }, - "MDN/Komunitas/Conversations": { - "modified": "2019-03-23T22:41:40.315Z", - "contributors": [ - "wbamberg", - "jswisher", - "randiproska" - ] - }, - "MDN/User_guide": { - "modified": "2020-12-14T09:31:03.075Z", - "contributors": [ - "wbamberg", - "Sheppy" - ] - }, - "MDN/User_guide/Menghapus_halaman": { - "modified": "2019-01-16T18:55:32.659Z", - "contributors": [ - "wbamberg", - "helloeny" - ] - }, "Mozilla": { "modified": "2019-03-23T23:28:31.556Z", "contributors": [ @@ -725,14 +525,6 @@ "didikpramono" ] }, - "Mozilla/Add-ons/WebExtensions/API/notifikasi": { - "modified": "2020-10-15T22:05:36.197Z", - "contributors": [ - "asiongtobing", - "wbamberg", - "Azhe403" - ] - }, "Mozilla/Add-ons/WebExtensions/API/windows": { "modified": "2020-10-15T21:51:41.708Z", "contributors": [ @@ -747,12 +539,6 @@ "fesuydev" ] }, - "Mozilla/Add-ons/WebExtensions/Apa_Itu_WebExtensions": { - "modified": "2019-03-18T21:06:29.401Z", - "contributors": [ - "fesuydev" - ] - }, "Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs": { "modified": "2020-10-15T20:55:16.114Z", "contributors": [ @@ -790,12 +576,6 @@ "ziyunfei" ] }, - "Pengembangan_Web": { - "modified": "2019-03-23T22:51:52.244Z", - "contributors": [ - "rahmatsubekti" - ] - }, "Tools": { "modified": "2020-07-16T22:44:15.262Z", "contributors": [ @@ -880,12 +660,6 @@ "pieteru_insekai" ] }, - "Web/API/API_Push": { - "modified": "2019-03-23T22:39:12.627Z", - "contributors": [ - "bayuah" - ] - }, "Web/API/AbstractWorker": { "modified": "2019-03-23T22:32:36.681Z", "contributors": [ @@ -1149,12 +923,6 @@ "alifudinashfa7" ] }, - "Web/CSS/referensi": { - "modified": "2020-10-11T06:52:29.728Z", - "contributors": [ - "liimep" - ] - }, "Web/CSS/text-transform": { "modified": "2020-10-15T22:00:17.057Z", "contributors": [ @@ -1168,13 +936,6 @@ "bep" ] }, - "Web/Events/error": { - "modified": "2019-03-23T22:33:54.573Z", - "contributors": [ - "fscholz", - "bekti" - ] - }, "Web/Guide": { "modified": "2019-03-23T23:29:05.952Z", "contributors": [ @@ -1192,42 +953,6 @@ "steffix.h2" ] }, - "Web/Guide/API/WebRTC": { - "modified": "2019-03-23T22:55:51.386Z", - "contributors": [ - "fitra", - "yuan8" - ] - }, - "Web/Guide/CSS/Getting_started": { - "modified": "2019-03-23T23:14:57.144Z", - "contributors": [ - "mahfudhi" - ] - }, - "Web/Guide/CSS/Media_queries": { - "modified": "2019-03-23T23:17:04.703Z", - "contributors": [ - "Sebastianz", - "mrstork", - "malayaleecoder", - "dpitaloka" - ] - }, - "Web/Guide/Grafis": { - "modified": "2019-03-23T23:29:12.829Z", - "contributors": [ - "firmanwyd", - "bekti", - "pieteru_insekai" - ] - }, - "Web/Guide/HTML/Forms": { - "modified": "2020-07-16T22:20:57.894Z", - "contributors": [ - "ariona_rian" - ] - }, "Web/Guide/HTML/HTML5": { "modified": "2019-04-27T02:10:19.507Z", "contributors": [ @@ -1296,13 +1021,6 @@ "mfuji09" ] }, - "Web/HTTP/Gambaran": { - "modified": "2020-11-29T00:41:21.794Z", - "contributors": [ - "mzgndrg", - "bcnight" - ] - }, "Web/HTTP/Methods": { "modified": "2020-10-15T21:55:31.625Z", "contributors": [ @@ -1322,13 +1040,6 @@ "jwerre" ] }, - "Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file": { - "modified": "2020-10-20T02:03:59.798Z", - "contributors": [ - "SphinxKnight", - "worabaiyan" - ] - }, "Web/HTTP/Status": { "modified": "2020-07-11T00:04:04.381Z", "contributors": [ @@ -1418,12 +1129,6 @@ "witart" ] }, - "Web/JavaScript/Inheritance_dan_prototype_chain": { - "modified": "2020-03-12T19:46:21.083Z", - "contributors": [ - "bekti" - ] - }, "Web/JavaScript/Language_Resources": { "modified": "2020-03-12T19:44:02.368Z", "contributors": [ @@ -1437,72 +1142,6 @@ "agungprasetyosakti" ] }, - "Web/JavaScript/Panduan": { - "modified": "2020-03-12T19:38:02.146Z", - "contributors": [ - "bekti", - "teoli", - "kuntoaji" - ] - }, - "Web/JavaScript/Panduan/Closures": { - "modified": "2019-05-16T14:59:16.458Z", - "contributors": [ - "wbamberg", - "xlobin", - "sutikno" - ] - }, - "Web/JavaScript/Panduan/Loops_and_iteration": { - "modified": "2020-03-12T19:46:18.223Z", - "contributors": [ - "Fidelstu", - "jakarta" - ] - }, - "Web/JavaScript/Panduan/Numbers_and_dates": { - "modified": "2020-03-12T19:48:12.489Z", - "contributors": [ - "triashand" - ] - }, - "Web/JavaScript/Panduan/Tentang": { - "modified": "2019-05-16T15:03:14.492Z", - "contributors": [ - "wbamberg", - "adeyahya" - ] - }, - "Web/JavaScript/Panduan/Values,_variables,_and_literals": { - "modified": "2020-03-12T19:40:01.295Z", - "contributors": [ - "wbamberg", - "wawansumardi", - "sori-goklas-hutagalung", - "Fidelstu", - "bekti", - "kangfend", - "adeyahya" - ] - }, - "Web/JavaScript/Panduan/Working_with_Objects": { - "modified": "2020-03-12T19:48:10.821Z", - "contributors": [ - "thickkoezz", - "Fidelstu" - ] - }, - "Web/JavaScript/Panduan/pengenalan": { - "modified": "2020-03-12T19:41:22.637Z", - "contributors": [ - "snaztoz", - "thickkoezz", - "Fidelstu", - "ardhyui", - "bekti", - "adeyahya" - ] - }, "Web/JavaScript/Reference": { "modified": "2020-03-12T19:38:01.752Z", "contributors": [ @@ -1780,12 +1419,6 @@ "bekti" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/prototype": { - "modified": "2019-03-23T22:32:00.489Z", - "contributors": [ - "bekti" - ] - }, "Web/JavaScript/Reference/Global_Objects/JSON": { "modified": "2019-01-16T22:42:04.885Z", "contributors": [ @@ -1994,13 +1627,6 @@ "bekti" ] }, - "Web/JavaScript/Reference/Global_Objects/String/purwarupa": { - "modified": "2019-03-23T22:54:49.067Z", - "contributors": [ - "bekti", - "srifqi" - ] - }, "Web/JavaScript/Reference/Global_Objects/String/split": { "modified": "2019-03-23T22:31:50.185Z", "contributors": [ @@ -2065,12 +1691,6 @@ "zainalmustofa" ] }, - "Web/JavaScript/Reference/Operators/fungsi": { - "modified": "2020-03-12T19:45:02.306Z", - "contributors": [ - "opblang" - ] - }, "Web/JavaScript/Reference/Operators/yield": { "modified": "2020-10-15T21:58:01.116Z", "contributors": [ @@ -2120,18 +1740,6 @@ "haris" ] }, - "Web/JavaScript/Reference/Statements/fungsi": { - "modified": "2020-03-12T19:46:13.838Z", - "contributors": [ - "irhamkim" - ] - }, - "Web/JavaScript/sekilas_teknologi_JavaScript": { - "modified": "2020-03-12T19:45:33.240Z", - "contributors": [ - "arifpedia" - ] - }, "Web/MathML": { "modified": "2020-10-15T22:09:52.119Z", "contributors": [ @@ -2173,5 +1781,397 @@ "contributors": [ "guciano" ] + }, + "Mozilla/Developer_guide": { + "modified": "2019-03-23T23:27:41.297Z", + "contributors": [ + "bskari" + ] + }, + "Mozilla/Developer_guide/Virtual_ARM_Linux_environment": { + "modified": "2019-03-23T23:27:45.214Z", + "contributors": [ + "ariestiyansyah" + ] + }, + "Glossary/Algorithm": { + "modified": "2019-03-23T22:41:10.845Z", + "contributors": [ + "yayansupiana", + "astrominion", + "agungprasetyosakti" + ] + }, + "Learn/Common_questions/How_does_the_Internet_work": { + "modified": "2020-07-16T22:35:36.880Z", + "contributors": [ + "xenavrt", + "dennisblight" + ] + }, + "Learn/Common_questions/Thinking_before_coding": { + "modified": "2020-07-16T22:35:34.339Z", + "contributors": [ + "wahyuakbarwibowo" + ] + }, + "Learn/Getting_started_with_the_web/What_will_your_website_look_like": { + "modified": "2020-07-16T22:34:16.825Z", + "contributors": [ + "thickkoezz", + "bekti", + "dovjay", + "yayansupiana" + ] + }, + "Learn/Getting_started_with_the_web/Dealing_with_files": { + "modified": "2020-07-16T22:34:33.806Z", + "contributors": [ + "thickkoezz", + "galuhsahid", + "BPiVcarD", + "vdanny" + ] + }, + "orphaned/Learn/How_to_contribute": { + "modified": "2020-07-16T22:33:44.062Z", + "contributors": [ + "SphinxKnight", + "bekti", + "ariestiyansyah" + ] + }, + "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web": { + "modified": "2020-07-16T22:24:40.529Z", + "contributors": [ + "mujahid-it" + ] + }, + "Learn/HTML/Multimedia_and_embedding": { + "modified": "2020-07-16T22:24:25.764Z", + "contributors": [ + "SphinxKnight", + "putrapuices", + "thickkoezz" + ] + }, + "Learn/HTML/Multimedia_and_embedding/Responsive_images": { + "modified": "2020-07-16T22:24:34.275Z", + "contributors": [ + "mujahid-it" + ] + }, + "Learn/HTML/Introduction_to_HTML/Document_and_website_structure": { + "modified": "2020-07-16T22:24:04.997Z", + "contributors": [ + "mujahid-it" + ] + }, + "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals": { + "modified": "2020-07-16T22:23:32.925Z", + "contributors": [ + "Transamunos" + ] + }, + "Learn/HTML/Introduction_to_HTML": { + "modified": "2020-07-30T01:00:05.720Z", + "contributors": [ + "setyadi", + "Zen-Akira", + "thickkoezz", + "ariaenggar" + ] + }, + "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content": { + "modified": "2020-07-16T22:24:19.411Z", + "contributors": [ + "mujahid-it" + ] + }, + "Learn/HTML/Tables": { + "modified": "2020-07-16T22:25:12.167Z", + "contributors": [ + "jatmikaekachandra" + ] + }, + "Learn/JavaScript/Objects/Basics": { + "modified": "2020-07-16T22:31:59.183Z", + "contributors": [ + "indrayoganata" + ] + }, + "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2019-03-23T22:38:48.748Z", + "contributors": [ + "wbamberg", + "padila50", + "firmanwyd", + "taqiyyuki02", + "Lukman04" + ] + }, + "orphaned/MDN/Contribute/Howto/Do_a_technical_review": { + "modified": "2019-03-23T22:32:05.940Z", + "contributors": [ + "wbamberg", + "heasanking" + ] + }, + "orphaned/MDN/Contribute/Howto/Do_an_editorial_review": { + "modified": "2019-03-23T22:31:28.587Z", + "contributors": [ + "wbamberg", + "ElangSBP", + "bekti", + "Pieteru" + ] + }, + "orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page": { + "modified": "2019-01-16T19:13:18.495Z", + "contributors": [ + "wbamberg", + "zekaras" + ] + }, + "orphaned/MDN/Community/Conversations": { + "modified": "2019-03-23T22:41:40.315Z", + "contributors": [ + "wbamberg", + "jswisher", + "randiproska" + ] + }, + "orphaned/MDN/Community": { + "modified": "2019-05-29T21:20:10.743Z", + "contributors": [ + "alattalatta", + "KLIWONJagung", + "wbamberg", + "Makarim", + "firmanwyd", + "padila50", + "bekti", + "eriskatp" + ] + }, + "orphaned/MDN/Tools/Page_deletion": { + "modified": "2019-01-16T18:55:32.659Z", + "contributors": [ + "wbamberg", + "helloeny" + ] + }, + "Mozilla/Add-ons/WebExtensions/What_are_WebExtensions": { + "modified": "2019-03-18T21:06:29.401Z", + "contributors": [ + "fesuydev" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/notifications": { + "modified": "2020-10-15T22:05:36.197Z", + "contributors": [ + "asiongtobing", + "wbamberg", + "Azhe403" + ] + }, + "Web/API/Push_API": { + "modified": "2019-03-23T22:39:12.627Z", + "contributors": [ + "bayuah" + ] + }, + "Web/CSS/Reference": { + "modified": "2020-10-11T06:52:29.728Z", + "contributors": [ + "liimep" + ] + }, + "Web/API/Element/error_event": { + "modified": "2019-03-23T22:33:54.573Z", + "contributors": [ + "fscholz", + "bekti" + ] + }, + "Web/CSS/Media_Queries/Using_media_queries": { + "modified": "2019-03-23T23:17:04.703Z", + "contributors": [ + "Sebastianz", + "mrstork", + "malayaleecoder", + "dpitaloka" + ] + }, + "Web/Guide/Graphics": { + "modified": "2019-03-23T23:29:12.829Z", + "contributors": [ + "firmanwyd", + "bekti", + "pieteru_insekai" + ] + }, + "Learn/Forms": { + "modified": "2020-07-16T22:20:57.894Z", + "contributors": [ + "ariona_rian" + ] + }, + "Web/HTTP/Overview": { + "modified": "2020-11-29T00:41:21.794Z", + "contributors": [ + "mzgndrg", + "bcnight" + ] + }, + "Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file": { + "modified": "2020-10-20T02:03:59.798Z", + "contributors": [ + "SphinxKnight", + "worabaiyan" + ] + }, + "Web/JavaScript/Inheritance_and_the_prototype_chain": { + "modified": "2020-03-12T19:46:21.083Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Closures": { + "modified": "2019-05-16T14:59:16.458Z", + "contributors": [ + "wbamberg", + "xlobin", + "sutikno" + ] + }, + "Web/JavaScript/Guide": { + "modified": "2020-03-12T19:38:02.146Z", + "contributors": [ + "bekti", + "teoli", + "kuntoaji" + ] + }, + "Web/JavaScript/Guide/Loops_and_iteration": { + "modified": "2020-03-12T19:46:18.223Z", + "contributors": [ + "Fidelstu", + "jakarta" + ] + }, + "Web/JavaScript/Guide/Numbers_and_dates": { + "modified": "2020-03-12T19:48:12.489Z", + "contributors": [ + "triashand" + ] + }, + "Web/JavaScript/Guide/Introduction": { + "modified": "2020-03-12T19:41:22.637Z", + "contributors": [ + "snaztoz", + "thickkoezz", + "Fidelstu", + "ardhyui", + "bekti", + "adeyahya" + ] + }, + "Web/JavaScript/Guide/Grammar_and_types": { + "modified": "2020-03-12T19:40:01.295Z", + "contributors": [ + "wbamberg", + "wawansumardi", + "sori-goklas-hutagalung", + "Fidelstu", + "bekti", + "kangfend", + "adeyahya" + ] + }, + "Web/JavaScript/Guide/Working_with_Objects": { + "modified": "2020-03-12T19:48:10.821Z", + "contributors": [ + "thickkoezz", + "Fidelstu" + ] + }, + "Web/JavaScript/Reference/Operators/function": { + "modified": "2020-03-12T19:45:02.306Z", + "contributors": [ + "opblang" + ] + }, + "Web/JavaScript/Reference/Statements/function": { + "modified": "2020-03-12T19:46:13.838Z", + "contributors": [ + "irhamkim" + ] + }, + "Web/JavaScript/JavaScript_technologies_overview": { + "modified": "2020-03-12T19:45:33.240Z", + "contributors": [ + "arifpedia" + ] + }, + "conflicting/Learn/Common_questions": { + "modified": "2020-07-16T22:22:13.418Z", + "contributors": [ + "miftahafina" + ] + }, + "conflicting/MDN/Contribute/Getting_started": { + "modified": "2019-01-16T19:13:42.819Z", + "contributors": [ + "wbamberg", + "firmanwyd", + "Cr7Pramana" + ] + }, + "MDN/Tools": { + "modified": "2020-12-14T09:31:03.075Z", + "contributors": [ + "wbamberg", + "Sheppy" + ] + }, + "conflicting/Web/Guide": { + "modified": "2019-03-23T22:51:52.244Z", + "contributors": [ + "rahmatsubekti" + ] + }, + "conflicting/Web/API/WebRTC_API": { + "modified": "2019-03-23T22:55:51.386Z", + "contributors": [ + "fitra", + "yuan8" + ] + }, + "Learn/CSS/First_steps": { + "modified": "2019-03-23T23:14:57.144Z", + "contributors": [ + "mahfudhi" + ] + }, + "conflicting/Web/JavaScript/Guide/Introduction": { + "modified": "2019-05-16T15:03:14.492Z", + "contributors": [ + "wbamberg", + "adeyahya" + ] + }, + "conflicting/Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2019-03-23T22:32:00.489Z", + "contributors": [ + "bekti" + ] + }, + "conflicting/Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2019-03-23T22:54:49.067Z", + "contributors": [ + "bekti", + "srifqi" + ] } } \ No newline at end of file diff --git a/files/id/conflicting/learn/common_questions/index.html b/files/id/conflicting/learn/common_questions/index.html index 2e2f406ee5..f288b46cab 100644 --- a/files/id/conflicting/learn/common_questions/index.html +++ b/files/id/conflicting/learn/common_questions/index.html @@ -1,11 +1,12 @@ --- title: Mekanisme Web -slug: Learn/Web_Mechanics +slug: conflicting/Learn/Common_questions tags: - MekanismeWeb - Pemula translation_of: Learn/Common_questions translation_of_original: Learn/Web_Mechanics +original_slug: Learn/Web_Mechanics ---

Kompetensi ini merepresentasikan pemahaman Anda mengenai ekosistem web. Kami pecah pengetahuan yang Anda butuhkan kedalam bentuk yang lebih kecil, yakni detil keahliannya.

diff --git a/files/id/conflicting/mdn/contribute/getting_started/index.html b/files/id/conflicting/mdn/contribute/getting_started/index.html index bc96bb783f..8f72597f56 100644 --- a/files/id/conflicting/mdn/contribute/getting_started/index.html +++ b/files/id/conflicting/mdn/contribute/getting_started/index.html @@ -1,6 +1,6 @@ --- title: Tugas untuk dilakukan di MDN -slug: MDN/Contribute/Tugas +slug: conflicting/MDN/Contribute/Getting_started tags: - Dokumentasi - MDN @@ -8,6 +8,7 @@ tags: - Proyek MDC translation_of: MDN/Contribute/Getting_started translation_of_original: MDN/Contribute/Tasks +original_slug: MDN/Contribute/Tugas ---
{{MDNSidebar}}

Anda ingin membuat MDN menjadi lebih baik ? Ada banyak sekali cara untuk membantu: dari memperbaiki ejaan kalimat sampai membuat konten baru, Atau bahkan membantu mengembangkan platform Kurma dimana website ini dibuat. Panduan kontributor MDN mencakup semua hal yang bisa anda bantu dan lakukkan untuk mereka. Dibawah ini, anda bisa mencari daftar spesifikasi dari tugas yang perlu diselesaikan.

diff --git a/files/id/conflicting/web/api/webrtc_api/index.html b/files/id/conflicting/web/api/webrtc_api/index.html index 60f6c73de0..2a21dd8d0c 100644 --- a/files/id/conflicting/web/api/webrtc_api/index.html +++ b/files/id/conflicting/web/api/webrtc_api/index.html @@ -1,8 +1,9 @@ --- title: WebRTC -slug: Web/Guide/API/WebRTC +slug: conflicting/Web/API/WebRTC_API translation_of: Web/API/WebRTC_API translation_of_original: Web/Guide/API/WebRTC +original_slug: Web/Guide/API/WebRTC ---

WebRTC (RTC mengacu pada Real-Time Communications) adalah sebuah teknologi yang memungkinkan pengiriman audio atau video serta berbagi data antar peramban web (peer). Sebagai sebuah standar, WebRTC menghadirkan fitur pada peramban web untuk berbagi data dan melakukan telekonferensi secara peer-to-peer, tanpa perlu memasang plugins atau aplikasi pihak ketiga.

diff --git a/files/id/conflicting/web/guide/index.html b/files/id/conflicting/web/guide/index.html index 4370766311..b127c75f68 100644 --- a/files/id/conflicting/web/guide/index.html +++ b/files/id/conflicting/web/guide/index.html @@ -1,8 +1,9 @@ --- title: Pengembangan Web -slug: Pengembangan_Web +slug: conflicting/Web/Guide translation_of: Web/Guide translation_of_original: Web_Development +original_slug: Pengembangan_Web ---

Pengembangan web terdiri dari semua aspek dalam mengembangkan sebuah situs web atau aplikasi web

diff --git a/files/id/conflicting/web/javascript/guide/introduction/index.html b/files/id/conflicting/web/javascript/guide/introduction/index.html index c7f08f0eb5..bb950dc7cc 100644 --- a/files/id/conflicting/web/javascript/guide/introduction/index.html +++ b/files/id/conflicting/web/javascript/guide/introduction/index.html @@ -1,12 +1,13 @@ --- title: Tentang Panduan Ini -slug: Web/JavaScript/Panduan/Tentang +slug: conflicting/Web/JavaScript/Guide/Introduction tags: - JavaScript - Panduan - dasar translation_of: Web/JavaScript/Guide/Introduction translation_of_original: Web/JavaScript/Guide/About +original_slug: Web/JavaScript/Panduan/Tentang ---

JavaScript adalah bahasa yang cross-platform yaitu berarti JavaScript dapat dijalankan di banyak platform seperti Linux, Windows, Mac OS, Android, Firefox OS dan lain - lain. Panduan ini akan memberikan segala pengetahuan dasar yang perlu anda ketahui dalam penggunaan JavaScript.

diff --git a/files/id/conflicting/web/javascript/reference/global_objects/function/index.html b/files/id/conflicting/web/javascript/reference/global_objects/function/index.html index 4bb3ebffbe..df0d244035 100644 --- a/files/id/conflicting/web/javascript/reference/global_objects/function/index.html +++ b/files/id/conflicting/web/javascript/reference/global_objects/function/index.html @@ -1,6 +1,6 @@ --- title: Function.prototype -slug: Web/JavaScript/Reference/Global_Objects/Function/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Function tags: - Function - JavaScript @@ -8,6 +8,7 @@ tags: - Prototype translation_of: Web/JavaScript/Reference/Global_Objects/Function translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Function/prototype ---
{{JSRef}}
diff --git a/files/id/conflicting/web/javascript/reference/global_objects/string/index.html b/files/id/conflicting/web/javascript/reference/global_objects/string/index.html index baec1f2b84..1cfb72209d 100644 --- a/files/id/conflicting/web/javascript/reference/global_objects/string/index.html +++ b/files/id/conflicting/web/javascript/reference/global_objects/string/index.html @@ -1,6 +1,6 @@ --- title: String.prototype -slug: Web/JavaScript/Reference/Global_Objects/String/purwarupa +slug: conflicting/Web/JavaScript/Reference/Global_Objects/String tags: - JavaScript - Property @@ -11,6 +11,7 @@ tags: - purwarupa translation_of: Web/JavaScript/Reference/Global_Objects/String translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/String/purwarupa ---
{{JSRef}}
diff --git a/files/id/glossary/algorithm/index.html b/files/id/glossary/algorithm/index.html index d43365aeb8..451542b63b 100644 --- a/files/id/glossary/algorithm/index.html +++ b/files/id/glossary/algorithm/index.html @@ -1,8 +1,9 @@ --- title: Algoritma -slug: Glossary/Algoritma +slug: Glossary/Algorithm tags: - Glosarium translation_of: Glossary/Algorithm +original_slug: Glossary/Algoritma ---

Algoritma adalah serangkaian instruksi untuk menyelesaikan suatu masalah

diff --git a/files/id/learn/common_questions/how_does_the_internet_work/index.html b/files/id/learn/common_questions/how_does_the_internet_work/index.html index b4431bfc93..d07be62229 100644 --- a/files/id/learn/common_questions/how_does_the_internet_work/index.html +++ b/files/id/learn/common_questions/how_does_the_internet_work/index.html @@ -1,12 +1,13 @@ --- title: Bagaimana cara kerja Internet -slug: Learn/Common_questions/Bagaimana_cara_kerja_Internet +slug: Learn/Common_questions/How_does_the_Internet_work tags: - Pemula - Tutorial - Web - WebMechanics translation_of: Learn/Common_questions/How_does_the_Internet_work +original_slug: Learn/Common_questions/Bagaimana_cara_kerja_Internet ---

Artikel ini membahas apa itu Internet dan bagaimana ia bekerja.

diff --git a/files/id/learn/common_questions/thinking_before_coding/index.html b/files/id/learn/common_questions/thinking_before_coding/index.html index c50aeff182..17ba716839 100644 --- a/files/id/learn/common_questions/thinking_before_coding/index.html +++ b/files/id/learn/common_questions/thinking_before_coding/index.html @@ -1,6 +1,6 @@ --- title: Bagaimana saya mulai mendesain situs web saya? -slug: Learn/Common_questions/Berfikir_sebelum_membuat_kode +slug: Learn/Common_questions/Thinking_before_coding tags: - Beginner - Composing @@ -9,6 +9,7 @@ tags: - Pemula - needsSchema translation_of: Learn/Common_questions/Thinking_before_coding +original_slug: Learn/Common_questions/Berfikir_sebelum_membuat_kode ---

Artikel ini mencakup langkah pertama yang sangat penting dari setiap proyek: tentukan apa yang ingin Anda capai dengannya.

diff --git a/files/id/learn/css/first_steps/index.html b/files/id/learn/css/first_steps/index.html index dbff8144de..9dd4462f9c 100644 --- a/files/id/learn/css/first_steps/index.html +++ b/files/id/learn/css/first_steps/index.html @@ -1,8 +1,9 @@ --- title: Getting started with CSS -slug: Web/Guide/CSS/Getting_started +slug: Learn/CSS/First_steps translation_of: Learn/CSS/First_steps translation_of_original: Web/Guide/CSS/Getting_started +original_slug: Web/Guide/CSS/Getting_started ---

This tutorial introduces you to the basic features and language (the syntax) for Cascading Style Sheets (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers.

The tutorial is for beginners and anyone who would like to review the basics of CSS. If you have more experience with CSS, the CSS main page lists more advanced resources.

diff --git a/files/id/learn/forms/index.html b/files/id/learn/forms/index.html index 9daf1d6077..a0f2639083 100644 --- a/files/id/learn/forms/index.html +++ b/files/id/learn/forms/index.html @@ -1,7 +1,8 @@ --- title: HTML forms guide -slug: Web/Guide/HTML/Forms +slug: Learn/Forms translation_of: Learn/Forms +original_slug: Web/Guide/HTML/Forms ---

Panduan ini adalah seri dari artikel-artikel yang akan membantu anda menguasai form HTML. Form HTML adalah tool yang paling poweful untuk berinteraksi dengan para pengguna; namun, karena beberapa alasan sejarah dan teknis, tidak jelas bagaimana cara menggunakannya hingga pontensi penuhnya. Dalam panduan ini, kita akan membahas seluruh aspek dari form HTML, struktur form untuk pemberian style, mulai dari penanganan data sampai widget buatan. Anda akan mempelajari bagaimana menikmati kekuatan yang mereka miliki!

Articles

diff --git a/files/id/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/id/learn/getting_started_with_the_web/dealing_with_files/index.html index 04cc90ec4b..8f3ae9ab85 100644 --- a/files/id/learn/getting_started_with_the_web/dealing_with_files/index.html +++ b/files/id/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -1,16 +1,17 @@ --- title: Berurusan dengan file -slug: Learn/Getting_started_with_the_web/Mengelola_file +slug: Learn/Getting_started_with_the_web/Dealing_with_files tags: - CodingScripting - File - HTML - - 'I10n:prioritas' + - I10n:prioritas - Panduan - Pemula - Teori - website translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +original_slug: Learn/Getting_started_with_the_web/Mengelola_file ---

{{LearnSidebar}}

diff --git a/files/id/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/id/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html index 76600c89ea..65bef0702d 100644 --- a/files/id/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ b/files/id/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -1,11 +1,11 @@ --- title: Akan terlihat seperti apa website kamu? -slug: Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda +slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like tags: - Aset - Desain - Fonts - - 'I10n:prioritas' + - I10n:prioritas - Konten - Pemula - Pengkomposisian @@ -14,6 +14,7 @@ tags: - belajar - pelan-pelan translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +original_slug: Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda ---
{{LearnSidebar}}
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
diff --git a/files/id/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/id/learn/html/introduction_to_html/document_and_website_structure/index.html index 5563c68fd3..8e4f152954 100644 --- a/files/id/learn/html/introduction_to_html/document_and_website_structure/index.html +++ b/files/id/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -1,6 +1,6 @@ --- title: Document and website structure -slug: Learn/HTML/Pengenalan_HTML/Document_and_website_structure +slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure tags: - HTML - Halaman @@ -12,6 +12,7 @@ tags: - blocks - semantic translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +original_slug: Learn/HTML/Pengenalan_HTML/Document_and_website_structure ---
{{LearnSidebar}}
diff --git a/files/id/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/id/learn/html/introduction_to_html/html_text_fundamentals/index.html index bbee58cc80..ee34036110 100644 --- a/files/id/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ b/files/id/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -1,7 +1,8 @@ --- title: Teks mendasar HTML -slug: Learn/HTML/Pengenalan_HTML/HTML_text_fundamentals +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +original_slug: Learn/HTML/Pengenalan_HTML/HTML_text_fundamentals ---
{{LearnSidebar}}
diff --git a/files/id/learn/html/introduction_to_html/index.html b/files/id/learn/html/introduction_to_html/index.html index 367ef45712..697b1a6734 100644 --- a/files/id/learn/html/introduction_to_html/index.html +++ b/files/id/learn/html/introduction_to_html/index.html @@ -1,6 +1,6 @@ --- title: Pengenalan HTML -slug: Learn/HTML/Pengenalan_HTML +slug: Learn/HTML/Introduction_to_HTML tags: - CodingScripting - HTML @@ -11,6 +11,7 @@ tags: - head - semantic translation_of: Learn/HTML/Introduction_to_HTML +original_slug: Learn/HTML/Pengenalan_HTML ---
{{LearnSidebar}}
diff --git a/files/id/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/id/learn/html/introduction_to_html/structuring_a_page_of_content/index.html index 2535589f38..8856048607 100644 --- a/files/id/learn/html/introduction_to_html/structuring_a_page_of_content/index.html +++ b/files/id/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -1,7 +1,8 @@ --- title: Structuring a page of content -slug: Learn/HTML/Pengenalan_HTML/Structuring_a_page_of_content +slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +original_slug: Learn/HTML/Pengenalan_HTML/Structuring_a_page_of_content ---
{{LearnSidebar}}
diff --git a/files/id/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/id/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html index acddef0b53..1d180398fe 100644 --- a/files/id/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html +++ b/files/id/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -1,6 +1,6 @@ --- title: Adding vector graphics to the Web -slug: Learn/HTML/Multimedia_dan_embedding/Adding_vector_graphics_to_the_Web +slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web tags: - Gambar - Grafik @@ -12,6 +12,7 @@ tags: - iframe - img translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +original_slug: Learn/HTML/Multimedia_dan_embedding/Adding_vector_graphics_to_the_Web ---
{{LearnSidebar}}
diff --git a/files/id/learn/html/multimedia_and_embedding/index.html b/files/id/learn/html/multimedia_and_embedding/index.html index fe111da30c..286c89f456 100644 --- a/files/id/learn/html/multimedia_and_embedding/index.html +++ b/files/id/learn/html/multimedia_and_embedding/index.html @@ -1,6 +1,6 @@ --- title: Multimedia dan Embedding -slug: Learn/HTML/Multimedia_dan_embedding +slug: Learn/HTML/Multimedia_and_embedding tags: - Asesmen - Audio @@ -22,6 +22,7 @@ tags: - img - responsif translation_of: Learn/HTML/Multimedia_and_embedding +original_slug: Learn/HTML/Multimedia_dan_embedding ---

{{LearnSidebar}}

diff --git a/files/id/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/id/learn/html/multimedia_and_embedding/responsive_images/index.html index e13790b7f4..1be9210b5d 100644 --- a/files/id/learn/html/multimedia_and_embedding/responsive_images/index.html +++ b/files/id/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -1,7 +1,8 @@ --- title: Responsive images -slug: Learn/HTML/Multimedia_dan_embedding/Responsive_images +slug: Learn/HTML/Multimedia_and_embedding/Responsive_images translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +original_slug: Learn/HTML/Multimedia_dan_embedding/Responsive_images ---
{{LearnSidebar}}
diff --git a/files/id/learn/html/tables/index.html b/files/id/learn/html/tables/index.html index b8fe3a2d8a..38b406e332 100644 --- a/files/id/learn/html/tables/index.html +++ b/files/id/learn/html/tables/index.html @@ -1,7 +1,8 @@ --- title: HTML Tables -slug: Learn/HTML/Tabel +slug: Learn/HTML/Tables translation_of: Learn/HTML/Tables +original_slug: Learn/HTML/Tabel ---
{{LearnSidebar}}
diff --git a/files/id/learn/javascript/objects/basics/index.html b/files/id/learn/javascript/objects/basics/index.html index 6c273b51a3..9bc5ae4607 100644 --- a/files/id/learn/javascript/objects/basics/index.html +++ b/files/id/learn/javascript/objects/basics/index.html @@ -1,7 +1,8 @@ --- title: Dasar-dasar Objek JavaScript object -slug: Learn/JavaScript/Objects/Dasar-dasar +slug: Learn/JavaScript/Objects/Basics translation_of: Learn/JavaScript/Objects/Basics +original_slug: Learn/JavaScript/Objects/Dasar-dasar ---
{{LearnSidebar}}
diff --git a/files/id/mdn/tools/index.html b/files/id/mdn/tools/index.html index 7703e98dd1..56d1e866ff 100644 --- a/files/id/mdn/tools/index.html +++ b/files/id/mdn/tools/index.html @@ -1,6 +1,6 @@ --- title: MDN user guide -slug: MDN/User_guide +slug: MDN/Tools tags: - Documentation - Landing @@ -9,6 +9,7 @@ tags: - TopicStub translation_of: MDN/Tools translation_of_original: MDN/User_guide +original_slug: MDN/User_guide ---
{{MDNSidebar}}

The Mozilla Developer Network site is an advanced system for finding, reading, and contributing to documentation and sample code for Web developers (as well as for Firefox and Firefox OS developers). The MDN user guide provides articles detailing how to use MDN to find the documentation you need, and, if you wish, how to help make the material better, more expansive, and more complete.

{{SubpagesWithSummaries}}

diff --git a/files/id/mozilla/add-ons/webextensions/api/notifications/index.html b/files/id/mozilla/add-ons/webextensions/api/notifications/index.html index e4fb084bb2..76b0e1cfe0 100644 --- a/files/id/mozilla/add-ons/webextensions/api/notifications/index.html +++ b/files/id/mozilla/add-ons/webextensions/api/notifications/index.html @@ -1,6 +1,6 @@ --- title: notifikasi -slug: Mozilla/Add-ons/WebExtensions/API/notifikasi +slug: Mozilla/Add-ons/WebExtensions/API/notifications tags: - API - Add-ons @@ -8,6 +8,7 @@ tags: - Notifikasi - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/API/notifications +original_slug: Mozilla/Add-ons/WebExtensions/API/notifikasi ---
{{AddonSidebar}}
diff --git a/files/id/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/id/mozilla/add-ons/webextensions/what_are_webextensions/index.html index 63c093bc53..917d65c274 100644 --- a/files/id/mozilla/add-ons/webextensions/what_are_webextensions/index.html +++ b/files/id/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -1,7 +1,8 @@ --- title: Apa itu WebExtensions? -slug: Mozilla/Add-ons/WebExtensions/Apa_Itu_WebExtensions +slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +original_slug: Mozilla/Add-ons/WebExtensions/Apa_Itu_WebExtensions ---
{{AddonSidebar}}
diff --git a/files/id/mozilla/developer_guide/index.html b/files/id/mozilla/developer_guide/index.html index f1a8f48168..01776af942 100644 --- a/files/id/mozilla/developer_guide/index.html +++ b/files/id/mozilla/developer_guide/index.html @@ -1,11 +1,12 @@ --- title: Developer Guide -slug: Developer_Guide +slug: Mozilla/Developer_guide tags: - Developing Mozilla - NeedsTranslation - TopicStub translation_of: Mozilla/Developer_guide +original_slug: Developer_Guide ---

Whether you're an old hand or just getting started, articles you can find starting from this page will help you while you're working on Mozilla development.

diff --git a/files/id/mozilla/developer_guide/virtual_arm_linux_environment/index.html b/files/id/mozilla/developer_guide/virtual_arm_linux_environment/index.html index 8465f45f06..913b70438c 100644 --- a/files/id/mozilla/developer_guide/virtual_arm_linux_environment/index.html +++ b/files/id/mozilla/developer_guide/virtual_arm_linux_environment/index.html @@ -1,6 +1,6 @@ --- title: Virtual ARM di Lingkungan Linux -slug: Developer_Guide/Virtual_ARM_di_Lingkungan_Linux +slug: Mozilla/Developer_guide/Virtual_ARM_Linux_environment tags: - ARM Linux - Mengembangkan Mozilla @@ -9,6 +9,7 @@ tags: - SSH - Virtual ARM translation_of: Mozilla/Developer_guide/Virtual_ARM_Linux_environment +original_slug: Developer_Guide/Virtual_ARM_di_Lingkungan_Linux ---

Pengujian dengan Linux di arsitektur ARM menggunakan QEMU

Halaman ini menejelaskan bagaimana cara untuk mendapatkan lingkungan virtual ARM dengan QEMU yang berjalan di (Ubuntu) Linux. Ini berguna untuk siapapun yang ingin mencoba kode ARM-specific dan tidak memiliki (atau membutuhkan) perangkat keras ARM untuk pengujian.

diff --git a/files/id/orphaned/learn/how_to_contribute/index.html b/files/id/orphaned/learn/how_to_contribute/index.html index 0a64757fc1..006a7cfe1e 100644 --- a/files/id/orphaned/learn/how_to_contribute/index.html +++ b/files/id/orphaned/learn/how_to_contribute/index.html @@ -1,6 +1,6 @@ --- title: Cara berkontribusi untuk Area Belajar di MDN -slug: Learn/How_to_contribute +slug: orphaned/Learn/How_to_contribute tags: - Dokumentasi - MDN @@ -9,6 +9,7 @@ tags: - belajar - kontribusi translation_of: Learn/How_to_contribute +original_slug: Learn/How_to_contribute ---

{{LearnSidebar}}

diff --git a/files/id/orphaned/mdn/community/conversations/index.html b/files/id/orphaned/mdn/community/conversations/index.html index d39080c8a3..1513e5b163 100644 --- a/files/id/orphaned/mdn/community/conversations/index.html +++ b/files/id/orphaned/mdn/community/conversations/index.html @@ -1,11 +1,12 @@ --- title: MDN community conversations -slug: MDN/Komunitas/Conversations +slug: orphaned/MDN/Community/Conversations tags: - Komunitas - MDN Meta - Panduan translation_of: MDN/Community/Conversations +original_slug: MDN/Komunitas/Conversations ---
{{MDNSidebar}}

"Pekerjaan" dari MDN terjadi di situs MDN, tetapi "Komunitas" juga juga melakukannya melalui diskusi (tidak tersinkronisasi) dan chatting serta meeting (tersinkronisasi)

diff --git a/files/id/orphaned/mdn/community/index.html b/files/id/orphaned/mdn/community/index.html index a60c631f76..adfd42b071 100644 --- a/files/id/orphaned/mdn/community/index.html +++ b/files/id/orphaned/mdn/community/index.html @@ -1,7 +1,8 @@ --- title: Gabung di Komunitas MDN -slug: MDN/Komunitas +slug: orphaned/MDN/Community translation_of: MDN/Community +original_slug: MDN/Komunitas ---
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
diff --git a/files/id/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/id/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html index aba3020441..5f823b3208 100644 --- a/files/id/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ b/files/id/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -1,6 +1,6 @@ --- title: Bagaimana Membuat Akun MDN -slug: MDN/Contribute/Howto/Create_an_MDN_account +slug: orphaned/MDN/Contribute/Howto/Create_an_MDN_account tags: - Bagaimana - Dokumentasi @@ -8,6 +8,7 @@ tags: - Panduan - Pemula translation_of: MDN/Contribute/Howto/Create_an_MDN_account +original_slug: MDN/Contribute/Howto/Create_an_MDN_account ---
{{MDNSidebar}}

Untuk melakukan perubahan isi MDN, Anda membutuhkan sebuah MDN profil. Anda tidak perlu profil jika Anda hanya ingin membaca dan mencari info di kumpulan dokumen MDN. Panduan ini akan membantu anda melakukan pengaturan profil akun MDN anda.

diff --git a/files/id/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/id/orphaned/mdn/contribute/howto/do_a_technical_review/index.html index 7a9ffab8a9..0f08061f1f 100644 --- a/files/id/orphaned/mdn/contribute/howto/do_a_technical_review/index.html +++ b/files/id/orphaned/mdn/contribute/howto/do_a_technical_review/index.html @@ -1,7 +1,8 @@ --- title: How to do a technical review -slug: MDN/Contribute/Howto/Do_a_technical_review +slug: orphaned/MDN/Contribute/Howto/Do_a_technical_review translation_of: MDN/Contribute/Howto/Do_a_technical_review +original_slug: MDN/Contribute/Howto/Do_a_technical_review ---
{{MDNSidebar}}

A Technical review consists of reviewing the technical accuracy and completeness of an article and correcting it if necessary. If a writer of an article wants someone else to check the technical content of an article, the writer ticks the "Technical review" checkbox while editing. Often the writer contacts a specific engineer to perform the technical review, but anyone with technical expertise in the topic can do one.

diff --git a/files/id/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/id/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html index 74aff54886..d0cf691bf2 100644 --- a/files/id/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html +++ b/files/id/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -1,11 +1,12 @@ --- title: How to do an editorial review -slug: MDN/Contribute/Howto/Do_an_editorial_review +slug: orphaned/MDN/Contribute/Howto/Do_an_editorial_review tags: - Dokumentasi - MDN Meta - Panduan translation_of: MDN/Contribute/Howto/Do_an_editorial_review +original_slug: MDN/Contribute/Howto/Do_an_editorial_review ---
{{MDNSidebar}}
{{IncludeSubnav("/id/docs/MDN")}}
diff --git a/files/id/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/id/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html index ad89ef0686..60728e07eb 100644 --- a/files/id/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ b/files/id/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -1,7 +1,8 @@ --- title: How to set the summary for a page -slug: MDN/Contribute/Howto/Set_the_summary_for_a_page +slug: orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +original_slug: MDN/Contribute/Howto/Set_the_summary_for_a_page ---
{{MDNSidebar}}

You can define the summary of a page on MDN, to be used in various ways, including in search engine results, in other MDN pages such as topical landing pages, and in tooltips. It should be text that makes sense both in the context of the page, and when displayed in other contexts, without the rest of the page content.

A summary can be explicitly defined within a page. If it is not explicitly defined, then typically the first sentence or so is used, which is not always the best text for this purpose.

diff --git a/files/id/orphaned/mdn/tools/page_deletion/index.html b/files/id/orphaned/mdn/tools/page_deletion/index.html index df0ba8ef81..8f8fa5ade8 100644 --- a/files/id/orphaned/mdn/tools/page_deletion/index.html +++ b/files/id/orphaned/mdn/tools/page_deletion/index.html @@ -1,11 +1,12 @@ --- title: Menghapus Halaman -slug: MDN/User_guide/Menghapus_halaman +slug: orphaned/MDN/Tools/Page_deletion tags: - MDN - Panduan - Proyek MDC translation_of: MDN/Tools/Page_deletion +original_slug: MDN/User_guide/Menghapus_halaman ---
{{MDNSidebar}}

Hanya Admin MDN yang bisa menghapus halaman. Artikel ini menjelaskan bagaimana meminta halaman yang dihapus dari MDN.

Untuk menyusun halaman yang ingin dihapus, Anda harus mengikuti cara berikut:

diff --git a/files/id/web/api/element/error_event/index.html b/files/id/web/api/element/error_event/index.html index a5c531c19c..242bbba9c3 100644 --- a/files/id/web/api/element/error_event/index.html +++ b/files/id/web/api/element/error_event/index.html @@ -1,7 +1,8 @@ --- title: error -slug: Web/Events/error +slug: Web/API/Element/error_event translation_of: Web/API/Element/error_event +original_slug: Web/Events/error ---

Event error ditampilkan ketika sumberdaya gagal dimuat.

diff --git a/files/id/web/api/push_api/index.html b/files/id/web/api/push_api/index.html index feae8a7373..7b4fe1a249 100644 --- a/files/id/web/api/push_api/index.html +++ b/files/id/web/api/push_api/index.html @@ -1,7 +1,8 @@ --- title: API Push -slug: Web/API/API_Push +slug: Web/API/Push_API translation_of: Web/API/Push_API +original_slug: Web/API/API_Push ---
{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}
diff --git a/files/id/web/css/media_queries/using_media_queries/index.html b/files/id/web/css/media_queries/using_media_queries/index.html index 3fe883c5f6..9fe60a8e8c 100644 --- a/files/id/web/css/media_queries/using_media_queries/index.html +++ b/files/id/web/css/media_queries/using_media_queries/index.html @@ -1,7 +1,8 @@ --- title: Media query CSS -slug: Web/Guide/CSS/Media_queries +slug: Web/CSS/Media_Queries/Using_media_queries translation_of: Web/CSS/Media_Queries/Using_media_queries +original_slug: Web/Guide/CSS/Media_queries ---

Media query terdiri dari jenis media dan paling sedikit satu ekspresi yang membatasi lingkup style sheets dengan menggunakan fitur media, seperti lebar, tinggi, dan warna. Media query, ditambahkan di CSS3, memungkinkan tampilan konten disesuaikan dengan alat penampil tertentu tanpa harus mengubah konten itu sendiri.

diff --git a/files/id/web/css/reference/index.html b/files/id/web/css/reference/index.html index 7609391ca5..b8dfca3c45 100644 --- a/files/id/web/css/reference/index.html +++ b/files/id/web/css/reference/index.html @@ -1,7 +1,8 @@ --- title: Referensi CSS -slug: Web/CSS/referensi +slug: Web/CSS/Reference translation_of: Web/CSS/Reference +original_slug: Web/CSS/referensi ---
{{CSSRef}}
diff --git a/files/id/web/guide/graphics/index.html b/files/id/web/guide/graphics/index.html index 43fb9b5954..e9d34ad59a 100644 --- a/files/id/web/guide/graphics/index.html +++ b/files/id/web/guide/graphics/index.html @@ -1,6 +1,6 @@ --- title: Grafis dalam web -slug: Web/Guide/Grafis +slug: Web/Guide/Graphics tags: - 2D - 3D @@ -11,6 +11,7 @@ tags: - Web - WebRTC translation_of: Web/Guide/Graphics +original_slug: Web/Guide/Grafis ---

Situs web moderen dan aplikasi sering membutuhkan tampilan grafis. Gambar statis dapat dengan mudah ditamilkan dengan menggunakan elemen {{HTMLElement("img")}} , atau mengatur tampilan background dari elemen HTML dengan menggunakan properti css {{cssxref("background-image")}}. anda sering menginginkan tampilan grafis melayang, atau memanipulasi gambar dari gambar nyatanya. Artikel ini memberikan wawasan tentang bagaimana anda dapat melakukannya

diff --git a/files/id/web/http/overview/index.html b/files/id/web/http/overview/index.html index b06d42ac23..580166ef43 100644 --- a/files/id/web/http/overview/index.html +++ b/files/id/web/http/overview/index.html @@ -1,7 +1,8 @@ --- title: Gambaran HTTP -slug: Web/HTTP/Gambaran +slug: Web/HTTP/Overview translation_of: Web/HTTP/Overview +original_slug: Web/HTTP/Gambaran ---
{{HTTPSidebar}}
diff --git a/files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html b/files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html index c470d2fe27..340989a8d1 100644 --- a/files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html +++ b/files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html @@ -1,7 +1,8 @@ --- title: Proxy Auto-Configuration (PAC) file -slug: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file +slug: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file translation_of: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file +original_slug: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file ---
{{HTTPSidebar}}
diff --git a/files/id/web/javascript/closures/index.html b/files/id/web/javascript/closures/index.html index 73cdbb7e15..8221ca46e6 100644 --- a/files/id/web/javascript/closures/index.html +++ b/files/id/web/javascript/closures/index.html @@ -1,7 +1,8 @@ --- title: Closures -slug: Web/JavaScript/Panduan/Closures +slug: Web/JavaScript/Closures translation_of: Web/JavaScript/Closures +original_slug: Web/JavaScript/Panduan/Closures ---

Closure adalah fungsi yang merujuk kepada variabel yang mandiri (bebas). 

diff --git a/files/id/web/javascript/guide/grammar_and_types/index.html b/files/id/web/javascript/guide/grammar_and_types/index.html index 41900a1603..78eec69d04 100644 --- a/files/id/web/javascript/guide/grammar_and_types/index.html +++ b/files/id/web/javascript/guide/grammar_and_types/index.html @@ -1,10 +1,11 @@ --- title: Tata Bahasa dan Tipe -slug: 'Web/JavaScript/Panduan/Values,_variables,_and_literals' +slug: Web/JavaScript/Guide/Grammar_and_types tags: - JavaScript - Panduan translation_of: Web/JavaScript/Guide/Grammar_and_types +original_slug: Web/JavaScript/Panduan/Values,_variables,_and_literals ---
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
diff --git a/files/id/web/javascript/guide/index.html b/files/id/web/javascript/guide/index.html index 491d4a4a84..e1a506b560 100644 --- a/files/id/web/javascript/guide/index.html +++ b/files/id/web/javascript/guide/index.html @@ -1,7 +1,8 @@ --- title: Panduan JavaScript -slug: Web/JavaScript/Panduan +slug: Web/JavaScript/Guide translation_of: Web/JavaScript/Guide +original_slug: Web/JavaScript/Panduan ---
{{jsSidebar("JavaScript Guide")}}
diff --git a/files/id/web/javascript/guide/introduction/index.html b/files/id/web/javascript/guide/introduction/index.html index 19523a0821..bfe4c9072c 100644 --- a/files/id/web/javascript/guide/introduction/index.html +++ b/files/id/web/javascript/guide/introduction/index.html @@ -1,13 +1,14 @@ --- title: Perkenalan -slug: Web/JavaScript/Panduan/pengenalan +slug: Web/JavaScript/Guide/Introduction tags: - - 'I10n:priority' + - I10n:priority - JavaScript - Pedoman - Pemula - Perkenalan translation_of: Web/JavaScript/Guide/Introduction +original_slug: Web/JavaScript/Panduan/pengenalan ---
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
diff --git a/files/id/web/javascript/guide/loops_and_iteration/index.html b/files/id/web/javascript/guide/loops_and_iteration/index.html index 7fbb416c43..506b033350 100644 --- a/files/id/web/javascript/guide/loops_and_iteration/index.html +++ b/files/id/web/javascript/guide/loops_and_iteration/index.html @@ -1,7 +1,8 @@ --- title: Loops and iteration -slug: Web/JavaScript/Panduan/Loops_and_iteration +slug: Web/JavaScript/Guide/Loops_and_iteration translation_of: Web/JavaScript/Guide/Loops_and_iteration +original_slug: Web/JavaScript/Panduan/Loops_and_iteration ---
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
diff --git a/files/id/web/javascript/guide/numbers_and_dates/index.html b/files/id/web/javascript/guide/numbers_and_dates/index.html index e9681b2adf..81ff248515 100644 --- a/files/id/web/javascript/guide/numbers_and_dates/index.html +++ b/files/id/web/javascript/guide/numbers_and_dates/index.html @@ -1,7 +1,8 @@ --- title: Numbers and dates -slug: Web/JavaScript/Panduan/Numbers_and_dates +slug: Web/JavaScript/Guide/Numbers_and_dates translation_of: Web/JavaScript/Guide/Numbers_and_dates +original_slug: Web/JavaScript/Panduan/Numbers_and_dates ---
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}
diff --git a/files/id/web/javascript/guide/working_with_objects/index.html b/files/id/web/javascript/guide/working_with_objects/index.html index 4449732e61..4baf443489 100644 --- a/files/id/web/javascript/guide/working_with_objects/index.html +++ b/files/id/web/javascript/guide/working_with_objects/index.html @@ -1,8 +1,8 @@ --- title: Bekerja dengan objek -slug: Web/JavaScript/Panduan/Working_with_Objects +slug: Web/JavaScript/Guide/Working_with_Objects tags: - - 'I10n:priority' + - I10n:priority - JavaScript - Konstruktor - Membandingkan objek @@ -11,6 +11,7 @@ tags: - Pemula - dokumen translation_of: Web/JavaScript/Guide/Working_with_Objects +original_slug: Web/JavaScript/Panduan/Working_with_Objects ---
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
diff --git a/files/id/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/id/web/javascript/inheritance_and_the_prototype_chain/index.html index 49a0100ed8..851bcbbb21 100644 --- a/files/id/web/javascript/inheritance_and_the_prototype_chain/index.html +++ b/files/id/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -1,7 +1,8 @@ --- title: Inheritance dan prototype chain -slug: Web/JavaScript/Inheritance_dan_prototype_chain +slug: Web/JavaScript/Inheritance_and_the_prototype_chain translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +original_slug: Web/JavaScript/Inheritance_dan_prototype_chain ---
{{jsSidebar("Advanced")}}
diff --git a/files/id/web/javascript/javascript_technologies_overview/index.html b/files/id/web/javascript/javascript_technologies_overview/index.html index adb6ec5a68..c988092b23 100644 --- a/files/id/web/javascript/javascript_technologies_overview/index.html +++ b/files/id/web/javascript/javascript_technologies_overview/index.html @@ -1,7 +1,8 @@ --- title: Ikhtisar Teknologi JavaScript -slug: Web/JavaScript/sekilas_teknologi_JavaScript +slug: Web/JavaScript/JavaScript_technologies_overview translation_of: Web/JavaScript/JavaScript_technologies_overview +original_slug: Web/JavaScript/sekilas_teknologi_JavaScript ---
{{JsSidebar("Introductory")}}
diff --git a/files/id/web/javascript/reference/operators/function/index.html b/files/id/web/javascript/reference/operators/function/index.html index 5366891a5c..7fa9564333 100644 --- a/files/id/web/javascript/reference/operators/function/index.html +++ b/files/id/web/javascript/reference/operators/function/index.html @@ -1,12 +1,13 @@ --- title: ungkapan fungsi -slug: Web/JavaScript/Reference/Operators/fungsi +slug: Web/JavaScript/Reference/Operators/function tags: - Fungsi - JavaScript - Operator - Ungkapan Utama translation_of: Web/JavaScript/Reference/Operators/function +original_slug: Web/JavaScript/Reference/Operators/fungsi ---
{{jsSidebar("Operators")}}
diff --git a/files/id/web/javascript/reference/statements/function/index.html b/files/id/web/javascript/reference/statements/function/index.html index 8ac13d31af..bd6b665d2e 100644 --- a/files/id/web/javascript/reference/statements/function/index.html +++ b/files/id/web/javascript/reference/statements/function/index.html @@ -1,11 +1,12 @@ --- title: Deklarasi Fungsi -slug: Web/JavaScript/Reference/Statements/fungsi +slug: Web/JavaScript/Reference/Statements/function tags: - JavaScript - Pernyataan - Statement translation_of: Web/JavaScript/Reference/Statements/function +original_slug: Web/JavaScript/Reference/Statements/fungsi ---
{{jsSidebar("Statements")}}
-- cgit v1.2.3-54-g00ecf