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 --- .../conflicting/learn/common_questions/index.html | 30 + .../mdn/contribute/getting_started/index.html | 26 + files/id/conflicting/web/api/webrtc_api/index.html | 35 + files/id/conflicting/web/guide/index.html | 79 ++ .../web/javascript/guide/introduction/index.html | 145 +++ .../reference/global_objects/function/index.html | 144 +++ .../reference/global_objects/string/index.html | 222 +++++ files/id/developer_guide/index.html | 145 --- .../virtual_arm_di_lingkungan_linux/index.html | 77 -- files/id/glossary/algorithm/index.html | 8 + files/id/glossary/algoritma/index.html | 8 - .../bagaimana_cara_kerja_internet/index.html | 98 -- .../berfikir_sebelum_membuat_kode/index.html | 180 ---- .../how_does_the_internet_work/index.html | 98 ++ .../thinking_before_coding/index.html | 180 ++++ files/id/learn/css/first_steps/index.html | 33 + files/id/learn/forms/index.html | 340 +++++++ .../index.html | 117 --- .../dealing_with_files/index.html | 123 +++ .../mengelola_file/index.html | 123 --- .../what_will_your_website_look_like/index.html | 117 +++ files/id/learn/how_to_contribute/index.html | 108 -- .../document_and_website_structure/index.html | 293 ++++++ .../html_text_fundamentals/index.html | 1047 ++++++++++++++++++++ .../id/learn/html/introduction_to_html/index.html | 64 ++ .../structuring_a_page_of_content/index.html | 116 +++ .../adding_vector_graphics_to_the_web/index.html | 362 +++++++ .../learn/html/multimedia_and_embedding/index.html | 73 ++ .../responsive_images/index.html | 251 +++++ .../adding_vector_graphics_to_the_web/index.html | 362 ------- .../learn/html/multimedia_dan_embedding/index.html | 73 -- .../responsive_images/index.html | 251 ----- .../document_and_website_structure/index.html | 293 ------ .../html_text_fundamentals/index.html | 1047 -------------------- files/id/learn/html/pengenalan_html/index.html | 64 -- .../structuring_a_page_of_content/index.html | 116 --- files/id/learn/html/tabel/index.html | 36 - files/id/learn/html/tables/index.html | 36 + .../id/learn/javascript/objects/basics/index.html | 261 +++++ .../javascript/objects/dasar-dasar/index.html | 261 ----- files/id/learn/web_mechanics/index.html | 30 - .../howto/create_an_mdn_account/index.html | 44 - .../howto/do_a_technical_review/index.html | 49 - .../howto/do_an_editorial_review/index.html | 52 - .../howto/set_the_summary_for_a_page/index.html | 46 - files/id/mdn/contribute/tugas/index.html | 26 - files/id/mdn/komunitas/conversations/index.html | 56 -- files/id/mdn/komunitas/index.html | 75 -- files/id/mdn/tools/index.html | 14 + files/id/mdn/user_guide/index.html | 14 - .../id/mdn/user_guide/menghapus_halaman/index.html | 17 - .../webextensions/apa_itu_webextensions/index.html | 34 - .../webextensions/api/notifications/index.html | 62 ++ .../webextensions/api/notifikasi/index.html | 62 -- .../what_are_webextensions/index.html | 34 + files/id/mozilla/developer_guide/index.html | 145 +++ .../virtual_arm_linux_environment/index.html | 77 ++ .../id/orphaned/learn/how_to_contribute/index.html | 108 ++ .../mdn/community/conversations/index.html | 56 ++ files/id/orphaned/mdn/community/index.html | 75 ++ .../howto/create_an_mdn_account/index.html | 44 + .../howto/do_a_technical_review/index.html | 49 + .../howto/do_an_editorial_review/index.html | 52 + .../howto/set_the_summary_for_a_page/index.html | 46 + .../id/orphaned/mdn/tools/page_deletion/index.html | 17 + files/id/pengembangan_web/index.html | 79 -- 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 -- 108 files changed, 10103 insertions(+), 10103 deletions(-) create mode 100644 files/id/conflicting/learn/common_questions/index.html create mode 100644 files/id/conflicting/mdn/contribute/getting_started/index.html create mode 100644 files/id/conflicting/web/api/webrtc_api/index.html create mode 100644 files/id/conflicting/web/guide/index.html create mode 100644 files/id/conflicting/web/javascript/guide/introduction/index.html create mode 100644 files/id/conflicting/web/javascript/reference/global_objects/function/index.html create mode 100644 files/id/conflicting/web/javascript/reference/global_objects/string/index.html delete mode 100644 files/id/developer_guide/index.html delete mode 100644 files/id/developer_guide/virtual_arm_di_lingkungan_linux/index.html create mode 100644 files/id/glossary/algorithm/index.html delete mode 100644 files/id/glossary/algoritma/index.html delete mode 100644 files/id/learn/common_questions/bagaimana_cara_kerja_internet/index.html delete mode 100644 files/id/learn/common_questions/berfikir_sebelum_membuat_kode/index.html create mode 100644 files/id/learn/common_questions/how_does_the_internet_work/index.html create mode 100644 files/id/learn/common_questions/thinking_before_coding/index.html create mode 100644 files/id/learn/css/first_steps/index.html create mode 100644 files/id/learn/forms/index.html delete mode 100644 files/id/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/index.html create mode 100644 files/id/learn/getting_started_with_the_web/dealing_with_files/index.html delete mode 100644 files/id/learn/getting_started_with_the_web/mengelola_file/index.html create mode 100644 files/id/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html delete mode 100644 files/id/learn/how_to_contribute/index.html create mode 100644 files/id/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/id/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/id/learn/html/introduction_to_html/index.html create mode 100644 files/id/learn/html/introduction_to_html/structuring_a_page_of_content/index.html create mode 100644 files/id/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html create mode 100644 files/id/learn/html/multimedia_and_embedding/index.html create mode 100644 files/id/learn/html/multimedia_and_embedding/responsive_images/index.html delete mode 100644 files/id/learn/html/multimedia_dan_embedding/adding_vector_graphics_to_the_web/index.html delete mode 100644 files/id/learn/html/multimedia_dan_embedding/index.html delete mode 100644 files/id/learn/html/multimedia_dan_embedding/responsive_images/index.html delete mode 100644 files/id/learn/html/pengenalan_html/document_and_website_structure/index.html delete mode 100644 files/id/learn/html/pengenalan_html/html_text_fundamentals/index.html delete mode 100644 files/id/learn/html/pengenalan_html/index.html delete mode 100644 files/id/learn/html/pengenalan_html/structuring_a_page_of_content/index.html delete mode 100644 files/id/learn/html/tabel/index.html create mode 100644 files/id/learn/html/tables/index.html create mode 100644 files/id/learn/javascript/objects/basics/index.html delete mode 100644 files/id/learn/javascript/objects/dasar-dasar/index.html delete mode 100644 files/id/learn/web_mechanics/index.html delete mode 100644 files/id/mdn/contribute/howto/create_an_mdn_account/index.html delete mode 100644 files/id/mdn/contribute/howto/do_a_technical_review/index.html delete mode 100644 files/id/mdn/contribute/howto/do_an_editorial_review/index.html delete mode 100644 files/id/mdn/contribute/howto/set_the_summary_for_a_page/index.html delete mode 100644 files/id/mdn/contribute/tugas/index.html delete mode 100644 files/id/mdn/komunitas/conversations/index.html delete mode 100644 files/id/mdn/komunitas/index.html create mode 100644 files/id/mdn/tools/index.html delete mode 100644 files/id/mdn/user_guide/index.html delete mode 100644 files/id/mdn/user_guide/menghapus_halaman/index.html delete mode 100644 files/id/mozilla/add-ons/webextensions/apa_itu_webextensions/index.html create mode 100644 files/id/mozilla/add-ons/webextensions/api/notifications/index.html delete mode 100644 files/id/mozilla/add-ons/webextensions/api/notifikasi/index.html create mode 100644 files/id/mozilla/add-ons/webextensions/what_are_webextensions/index.html create mode 100644 files/id/mozilla/developer_guide/index.html create mode 100644 files/id/mozilla/developer_guide/virtual_arm_linux_environment/index.html create mode 100644 files/id/orphaned/learn/how_to_contribute/index.html create mode 100644 files/id/orphaned/mdn/community/conversations/index.html create mode 100644 files/id/orphaned/mdn/community/index.html create mode 100644 files/id/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/id/orphaned/mdn/contribute/howto/do_a_technical_review/index.html create mode 100644 files/id/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 files/id/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html create mode 100644 files/id/orphaned/mdn/tools/page_deletion/index.html delete mode 100644 files/id/pengembangan_web/index.html 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') diff --git a/files/id/conflicting/learn/common_questions/index.html b/files/id/conflicting/learn/common_questions/index.html new file mode 100644 index 0000000000..2e2f406ee5 --- /dev/null +++ b/files/id/conflicting/learn/common_questions/index.html @@ -0,0 +1,30 @@ +--- +title: Mekanisme Web +slug: Learn/Web_Mechanics +tags: + - MekanismeWeb + - Pemula +translation_of: Learn/Common_questions +translation_of_original: 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.

+ +

{{NoteStart}}Mekanisme web berfokus pada sisi fungsional dari ekosistem web, bukan pada sisi teknis, dimana pembahasannya berada pada Infrastruktur.{{NoteEnd}}

+ +

Keahlian Dasar

+ +

Mulailah dari sini jika Anda belum akrab dengan web. Kami juga menyarankan Anda untuk mengunjungi ke halaman glosarium kami untuk bantuan dalam memahami berbagai jargon yang ada pada web.

+ +

{{ArticlesByTag({"tags":["WebMechanics","Beginner"]})}}

+ +

Keahlian Menengah

+ +

Jika Anda sudah pernah mengenal web, di sini ada beberapa detail yang dapat Anda pelajari lebih lanjut:

+ +

{{ArticlesByTag({"tags":["WebMechanics","Intermediate"]})}}

+ +

Keahlian Lanjutan

+ +

Jika Anda adalah seorang pembuat web yang berpengalaman, Anda mungkin tertarik untuk mempelajari keahlian yang luar biasa.

+ +

{{ArticlesByTag({"tags":["WebMechanics","Advanced"]})}}

diff --git a/files/id/conflicting/mdn/contribute/getting_started/index.html b/files/id/conflicting/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..bc96bb783f --- /dev/null +++ b/files/id/conflicting/mdn/contribute/getting_started/index.html @@ -0,0 +1,26 @@ +--- +title: Tugas untuk dilakukan di MDN +slug: MDN/Contribute/Tugas +tags: + - Dokumentasi + - MDN + - Panduan + - Proyek MDC +translation_of: MDN/Contribute/Getting_started +translation_of_original: MDN/Contribute/Tasks +--- +
{{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.

+ +

Ada banyak hal yang bisa anda lakukan untuk membantu MDN. Kami punya panduan untuk tugas yang ingin anda lakukan pada artikel Memulai MDN. Berikut caranya: 

+ + + +

Untuk ide lebih lanjut bagaimana anda bisa membantu dengan MDN, lihat Panduan kami. Anda bisa mencari daftar kategori dari halaman yang anda butuhkan untuk membantu pada bagian  Status Dokumen.

diff --git a/files/id/conflicting/web/api/webrtc_api/index.html b/files/id/conflicting/web/api/webrtc_api/index.html new file mode 100644 index 0000000000..60f6c73de0 --- /dev/null +++ b/files/id/conflicting/web/api/webrtc_api/index.html @@ -0,0 +1,35 @@ +--- +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/conflicting/web/guide/index.html b/files/id/conflicting/web/guide/index.html new file mode 100644 index 0000000000..4370766311 --- /dev/null +++ b/files/id/conflicting/web/guide/index.html @@ -0,0 +1,79 @@ +--- +title: Pengembangan Web +slug: Pengembangan_Web +translation_of: Web/Guide +translation_of_original: Web_Development +--- +

Pengembangan web terdiri dari semua aspek dalam mengembangkan sebuah situs web atau aplikasi web

+ +

Pelajari cara membuat apapun dari situs web sederhana sampai yang kompleks , situs web yang sangat interaktif dengan menggunakan teknologi Web terbaru yang dapat anda temukan dari berbagai artikel di sini

+ + + + + + + + +
+

Topik Dokumentasi

+ +

Teknologi

+ +
+
Pengantar Ke Pengembangan Web
+
Sebuah paduan untuk belajar bagaimana mengembangkan Web .
+
HTML
+
HyperText Markup Language merupakan bahasa dasar untuk membuat halaman web dan dokumen lain yang di tampilkan di browser.
+
CSS
+
Cascading Style Sheets memungkinkan untuk mengatur tata letak dan desain halaman Web.
+
JavaScript
+
JavaScript merupakan bahasa scripting yang umum digunakan untuk membangun aplikasi web; juga di gunakan pada pengembangan perangkat lunak berbasis Mozilla.
+
DOM
+
The Document Object Model is an API for HTML and XML documents, providing a structural representation of the document that you can modify in order to alter its visual presentation.
+
AJAX
+
Asynchronous JavaScript and XML isn't so much a technology as a combination of technologies; using JavaScript and other modern web technologies together to create dynamic web applications.
+
XHTML
+
Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.
+
SVG
+
Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.
+
+ +

Strategi

+ +
+
Web standar
+
Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.
+
Desain Web Responsive
+
Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.
+
Writing forward-compatible websites
+
Best practices for creating websites that do not break when browsers are updated.
+
Pengembangan Web Mobile
+
Developing sites for be viewed on mobile devices involves some unique approaches that may not be familiar to those accustomed to developing for desktop browsers.
+
Pengembang Mozilla Web  FAQ
+
Frequently asked questions from Web developers. With answers!
+
+ +

Lihat Semua...

+ 		+

Komunitas

+ + + +

Alat

+ + + +

Lihat Semua...

+
+ +

 

diff --git a/files/id/conflicting/web/javascript/guide/introduction/index.html b/files/id/conflicting/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..c7f08f0eb5 --- /dev/null +++ b/files/id/conflicting/web/javascript/guide/introduction/index.html @@ -0,0 +1,145 @@ +--- +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/conflicting/web/javascript/reference/global_objects/function/index.html b/files/id/conflicting/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..4bb3ebffbe --- /dev/null +++ b/files/id/conflicting/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,144 @@ +--- +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/conflicting/web/javascript/reference/global_objects/string/index.html b/files/id/conflicting/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..baec1f2b84 --- /dev/null +++ b/files/id/conflicting/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,222 @@ +--- +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/developer_guide/index.html b/files/id/developer_guide/index.html deleted file mode 100644 index f1a8f48168..0000000000 --- a/files/id/developer_guide/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Developer Guide -slug: Developer_Guide -tags: - - Developing Mozilla - - NeedsTranslation - - TopicStub -translation_of: Mozilla/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.

- - - - - - - -
-

Documentation topics

-
-
- Getting Started
-
- A step-by-step beginner's guide to getting involved with Mozilla.
-
-
-
- Working with Mozilla Source Code
-
- A code overview, how to get the code, and the coding style guide.
-
- Build Instructions
-
- How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.
-
- Development process overview
-
- An overview of the entire Mozilla development process.
-
- Managing multiple profiles
-
- When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.
-
- Automated Testing
-
- How to run Mozilla's automated tests, and how to write new tests.
-
- How to submit a patch
-
- After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.
-
- Getting documentation updated
-
- How to ensure that documentation is kept up to date as you develop.
-
- Mozilla modules and module ownership
-
- This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.
-
- Code snippets
-
- Useful code samples for a wide variety of things you might need to figure out how to do.
-
- Mozilla development strategies
-
- Tips for how to make the most of your time working on the Mozilla project.
-
- Debugging
-
- Find helpful tips and guides for debugging Mozilla code.
-
- Performance
-
- Performance guides and utilities to help you make your code perform well (and to play nicely with others).
-
- The Mozilla platform
-
- Information about the workings of the Mozilla platform.
-
- Adding APIs to the navigator object {{ gecko_minversion_inline("9.0") }}
-
- How to augment the {{ domxref("window.navigator") }} object with additional APIs.
-
- Interface Compatibility
-
- Guidelines for modifying scriptable and binary APIs in Mozilla.
-
- Customizing Firefox
-
- Information about creating customized versions of Firefox.
-
- Virtual ARM Linux environment
-
- How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.
-
- Obsolete Build Caveats and Tips
-
- A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.
-
- 		-

Tools

-
-
- Bugzilla
-
- The Bugzilla database used to track issues for Mozilla projects.
-
- MXR
-
- Browse and search the Mozilla source code repository on the Web.
-
- Bonsai
-
- The Bonsai tool lets you find out who changed what file in the repository, and when they did it.
-
- Mercurial
-
- The distributed version-control system used to manage Mozilla's source code.
-
- Tinderbox
-
- Tinderbox shows the status of the tree (whether or not it currently builds successfully).  Check this before checking in and out, to be sure you're working with a working tree.
-
- Crash tracking
-
- Information about the Socorro and Talkback crash reporting systems.
-
- Performance tracking
-
- See performance information for Mozilla projects.
-
- Callgraph
-
- A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.
-
- Developer forums
-
- A topic-specific list of discussion forums where you can talk about Mozilla development issues.
-
- Mozilla Platform Development Cheat Sheet
-
- Brian Bondy's list of frequently referenced information for platform developers.
-
-
-

 

diff --git a/files/id/developer_guide/virtual_arm_di_lingkungan_linux/index.html b/files/id/developer_guide/virtual_arm_di_lingkungan_linux/index.html deleted file mode 100644 index 8465f45f06..0000000000 --- a/files/id/developer_guide/virtual_arm_di_lingkungan_linux/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Virtual ARM di Lingkungan Linux -slug: Developer_Guide/Virtual_ARM_di_Lingkungan_Linux -tags: - - ARM Linux - - Mengembangkan Mozilla - - Mobile - - Pengujian - - SSH - - Virtual ARM -translation_of: Mozilla/Developer_guide/Virtual_ARM_Linux_environment ---- -

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.

-

Prasyarat

-

Petunjuk ini mengasumsikan sistem host yang Anda gunakan adalah Ubuntu Linux juga karena memudahkan kita untuk memasang  perangkat lunak yang diperlukan dari repositori luar.

-

Target board/CPU

-

QEMU mendukung beberapa board dan CPU. Dari semua yang Saya uji, saya hanya bisa mendapatkan Versatile Express board untuk bekerja dengan lebih dari 256 MB RAM, itulah kenapa kita akan menggunakan board ini. Untuk target CPU, Saya menguji dengan Cortex A9 saja (ARMv7).

-

Instalasai perangkat lunak yang dibutuhkan

-
# Tambahkan repositori Linaro, termasuk peralatan mereka dan yang lebih baru
-# versi dari qemu (Anda memerlukan setidaknya qemu 0.15*).
-sudo add-apt-repository ppa:linaro-maintainers/tools
-# Memasang peralatan linaro dan qemu
-sudo apt-get install linaro-image-tools qemu-user-static qemu-system
-
-# Jika Anda ingin mendapatkan cross-compile pada host, pasang juga perangkat ini
-sudo apt-get install gcc-arm-linux-gnueabi g++-arm-linux-gnueab
-

Mengunduh rilis Linaro dan paket perangkat keras

-

Anda dapat menemukan rilis yang cocok dan paket perangkat lunak tarball pada halaman rilis linaro. Beberapa dari itu mungkin bekerja, atau mungkin tidak. Saya menggunakan dua link dibawah ini yang bekerja dengan baik untuk Saua I used the two links below that worked fine for me.

-
wget http://releases.linaro.org/platform/linaro-n/nano/alpha-3/linaro-natty-nano-tar-20110302-0.tar.gz
-wget http://releases.linaro.org/platform/linaro-n/hwpacks/alpha-3/hwpack_linaro-vexpress_20110302-0_armel_supported.tar.gz
-
-

Membuat image

-

''(Langkah-langkah berikut kita pinjam dari https://wiki.linaro.org/PeterMaydell...rsatileExpress dan sedikit dimodifikasi).'' Menggunakan peralatan linaro, Anda dapat dengan mudah membuat SD card image dari paket unduhan (ini akan memakan waktu cukup lama):

-
linaro-media-create --image_file vexpress.img --dev vexpress \
-  --binary linaro-natty-nano-tar-20110302-0.tar.gz \
-  --hwpack hwpack_linaro-vexpress_20110302-0_armel_supported.tar.gz
-
-

Mengekstart kernel dan initrd

-

Image yang dubuat juga berisi kernel dan initrd dari mesin kita. Kita memerlukan kedua file meskipun itu diluar image. Perintah berikut untuk mount image ke "/mnt/tmp":

-
sudo mount -o loop,offset="$(file vexpress.img | awk 'BEGIN { RS=";"; } /partition 2/ { print $7*512; }')" \
-  -t auto vexpress.img /mnt/tmp
-
-

Sekarang salin kernel dan initrd file ke direktori saat ini (CATATAN: Nama file dapat berbeda disetiap pembuatan!):

-
cp /mnt/tmp/vmlinuz-2.6.38-1000-linaro-vexpress .
-cp /mnt/tmp/initrd.img-2.6.38-1000-linaro-vexpress .
-# Buat beberapa symlink untuk memudahkan
-ln -s vmlinuz-2.6.38-1000-linaro-vexpress vmlinuz
-ln -s initrd.img-2.6.38-1000-linaro-vexpress initrd.img
-
-

Memulai QEMU

-

Anda dapat memulai QEMU sekarang dengan perintah berikut:

-
qemu-system-arm -M vexpress-a9 -cpu cortex-a9 -kernel ./vmlinuz \
-  -initrd ./initrd.img -redir tcp:2200::22 -m 512 \
-  -append "root=/dev/mmcblk0p2 vga=normal mem=512M devtmpfs.mount=0 rw" \
-  -drive file=vexpress.img,if=sd,cache=writeback
-
-

Bebrapa penjelasan dari opsi yang tidak jelas pada perintah diatas:

- -

Setelah memulai mesin, Anda akan bertemu dengan Linux shell dalam layar QEMU setelah beberapa waktu startup

-

Menggunakan SSH

-

Untuk menggunakan SSH, Anda harus terlebih dahulu mengaktifkan jaringan dan memasang paket SSH servere. Mengaktifkan jaringan untuk sementara menggunakan perintah berikut:

-
ifconfig eth0 up
-dhclient eth0
-
-

Sekarang coba pasang SSH:

-
apt-get install openssh-server
-
-

Untuk membuat jaringan berubah menjadi permanen, edit file ''/etc/network/interfaces'' (e.g. dengan ''vi'') dan tambahkan baris berikut:

-
auto eth0
-iface eth0 inet dhcp
-
-

Terakhir, tentukan password untuk root menggunakan perintah ''passwd''. Sekarang jalankan ulang mesin dan lihat apakah Anda bisa melakukan SSH menggunakan ''ssh -p2200 root@localhost'' pada mesin host.

diff --git a/files/id/glossary/algorithm/index.html b/files/id/glossary/algorithm/index.html new file mode 100644 index 0000000000..d43365aeb8 --- /dev/null +++ b/files/id/glossary/algorithm/index.html @@ -0,0 +1,8 @@ +--- +title: Algoritma +slug: Glossary/Algoritma +tags: + - Glosarium +translation_of: Glossary/Algorithm +--- +

Algoritma adalah serangkaian instruksi untuk menyelesaikan suatu masalah

diff --git a/files/id/glossary/algoritma/index.html b/files/id/glossary/algoritma/index.html deleted file mode 100644 index d43365aeb8..0000000000 --- a/files/id/glossary/algoritma/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Algoritma -slug: Glossary/Algoritma -tags: - - Glosarium -translation_of: Glossary/Algorithm ---- -

Algoritma adalah serangkaian instruksi untuk menyelesaikan suatu masalah

diff --git a/files/id/learn/common_questions/bagaimana_cara_kerja_internet/index.html b/files/id/learn/common_questions/bagaimana_cara_kerja_internet/index.html deleted file mode 100644 index b4431bfc93..0000000000 --- a/files/id/learn/common_questions/bagaimana_cara_kerja_internet/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Bagaimana cara kerja Internet -slug: Learn/Common_questions/Bagaimana_cara_kerja_Internet -tags: - - Pemula - - Tutorial - - Web - - WebMechanics -translation_of: Learn/Common_questions/How_does_the_Internet_work ---- -
-

Artikel ini membahas apa itu Internet dan bagaimana ia bekerja.

-
- - - - - - - - - - - - -
Prasyarat:Tidak ada, namun kami mendorong Anda untuk membaca Artikel tentang menetapkan tujuan proyek terlebih dahulu
Tujuan:Anda akan mempelajari dasar-dasar infrastruktur teknis Web dan perbedaan antara Internet dan Web.
- -

Ikhtisar

- -

Internet merupakan tulang punggung dari Web, infrastruktur teknis yang memungkinkan Web tersedia. Pada dasarnya, Internet adalah jaringan besar komputer yang berkomunikasi bersama-sama.

- -

Sejarah Internet agak tidak jelas. Ini dimulai pada 1960-an sebagai proyek penelitian yang didanai oleh tentara AS, kemudian berkembang menjadi infrastruktur publik pada 1980-an dengan dukungan dari banyak universitas publik dan perusahaan swasta. Berbagai teknologi yang mendukung Internet telah berevolusi dari waktu ke waktu, tetapi cara kerjanya tidak banyak berubah: Internet adalah cara untuk menghubungkan komputer bersama-sama dan memastikan bahwa, apa pun yang terjadi, mereka menemukan cara untuk tetap terhubung.

- -

Active Learning

- - - -

Menyelam lebih dalam

- -

Sebuah jaringan sederhana

- -

Ketika dua komputer perlu berkomunikasi, Anda harus menghubungkannya, baik secara fisik (biasanya dengan menggunakan Kabel Ethernet) atau nirkabel (seperti sistem WiFi atau Bluetooth). Semua komputer modern dapat memungkinkan koneksi tersebut.

- -
-

Catatan: Untuk sisa artikel ini, kita hanya akan berbicara tentang kabel fisik, tetapi jaringan nirkabel bekerja dengan cara yang sama.

-
- -

Two computers linked together

- -

Jaringan seperti itu tidak terbatas pada dua komputer. Anda dapat menghubungkan banyak komputer sesuai keinginan. Tapi dapat menjadi rumit dengan mudah. Jika Anda mencoba menghubungkan, katakanlah, sepuluh komputer, Anda memerlukan 45 kabel, dengan sembilan colokan per komputer!

- -

Ten computers all together

- -

Untuk mengatasi masalah ini, setiap komputer di jaringan terhubung ke komputer kecil khusus yang disebut router. Router ini hanya memiliki satu pekerjaan: perumpamaannya seperti pemberi sinyal di stasiun kereta api, memastikan bahwa pesan yang dikirim dari komputer tertentu tiba di komputer tujuan yang tepat. Untuk mengirim pesan ke komputer B, komputer A harus mengirim pesan ke router, yang pada gilirannya meneruskan pesan ke komputer B dan memastikan pesan tidak dikirim ke komputer C.

- -

Setelah kita menambahkan router ke sistem, jaringan dari 10 komputer kita membutuhkan 10 kabel: satu pasang untuk setiap komputer dan router dengan 10 colokan.

- -

Ten computers with a router

- -

Jaringan dalam jaringan

- -

Sejauh ini bagus. Tapi bagaimana dengan menghubungkan ratusan, ribuan, miliaran komputer? Tentu saja satu router tidak dapat menskalakan sejauh itu, tetapi, jika Anda membaca dengan seksama, kami mengatakan bahwa router adalah komputer seperti yang lain, jadi apa yang membuat kita tidak bisa menghubungkan dua router bersama? Tidak ada, jadi ayo lakukan itu.

- -

Two routers linked together

- -

Dengan menghubungkan tiap komputer ke router, kemudian tiap router ke router, kita dapat menskalakan tanpa batas.

- -

Routers linked to routers

- -

Jaringan semacam itu sangat dekat dengan apa yang kita sebut Internet, tetapi kita kehilangan sesuatu. Kita membangun jaringan itu untuk tujuan kita sendiri. Ada jaringan lain di luar sana: teman-teman Anda, tetangga Anda, siapa pun dapat memiliki jaringan komputer sendiri. Tapi itu tidak benar-benar memungkinkan untuk memasang kabel di antara rumah Anda dan seluruh dunia, jadi bagaimana Anda menangani ini? Nah, sudah ada kabel yang terhubung ke rumah Anda, misalnya, tenaga listrik dan telepon. Infrastruktur telepon sudah menghubungkan rumah Anda dengan siapa pun di dunia sehingga itu adalah kabel yang sempurna yang kita butuhkan. Untuk menghubungkan jaringan kita ke infrastruktur telepon, kita memerlukan peralatan khusus yang disebut modem. Modem ini mengubah informasi dari jaringan kita menjadi informasi yang dapat dikelola oleh infrastruktur telepon dan sebaliknya.

- -

A router linked to a modem

- -

Maka kita terhubung ke infrastruktur telepon. Langkah selanjutnya adalah mengirim pesan dari jaringan kami ke jaringan yang ingin dijangkau. Untuk melakukan itu, kita akan menghubungkan jaringan ke Penyedia Layanan Internet (ISP). ISP adalah perusahaan yang mengelola beberapa router khusus yang menghubungkan semua bersama-sama dan juga dapat mengakses router ISP lain. Jadi pesan dari jaringan kita dibawa melalui jaringan jaringan ISP ke jaringan tujuan. Internet terdiri dari seluruh infrastruktur jaringan ini.

- -

Full Internet stack

- -

Mencari komputer

- -

Jika Anda ingin mengirim pesan ke komputer, Anda harus menentukan komputer mana. Jadi setiap komputer yang terhubung ke jaringan memiliki alamat unik untuk mengidentifikasinya, yang disebut "alamat IP" (di mana IP adalah singkatan dari Internet Protocol). Ini adalah alamat yang dibuat dari serangkaian empat angka yang dipisahkan oleh titik-titik, misalnya: 192.168.2.10.

- -

Itu boleh-boleh saja untuk komputer, tetapi kita manusia memiliki waktu yang sulit mengingat alamat semacam itu. Untuk mempermudah, kita bisa mengubah alamat IP dengan nama yang dapat dibaca manusia disebut nama domain. Misal, google.com adalah nama domain yang digunakan di atas alamat IP 173.194.121.32. Jadi menggunakan nama domain adalah cara termudah bagi kita untuk mencapai komputer melalui Internet.

- -

Show how a domain name can alias an IP address

- -

Internet dan Web

- -

Seperti yang Anda lihat, ketika kita menjelajah Web dengan browser Web, kita biasanya menggunakan nama domain untuk mencapai situs web. Apakah itu berarti Internet dan Web adalah hal yang sama? Tidak sesederhana itu. Seperti yang kita lihat, Internet adalah infrastruktur teknis yang memungkinkan miliaran komputer terhubung bersama-sama. Di antara komputer tersebut, beberapa komputer (disebut server Web) dapat mengirim pesan yang dapat dimengerti oleh browser web. Internet adalah infrastruktur, sedangkan Web adalah layanan yang dibangun di atas infrastruktur. Perlu dicatat ada beberapa layanan lain yang dibangun di atas Internet, seperti email dan IRC.

- -

Langkah selanjutnya

- - diff --git a/files/id/learn/common_questions/berfikir_sebelum_membuat_kode/index.html b/files/id/learn/common_questions/berfikir_sebelum_membuat_kode/index.html deleted file mode 100644 index c50aeff182..0000000000 --- a/files/id/learn/common_questions/berfikir_sebelum_membuat_kode/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: Bagaimana saya mulai mendesain situs web saya? -slug: Learn/Common_questions/Berfikir_sebelum_membuat_kode -tags: - - Beginner - - Composing - - Menulis - - NeedsActiveLearning - - Pemula - - needsSchema -translation_of: Learn/Common_questions/Thinking_before_coding ---- -

Artikel ini mencakup langkah pertama yang sangat penting dari setiap proyek: tentukan apa yang ingin Anda capai dengannya.

- - - - - - - - - - - - -
Prasyarat:None
Tujuan:Belajar untuk menentukan tujuan untuk memberikan arahan untuk proyek website Anda.
- -

Ikhtisar

- -

Ketika memulai dengan proyek web, banyak orang fokus pada sisi teknis. Tentu saja Anda harus terbiasa dengan teknik kesenian Anda, tetapi yang penting adalah apa yang ingin Anda capai. Ya, tampaknya sudah jelas, tetapi terlalu banyak proyek gagal bukan karena kurangnya pengetahuan teknis, tetapi karena kurangnya tujuan dan visi.

- -

Jadi, ketika Anda mendapatkan ide dan ingin mengubahnya menjadi sebuah situs web, ada beberapa pertanyaan yang harus Anda jawab sebelum yang lain:

- - - -

Semua ini disebut ide proyek dan merupakan langkah pertama yang diperlukan untuk mencapai tujuan Anda, apakah Anda seorang pemula atau pengembang yang berpengalaman.

- -

Active Learning

- -

Belum ada pembelajaran aktif yang tersedia. Tolong, pertimbangkan untuk berkontribusi.

- -

Menyelam lebih dalam

- -

Sebuah proyek tidak pernah dimulai dengan sisi teknis. Musisi tidak akan pernah membuat musik apa pun kecuali mereka terlebih dahulu memiliki gagasan tentang apa yang ingin mereka mainkan — dan hal yang sama berlaku untuk pelukis, penulis, dan pengembang web. Teknik menempati urutan kedua.

- -

Teknik jelas sangat penting. Musisi harus menguasai instrumen mereka. Tetapi musisi yang baik tidak akan pernah bisa menghasilkan musik yang bagus tanpa ide. Karena itu, sebelum terjun ke sisi teknis — misalnya, kode dan alat — Anda harus mundur dulu dan memutuskan secara terperinci apa yang ingin Anda lakukan.

- -

Diskusi satu jam dengan teman adalah awal yang baik, tetapi tidak memadai. Anda harus duduk dan menyusun ide-ide Anda untuk mendapatkan pandangan yang jelas tentang jalan apa yang harus Anda ambil untuk mewujudkan ide-ide Anda. Untuk melakukan ini, Anda hanya perlu pena dan kertas dan beberapa waktu untuk menjawab setidaknya pertanyaan-pertanyaan berikut.

- -
-

Catatan: Ada banyak cara untuk melaksanakan ide proyek. Kita tidak bisa meletakkan semuanya di sini (keseluruhan buku tidak akan cukup). Apa yang akan kami sajikan di sini adalah metode sederhana untuk menangani apa yang para profesional sebut sebagai Project Ideation, Project Planning, danProject Management.

-
- -

Apa yang sebenarnya ingin saya capai?

- -

Ini adalah pertanyaan yang paling penting untuk dijawab, karena itu mendorong segalanya. Buat daftar semua tujuan yang ingin Anda capai. Bisa apa saja: menjual barang untuk menghasilkan uang, mengekspresikan pendapat politik, bertemu teman baru, bermain musik dengan musisi, mengumpulkan gambar kucing, atau apa pun yang Anda inginkan.

- -

Misalkan Anda seorang musisi. Anda bisa berharap demikian:

- - - -

Setelah Anda memiliki daftar seperti itu, Anda perlu memprioritaskan. Pesanlah tujuan dari yang paling penting hingga yang tidak penting:

- -
    -
  1. Mencari teman laki-laki/perempuan.
    2. -
  2. Biarkan orang lain mendengarkan musik Anda.
    3. -
  3. Bicara tentang musik Anda.
    4. -
  4. Temui musisi lain.
    5. -
  5. Jual barang.
    6. -
  6. Ajarkan musik melalui video.
    7. -
  7. Publikasikan foto kucing Anda.
    8. -
- -

Melakukan latihan sederhana ini — menulis tujuan dan menyortirnya — akan membantu Anda keluar ketika Anda harus mengambil keputusan. (Haruskah saya menerapkan fitur ini, gunakan layanan ini, buat desain ini?)

- -

Jadi sekarang Anda memiliki daftar tujuan yang diprioritaskan, mari beralih ke pertanyaan berikutnya.

- -

Bagaimana sebuah situs web dapat membawa saya ke tujuan saya?

- -

Jadi Anda memiliki daftar sasaran dan Anda merasa perlu situs web untuk mencapai sasaran itu. Apakah kamu yakin?

- -

Mari kita lihat kembali contoh kita. Kami memiliki lima tujuan yang terhubung dengan musik, satu tujuan yang terkait dengan kehidupan pribadi (menemukan pasangan Anda yang signifikan), dan foto-foto kucing yang sama sekali tidak terkait. Apakah masuk akal untuk membangun satu situs web untuk mencakup semua tujuan itu? Apakah itu perlu? Lagi pula, skor layanan web yang ada dapat membawa Anda ke tujuan Anda tanpa membangun situs web baru.

- -

Menemukan seorang gadis / pacar adalah kasus utama di mana lebih masuk akal untuk menggunakan sumber daya yang ada daripada membangun situs yang sama sekali baru. Mengapa? Karena kita akan menghabiskan lebih banyak waktu membangun dan memelihara situs web daripada benar-benar mencari seorang gadis / pacar. Karena tujuan kita adalah yang paling penting, kita harus menghabiskan energi kita untuk meningkatkan alat yang ada daripada memulai dari awal. Sekali lagi, ada begitu banyak layanan web yang sudah tersedia untuk menampilkan foto yang tidak sepadan dengan upaya untuk membangun situs baru hanya untuk menyebarkan berita tentang betapa lucunya kucing kita.

- -

Lima tujuan lainnya semuanya terhubung dengan musik. Tentu saja ada banyak layanan web yang dapat menangani tujuan ini, tetapi masuk akal dalam hal ini untuk membangun situs web khusus kami sendiri. Situs web semacam itu adalah cara terbaik untuk mengumpulkan semua hal yang ingin kami terbitkan di satu tempat (baik untuk tujuan 3, 5, dan 6) dan mempromosikan interaksi antara kami dan publik (baik untuk tujuan 2 dan 4). Singkatnya, karena semua tujuan ini berkisar pada topik yang sama, memiliki segalanya di satu tempat akan membantu kita memenuhi tujuan kita dan membantu pengikut kita terhubung dengan kita.

- -

Bagaimana situs web dapat membantu saya mencapai tujuan saya? Dengan menjawab itu, Anda akan menemukan cara terbaik untuk mencapai tujuan Anda dan menyelamatkan diri dari usaha yang sia-sia.

- -

Apa yang perlu dilakukan, dan dalam urutan apa, untuk mencapai tujuan saya?

- -

Sekarang setelah Anda tahu apa yang ingin Anda capai, saatnya untuk mengubah tujuan-tujuan tersebut menjadi langkah-langkah yang dapat ditindaklanjuti. Sebagai catatan tambahan, tujuan Anda tidak harus ditentukan. Mereka berevolusi dari waktu ke waktu bahkan dalam perjalanan proyek, terutama jika Anda menghadapi hambatan yang tidak terduga atau hanya mengubah pikiran Anda.

- -

Daripada melalui penjelasan panjang, mari kita kembali ke contoh kita dengan tabel ini:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TujuanHal yang harus dilakukan
-

Biarkan orang lain mendengarkan musik Anda

- 		-
    -
  1. Rekam musik
    2. -
  2. Siapkan beberapa file audio yang dapat digunakan online (Bisakah Anda melakukan ini dengan layanan web yang ada?)
    3. -
  3. Berikan orang akses ke musik Anda di beberapa bagian situs web Anda
    4. -
-
Bicara tentang musik Anda -
    -
  1. Tulis beberapa artikel untuk memulai diskusi
    2. -
  2. Tentukan bagaimana tampilan artikel
    3. -
  3. Publikasikan artikel-artikel di situs web (Bagaimana melakukan ini?)
    4. -
-
Bertemu musisi lain -
    -
  1. Berikan cara agar orang lain menghubungi Anda (Email? Facebook? Telepon? Mail?)
    2. -
  2. Tetapkan bagaimana orang akan menemukan saluran kontak itu dari situs web Anda
    3. -
-
Jual barang -
    -
  1. Buat barangnya 
    2. -
  2. Simpan barangnya
    3. -
  3. Temukan cara untuk menangani pengiriman
    4. -
  4. Temukan cara untuk menangani pembayaran
    5. -
  5. Buat mekanisme di situs Anda agar orang memesan
    6. -
-
Ajarkan musik melalui video -
    -
  1. Rekam pelajaran video 
    2. -
  2. Siapkan file video yang dapat dilihat secara online (Sekali lagi, dapatkah Anda melakukan ini dengan layanan web yang ada?)
    3. -
  3. Berikan orang akses ke video Anda di beberapa bagian situs web Anda
    4. -
-
- -

Dua hal yang perlu diperhatikan. Pertama, beberapa item ini tidak terkait dengan web (mis., Rekam musik, tulis artikel). Seringkali aktivitas offline itu lebih penting daripada sisi web proyek. Dalam penjualan, misalnya, jauh lebih penting dan memakan waktu untuk menangani persediaan, pembayaran, dan pengiriman daripada membangun situs web tempat orang dapat memesan.

- -

Kedua, menetapkan langkah-langkah yang dapat ditindaklanjuti mengarah ke pertanyaan baru yang perlu Anda jawab. Biasanya ternyata ada lebih banyak pertanyaan daripada yang kita duga sebelumnya. (Misalnya, haruskah saya belajar bagaimana melakukan semua ini sendiri, meminta seseorang untuk melakukannya untuk saya, atau menggunakan layanan pihak ketiga?)

- -

Kesimpulan

- -

Seperti yang Anda lihat, ide sederhana "Saya ingin membuat situs web" menghasilkan daftar tugas yang panjang, yang hanya tumbuh lebih lama saat Anda memikirkannya. Segera mungkin terlihat luar biasa, tetapi jangan panik. Anda tidak perlu menjawab semua pertanyaan dan Anda tidak perlu melakukan semuanya dalam daftar Anda. Yang penting adalah memiliki visi tentang apa yang Anda inginkan dan bagaimana menuju ke sana. Setelah Anda memiliki visi yang jelas itu, Anda perlu memutuskan bagaimana dan kapan melakukannya. Sederhanakan tugas-tugas besar menjadi langkah-langkah kecil yang dapat ditindaklanjuti. Dan langkah-langkah kecil itu akan menambah pencapaian besar.

- -

Dari artikel ini, Anda sekarang dapat membuat rencana kasar untuk membuat situs web. Langkah selanjutnya mungkin membaca how the Internet works.

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 new file mode 100644 index 0000000000..b4431bfc93 --- /dev/null +++ b/files/id/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,98 @@ +--- +title: Bagaimana cara kerja Internet +slug: Learn/Common_questions/Bagaimana_cara_kerja_Internet +tags: + - Pemula + - Tutorial + - Web + - WebMechanics +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +
+

Artikel ini membahas apa itu Internet dan bagaimana ia bekerja.

+
+ + + + + + + + + + + + +
Prasyarat:Tidak ada, namun kami mendorong Anda untuk membaca Artikel tentang menetapkan tujuan proyek terlebih dahulu
Tujuan:Anda akan mempelajari dasar-dasar infrastruktur teknis Web dan perbedaan antara Internet dan Web.
+ +

Ikhtisar

+ +

Internet merupakan tulang punggung dari Web, infrastruktur teknis yang memungkinkan Web tersedia. Pada dasarnya, Internet adalah jaringan besar komputer yang berkomunikasi bersama-sama.

+ +

Sejarah Internet agak tidak jelas. Ini dimulai pada 1960-an sebagai proyek penelitian yang didanai oleh tentara AS, kemudian berkembang menjadi infrastruktur publik pada 1980-an dengan dukungan dari banyak universitas publik dan perusahaan swasta. Berbagai teknologi yang mendukung Internet telah berevolusi dari waktu ke waktu, tetapi cara kerjanya tidak banyak berubah: Internet adalah cara untuk menghubungkan komputer bersama-sama dan memastikan bahwa, apa pun yang terjadi, mereka menemukan cara untuk tetap terhubung.

+ +

Active Learning

+ + + +

Menyelam lebih dalam

+ +

Sebuah jaringan sederhana

+ +

Ketika dua komputer perlu berkomunikasi, Anda harus menghubungkannya, baik secara fisik (biasanya dengan menggunakan Kabel Ethernet) atau nirkabel (seperti sistem WiFi atau Bluetooth). Semua komputer modern dapat memungkinkan koneksi tersebut.

+ +
+

Catatan: Untuk sisa artikel ini, kita hanya akan berbicara tentang kabel fisik, tetapi jaringan nirkabel bekerja dengan cara yang sama.

+
+ +

Two computers linked together

+ +

Jaringan seperti itu tidak terbatas pada dua komputer. Anda dapat menghubungkan banyak komputer sesuai keinginan. Tapi dapat menjadi rumit dengan mudah. Jika Anda mencoba menghubungkan, katakanlah, sepuluh komputer, Anda memerlukan 45 kabel, dengan sembilan colokan per komputer!

+ +

Ten computers all together

+ +

Untuk mengatasi masalah ini, setiap komputer di jaringan terhubung ke komputer kecil khusus yang disebut router. Router ini hanya memiliki satu pekerjaan: perumpamaannya seperti pemberi sinyal di stasiun kereta api, memastikan bahwa pesan yang dikirim dari komputer tertentu tiba di komputer tujuan yang tepat. Untuk mengirim pesan ke komputer B, komputer A harus mengirim pesan ke router, yang pada gilirannya meneruskan pesan ke komputer B dan memastikan pesan tidak dikirim ke komputer C.

+ +

Setelah kita menambahkan router ke sistem, jaringan dari 10 komputer kita membutuhkan 10 kabel: satu pasang untuk setiap komputer dan router dengan 10 colokan.

+ +

Ten computers with a router

+ +

Jaringan dalam jaringan

+ +

Sejauh ini bagus. Tapi bagaimana dengan menghubungkan ratusan, ribuan, miliaran komputer? Tentu saja satu router tidak dapat menskalakan sejauh itu, tetapi, jika Anda membaca dengan seksama, kami mengatakan bahwa router adalah komputer seperti yang lain, jadi apa yang membuat kita tidak bisa menghubungkan dua router bersama? Tidak ada, jadi ayo lakukan itu.

+ +

Two routers linked together

+ +

Dengan menghubungkan tiap komputer ke router, kemudian tiap router ke router, kita dapat menskalakan tanpa batas.

+ +

Routers linked to routers

+ +

Jaringan semacam itu sangat dekat dengan apa yang kita sebut Internet, tetapi kita kehilangan sesuatu. Kita membangun jaringan itu untuk tujuan kita sendiri. Ada jaringan lain di luar sana: teman-teman Anda, tetangga Anda, siapa pun dapat memiliki jaringan komputer sendiri. Tapi itu tidak benar-benar memungkinkan untuk memasang kabel di antara rumah Anda dan seluruh dunia, jadi bagaimana Anda menangani ini? Nah, sudah ada kabel yang terhubung ke rumah Anda, misalnya, tenaga listrik dan telepon. Infrastruktur telepon sudah menghubungkan rumah Anda dengan siapa pun di dunia sehingga itu adalah kabel yang sempurna yang kita butuhkan. Untuk menghubungkan jaringan kita ke infrastruktur telepon, kita memerlukan peralatan khusus yang disebut modem. Modem ini mengubah informasi dari jaringan kita menjadi informasi yang dapat dikelola oleh infrastruktur telepon dan sebaliknya.

+ +

A router linked to a modem

+ +

Maka kita terhubung ke infrastruktur telepon. Langkah selanjutnya adalah mengirim pesan dari jaringan kami ke jaringan yang ingin dijangkau. Untuk melakukan itu, kita akan menghubungkan jaringan ke Penyedia Layanan Internet (ISP). ISP adalah perusahaan yang mengelola beberapa router khusus yang menghubungkan semua bersama-sama dan juga dapat mengakses router ISP lain. Jadi pesan dari jaringan kita dibawa melalui jaringan jaringan ISP ke jaringan tujuan. Internet terdiri dari seluruh infrastruktur jaringan ini.

+ +

Full Internet stack

+ +

Mencari komputer

+ +

Jika Anda ingin mengirim pesan ke komputer, Anda harus menentukan komputer mana. Jadi setiap komputer yang terhubung ke jaringan memiliki alamat unik untuk mengidentifikasinya, yang disebut "alamat IP" (di mana IP adalah singkatan dari Internet Protocol). Ini adalah alamat yang dibuat dari serangkaian empat angka yang dipisahkan oleh titik-titik, misalnya: 192.168.2.10.

+ +

Itu boleh-boleh saja untuk komputer, tetapi kita manusia memiliki waktu yang sulit mengingat alamat semacam itu. Untuk mempermudah, kita bisa mengubah alamat IP dengan nama yang dapat dibaca manusia disebut nama domain. Misal, google.com adalah nama domain yang digunakan di atas alamat IP 173.194.121.32. Jadi menggunakan nama domain adalah cara termudah bagi kita untuk mencapai komputer melalui Internet.

+ +

Show how a domain name can alias an IP address

+ +

Internet dan Web

+ +

Seperti yang Anda lihat, ketika kita menjelajah Web dengan browser Web, kita biasanya menggunakan nama domain untuk mencapai situs web. Apakah itu berarti Internet dan Web adalah hal yang sama? Tidak sesederhana itu. Seperti yang kita lihat, Internet adalah infrastruktur teknis yang memungkinkan miliaran komputer terhubung bersama-sama. Di antara komputer tersebut, beberapa komputer (disebut server Web) dapat mengirim pesan yang dapat dimengerti oleh browser web. Internet adalah infrastruktur, sedangkan Web adalah layanan yang dibangun di atas infrastruktur. Perlu dicatat ada beberapa layanan lain yang dibangun di atas Internet, seperti email dan IRC.

+ +

Langkah selanjutnya

+ + diff --git a/files/id/learn/common_questions/thinking_before_coding/index.html b/files/id/learn/common_questions/thinking_before_coding/index.html new file mode 100644 index 0000000000..c50aeff182 --- /dev/null +++ b/files/id/learn/common_questions/thinking_before_coding/index.html @@ -0,0 +1,180 @@ +--- +title: Bagaimana saya mulai mendesain situs web saya? +slug: Learn/Common_questions/Berfikir_sebelum_membuat_kode +tags: + - Beginner + - Composing + - Menulis + - NeedsActiveLearning + - Pemula + - needsSchema +translation_of: Learn/Common_questions/Thinking_before_coding +--- +

Artikel ini mencakup langkah pertama yang sangat penting dari setiap proyek: tentukan apa yang ingin Anda capai dengannya.

+ + + + + + + + + + + + +
Prasyarat:None
Tujuan:Belajar untuk menentukan tujuan untuk memberikan arahan untuk proyek website Anda.
+ +

Ikhtisar

+ +

Ketika memulai dengan proyek web, banyak orang fokus pada sisi teknis. Tentu saja Anda harus terbiasa dengan teknik kesenian Anda, tetapi yang penting adalah apa yang ingin Anda capai. Ya, tampaknya sudah jelas, tetapi terlalu banyak proyek gagal bukan karena kurangnya pengetahuan teknis, tetapi karena kurangnya tujuan dan visi.

+ +

Jadi, ketika Anda mendapatkan ide dan ingin mengubahnya menjadi sebuah situs web, ada beberapa pertanyaan yang harus Anda jawab sebelum yang lain:

+ + + +

Semua ini disebut ide proyek dan merupakan langkah pertama yang diperlukan untuk mencapai tujuan Anda, apakah Anda seorang pemula atau pengembang yang berpengalaman.

+ +

Active Learning

+ +

Belum ada pembelajaran aktif yang tersedia. Tolong, pertimbangkan untuk berkontribusi.

+ +

Menyelam lebih dalam

+ +

Sebuah proyek tidak pernah dimulai dengan sisi teknis. Musisi tidak akan pernah membuat musik apa pun kecuali mereka terlebih dahulu memiliki gagasan tentang apa yang ingin mereka mainkan — dan hal yang sama berlaku untuk pelukis, penulis, dan pengembang web. Teknik menempati urutan kedua.

+ +

Teknik jelas sangat penting. Musisi harus menguasai instrumen mereka. Tetapi musisi yang baik tidak akan pernah bisa menghasilkan musik yang bagus tanpa ide. Karena itu, sebelum terjun ke sisi teknis — misalnya, kode dan alat — Anda harus mundur dulu dan memutuskan secara terperinci apa yang ingin Anda lakukan.

+ +

Diskusi satu jam dengan teman adalah awal yang baik, tetapi tidak memadai. Anda harus duduk dan menyusun ide-ide Anda untuk mendapatkan pandangan yang jelas tentang jalan apa yang harus Anda ambil untuk mewujudkan ide-ide Anda. Untuk melakukan ini, Anda hanya perlu pena dan kertas dan beberapa waktu untuk menjawab setidaknya pertanyaan-pertanyaan berikut.

+ +
+

Catatan: Ada banyak cara untuk melaksanakan ide proyek. Kita tidak bisa meletakkan semuanya di sini (keseluruhan buku tidak akan cukup). Apa yang akan kami sajikan di sini adalah metode sederhana untuk menangani apa yang para profesional sebut sebagai Project Ideation, Project Planning, danProject Management.

+
+ +

Apa yang sebenarnya ingin saya capai?

+ +

Ini adalah pertanyaan yang paling penting untuk dijawab, karena itu mendorong segalanya. Buat daftar semua tujuan yang ingin Anda capai. Bisa apa saja: menjual barang untuk menghasilkan uang, mengekspresikan pendapat politik, bertemu teman baru, bermain musik dengan musisi, mengumpulkan gambar kucing, atau apa pun yang Anda inginkan.

+ +

Misalkan Anda seorang musisi. Anda bisa berharap demikian:

+ + + +

Setelah Anda memiliki daftar seperti itu, Anda perlu memprioritaskan. Pesanlah tujuan dari yang paling penting hingga yang tidak penting:

+ +
    +
  1. Mencari teman laki-laki/perempuan.
    2. +
  2. Biarkan orang lain mendengarkan musik Anda.
    3. +
  3. Bicara tentang musik Anda.
    4. +
  4. Temui musisi lain.
    5. +
  5. Jual barang.
    6. +
  6. Ajarkan musik melalui video.
    7. +
  7. Publikasikan foto kucing Anda.
    8. +
+ +

Melakukan latihan sederhana ini — menulis tujuan dan menyortirnya — akan membantu Anda keluar ketika Anda harus mengambil keputusan. (Haruskah saya menerapkan fitur ini, gunakan layanan ini, buat desain ini?)

+ +

Jadi sekarang Anda memiliki daftar tujuan yang diprioritaskan, mari beralih ke pertanyaan berikutnya.

+ +

Bagaimana sebuah situs web dapat membawa saya ke tujuan saya?

+ +

Jadi Anda memiliki daftar sasaran dan Anda merasa perlu situs web untuk mencapai sasaran itu. Apakah kamu yakin?

+ +

Mari kita lihat kembali contoh kita. Kami memiliki lima tujuan yang terhubung dengan musik, satu tujuan yang terkait dengan kehidupan pribadi (menemukan pasangan Anda yang signifikan), dan foto-foto kucing yang sama sekali tidak terkait. Apakah masuk akal untuk membangun satu situs web untuk mencakup semua tujuan itu? Apakah itu perlu? Lagi pula, skor layanan web yang ada dapat membawa Anda ke tujuan Anda tanpa membangun situs web baru.

+ +

Menemukan seorang gadis / pacar adalah kasus utama di mana lebih masuk akal untuk menggunakan sumber daya yang ada daripada membangun situs yang sama sekali baru. Mengapa? Karena kita akan menghabiskan lebih banyak waktu membangun dan memelihara situs web daripada benar-benar mencari seorang gadis / pacar. Karena tujuan kita adalah yang paling penting, kita harus menghabiskan energi kita untuk meningkatkan alat yang ada daripada memulai dari awal. Sekali lagi, ada begitu banyak layanan web yang sudah tersedia untuk menampilkan foto yang tidak sepadan dengan upaya untuk membangun situs baru hanya untuk menyebarkan berita tentang betapa lucunya kucing kita.

+ +

Lima tujuan lainnya semuanya terhubung dengan musik. Tentu saja ada banyak layanan web yang dapat menangani tujuan ini, tetapi masuk akal dalam hal ini untuk membangun situs web khusus kami sendiri. Situs web semacam itu adalah cara terbaik untuk mengumpulkan semua hal yang ingin kami terbitkan di satu tempat (baik untuk tujuan 3, 5, dan 6) dan mempromosikan interaksi antara kami dan publik (baik untuk tujuan 2 dan 4). Singkatnya, karena semua tujuan ini berkisar pada topik yang sama, memiliki segalanya di satu tempat akan membantu kita memenuhi tujuan kita dan membantu pengikut kita terhubung dengan kita.

+ +

Bagaimana situs web dapat membantu saya mencapai tujuan saya? Dengan menjawab itu, Anda akan menemukan cara terbaik untuk mencapai tujuan Anda dan menyelamatkan diri dari usaha yang sia-sia.

+ +

Apa yang perlu dilakukan, dan dalam urutan apa, untuk mencapai tujuan saya?

+ +

Sekarang setelah Anda tahu apa yang ingin Anda capai, saatnya untuk mengubah tujuan-tujuan tersebut menjadi langkah-langkah yang dapat ditindaklanjuti. Sebagai catatan tambahan, tujuan Anda tidak harus ditentukan. Mereka berevolusi dari waktu ke waktu bahkan dalam perjalanan proyek, terutama jika Anda menghadapi hambatan yang tidak terduga atau hanya mengubah pikiran Anda.

+ +

Daripada melalui penjelasan panjang, mari kita kembali ke contoh kita dengan tabel ini:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TujuanHal yang harus dilakukan
+

Biarkan orang lain mendengarkan musik Anda

+ 		+
    +
  1. Rekam musik
    2. +
  2. Siapkan beberapa file audio yang dapat digunakan online (Bisakah Anda melakukan ini dengan layanan web yang ada?)
    3. +
  3. Berikan orang akses ke musik Anda di beberapa bagian situs web Anda
    4. +
+
Bicara tentang musik Anda +
    +
  1. Tulis beberapa artikel untuk memulai diskusi
    2. +
  2. Tentukan bagaimana tampilan artikel
    3. +
  3. Publikasikan artikel-artikel di situs web (Bagaimana melakukan ini?)
    4. +
+
Bertemu musisi lain +
    +
  1. Berikan cara agar orang lain menghubungi Anda (Email? Facebook? Telepon? Mail?)
    2. +
  2. Tetapkan bagaimana orang akan menemukan saluran kontak itu dari situs web Anda
    3. +
+
Jual barang +
    +
  1. Buat barangnya 
    2. +
  2. Simpan barangnya
    3. +
  3. Temukan cara untuk menangani pengiriman
    4. +
  4. Temukan cara untuk menangani pembayaran
    5. +
  5. Buat mekanisme di situs Anda agar orang memesan
    6. +
+
Ajarkan musik melalui video +
    +
  1. Rekam pelajaran video 
    2. +
  2. Siapkan file video yang dapat dilihat secara online (Sekali lagi, dapatkah Anda melakukan ini dengan layanan web yang ada?)
    3. +
  3. Berikan orang akses ke video Anda di beberapa bagian situs web Anda
    4. +
+
+ +

Dua hal yang perlu diperhatikan. Pertama, beberapa item ini tidak terkait dengan web (mis., Rekam musik, tulis artikel). Seringkali aktivitas offline itu lebih penting daripada sisi web proyek. Dalam penjualan, misalnya, jauh lebih penting dan memakan waktu untuk menangani persediaan, pembayaran, dan pengiriman daripada membangun situs web tempat orang dapat memesan.

+ +

Kedua, menetapkan langkah-langkah yang dapat ditindaklanjuti mengarah ke pertanyaan baru yang perlu Anda jawab. Biasanya ternyata ada lebih banyak pertanyaan daripada yang kita duga sebelumnya. (Misalnya, haruskah saya belajar bagaimana melakukan semua ini sendiri, meminta seseorang untuk melakukannya untuk saya, atau menggunakan layanan pihak ketiga?)

+ +

Kesimpulan

+ +

Seperti yang Anda lihat, ide sederhana "Saya ingin membuat situs web" menghasilkan daftar tugas yang panjang, yang hanya tumbuh lebih lama saat Anda memikirkannya. Segera mungkin terlihat luar biasa, tetapi jangan panik. Anda tidak perlu menjawab semua pertanyaan dan Anda tidak perlu melakukan semuanya dalam daftar Anda. Yang penting adalah memiliki visi tentang apa yang Anda inginkan dan bagaimana menuju ke sana. Setelah Anda memiliki visi yang jelas itu, Anda perlu memutuskan bagaimana dan kapan melakukannya. Sederhanakan tugas-tugas besar menjadi langkah-langkah kecil yang dapat ditindaklanjuti. Dan langkah-langkah kecil itu akan menambah pencapaian besar.

+ +

Dari artikel ini, Anda sekarang dapat membuat rencana kasar untuk membuat situs web. Langkah selanjutnya mungkin membaca how the Internet works.

diff --git a/files/id/learn/css/first_steps/index.html b/files/id/learn/css/first_steps/index.html new file mode 100644 index 0000000000..dbff8144de --- /dev/null +++ b/files/id/learn/css/first_steps/index.html @@ -0,0 +1,33 @@ +--- +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/learn/forms/index.html b/files/id/learn/forms/index.html new file mode 100644 index 0000000000..9daf1d6077 --- /dev/null +++ b/files/id/learn/forms/index.html @@ -0,0 +1,340 @@ +--- +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/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/index.html b/files/id/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/index.html deleted file mode 100644 index 76600c89ea..0000000000 --- a/files/id/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Akan terlihat seperti apa website kamu? -slug: Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda -tags: - - Aset - - Desain - - Fonts - - 'I10n:prioritas' - - Konten - - Pemula - - Pengkomposisian - - Sederhana - - Usang - - belajar - - pelan-pelan -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like ---- -
{{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")}}
- -
-

Akan terlihat seperti apa website kamu? Diskusikan terlebih dahulu perencanaan dan desain pekerjaan yang harus kamu lakukan untuk websitemu sebelum menulis code, termasuk "Informasi apa saja yang websitemu tawarkan?" "Font dan warna apa saja yang kamu inginkan?" "Apa yang websitemu lakukan?"

-
- -

Hal penting yang pertama: Perencanaan

- -

Sebelum melakukan sesuatu, kamu pasti perlu ide. Apa yang harus benar-benar websitemu lakukan? Pada dasarnya sebuah website dapat melakukan apapun, tapi untuk percobaan pertama kamu harus membuat sesuatunya sederhana. Kita akan mulai dengan membuat halaman web sederhana dengan judul, gambar, dan beberapa paragraf.

- -

Untuk memulai, kamu harus menjawab beberapa pertanyaan berikut ini:

- -
    -
  1. Tentang apa websitemu? Apakah kamu suka anjing, New York, atau Pacman?
    2. -
  2. Informasi apa yang akan kamu sajikan? Tulis sebuah judul dan beberapa paragraf, dan pikirkan gambar yang ingin kamu tampilkan di halaman website.
    3. -
  3. Akan terlihat seperti apa websitemu, dalam kondisi paling sederhana. Apa warna latar belakang? Apa jenis huruf yang tepat: formal, kartun, bold and loud, halus?
    4. -
- -
-

Catatan: Proyek yang kompleks perlu pedoman rinci yang masuk ke semua rincian warna, jenis huruf, jarak antara item pada halaman, gaya penulisan yang sesuai, dan sebagainya. Hal ini kadang-kadang disebut panduan desain atau buku merk, dan kamu bisa melihat contohnya di Pedoman Firefox OS.

-
- -

Gambar desainnya

- -

Selanjutnya, ambil pulpen dan kertas lalu buat sketsa kasar bagaimana tampilan web kamu nantinya. Untuk web pertamamu, tidak banyak yang akan digambar, tapi kamu harus terbiasa melakukan hal ini. Akan sangat membantu — dan gambarnya tidak perlu sebagus lukisan Van Gogh!

- -

- -
-

Catatan: Bahkan nyatanya, dalam website yang kompleks, tim desain biasa nya membuat sketsa kasar dulu, setelah itu baru membuat desain digital nya dengan editor grafik atau teknologi web.

- -

Dalam tim yang membangun web, biasanya ada seorang desainer grafis dan seorang {{Glossary("UX", "user-experience")}} (UX) desainer. Desainer grafis kerjaanya memperindah tampilan website. Desainer UX kerjaanya lebih abstrak dalam menangani pengalaman dan interaksi pengguna dengan website.

-
- -

Memilih aset

- -

Sampai disini, lebih baik mulai memilih konten apa yang akan kamu tampilan dalam halaman webmu.

- -

Teks

- -

Kamu harus menulis paragraf dan judul di awal. Jangan sampai lupa.

- -

Warna tema

- -

Untuk memilih warna, lihat Color Picker dan pilih warna kesukaanmu. Saat kamu mengklik sebuah warna, kamu akan melihat 6-karakter kode yang aneh seperti #660066. Itulah yang disebut kode hex (kependekan dari hexadecimal). Kopi kodenya ke tempat aman supaya bisa dipakai nanti.

- -

- -

Gambar

- -

Untuk memilih gambar, lihat Google Images dan cari sesuatu yang cocok.

- -
    -
  1. Ketika kamu sudah menemukan yang kamu inginkan, klik gambarnya.
    2. -
  2. Pilih View image.
    3. -
  3. Di halaman selanjutnya, klik kanan pada gambar (Ctrl + klik di Mac), pilih Save Image As..., dan pilih tempat untuk menyimpan gambarnya. Bisa juga dikopi alamat webnya dari bar alamat perambanmu supaya bisa dipakai nanti.
    4. -
- -

- -

- -

Perlu diingat bahwa kebanyakan gambar di web, termasuk Google Images, memiliki hak cipta. Untuk mengurangi kemungkinan kamu melanggar hak cipta, gunakan filter lisensi dari Google. klik di tombol Tool, lalu pilih opsi Usage rights yang muncul di situ. Kamu sebaiknya pilih opsi semacam Labeled for reuse.

- -

- -

Font

- -

Untuk memilih font:

- -
    -
  1. Pergi ke Google Fonts dan cari di situ sampai kamu menemukan yang pas. kamu juga bisa menyaring yang berada di kanan layar supaya pencarian lebih mudah
    2. -
  2. Klik Add to collection tepat di sebelah nama font.
    3. -
  3. Klik Use di panel bagian bawah.
    4. -
  4. Di halaman selanjutnya, gulung ke bawah ke seksi 3 dan 4, dan kopi baris kode yang diberi Google ke teks editor untuk dipakai nantinya.
    5. -
- -

- -

 

- -

- -

{{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")}}

- -

 

- -

Dalam modul ini

- - 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 new file mode 100644 index 0000000000..04cc90ec4b --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,123 @@ +--- +title: Berurusan dengan file +slug: Learn/Getting_started_with_the_web/Mengelola_file +tags: + - CodingScripting + - File + - HTML + - 'I10n:prioritas' + - Panduan + - Pemula + - Teori + - website +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
+

{{LearnSidebar}}

+
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

Suatu website terdiri atas banyak file, seperti konten teks, kode, stylesheet, konten media, dan lain-lain. Ketika kamu sedang membuat sebuah website, kamu perlu merangkai file-file ini menjadi sebuah struktur yang sesuai pada komputermu, memastikan file-file tersebut saling terhubung antara satu dengan lainnya, dan memastikan semua konten sudah benar sebelum akhirnya kamu unggah mereka ke suatu server. Bagian ini akan membahas isu-isu yang perlu kamu ketahui sehingga kamu dapat membuat struktur file yang sesuai untuk website kamu.

+
+ +

Di mana website kamu berada dalam komputermu?

+ +

Ketika kamu sedang mengerjakan satu website lokal pada komputer pribadimu, kamu harus menyimpan semua file terkait pada satu folder sesuai dengan struktur website yang diunggah ke server. Folder ini dapat kamu simpan di manapun sesukamu, tetapi kamu harus meletakkannya di suatu tempat yang mudah ditemukan, seperti Desktop, pada folder Home, atau pada folder root dari hard drive kamu.

+ +
    +
  1. Pilih tempat untuk menyimpan proyek-proyek websitemu. Buatlah sebuah folder dengan nama web-projects (atau nama lain yang serupa). Di sinilah proyek-proyek websitemu akan disimpan. 
    2. +
  2. Di dalam folder sebelumnya, buat lagi satu folder untuk menyimpan website pertamamu. Berilah nama test-site (atau nama lainnya yang lebih menarik).
    3. +
+ +

Catatan untuk pengaturan huruf kapital dan penggunaan spasi

+ +

Kamu akan menyadari bahwa di artikel ini, kami akan meminta kamu untuk menamai folder dan file dalam huruf kecil tanpa spasi. Hal ini karena:

+ +
    +
  1. Banyak komputer, terutama web server, bersifat case-sensitive (sensitif terhadap huruf kapital dan kecil). Sebagai contoh, jika kamu meletakkan gambar pada situs seperti test-site/GambarSaya.jpg, dan kemudian pada file lain kamu akan memanggil gambar tersebut dengan  test-site/gambarsaya.jpg, maka kemungkinan hal tersebut tidak akan berhasil. 
    2. +
  2. Peramban, web server dan bahasa pemrograman tidak menangani spasi secara konsisten. Contohnya. jika kamu menggunakan spasi pada nama filemu, beberapa sistem akan memperlakukannya sebagai dua nama file. Beberapa server akan mengganti spasi pada nama filemu dengan "%20" (kode karakter untuk spasi pada URI) sehingga akan merusak semua tautanmu. Akan lebih baik bila kamu memisahkan kata-kata menggunakan tanda hubung (-), dibandingkan underscore (_): file-saya.html vs. file_saya.html.
    3. +
+ +

Jawaban singkatnya adalah kamu sebaiknya menggunakan tanda hubung (-) untuk nama file mu. Mesin pencari Google memperlakukan tanda hubung sebagai pemisah kata, namun ia tidak memperlakukan underscore sebagai hal yang sama. Atas dasar hal tersebut, sebaiknya kamu membiasakan diri menulis nama folder dan file dengan huruf kecil, tanpa spasi, dan dengan kata-kata yang dipisahkan oleh tanda hubung, kecuali bila kamu tahu apa yang kamu lakukan. Hal ini dapat membantumu terhindar dari masalah ke depan.

+ +

Bagaimana struktur yang harus kamu gunakan untuk websitemu?

+ +

Berikutnya, mari kita lihat struktur seperti apa yang diperlukan oleh website percobaan kita. Hal yang paling sering kamu temukan pada proyek website apapun yang kita buat adalah sebuah file indeks HTML dan folder untuk menyimpan gambar, file CSS, dan file script. Ayo buat sekarang juga:

+ +
    +
  1. index.html: File ini secara umum berisi halaman beranda, yaitu gambar dan teks yang bisa dilihat orang saat pertama kali membuka websitemu. Dengan menggunakan pengedit teks, buat sebuah file baru bernama index.html dan simpan di dalam folder test-site.
    2. +
  2. Folder images: Folder ini berisi semua gambar yang akan digunakan pada websitemu. Buatlah sebuah folder bernama images di dalam folder test-site. 
    3. +
  3. Folder styles: Folder ini berisi kode CSS yang digunakan untuk kontenmu (contoh: pengaturan teks dan warna latar belakang). Buat folder bernama styles di dalam folder test-site.
    4. +
  4. Folder scripts: Folder ini berisi semua kode JavaScript yang digunakan untuk menambah fungsionalitas interaktif pada websitemu. Buat folder bernama scripts di dalam folder test-site.
    5. +
+ +
+

Catatan: Pada komputer Windows, kamu mungkin mengalami kesulitan saat melihat nama file, karena Windows memiliki opsi Hide extensions for known file types yang aktif secara default. Umumnya, kamu dapat mematikannya dengan masuk ke Windows Explorer, pilih Folder options..., hilangkan centang pada kotak cek Hide extensions for known file types, lalu klik OK. Untuk informasi spesifik mengenai versi Windowsmu, kamu dapat melakukan pencarian di web.

+
+ +

Jalur/Path file

+ +

Agar file-file dapat berkomunikasi antara satu dengan lainnya, kamu harus menyediakan sebuah path file — sebuah rute sehingga satu file dapat mengetahui di mana lokasi file yang lainnya. Untuk mendemonstrasikannya, kita akan memasukkan sedikit HTML ke dalam file index.html, dan membuatnya menampilkan gambar yang kamu pilih pada artikel "Akan terlihat seperti apa website kamu?" 

+ +
    +
  1. Salin gambar yang kamu pilih sebelumnya ke folder image.
    2. +
  2. Buka file index.html, dan tambahkan kode berikut ke dalam file sama seperti di bawah. Abaikan maksud dari semuanya untuk saat ini — kita akan melihat struktur lebih detilnya di seri berikut. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <img src="" alt="My test image">
+  </body>
+</html>
    +
    3. +
  3. Baris <img src="" alt="My test image"> adalah kode HTML yang menyisipkan gambar ke dalam halaman. Kita perlu memberitahu HTML di mana letak gambar tersebut. Gambar berada pada folder images yang sejajar dengan file index.html. Untuk menelusuri struktur file dari index.html ke gambar kita, jalur file yang kita butuhkan adalah images/your-image-filename. Sebagai contoh, gambar tersebut kami namai  firefox-icon.png, sehingga jalur file-nya menjadi images/firefox-icon.png.
    4. +
  4. Sisipkan jalur file tersebut ke dalam kode HTML kamu di antara tanda petik pada kode src="".
    5. +
  5. Simpan file HTML, kemudian buka halaman tersebut pada peramban webmu (double-click file). Kamu akan melihat halaman web barumu menampilkan gambarmu!
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

Beberapa aturan umum untuk jalur file:

+ + + +

Untuk sekarang, itulah semua yang perlu kamu ketahui.

+ +
+

Catatan: Sistem file pada Windows biasanya menggunakan garis miring terbalik (\), bukan garis miring (/), contohnya C:\windows. Hal ini tidak masalah pada HTML — bahkan jika kamu sedang mengembangkan websitemu di Windows, kamu tetap dapat menggunakan garis miring di kodemu.

+
+ +

Apa lagi yang harus dilakukan?

+ +

Begitulah untuk saat ini. Struktur foldermu seharusnya terlihat seperti ini:

+ +

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

+ +

 

+ +

 

+ +

Dalam modul ini

+ + diff --git a/files/id/learn/getting_started_with_the_web/mengelola_file/index.html b/files/id/learn/getting_started_with_the_web/mengelola_file/index.html deleted file mode 100644 index 04cc90ec4b..0000000000 --- a/files/id/learn/getting_started_with_the_web/mengelola_file/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Berurusan dengan file -slug: Learn/Getting_started_with_the_web/Mengelola_file -tags: - - CodingScripting - - File - - HTML - - 'I10n:prioritas' - - Panduan - - Pemula - - Teori - - website -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files ---- -
-

{{LearnSidebar}}

-
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
- -
-

Suatu website terdiri atas banyak file, seperti konten teks, kode, stylesheet, konten media, dan lain-lain. Ketika kamu sedang membuat sebuah website, kamu perlu merangkai file-file ini menjadi sebuah struktur yang sesuai pada komputermu, memastikan file-file tersebut saling terhubung antara satu dengan lainnya, dan memastikan semua konten sudah benar sebelum akhirnya kamu unggah mereka ke suatu server. Bagian ini akan membahas isu-isu yang perlu kamu ketahui sehingga kamu dapat membuat struktur file yang sesuai untuk website kamu.

-
- -

Di mana website kamu berada dalam komputermu?

- -

Ketika kamu sedang mengerjakan satu website lokal pada komputer pribadimu, kamu harus menyimpan semua file terkait pada satu folder sesuai dengan struktur website yang diunggah ke server. Folder ini dapat kamu simpan di manapun sesukamu, tetapi kamu harus meletakkannya di suatu tempat yang mudah ditemukan, seperti Desktop, pada folder Home, atau pada folder root dari hard drive kamu.

- -
    -
  1. Pilih tempat untuk menyimpan proyek-proyek websitemu. Buatlah sebuah folder dengan nama web-projects (atau nama lain yang serupa). Di sinilah proyek-proyek websitemu akan disimpan. 
    2. -
  2. Di dalam folder sebelumnya, buat lagi satu folder untuk menyimpan website pertamamu. Berilah nama test-site (atau nama lainnya yang lebih menarik).
    3. -
- -

Catatan untuk pengaturan huruf kapital dan penggunaan spasi

- -

Kamu akan menyadari bahwa di artikel ini, kami akan meminta kamu untuk menamai folder dan file dalam huruf kecil tanpa spasi. Hal ini karena:

- -
    -
  1. Banyak komputer, terutama web server, bersifat case-sensitive (sensitif terhadap huruf kapital dan kecil). Sebagai contoh, jika kamu meletakkan gambar pada situs seperti test-site/GambarSaya.jpg, dan kemudian pada file lain kamu akan memanggil gambar tersebut dengan  test-site/gambarsaya.jpg, maka kemungkinan hal tersebut tidak akan berhasil. 
    2. -
  2. Peramban, web server dan bahasa pemrograman tidak menangani spasi secara konsisten. Contohnya. jika kamu menggunakan spasi pada nama filemu, beberapa sistem akan memperlakukannya sebagai dua nama file. Beberapa server akan mengganti spasi pada nama filemu dengan "%20" (kode karakter untuk spasi pada URI) sehingga akan merusak semua tautanmu. Akan lebih baik bila kamu memisahkan kata-kata menggunakan tanda hubung (-), dibandingkan underscore (_): file-saya.html vs. file_saya.html.
    3. -
- -

Jawaban singkatnya adalah kamu sebaiknya menggunakan tanda hubung (-) untuk nama file mu. Mesin pencari Google memperlakukan tanda hubung sebagai pemisah kata, namun ia tidak memperlakukan underscore sebagai hal yang sama. Atas dasar hal tersebut, sebaiknya kamu membiasakan diri menulis nama folder dan file dengan huruf kecil, tanpa spasi, dan dengan kata-kata yang dipisahkan oleh tanda hubung, kecuali bila kamu tahu apa yang kamu lakukan. Hal ini dapat membantumu terhindar dari masalah ke depan.

- -

Bagaimana struktur yang harus kamu gunakan untuk websitemu?

- -

Berikutnya, mari kita lihat struktur seperti apa yang diperlukan oleh website percobaan kita. Hal yang paling sering kamu temukan pada proyek website apapun yang kita buat adalah sebuah file indeks HTML dan folder untuk menyimpan gambar, file CSS, dan file script. Ayo buat sekarang juga:

- -
    -
  1. index.html: File ini secara umum berisi halaman beranda, yaitu gambar dan teks yang bisa dilihat orang saat pertama kali membuka websitemu. Dengan menggunakan pengedit teks, buat sebuah file baru bernama index.html dan simpan di dalam folder test-site.
    2. -
  2. Folder images: Folder ini berisi semua gambar yang akan digunakan pada websitemu. Buatlah sebuah folder bernama images di dalam folder test-site. 
    3. -
  3. Folder styles: Folder ini berisi kode CSS yang digunakan untuk kontenmu (contoh: pengaturan teks dan warna latar belakang). Buat folder bernama styles di dalam folder test-site.
    4. -
  4. Folder scripts: Folder ini berisi semua kode JavaScript yang digunakan untuk menambah fungsionalitas interaktif pada websitemu. Buat folder bernama scripts di dalam folder test-site.
    5. -
- -
-

Catatan: Pada komputer Windows, kamu mungkin mengalami kesulitan saat melihat nama file, karena Windows memiliki opsi Hide extensions for known file types yang aktif secara default. Umumnya, kamu dapat mematikannya dengan masuk ke Windows Explorer, pilih Folder options..., hilangkan centang pada kotak cek Hide extensions for known file types, lalu klik OK. Untuk informasi spesifik mengenai versi Windowsmu, kamu dapat melakukan pencarian di web.

-
- -

Jalur/Path file

- -

Agar file-file dapat berkomunikasi antara satu dengan lainnya, kamu harus menyediakan sebuah path file — sebuah rute sehingga satu file dapat mengetahui di mana lokasi file yang lainnya. Untuk mendemonstrasikannya, kita akan memasukkan sedikit HTML ke dalam file index.html, dan membuatnya menampilkan gambar yang kamu pilih pada artikel "Akan terlihat seperti apa website kamu?" 

- -
    -
  1. Salin gambar yang kamu pilih sebelumnya ke folder image.
    2. -
  2. Buka file index.html, dan tambahkan kode berikut ke dalam file sama seperti di bawah. Abaikan maksud dari semuanya untuk saat ini — kita akan melihat struktur lebih detilnya di seri berikut. - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <img src="" alt="My test image">
-  </body>
-</html>
    -
    3. -
  3. Baris <img src="" alt="My test image"> adalah kode HTML yang menyisipkan gambar ke dalam halaman. Kita perlu memberitahu HTML di mana letak gambar tersebut. Gambar berada pada folder images yang sejajar dengan file index.html. Untuk menelusuri struktur file dari index.html ke gambar kita, jalur file yang kita butuhkan adalah images/your-image-filename. Sebagai contoh, gambar tersebut kami namai  firefox-icon.png, sehingga jalur file-nya menjadi images/firefox-icon.png.
    4. -
  4. Sisipkan jalur file tersebut ke dalam kode HTML kamu di antara tanda petik pada kode src="".
    5. -
  5. Simpan file HTML, kemudian buka halaman tersebut pada peramban webmu (double-click file). Kamu akan melihat halaman web barumu menampilkan gambarmu!
    6. -
- -

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

- -

Beberapa aturan umum untuk jalur file:

- - - -

Untuk sekarang, itulah semua yang perlu kamu ketahui.

- -
-

Catatan: Sistem file pada Windows biasanya menggunakan garis miring terbalik (\), bukan garis miring (/), contohnya C:\windows. Hal ini tidak masalah pada HTML — bahkan jika kamu sedang mengembangkan websitemu di Windows, kamu tetap dapat menggunakan garis miring di kodemu.

-
- -

Apa lagi yang harus dilakukan?

- -

Begitulah untuk saat ini. Struktur foldermu seharusnya terlihat seperti ini:

- -

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

- -

 

- -

 

- -

Dalam modul ini

- - 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 new file mode 100644 index 0000000000..76600c89ea --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,117 @@ +--- +title: Akan terlihat seperti apa website kamu? +slug: Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda +tags: + - Aset + - Desain + - Fonts + - 'I10n:prioritas' + - Konten + - Pemula + - Pengkomposisian + - Sederhana + - Usang + - belajar + - pelan-pelan +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +
{{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")}}
+ +
+

Akan terlihat seperti apa website kamu? Diskusikan terlebih dahulu perencanaan dan desain pekerjaan yang harus kamu lakukan untuk websitemu sebelum menulis code, termasuk "Informasi apa saja yang websitemu tawarkan?" "Font dan warna apa saja yang kamu inginkan?" "Apa yang websitemu lakukan?"

+
+ +

Hal penting yang pertama: Perencanaan

+ +

Sebelum melakukan sesuatu, kamu pasti perlu ide. Apa yang harus benar-benar websitemu lakukan? Pada dasarnya sebuah website dapat melakukan apapun, tapi untuk percobaan pertama kamu harus membuat sesuatunya sederhana. Kita akan mulai dengan membuat halaman web sederhana dengan judul, gambar, dan beberapa paragraf.

+ +

Untuk memulai, kamu harus menjawab beberapa pertanyaan berikut ini:

+ +
    +
  1. Tentang apa websitemu? Apakah kamu suka anjing, New York, atau Pacman?
    2. +
  2. Informasi apa yang akan kamu sajikan? Tulis sebuah judul dan beberapa paragraf, dan pikirkan gambar yang ingin kamu tampilkan di halaman website.
    3. +
  3. Akan terlihat seperti apa websitemu, dalam kondisi paling sederhana. Apa warna latar belakang? Apa jenis huruf yang tepat: formal, kartun, bold and loud, halus?
    4. +
+ +
+

Catatan: Proyek yang kompleks perlu pedoman rinci yang masuk ke semua rincian warna, jenis huruf, jarak antara item pada halaman, gaya penulisan yang sesuai, dan sebagainya. Hal ini kadang-kadang disebut panduan desain atau buku merk, dan kamu bisa melihat contohnya di Pedoman Firefox OS.

+
+ +

Gambar desainnya

+ +

Selanjutnya, ambil pulpen dan kertas lalu buat sketsa kasar bagaimana tampilan web kamu nantinya. Untuk web pertamamu, tidak banyak yang akan digambar, tapi kamu harus terbiasa melakukan hal ini. Akan sangat membantu — dan gambarnya tidak perlu sebagus lukisan Van Gogh!

+ +

+ +
+

Catatan: Bahkan nyatanya, dalam website yang kompleks, tim desain biasa nya membuat sketsa kasar dulu, setelah itu baru membuat desain digital nya dengan editor grafik atau teknologi web.

+ +

Dalam tim yang membangun web, biasanya ada seorang desainer grafis dan seorang {{Glossary("UX", "user-experience")}} (UX) desainer. Desainer grafis kerjaanya memperindah tampilan website. Desainer UX kerjaanya lebih abstrak dalam menangani pengalaman dan interaksi pengguna dengan website.

+
+ +

Memilih aset

+ +

Sampai disini, lebih baik mulai memilih konten apa yang akan kamu tampilan dalam halaman webmu.

+ +

Teks

+ +

Kamu harus menulis paragraf dan judul di awal. Jangan sampai lupa.

+ +

Warna tema

+ +

Untuk memilih warna, lihat Color Picker dan pilih warna kesukaanmu. Saat kamu mengklik sebuah warna, kamu akan melihat 6-karakter kode yang aneh seperti #660066. Itulah yang disebut kode hex (kependekan dari hexadecimal). Kopi kodenya ke tempat aman supaya bisa dipakai nanti.

+ +

+ +

Gambar

+ +

Untuk memilih gambar, lihat Google Images dan cari sesuatu yang cocok.

+ +
    +
  1. Ketika kamu sudah menemukan yang kamu inginkan, klik gambarnya.
    2. +
  2. Pilih View image.
    3. +
  3. Di halaman selanjutnya, klik kanan pada gambar (Ctrl + klik di Mac), pilih Save Image As..., dan pilih tempat untuk menyimpan gambarnya. Bisa juga dikopi alamat webnya dari bar alamat perambanmu supaya bisa dipakai nanti.
    4. +
+ +

+ +

+ +

Perlu diingat bahwa kebanyakan gambar di web, termasuk Google Images, memiliki hak cipta. Untuk mengurangi kemungkinan kamu melanggar hak cipta, gunakan filter lisensi dari Google. klik di tombol Tool, lalu pilih opsi Usage rights yang muncul di situ. Kamu sebaiknya pilih opsi semacam Labeled for reuse.

+ +

+ +

Font

+ +

Untuk memilih font:

+ +
    +
  1. Pergi ke Google Fonts dan cari di situ sampai kamu menemukan yang pas. kamu juga bisa menyaring yang berada di kanan layar supaya pencarian lebih mudah
    2. +
  2. Klik Add to collection tepat di sebelah nama font.
    3. +
  3. Klik Use di panel bagian bawah.
    4. +
  4. Di halaman selanjutnya, gulung ke bawah ke seksi 3 dan 4, dan kopi baris kode yang diberi Google ke teks editor untuk dipakai nantinya.
    5. +
+ +

+ +

 

+ +

+ +

{{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")}}

+ +

 

+ +

Dalam modul ini

+ + diff --git a/files/id/learn/how_to_contribute/index.html b/files/id/learn/how_to_contribute/index.html deleted file mode 100644 index 0a64757fc1..0000000000 --- a/files/id/learn/how_to_contribute/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Cara berkontribusi untuk Area Belajar di MDN -slug: Learn/How_to_contribute -tags: - - Dokumentasi - - MDN - - MDN Meta - - Proyek MDC - - belajar - - kontribusi -translation_of: Learn/How_to_contribute ---- -

{{LearnSidebar}}

- -

Jika Anda berada disini, itu mungkin karena Anda tertarik berkontribusi dalam Area Belajar MDN. Itu berita bagus!

- -

Pada halaman ini, Anda akan menemukan semua hal yang Anda butuhkan untuk mulai membantu menigkatkan konten pembelajaran MDN. Ada banyak hal yang dapat Anda lakukan, tergantung pada seberapa waktu yang anda miliki dan apakah Anda seorang pemula, seorang pengembang web, atau seorang guru.

- -
-

Catatan: Jika Anda telah menjadi kontributor MDN, jangan ragu untuk memeriksa ulang halaman status dokumentasi untuk melacak pekerjaan yang sudah dilakukan dan melihat apa yang menjadi prioritas menulis.

-
- -
-

Catatan: Kontributor menggunakan Trello board untuk mengorganisir diri. Jika Anda ingin menggunakannya, hanya dengan membuat akun Trello dan ping Jeremie untuk memberikan Anda akses tulis ke papan.

-
- -

Saya seorang pemula

- -

Mengagumkan! Pemula sangat penting untuk menciptakan dan memberikan umpan balik pada materi pembelajaran. Anda memiliki perspektif yang unik pada artikel ini sebagai bagian dari target pengunjung, yang dapat membuat Anda menjadi Anggota yang sangat berharga dari tim kami. memang, jika Anda menggunakan salah satu artikel kami untuk mempelajari sesuatu dan Anda terjebak, atau menemukan artikel yang membingungkan dalam berbagai cara, Anda dapat memperbaikinya atau biarkan kami tahu tentang masalahnya sehingga kami dapat memperbaikinya.

- -

Kontribusi juga merupakan cara yang bagus untuk bersenang-senang sambil belajar hal-hal baru. Jika Anda pernah merasa kebingungan atau memiliki pertanyaan, jangan ragu untuk menghubungi kami di mailing list kami atau Saluran IRC (lihat di bagian bawah halaman ini untuk rincian).
-
- Berikut adalah beberapa cara yang disarankan untuk Anda dapat berkontribusi:

- -
-
Tambahkan tag ke artikel kami (5 menit)
-
Pemberian tag konten MDN adalah salah satu cara termudah untuk berkontribusi MDN. Seperti banyak fitur kami menggunakan tag untuk membantu menyajikan informasi dalam konteks, membantu dengan pemberian tag merupakan kontribusi yang sangat berharga. Lihatlah daftar istilah dan artikel pembelajaran tanpa tag untuk memulai.
-
Membaca dan meninjau daftar istilah (15 menit)
-
Sebagai pemula, kita perlu mata segar Anda untuk melihat konten kami. Jika Anda menemukan entri glossary yang sulit untuk dipahami, itu berarti bahwa entrinya perlu ditingkatkan. Jangan ragu untuk membuat perubahan yang Anda anggap perlu. Jika Anda tidak berpikir Anda memiliki keterampilan yang diperlukan untuk mengedit entri sendiri, setidaknya memberitahu kami di mailing list kami.
-
Menulis daftar istilah baru (1 jam)
-
Ini adalah cara yang paling efektif untuk belajar sesuatu yang baru. Pilih sebuah konsep yang ingin  Anda pahami, dan saat Anda belajar tentang hal itu, tulislah daftar istilah tentang hal itu. Menjelaskan sesuatu kepada orang lain adalah cara yang bagus untuk "memperbaiki" pengetahuan ke dalam otak Anda, dan membantu Anda memahami diri sendiri, sambil membantu orang lain. Setiap orang menang!
-
Membaca dan meninjau artikel pembelajaran (2 jam)
-
Hal ini sangat mirip meninjau daftar istilah (lihat di atas); itu hanya membutuhkan waktu lebih lama, karena artikel ini biasanya sedikit lebih lama.
-
- -

Saya seorang pengembang web

- -

Fantastis! Keterampilan teknis Anda adalah apa yang kami butuhkan untuk memastikan kami menyediakan konten teknis yang akurat untuk pemula. Karena ini adalah bagian tertentu dari MDN didedikasikan untuk belajar Web, pastikan penjelasan Anda sesederhana mungkin, tanpa begitu sederhana itu tidak akan berguna. Ini lebih penting untuk dimengerti daripada menjadi terlalu tepat.

- -
-
Membaca dan meninjau daftar istilah (15 menit)
-
Sebagai pengembang web, kita perlu Anda untuk memastikan konten kami secara teknis akurat tanpa terlalu bertele-tele. Jangan ragu untuk membuat perubahan yang Anda anggap perlu. Jika Anda ingin mendiskusikan isi sebelum mengedit, ping kami di mailing list kami atau Saluran IRC.
-
Menulis daftar istilah baru (1 jam)
-
Menjelaskan istilah teknis merupakan cara yang sangat baik untuk belajar menulis yang akurat sekaligus sederhana secara teknis. Para pemula akan berterima kasih kepada Anda atas hal ini. Kami memiliki banyak istilah yang belum terdefinisikan, yang membutuhkan perhatian Anda. Pilih salah satu dan kerjakan.
-
Membaca dan meninjau artikel pembelajaran (2 jam)
-
Ini adalah hal yang sama seperti meninjau entri glossary (lihat di atas); hanya saja membutuhkan sedikit lebih banyak waktu karena artikelnya sedikit panjang.
-
Menulis artikel pembelajaran baru (4 jam)
-
MDN kurang artikel sederhana tentang menggunakan teknologi web (HTML, CSS, JavaScript, dll). Kami juga memiliki konten lama di MDN yang layak untuk dikaji dan dibentuk kembali. Dorong kemampuan Anda sampai batas untuk membuat teknologi web yang dapat digunakan bahkan oleh pemula.
-
Buat latihan, contoh kode atau alat pembelajaran aktif (? hours)
-
Semua artikel pembelajaran kita membutuhkan apa yang kita sebut materi "belajar aktif", karena orang belajar lebih baik dengan melakukanya sendiri. Materi tersebut adalah latihan atau konten interaktif yang membantu pengguna untuk menerapkan dan memanipulasi ricnian konsep dalam sebuah artikel. Ada banyak cara yang mungkin untuk membuat konten pembelajaran yang aktif, dari menciptakan contoh kode dengan JSFiddle atau serupa, untuk membangun konten interaktif yang sepenuhnya dapat diubah dengan Thimble. Lepaskan kreativitas Anda!
-
- -

Saya seorang Pengajar

- -

MDN memiliki sejarah panjang keunggulan teknis, tapi kami tidak memiliki rasa yang baik dari cara terbaik untuk mengajarkan konsep untuk pendatang baru. Di sinilah kami perlu Anda, sebagai pengajar atau pendidik. Anda dapat membantu kami memastikan bahwa materi yang kami berikan baik, jalur pendidikan yang masuk akal bagi pembaca kami.

- -
-
Membaca dan meninjau daftar istilah (15 menit)
-
Periksa daftar istilah dan jangan takut untuk membuat perubahan yang menurut Anda perlu. Jika Anda ingin mendiskusikan konten sebelum mengedit, ping kami di mailing list atau Saluran IRC kami.
-
Menulis daftar istilah baru (1 jam)
-
Jelas, definisi sederhana dari istilah dan ikhtisar dasar konsep dalam daftar istilah penting dalam memenuhi kebutuhan pemula '. Pengalaman Anda sebagai seorang pendidik dapat membantu membuat daftar istilah yang sangat baik; kami memiliki banyak istilah yang belum terdefinisikan yang perlu Anda perhatikan. Pilih satu dan kerjakan.
-
Tambahkan ilustrasi dan/ atau skema artikel (1 jam)
-
Seperti yang anda ketahui, ilustrasi merupakan bagian penting dari isi pembelajaran apapun. Ini adalah sesuatu yang kita sering kekurangan di MDN dan keterampilan Anda dapat membuat perbedaan di area itu. Kunjungi artikel yang kekurangan konten ilustrasi dan pilih salah satu yang Anda inginkan untuk membuat ilustrasi.
-
Membaca dan meninjau artikel pembelajaran (2 jam)
-
Hal ini mirip dengan meninjau daftar istilah (lihat di atas), tetapi membutuhkan lebih banyak waktu karena artikel biasanya sedikit lebih panjang.
-
Menulis artikel pembelajaran baru (4 jam)
-
Kita perlu artikel yang mudah tentang ekosistem Web dan topik fungsional lain di sekitarnya. Karena ini artikel pembelajaran perlu mendidik daripada mencoba untuk benar-benar menutupi segala sesuatu yang perlu diketahui, pengalaman Anda dalam mengetahui apa yang harus diliput dan bagaimana hal itu akan menjadi aset besar.
-
Buat latihan, kuis atau alat pembelajaran interaktif (? jam)
-
Semua artikel pembelajaran kita membutuhkan apa yang kita sebut materi "belajar aktif". Materi tersebut adalah latihan atau konten interaktif yang membantu pengguna belajar untuk menggunakan dan memanipulasi konsep yang dirincikan dalam sebuah artikel. Ada banyak hal yang dapat Anda lakukan di sini, dari membuat kuis untuk membangun konten interaktif yang sepenuhnya dapat diubah dengan Thimble. Lepaskan kreativitas Anda!
-
Buat jalur studi (? jam)
-
Dalam rangka memberikan tutorial yang progresif dan mudah dipahami, kita perlu membentuk konten jalur studi. Ini adalah cara untuk mengumpulkan konten yang ada dan mencari apa kekurangan artikel pembelajaran untuk menuliskannya.
-
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 new file mode 100644 index 0000000000..5563c68fd3 --- /dev/null +++ b/files/id/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,293 @@ +--- +title: Document and website structure +slug: Learn/HTML/Pengenalan_HTML/Document_and_website_structure +tags: + - HTML + - Halaman + - Panduan + - Pemula + - Script Coding + - Situs + - Tata letak + - blocks + - semantic +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

Selain mendefinisikan setiap bagian halaman Anda (seperti "paragraf" atau "gambar"), {{glossary("HTML")}} juga menawarkan sejumlah elemen tingkat blok yang digunakan untuk menentukan area situs web Anda (seperti "header", "menu navigasi", "kolom konten utama"). Artikel ini membahas cara merencanakan struktur situs web dasar, dan menulis HTML untuk mewakili struktur ini.

+ + + + + + + + + + + + +
Prerequisites:Basic HTML familiarity, as covered in Getting started with HTML. HTML text formatting, as covered in HTML text fundamentals. How hyperlinks work, as covered in Creating hyperlinks.
Objective:Learn how to structure your document using semantic tags, and how to work out the structure of a simple website.
+ +

Bagian dasar dari suatu dokumen

+ +

Halaman web dapat dan akan terlihat sangat berbeda satu sama lain, tetapi mereka semua cenderung berbagi komponen standar yang sama, kecuali halaman menampilkan video layar penuh atau permainan, adalah bagian dari semacam proyek seni, atau hanya terstruktur dengan buruk:

+ +
+
header (tajuk):
+
Biasanya strip besar di bagian atas dengan tajuk besar, logo, dan mungkin tagline. Ini biasanya tetap sama dari satu halaman web ke yang lain.
+
navigation bar (bilah navigasi):
+
Tautan ke bagian utama situs; biasanya diwakili oleh tombol menu, tautan, atau tab. Seperti tajuk, konten ini biasanya tetap konsisten dari satu halaman web ke halaman web lainnya - memiliki navigasi yang tidak konsisten pada situs web Anda hanya akan menyebabkan pengguna yang bingung dan frustrasi. Banyak perancang web menganggap bilah navigasi sebagai bagian dari tajuk daripada komponen individual, tetapi itu bukan keharusan; pada kenyataannya, beberapa juga berpendapat bahwa memiliki dua terpisah lebih baik untuk aksesibilitas, karena pembaca layar dapat membaca dua fitur lebih baik jika mereka terpisah.
+
main content (konten utama):
+
Area besar di tengah yang berisi sebagian besar konten unik dari halaman web yang diberikan, misalnya, video yang ingin Anda tonton, atau cerita utama yang Anda baca, atau peta yang ingin Anda lihat, atau berita utama, dll. Ini adalah satu bagian dari situs web yang pasti akan bervariasi dari halaman ke halaman!
+
sidebar (bilah samping):
+
Beberapa info tambahan, tautan, kutipan, iklan, dll. Biasanya, ini kontekstual dengan apa yang terkandung dalam konten utama (misalnya pada halaman artikel berita, bilah sisi mungkin berisi bio penulis, atau tautan ke artikel terkait) tetapi ada juga merupakan kasus di mana Anda akan menemukan beberapa elemen berulang seperti sistem navigasi sekunder.
+
footer:
+
Strip di bagian bawah halaman yang umumnya berisi cetakan, pemberitahuan hak cipta, atau info kontak. Ini adalah tempat untuk menaruh informasi umum (seperti header) tetapi biasanya, informasi itu tidak penting atau sekunder untuk situs web itu sendiri. Footer juga terkadang digunakan untuk {{Glossary("SEO")}} tujuan, dengan menyediakan tautan untuk akses cepat ke konten populer.
+
+ +

A "typical website" could be structured something like this:

+ +

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

+ +

HTML for structuring content

+ +

The simple example shown above isn't pretty, but it is perfectly fine for illustrating a typical website layout example. Some websites have more columns, some are a lot more complex, but you get the idea. With the right CSS, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job.

+ +

This is because visuals don't tell the whole story. We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?

+ +
+

Note: Colorblind people represent around 4% of the world population or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were 285 million such people in the world, while the total population was around 7 billion).

+
+ +

In your HTML code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognise those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of consequences of not using the right element structure and semantics for the right job.

+ +

Untuk menerapkan mark up semantik tersebut, HTML menyediakan tag khusus yang dapat Anda gunakan untuk mewakili bagian tersebut, misalnya:

+ + + +

Active learning: exploring the code for our example

+ +

Our example seen above is represented by the following code (you can also find the example in our GitHub repository). Kami ingin Anda melihat contoh di atas, dan kemudian melihat daftar di bawah untuk melihat bagian apa yang membentuk bagian visual apa.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>My page title</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+
+    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Here is our main header that is used across all the pages of our website -->
+
+    <header>
+      <h1>Header</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Our team</a></li>
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+
+       <!-- A Search form is another commmon non-linear way to navigate through a website. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Search query">
+         <input type="submit" value="Go!">
+       </form>
+     </nav>
+
+    <!-- Here is our page's main content -->
+    <main>
+
+      <!-- It contains an article -->
+      <article>
+        <h2>Article heading</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+        <h3>Subsection</h3>
+
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+
+        <h3>Another subsection</h3>
+
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
+
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
+
+      <!-- the aside content can also be nested within the main content -->
+      <aside>
+        <h2>Related</h2>
+
+        <ul>
+          <li><a href="#">Oh I do like to be beside the seaside</a></li>
+          <li><a href="#">Oh I do like to be beside the sea</a></li>
+          <li><a href="#">Although in the North of England</a></li>
+          <li><a href="#">It never stops raining</a></li>
+          <li><a href="#">Oh well...</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- And here is our main footer that is used across all the pages of our website -->
+
+    <footer>
+      <p>©Copyright 2050 by nobody. All rights reversed.</p>
+    </footer>
+
+  </body>
+</html>
+ +

Luangkan waktu untuk melihat kode dan memahaminya - komentar di dalam kode juga akan membantu Anda untuk memahaminya. Kami tidak meminta Anda untuk melakukan banyak hal lain dalam artikel ini, karena kunci untuk memahami tata letak dokumen adalah menulis struktur HTML yang baik, dan kemudian meletakkannya dengan CSS. Kami akan menunggu ini sampai Anda mulai mempelajari tata letak CSS sebagai bagian dari topik CSS.

+ +

HTML layout elements in more detail

+ +

It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our HTML element reference. For now, these are the main definitions that you should try to understand:

+ + + +

Non-semantic wrappers

+ +

Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some {{glossary("CSS")}} or {{glossary("JavaScript")}}. For cases like these, HTML provides the {{HTMLElement("div")}} and {{HTMLElement("span")}} elements. You should use these preferably with a suitable {{htmlattrxref('class')}} attribute, to provide some kind of label for them so they can be easily targeted.

+ +

{{HTMLElement("span")}} is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:

+ +
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
+him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
+play, the lights should be down low]</span>.</p>
+ +

Dalam hal ini, catatan editor seharusnya hanya memberikan arahan ekstra untuk sutradara drama; tidak seharusnya memiliki makna semantik tambahan. Untuk pengguna yang terlihat, CSS mungkin akan digunakan untuk menjauhkan catatan sedikit dari teks utama.

+ +

{{HTMLElement("div")}} is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:

+ +
<div class="shopping-cart">
+  <h2>Shopping cart</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
+      <img src="../products/3333-0985/thumb.png" alt="Silver earrings">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Total cost: $237.89</p>
+</div>
+ +

This isn't really an <aside>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn't even particularly warrant using a  <section>, as it isn't part of the main content of the page. So a <div> is fine in this case. We've included a heading as a signpost to aid screenreader users in finding it.

+ +
+

Warning: Div sangat nyaman digunakan sehingga mudah digunakan terlalu banyak. Karena mereka tidak memiliki nilai semantik, mereka hanya mengacaukan kode HTML Anda. Berhati-hatilah untuk menggunakannya hanya ketika tidak ada solusi semantik yang lebih baik dan cobalah untuk mengurangi penggunaannya seminimal mungkin jika tidak, Anda akan kesulitan memperbarui dan memelihara dokumen Anda.

+
+ +

Line breaks and horizontal rules

+ +

Two elements that you'll use occasionally and will want to know about are {{htmlelement("br")}} and {{htmlelement("hr")}}:

+ +

<br> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:

+ +
+
<p>There once was a man named O'Dell<br>
+Who loved to write HTML<br>
+But his structure was bad, his semantics were sad<br>
+and his markup didn't read very well.</p>
+
+ +

Without the <br> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, HTML ignores most whitespace); with <br> elements in the code, the markup renders like this:

+ +

{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}

+ +

<hr> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line. As an example:

+ +
+
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
+<hr>
+<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hazily and sighed; "better get back to work then", he mused.</p>
+
+ +

Would render like this:

+ +

{{EmbedLiveSample('horizantal-rule-live-sample', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}

+ +

Planning a simple website

+ +

Setelah Anda merencanakan struktur laman web sederhana, langkah logis berikutnya adalah mencoba mencari tahu konten apa yang ingin Anda tempatkan di seluruh situs web, halaman apa yang Anda butuhkan, dan bagaimana mereka harus diatur dan terhubung satu sama lain untuk pengalaman pengguna terbaik. This is called {{glossary("Information architecture")}}. Dalam situs web besar dan kompleks, banyak perencanaan yang dapat dilakukan dalam proses ini, tetapi untuk situs web sederhana dari beberapa halaman, ini bisa sangat sederhana, dan menyenangkan!

+ +
    +
  1. Ingatlah bahwa Anda akan memiliki beberapa elemen yang umum untuk sebagian besar (jika tidak semua) halaman - seperti menu navigasi, dan konten footer. Jika situs Anda untuk bisnis, misalnya, sebaiknya informasi kontak Anda tersedia di catatan kaki di setiap halaman. Catat kesamaan yang ingin Anda miliki untuk setiap halaman.the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. +
  2. Selanjutnya, buatlah sketsa kasar tentang bagaimana Anda ingin struktur setiap halaman terlihat (mungkin terlihat seperti situs web sederhana kami di atas). Catat apa yang akan menjadi setiap blok.A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. +
  3. Sekarang, tukar pikiran semua konten lain (tidak umum untuk setiap halaman) yang ingin Anda miliki di situs web Anda - tulis daftar besar.A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. +
  4. Selanjutnya, cobalah untuk mengurutkan semua item konten ini menjadi grup, untuk memberi Anda gambaran tentang bagian apa yang bisa hidup bersama di halaman yang berbeda. Ini sangat mirip dengan teknik yang disebut {{glossary("Card sorting")}}.The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. +
  5. Sekarang cobalah untuk membuat sketsa peta situs kasar - miliki gelembung untuk setiap halaman di situs Anda, dan gambarlah garis untuk menunjukkan alur kerja khas antar halaman. Beranda mungkin ada di tengah, dan tautan ke sebagian besar jika tidak semua yang lain; sebagian besar halaman di situs kecil harus tersedia dari navigasi utama, meskipun ada pengecualian. Anda mungkin juga ingin memasukkan catatan tentang bagaimana hal-hal disajikan.A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page
    6. +
+ +

Active learning: create your own sitemap

+ +

Coba lakukan latihan di atas untuk situs web ciptaan Anda sendiri. Anda ingin membuat situs tentang apa?

+ +
+

Note: Simpan pekerjaan Anda di suatu tempat; Anda mungkin membutuhkannya nanti.

+
+ +

Test your skills!

+ +

Anda telah mencapai akhir artikel ini, tetapi dapatkah Anda mengingat informasi yang paling penting? Anda dapat menemukan penilaian terperinci yang menguji keterampilan ini di akhir modul; see Structuring a page of content. Kami menyarankan untuk membaca artikel berikutnya dalam seri ini terlebih dahulu dan tidak hanya melewatkannya saja!

+ +

Ringkasan

+ +

Pada titik ini, Anda harus memiliki ide yang lebih baik tentang bagaimana membuat struktur halaman web / situs. Pada artikel terakhir modul ini, kita akan mempelajari cara men-debug HTML.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + 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 new file mode 100644 index 0000000000..bbee58cc80 --- /dev/null +++ b/files/id/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,1047 @@ +--- +title: Teks mendasar HTML +slug: Learn/HTML/Pengenalan_HTML/HTML_text_fundamentals +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

Salah satu tugas utama HTML adalah memberikan struktur dan makna teks (dikenal juga sebagai {{glossary("semantics")}}) dengan begitu peramban dapat menampilkannya dengan benar. Artikel ini menjelaskan cara {{glossary("HTML")}} digunakan untuk membuat struktur halaman teks dengan menambahkan judul dan paragraf, menekankan kata-kata, membuat daftar, dan lainnya.

+ + + + + + + + + + + + +
Prasyarat:Familiar dengan dasar-dasar HTML, dicakup dalam Getting started with HTML.
Hal yang dipelajari:Mempelajari cara menandai halaman dasar teks untuk memberikan struktur dan tujuan — termasuk paragraf, judul, daftar, penekanan, dan kutipan.
+ +

Dasar-dasarnya: Judul dan paragaf

+ +

Sebaguan besar struktur teks terdiri dari judul dan paragraf, st structured text consists of headings and paragraphs, ntah Anda membaca sebuah kisah, koran, buku pelajaran, majalah, dsb.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

Konten yang terstruktur membuat pengalaman membaca lebih mudah dan lebih menyenangkan.

+ +

Dalam HTML, setiap paragraf dirangkap element {{htmlelement("p")}}, seperti berikut.

+ +
<p>I am a paragraph, oh yes I am.</p>
+ +

Setiap judul juga dirangkap dalam sebuah element "heading":

+ +
<h1>I am the title of the story.</h1>
+ +

Terdaoat beberapa element heading (judul) — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, dan {{htmlelement("h6")}}. Setiap element mewakili level konten yang berbeda dalam dokumennnya; <h1> mewakili judul utama, <h2> mewakili sub judul, <h3> mewakili sub-sub judul, dan seterusnya.

+ +

Menerapkan susunan struktural

+ +

Untuk contohnya, dalam sebuah kisah, <h1> mewakili judul kisahnya, <h2> mewakili judul setiap babnya dan <h3> mewakili sub-bagian setiap babnya, dan seterusnya.

+ +
<h1>The Crushing Bore</h1>
+
+<p>By Chris Mills</p>
+
+<h2>Chapter 1: The dark night</h2>
+
+<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
+
+<h2>Chapter 2: The eternal silence</h2>
+
+<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
+
+<h3>The specter speaks</h3>
+
+<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
+ +

Sebenarnya terserah Anda element yang digunakan, selama susunannya masuk akal. Anda perlu mengingat beberapa prakter terbaik saat Anda membuat struktur seperti:

+ + + +

Why do we need structure?

+ +

To answer this question, let's take a look at text-start.html — the starting point of our running example for this article (a nice hummus recipe). You should save a copy of this file on your local machine, as you'll need it for the exercises later on. This document's body currently contains multiple pieces of content — they aren't marked up in any way, but they are separated with linebreaks (Enter/Return pressed to go onto the next line).

+ +

However, when you open the document in your browser, you'll see that the text appears as a big chunk!

+ +

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

+ +

This is because there are no elements to give the content structure, so the browser does not know what is a heading and what is a paragraph. Furthermore:

+ + + +

We therefore need to give our content structural markup.

+ +

Active learning: Giving our content structure

+ +

Let's jump straight in with a live example. In the example below, add elements to the raw text in the Input field so that it appears as a heading and two paragraphs in the Output field.

+ +

If you make a mistake, you can always reset it using the Reset button. If you get stuck, press the Show solution button to see the answer.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Why do we need semantics?

+ +

Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of an everyday object is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop", and a green traffic light to mean "go". Things can get tricky very quickly if the wrong semantics are applied (Do any countries use red to mean "go"? I hope not.)

+ +

In a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context the {{htmlelement("h1")}} element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."

+ +
<h1>This is a top level heading</h1>
+ +

By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above).

+ +

On the other hand, you could make any element look like a top level heading. Consider the following:

+ +
<span style="font-size: 32px; margin: 21px 0; display: block;">Is this a top level heading?</span>
+ +

This is a {{htmlelement("span")}} element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning (you'll find out more about these later on in the course). We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevant HTML element for the job.

+ +

Lists

+ +

Now let's turn our attention to lists. Lists are everywhere in life — from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! Lists are everywhere on the Web too, and we've got three different types to worry about.

+ +

Unordered

+ +

Unordered lists are used to mark up lists of items for which the order of the items doesn't matter — let's take a shopping list as an example.

+ +
milk
+eggs
+bread
+hummus
+ +

Every unordered list starts off with a {{htmlelement("ul")}} element — this wraps around all the list items:

+ +
<ul>
+milk
+eggs
+bread
+hummus
+</ul>
+ +

The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element:

+ +
<ul>
+  <li>milk</li>
+  <li>eggs</li>
+  <li>bread</li>
+  <li>hummus</li>
+</ul>
+ +

Active learning: Marking up an unordered list

+ +

Try editing the live sample below to create your very own HTML unordered list.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Ordered

+ +

Ordered lists are lists in which the order of the items does matter — let's take a set of directions as an example:

+ +
Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road
+ +

The markup structure is the same as for unordered lists, except that you have to wrap the list items in an {{htmlelement("ol")}} element, rather than <ul>:

+ +
<ol>
+  <li>Drive to the end of the road</li>
+  <li>Turn right</li>
+  <li>Go straight across the first two roundabouts</li>
+  <li>Turn left at the third roundabout</li>
+  <li>The school is on your right, 300 meters up the road</li>
+</ol>
+ +

Active learning: Marking up an ordered list

+ +

Try editing the live sample below to create your very own HTML ordered list.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Active learning: Marking up our recipe page

+ +

So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our text-start.html starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

If you get stuck, you can always press the Show solution button, or check out our text-complete.html example on our github repo.

+ +

Nesting lists

+ +

It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.</li>
+  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+  <li>If you want a smooth hummus, process it for a longer time.</li>
+</ol>
+ +

Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.
+    <ul>
+      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+      <li>If you want a smooth hummus, process it for a longer time.</li>
+    </ul>
+  </li>
+</ol>
+ +

Try going back to the previous active learning example and updating the second list like this.

+ +

Emphasis and importance

+ +

In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.

+ +

Emphasis

+ +

When we want to add emphasis in spoken language, we stress certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.

+ +

I am glad you weren't late.

+ +

I am glad you weren't late.

+ +

The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.

+ +

In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below).

+ +
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
+ +

Strong importance

+ +

To emphasize important words, we tend to stress them in spoken language and bold them in written language. For example:

+ +

This liquid is highly toxic.

+ +

I am counting on you. Do not be late!

+ +

In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below).

+ +
<p>This liquid is <strong>highly toxic</strong>.</p>
+
+<p>I am counting on you. <strong>Do not</strong> be late!</p>
+ +

You can nest strong and emphasis inside one another if desired:

+ +
<p>This liquid is <strong>highly toxic</strong> —
+if you drink it, <strong>you may <em>die</em></strong>.</p>
+ +

Active learning: Let's be important!

+ +

In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Italic, bold, underline...

+ +

The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.

+ +

HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles.

+ +

Here's the best rule of thumb: it's likely appropriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

+ + + +
+

A kind warning about underline: People strongly associate underlining with hyperlinks. Therefore, on the Web, it's best to underline only links. Use the <u> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.

+
+ +
<!-- scientific names -->
+<p>
+  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
+  is the most common hummingbird in Eastern North America.
+</p>
+
+<!-- foreign words -->
+<p>
+  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- a known misspelling -->
+<p>
+  Someday I'll learn how to <u style="text-decoration-line: underline; text-decoration-style: wavy;">spel</u> better.
+</p>
+
+<!-- Highlight keywords in a set of instructions -->
+<ol>
+  <li>
+    <b>Slice</b> two pieces of bread off the loaf.
+  </li>
+  <li>
+    <b>Insert</b> a tomato slice and a leaf of
+    lettuce between the slices of bread.
+  </li>
+</ol>
+ +

Summary

+ +

That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to create hyperlinks, possibly the most important element on the Web.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

+ + + +

In this module

+ + diff --git a/files/id/learn/html/introduction_to_html/index.html b/files/id/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..367ef45712 --- /dev/null +++ b/files/id/learn/html/introduction_to_html/index.html @@ -0,0 +1,64 @@ +--- +title: Pengenalan HTML +slug: Learn/HTML/Pengenalan_HTML +tags: + - CodingScripting + - HTML + - Link + - Pengenalan HTML + - Struktur + - Teks + - head + - semantic +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

Pada intinya, {{glossary("HTML")}} adalah bahasa yang cukup sederhana yang tersusun dari elemen, yang bisa diaplikasikan pada teks untuk menambah perbedaan maksud dalam dokumen (Apakah paragraf? Apakah daftar dengan butir? Apakah bagian dari sebuah tabel?), membentuk struktur dokumen menjadi satu bagian logikal (Apakah memiliki header? Apakah berbentuk tiga kolom? Apakah sebuah menu navigasi?), dan menempatkan konten seperti gambar dan video pada satu halaman. Modul ini akan memperkenalkan dua hal dulu, dan memperkenalkan konsep fundamental dan sintaks yang harus kamu ketahui untuk memahami HTML.

+ +

Prasyarat

+ +

Sebelum memulai modul ini, kamu tidak harus memiliki pengetahuan mengenai HTML, tapi kamu setidaknya harus sudah terbiasa menggunakan komputer dan menggunakan web secara pasif (misalnya, hanya membuka-buka dan menikmati kontennya). Kamu harus memiliki perlengkapan dasar (seperti dijelaskan dalam Menginstal perangkat lunak dasar), dan memahami cara membuat dan mengelola file (seperti dijelaskan dalam Berurusan dengan file). Keduanya adalah bagian dari modul untuk pemula yang berjudul Mengenal apa itu web.

+ +
+

Catatan: Jika kamu menggunakan komputer/tablet/alat lain yang tidak bisa membuat file sendiri, kamu bisa mencoba (banyak) contoh kode di aplikasi pemrograman daring seperti JSBin atau Thimble.

+
+ +

Panduan

+ +

Modul ini berisi artikel-artikel berikut, yang akan mengajarkan kamu mengenai semua teori dasar HTML dan memberimu kesempatan untuk menguji beberapa keterampilan.

+ +
+
Mulai bekerja dengan HTML
+
Mengkover dasar-dasar HTML, untuk memulai — kita mendefinisikan elemen, atribut, dan istilah penting lainnya, dan menunjukkan di mana posisi mereka dalam HTML. Kita juga tunjukkan bagaimana tipikal halaman HTML terstruktur dan bagaimana elemen HTML tersetruktur, dan menjelaskan fitur dasar penting lainnya. Selain itu, kita akan bermain dengan beberapa HTML supaya kamu tertarik!
+
Apa yang ada di head? Metadata dalam HTML
+
Head dokumen HTML merupakan bagian yang tidak tampil dalam peramban web ketika halaman dimuat. Dia mengandung informasi seperti halaman {{htmlelement("title")}}, link ke {{glossary("CSS")}} (jika kamu ingin memberi gaya konten HTML mu dengan CSS), link ke kustom favicons, dan metadata (data tentang HTML, misalnya siapa yang menulis, dan kata kunci penting yang menjelaskan dokumen tersebut).
+
Fundamental teks HTML
+
Salah satu dari tugas utama HTML ialah memberi teks arti (juga disebut semantic), sehingga peramban tahu cara yang benar untuk menampilkannya. Artikel ini melihat bagaimana menggunakan HTML untuk memecah blok teks menjadi satu struktur headings dan paragraf, tambah penekanan/kepentingan ke dalam kata-kata, membuat list, dan banyak lagi.
+
Membuat hyperlinks
+
Hyperlinks sangat penting — merekalah yang membuat web menjadi web. Artikel ini menunjukkan syntaks yang dibutuhkan untuk membuat link, dan mendiskusikan praktek terbaik untuk link.
+
Pemformatan teks maju
+
Banyak elemen lain dalam HTML untuk pemformatan teks yang tidak kita dapatkan dalam artikel fundamental teks HTML. Elemen ini kurang dikenal, tapi masih berfaedah untuk diketahui. Dalam artikel ini kamu akan belajar tentang menandai quotasi, deskripsi list, kode komputer dan text terkait lain, subscript dan superscript, informasi kontak, dan banyak lagi.
+
Struktur dokumen dan website
+
Selain mendefinisi bagian individu halaman kamu (seperti sebuah "paragraf" atau "gambar"), HTML juga digunakan untuk mendefinisi area website kamu (seperti header," "menu navigasi," atau "kolom konten utama.") Artikel ini melihat ke dalam bagaimana merencanakan struktur web dasar dan bagaimana menulis HTML untuk mewakili struktur ini.
+
Mendebug HTML
+
Menulis HTML itu bagus, tapi kalau sesuatu buruk terjadi, dan kamu tidak bisa mengatasinya? Artikel ini akan memperkenalkan kamu pada beberapa tools yang berfaedah untuk itu.
+
+ +

Latihan

+ +

Latihan-latihan berikut akan menguji pemahaman kamu mengenai HTML dasar yang ada pada panduan-panduan di atas.

+ +
+
Menandai huruf
+
Kita semua belajar menulis huruf cepat atau lambat; itu juga contoh berfaedah untuk menguji keahlian memformat. Dalam asesmen ini, kamu akan diberi huruf untuk ditandai.
+
Menandai halaman konten
+
Asesmen ini menguji kemampuanmu menggunakan HTML untuk menstrukturisasi halaman konten sederhana, yang berisi header, footer, menu navigasi, konten utama, dan sidebar.
+
+ +

Lihat juga

+ +
+
Dasar literasi web 1
+
Kursus Mozilla foundation terbaik yang menjelajahi dan menguji banyak kemampuan dalam modul Pengenalan HTML. Pelajar akan akrab dengan bacaan, tulisan, dan berpartisipasi dalam web di modul 6-bagian ini. Cari tahu fondasi web melalui produksi dan kolaborasi.
+
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 new file mode 100644 index 0000000000..2535589f38 --- /dev/null +++ b/files/id/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -0,0 +1,116 @@ +--- +title: Structuring a page of content +slug: Learn/HTML/Pengenalan_HTML/Structuring_a_page_of_content +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.

+ + + + + + + + + + + + +
Prerequisites:Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on Document and website structure.
Objective:To test knowledge of web page structures, and how to represent a prospective layout design in markup.
+ +

Starting point

+ +

To get this assessment started, you should go and grab the zip file containing all the starting assets.

+ +


+ The zip file contains:

+ + + +

Create the example on your local computer, or alternatively use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.

+ +
+

Note: If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.

+
+ +

Project brief

+ +

Untuk proyek ini, tugas Anda adalah mengambil konten untuk beranda situs web pengamatan burung dan menambahkan elemen struktural ke dalamnya sehingga dapat memiliki tata letak halaman yang diterapkan padanya. Perlu memiliki:

+ + + +

You need to add a suitable wrapper for (Anda perlu menambahkan pembungkus yang cocok untuk:):

+ + + +

You should also:

+ + + +

Hints and tips

+ + + +

Example

+ +

The following screenshot shows an example of what the homepage might look like after being marked up.

+ +

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

+ +

Assessment or further help

+ +

If you would like your work assessed, or are stuck and want to ask for help:

+ +
    +
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch.
    2. +
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: +
      +
    • A descriptive title such as "Assessment wanted for Structuring a page of content".
      • +
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • +
    • A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • +
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • +
    +
    3. +
+ +

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + 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 new file mode 100644 index 0000000000..acddef0b53 --- /dev/null +++ b/files/id/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -0,0 +1,362 @@ +--- +title: Adding vector graphics to the Web +slug: Learn/HTML/Multimedia_dan_embedding/Adding_vector_graphics_to_the_Web +tags: + - Gambar + - Grafik + - Pemula + - Raster + - SVG + - Vektor + - belajar + - iframe + - img +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

Grafik vektor sangat berguna dalam banyak keadaan — mereka memiliki ukuran file kecil dan sangat skalabel, sehingga mereka tidak terlalu besar ketika diperbesar atau meledak hingga ukuran besar. Dalam artikel ini kami akan menunjukkan kepada Anda bagaimana memasukkan satu di halaman web Anda.

+
+ + + + + + + + + + + + +
Prerequisites:Anda harus tahu basics of HTML dan bagaimana caranya insert an image into your document.
Objective:Pelajari cara menyematkan gambar SVG (vektor) ke halaman web.
+ +
+

Note: Artikel ini tidak bermaksud mengajarkan Anda SVG; hanya apa itu, dan bagaimana menambahkannya ke halaman web.

+
+ +

Apa itu grafik vektor?

+ +

Di web, Anda akan bekerja dengan dua jenis gambar — gambar raster, dan gambar vektor:

+ + + +

Untuk memberi Anda gambaran tentang perbedaan antara keduanya, mari kita lihat sebuah contoh. Anda dapat menemukan contoh ini langsung di repo Github kami sebagai vector-versus-raster.html — itu menunjukkan dua gambar yang tampaknya identik berdampingan, dari bintang merah dengan bayangan hitam. Perbedaannya adalah yang kiri adalah PNG, dan yang kanan adalah gambar SVG.

+ +

Perbedaannya menjadi jelas ketika Anda memperbesar halaman - gambar PNG menjadi pixelated saat Anda memperbesar karena berisi informasi di mana masing-masing piksel harus (dan apa warna). Ketika diperbesar, setiap piksel hanya bertambah ukurannya untuk mengisi beberapa piksel pada layar, sehingga gambar mulai tampak ganjil. Namun gambar vektor terus terlihat bagus dan segar, karena berapapun ukurannya, algoritma tersebut digunakan untuk mencari tahu bentuk-bentuk pada gambar, dengan nilai-nilai yang hanya diskalakan karena semakin besar.

+ +

Two star images

+ +

Two star images zoomed in, one crisp and the other blurry

+ +
+

Note: Gambar-gambar di atas sebenarnya semua PNG - dengan bintang kiri di setiap kasus mewakili gambar raster, dan bintang kanan mewakili gambar vektor. Again, go to the vector-versus-raster.html demo for a real example!

+
+ +

Selain itu, file gambar vektor jauh lebih ringan daripada raster mereka, karena mereka hanya perlu memegang beberapa algoritma, daripada informasi tentang setiap pixel dalam gambar secara individual.

+ +

What is SVG?

+ +

SVG is an {{glossary("XML")}}-based bahasa untuk menggambarkan gambar vektor. Ini pada dasarnya markup, seperti HTML, kecuali bahwa Anda memiliki banyak elemen berbeda untuk menentukan bentuk yang ingin Anda tampilkan di gambar Anda, dan efek yang ingin Anda terapkan pada bentuk-bentuk itu. SVG adalah untuk menandai grafik, bukan konten. Di ujung paling sederhana dari spektrum, Anda memiliki elemen untuk membuat bentuk sederhana, seperti {{svgelement("circle")}} dan {{svgelement("rect")}}. More advanced SVG features include {{svgelement("feColorMatrix")}} (transform colors using a transformation matrix,) {{svgelement("animate")}} (animate parts of your vector graphic,) and {{svgelement("mask")}} (apply a mask over the top of your image.)

+ +

Sebagai contoh sederhana, kode berikut ini membuat lingkaran dan persegi panjang:

+ +
<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="black" />
+  <circle cx="150" cy="100" r="90" fill="blue" />
+</svg>
+ +

This creates the following output:

+ +

{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}

+ +

Dari contoh di atas, Anda mungkin mendapat kesan bahwa SVG mudah untuk handcode. Ya, Anda dapat membuat kode tangan SVG sederhana dalam editor teks, tetapi untuk gambar yang kompleks ini dengan cepat mulai menjadi sangat sulit. For creating SVG images, most people use a vector graphics editor like Inkscape or Illustrator. Paket-paket ini memungkinkan Anda untuk membuat berbagai ilustrasi menggunakan berbagai alat grafis, dan membuat perkiraan foto (misalnya fitur Trace Bitmap dari Inkscape.)

+ +

SVG memiliki beberapa keuntungan tambahan selain yang dijelaskan sejauh ini:

+ + + +

Jadi mengapa ada orang yang mau menggunakan grafik raster di atas SVG? Nah, SVG memang memiliki beberapa kelemahan:

+ + + +

Grafik raster bisa dibilang lebih baik untuk gambar presisi kompleks seperti foto, karena alasan yang dijelaskan di atas.

+ +
+

Note: Di Inkscape, simpan file Anda sebagai Plain SVG untuk menghemat ruang. Juga, silakan lihat ini article describing how to prepare SVGs for the Web.

+
+ +

Adding SVG to your pages

+ +

In this section we'll go through the different ways in which you can add SVG vector graphics to your web pages.

+ +

The quick way: {{htmlelement("img")}}

+ +

To embed an SVG via an {{htmlelement("img")}} element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.

+ +
<img
+    src="equilateral.svg"
+    alt="triangle with all three sides equal"
+    height="87"
+    width="100" />
+ +

Pros

+ + + +

Cons

+ + + +

Troubleshooting and cross-browser support

+ +

For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your src attribute and use a {{htmlattrxref("srcset", "img")}} attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead:

+ +
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
+ +

Anda juga dapat menggunakan SVG sebagai gambar latar belakang CSS, seperti yang ditunjukkan di bawah ini. Dalam kode di bawah ini, browser lama akan tetap dengan PNG yang mereka pahami, sementara browser yang lebih baru akan memuat SVG:

+ +
background: url("fallback.png") no-repeat center;
+background-image: url("image.svg");
+background-size: contain;
+ +

Like the <img> method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations.

+ +

Jika SVG Anda tidak muncul sama sekali, itu mungkin karena server Anda tidak diatur dengan benar. Jika itu masalahnya, ini article will point you in the right direction.

+ +

How to include SVG code inside your HTML

+ +

Anda juga dapat membuka file SVG dalam editor teks, menyalin kode SVG, dan menempelkannya ke dokumen HTML Anda — this is sometimes called putting your SVG inline, or inlining SVG. Pastikan cuplikan kode SVG Anda dimulai dan diakhiri dengan <svg></svg> tags (don't include anything outside those.) Berikut adalah contoh yang sangat sederhana dari apa yang mungkin Anda tempel ke dalam dokumen Anda:

+ +
<svg width="300" height="200">
+    <rect width="100%" height="100%" fill="green" />
+</svg>
+
+ +

Pros

+ + + +

Cons

+ + + + + +

How to embed an SVG with an {{htmlelement("iframe")}}

+ +

Anda dapat membuka gambar SVG di browser Anda seperti halnya halaman web. Jadi menanamkan dokumen SVG dengan <iframe> is done just like we studied in From <object> to <iframe> — other embedding technologies.

+ +

Here's a quick review:

+ +
<iframe src="triangle.svg" width="500" height="500" sandbox>
+    <img src="triangle.png" alt="Triangle with three unequal sides" />
+</iframe>
+ +

Ini jelas bukan metode terbaik untuk memilih:

+ +

Cons

+ + + +

Active Learning: Playing with SVG

+ +

Di bagian pembelajaran aktif ini kami ingin Anda bersenang-senang bermain SVG untuk bersenang-senang. Di bagian Input di bawah ini Anda akan melihat bahwa kami telah menyediakan beberapa sampel untuk Anda mulai. Anda juga dapat pergi ke SVG Element Reference, cari tahu lebih detail tentang mainan lain yang bisa Anda gunakan di SVG, dan coba juga itu. Bagian ini adalah tentang mempraktekkan keterampilan riset Anda, dan bersenang-senang.

+ +

If you get stuck and can't get your code working, you can always reset it using the Reset button.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Summary

+ +

Artikel ini telah memberi Anda tur singkat tentang apa itu vektor grafik dan SVG, mengapa mereka berguna untuk diketahui, dan bagaimana memasukkan SVG ke dalam halaman web Anda. Itu tidak pernah dimaksudkan sebagai panduan lengkap untuk mempelajari SVG, hanya sebuah petunjuk sehingga Anda tahu apa itu SVG jika Anda bertemu dalam perjalanan Anda di Web. Jadi jangan khawatir jika Anda belum merasa sudah ahli SVG. Kami telah menyertakan beberapa tautan di bawah ini yang mungkin membantu Anda jika Anda ingin pergi dan mencari tahu lebih lanjut tentang cara kerjanya.

+ +

Pada artikel terakhir modul ini, kami akan mengeksplorasi gambar responsif secara terperinci, dengan melihat alat-alat HTML yang memungkinkan Anda membuat gambar Anda bekerja lebih baik di berbagai perangkat.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

+ +

In this module

+ + diff --git a/files/id/learn/html/multimedia_and_embedding/index.html b/files/id/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..fe111da30c --- /dev/null +++ b/files/id/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,73 @@ +--- +title: Multimedia dan Embedding +slug: Learn/HTML/Multimedia_dan_embedding +tags: + - Asesmen + - Audio + - CodingScripting + - Flash + - HTML + - Image + - Landing + - Multimedia + - Panduan + - Pemula + - Pengembedan + - SVG + - Video + - Web + - belajar + - iframe + - imagemap + - img + - responsif +translation_of: Learn/HTML/Multimedia_and_embedding +--- +

{{LearnSidebar}}

+ +

We've looked at a lot of text so far in this course, but the web would be really boring only using text. Let's start looking at how to make the web come alive with more interesting content! This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.

+ +

Persyaratan

+ +

Sebelum memulai modul ini, kamu harus punya pengetahuan mendasar tentang HTML dasar, seperti dicover sebelumnya dalam Pengenalan HTML. Kalau kamu belum bekerja melalui modul ini (atau sesuatu yang serupa), kerja dulu di situ, lalu kembali lagi!

+ +
+

Catatan: Kalau kamu bekerja pada komputer/tablet/device lain yang mana kamu tidak bisa membuat filemu sendiri, kamu bisa mencoba (sebagian besar) contoh kode dalam program coding daring macam JSBin atau Thimble.

+
+ +

Petunjuk

+ +

Module ini berisi artikel berikut yang akan mengantar kamu melalui semua fundamental mengembed multimedia dalam halaman web.

+ +
+
Image dalam HTML
+
Ada tipe multimedia lain yang dipertimbangkan, tapi itu logis jika mulai dengan elemen {{htmlelement("img")}} yang untuk mengembed image sederhana ke dalam halaman web. Di artikel ini kita akan melihat bagaimana menggunakan itu lebih dalam, termasuk dasar, menganotasi itu dengan caption menggunakan {{htmlelement("figure")}}, dan bagaimana itu dikaitkan dengan CSS background images.
+
Konten video dan audio
+
Berikutnya, kita akan melihat bagaimana menggunakan elemen {{htmlelement("video")}} dan {{htmlelement("audio")}} HTML5 untuk mengembed video dan audio dalam halaman kita, termasuk dasar, menyediakan akses ke format file berbeda ke peramban berbeda, menambah caption dan subtitle, dan bagaimana menambah fallback untuk peramban jadul.
+
Dari <object> ke <iframe> — teknologi pengembedan lain
+
Pada poin ini kita akan mengambil langkah menyamping, melihat pasangan elemen yang dipakai untuk mengembed beragam tipe konten ke dalam halaman web: elemen {{htmlelement("iframe")}}, {{htmlelement("embed")}} dan {{htmlelement("object")}}. <iframe> dipakai untuk mengembed halaman web lain, dan 2 lainnya untuk mengembed PDF, SVG, dan bahkan Flash — teknologi yang jarang, tapi masih ada saja.
+
Menambah grafis vektor ke web
+
Grafis vektor bisa berfaedah dalam beberapa situasi. Tidak seperti format reguler macam PNG/JPG, mereka tidak terdistorsi/terpixelasi ketika dizoom-in — tetap mulus ketika discale. Artikel ini memperkenalkan kamu ke grafis vektor dan bagaimana memasukkan format {{glossary("SVG")}} populer ke dalam halaman web.
+
Image responsif
+
Dengan berbagai tipe device yang mampu meramban web — dari ponsel mobile ke komputer desktop — konsep esensial untuk menguasai dunia web modern web world ialah desain responsif. Ini menunjukkan kreasi halaman web yang otomatis menyesuaikan fitur mereka dengan beragam ukuran layar, resolusi, dan lain sebagainya. Ini akan dibahas mendetil dalam modul CSS lebih lanjut, tapi untuk sekarang, kita akan melihat tools yang tersedia bagi HTML untuk membuat responsif image, termasuk elemen {{htmlelement("picture")}}.
+
+ +

Asesmen

+ +

Asesmen berikut akan menguhi pemahamanmu tentang HTML dasar yang dicover dalam panduan di atas:

+ +
+
Halaman splash Mozilla
+
Dalam asesmen ini, kita akan menguji pengetahuanmu tentang beberapa teknik yang didiskusikan dalam artikel modul, membuat kamu menambah beberapa image dan video ke halaman splash funky tentang Mozilla!
+
+ +

Lihat juga

+ +
+
Add a hitmap on top of an image
+
Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.
+
Web literacy basics 2
+
+

An excellent Mozilla foundation course that explores and tests some of the skills talked about in this Multimedia and embedding module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).

+
+
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 new file mode 100644 index 0000000000..e13790b7f4 --- /dev/null +++ b/files/id/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -0,0 +1,251 @@ +--- +title: Responsive images +slug: Learn/HTML/Multimedia_dan_embedding/Responsive_images +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

Pada artikel ini, kita akan belajar tentang konsep gambar responsif - gambar yang bekerja dengan baik pada perangkat dengan ukuran layar, resolusi, dan fitur lain yang sangat berbeda - dan melihat alat apa yang disediakan HTML untuk membantu mengimplementasikannya. Ini membantu meningkatkan kinerja di berbagai perangkat yang berbeda. Gambar responsif hanyalah salah satu bagian dari responsive design, topik CSS masa depan yang dapat Anda pelajari.

+
+ + + + + + + + + + + + +
Prerequisites:Anda harus sudah mengetahui basics of HTML dan cara add static images to a web page.
Objective:Learn how to use features like {{htmlattrxref("srcset", "img")}} and the {{htmlelement("picture")}} element to implement responsive image solutions on websites.
+ +

Why responsive images?

+ +

Let's examine a typical scenario. Situs web tipikal mungkin berisi gambar tajuk dan beberapa gambar konten di bawah tajuk. Gambar header kemungkinan akan menjangkau seluruh lebar header, dan gambar konten akan cocok di suatu tempat di dalam kolom konten. Berikut ini contoh sederhana:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

+ +

Ini bekerja dengan baik pada perangkat layar lebar, seperti laptop atau desktop (you can see the example live and find the source code on Github.) Kami tidak akan banyak membahas CSS dalam pelajaran ini, kecuali untuk mengatakan bahwa:

+ + + +

Namun, masalah muncul ketika Anda mulai melihat situs di perangkat layar sempit. Header di bawah ini terlihat baik-baik saja, tetapi mulai mengambil banyak ketinggian layar untuk perangkat seluler. Dan pada ukuran ini, sulit untuk melihat orang-orang di dalam gambar konten pertama.

+ +

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

+ +

An improvement would be to display a cropped version of the image which displays the important details of the image when the site is viewed on a narrow screen. A second cropped image could be displayed for a medium width screen device, like a tablet. This is commonly known as the art direction problem.

+ +

In addition, there is no need to embed such large images on the page if it is being viewed on a mobile screen. And conversely, a small raster image starts to look grainy when displayed larger than its original size (a raster image is a set number of pixels wide and a set number of pixels tall, as we saw when we looked at vector graphics). This is called the resolution switching problem.

+ +

Sebaliknya, tidak perlu untuk menampilkan gambar besar di layar secara signifikan lebih kecil dari ukuran yang dimaksudkan. Melakukannya dapat menghabiskan bandwidth; khususnya, pengguna seluler tidak ingin membuang bandwidth dengan mengunduh gambar besar yang ditujukan untuk desktop, ketika gambar kecil dilakukan untuk perangkat mereka. Idealnya, Anda akan memiliki beberapa resolusi yang tersedia dan melayani ukuran yang sesuai tergantung pada perangkat yang mengakses data di situs web.

+ +

Untuk membuat segalanya lebih rumit, beberapa perangkat memiliki layar resolusi tinggi yang membutuhkan gambar lebih besar dari yang Anda harapkan untuk ditampilkan dengan baik. Ini pada dasarnya adalah masalah yang sama, tetapi dalam konteks yang sedikit berbeda.

+ +

Anda mungkin berpikir bahwa gambar vektor akan menyelesaikan masalah ini, dan mereka melakukannya pada tingkat tertentu - mereka berukuran kecil dalam ukuran dan skalanya dengan baik, dan Anda harus menggunakannya sedapat mungkin. Namun, mereka tidak cocok untuk semua jenis gambar. Gambar vektor sangat bagus untuk grafik, pola, elemen antarmuka, dll. Sederhana, tetapi mulai menjadi sangat kompleks untuk membuat gambar berbasis vektor dengan jenis detail yang akan Anda temukan di katakanlah, foto. Format gambar raster seperti JPEG lebih cocok untuk jenis gambar yang kita lihat dalam contoh di atas.

+ +

This kind of problem didn't exist when the web first existed, in the early to mid 90s — back then the only devices in existence to browse the Web were desktops and laptops, so browser engineers and spec writers didn't even think to implement solutions. Responsive image technologies were implemented recently to solve the problems indicated above by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images suitable for different space allocations (art direction).

+ +
+

Note: The new features discussed in this article — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — are all supported in release versions of modern desktop and mobile browsers (including Microsoft's Edge browser, although not Internet Explorer.) 

+
+ +

How do you create responsive images?

+ +

Di bagian ini, kita akan melihat dua masalah yang diilustrasikan di atas dan menunjukkan bagaimana menyelesaikannya menggunakan fitur gambar HTML yang responsif. Anda harus mencatat bahwa kami akan fokus pada HTML {{htmlelement("img")}}s for this section,  seperti yang terlihat di area konten dari contoh di atas - gambar di header situs hanya untuk dekorasi, dan karenanya diimplementasikan menggunakan gambar latar belakang CSS. CSS arguably has better tools for responsive design than HTML, and we'll talk about those in a future CSS module.

+ +

Resolution switching: Different sizes

+ +

So, what is the problem that we want to solve with resolution switching? We want to display identical image content, just larger or smaller depending on the device — this is the situation we have with the second content image in our example. The standard {{htmlelement("img")}} element traditionally only lets you point the browser to a single source file:

+ +
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

We can however use two new attributes — {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} — to provide several additional source images along with hints to help the browser pick the right one. You can see an example of this in our responsive.html example on Github (see also the source code):

+ +
<img srcset="elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 600px) 480px,
+            800px"
+     src="elva-fairy-800w.jpg"
+     alt="Elva dressed as a fairy">
+ +

The srcset and sizes attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line. Each value contains a comma-separated list, and each part of those lists is made up of three sub-parts. Let's run through the contents of each now:

+ +

srcset mendefinisikan set gambar yang kami akan memungkinkan browser untuk memilih di antara, dan berapa ukuran masing-masing gambar. Setiap rangkaian informasi gambar dipisahkan dari yang sebelumnya dengan koma. Untuk masing-masing, kami menulis:

+ +
    +
  1. An image filename (elva-fairy-480w.jpg)
    2. +
  2. A space
    3. +
  3. The image's intrinsic width in pixels (480w) — note that this uses the w unit, not px as you might expect. This is the image's real size, which can be found by inspecting the image file on your computer (for example, on a Mac you can select the image in Finder and press Cmd + I to bring up the info screen).
    4. +
+ +

sizes mendefinisikan serangkaian kondisi media (mis. lebar layar) dan menunjukkan ukuran gambar apa yang terbaik untuk dipilih, ketika kondisi media tertentu benar - ini adalah petunjuk yang telah kita bicarakan sebelumnya. Dalam hal ini, sebelum setiap koma kami menulis:

+ +
    +
  1. A media condition ((max-width:600px)) — you'll learn more about these in the CSS topic, but for now let's just say that a media condition describes a possible state that the screen can be in. In this case, we are saying "when the viewport width is 600 pixels or less".
    2. +
  2. A space
    3. +
  3. The width of the slot the image will fill when the media condition is true (480px)
    4. +
+ +
+

Note: For the slot width, you may provide an absolute length (px, em) or a length relative to the viewport (vw), but not percentages. You may have noticed that the last slot width has no media condition (this is the default that is chosen when none of the media conditions are true). The browser ignores everything after the first matching condition, so be careful how you order the media conditions.

+
+ +

So, with these attributes in place, the browser will:

+ +
    +
  1. Look at its device width
    2. +
  2. Work out which media condition in the sizes list is the first one to be true
    3. +
  3. Look at the slot size given to that media query
    4. +
  4. Load the image referenced in the srcset list that most closely matches the chosen slot size
    5. +
+ +

And that's it! At this point, if a supporting browser with a viewport width of 480px loads the page, the (max-width: 600px) media condition will be true, and so the browser chooses the 480px slot. The elva-fairy-480w.jpg will be loaded, as its inherent width (480w) is closest to the slot size. The 800px picture is 128KB on disk, whereas the 480px version is only 63KB — a saving of 65KB. Now, imagine if this was a page that had many pictures on it. Using this technique could save mobile users a lot of bandwidth.

+ +
+

Note: When testing this with a desktop browser, if the browser fails to load the narrower images when you've got its window set to the narowest width, have a look at what the viewport is (you can approximate it by going into the browser's JavaScript console and typing in document.querySelector('html').clientWidth). Different browsers have minimum sizes that they'll let you reduce the window width to, and they might be wider than you'd think. When testing it with a mobile browser, you can use tools like Firefox's about:debugging page to inspect the page loaded on the mobile using the desktop developer tools.
+
+ To see which images were loaded, you can use Firefox DevTools's Network Monitor tab.

+
+ +

Older browsers that don't support these features will just ignore them. Instead, those browsers will go ahead and load the image referenced in the {{htmlattrxref("src", "img")}} attribute as normal.

+ +
+

Note: In the {{htmlelement("head")}} of the example linked above, you'll find the line <meta name="viewport" content="width=device-width">: this forces mobile browsers to adopt their real viewport width for loading web pages (some mobile browsers lie about their viewport width, and instead load pages at a larger viewport width then shrink the loaded page down, which is not very helpful for responsive images or design).

+
+ +

Resolution switching: Same size, different resolutions

+ +

If you're supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using srcset with x-descriptors and without sizes — a somewhat easier syntax! You can find an example of what this looks like in srcset-resolutions.html (see also the source code):

+ +
<img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg"
+     alt="Elva dressed as a fairy">
+
+ +

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageIn this example, the following CSS is applied to the image so that it will have a width of 320 pixels on the screen (also called CSS pixels):

+ +
img {
+  width: 320px;
+}
+ +

In this case, sizes is not needed — the browser simply works out what resolution the display is that it is being shown on, and serves the most appropriate image referenced in the srcset. So if the device accessing the page has a standard/low resolution display, with one device pixel representing each CSS pixel, the elva-fairy-320w.jpg image will be loaded (the 1x is implied, so you don't need to include it.) If the device has a high resolution of two device pixels per CSS pixel or more, the elva-fairy-640w.jpg image will be loaded. The 640px image is 93KB, whereas the 320px image is only 39KB.

+ +

Art direction

+ +

To recap, the art direction problem involves wanting to change the image displayed to suit different image display sizes. For example, a web page includes a large landscape shot with a person in the middle when viewed on a desktop browser. When viewed on a mobile browser, that same image is shrunk down, making the person in the image very small and hard to see. It would probably be better to show a smaller, portrait image on mobile, which zooms in on the person. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.

+ +

Returning to our original not-responsive.html example, we have an image that badly needs art direction:

+ +
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+ +

Let's fix this, with {{htmlelement("picture")}}! Like <video> and <audio>, the <picture> element is a wrapper containing several {{htmlelement("source")}} elements that provide different sources for the browser to choose from, followed by the all-important {{htmlelement("img")}} element. The code in responsive.html looks like so:

+ +
<picture>
+  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+</picture>
+
+ + + +

This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

+ +
+

Note: You should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute.

+
+ +

Why can't we just do this using CSS or JavaScript?

+ +

When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which has shaved an average of 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like srcset. For example, you couldn't load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript, and then dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.

+ + + +

Use modern image formats boldly

+ +

There are several exciting new image formats (such as WebP and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.

+ +

<picture> lets us continue catering to older browsers. You can supply MIME types inside type attributes so the browser can immediately reject unsupported file types:

+ +
<picture>
+  <source type="image/svg+xml" srcset="pyramid.svg">
+  <source type="image/webp" srcset="pyramid.webp">
+  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
+</picture>
+
+ + + +

Active learning: Implementing your own responsive images

+ +

For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <picture>, and a resolution switching example that uses srcset.

+ +
    +
  1. Write some simple HTML to contain your code (use not-responsive.html as a starting point, if you like).
    2. +
  2. Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this).
    3. +
  3. Use the <picture> element to implement an art direction picture switcher!
    4. +
  4. Create multiple image files of different sizes, each showing the same picture.
    5. +
  5. Use srcset/size to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.
    6. +
+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find a detailed assessment that tests these skills at the end of the module; see Mozilla splash page.

+ +

Summary

+ +

That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:

+ + + +

This also draws to a close the entire Multimedia and embedding module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun!

+ +

See also

+ + + +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

In this module

+ + +
diff --git a/files/id/learn/html/multimedia_dan_embedding/adding_vector_graphics_to_the_web/index.html b/files/id/learn/html/multimedia_dan_embedding/adding_vector_graphics_to_the_web/index.html deleted file mode 100644 index acddef0b53..0000000000 --- a/files/id/learn/html/multimedia_dan_embedding/adding_vector_graphics_to_the_web/index.html +++ /dev/null @@ -1,362 +0,0 @@ ---- -title: Adding vector graphics to the Web -slug: Learn/HTML/Multimedia_dan_embedding/Adding_vector_graphics_to_the_Web -tags: - - Gambar - - Grafik - - Pemula - - Raster - - SVG - - Vektor - - belajar - - iframe - - img -translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
- -
-

Grafik vektor sangat berguna dalam banyak keadaan — mereka memiliki ukuran file kecil dan sangat skalabel, sehingga mereka tidak terlalu besar ketika diperbesar atau meledak hingga ukuran besar. Dalam artikel ini kami akan menunjukkan kepada Anda bagaimana memasukkan satu di halaman web Anda.

-
- - - - - - - - - - - - -
Prerequisites:Anda harus tahu basics of HTML dan bagaimana caranya insert an image into your document.
Objective:Pelajari cara menyematkan gambar SVG (vektor) ke halaman web.
- -
-

Note: Artikel ini tidak bermaksud mengajarkan Anda SVG; hanya apa itu, dan bagaimana menambahkannya ke halaman web.

-
- -

Apa itu grafik vektor?

- -

Di web, Anda akan bekerja dengan dua jenis gambar — gambar raster, dan gambar vektor:

- - - -

Untuk memberi Anda gambaran tentang perbedaan antara keduanya, mari kita lihat sebuah contoh. Anda dapat menemukan contoh ini langsung di repo Github kami sebagai vector-versus-raster.html — itu menunjukkan dua gambar yang tampaknya identik berdampingan, dari bintang merah dengan bayangan hitam. Perbedaannya adalah yang kiri adalah PNG, dan yang kanan adalah gambar SVG.

- -

Perbedaannya menjadi jelas ketika Anda memperbesar halaman - gambar PNG menjadi pixelated saat Anda memperbesar karena berisi informasi di mana masing-masing piksel harus (dan apa warna). Ketika diperbesar, setiap piksel hanya bertambah ukurannya untuk mengisi beberapa piksel pada layar, sehingga gambar mulai tampak ganjil. Namun gambar vektor terus terlihat bagus dan segar, karena berapapun ukurannya, algoritma tersebut digunakan untuk mencari tahu bentuk-bentuk pada gambar, dengan nilai-nilai yang hanya diskalakan karena semakin besar.

- -

Two star images

- -

Two star images zoomed in, one crisp and the other blurry

- -
-

Note: Gambar-gambar di atas sebenarnya semua PNG - dengan bintang kiri di setiap kasus mewakili gambar raster, dan bintang kanan mewakili gambar vektor. Again, go to the vector-versus-raster.html demo for a real example!

-
- -

Selain itu, file gambar vektor jauh lebih ringan daripada raster mereka, karena mereka hanya perlu memegang beberapa algoritma, daripada informasi tentang setiap pixel dalam gambar secara individual.

- -

What is SVG?

- -

SVG is an {{glossary("XML")}}-based bahasa untuk menggambarkan gambar vektor. Ini pada dasarnya markup, seperti HTML, kecuali bahwa Anda memiliki banyak elemen berbeda untuk menentukan bentuk yang ingin Anda tampilkan di gambar Anda, dan efek yang ingin Anda terapkan pada bentuk-bentuk itu. SVG adalah untuk menandai grafik, bukan konten. Di ujung paling sederhana dari spektrum, Anda memiliki elemen untuk membuat bentuk sederhana, seperti {{svgelement("circle")}} dan {{svgelement("rect")}}. More advanced SVG features include {{svgelement("feColorMatrix")}} (transform colors using a transformation matrix,) {{svgelement("animate")}} (animate parts of your vector graphic,) and {{svgelement("mask")}} (apply a mask over the top of your image.)

- -

Sebagai contoh sederhana, kode berikut ini membuat lingkaran dan persegi panjang:

- -
<svg version="1.1"
-     baseProfile="full"
-     width="300" height="200"
-     xmlns="http://www.w3.org/2000/svg">
-  <rect width="100%" height="100%" fill="black" />
-  <circle cx="150" cy="100" r="90" fill="blue" />
-</svg>
- -

This creates the following output:

- -

{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}

- -

Dari contoh di atas, Anda mungkin mendapat kesan bahwa SVG mudah untuk handcode. Ya, Anda dapat membuat kode tangan SVG sederhana dalam editor teks, tetapi untuk gambar yang kompleks ini dengan cepat mulai menjadi sangat sulit. For creating SVG images, most people use a vector graphics editor like Inkscape or Illustrator. Paket-paket ini memungkinkan Anda untuk membuat berbagai ilustrasi menggunakan berbagai alat grafis, dan membuat perkiraan foto (misalnya fitur Trace Bitmap dari Inkscape.)

- -

SVG memiliki beberapa keuntungan tambahan selain yang dijelaskan sejauh ini:

- - - -

Jadi mengapa ada orang yang mau menggunakan grafik raster di atas SVG? Nah, SVG memang memiliki beberapa kelemahan:

- - - -

Grafik raster bisa dibilang lebih baik untuk gambar presisi kompleks seperti foto, karena alasan yang dijelaskan di atas.

- -
-

Note: Di Inkscape, simpan file Anda sebagai Plain SVG untuk menghemat ruang. Juga, silakan lihat ini article describing how to prepare SVGs for the Web.

-
- -

Adding SVG to your pages

- -

In this section we'll go through the different ways in which you can add SVG vector graphics to your web pages.

- -

The quick way: {{htmlelement("img")}}

- -

To embed an SVG via an {{htmlelement("img")}} element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.

- -
<img
-    src="equilateral.svg"
-    alt="triangle with all three sides equal"
-    height="87"
-    width="100" />
- -

Pros

- - - -

Cons

- - - -

Troubleshooting and cross-browser support

- -

For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your src attribute and use a {{htmlattrxref("srcset", "img")}} attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead:

- -
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
- -

Anda juga dapat menggunakan SVG sebagai gambar latar belakang CSS, seperti yang ditunjukkan di bawah ini. Dalam kode di bawah ini, browser lama akan tetap dengan PNG yang mereka pahami, sementara browser yang lebih baru akan memuat SVG:

- -
background: url("fallback.png") no-repeat center;
-background-image: url("image.svg");
-background-size: contain;
- -

Like the <img> method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations.

- -

Jika SVG Anda tidak muncul sama sekali, itu mungkin karena server Anda tidak diatur dengan benar. Jika itu masalahnya, ini article will point you in the right direction.

- -

How to include SVG code inside your HTML

- -

Anda juga dapat membuka file SVG dalam editor teks, menyalin kode SVG, dan menempelkannya ke dokumen HTML Anda — this is sometimes called putting your SVG inline, or inlining SVG. Pastikan cuplikan kode SVG Anda dimulai dan diakhiri dengan <svg></svg> tags (don't include anything outside those.) Berikut adalah contoh yang sangat sederhana dari apa yang mungkin Anda tempel ke dalam dokumen Anda:

- -
<svg width="300" height="200">
-    <rect width="100%" height="100%" fill="green" />
-</svg>
-
- -

Pros

- - - -

Cons

- - - - - -

How to embed an SVG with an {{htmlelement("iframe")}}

- -

Anda dapat membuka gambar SVG di browser Anda seperti halnya halaman web. Jadi menanamkan dokumen SVG dengan <iframe> is done just like we studied in From <object> to <iframe> — other embedding technologies.

- -

Here's a quick review:

- -
<iframe src="triangle.svg" width="500" height="500" sandbox>
-    <img src="triangle.png" alt="Triangle with three unequal sides" />
-</iframe>
- -

Ini jelas bukan metode terbaik untuk memilih:

- -

Cons

- - - -

Active Learning: Playing with SVG

- -

Di bagian pembelajaran aktif ini kami ingin Anda bersenang-senang bermain SVG untuk bersenang-senang. Di bagian Input di bawah ini Anda akan melihat bahwa kami telah menyediakan beberapa sampel untuk Anda mulai. Anda juga dapat pergi ke SVG Element Reference, cari tahu lebih detail tentang mainan lain yang bisa Anda gunakan di SVG, dan coba juga itu. Bagian ini adalah tentang mempraktekkan keterampilan riset Anda, dan bersenang-senang.

- -

If you get stuck and can't get your code working, you can always reset it using the Reset button.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}

- -

Summary

- -

Artikel ini telah memberi Anda tur singkat tentang apa itu vektor grafik dan SVG, mengapa mereka berguna untuk diketahui, dan bagaimana memasukkan SVG ke dalam halaman web Anda. Itu tidak pernah dimaksudkan sebagai panduan lengkap untuk mempelajari SVG, hanya sebuah petunjuk sehingga Anda tahu apa itu SVG jika Anda bertemu dalam perjalanan Anda di Web. Jadi jangan khawatir jika Anda belum merasa sudah ahli SVG. Kami telah menyertakan beberapa tautan di bawah ini yang mungkin membantu Anda jika Anda ingin pergi dan mencari tahu lebih lanjut tentang cara kerjanya.

- -

Pada artikel terakhir modul ini, kami akan mengeksplorasi gambar responsif secara terperinci, dengan melihat alat-alat HTML yang memungkinkan Anda membuat gambar Anda bekerja lebih baik di berbagai perangkat.

- -

See also

- - - -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

- -

In this module

- - diff --git a/files/id/learn/html/multimedia_dan_embedding/index.html b/files/id/learn/html/multimedia_dan_embedding/index.html deleted file mode 100644 index fe111da30c..0000000000 --- a/files/id/learn/html/multimedia_dan_embedding/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Multimedia dan Embedding -slug: Learn/HTML/Multimedia_dan_embedding -tags: - - Asesmen - - Audio - - CodingScripting - - Flash - - HTML - - Image - - Landing - - Multimedia - - Panduan - - Pemula - - Pengembedan - - SVG - - Video - - Web - - belajar - - iframe - - imagemap - - img - - responsif -translation_of: Learn/HTML/Multimedia_and_embedding ---- -

{{LearnSidebar}}

- -

We've looked at a lot of text so far in this course, but the web would be really boring only using text. Let's start looking at how to make the web come alive with more interesting content! This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.

- -

Persyaratan

- -

Sebelum memulai modul ini, kamu harus punya pengetahuan mendasar tentang HTML dasar, seperti dicover sebelumnya dalam Pengenalan HTML. Kalau kamu belum bekerja melalui modul ini (atau sesuatu yang serupa), kerja dulu di situ, lalu kembali lagi!

- -
-

Catatan: Kalau kamu bekerja pada komputer/tablet/device lain yang mana kamu tidak bisa membuat filemu sendiri, kamu bisa mencoba (sebagian besar) contoh kode dalam program coding daring macam JSBin atau Thimble.

-
- -

Petunjuk

- -

Module ini berisi artikel berikut yang akan mengantar kamu melalui semua fundamental mengembed multimedia dalam halaman web.

- -
-
Image dalam HTML
-
Ada tipe multimedia lain yang dipertimbangkan, tapi itu logis jika mulai dengan elemen {{htmlelement("img")}} yang untuk mengembed image sederhana ke dalam halaman web. Di artikel ini kita akan melihat bagaimana menggunakan itu lebih dalam, termasuk dasar, menganotasi itu dengan caption menggunakan {{htmlelement("figure")}}, dan bagaimana itu dikaitkan dengan CSS background images.
-
Konten video dan audio
-
Berikutnya, kita akan melihat bagaimana menggunakan elemen {{htmlelement("video")}} dan {{htmlelement("audio")}} HTML5 untuk mengembed video dan audio dalam halaman kita, termasuk dasar, menyediakan akses ke format file berbeda ke peramban berbeda, menambah caption dan subtitle, dan bagaimana menambah fallback untuk peramban jadul.
-
Dari <object> ke <iframe> — teknologi pengembedan lain
-
Pada poin ini kita akan mengambil langkah menyamping, melihat pasangan elemen yang dipakai untuk mengembed beragam tipe konten ke dalam halaman web: elemen {{htmlelement("iframe")}}, {{htmlelement("embed")}} dan {{htmlelement("object")}}. <iframe> dipakai untuk mengembed halaman web lain, dan 2 lainnya untuk mengembed PDF, SVG, dan bahkan Flash — teknologi yang jarang, tapi masih ada saja.
-
Menambah grafis vektor ke web
-
Grafis vektor bisa berfaedah dalam beberapa situasi. Tidak seperti format reguler macam PNG/JPG, mereka tidak terdistorsi/terpixelasi ketika dizoom-in — tetap mulus ketika discale. Artikel ini memperkenalkan kamu ke grafis vektor dan bagaimana memasukkan format {{glossary("SVG")}} populer ke dalam halaman web.
-
Image responsif
-
Dengan berbagai tipe device yang mampu meramban web — dari ponsel mobile ke komputer desktop — konsep esensial untuk menguasai dunia web modern web world ialah desain responsif. Ini menunjukkan kreasi halaman web yang otomatis menyesuaikan fitur mereka dengan beragam ukuran layar, resolusi, dan lain sebagainya. Ini akan dibahas mendetil dalam modul CSS lebih lanjut, tapi untuk sekarang, kita akan melihat tools yang tersedia bagi HTML untuk membuat responsif image, termasuk elemen {{htmlelement("picture")}}.
-
- -

Asesmen

- -

Asesmen berikut akan menguhi pemahamanmu tentang HTML dasar yang dicover dalam panduan di atas:

- -
-
Halaman splash Mozilla
-
Dalam asesmen ini, kita akan menguji pengetahuanmu tentang beberapa teknik yang didiskusikan dalam artikel modul, membuat kamu menambah beberapa image dan video ke halaman splash funky tentang Mozilla!
-
- -

Lihat juga

- -
-
Add a hitmap on top of an image
-
Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.
-
Web literacy basics 2
-
-

An excellent Mozilla foundation course that explores and tests some of the skills talked about in this Multimedia and embedding module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).

-
-
diff --git a/files/id/learn/html/multimedia_dan_embedding/responsive_images/index.html b/files/id/learn/html/multimedia_dan_embedding/responsive_images/index.html deleted file mode 100644 index e13790b7f4..0000000000 --- a/files/id/learn/html/multimedia_dan_embedding/responsive_images/index.html +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: Responsive images -slug: Learn/HTML/Multimedia_dan_embedding/Responsive_images -translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
- -
-

Pada artikel ini, kita akan belajar tentang konsep gambar responsif - gambar yang bekerja dengan baik pada perangkat dengan ukuran layar, resolusi, dan fitur lain yang sangat berbeda - dan melihat alat apa yang disediakan HTML untuk membantu mengimplementasikannya. Ini membantu meningkatkan kinerja di berbagai perangkat yang berbeda. Gambar responsif hanyalah salah satu bagian dari responsive design, topik CSS masa depan yang dapat Anda pelajari.

-
- - - - - - - - - - - - -
Prerequisites:Anda harus sudah mengetahui basics of HTML dan cara add static images to a web page.
Objective:Learn how to use features like {{htmlattrxref("srcset", "img")}} and the {{htmlelement("picture")}} element to implement responsive image solutions on websites.
- -

Why responsive images?

- -

Let's examine a typical scenario. Situs web tipikal mungkin berisi gambar tajuk dan beberapa gambar konten di bawah tajuk. Gambar header kemungkinan akan menjangkau seluruh lebar header, dan gambar konten akan cocok di suatu tempat di dalam kolom konten. Berikut ini contoh sederhana:

- -

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

- -

Ini bekerja dengan baik pada perangkat layar lebar, seperti laptop atau desktop (you can see the example live and find the source code on Github.) Kami tidak akan banyak membahas CSS dalam pelajaran ini, kecuali untuk mengatakan bahwa:

- - - -

Namun, masalah muncul ketika Anda mulai melihat situs di perangkat layar sempit. Header di bawah ini terlihat baik-baik saja, tetapi mulai mengambil banyak ketinggian layar untuk perangkat seluler. Dan pada ukuran ini, sulit untuk melihat orang-orang di dalam gambar konten pertama.

- -

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

- -

An improvement would be to display a cropped version of the image which displays the important details of the image when the site is viewed on a narrow screen. A second cropped image could be displayed for a medium width screen device, like a tablet. This is commonly known as the art direction problem.

- -

In addition, there is no need to embed such large images on the page if it is being viewed on a mobile screen. And conversely, a small raster image starts to look grainy when displayed larger than its original size (a raster image is a set number of pixels wide and a set number of pixels tall, as we saw when we looked at vector graphics). This is called the resolution switching problem.

- -

Sebaliknya, tidak perlu untuk menampilkan gambar besar di layar secara signifikan lebih kecil dari ukuran yang dimaksudkan. Melakukannya dapat menghabiskan bandwidth; khususnya, pengguna seluler tidak ingin membuang bandwidth dengan mengunduh gambar besar yang ditujukan untuk desktop, ketika gambar kecil dilakukan untuk perangkat mereka. Idealnya, Anda akan memiliki beberapa resolusi yang tersedia dan melayani ukuran yang sesuai tergantung pada perangkat yang mengakses data di situs web.

- -

Untuk membuat segalanya lebih rumit, beberapa perangkat memiliki layar resolusi tinggi yang membutuhkan gambar lebih besar dari yang Anda harapkan untuk ditampilkan dengan baik. Ini pada dasarnya adalah masalah yang sama, tetapi dalam konteks yang sedikit berbeda.

- -

Anda mungkin berpikir bahwa gambar vektor akan menyelesaikan masalah ini, dan mereka melakukannya pada tingkat tertentu - mereka berukuran kecil dalam ukuran dan skalanya dengan baik, dan Anda harus menggunakannya sedapat mungkin. Namun, mereka tidak cocok untuk semua jenis gambar. Gambar vektor sangat bagus untuk grafik, pola, elemen antarmuka, dll. Sederhana, tetapi mulai menjadi sangat kompleks untuk membuat gambar berbasis vektor dengan jenis detail yang akan Anda temukan di katakanlah, foto. Format gambar raster seperti JPEG lebih cocok untuk jenis gambar yang kita lihat dalam contoh di atas.

- -

This kind of problem didn't exist when the web first existed, in the early to mid 90s — back then the only devices in existence to browse the Web were desktops and laptops, so browser engineers and spec writers didn't even think to implement solutions. Responsive image technologies were implemented recently to solve the problems indicated above by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images suitable for different space allocations (art direction).

- -
-

Note: The new features discussed in this article — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — are all supported in release versions of modern desktop and mobile browsers (including Microsoft's Edge browser, although not Internet Explorer.) 

-
- -

How do you create responsive images?

- -

Di bagian ini, kita akan melihat dua masalah yang diilustrasikan di atas dan menunjukkan bagaimana menyelesaikannya menggunakan fitur gambar HTML yang responsif. Anda harus mencatat bahwa kami akan fokus pada HTML {{htmlelement("img")}}s for this section,  seperti yang terlihat di area konten dari contoh di atas - gambar di header situs hanya untuk dekorasi, dan karenanya diimplementasikan menggunakan gambar latar belakang CSS. CSS arguably has better tools for responsive design than HTML, and we'll talk about those in a future CSS module.

- -

Resolution switching: Different sizes

- -

So, what is the problem that we want to solve with resolution switching? We want to display identical image content, just larger or smaller depending on the device — this is the situation we have with the second content image in our example. The standard {{htmlelement("img")}} element traditionally only lets you point the browser to a single source file:

- -
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
- -

We can however use two new attributes — {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} — to provide several additional source images along with hints to help the browser pick the right one. You can see an example of this in our responsive.html example on Github (see also the source code):

- -
<img srcset="elva-fairy-480w.jpg 480w,
-             elva-fairy-800w.jpg 800w"
-     sizes="(max-width: 600px) 480px,
-            800px"
-     src="elva-fairy-800w.jpg"
-     alt="Elva dressed as a fairy">
- -

The srcset and sizes attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line. Each value contains a comma-separated list, and each part of those lists is made up of three sub-parts. Let's run through the contents of each now:

- -

srcset mendefinisikan set gambar yang kami akan memungkinkan browser untuk memilih di antara, dan berapa ukuran masing-masing gambar. Setiap rangkaian informasi gambar dipisahkan dari yang sebelumnya dengan koma. Untuk masing-masing, kami menulis:

- -
    -
  1. An image filename (elva-fairy-480w.jpg)
    2. -
  2. A space
    3. -
  3. The image's intrinsic width in pixels (480w) — note that this uses the w unit, not px as you might expect. This is the image's real size, which can be found by inspecting the image file on your computer (for example, on a Mac you can select the image in Finder and press Cmd + I to bring up the info screen).
    4. -
- -

sizes mendefinisikan serangkaian kondisi media (mis. lebar layar) dan menunjukkan ukuran gambar apa yang terbaik untuk dipilih, ketika kondisi media tertentu benar - ini adalah petunjuk yang telah kita bicarakan sebelumnya. Dalam hal ini, sebelum setiap koma kami menulis:

- -
    -
  1. A media condition ((max-width:600px)) — you'll learn more about these in the CSS topic, but for now let's just say that a media condition describes a possible state that the screen can be in. In this case, we are saying "when the viewport width is 600 pixels or less".
    2. -
  2. A space
    3. -
  3. The width of the slot the image will fill when the media condition is true (480px)
    4. -
- -
-

Note: For the slot width, you may provide an absolute length (px, em) or a length relative to the viewport (vw), but not percentages. You may have noticed that the last slot width has no media condition (this is the default that is chosen when none of the media conditions are true). The browser ignores everything after the first matching condition, so be careful how you order the media conditions.

-
- -

So, with these attributes in place, the browser will:

- -
    -
  1. Look at its device width
    2. -
  2. Work out which media condition in the sizes list is the first one to be true
    3. -
  3. Look at the slot size given to that media query
    4. -
  4. Load the image referenced in the srcset list that most closely matches the chosen slot size
    5. -
- -

And that's it! At this point, if a supporting browser with a viewport width of 480px loads the page, the (max-width: 600px) media condition will be true, and so the browser chooses the 480px slot. The elva-fairy-480w.jpg will be loaded, as its inherent width (480w) is closest to the slot size. The 800px picture is 128KB on disk, whereas the 480px version is only 63KB — a saving of 65KB. Now, imagine if this was a page that had many pictures on it. Using this technique could save mobile users a lot of bandwidth.

- -
-

Note: When testing this with a desktop browser, if the browser fails to load the narrower images when you've got its window set to the narowest width, have a look at what the viewport is (you can approximate it by going into the browser's JavaScript console and typing in document.querySelector('html').clientWidth). Different browsers have minimum sizes that they'll let you reduce the window width to, and they might be wider than you'd think. When testing it with a mobile browser, you can use tools like Firefox's about:debugging page to inspect the page loaded on the mobile using the desktop developer tools.
-
- To see which images were loaded, you can use Firefox DevTools's Network Monitor tab.

-
- -

Older browsers that don't support these features will just ignore them. Instead, those browsers will go ahead and load the image referenced in the {{htmlattrxref("src", "img")}} attribute as normal.

- -
-

Note: In the {{htmlelement("head")}} of the example linked above, you'll find the line <meta name="viewport" content="width=device-width">: this forces mobile browsers to adopt their real viewport width for loading web pages (some mobile browsers lie about their viewport width, and instead load pages at a larger viewport width then shrink the loaded page down, which is not very helpful for responsive images or design).

-
- -

Resolution switching: Same size, different resolutions

- -

If you're supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using srcset with x-descriptors and without sizes — a somewhat easier syntax! You can find an example of what this looks like in srcset-resolutions.html (see also the source code):

- -
<img srcset="elva-fairy-320w.jpg,
-             elva-fairy-480w.jpg 1.5x,
-             elva-fairy-640w.jpg 2x"
-     src="elva-fairy-640w.jpg"
-     alt="Elva dressed as a fairy">
-
- -

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageIn this example, the following CSS is applied to the image so that it will have a width of 320 pixels on the screen (also called CSS pixels):

- -
img {
-  width: 320px;
-}
- -

In this case, sizes is not needed — the browser simply works out what resolution the display is that it is being shown on, and serves the most appropriate image referenced in the srcset. So if the device accessing the page has a standard/low resolution display, with one device pixel representing each CSS pixel, the elva-fairy-320w.jpg image will be loaded (the 1x is implied, so you don't need to include it.) If the device has a high resolution of two device pixels per CSS pixel or more, the elva-fairy-640w.jpg image will be loaded. The 640px image is 93KB, whereas the 320px image is only 39KB.

- -

Art direction

- -

To recap, the art direction problem involves wanting to change the image displayed to suit different image display sizes. For example, a web page includes a large landscape shot with a person in the middle when viewed on a desktop browser. When viewed on a mobile browser, that same image is shrunk down, making the person in the image very small and hard to see. It would probably be better to show a smaller, portrait image on mobile, which zooms in on the person. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.

- -

Returning to our original not-responsive.html example, we have an image that badly needs art direction:

- -
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
- -

Let's fix this, with {{htmlelement("picture")}}! Like <video> and <audio>, the <picture> element is a wrapper containing several {{htmlelement("source")}} elements that provide different sources for the browser to choose from, followed by the all-important {{htmlelement("img")}} element. The code in responsive.html looks like so:

- -
<picture>
-  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
-  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
-  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
-</picture>
-
- - - -

This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:

- -

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

- -
-

Note: You should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute.

-
- -

Why can't we just do this using CSS or JavaScript?

- -

When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which has shaved an average of 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like srcset. For example, you couldn't load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript, and then dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.

- - - -

Use modern image formats boldly

- -

There are several exciting new image formats (such as WebP and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.

- -

<picture> lets us continue catering to older browsers. You can supply MIME types inside type attributes so the browser can immediately reject unsupported file types:

- -
<picture>
-  <source type="image/svg+xml" srcset="pyramid.svg">
-  <source type="image/webp" srcset="pyramid.webp">
-  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
-</picture>
-
- - - -

Active learning: Implementing your own responsive images

- -

For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <picture>, and a resolution switching example that uses srcset.

- -
    -
  1. Write some simple HTML to contain your code (use not-responsive.html as a starting point, if you like).
    2. -
  2. Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this).
    3. -
  3. Use the <picture> element to implement an art direction picture switcher!
    4. -
  4. Create multiple image files of different sizes, each showing the same picture.
    5. -
  5. Use srcset/size to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.
    6. -
- -

Test your skills!

- -

You've reached the end of this article, but can you remember the most important information? You can find a detailed assessment that tests these skills at the end of the module; see Mozilla splash page.

- -

Summary

- -

That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:

- - - -

This also draws to a close the entire Multimedia and embedding module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun!

- -

See also

- - - -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
- -
-

In this module

- - -
diff --git a/files/id/learn/html/pengenalan_html/document_and_website_structure/index.html b/files/id/learn/html/pengenalan_html/document_and_website_structure/index.html deleted file mode 100644 index 5563c68fd3..0000000000 --- a/files/id/learn/html/pengenalan_html/document_and_website_structure/index.html +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: Document and website structure -slug: Learn/HTML/Pengenalan_HTML/Document_and_website_structure -tags: - - HTML - - Halaman - - Panduan - - Pemula - - Script Coding - - Situs - - Tata letak - - blocks - - semantic -translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -

Selain mendefinisikan setiap bagian halaman Anda (seperti "paragraf" atau "gambar"), {{glossary("HTML")}} juga menawarkan sejumlah elemen tingkat blok yang digunakan untuk menentukan area situs web Anda (seperti "header", "menu navigasi", "kolom konten utama"). Artikel ini membahas cara merencanakan struktur situs web dasar, dan menulis HTML untuk mewakili struktur ini.

- - - - - - - - - - - - -
Prerequisites:Basic HTML familiarity, as covered in Getting started with HTML. HTML text formatting, as covered in HTML text fundamentals. How hyperlinks work, as covered in Creating hyperlinks.
Objective:Learn how to structure your document using semantic tags, and how to work out the structure of a simple website.
- -

Bagian dasar dari suatu dokumen

- -

Halaman web dapat dan akan terlihat sangat berbeda satu sama lain, tetapi mereka semua cenderung berbagi komponen standar yang sama, kecuali halaman menampilkan video layar penuh atau permainan, adalah bagian dari semacam proyek seni, atau hanya terstruktur dengan buruk:

- -
-
header (tajuk):
-
Biasanya strip besar di bagian atas dengan tajuk besar, logo, dan mungkin tagline. Ini biasanya tetap sama dari satu halaman web ke yang lain.
-
navigation bar (bilah navigasi):
-
Tautan ke bagian utama situs; biasanya diwakili oleh tombol menu, tautan, atau tab. Seperti tajuk, konten ini biasanya tetap konsisten dari satu halaman web ke halaman web lainnya - memiliki navigasi yang tidak konsisten pada situs web Anda hanya akan menyebabkan pengguna yang bingung dan frustrasi. Banyak perancang web menganggap bilah navigasi sebagai bagian dari tajuk daripada komponen individual, tetapi itu bukan keharusan; pada kenyataannya, beberapa juga berpendapat bahwa memiliki dua terpisah lebih baik untuk aksesibilitas, karena pembaca layar dapat membaca dua fitur lebih baik jika mereka terpisah.
-
main content (konten utama):
-
Area besar di tengah yang berisi sebagian besar konten unik dari halaman web yang diberikan, misalnya, video yang ingin Anda tonton, atau cerita utama yang Anda baca, atau peta yang ingin Anda lihat, atau berita utama, dll. Ini adalah satu bagian dari situs web yang pasti akan bervariasi dari halaman ke halaman!
-
sidebar (bilah samping):
-
Beberapa info tambahan, tautan, kutipan, iklan, dll. Biasanya, ini kontekstual dengan apa yang terkandung dalam konten utama (misalnya pada halaman artikel berita, bilah sisi mungkin berisi bio penulis, atau tautan ke artikel terkait) tetapi ada juga merupakan kasus di mana Anda akan menemukan beberapa elemen berulang seperti sistem navigasi sekunder.
-
footer:
-
Strip di bagian bawah halaman yang umumnya berisi cetakan, pemberitahuan hak cipta, atau info kontak. Ini adalah tempat untuk menaruh informasi umum (seperti header) tetapi biasanya, informasi itu tidak penting atau sekunder untuk situs web itu sendiri. Footer juga terkadang digunakan untuk {{Glossary("SEO")}} tujuan, dengan menyediakan tautan untuk akses cepat ke konten populer.
-
- -

A "typical website" could be structured something like this:

- -

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

- -

HTML for structuring content

- -

The simple example shown above isn't pretty, but it is perfectly fine for illustrating a typical website layout example. Some websites have more columns, some are a lot more complex, but you get the idea. With the right CSS, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job.

- -

This is because visuals don't tell the whole story. We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?

- -
-

Note: Colorblind people represent around 4% of the world population or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were 285 million such people in the world, while the total population was around 7 billion).

-
- -

In your HTML code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognise those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of consequences of not using the right element structure and semantics for the right job.

- -

Untuk menerapkan mark up semantik tersebut, HTML menyediakan tag khusus yang dapat Anda gunakan untuk mewakili bagian tersebut, misalnya:

- - - -

Active learning: exploring the code for our example

- -

Our example seen above is represented by the following code (you can also find the example in our GitHub repository). Kami ingin Anda melihat contoh di atas, dan kemudian melihat daftar di bawah untuk melihat bagian apa yang membentuk bagian visual apa.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-
-    <title>My page title</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="style.css">
-
-    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
-    <!--[if lt IE 9]>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
-    <![endif]-->
-  </head>
-
-  <body>
-    <!-- Here is our main header that is used across all the pages of our website -->
-
-    <header>
-      <h1>Header</h1>
-    </header>
-
-    <nav>
-      <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Our team</a></li>
-        <li><a href="#">Projects</a></li>
-        <li><a href="#">Contact</a></li>
-      </ul>
-
-       <!-- A Search form is another commmon non-linear way to navigate through a website. -->
-
-       <form>
-         <input type="search" name="q" placeholder="Search query">
-         <input type="submit" value="Go!">
-       </form>
-     </nav>
-
-    <!-- Here is our page's main content -->
-    <main>
-
-      <!-- It contains an article -->
-      <article>
-        <h2>Article heading</h2>
-
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
-
-        <h3>Subsection</h3>
-
-        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
-
-        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
-
-        <h3>Another subsection</h3>
-
-        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
-
-        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
-      </article>
-
-      <!-- the aside content can also be nested within the main content -->
-      <aside>
-        <h2>Related</h2>
-
-        <ul>
-          <li><a href="#">Oh I do like to be beside the seaside</a></li>
-          <li><a href="#">Oh I do like to be beside the sea</a></li>
-          <li><a href="#">Although in the North of England</a></li>
-          <li><a href="#">It never stops raining</a></li>
-          <li><a href="#">Oh well...</a></li>
-        </ul>
-      </aside>
-
-    </main>
-
-    <!-- And here is our main footer that is used across all the pages of our website -->
-
-    <footer>
-      <p>©Copyright 2050 by nobody. All rights reversed.</p>
-    </footer>
-
-  </body>
-</html>
- -

Luangkan waktu untuk melihat kode dan memahaminya - komentar di dalam kode juga akan membantu Anda untuk memahaminya. Kami tidak meminta Anda untuk melakukan banyak hal lain dalam artikel ini, karena kunci untuk memahami tata letak dokumen adalah menulis struktur HTML yang baik, dan kemudian meletakkannya dengan CSS. Kami akan menunggu ini sampai Anda mulai mempelajari tata letak CSS sebagai bagian dari topik CSS.

- -

HTML layout elements in more detail

- -

It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our HTML element reference. For now, these are the main definitions that you should try to understand:

- - - -

Non-semantic wrappers

- -

Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some {{glossary("CSS")}} or {{glossary("JavaScript")}}. For cases like these, HTML provides the {{HTMLElement("div")}} and {{HTMLElement("span")}} elements. You should use these preferably with a suitable {{htmlattrxref('class')}} attribute, to provide some kind of label for them so they can be easily targeted.

- -

{{HTMLElement("span")}} is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:

- -
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
-him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
-play, the lights should be down low]</span>.</p>
- -

Dalam hal ini, catatan editor seharusnya hanya memberikan arahan ekstra untuk sutradara drama; tidak seharusnya memiliki makna semantik tambahan. Untuk pengguna yang terlihat, CSS mungkin akan digunakan untuk menjauhkan catatan sedikit dari teks utama.

- -

{{HTMLElement("div")}} is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:

- -
<div class="shopping-cart">
-  <h2>Shopping cart</h2>
-  <ul>
-    <li>
-      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
-      <img src="../products/3333-0985/thumb.png" alt="Silver earrings">
-    </li>
-    <li>
-      ...
-    </li>
-  </ul>
-  <p>Total cost: $237.89</p>
-</div>
- -

This isn't really an <aside>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn't even particularly warrant using a  <section>, as it isn't part of the main content of the page. So a <div> is fine in this case. We've included a heading as a signpost to aid screenreader users in finding it.

- -
-

Warning: Div sangat nyaman digunakan sehingga mudah digunakan terlalu banyak. Karena mereka tidak memiliki nilai semantik, mereka hanya mengacaukan kode HTML Anda. Berhati-hatilah untuk menggunakannya hanya ketika tidak ada solusi semantik yang lebih baik dan cobalah untuk mengurangi penggunaannya seminimal mungkin jika tidak, Anda akan kesulitan memperbarui dan memelihara dokumen Anda.

-
- -

Line breaks and horizontal rules

- -

Two elements that you'll use occasionally and will want to know about are {{htmlelement("br")}} and {{htmlelement("hr")}}:

- -

<br> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:

- -
-
<p>There once was a man named O'Dell<br>
-Who loved to write HTML<br>
-But his structure was bad, his semantics were sad<br>
-and his markup didn't read very well.</p>
-
- -

Without the <br> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, HTML ignores most whitespace); with <br> elements in the code, the markup renders like this:

- -

{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}

- -

<hr> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line. As an example:

- -
-
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
-<hr>
-<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hazily and sighed; "better get back to work then", he mused.</p>
-
- -

Would render like this:

- -

{{EmbedLiveSample('horizantal-rule-live-sample', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}

- -

Planning a simple website

- -

Setelah Anda merencanakan struktur laman web sederhana, langkah logis berikutnya adalah mencoba mencari tahu konten apa yang ingin Anda tempatkan di seluruh situs web, halaman apa yang Anda butuhkan, dan bagaimana mereka harus diatur dan terhubung satu sama lain untuk pengalaman pengguna terbaik. This is called {{glossary("Information architecture")}}. Dalam situs web besar dan kompleks, banyak perencanaan yang dapat dilakukan dalam proses ini, tetapi untuk situs web sederhana dari beberapa halaman, ini bisa sangat sederhana, dan menyenangkan!

- -
    -
  1. Ingatlah bahwa Anda akan memiliki beberapa elemen yang umum untuk sebagian besar (jika tidak semua) halaman - seperti menu navigasi, dan konten footer. Jika situs Anda untuk bisnis, misalnya, sebaiknya informasi kontak Anda tersedia di catatan kaki di setiap halaman. Catat kesamaan yang ingin Anda miliki untuk setiap halaman.the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. -
  2. Selanjutnya, buatlah sketsa kasar tentang bagaimana Anda ingin struktur setiap halaman terlihat (mungkin terlihat seperti situs web sederhana kami di atas). Catat apa yang akan menjadi setiap blok.A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. -
  3. Sekarang, tukar pikiran semua konten lain (tidak umum untuk setiap halaman) yang ingin Anda miliki di situs web Anda - tulis daftar besar.A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. -
  4. Selanjutnya, cobalah untuk mengurutkan semua item konten ini menjadi grup, untuk memberi Anda gambaran tentang bagian apa yang bisa hidup bersama di halaman yang berbeda. Ini sangat mirip dengan teknik yang disebut {{glossary("Card sorting")}}.The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. -
  5. Sekarang cobalah untuk membuat sketsa peta situs kasar - miliki gelembung untuk setiap halaman di situs Anda, dan gambarlah garis untuk menunjukkan alur kerja khas antar halaman. Beranda mungkin ada di tengah, dan tautan ke sebagian besar jika tidak semua yang lain; sebagian besar halaman di situs kecil harus tersedia dari navigasi utama, meskipun ada pengecualian. Anda mungkin juga ingin memasukkan catatan tentang bagaimana hal-hal disajikan.A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page
    6. -
- -

Active learning: create your own sitemap

- -

Coba lakukan latihan di atas untuk situs web ciptaan Anda sendiri. Anda ingin membuat situs tentang apa?

- -
-

Note: Simpan pekerjaan Anda di suatu tempat; Anda mungkin membutuhkannya nanti.

-
- -

Test your skills!

- -

Anda telah mencapai akhir artikel ini, tetapi dapatkah Anda mengingat informasi yang paling penting? Anda dapat menemukan penilaian terperinci yang menguji keterampilan ini di akhir modul; see Structuring a page of content. Kami menyarankan untuk membaca artikel berikutnya dalam seri ini terlebih dahulu dan tidak hanya melewatkannya saja!

- -

Ringkasan

- -

Pada titik ini, Anda harus memiliki ide yang lebih baik tentang bagaimana membuat struktur halaman web / situs. Pada artikel terakhir modul ini, kita akan mempelajari cara men-debug HTML.

- -

See also

- - - -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

- -

In this module

- - diff --git a/files/id/learn/html/pengenalan_html/html_text_fundamentals/index.html b/files/id/learn/html/pengenalan_html/html_text_fundamentals/index.html deleted file mode 100644 index bbee58cc80..0000000000 --- a/files/id/learn/html/pengenalan_html/html_text_fundamentals/index.html +++ /dev/null @@ -1,1047 +0,0 @@ ---- -title: Teks mendasar HTML -slug: Learn/HTML/Pengenalan_HTML/HTML_text_fundamentals -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
- -

Salah satu tugas utama HTML adalah memberikan struktur dan makna teks (dikenal juga sebagai {{glossary("semantics")}}) dengan begitu peramban dapat menampilkannya dengan benar. Artikel ini menjelaskan cara {{glossary("HTML")}} digunakan untuk membuat struktur halaman teks dengan menambahkan judul dan paragraf, menekankan kata-kata, membuat daftar, dan lainnya.

- - - - - - - - - - - - -
Prasyarat:Familiar dengan dasar-dasar HTML, dicakup dalam Getting started with HTML.
Hal yang dipelajari:Mempelajari cara menandai halaman dasar teks untuk memberikan struktur dan tujuan — termasuk paragraf, judul, daftar, penekanan, dan kutipan.
- -

Dasar-dasarnya: Judul dan paragaf

- -

Sebaguan besar struktur teks terdiri dari judul dan paragraf, st structured text consists of headings and paragraphs, ntah Anda membaca sebuah kisah, koran, buku pelajaran, majalah, dsb.

- -

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

- -

Konten yang terstruktur membuat pengalaman membaca lebih mudah dan lebih menyenangkan.

- -

Dalam HTML, setiap paragraf dirangkap element {{htmlelement("p")}}, seperti berikut.

- -
<p>I am a paragraph, oh yes I am.</p>
- -

Setiap judul juga dirangkap dalam sebuah element "heading":

- -
<h1>I am the title of the story.</h1>
- -

Terdaoat beberapa element heading (judul) — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, dan {{htmlelement("h6")}}. Setiap element mewakili level konten yang berbeda dalam dokumennnya; <h1> mewakili judul utama, <h2> mewakili sub judul, <h3> mewakili sub-sub judul, dan seterusnya.

- -

Menerapkan susunan struktural

- -

Untuk contohnya, dalam sebuah kisah, <h1> mewakili judul kisahnya, <h2> mewakili judul setiap babnya dan <h3> mewakili sub-bagian setiap babnya, dan seterusnya.

- -
<h1>The Crushing Bore</h1>
-
-<p>By Chris Mills</p>
-
-<h2>Chapter 1: The dark night</h2>
-
-<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
-
-<h2>Chapter 2: The eternal silence</h2>
-
-<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
-
-<h3>The specter speaks</h3>
-
-<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
- -

Sebenarnya terserah Anda element yang digunakan, selama susunannya masuk akal. Anda perlu mengingat beberapa prakter terbaik saat Anda membuat struktur seperti:

- - - -

Why do we need structure?

- -

To answer this question, let's take a look at text-start.html — the starting point of our running example for this article (a nice hummus recipe). You should save a copy of this file on your local machine, as you'll need it for the exercises later on. This document's body currently contains multiple pieces of content — they aren't marked up in any way, but they are separated with linebreaks (Enter/Return pressed to go onto the next line).

- -

However, when you open the document in your browser, you'll see that the text appears as a big chunk!

- -

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

- -

This is because there are no elements to give the content structure, so the browser does not know what is a heading and what is a paragraph. Furthermore:

- - - -

We therefore need to give our content structural markup.

- -

Active learning: Giving our content structure

- -

Let's jump straight in with a live example. In the example below, add elements to the raw text in the Input field so that it appears as a heading and two paragraphs in the Output field.

- -

If you make a mistake, you can always reset it using the Reset button. If you get stuck, press the Show solution button to see the answer.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Why do we need semantics?

- -

Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of an everyday object is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop", and a green traffic light to mean "go". Things can get tricky very quickly if the wrong semantics are applied (Do any countries use red to mean "go"? I hope not.)

- -

In a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context the {{htmlelement("h1")}} element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."

- -
<h1>This is a top level heading</h1>
- -

By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above).

- -

On the other hand, you could make any element look like a top level heading. Consider the following:

- -
<span style="font-size: 32px; margin: 21px 0; display: block;">Is this a top level heading?</span>
- -

This is a {{htmlelement("span")}} element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning (you'll find out more about these later on in the course). We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevant HTML element for the job.

- -

Lists

- -

Now let's turn our attention to lists. Lists are everywhere in life — from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! Lists are everywhere on the Web too, and we've got three different types to worry about.

- -

Unordered

- -

Unordered lists are used to mark up lists of items for which the order of the items doesn't matter — let's take a shopping list as an example.

- -
milk
-eggs
-bread
-hummus
- -

Every unordered list starts off with a {{htmlelement("ul")}} element — this wraps around all the list items:

- -
<ul>
-milk
-eggs
-bread
-hummus
-</ul>
- -

The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element:

- -
<ul>
-  <li>milk</li>
-  <li>eggs</li>
-  <li>bread</li>
-  <li>hummus</li>
-</ul>
- -

Active learning: Marking up an unordered list

- -

Try editing the live sample below to create your very own HTML unordered list.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Ordered

- -

Ordered lists are lists in which the order of the items does matter — let's take a set of directions as an example:

- -
Drive to the end of the road
-Turn right
-Go straight across the first two roundabouts
-Turn left at the third roundabout
-The school is on your right, 300 meters up the road
- -

The markup structure is the same as for unordered lists, except that you have to wrap the list items in an {{htmlelement("ol")}} element, rather than <ul>:

- -
<ol>
-  <li>Drive to the end of the road</li>
-  <li>Turn right</li>
-  <li>Go straight across the first two roundabouts</li>
-  <li>Turn left at the third roundabout</li>
-  <li>The school is on your right, 300 meters up the road</li>
-</ol>
- -

Active learning: Marking up an ordered list

- -

Try editing the live sample below to create your very own HTML ordered list.

- - - -

{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}

- -

Active learning: Marking up our recipe page

- -

So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our text-start.html starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.

- - - -

{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}

- -

If you get stuck, you can always press the Show solution button, or check out our text-complete.html example on our github repo.

- -

Nesting lists

- -

It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:

- -
<ol>
-  <li>Remove the skin from the garlic, and chop coarsely.</li>
-  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
-  <li>Add all the ingredients into a food processor.</li>
-  <li>Process all the ingredients into a paste.</li>
-  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
-  <li>If you want a smooth hummus, process it for a longer time.</li>
-</ol>
- -

Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:

- -
<ol>
-  <li>Remove the skin from the garlic, and chop coarsely.</li>
-  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
-  <li>Add all the ingredients into a food processor.</li>
-  <li>Process all the ingredients into a paste.
-    <ul>
-      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
-      <li>If you want a smooth hummus, process it for a longer time.</li>
-    </ul>
-  </li>
-</ol>
- -

Try going back to the previous active learning example and updating the second list like this.

- -

Emphasis and importance

- -

In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.

- -

Emphasis

- -

When we want to add emphasis in spoken language, we stress certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.

- -

I am glad you weren't late.

- -

I am glad you weren't late.

- -

The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.

- -

In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below).

- -
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
- -

Strong importance

- -

To emphasize important words, we tend to stress them in spoken language and bold them in written language. For example:

- -

This liquid is highly toxic.

- -

I am counting on you. Do not be late!

- -

In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below).

- -
<p>This liquid is <strong>highly toxic</strong>.</p>
-
-<p>I am counting on you. <strong>Do not</strong> be late!</p>
- -

You can nest strong and emphasis inside one another if desired:

- -
<p>This liquid is <strong>highly toxic</strong> —
-if you drink it, <strong>you may <em>die</em></strong>.</p>
- -

Active learning: Let's be important!

- -

In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.

- - - -

{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}

- -

Italic, bold, underline...

- -

The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.

- -

HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles.

- -

Here's the best rule of thumb: it's likely appropriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

- - - -
-

A kind warning about underline: People strongly associate underlining with hyperlinks. Therefore, on the Web, it's best to underline only links. Use the <u> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.

-
- -
<!-- scientific names -->
-<p>
-  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
-  is the most common hummingbird in Eastern North America.
-</p>
-
-<!-- foreign words -->
-<p>
-  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
-  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
-</p>
-
-<!-- a known misspelling -->
-<p>
-  Someday I'll learn how to <u style="text-decoration-line: underline; text-decoration-style: wavy;">spel</u> better.
-</p>
-
-<!-- Highlight keywords in a set of instructions -->
-<ol>
-  <li>
-    <b>Slice</b> two pieces of bread off the loaf.
-  </li>
-  <li>
-    <b>Insert</b> a tomato slice and a leaf of
-    lettuce between the slices of bread.
-  </li>
-</ol>
- -

Summary

- -

That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to create hyperlinks, possibly the most important element on the Web.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

- - - -

In this module

- - diff --git a/files/id/learn/html/pengenalan_html/index.html b/files/id/learn/html/pengenalan_html/index.html deleted file mode 100644 index 367ef45712..0000000000 --- a/files/id/learn/html/pengenalan_html/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Pengenalan HTML -slug: Learn/HTML/Pengenalan_HTML -tags: - - CodingScripting - - HTML - - Link - - Pengenalan HTML - - Struktur - - Teks - - head - - semantic -translation_of: Learn/HTML/Introduction_to_HTML ---- -
{{LearnSidebar}}
- -

Pada intinya, {{glossary("HTML")}} adalah bahasa yang cukup sederhana yang tersusun dari elemen, yang bisa diaplikasikan pada teks untuk menambah perbedaan maksud dalam dokumen (Apakah paragraf? Apakah daftar dengan butir? Apakah bagian dari sebuah tabel?), membentuk struktur dokumen menjadi satu bagian logikal (Apakah memiliki header? Apakah berbentuk tiga kolom? Apakah sebuah menu navigasi?), dan menempatkan konten seperti gambar dan video pada satu halaman. Modul ini akan memperkenalkan dua hal dulu, dan memperkenalkan konsep fundamental dan sintaks yang harus kamu ketahui untuk memahami HTML.

- -

Prasyarat

- -

Sebelum memulai modul ini, kamu tidak harus memiliki pengetahuan mengenai HTML, tapi kamu setidaknya harus sudah terbiasa menggunakan komputer dan menggunakan web secara pasif (misalnya, hanya membuka-buka dan menikmati kontennya). Kamu harus memiliki perlengkapan dasar (seperti dijelaskan dalam Menginstal perangkat lunak dasar), dan memahami cara membuat dan mengelola file (seperti dijelaskan dalam Berurusan dengan file). Keduanya adalah bagian dari modul untuk pemula yang berjudul Mengenal apa itu web.

- -
-

Catatan: Jika kamu menggunakan komputer/tablet/alat lain yang tidak bisa membuat file sendiri, kamu bisa mencoba (banyak) contoh kode di aplikasi pemrograman daring seperti JSBin atau Thimble.

-
- -

Panduan

- -

Modul ini berisi artikel-artikel berikut, yang akan mengajarkan kamu mengenai semua teori dasar HTML dan memberimu kesempatan untuk menguji beberapa keterampilan.

- -
-
Mulai bekerja dengan HTML
-
Mengkover dasar-dasar HTML, untuk memulai — kita mendefinisikan elemen, atribut, dan istilah penting lainnya, dan menunjukkan di mana posisi mereka dalam HTML. Kita juga tunjukkan bagaimana tipikal halaman HTML terstruktur dan bagaimana elemen HTML tersetruktur, dan menjelaskan fitur dasar penting lainnya. Selain itu, kita akan bermain dengan beberapa HTML supaya kamu tertarik!
-
Apa yang ada di head? Metadata dalam HTML
-
Head dokumen HTML merupakan bagian yang tidak tampil dalam peramban web ketika halaman dimuat. Dia mengandung informasi seperti halaman {{htmlelement("title")}}, link ke {{glossary("CSS")}} (jika kamu ingin memberi gaya konten HTML mu dengan CSS), link ke kustom favicons, dan metadata (data tentang HTML, misalnya siapa yang menulis, dan kata kunci penting yang menjelaskan dokumen tersebut).
-
Fundamental teks HTML
-
Salah satu dari tugas utama HTML ialah memberi teks arti (juga disebut semantic), sehingga peramban tahu cara yang benar untuk menampilkannya. Artikel ini melihat bagaimana menggunakan HTML untuk memecah blok teks menjadi satu struktur headings dan paragraf, tambah penekanan/kepentingan ke dalam kata-kata, membuat list, dan banyak lagi.
-
Membuat hyperlinks
-
Hyperlinks sangat penting — merekalah yang membuat web menjadi web. Artikel ini menunjukkan syntaks yang dibutuhkan untuk membuat link, dan mendiskusikan praktek terbaik untuk link.
-
Pemformatan teks maju
-
Banyak elemen lain dalam HTML untuk pemformatan teks yang tidak kita dapatkan dalam artikel fundamental teks HTML. Elemen ini kurang dikenal, tapi masih berfaedah untuk diketahui. Dalam artikel ini kamu akan belajar tentang menandai quotasi, deskripsi list, kode komputer dan text terkait lain, subscript dan superscript, informasi kontak, dan banyak lagi.
-
Struktur dokumen dan website
-
Selain mendefinisi bagian individu halaman kamu (seperti sebuah "paragraf" atau "gambar"), HTML juga digunakan untuk mendefinisi area website kamu (seperti header," "menu navigasi," atau "kolom konten utama.") Artikel ini melihat ke dalam bagaimana merencanakan struktur web dasar dan bagaimana menulis HTML untuk mewakili struktur ini.
-
Mendebug HTML
-
Menulis HTML itu bagus, tapi kalau sesuatu buruk terjadi, dan kamu tidak bisa mengatasinya? Artikel ini akan memperkenalkan kamu pada beberapa tools yang berfaedah untuk itu.
-
- -

Latihan

- -

Latihan-latihan berikut akan menguji pemahaman kamu mengenai HTML dasar yang ada pada panduan-panduan di atas.

- -
-
Menandai huruf
-
Kita semua belajar menulis huruf cepat atau lambat; itu juga contoh berfaedah untuk menguji keahlian memformat. Dalam asesmen ini, kamu akan diberi huruf untuk ditandai.
-
Menandai halaman konten
-
Asesmen ini menguji kemampuanmu menggunakan HTML untuk menstrukturisasi halaman konten sederhana, yang berisi header, footer, menu navigasi, konten utama, dan sidebar.
-
- -

Lihat juga

- -
-
Dasar literasi web 1
-
Kursus Mozilla foundation terbaik yang menjelajahi dan menguji banyak kemampuan dalam modul Pengenalan HTML. Pelajar akan akrab dengan bacaan, tulisan, dan berpartisipasi dalam web di modul 6-bagian ini. Cari tahu fondasi web melalui produksi dan kolaborasi.
-
diff --git a/files/id/learn/html/pengenalan_html/structuring_a_page_of_content/index.html b/files/id/learn/html/pengenalan_html/structuring_a_page_of_content/index.html deleted file mode 100644 index 2535589f38..0000000000 --- a/files/id/learn/html/pengenalan_html/structuring_a_page_of_content/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Structuring a page of content -slug: Learn/HTML/Pengenalan_HTML/Structuring_a_page_of_content -translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
- -

Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.

- - - - - - - - - - - - -
Prerequisites:Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on Document and website structure.
Objective:To test knowledge of web page structures, and how to represent a prospective layout design in markup.
- -

Starting point

- -

To get this assessment started, you should go and grab the zip file containing all the starting assets.

- -


- The zip file contains:

- - - -

Create the example on your local computer, or alternatively use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.

- -
-

Note: If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.

-
- -

Project brief

- -

Untuk proyek ini, tugas Anda adalah mengambil konten untuk beranda situs web pengamatan burung dan menambahkan elemen struktural ke dalamnya sehingga dapat memiliki tata letak halaman yang diterapkan padanya. Perlu memiliki:

- - - -

You need to add a suitable wrapper for (Anda perlu menambahkan pembungkus yang cocok untuk:):

- - - -

You should also:

- - - -

Hints and tips

- - - -

Example

- -

The following screenshot shows an example of what the homepage might look like after being marked up.

- -

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

- -

Assessment or further help

- -

If you would like your work assessed, or are stuck and want to ask for help:

- -
    -
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch.
    2. -
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: -
      -
    • A descriptive title such as "Assessment wanted for Structuring a page of content".
      • -
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • -
    • A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • -
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • -
    -
    3. -
- -

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

- -

In this module

- - diff --git a/files/id/learn/html/tabel/index.html b/files/id/learn/html/tabel/index.html deleted file mode 100644 index b8fe3a2d8a..0000000000 --- a/files/id/learn/html/tabel/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: HTML Tables -slug: Learn/HTML/Tabel -translation_of: Learn/HTML/Tables ---- -
{{LearnSidebar}}
- -

Salah satu tugas umum di HTML adalah menyusun data secara tabular dan untuk tujuan tersebut maka disediakan sejumlah elemen dan atribut. HTML yang ditambah sedikit CSS untuk styling akan memudahkan untuk menampilkan tabel informasi pada website seperti jadwal pelajaran, jadwal kolam renang atau statistik tentang dinosaurus atau tim sepakbola favoritmu. Modul ini akan memberi apa yang anda ingin ketahui tentang menyusun data tabular dengan HTML.

- -

- -

Prasayarat

- -

Sebelum memulai modul ini, anda harus sudah menguasai dasar HTML — Lihat Introduction to HTML.

- -
-

Catatan: Jika anda berkerja di komputer/tablet/atau perangkat lain yang tidak memiliki kemampuan untuk membuat file sendiri, anda dapat mencoba (sebagian besar) contoh kode pada program coding online seperti JSBin atau Glitch.

-
- -

Panduan

- -

Modul ini berisi artikel berikut :

- -
-
HTML table basics
-
Artikel ini membawa anda mengawali pembahasan tabel HTML, mencakup dasar mengenai baris dan sel, heading, membuat sel span untuk kolom dan baris berganda, dan bagaimana untuk mengelompokan semua sel di dalam sebuah kolom untuk tujuan styling.
-
HTML table advanced features and accessibility
-
Modul ini mengulas beberapa fitur lanjutan tabel HTML — seperti caption/rangkuman dan mengelompokan baris dalam bagian judul tabel, bodi atau footer — dan juga melihat aksesibilitas tabel untuk melihat kesalahan pengguna
-
- -

Penilaian

- -
-
Structuring planet data
-
pada penilaian tabel, kami menyediakan anda data planet dalam tata surya kita, dan membantu menyusunnya dalam tabel HTML.
-
diff --git a/files/id/learn/html/tables/index.html b/files/id/learn/html/tables/index.html new file mode 100644 index 0000000000..b8fe3a2d8a --- /dev/null +++ b/files/id/learn/html/tables/index.html @@ -0,0 +1,36 @@ +--- +title: HTML Tables +slug: Learn/HTML/Tabel +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

Salah satu tugas umum di HTML adalah menyusun data secara tabular dan untuk tujuan tersebut maka disediakan sejumlah elemen dan atribut. HTML yang ditambah sedikit CSS untuk styling akan memudahkan untuk menampilkan tabel informasi pada website seperti jadwal pelajaran, jadwal kolam renang atau statistik tentang dinosaurus atau tim sepakbola favoritmu. Modul ini akan memberi apa yang anda ingin ketahui tentang menyusun data tabular dengan HTML.

+ +

+ +

Prasayarat

+ +

Sebelum memulai modul ini, anda harus sudah menguasai dasar HTML — Lihat Introduction to HTML.

+ +
+

Catatan: Jika anda berkerja di komputer/tablet/atau perangkat lain yang tidak memiliki kemampuan untuk membuat file sendiri, anda dapat mencoba (sebagian besar) contoh kode pada program coding online seperti JSBin atau Glitch.

+
+ +

Panduan

+ +

Modul ini berisi artikel berikut :

+ +
+
HTML table basics
+
Artikel ini membawa anda mengawali pembahasan tabel HTML, mencakup dasar mengenai baris dan sel, heading, membuat sel span untuk kolom dan baris berganda, dan bagaimana untuk mengelompokan semua sel di dalam sebuah kolom untuk tujuan styling.
+
HTML table advanced features and accessibility
+
Modul ini mengulas beberapa fitur lanjutan tabel HTML — seperti caption/rangkuman dan mengelompokan baris dalam bagian judul tabel, bodi atau footer — dan juga melihat aksesibilitas tabel untuk melihat kesalahan pengguna
+
+ +

Penilaian

+ +
+
Structuring planet data
+
pada penilaian tabel, kami menyediakan anda data planet dalam tata surya kita, dan membantu menyusunnya dalam tabel HTML.
+
diff --git a/files/id/learn/javascript/objects/basics/index.html b/files/id/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..6c273b51a3 --- /dev/null +++ b/files/id/learn/javascript/objects/basics/index.html @@ -0,0 +1,261 @@ +--- +title: Dasar-dasar Objek JavaScript object +slug: Learn/JavaScript/Objects/Dasar-dasar +translation_of: Learn/JavaScript/Objects/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
+ +

Pada artikel ini, kita akan melihat beberapa hal mendasar dalam sintaks Javascript Objek dan meninjau kembali beberapa fitur JavaScript yang telah kita bahas pada bab sebelumnya .

+ + + + + + + + + + + + +
Prasyarat:Mengetahui dasar komputer literasi, memahami tentang dasar HTML dan CSS, memahami dasar javascript (lihat First steps dan Building blocks).
Tujuan:Untuk memahami teori dasar tentang pemrograman berbasis objek, dan bagaimana hubungannya dengan Javascript dan bagaimana memulai bekerja menggunakan JavaScript objects.
+ +

Dasar Objek

+ +

Objek adalah kumpulan data yang saling berkaitan secara data maupun fungsionalitas (yang terdiri dari beberapa variabel dan fungsi yang disebut properti (properties) dan metode (method) ketika digunakan dalam objek). 

+ +

Untuk memulainya, silakan salin file oojs.html, yang berisi tentang contoh kecil dari apa yang kita bahas. Kita akan menggunakan file ini sebagai dasar untuk mempelajari sintaks objek dasar. Saat  mempelajarinya anda harus memiliki developer tools JavaScript console.

+ +

Seperti banyak hal dalam JavaScript, membuat objek dimulai dengan mendefinisikan dan menginisialisasi beberapa variabel. Coba anda gunakan baris kode berikut pada kode JavaScript yang sudah ada dalam file, simpan lalu refresh:

+ +
const person = {};
+ +

Now open your browser's JavaScript console, enter person into it, and press Enter/Return. You should get a result similar to one of the below lines:

+ +
[object Object]
+Object { }
+{ }
+
+ +

Congratulations, you've just created your first object. Job done! But this is an empty object, so we can't really do much with it. Let's update the JavaScript object in our file to look like this:

+ +
const person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+
+ +

After saving and refreshing, try entering some of the following into the JavaScript console on your browser devtools:

+ +
person.name
+person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()
+ +

You have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!

+ +
+

Note: If you are having trouble getting this to work, try comparing your code against our version — see oojs-finished.html (also see it running live). The live version will give you a blank screen, but that's OK — again, open your devtools and try typing in the above commands to see the object structure.

+
+ +

So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. name and age above), and a value (e.g. ['Bob', 'Smith'] and 32). Each name/value pair must be separated by a comma, and the name and value in each case are separated by a colon. The syntax always follows this pattern:

+ +
const objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+};
+ +

The value of an object member can be pretty much anything — in our person object we've got a string, a number, two arrays, and two functions. The first four items are data items, and are referred to as the object's properties. The last two items are functions that allow the object to do something with that data, and are referred to as the object's methods.

+ +

An object like this is referred to as an object literal — we've literally written out the object contents as we've come to create it. This is in contrast to objects instantiated from classes, which we'll look at later on.

+ +

It is very common to create an object using an object literal when you want to transfer a series of structured, related data items in some manner, for example sending a request to the server to be put into a database. Sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name.

+ +

Dot notation

+ +

Above, you accessed the object's properties and methods using dot notation. The object name (person) acts as the namespace — it must be entered first to access anything encapsulated inside the object. Next you write a dot, then the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object's methods, for example:

+ +
person.age
+person.interests[1]
+person.bio()
+ +

Sub-namespaces

+ +

It is even possible to make the value of an object member another object. For example, try changing the name member from

+ +
name: ['Bob', 'Smith'],
+ +

to

+ +
name : {
+  first: 'Bob',
+  last: 'Smith'
+},
+ +

Here we are effectively creating a sub-namespace. This sounds complex, but really it's not — to access these items you just need to chain the extra step onto the end with another dot. Try these in the JS console:

+ +
person.name.first
+person.name.last
+ +

Important: At this point you'll also need to go through your method code and change any instances of

+ +
name[0]
+name[1]
+ +

to

+ +
name.first
+name.last
+ +

Otherwise your methods will no longer work.

+ +

Bracket notation

+ +

There is another way to access object properties — using bracket notation. Instead of using these:

+ +
person.age
+person.name.first
+ +

You can use

+ +
person['age']
+person['name']['first']
+ +

This looks very similar to how you access the items in an array, and it is basically the same thing — instead of using an index number to select an item, you are using the name associated with each member's value. It is no wonder that objects are sometimes called associative arrays — they map strings to values in the same way that arrays map numbers to values.

+ +

Setting object members

+ +

So far we've only looked at retrieving (or getting) object members — you can also set (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this:

+ +
person.age = 45;
+person['name']['last'] = 'Cratchit';
+ +

Try entering the above lines, and then getting the members again to see how they've changed, like so:

+ +
person.age
+person['name']['last']
+ +

Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these in the JS console:

+ +
person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }
+ +

You can now test out your new members:

+ +
person['eyes']
+person.farewell()
+ +

One useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. Let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs. We could get those values like this:

+ +
let myDataName = nameInput.value;
+let myDataValue = nameValue.value;
+ +

We could then add this new member name and value to the person object like this:

+ +
person[myDataName] = myDataValue;
+ +

To test this, try adding the following lines into your code, just below the closing curly brace of the person object:

+ +
let myDataName = 'height';
+let myDataValue = '1.75m';
+person[myDataName] = myDataValue;
+ +

Now try saving and refreshing, and entering the following into your text input:

+ +
person.height
+ +

Adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.

+ +

What is "this"?

+ +

You may have noticed something slightly strange in our methods. Look at this one for example:

+ +
greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}
+ +

You are probably wondering what "this" is. The this keyword refers to the current object the code is being written inside — so in this case this is equivalent to person. So why not just write person instead? As you'll see in the Object-oriented JavaScript for beginners article, when we start creating constructors and so on, this is very useful — it always ensures that the correct values are used when a member's context changes (for example, two different person object instances may have different names, but we want to use their own name when saying their greeting).

+ +

Let's illustrate what we mean with a simplified pair of person objects:

+ +
const person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+const person2 = {
+  name: 'Deepti',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+ +

In this case, person1.greeting() outputs "Hi! I'm Chris."; person2.greeting() on the other hand outputs "Hi! I'm Deepti.", even though the method's code is exactly the same in each case. As we said earlier, this is equal to the object the code is inside — this isn't hugely useful when you are writing out object literals by hand, but it really comes into its own when you are dynamically generating objects (for example using constructors). It will all become clearer later on.

+ +

You've been using objects all along

+ +

As you've been going through these examples, you have probably been thinking that the dot notation you've been using is very familiar. That's because you've been using it throughout the course! Every time we've been working through an example that uses a built-in browser API or JavaScript object, we've been using objects, because such features are built using exactly the same kind of object structures that we've been looking at here, albeit more complex ones than in our own basic custom examples.

+ +

So when you used string methods like:

+ +
myString.split(',');
+ +

You were using a method available on an instance of the String class. Every time you create a string in your code, that string is automatically created as an instance of String, and therefore has several common methods and properties available on it.

+ +

When you accessed the document object model using lines like this:

+ +
const myDiv = document.createElement('div');
+const myVideo = document.querySelector('video');
+ +

You were using methods available on an instance of the Document class. For each webpage loaded, an instance of Document is created, called document, which represents the entire page's structure, content, and other features such as its URL. Again, this means that it has several common methods and properties available on it.

+ +

The same is true of pretty much any other built-in object or API you've been using — Array, Math, and so on.

+ +

Note that built in objects and APIs don't always create object instances automatically. As an example, the Notifications API — which allows modern browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire. Try entering the following into your JavaScript console:

+ +
const myNotification = new Notification('Hello!');
+ +

Again, we'll look at constructors in a later article.

+ +
+

Note: It is useful to think about the way objects communicate as message passing — when an object needs another object to perform some kind of action often it sends a message to another object via one of its methods, and waits for a response, which we know as a return value.

+
+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Object basics.

+ +

Summary

+ +

Congratulations, you've reached the end of our first JS objects article — you should now have a good idea of how to work with objects in JavaScript — including creating your own simple objects. You should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep track of all the properties and methods in our person object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. Objects let us keep the information safely locked away in their own package, out of harm's way.

+ +

In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.

+ +

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

+ +

In this module

+ + diff --git a/files/id/learn/javascript/objects/dasar-dasar/index.html b/files/id/learn/javascript/objects/dasar-dasar/index.html deleted file mode 100644 index 6c273b51a3..0000000000 --- a/files/id/learn/javascript/objects/dasar-dasar/index.html +++ /dev/null @@ -1,261 +0,0 @@ ---- -title: Dasar-dasar Objek JavaScript object -slug: Learn/JavaScript/Objects/Dasar-dasar -translation_of: Learn/JavaScript/Objects/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
- -

Pada artikel ini, kita akan melihat beberapa hal mendasar dalam sintaks Javascript Objek dan meninjau kembali beberapa fitur JavaScript yang telah kita bahas pada bab sebelumnya .

- - - - - - - - - - - - -
Prasyarat:Mengetahui dasar komputer literasi, memahami tentang dasar HTML dan CSS, memahami dasar javascript (lihat First steps dan Building blocks).
Tujuan:Untuk memahami teori dasar tentang pemrograman berbasis objek, dan bagaimana hubungannya dengan Javascript dan bagaimana memulai bekerja menggunakan JavaScript objects.
- -

Dasar Objek

- -

Objek adalah kumpulan data yang saling berkaitan secara data maupun fungsionalitas (yang terdiri dari beberapa variabel dan fungsi yang disebut properti (properties) dan metode (method) ketika digunakan dalam objek). 

- -

Untuk memulainya, silakan salin file oojs.html, yang berisi tentang contoh kecil dari apa yang kita bahas. Kita akan menggunakan file ini sebagai dasar untuk mempelajari sintaks objek dasar. Saat  mempelajarinya anda harus memiliki developer tools JavaScript console.

- -

Seperti banyak hal dalam JavaScript, membuat objek dimulai dengan mendefinisikan dan menginisialisasi beberapa variabel. Coba anda gunakan baris kode berikut pada kode JavaScript yang sudah ada dalam file, simpan lalu refresh:

- -
const person = {};
- -

Now open your browser's JavaScript console, enter person into it, and press Enter/Return. You should get a result similar to one of the below lines:

- -
[object Object]
-Object { }
-{ }
-
- -

Congratulations, you've just created your first object. Job done! But this is an empty object, so we can't really do much with it. Let's update the JavaScript object in our file to look like this:

- -
const person = {
-  name: ['Bob', 'Smith'],
-  age: 32,
-  gender: 'male',
-  interests: ['music', 'skiing'],
-  bio: function() {
-    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
-  },
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name[0] + '.');
-  }
-};
-
- -

After saving and refreshing, try entering some of the following into the JavaScript console on your browser devtools:

- -
person.name
-person.name[0]
-person.age
-person.interests[1]
-person.bio()
-person.greeting()
- -

You have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!

- -
-

Note: If you are having trouble getting this to work, try comparing your code against our version — see oojs-finished.html (also see it running live). The live version will give you a blank screen, but that's OK — again, open your devtools and try typing in the above commands to see the object structure.

-
- -

So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. name and age above), and a value (e.g. ['Bob', 'Smith'] and 32). Each name/value pair must be separated by a comma, and the name and value in each case are separated by a colon. The syntax always follows this pattern:

- -
const objectName = {
-  member1Name: member1Value,
-  member2Name: member2Value,
-  member3Name: member3Value
-};
- -

The value of an object member can be pretty much anything — in our person object we've got a string, a number, two arrays, and two functions. The first four items are data items, and are referred to as the object's properties. The last two items are functions that allow the object to do something with that data, and are referred to as the object's methods.

- -

An object like this is referred to as an object literal — we've literally written out the object contents as we've come to create it. This is in contrast to objects instantiated from classes, which we'll look at later on.

- -

It is very common to create an object using an object literal when you want to transfer a series of structured, related data items in some manner, for example sending a request to the server to be put into a database. Sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name.

- -

Dot notation

- -

Above, you accessed the object's properties and methods using dot notation. The object name (person) acts as the namespace — it must be entered first to access anything encapsulated inside the object. Next you write a dot, then the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object's methods, for example:

- -
person.age
-person.interests[1]
-person.bio()
- -

Sub-namespaces

- -

It is even possible to make the value of an object member another object. For example, try changing the name member from

- -
name: ['Bob', 'Smith'],
- -

to

- -
name : {
-  first: 'Bob',
-  last: 'Smith'
-},
- -

Here we are effectively creating a sub-namespace. This sounds complex, but really it's not — to access these items you just need to chain the extra step onto the end with another dot. Try these in the JS console:

- -
person.name.first
-person.name.last
- -

Important: At this point you'll also need to go through your method code and change any instances of

- -
name[0]
-name[1]
- -

to

- -
name.first
-name.last
- -

Otherwise your methods will no longer work.

- -

Bracket notation

- -

There is another way to access object properties — using bracket notation. Instead of using these:

- -
person.age
-person.name.first
- -

You can use

- -
person['age']
-person['name']['first']
- -

This looks very similar to how you access the items in an array, and it is basically the same thing — instead of using an index number to select an item, you are using the name associated with each member's value. It is no wonder that objects are sometimes called associative arrays — they map strings to values in the same way that arrays map numbers to values.

- -

Setting object members

- -

So far we've only looked at retrieving (or getting) object members — you can also set (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this:

- -
person.age = 45;
-person['name']['last'] = 'Cratchit';
- -

Try entering the above lines, and then getting the members again to see how they've changed, like so:

- -
person.age
-person['name']['last']
- -

Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these in the JS console:

- -
person['eyes'] = 'hazel';
-person.farewell = function() { alert("Bye everybody!"); }
- -

You can now test out your new members:

- -
person['eyes']
-person.farewell()
- -

One useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. Let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs. We could get those values like this:

- -
let myDataName = nameInput.value;
-let myDataValue = nameValue.value;
- -

We could then add this new member name and value to the person object like this:

- -
person[myDataName] = myDataValue;
- -

To test this, try adding the following lines into your code, just below the closing curly brace of the person object:

- -
let myDataName = 'height';
-let myDataValue = '1.75m';
-person[myDataName] = myDataValue;
- -

Now try saving and refreshing, and entering the following into your text input:

- -
person.height
- -

Adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.

- -

What is "this"?

- -

You may have noticed something slightly strange in our methods. Look at this one for example:

- -
greeting: function() {
-  alert('Hi! I\'m ' + this.name.first + '.');
-}
- -

You are probably wondering what "this" is. The this keyword refers to the current object the code is being written inside — so in this case this is equivalent to person. So why not just write person instead? As you'll see in the Object-oriented JavaScript for beginners article, when we start creating constructors and so on, this is very useful — it always ensures that the correct values are used when a member's context changes (for example, two different person object instances may have different names, but we want to use their own name when saying their greeting).

- -

Let's illustrate what we mean with a simplified pair of person objects:

- -
const person1 = {
-  name: 'Chris',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-const person2 = {
-  name: 'Deepti',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

In this case, person1.greeting() outputs "Hi! I'm Chris."; person2.greeting() on the other hand outputs "Hi! I'm Deepti.", even though the method's code is exactly the same in each case. As we said earlier, this is equal to the object the code is inside — this isn't hugely useful when you are writing out object literals by hand, but it really comes into its own when you are dynamically generating objects (for example using constructors). It will all become clearer later on.

- -

You've been using objects all along

- -

As you've been going through these examples, you have probably been thinking that the dot notation you've been using is very familiar. That's because you've been using it throughout the course! Every time we've been working through an example that uses a built-in browser API or JavaScript object, we've been using objects, because such features are built using exactly the same kind of object structures that we've been looking at here, albeit more complex ones than in our own basic custom examples.

- -

So when you used string methods like:

- -
myString.split(',');
- -

You were using a method available on an instance of the String class. Every time you create a string in your code, that string is automatically created as an instance of String, and therefore has several common methods and properties available on it.

- -

When you accessed the document object model using lines like this:

- -
const myDiv = document.createElement('div');
-const myVideo = document.querySelector('video');
- -

You were using methods available on an instance of the Document class. For each webpage loaded, an instance of Document is created, called document, which represents the entire page's structure, content, and other features such as its URL. Again, this means that it has several common methods and properties available on it.

- -

The same is true of pretty much any other built-in object or API you've been using — Array, Math, and so on.

- -

Note that built in objects and APIs don't always create object instances automatically. As an example, the Notifications API — which allows modern browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire. Try entering the following into your JavaScript console:

- -
const myNotification = new Notification('Hello!');
- -

Again, we'll look at constructors in a later article.

- -
-

Note: It is useful to think about the way objects communicate as message passing — when an object needs another object to perform some kind of action often it sends a message to another object via one of its methods, and waits for a response, which we know as a return value.

-
- -

Test your skills!

- -

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Object basics.

- -

Summary

- -

Congratulations, you've reached the end of our first JS objects article — you should now have a good idea of how to work with objects in JavaScript — including creating your own simple objects. You should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep track of all the properties and methods in our person object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. Objects let us keep the information safely locked away in their own package, out of harm's way.

- -

In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.

- -

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

- -

In this module

- - diff --git a/files/id/learn/web_mechanics/index.html b/files/id/learn/web_mechanics/index.html deleted file mode 100644 index 2e2f406ee5..0000000000 --- a/files/id/learn/web_mechanics/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Mekanisme Web -slug: Learn/Web_Mechanics -tags: - - MekanismeWeb - - Pemula -translation_of: Learn/Common_questions -translation_of_original: 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.

- -

{{NoteStart}}Mekanisme web berfokus pada sisi fungsional dari ekosistem web, bukan pada sisi teknis, dimana pembahasannya berada pada Infrastruktur.{{NoteEnd}}

- -

Keahlian Dasar

- -

Mulailah dari sini jika Anda belum akrab dengan web. Kami juga menyarankan Anda untuk mengunjungi ke halaman glosarium kami untuk bantuan dalam memahami berbagai jargon yang ada pada web.

- -

{{ArticlesByTag({"tags":["WebMechanics","Beginner"]})}}

- -

Keahlian Menengah

- -

Jika Anda sudah pernah mengenal web, di sini ada beberapa detail yang dapat Anda pelajari lebih lanjut:

- -

{{ArticlesByTag({"tags":["WebMechanics","Intermediate"]})}}

- -

Keahlian Lanjutan

- -

Jika Anda adalah seorang pembuat web yang berpengalaman, Anda mungkin tertarik untuk mempelajari keahlian yang luar biasa.

- -

{{ArticlesByTag({"tags":["WebMechanics","Advanced"]})}}

diff --git a/files/id/mdn/contribute/howto/create_an_mdn_account/index.html b/files/id/mdn/contribute/howto/create_an_mdn_account/index.html deleted file mode 100644 index aba3020441..0000000000 --- a/files/id/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Bagaimana Membuat Akun MDN -slug: MDN/Contribute/Howto/Create_an_MDN_account -tags: - - Bagaimana - - Dokumentasi - - MDN Meta - - Panduan - - Pemula -translation_of: 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.

- -
Mengapakah MDN membutuhkan alamat email saya?
-
-Alamat email Anda digunakan dalam pemulihan akun dan juga digunakan oleh administrator MDN untuk menghubungi Anda tentang akun atau kegiatan Anda dalam situs web.
-
-Selanjutnya, Anda dapat mendaftar untuk menerima pemberitahuan (seperti pada situs-situs tertentu diubah) serta pesan (misalnya, jika Anda ingin bergabung tim tes beta kami, Anda mungkin menerima email tentang fitur-fitur baru yang membutuhkan tes).
-
-Alamat email Anda tidak akan ditampilkan pada MDN dan akan digunakan mengikuti kebijakan privasi kami saja.
- -
    -
  1. Pada bagian atas tiap halaman MDN Anda dapat menemukan tombol "Masuk melalui". Arahkan mouse Anda pada tombol ini (atau sentuh, jika Anda menggunakan perankat seluler) untuk menampilkan daftar otentikasi layanan yang kami mendukung untuk login ke MDN.
    2. -
  2. Pilih satu layanan login dari yang tersedia ditampilan. Saat ini hanya mendukung layanan melalui akun GitHub. Perlu diingat bahwa jika anda gunakan akun GitHub, profil GitHub Anda akan terhubung dengan halaman profil MDN anda.
    3. -
  3. Ikuti halaman yang mengarah ke halaman masuk akun GitHub tersebut untuk menghubungkan ke akun MDN Anda.
    4. -
  4. Saat layanan otentikasi kembali ke akun MDN, Anda akan diminta untuk mendaftarkan satu nama pengguna dan alamat email. Nama pengguna Anda akan tampil secara publik untuk kredit kerja yang Anda lakukan. Janganlah menggunakan alamat email Anda sebagai nama pengguna.
    5. -
  5. Tekan tombol berlabel Create my MDN profile.
    6. -
  6. Jika alamat email yang Anda masukkan pada langkah 4 tidak sama dengan alamat email yang Anda gunakan dengan layanan otentikasi, silahkan verifikasi email dengan mengecek email Anda dan tekan pada link pada email konfirmasi yang telah dikirim kepada Anda.
    7. -
- -

Begitu saja! Anda telah memiliki akun MDN dan Anda dapat segera menyunting halaman!
-
- Anda bisa klik pada nama Anda di bagian atas setiap halaman MDN untuk melihat profil publik Anda. Dari sana, Anda bisa klik tombol Edit untuk membuat perubahan pada profil atau melakukan penambahan pada profil Anda.

- -
-

Note: Nama pengguna baru tidak boleh berisi spasi atau karakter "@". Ingatlah nama pengguna akan ditampilkan secara publik untuk menunjukkan kreasi yang Anda buat!

-
- -

 

diff --git a/files/id/mdn/contribute/howto/do_a_technical_review/index.html b/files/id/mdn/contribute/howto/do_a_technical_review/index.html deleted file mode 100644 index 7a9ffab8a9..0000000000 --- a/files/id/mdn/contribute/howto/do_a_technical_review/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: How to do a technical review -slug: MDN/Contribute/Howto/Do_a_technical_review -translation_of: 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.

- -

This article describes how to perform a technical review, thereby helping to ensure that MDN's content is accurate.

- -
-
What is the task?
-
Reviewing and correcting the articles for technical accuracy and completeness.
-
Where does it need to be done?
-
In specific articles that are marked as requiring a technical review.
-
What do you need to know to do the task?
-
-
    -
  • Expert knowledge of the topic of the article you are reviewing. If reading the article doesn't teach you anything significantly new, consider yourself an expert.
    • -
  • How to edit a wiki article on MDN.
    • -
-
-
What are the steps to do it?
-
-
    -
  1. Pick an article to review: -
      -
    1. Go to the list of pages that need technical reviews. This lists all the pages for which a technical review has been requested.
      2. -
    2. Choose a page whose topic you are very familiar with.
      3. -
    3. Click on the article link to load the page.
      4. -
    -
    2. -
  2. Read the article, paying close attention to technical details: Is the article correct? Is there anything missing? Don't hesitate to switch to a different page if the first one you choose doesn't suit you.
    3. -
  3. If there are no errors, you don't need to edit the article to mark it as reviewed. Look for the "quick review" box in the left sidebar of the page. This yellow box lists any pending reviews and lets you clear their review request flag. It looks like this if a technical review has been requested:
    - Screenshot of the sidebar's box listing reviews that have been requested and allowing the flags to be changed.
    4. -
  4. Deselect the Technical checkbox, and click Save.
    5. -
  5. If you find errors that need to be corrected, you'll be glad to know that you can also change the review request status from within the editor. Here's the workflow: -
      -
    1. To edit the page, click the Edit button near the top of the page; this puts you into the MDN editor.
      2. -
    2. Fix any technical information is not correct, and/or add any important information that is missing.
      3. -
    3. Enter a Revision Comment at the bottom of the article. This is a brief message that describes what you did, like 'Technical review completed.' If you corrected information, include that in your comment, for example 'Technical review and fixed parameter descriptions.' This helps other contributors and site editors know what you changed and why. You can also mention if there were specific bits that you didn't feel qualfied to review
      4. -
    4. Deselect the Technical box under Review Needed? just below the Revision Comment area of the page.
      5. -
    5. Click the PUBLISH button.
      6. -
    -
    6. -
- -

Congratulations! You've finished your first technical review! Thank you for your help!

-
-
diff --git a/files/id/mdn/contribute/howto/do_an_editorial_review/index.html b/files/id/mdn/contribute/howto/do_an_editorial_review/index.html deleted file mode 100644 index 74aff54886..0000000000 --- a/files/id/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: How to do an editorial review -slug: MDN/Contribute/Howto/Do_an_editorial_review -tags: - - Dokumentasi - - MDN Meta - - Panduan -translation_of: MDN/Contribute/Howto/Do_an_editorial_review ---- -
{{MDNSidebar}}
{{IncludeSubnav("/id/docs/MDN")}}
- -

Ulasan redaksi terdiri dari memperbaiki kesalahan ketik, ejaan, tata bahasa, pemakaian, atau teks yang salah dalam artikel. Tidak semua relawan ahli bahasa, tetapi terlepas dari pengetahuan mereka sangat berkontribusi pada artikel yang berguna, dimana membutuhkan salin-ubah dan koreksi cetakan.

- -

Artikel ini menggambarkan bagaimana cara melakukan ulasan redaksi, dengan demikian membantu memastikan bahwa konten MDN akurat .

- -
-
Apa sih tugasnya?
-
Salin-ubah dan perbaikan cetakan dari artikel yang membutuhkan ulasan redaksi.
-
Dimana ulasan redaksi dikerjakan?
-
Diantara artikel yang sudah ditandai membutuhkan ulasan redaksi.
-
Apa yang harus diketahui untuk menyelesaikan tugas?
-
Baik dalam tata bahasa dan kemampuan eja berbahasa Inggris. Seseorang pengulas redaksi memastikan tata bahasa, ejaan, dan kata dengan benar serta masuk akal, dan berikut juga MDN writing style guide.
-
Apa langkah-langkah untuk melakukannya?
-
-
    -
  1. Pilih artikel yang ingin diulas: -
      -
    1. Ke daftar artikel yang membutuhkan ulasan.  Ini berisi halaman yang diminta untuk diulas.
      2. -
    2. Pilih halaman yang meiliki judul bahasa Inggris dan yang tidak diawali Template: (Template: halaman yang mengandung MDN macro code.)
      3. -
    3. Klik tautan pada artikel untuk menampilkan halaman.
      4. -
    -
    2. -
  2. Baca artikelnya, berikan perhatian pada kesalahan ketik, ejaan, tata bahasa, atau penggunaan kata yang salah. Jangan ragu untuk beralih ke halaman yang berbeda jika pertama yang Anda pilih tidak sesuai dengan Anda .
    3. -
  3. Jika tidak terdapat kesalahan, anda tidak perlu merubah artikel untuk menandakan itu telah diulas. Cari kotak "quick review" di sisi kiri dari halaman:
    - Screenshot of the editorial review request sidebar box
    - Hapus centang pada kotak Editorial dan klik Save.
    4. -
  4. Jika anda menemukan error yang perlu di koreksi: -
      -
    1. Klik tombol Sunting di atas halaman; ini akan membawa anda ke MDN editor.
      2. -
    2. Mengoreksi kesalahan ketik, penulisan, tata bahasa, atau penggunaan kode yang error yang anda temukan. Anda tidak perlu memperbaiki semuanya, tapi pastikan anda meninggalkan permintaan editor review pada halaman yang anda rasa belum sepenuhnya sempurna untuk anda menyelesaikannya hingga keseluruhan artikel.
      3. -
    3. Masukan Revision Comment pada bawah artikel; seperti 'Editorial review: perbaikan salah ketik, tata bahasa & penulisan.' Ini memungkinkan kontributor lain dan editor situs tahu apa yang anda rubah dan kenapa.
      4. -
    4. Hapus centang pada kotak Editorial dibawah Review Needed?. Tepatnya pada bawah komentar revisi pada halaman.
      5. -
    5. Klik tombol Publish.
      6. -
    -
    5. -
- -
-

Perubahan yang anda buat mungkin tidak langsung di tampilkan setelah disimpan; disini ada rentang waktu ketika halaman di proses dan disimpan.

-
-
-
diff --git a/files/id/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/id/mdn/contribute/howto/set_the_summary_for_a_page/index.html deleted file mode 100644 index ad89ef0686..0000000000 --- a/files/id/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: How to set the summary for a page -slug: MDN/Contribute/Howto/Set_the_summary_for_a_page -translation_of: 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.

- - - - - - - - - - - - - - - - - - - -
What is the task?Marking the text within a page that should be used as its summary in other contexts; this task might include writing appropriate text if needed.
Where does it need to be done?In pages that lack a summary or have a less-than-great summary.
What do you need to know to do the task?Ability to use the MDN editor; good English writing skills; enough familiarity with the topic of the page to write a good summary.
What are the steps to do it? -
    -
  1. Pick a page on which to set the summary: -
      -
    1. In the MDN documentation status page, click the link under Sections for a topic that you know something about (for example, HTML).
      2. -
    2. On the topic's documentation status page, click the Pages header in the Summary table. This takes you to an index of all the pages in that topic section; it shows the page links in the left column, and the tags and summaries in the right column.
      3. -
    3. Pick a page that is missing a summary, or that has a poor summary.
      4. -
    4. Click the link to go to that page.
      5. -
    -
    2. -
  2. Click Edit to open the page in the MDN editor.
    3. -
  3. Look for a sentence or two that works as a summary out of context. If needed, edit the existing content to create or modify sentences to be a good summary.
    4. -
  4. Select the text to be used as a summary.
    5. -
  5. In the Styles widget of the editor toolbar, select SEO Summary. (In the page source, this creates a {{HTMLElement("span")}} element with class="seoSummary" around the selected text.)
    6. -
  6. Save your changes with a revision comment like "Set the page summary."
    7. -
-
-

 

-

 

-

 

diff --git a/files/id/mdn/contribute/tugas/index.html b/files/id/mdn/contribute/tugas/index.html deleted file mode 100644 index bc96bb783f..0000000000 --- a/files/id/mdn/contribute/tugas/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Tugas untuk dilakukan di MDN -slug: MDN/Contribute/Tugas -tags: - - Dokumentasi - - MDN - - Panduan - - Proyek MDC -translation_of: MDN/Contribute/Getting_started -translation_of_original: MDN/Contribute/Tasks ---- -
{{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.

- -

Ada banyak hal yang bisa anda lakukan untuk membantu MDN. Kami punya panduan untuk tugas yang ingin anda lakukan pada artikel Memulai MDN. Berikut caranya: 

- - - -

Untuk ide lebih lanjut bagaimana anda bisa membantu dengan MDN, lihat Panduan kami. Anda bisa mencari daftar kategori dari halaman yang anda butuhkan untuk membantu pada bagian  Status Dokumen.

diff --git a/files/id/mdn/komunitas/conversations/index.html b/files/id/mdn/komunitas/conversations/index.html deleted file mode 100644 index d39080c8a3..0000000000 --- a/files/id/mdn/komunitas/conversations/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: MDN community conversations -slug: MDN/Komunitas/Conversations -tags: - - Komunitas - - MDN Meta - - Panduan -translation_of: MDN/Community/Conversations ---- -
{{MDNSidebar}}

"Pekerjaan" dari MDN terjadi di situs MDN, tetapi "Komunitas" juga juga melakukannya melalui diskusi (tidak tersinkronisasi) dan chatting serta meeting (tersinkronisasi)

- -

Diskusi Tidak Tersinkronisasi

- -

Untuk berbagi informasi dan berdiskusi, MDN memiliki kategori sendiri ("MDN") di forum Wacana Mozilla. Gunakan kategori ini untuk semua topik yang terkait dengan MDN, termasuk pembuatan konten dokumentasi, terjemahan, dan perawatan; Pengembangan platform MDN; Dan perencanaan, penetapan tujuan, dan pelacakan kemajuan.

- - - -

Arsip sejarah

- -

Sebelum Juni 2017, diskusi terkait MDN berlangsung dalam daftar surat yang dikirimkan dan diarsipkan dengan kelompok Google. Jika Anda ingin mencari diskusi terakhir ini, Anda dapat melihat grup Google yang sesuai dengan milis lama. (Ya, kita tahu nama-nama ini tumpang tindih dan membingungkan. Kecelakaan pada masa sebelumnya. maafkan hal ini.)

- -
-
mozilla.dev.mdc a.k.a. dev-mdc
-
Daftar ini untuk diskusi tentang konten dokumentasi di MDN.
-
mozilla.dev.mdn a.k.a. dev-mdn
-
Daftar ini adalah tentang pengembangan pekerjaan pada platform Kuma yang mendasari MDN.
-
mozilla.mdn a.k.a mdn@
-
Forum ini untuk diskusi perencanaan dan prioritas tingkat tinggi, untuk situs web MDN dan prakarsa terkait lainnya.
-
- -

Obrolan di IRC

- -

Internet Relay Chat (IRC) adalah Metode yang kami pilih untuk obrolan harian dan diskusi real-time antar anggota komunitas. Kami menggunakan beberapa saluran (channel) pada irc.mozilla.org server untuk diskusi terkait dengan MDN.

- -
-
#mdn
-
channel ini adalah channel utama kami untuk mendiskusikan konten MDN. Kami berbicara tentang menulis, mengatur konten, dan sebagainya. Kami juga memiliki percakapan "water cooler" disini - Ini adalah cara komunitas kami tetap terhubung atau sekedar hang out. Ini juga merupakan tempat untuk berbicara tentang aspek-aspek lain dari MDN (selain pengembangan platform), seperti Demo Studio, profil, dan sebagainya
-
#mdndev
-
Channel ini adalah di mana tim pengembang kami - orang yang menulis kode atau yang membuat MDN bekerja - hang out dan membahas pekerjaan mereka sehari-hari. Kamu dipersilakan untuk bergabung dan berpartisipasi dalam pengembangan atau hanya bertanya tentang masalah yang kamu lihat tentang software
-
- -

Channel ini sangat aktif selama hari kerja di Amerika Utara.

- -

Anda mungkin ingin mempelajari lebih lanjut tentang IRC dan menggunakan instalan IRC client seperti ChatZilla. Hal ini dijalankan sebagai Firefox add-on, yang membuatnya cepat dan mudah untuk menginstal dan menggunakan. Jika Anda tidak terbiasa dengan IRC, cara mudah untuk bergabung menggunakan klien IRC berbasis web seperti scrollback, yang merupakan pra-dikonfigurasi dengan mdn dan mandev saluran.

- -

Join our meetings (and other events)

- -

The MDN team holds a number of regular meetings that are open to the MDN community. See the MDN Meetings page on the Mozilla wiki for details on the schedule, agendas and notes, and info on how to join.

- -

See the MDN Events calendar for these and other meetings, local meetups, and other events. The recurring meetings are summarized on the MDN Meetings wiki page.

- -

See the MDN Events calendar for these and other meetings, doc sprints, and other events. The recurring meetings are summarized on the MDN Meetings wiki page.

diff --git a/files/id/mdn/komunitas/index.html b/files/id/mdn/komunitas/index.html deleted file mode 100644 index a60c631f76..0000000000 --- a/files/id/mdn/komunitas/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Gabung di Komunitas MDN -slug: MDN/Komunitas -translation_of: MDN/Community ---- -
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

Ringkasan

- -
-

MDN (yang merupakan singkatan dari jaringan pengembang Mozilla) lebih dari wiki: Ini adalah komunitas pengembang bekerja sama untuk membuat MDN sumber daya yang luar biasa bagi para pengembang yang menggunakan teknologi Web terbuka. "Pekerjaan" yang terjadi di situs MDN, tapi "komunitas" juga terjadi melalui (asynchronous) diskusi dan (sinkron) chat online.

-
- -

Kami akan senang jika kamu berkonstribusi di MDN, tapi kami akan lebih senang jika kamu berpartisipasi didalam komunitas MDN. Berikut adalah cara untuk bisa terhubung, ada tiga langkah mudah:

- -
    -
  1. Buat akun MDN.
    2. -
  2. Berlangganan diskusi dev-mdc.
    3. -
  3. masuk ke IRC.
    4. -
- -

Buat akun MDN

- -

{{page("/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account") }}

- -

Bergabung milis kami

- -

untuk berbagi informasi dan memiliki diskusi yang sedang berlangsung, Mozilla memilki beberapa milis yang berguna. Berikut yang khusus untuk MDN adalah:

- -
-
dev-mdc
-
Daftar ini adalah di mana kita memiliki diskusi yang sedang berlangsung tentang dokumentasi di MDN. Kami berbicara tentang perubahan proses, perbaikan yang kami buat, dan kami memilah-milah siapa yang ingin bekerja di mana konten. Ini sangat disarankan agar Anda bergabung di daftar ini jika Anda tertarik serius menyelam ke dokumentasi di MDN!
-
dev-mdn
-
Daftar ini adalah di mana kita memegang diskusi tentang pekerjaan pengembangan pada platform Kuma yang mendasari MDN ini. Jika anda penasaran tentang pekerjaan pengembangan yang terjadi di belakang layar, ingin terlibat dalam proses pembuatan decsisions tentang platform, atau bekerja pada patch untuk memperbaiki platform, Anda pasti harus terlibat dalam daftar ini.
-
mdn-drivers
-
Milis ini digunakan untuk membantu memutuskan prioritas pengembangan MDN. ini umumnya digunakan untuk diskusi apa yang harus dikerjakan selanjutnya, dan di mana kami pergi untuk menarik perhatian tim pengembangan ketika sebuah masalah serius perlu diperbaiki, setelah kita mengajukan bug untuk masalah ini.
-
- -

Ada juga beberapa daftar khusus untuk masyarakat lokalisasi MDN. Jika komunitas anda sangat besar dan aktif, anda mungkin bisa mendapatkan daftar dibuat untuk komunitas anda; hanya meminta kami dan kami akan melihat ke dalamnya. Saat ini, bahasa ini memiliki daftar: Spanyol, Jepang dan Portugis.

- -

Mengapa "dev-mdc"? Di masa lalu, ini dikenal sebagai "Mozilla Developer Center", atau MDC. Milis berawal dari masa itu, jadi dev-mdc. Ada juga dev-mdn mailing list, yaitu untuk diskusi tentang pengembangan platform Kuma yang MDN berjalan pada. Anda dipersilakan untuk bergabung itu juga, tapi itu tidak diperlukan jika Anda hanya tertarik pada konten MDN.

- -

Masuk ke IRC

- -

Internet Relay Chat (IRC) adalah metode pilihan untuk hari-hari chatting dan waktu nyata diskusi di antara anggota masyarakat. Kami menggunakan beberapa saluran pada irc.mozilla.org server untuk diskusi yang berkaitan dengan MDN.

- -
-
#mdn
-
Saluran ini merupakan saluran utama untuk mendiskusikan konten MDN. Kami membahas tentang tulisan, organisasi konten dan sebagainya. Kami juga memiliki "air pendingin" dalam percakapan kami di sini - sebagai cara komunitas kami berbagi dan saling berhubungan. Juga sebagai tempat untuk membicarakan  aspek lain dari MDN (lebih dari pengembangan platform), semisal Studio Tampil, profile dan sebagainya.
-
#mdndev
-
Saluran ini adalah di mana tim-pengembangan kami orang yang menulis kode yang membuat MDN kerja-hang out dan membahas pekerjaan mereka sehari-hari. Anda dipersilakan untuk bergabung dan baik berpartisipasi dalam pembangunan atau hanya bertanya tentang masalah yang Anda lihat dengan perangkat lunak.
-
- -

Saluran ini yang paling mungkin untuk menjadi aktif selama hari kerja di Amerika Utara.

- -

Jika Anda tidak terbiasa dengan IRC, Cara tercepat untuk bergabung menggunakan Scrollback - a web-based IRC client yang pra-dikonfigurasi dengan mdn dan mdndev channel. Anda juga mungkin ingin Belajar tentang IRC dan menggunakan IRC client diinstal seperti ChatZilla. Hal ini dilaksanakan sebagai Firefox add-on, yang membuatnya cepat dan mudah untuk menginstal dan menggunakan.

- -

Join our biweekly meetings (and other events)

- -

Every other week, the MDN community holds an IRC-based meeting to exchange notes, talk about what we've been doing, and sort out what we'd like to do for the next two weeks. We also talk about development plans for the MDN platform itself, and often get updates about new and upcoming features of the site. These are casual, fun meetings, and everyone's welcome to participate.

- -

See the MDN Community Meetings page on the Mozilla wiki for details on the schedule as well as agendas and notes for past and upcoming meetings.

- -

See the MDN Events calendar for these and other meetings, doc sprints, and other events.

- -

Project administrators

- -

kamu dapat menghubungi MDN project administrator melalui email. BIla kamu ingin berbicara dengan pemimpin MDN documentation, ia bernama {{UserLink("Sheppy", "Eric Shepherd")}}, dan ia senang untuk menjawab pertanyaan yang kamu ajukan, atau membantu mencarikan orang yang lebih tepat.

- -

Langkah Berikutnya

- - diff --git a/files/id/mdn/tools/index.html b/files/id/mdn/tools/index.html new file mode 100644 index 0000000000..7703e98dd1 --- /dev/null +++ b/files/id/mdn/tools/index.html @@ -0,0 +1,14 @@ +--- +title: MDN user guide +slug: MDN/User_guide +tags: + - Documentation + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Tools +translation_of_original: 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/mdn/user_guide/index.html b/files/id/mdn/user_guide/index.html deleted file mode 100644 index 7703e98dd1..0000000000 --- a/files/id/mdn/user_guide/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: MDN user guide -slug: MDN/User_guide -tags: - - Documentation - - Landing - - MDN - - NeedsTranslation - - TopicStub -translation_of: MDN/Tools -translation_of_original: 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/mdn/user_guide/menghapus_halaman/index.html b/files/id/mdn/user_guide/menghapus_halaman/index.html deleted file mode 100644 index df0ba8ef81..0000000000 --- a/files/id/mdn/user_guide/menghapus_halaman/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Menghapus Halaman -slug: MDN/User_guide/Menghapus_halaman -tags: - - MDN - - Panduan - - Proyek MDC -translation_of: MDN/Tools/Page_deletion ---- -
{{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:

-
    -
  1. Jangan hapus atau mengganti konten dari halaman. Kami ingin memiliki catatan dari halaman seperti pertama dihapus.
    2. -
  2. Tambahkan label "sampah" di halaman tersebut. Jangan hapus label lainnya.
    3. -
  3. Jika halaman tersebut sangat mendesak untuk segera dihapus (Sebagai contoh, konten berisi hal yang tidak sopan, penghinaan, atau secara teknis berbahaya), beritahukan pada admin MDN.
    4. -
-

Admin akan menghapus halaman tersebut jika memungkinkan, setelah mengkonfirmasi bahwa penghapusan tersebut boleh dilakukan.

diff --git a/files/id/mozilla/add-ons/webextensions/apa_itu_webextensions/index.html b/files/id/mozilla/add-ons/webextensions/apa_itu_webextensions/index.html deleted file mode 100644 index 63c093bc53..0000000000 --- a/files/id/mozilla/add-ons/webextensions/apa_itu_webextensions/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Apa itu WebExtensions? -slug: Mozilla/Add-ons/WebExtensions/Apa_Itu_WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions ---- -
{{AddonSidebar}}
- -

Add-ons memperluas dan memodifikasi fungsi dari web browser. Mereka ditulis menggunakan teknologi Web standar - JavaScript, HTML, dan CSS - ditambah beberapa API JavaScript. Antara lain, add-ons dapat menambahkan fitur baru untuk browser atau mengubah tampilan atau konten dari situs web tertentu.

- -

WebExtensions adalah sistem cross-browser untuk mengembangkan browser add-ons. Untuk sebagian besar API tersebut kompatibel dengan ekstensi API yang didukung oleh Google Chrome dan Opera. Ekstensi ditulis untuk browser ini dalam banyak kasus akan berjalan di Firefox atau Microsoft Edge hanya dengan beberapa perubahan. API ini juga sepenuhnya kompatibel dengan multiprocess Firefox.

- -

Kami juga berniat untuk memperpanjang API untuk mendukung kebutuhan para pengembang, jadi jika Anda memiliki ide, kami akan senang mendengar mereka. Anda dapat menghubungi kami dev-addons mailing list atau #webextensions di IRC.

- -

Sebelum WebExtensions, Anda bisa mengembangkan Firefox add-ons menggunakan salah satu dari tiga sistem yang berbeda: XUL/XPCOM overlays, bootstrapped extensions, atau Add-on SDK. Di masa depan, WebExtensions akan menjadi cara yang direkomendasikan untuk mengembangkan add-ons pada Firefox, dan sistem lainnya akan dihentikan.

- -

Apa berikutnya?

- - diff --git a/files/id/mozilla/add-ons/webextensions/api/notifications/index.html b/files/id/mozilla/add-ons/webextensions/api/notifications/index.html new file mode 100644 index 0000000000..e4fb084bb2 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/api/notifications/index.html @@ -0,0 +1,62 @@ +--- +title: notifikasi +slug: Mozilla/Add-ons/WebExtensions/API/notifikasi +tags: + - API + - Add-ons + - Ekstensi + - Notifikasi + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/notifications +--- +
{{AddonSidebar}}
+ +

Tampilkan pemberitahuan kepada pengguna, menggunakan mekanisme pemberitahuan sistem operasi yang mendasarinya. Karena API ini menggunakan mekanisme pemberitahuan sistem operasi, detail tentang bagaimana pemberitahuan muncul dan berperilaku mungkin berbeda sesuai dengan sistem operasi dan pengaturan pengguna.

+ +

Untuk menggunakan API ini Anda harus memiliki izin "notifikasi"

+ +

Tipe

+ +
+
{{WebExtAPIRef("notifications.NotificationOptions")}}
+
Menentukan isi pemberitahuan.
+
{{WebExtAPIRef("notifications.TemplateType")}}
+
Jenis pemberitahuan. Misalnya, ini menentukan apakah pemberitahuan dapat memuat gambar.
+
+ +

Fungsi

+ +
+
{{WebExtAPIRef("notifications.clear()")}}
+
Hapus pemberitahuan khusus, berikan ID-nya.
+
{{WebExtAPIRef("notifications.create()")}}
+
Buat dan tampilkan pemberitahuan baru.
+
{{WebExtAPIRef("notifications.getAll()")}}
+
Dapatkan semua notifikasi.
+
{{WebExtAPIRef("notifications.update()")}}
+
Perbarui notifikasi
+
+ +

Events

+ +
+
{{WebExtAPIRef("notifications.onButtonClicked")}}
+
Dipecat ketika pengguna mengklik tombol di notifikasi.
+
{{WebExtAPIRef("notifications.onClicked")}}
+
Dipecat ketika pengguna mengklik pemberitahuan, tetapi tidak pada tombol.
+
{{WebExtAPIRef("notifications.onClosed")}}
+
Dipecat ketika pemberitahuan ditutup, baik oleh sistem atau karena pengguna memecatnya.
+
{{WebExtAPIRef("notifications.onShown")}}
+
Dipecat segera setelah pemberitahuan telah ditampilkan.
+
+ +

Kompatibilitas peramban

+ +

{{Compat("webextensions.api.notifications")}}

+ +

{{WebExtExamples("h2")}}

+ +
Ucapan terima kasih + +

API ini berdasarkan pada API Chromium chrome.notifications.

+
diff --git a/files/id/mozilla/add-ons/webextensions/api/notifikasi/index.html b/files/id/mozilla/add-ons/webextensions/api/notifikasi/index.html deleted file mode 100644 index e4fb084bb2..0000000000 --- a/files/id/mozilla/add-ons/webextensions/api/notifikasi/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: notifikasi -slug: Mozilla/Add-ons/WebExtensions/API/notifikasi -tags: - - API - - Add-ons - - Ekstensi - - Notifikasi - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/API/notifications ---- -
{{AddonSidebar}}
- -

Tampilkan pemberitahuan kepada pengguna, menggunakan mekanisme pemberitahuan sistem operasi yang mendasarinya. Karena API ini menggunakan mekanisme pemberitahuan sistem operasi, detail tentang bagaimana pemberitahuan muncul dan berperilaku mungkin berbeda sesuai dengan sistem operasi dan pengaturan pengguna.

- -

Untuk menggunakan API ini Anda harus memiliki izin "notifikasi"

- -

Tipe

- -
-
{{WebExtAPIRef("notifications.NotificationOptions")}}
-
Menentukan isi pemberitahuan.
-
{{WebExtAPIRef("notifications.TemplateType")}}
-
Jenis pemberitahuan. Misalnya, ini menentukan apakah pemberitahuan dapat memuat gambar.
-
- -

Fungsi

- -
-
{{WebExtAPIRef("notifications.clear()")}}
-
Hapus pemberitahuan khusus, berikan ID-nya.
-
{{WebExtAPIRef("notifications.create()")}}
-
Buat dan tampilkan pemberitahuan baru.
-
{{WebExtAPIRef("notifications.getAll()")}}
-
Dapatkan semua notifikasi.
-
{{WebExtAPIRef("notifications.update()")}}
-
Perbarui notifikasi
-
- -

Events

- -
-
{{WebExtAPIRef("notifications.onButtonClicked")}}
-
Dipecat ketika pengguna mengklik tombol di notifikasi.
-
{{WebExtAPIRef("notifications.onClicked")}}
-
Dipecat ketika pengguna mengklik pemberitahuan, tetapi tidak pada tombol.
-
{{WebExtAPIRef("notifications.onClosed")}}
-
Dipecat ketika pemberitahuan ditutup, baik oleh sistem atau karena pengguna memecatnya.
-
{{WebExtAPIRef("notifications.onShown")}}
-
Dipecat segera setelah pemberitahuan telah ditampilkan.
-
- -

Kompatibilitas peramban

- -

{{Compat("webextensions.api.notifications")}}

- -

{{WebExtExamples("h2")}}

- -
Ucapan terima kasih - -

API ini berdasarkan pada API Chromium chrome.notifications.

-
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 new file mode 100644 index 0000000000..63c093bc53 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,34 @@ +--- +title: Apa itu WebExtensions? +slug: Mozilla/Add-ons/WebExtensions/Apa_Itu_WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +
{{AddonSidebar}}
+ +

Add-ons memperluas dan memodifikasi fungsi dari web browser. Mereka ditulis menggunakan teknologi Web standar - JavaScript, HTML, dan CSS - ditambah beberapa API JavaScript. Antara lain, add-ons dapat menambahkan fitur baru untuk browser atau mengubah tampilan atau konten dari situs web tertentu.

+ +

WebExtensions adalah sistem cross-browser untuk mengembangkan browser add-ons. Untuk sebagian besar API tersebut kompatibel dengan ekstensi API yang didukung oleh Google Chrome dan Opera. Ekstensi ditulis untuk browser ini dalam banyak kasus akan berjalan di Firefox atau Microsoft Edge hanya dengan beberapa perubahan. API ini juga sepenuhnya kompatibel dengan multiprocess Firefox.

+ +

Kami juga berniat untuk memperpanjang API untuk mendukung kebutuhan para pengembang, jadi jika Anda memiliki ide, kami akan senang mendengar mereka. Anda dapat menghubungi kami dev-addons mailing list atau #webextensions di IRC.

+ +

Sebelum WebExtensions, Anda bisa mengembangkan Firefox add-ons menggunakan salah satu dari tiga sistem yang berbeda: XUL/XPCOM overlays, bootstrapped extensions, atau Add-on SDK. Di masa depan, WebExtensions akan menjadi cara yang direkomendasikan untuk mengembangkan add-ons pada Firefox, dan sistem lainnya akan dihentikan.

+ +

Apa berikutnya?

+ + diff --git a/files/id/mozilla/developer_guide/index.html b/files/id/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..f1a8f48168 --- /dev/null +++ b/files/id/mozilla/developer_guide/index.html @@ -0,0 +1,145 @@ +--- +title: Developer Guide +slug: Developer_Guide +tags: + - Developing Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/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.

+ + + + + + + +
+

Documentation topics

+
+
+ Getting Started
+
+ A step-by-step beginner's guide to getting involved with Mozilla.
+
+
+
+ Working with Mozilla Source Code
+
+ A code overview, how to get the code, and the coding style guide.
+
+ Build Instructions
+
+ How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.
+
+ Development process overview
+
+ An overview of the entire Mozilla development process.
+
+ Managing multiple profiles
+
+ When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.
+
+ Automated Testing
+
+ How to run Mozilla's automated tests, and how to write new tests.
+
+ How to submit a patch
+
+ After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.
+
+ Getting documentation updated
+
+ How to ensure that documentation is kept up to date as you develop.
+
+ Mozilla modules and module ownership
+
+ This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.
+
+ Code snippets
+
+ Useful code samples for a wide variety of things you might need to figure out how to do.
+
+ Mozilla development strategies
+
+ Tips for how to make the most of your time working on the Mozilla project.
+
+ Debugging
+
+ Find helpful tips and guides for debugging Mozilla code.
+
+ Performance
+
+ Performance guides and utilities to help you make your code perform well (and to play nicely with others).
+
+ The Mozilla platform
+
+ Information about the workings of the Mozilla platform.
+
+ Adding APIs to the navigator object {{ gecko_minversion_inline("9.0") }}
+
+ How to augment the {{ domxref("window.navigator") }} object with additional APIs.
+
+ Interface Compatibility
+
+ Guidelines for modifying scriptable and binary APIs in Mozilla.
+
+ Customizing Firefox
+
+ Information about creating customized versions of Firefox.
+
+ Virtual ARM Linux environment
+
+ How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.
+
+ Obsolete Build Caveats and Tips
+
+ A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.
+
+ 		+

Tools

+
+
+ Bugzilla
+
+ The Bugzilla database used to track issues for Mozilla projects.
+
+ MXR
+
+ Browse and search the Mozilla source code repository on the Web.
+
+ Bonsai
+
+ The Bonsai tool lets you find out who changed what file in the repository, and when they did it.
+
+ Mercurial
+
+ The distributed version-control system used to manage Mozilla's source code.
+
+ Tinderbox
+
+ Tinderbox shows the status of the tree (whether or not it currently builds successfully).  Check this before checking in and out, to be sure you're working with a working tree.
+
+ Crash tracking
+
+ Information about the Socorro and Talkback crash reporting systems.
+
+ Performance tracking
+
+ See performance information for Mozilla projects.
+
+ Callgraph
+
+ A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.
+
+ Developer forums
+
+ A topic-specific list of discussion forums where you can talk about Mozilla development issues.
+
+ Mozilla Platform Development Cheat Sheet
+
+ Brian Bondy's list of frequently referenced information for platform developers.
+
+
+

 

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 new file mode 100644 index 0000000000..8465f45f06 --- /dev/null +++ b/files/id/mozilla/developer_guide/virtual_arm_linux_environment/index.html @@ -0,0 +1,77 @@ +--- +title: Virtual ARM di Lingkungan Linux +slug: Developer_Guide/Virtual_ARM_di_Lingkungan_Linux +tags: + - ARM Linux + - Mengembangkan Mozilla + - Mobile + - Pengujian + - SSH + - Virtual ARM +translation_of: Mozilla/Developer_guide/Virtual_ARM_Linux_environment +--- +

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.

+

Prasyarat

+

Petunjuk ini mengasumsikan sistem host yang Anda gunakan adalah Ubuntu Linux juga karena memudahkan kita untuk memasang  perangkat lunak yang diperlukan dari repositori luar.

+

Target board/CPU

+

QEMU mendukung beberapa board dan CPU. Dari semua yang Saya uji, saya hanya bisa mendapatkan Versatile Express board untuk bekerja dengan lebih dari 256 MB RAM, itulah kenapa kita akan menggunakan board ini. Untuk target CPU, Saya menguji dengan Cortex A9 saja (ARMv7).

+

Instalasai perangkat lunak yang dibutuhkan

+
# Tambahkan repositori Linaro, termasuk peralatan mereka dan yang lebih baru
+# versi dari qemu (Anda memerlukan setidaknya qemu 0.15*).
+sudo add-apt-repository ppa:linaro-maintainers/tools
+# Memasang peralatan linaro dan qemu
+sudo apt-get install linaro-image-tools qemu-user-static qemu-system
+
+# Jika Anda ingin mendapatkan cross-compile pada host, pasang juga perangkat ini
+sudo apt-get install gcc-arm-linux-gnueabi g++-arm-linux-gnueab
+

Mengunduh rilis Linaro dan paket perangkat keras

+

Anda dapat menemukan rilis yang cocok dan paket perangkat lunak tarball pada halaman rilis linaro. Beberapa dari itu mungkin bekerja, atau mungkin tidak. Saya menggunakan dua link dibawah ini yang bekerja dengan baik untuk Saua I used the two links below that worked fine for me.

+
wget http://releases.linaro.org/platform/linaro-n/nano/alpha-3/linaro-natty-nano-tar-20110302-0.tar.gz
+wget http://releases.linaro.org/platform/linaro-n/hwpacks/alpha-3/hwpack_linaro-vexpress_20110302-0_armel_supported.tar.gz
+
+

Membuat image

+

''(Langkah-langkah berikut kita pinjam dari https://wiki.linaro.org/PeterMaydell...rsatileExpress dan sedikit dimodifikasi).'' Menggunakan peralatan linaro, Anda dapat dengan mudah membuat SD card image dari paket unduhan (ini akan memakan waktu cukup lama):

+
linaro-media-create --image_file vexpress.img --dev vexpress \
+  --binary linaro-natty-nano-tar-20110302-0.tar.gz \
+  --hwpack hwpack_linaro-vexpress_20110302-0_armel_supported.tar.gz
+
+

Mengekstart kernel dan initrd

+

Image yang dubuat juga berisi kernel dan initrd dari mesin kita. Kita memerlukan kedua file meskipun itu diluar image. Perintah berikut untuk mount image ke "/mnt/tmp":

+
sudo mount -o loop,offset="$(file vexpress.img | awk 'BEGIN { RS=";"; } /partition 2/ { print $7*512; }')" \
+  -t auto vexpress.img /mnt/tmp
+
+

Sekarang salin kernel dan initrd file ke direktori saat ini (CATATAN: Nama file dapat berbeda disetiap pembuatan!):

+
cp /mnt/tmp/vmlinuz-2.6.38-1000-linaro-vexpress .
+cp /mnt/tmp/initrd.img-2.6.38-1000-linaro-vexpress .
+# Buat beberapa symlink untuk memudahkan
+ln -s vmlinuz-2.6.38-1000-linaro-vexpress vmlinuz
+ln -s initrd.img-2.6.38-1000-linaro-vexpress initrd.img
+
+

Memulai QEMU

+

Anda dapat memulai QEMU sekarang dengan perintah berikut:

+
qemu-system-arm -M vexpress-a9 -cpu cortex-a9 -kernel ./vmlinuz \
+  -initrd ./initrd.img -redir tcp:2200::22 -m 512 \
+  -append "root=/dev/mmcblk0p2 vga=normal mem=512M devtmpfs.mount=0 rw" \
+  -drive file=vexpress.img,if=sd,cache=writeback
+
+

Bebrapa penjelasan dari opsi yang tidak jelas pada perintah diatas:

+ +

Setelah memulai mesin, Anda akan bertemu dengan Linux shell dalam layar QEMU setelah beberapa waktu startup

+

Menggunakan SSH

+

Untuk menggunakan SSH, Anda harus terlebih dahulu mengaktifkan jaringan dan memasang paket SSH servere. Mengaktifkan jaringan untuk sementara menggunakan perintah berikut:

+
ifconfig eth0 up
+dhclient eth0
+
+

Sekarang coba pasang SSH:

+
apt-get install openssh-server
+
+

Untuk membuat jaringan berubah menjadi permanen, edit file ''/etc/network/interfaces'' (e.g. dengan ''vi'') dan tambahkan baris berikut:

+
auto eth0
+iface eth0 inet dhcp
+
+

Terakhir, tentukan password untuk root menggunakan perintah ''passwd''. Sekarang jalankan ulang mesin dan lihat apakah Anda bisa melakukan SSH menggunakan ''ssh -p2200 root@localhost'' pada mesin host.

diff --git a/files/id/orphaned/learn/how_to_contribute/index.html b/files/id/orphaned/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..0a64757fc1 --- /dev/null +++ b/files/id/orphaned/learn/how_to_contribute/index.html @@ -0,0 +1,108 @@ +--- +title: Cara berkontribusi untuk Area Belajar di MDN +slug: Learn/How_to_contribute +tags: + - Dokumentasi + - MDN + - MDN Meta + - Proyek MDC + - belajar + - kontribusi +translation_of: Learn/How_to_contribute +--- +

{{LearnSidebar}}

+ +

Jika Anda berada disini, itu mungkin karena Anda tertarik berkontribusi dalam Area Belajar MDN. Itu berita bagus!

+ +

Pada halaman ini, Anda akan menemukan semua hal yang Anda butuhkan untuk mulai membantu menigkatkan konten pembelajaran MDN. Ada banyak hal yang dapat Anda lakukan, tergantung pada seberapa waktu yang anda miliki dan apakah Anda seorang pemula, seorang pengembang web, atau seorang guru.

+ +
+

Catatan: Jika Anda telah menjadi kontributor MDN, jangan ragu untuk memeriksa ulang halaman status dokumentasi untuk melacak pekerjaan yang sudah dilakukan dan melihat apa yang menjadi prioritas menulis.

+
+ +
+

Catatan: Kontributor menggunakan Trello board untuk mengorganisir diri. Jika Anda ingin menggunakannya, hanya dengan membuat akun Trello dan ping Jeremie untuk memberikan Anda akses tulis ke papan.

+
+ +

Saya seorang pemula

+ +

Mengagumkan! Pemula sangat penting untuk menciptakan dan memberikan umpan balik pada materi pembelajaran. Anda memiliki perspektif yang unik pada artikel ini sebagai bagian dari target pengunjung, yang dapat membuat Anda menjadi Anggota yang sangat berharga dari tim kami. memang, jika Anda menggunakan salah satu artikel kami untuk mempelajari sesuatu dan Anda terjebak, atau menemukan artikel yang membingungkan dalam berbagai cara, Anda dapat memperbaikinya atau biarkan kami tahu tentang masalahnya sehingga kami dapat memperbaikinya.

+ +

Kontribusi juga merupakan cara yang bagus untuk bersenang-senang sambil belajar hal-hal baru. Jika Anda pernah merasa kebingungan atau memiliki pertanyaan, jangan ragu untuk menghubungi kami di mailing list kami atau Saluran IRC (lihat di bagian bawah halaman ini untuk rincian).
+
+ Berikut adalah beberapa cara yang disarankan untuk Anda dapat berkontribusi:

+ +
+
Tambahkan tag ke artikel kami (5 menit)
+
Pemberian tag konten MDN adalah salah satu cara termudah untuk berkontribusi MDN. Seperti banyak fitur kami menggunakan tag untuk membantu menyajikan informasi dalam konteks, membantu dengan pemberian tag merupakan kontribusi yang sangat berharga. Lihatlah daftar istilah dan artikel pembelajaran tanpa tag untuk memulai.
+
Membaca dan meninjau daftar istilah (15 menit)
+
Sebagai pemula, kita perlu mata segar Anda untuk melihat konten kami. Jika Anda menemukan entri glossary yang sulit untuk dipahami, itu berarti bahwa entrinya perlu ditingkatkan. Jangan ragu untuk membuat perubahan yang Anda anggap perlu. Jika Anda tidak berpikir Anda memiliki keterampilan yang diperlukan untuk mengedit entri sendiri, setidaknya memberitahu kami di mailing list kami.
+
Menulis daftar istilah baru (1 jam)
+
Ini adalah cara yang paling efektif untuk belajar sesuatu yang baru. Pilih sebuah konsep yang ingin  Anda pahami, dan saat Anda belajar tentang hal itu, tulislah daftar istilah tentang hal itu. Menjelaskan sesuatu kepada orang lain adalah cara yang bagus untuk "memperbaiki" pengetahuan ke dalam otak Anda, dan membantu Anda memahami diri sendiri, sambil membantu orang lain. Setiap orang menang!
+
Membaca dan meninjau artikel pembelajaran (2 jam)
+
Hal ini sangat mirip meninjau daftar istilah (lihat di atas); itu hanya membutuhkan waktu lebih lama, karena artikel ini biasanya sedikit lebih lama.
+
+ +

Saya seorang pengembang web

+ +

Fantastis! Keterampilan teknis Anda adalah apa yang kami butuhkan untuk memastikan kami menyediakan konten teknis yang akurat untuk pemula. Karena ini adalah bagian tertentu dari MDN didedikasikan untuk belajar Web, pastikan penjelasan Anda sesederhana mungkin, tanpa begitu sederhana itu tidak akan berguna. Ini lebih penting untuk dimengerti daripada menjadi terlalu tepat.

+ +
+
Membaca dan meninjau daftar istilah (15 menit)
+
Sebagai pengembang web, kita perlu Anda untuk memastikan konten kami secara teknis akurat tanpa terlalu bertele-tele. Jangan ragu untuk membuat perubahan yang Anda anggap perlu. Jika Anda ingin mendiskusikan isi sebelum mengedit, ping kami di mailing list kami atau Saluran IRC.
+
Menulis daftar istilah baru (1 jam)
+
Menjelaskan istilah teknis merupakan cara yang sangat baik untuk belajar menulis yang akurat sekaligus sederhana secara teknis. Para pemula akan berterima kasih kepada Anda atas hal ini. Kami memiliki banyak istilah yang belum terdefinisikan, yang membutuhkan perhatian Anda. Pilih salah satu dan kerjakan.
+
Membaca dan meninjau artikel pembelajaran (2 jam)
+
Ini adalah hal yang sama seperti meninjau entri glossary (lihat di atas); hanya saja membutuhkan sedikit lebih banyak waktu karena artikelnya sedikit panjang.
+
Menulis artikel pembelajaran baru (4 jam)
+
MDN kurang artikel sederhana tentang menggunakan teknologi web (HTML, CSS, JavaScript, dll). Kami juga memiliki konten lama di MDN yang layak untuk dikaji dan dibentuk kembali. Dorong kemampuan Anda sampai batas untuk membuat teknologi web yang dapat digunakan bahkan oleh pemula.
+
Buat latihan, contoh kode atau alat pembelajaran aktif (? hours)
+
Semua artikel pembelajaran kita membutuhkan apa yang kita sebut materi "belajar aktif", karena orang belajar lebih baik dengan melakukanya sendiri. Materi tersebut adalah latihan atau konten interaktif yang membantu pengguna untuk menerapkan dan memanipulasi ricnian konsep dalam sebuah artikel. Ada banyak cara yang mungkin untuk membuat konten pembelajaran yang aktif, dari menciptakan contoh kode dengan JSFiddle atau serupa, untuk membangun konten interaktif yang sepenuhnya dapat diubah dengan Thimble. Lepaskan kreativitas Anda!
+
+ +

Saya seorang Pengajar

+ +

MDN memiliki sejarah panjang keunggulan teknis, tapi kami tidak memiliki rasa yang baik dari cara terbaik untuk mengajarkan konsep untuk pendatang baru. Di sinilah kami perlu Anda, sebagai pengajar atau pendidik. Anda dapat membantu kami memastikan bahwa materi yang kami berikan baik, jalur pendidikan yang masuk akal bagi pembaca kami.

+ +
+
Membaca dan meninjau daftar istilah (15 menit)
+
Periksa daftar istilah dan jangan takut untuk membuat perubahan yang menurut Anda perlu. Jika Anda ingin mendiskusikan konten sebelum mengedit, ping kami di mailing list atau Saluran IRC kami.
+
Menulis daftar istilah baru (1 jam)
+
Jelas, definisi sederhana dari istilah dan ikhtisar dasar konsep dalam daftar istilah penting dalam memenuhi kebutuhan pemula '. Pengalaman Anda sebagai seorang pendidik dapat membantu membuat daftar istilah yang sangat baik; kami memiliki banyak istilah yang belum terdefinisikan yang perlu Anda perhatikan. Pilih satu dan kerjakan.
+
Tambahkan ilustrasi dan/ atau skema artikel (1 jam)
+
Seperti yang anda ketahui, ilustrasi merupakan bagian penting dari isi pembelajaran apapun. Ini adalah sesuatu yang kita sering kekurangan di MDN dan keterampilan Anda dapat membuat perbedaan di area itu. Kunjungi artikel yang kekurangan konten ilustrasi dan pilih salah satu yang Anda inginkan untuk membuat ilustrasi.
+
Membaca dan meninjau artikel pembelajaran (2 jam)
+
Hal ini mirip dengan meninjau daftar istilah (lihat di atas), tetapi membutuhkan lebih banyak waktu karena artikel biasanya sedikit lebih panjang.
+
Menulis artikel pembelajaran baru (4 jam)
+
Kita perlu artikel yang mudah tentang ekosistem Web dan topik fungsional lain di sekitarnya. Karena ini artikel pembelajaran perlu mendidik daripada mencoba untuk benar-benar menutupi segala sesuatu yang perlu diketahui, pengalaman Anda dalam mengetahui apa yang harus diliput dan bagaimana hal itu akan menjadi aset besar.
+
Buat latihan, kuis atau alat pembelajaran interaktif (? jam)
+
Semua artikel pembelajaran kita membutuhkan apa yang kita sebut materi "belajar aktif". Materi tersebut adalah latihan atau konten interaktif yang membantu pengguna belajar untuk menggunakan dan memanipulasi konsep yang dirincikan dalam sebuah artikel. Ada banyak hal yang dapat Anda lakukan di sini, dari membuat kuis untuk membangun konten interaktif yang sepenuhnya dapat diubah dengan Thimble. Lepaskan kreativitas Anda!
+
Buat jalur studi (? jam)
+
Dalam rangka memberikan tutorial yang progresif dan mudah dipahami, kita perlu membentuk konten jalur studi. Ini adalah cara untuk mengumpulkan konten yang ada dan mencari apa kekurangan artikel pembelajaran untuk menuliskannya.
+
diff --git a/files/id/orphaned/mdn/community/conversations/index.html b/files/id/orphaned/mdn/community/conversations/index.html new file mode 100644 index 0000000000..d39080c8a3 --- /dev/null +++ b/files/id/orphaned/mdn/community/conversations/index.html @@ -0,0 +1,56 @@ +--- +title: MDN community conversations +slug: MDN/Komunitas/Conversations +tags: + - Komunitas + - MDN Meta + - Panduan +translation_of: MDN/Community/Conversations +--- +
{{MDNSidebar}}

"Pekerjaan" dari MDN terjadi di situs MDN, tetapi "Komunitas" juga juga melakukannya melalui diskusi (tidak tersinkronisasi) dan chatting serta meeting (tersinkronisasi)

+ +

Diskusi Tidak Tersinkronisasi

+ +

Untuk berbagi informasi dan berdiskusi, MDN memiliki kategori sendiri ("MDN") di forum Wacana Mozilla. Gunakan kategori ini untuk semua topik yang terkait dengan MDN, termasuk pembuatan konten dokumentasi, terjemahan, dan perawatan; Pengembangan platform MDN; Dan perencanaan, penetapan tujuan, dan pelacakan kemajuan.

+ + + +

Arsip sejarah

+ +

Sebelum Juni 2017, diskusi terkait MDN berlangsung dalam daftar surat yang dikirimkan dan diarsipkan dengan kelompok Google. Jika Anda ingin mencari diskusi terakhir ini, Anda dapat melihat grup Google yang sesuai dengan milis lama. (Ya, kita tahu nama-nama ini tumpang tindih dan membingungkan. Kecelakaan pada masa sebelumnya. maafkan hal ini.)

+ +
+
mozilla.dev.mdc a.k.a. dev-mdc
+
Daftar ini untuk diskusi tentang konten dokumentasi di MDN.
+
mozilla.dev.mdn a.k.a. dev-mdn
+
Daftar ini adalah tentang pengembangan pekerjaan pada platform Kuma yang mendasari MDN.
+
mozilla.mdn a.k.a mdn@
+
Forum ini untuk diskusi perencanaan dan prioritas tingkat tinggi, untuk situs web MDN dan prakarsa terkait lainnya.
+
+ +

Obrolan di IRC

+ +

Internet Relay Chat (IRC) adalah Metode yang kami pilih untuk obrolan harian dan diskusi real-time antar anggota komunitas. Kami menggunakan beberapa saluran (channel) pada irc.mozilla.org server untuk diskusi terkait dengan MDN.

+ +
+
#mdn
+
channel ini adalah channel utama kami untuk mendiskusikan konten MDN. Kami berbicara tentang menulis, mengatur konten, dan sebagainya. Kami juga memiliki percakapan "water cooler" disini - Ini adalah cara komunitas kami tetap terhubung atau sekedar hang out. Ini juga merupakan tempat untuk berbicara tentang aspek-aspek lain dari MDN (selain pengembangan platform), seperti Demo Studio, profil, dan sebagainya
+
#mdndev
+
Channel ini adalah di mana tim pengembang kami - orang yang menulis kode atau yang membuat MDN bekerja - hang out dan membahas pekerjaan mereka sehari-hari. Kamu dipersilakan untuk bergabung dan berpartisipasi dalam pengembangan atau hanya bertanya tentang masalah yang kamu lihat tentang software
+
+ +

Channel ini sangat aktif selama hari kerja di Amerika Utara.

+ +

Anda mungkin ingin mempelajari lebih lanjut tentang IRC dan menggunakan instalan IRC client seperti ChatZilla. Hal ini dijalankan sebagai Firefox add-on, yang membuatnya cepat dan mudah untuk menginstal dan menggunakan. Jika Anda tidak terbiasa dengan IRC, cara mudah untuk bergabung menggunakan klien IRC berbasis web seperti scrollback, yang merupakan pra-dikonfigurasi dengan mdn dan mandev saluran.

+ +

Join our meetings (and other events)

+ +

The MDN team holds a number of regular meetings that are open to the MDN community. See the MDN Meetings page on the Mozilla wiki for details on the schedule, agendas and notes, and info on how to join.

+ +

See the MDN Events calendar for these and other meetings, local meetups, and other events. The recurring meetings are summarized on the MDN Meetings wiki page.

+ +

See the MDN Events calendar for these and other meetings, doc sprints, and other events. The recurring meetings are summarized on the MDN Meetings wiki page.

diff --git a/files/id/orphaned/mdn/community/index.html b/files/id/orphaned/mdn/community/index.html new file mode 100644 index 0000000000..a60c631f76 --- /dev/null +++ b/files/id/orphaned/mdn/community/index.html @@ -0,0 +1,75 @@ +--- +title: Gabung di Komunitas MDN +slug: MDN/Komunitas +translation_of: MDN/Community +--- +
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

Ringkasan

+ +
+

MDN (yang merupakan singkatan dari jaringan pengembang Mozilla) lebih dari wiki: Ini adalah komunitas pengembang bekerja sama untuk membuat MDN sumber daya yang luar biasa bagi para pengembang yang menggunakan teknologi Web terbuka. "Pekerjaan" yang terjadi di situs MDN, tapi "komunitas" juga terjadi melalui (asynchronous) diskusi dan (sinkron) chat online.

+
+ +

Kami akan senang jika kamu berkonstribusi di MDN, tapi kami akan lebih senang jika kamu berpartisipasi didalam komunitas MDN. Berikut adalah cara untuk bisa terhubung, ada tiga langkah mudah:

+ +
    +
  1. Buat akun MDN.
    2. +
  2. Berlangganan diskusi dev-mdc.
    3. +
  3. masuk ke IRC.
    4. +
+ +

Buat akun MDN

+ +

{{page("/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account") }}

+ +

Bergabung milis kami

+ +

untuk berbagi informasi dan memiliki diskusi yang sedang berlangsung, Mozilla memilki beberapa milis yang berguna. Berikut yang khusus untuk MDN adalah:

+ +
+
dev-mdc
+
Daftar ini adalah di mana kita memiliki diskusi yang sedang berlangsung tentang dokumentasi di MDN. Kami berbicara tentang perubahan proses, perbaikan yang kami buat, dan kami memilah-milah siapa yang ingin bekerja di mana konten. Ini sangat disarankan agar Anda bergabung di daftar ini jika Anda tertarik serius menyelam ke dokumentasi di MDN!
+
dev-mdn
+
Daftar ini adalah di mana kita memegang diskusi tentang pekerjaan pengembangan pada platform Kuma yang mendasari MDN ini. Jika anda penasaran tentang pekerjaan pengembangan yang terjadi di belakang layar, ingin terlibat dalam proses pembuatan decsisions tentang platform, atau bekerja pada patch untuk memperbaiki platform, Anda pasti harus terlibat dalam daftar ini.
+
mdn-drivers
+
Milis ini digunakan untuk membantu memutuskan prioritas pengembangan MDN. ini umumnya digunakan untuk diskusi apa yang harus dikerjakan selanjutnya, dan di mana kami pergi untuk menarik perhatian tim pengembangan ketika sebuah masalah serius perlu diperbaiki, setelah kita mengajukan bug untuk masalah ini.
+
+ +

Ada juga beberapa daftar khusus untuk masyarakat lokalisasi MDN. Jika komunitas anda sangat besar dan aktif, anda mungkin bisa mendapatkan daftar dibuat untuk komunitas anda; hanya meminta kami dan kami akan melihat ke dalamnya. Saat ini, bahasa ini memiliki daftar: Spanyol, Jepang dan Portugis.

+ +

Mengapa "dev-mdc"? Di masa lalu, ini dikenal sebagai "Mozilla Developer Center", atau MDC. Milis berawal dari masa itu, jadi dev-mdc. Ada juga dev-mdn mailing list, yaitu untuk diskusi tentang pengembangan platform Kuma yang MDN berjalan pada. Anda dipersilakan untuk bergabung itu juga, tapi itu tidak diperlukan jika Anda hanya tertarik pada konten MDN.

+ +

Masuk ke IRC

+ +

Internet Relay Chat (IRC) adalah metode pilihan untuk hari-hari chatting dan waktu nyata diskusi di antara anggota masyarakat. Kami menggunakan beberapa saluran pada irc.mozilla.org server untuk diskusi yang berkaitan dengan MDN.

+ +
+
#mdn
+
Saluran ini merupakan saluran utama untuk mendiskusikan konten MDN. Kami membahas tentang tulisan, organisasi konten dan sebagainya. Kami juga memiliki "air pendingin" dalam percakapan kami di sini - sebagai cara komunitas kami berbagi dan saling berhubungan. Juga sebagai tempat untuk membicarakan  aspek lain dari MDN (lebih dari pengembangan platform), semisal Studio Tampil, profile dan sebagainya.
+
#mdndev
+
Saluran ini adalah di mana tim-pengembangan kami orang yang menulis kode yang membuat MDN kerja-hang out dan membahas pekerjaan mereka sehari-hari. Anda dipersilakan untuk bergabung dan baik berpartisipasi dalam pembangunan atau hanya bertanya tentang masalah yang Anda lihat dengan perangkat lunak.
+
+ +

Saluran ini yang paling mungkin untuk menjadi aktif selama hari kerja di Amerika Utara.

+ +

Jika Anda tidak terbiasa dengan IRC, Cara tercepat untuk bergabung menggunakan Scrollback - a web-based IRC client yang pra-dikonfigurasi dengan mdn dan mdndev channel. Anda juga mungkin ingin Belajar tentang IRC dan menggunakan IRC client diinstal seperti ChatZilla. Hal ini dilaksanakan sebagai Firefox add-on, yang membuatnya cepat dan mudah untuk menginstal dan menggunakan.

+ +

Join our biweekly meetings (and other events)

+ +

Every other week, the MDN community holds an IRC-based meeting to exchange notes, talk about what we've been doing, and sort out what we'd like to do for the next two weeks. We also talk about development plans for the MDN platform itself, and often get updates about new and upcoming features of the site. These are casual, fun meetings, and everyone's welcome to participate.

+ +

See the MDN Community Meetings page on the Mozilla wiki for details on the schedule as well as agendas and notes for past and upcoming meetings.

+ +

See the MDN Events calendar for these and other meetings, doc sprints, and other events.

+ +

Project administrators

+ +

kamu dapat menghubungi MDN project administrator melalui email. BIla kamu ingin berbicara dengan pemimpin MDN documentation, ia bernama {{UserLink("Sheppy", "Eric Shepherd")}}, dan ia senang untuk menjawab pertanyaan yang kamu ajukan, atau membantu mencarikan orang yang lebih tepat.

+ +

Langkah Berikutnya

+ + 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 new file mode 100644 index 0000000000..aba3020441 --- /dev/null +++ b/files/id/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,44 @@ +--- +title: Bagaimana Membuat Akun MDN +slug: MDN/Contribute/Howto/Create_an_MDN_account +tags: + - Bagaimana + - Dokumentasi + - MDN Meta + - Panduan + - Pemula +translation_of: 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.

+ +
Mengapakah MDN membutuhkan alamat email saya?
+
+Alamat email Anda digunakan dalam pemulihan akun dan juga digunakan oleh administrator MDN untuk menghubungi Anda tentang akun atau kegiatan Anda dalam situs web.
+
+Selanjutnya, Anda dapat mendaftar untuk menerima pemberitahuan (seperti pada situs-situs tertentu diubah) serta pesan (misalnya, jika Anda ingin bergabung tim tes beta kami, Anda mungkin menerima email tentang fitur-fitur baru yang membutuhkan tes).
+
+Alamat email Anda tidak akan ditampilkan pada MDN dan akan digunakan mengikuti kebijakan privasi kami saja.
+ +
    +
  1. Pada bagian atas tiap halaman MDN Anda dapat menemukan tombol "Masuk melalui". Arahkan mouse Anda pada tombol ini (atau sentuh, jika Anda menggunakan perankat seluler) untuk menampilkan daftar otentikasi layanan yang kami mendukung untuk login ke MDN.
    2. +
  2. Pilih satu layanan login dari yang tersedia ditampilan. Saat ini hanya mendukung layanan melalui akun GitHub. Perlu diingat bahwa jika anda gunakan akun GitHub, profil GitHub Anda akan terhubung dengan halaman profil MDN anda.
    3. +
  3. Ikuti halaman yang mengarah ke halaman masuk akun GitHub tersebut untuk menghubungkan ke akun MDN Anda.
    4. +
  4. Saat layanan otentikasi kembali ke akun MDN, Anda akan diminta untuk mendaftarkan satu nama pengguna dan alamat email. Nama pengguna Anda akan tampil secara publik untuk kredit kerja yang Anda lakukan. Janganlah menggunakan alamat email Anda sebagai nama pengguna.
    5. +
  5. Tekan tombol berlabel Create my MDN profile.
    6. +
  6. Jika alamat email yang Anda masukkan pada langkah 4 tidak sama dengan alamat email yang Anda gunakan dengan layanan otentikasi, silahkan verifikasi email dengan mengecek email Anda dan tekan pada link pada email konfirmasi yang telah dikirim kepada Anda.
    7. +
+ +

Begitu saja! Anda telah memiliki akun MDN dan Anda dapat segera menyunting halaman!
+
+ Anda bisa klik pada nama Anda di bagian atas setiap halaman MDN untuk melihat profil publik Anda. Dari sana, Anda bisa klik tombol Edit untuk membuat perubahan pada profil atau melakukan penambahan pada profil Anda.

+ +
+

Note: Nama pengguna baru tidak boleh berisi spasi atau karakter "@". Ingatlah nama pengguna akan ditampilkan secara publik untuk menunjukkan kreasi yang Anda buat!

+
+ +

 

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 new file mode 100644 index 0000000000..7a9ffab8a9 --- /dev/null +++ b/files/id/orphaned/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,49 @@ +--- +title: How to do a technical review +slug: MDN/Contribute/Howto/Do_a_technical_review +translation_of: 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.

+ +

This article describes how to perform a technical review, thereby helping to ensure that MDN's content is accurate.

+ +
+
What is the task?
+
Reviewing and correcting the articles for technical accuracy and completeness.
+
Where does it need to be done?
+
In specific articles that are marked as requiring a technical review.
+
What do you need to know to do the task?
+
+
    +
  • Expert knowledge of the topic of the article you are reviewing. If reading the article doesn't teach you anything significantly new, consider yourself an expert.
    • +
  • How to edit a wiki article on MDN.
    • +
+
+
What are the steps to do it?
+
+
    +
  1. Pick an article to review: +
      +
    1. Go to the list of pages that need technical reviews. This lists all the pages for which a technical review has been requested.
      2. +
    2. Choose a page whose topic you are very familiar with.
      3. +
    3. Click on the article link to load the page.
      4. +
    +
    2. +
  2. Read the article, paying close attention to technical details: Is the article correct? Is there anything missing? Don't hesitate to switch to a different page if the first one you choose doesn't suit you.
    3. +
  3. If there are no errors, you don't need to edit the article to mark it as reviewed. Look for the "quick review" box in the left sidebar of the page. This yellow box lists any pending reviews and lets you clear their review request flag. It looks like this if a technical review has been requested:
    + Screenshot of the sidebar's box listing reviews that have been requested and allowing the flags to be changed.
    4. +
  4. Deselect the Technical checkbox, and click Save.
    5. +
  5. If you find errors that need to be corrected, you'll be glad to know that you can also change the review request status from within the editor. Here's the workflow: +
      +
    1. To edit the page, click the Edit button near the top of the page; this puts you into the MDN editor.
      2. +
    2. Fix any technical information is not correct, and/or add any important information that is missing.
      3. +
    3. Enter a Revision Comment at the bottom of the article. This is a brief message that describes what you did, like 'Technical review completed.' If you corrected information, include that in your comment, for example 'Technical review and fixed parameter descriptions.' This helps other contributors and site editors know what you changed and why. You can also mention if there were specific bits that you didn't feel qualfied to review
      4. +
    4. Deselect the Technical box under Review Needed? just below the Revision Comment area of the page.
      5. +
    5. Click the PUBLISH button.
      6. +
    +
    6. +
+ +

Congratulations! You've finished your first technical review! Thank you for your help!

+
+
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 new file mode 100644 index 0000000000..74aff54886 --- /dev/null +++ b/files/id/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,52 @@ +--- +title: How to do an editorial review +slug: MDN/Contribute/Howto/Do_an_editorial_review +tags: + - Dokumentasi + - MDN Meta + - Panduan +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +
{{MDNSidebar}}
{{IncludeSubnav("/id/docs/MDN")}}
+ +

Ulasan redaksi terdiri dari memperbaiki kesalahan ketik, ejaan, tata bahasa, pemakaian, atau teks yang salah dalam artikel. Tidak semua relawan ahli bahasa, tetapi terlepas dari pengetahuan mereka sangat berkontribusi pada artikel yang berguna, dimana membutuhkan salin-ubah dan koreksi cetakan.

+ +

Artikel ini menggambarkan bagaimana cara melakukan ulasan redaksi, dengan demikian membantu memastikan bahwa konten MDN akurat .

+ +
+
Apa sih tugasnya?
+
Salin-ubah dan perbaikan cetakan dari artikel yang membutuhkan ulasan redaksi.
+
Dimana ulasan redaksi dikerjakan?
+
Diantara artikel yang sudah ditandai membutuhkan ulasan redaksi.
+
Apa yang harus diketahui untuk menyelesaikan tugas?
+
Baik dalam tata bahasa dan kemampuan eja berbahasa Inggris. Seseorang pengulas redaksi memastikan tata bahasa, ejaan, dan kata dengan benar serta masuk akal, dan berikut juga MDN writing style guide.
+
Apa langkah-langkah untuk melakukannya?
+
+
    +
  1. Pilih artikel yang ingin diulas: +
      +
    1. Ke daftar artikel yang membutuhkan ulasan.  Ini berisi halaman yang diminta untuk diulas.
      2. +
    2. Pilih halaman yang meiliki judul bahasa Inggris dan yang tidak diawali Template: (Template: halaman yang mengandung MDN macro code.)
      3. +
    3. Klik tautan pada artikel untuk menampilkan halaman.
      4. +
    +
    2. +
  2. Baca artikelnya, berikan perhatian pada kesalahan ketik, ejaan, tata bahasa, atau penggunaan kata yang salah. Jangan ragu untuk beralih ke halaman yang berbeda jika pertama yang Anda pilih tidak sesuai dengan Anda .
    3. +
  3. Jika tidak terdapat kesalahan, anda tidak perlu merubah artikel untuk menandakan itu telah diulas. Cari kotak "quick review" di sisi kiri dari halaman:
    + Screenshot of the editorial review request sidebar box
    + Hapus centang pada kotak Editorial dan klik Save.
    4. +
  4. Jika anda menemukan error yang perlu di koreksi: +
      +
    1. Klik tombol Sunting di atas halaman; ini akan membawa anda ke MDN editor.
      2. +
    2. Mengoreksi kesalahan ketik, penulisan, tata bahasa, atau penggunaan kode yang error yang anda temukan. Anda tidak perlu memperbaiki semuanya, tapi pastikan anda meninggalkan permintaan editor review pada halaman yang anda rasa belum sepenuhnya sempurna untuk anda menyelesaikannya hingga keseluruhan artikel.
      3. +
    3. Masukan Revision Comment pada bawah artikel; seperti 'Editorial review: perbaikan salah ketik, tata bahasa & penulisan.' Ini memungkinkan kontributor lain dan editor situs tahu apa yang anda rubah dan kenapa.
      4. +
    4. Hapus centang pada kotak Editorial dibawah Review Needed?. Tepatnya pada bawah komentar revisi pada halaman.
      5. +
    5. Klik tombol Publish.
      6. +
    +
    5. +
+ +
+

Perubahan yang anda buat mungkin tidak langsung di tampilkan setelah disimpan; disini ada rentang waktu ketika halaman di proses dan disimpan.

+
+
+
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 new file mode 100644 index 0000000000..ad89ef0686 --- /dev/null +++ b/files/id/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -0,0 +1,46 @@ +--- +title: How to set the summary for a page +slug: MDN/Contribute/Howto/Set_the_summary_for_a_page +translation_of: 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.

+ + + + + + + + + + + + + + + + + + + +
What is the task?Marking the text within a page that should be used as its summary in other contexts; this task might include writing appropriate text if needed.
Where does it need to be done?In pages that lack a summary or have a less-than-great summary.
What do you need to know to do the task?Ability to use the MDN editor; good English writing skills; enough familiarity with the topic of the page to write a good summary.
What are the steps to do it? +
    +
  1. Pick a page on which to set the summary: +
      +
    1. In the MDN documentation status page, click the link under Sections for a topic that you know something about (for example, HTML).
      2. +
    2. On the topic's documentation status page, click the Pages header in the Summary table. This takes you to an index of all the pages in that topic section; it shows the page links in the left column, and the tags and summaries in the right column.
      3. +
    3. Pick a page that is missing a summary, or that has a poor summary.
      4. +
    4. Click the link to go to that page.
      5. +
    +
    2. +
  2. Click Edit to open the page in the MDN editor.
    3. +
  3. Look for a sentence or two that works as a summary out of context. If needed, edit the existing content to create or modify sentences to be a good summary.
    4. +
  4. Select the text to be used as a summary.
    5. +
  5. In the Styles widget of the editor toolbar, select SEO Summary. (In the page source, this creates a {{HTMLElement("span")}} element with class="seoSummary" around the selected text.)
    6. +
  6. Save your changes with a revision comment like "Set the page summary."
    7. +
+
+

 

+

 

+

 

diff --git a/files/id/orphaned/mdn/tools/page_deletion/index.html b/files/id/orphaned/mdn/tools/page_deletion/index.html new file mode 100644 index 0000000000..df0ba8ef81 --- /dev/null +++ b/files/id/orphaned/mdn/tools/page_deletion/index.html @@ -0,0 +1,17 @@ +--- +title: Menghapus Halaman +slug: MDN/User_guide/Menghapus_halaman +tags: + - MDN + - Panduan + - Proyek MDC +translation_of: MDN/Tools/Page_deletion +--- +
{{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:

+
    +
  1. Jangan hapus atau mengganti konten dari halaman. Kami ingin memiliki catatan dari halaman seperti pertama dihapus.
    2. +
  2. Tambahkan label "sampah" di halaman tersebut. Jangan hapus label lainnya.
    3. +
  3. Jika halaman tersebut sangat mendesak untuk segera dihapus (Sebagai contoh, konten berisi hal yang tidak sopan, penghinaan, atau secara teknis berbahaya), beritahukan pada admin MDN.
    4. +
+

Admin akan menghapus halaman tersebut jika memungkinkan, setelah mengkonfirmasi bahwa penghapusan tersebut boleh dilakukan.

diff --git a/files/id/pengembangan_web/index.html b/files/id/pengembangan_web/index.html deleted file mode 100644 index 4370766311..0000000000 --- a/files/id/pengembangan_web/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Pengembangan Web -slug: Pengembangan_Web -translation_of: Web/Guide -translation_of_original: Web_Development ---- -

Pengembangan web terdiri dari semua aspek dalam mengembangkan sebuah situs web atau aplikasi web

- -

Pelajari cara membuat apapun dari situs web sederhana sampai yang kompleks , situs web yang sangat interaktif dengan menggunakan teknologi Web terbaru yang dapat anda temukan dari berbagai artikel di sini

- - - - - - - - -
-

Topik Dokumentasi

- -

Teknologi

- -
-
Pengantar Ke Pengembangan Web
-
Sebuah paduan untuk belajar bagaimana mengembangkan Web .
-
HTML
-
HyperText Markup Language merupakan bahasa dasar untuk membuat halaman web dan dokumen lain yang di tampilkan di browser.
-
CSS
-
Cascading Style Sheets memungkinkan untuk mengatur tata letak dan desain halaman Web.
-
JavaScript
-
JavaScript merupakan bahasa scripting yang umum digunakan untuk membangun aplikasi web; juga di gunakan pada pengembangan perangkat lunak berbasis Mozilla.
-
DOM
-
The Document Object Model is an API for HTML and XML documents, providing a structural representation of the document that you can modify in order to alter its visual presentation.
-
AJAX
-
Asynchronous JavaScript and XML isn't so much a technology as a combination of technologies; using JavaScript and other modern web technologies together to create dynamic web applications.
-
XHTML
-
Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.
-
SVG
-
Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.
-
- -

Strategi

- -
-
Web standar
-
Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.
-
Desain Web Responsive
-
Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.
-
Writing forward-compatible websites
-
Best practices for creating websites that do not break when browsers are updated.
-
Pengembangan Web Mobile
-
Developing sites for be viewed on mobile devices involves some unique approaches that may not be familiar to those accustomed to developing for desktop browsers.
-
Pengembang Mozilla Web  FAQ
-
Frequently asked questions from Web developers. With answers!
-
- -

Lihat Semua...

- 		-

Komunitas

- - - -

Alat

- - - -

Lihat Semua...

-
- -

 

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